/* =============================================================================
   Mountain Medical Spa — Design System & Component Styles
   Mountain-modern · soft clinical elegance · warm spa luxury
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design Tokens
   -------------------------------------------------------------------------- */
:root {
  /* Palette — Ruidoso high desert: piñon forest + New Mexico clay */
  --mms-ivory:        #F4EEE3;   /* warm bone / paper (page base) */
  --mms-cream:        #FBF7EF;   /* lighter surface (cards) */
  --mms-champagne:    #E7DAC4;   /* high-desert sand */
  --mms-taupe:        #C9B79C;   /* desert taupe / sand (labels on dark) */
  --mms-stone:        #8C8170;   /* stone */
  --mms-forest:       #243029;   /* deep piñon forest (primary dark) */
  --mms-forest-soft:  #33493A;
  --mms-sage:         #8FA288;   /* muted sage */
  --mms-sage-soft:    #B0C0A8;
  --mms-charcoal:     #2A241B;   /* warm near-black (footer) */
  --mms-copper:       #B5623C;   /* NM clay — decorative accent (icons, borders) */
  --mms-copper-deep:  #8E4A2C;   /* clay for text/links/eyebrows (AA, 5.74:1) */
  --mms-copper-cta:   #9E4F2C;   /* clay for solid CTAs (AA w/ white, 5.82:1) */
  --mms-terracotta:   #C2734E;   /* bright clay accent */
  --mms-sky:          #6E8C8A;   /* muted high-desert teal (secondary) */

  /* Functional roles */
  --mms-bg:           var(--mms-ivory);
  --mms-surface:      var(--mms-cream);
  --mms-surface-alt:  #EDE4D3;
  --mms-ink:          #221E18;   /* primary text (14:1 on bone) */
  --mms-ink-soft:     #534C40;   /* secondary text */
  --mms-ink-muted:    #665E4D;   /* muted text — AA on light (5.56:1) */
  --mms-line:         #E2D6C2;   /* hairlines / borders */
  --mms-accent:       var(--mms-copper);
  --mms-on-dark:      #F4EEE3;
  --mms-on-dark-soft: #CFC6B4;

  /* Typography — Fraunces (characterful serif) · National Park (signage) · Hanken (body) */
  --mms-font-display: "Fraunces", "Hoefler Text", Georgia, "Times New Roman", serif;
  --mms-font-body:    "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --mms-font-label:   "National Park", "Hanken Grotesk", system-ui, sans-serif;

  --mms-step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.92rem);
  --mms-step-0:  clamp(1rem, 0.96rem + 0.20vw, 1.13rem);
  --mms-step-1:  clamp(1.20rem, 1.12rem + 0.40vw, 1.45rem);
  --mms-step-2:  clamp(1.55rem, 1.36rem + 0.85vw, 2.20rem);
  --mms-step-3:  clamp(1.95rem, 1.62rem + 1.55vw, 3.30rem);
  --mms-step-4:  clamp(2.55rem, 1.95rem + 2.70vw, 4.90rem);
  --mms-step-5:  clamp(3.30rem, 2.30rem + 4.60vw, 7.00rem);

  /* Spacing scale */
  --mms-space-2xs: 0.375rem;
  --mms-space-xs:  0.625rem;
  --mms-space-sm:  1rem;
  --mms-space-md:  1.5rem;
  --mms-space-lg:  2.5rem;
  --mms-space-xl:  4rem;
  --mms-space-2xl: 6rem;
  --mms-space-3xl: 9rem;

  /* Structure */
  --mms-maxw:        1240px;
  --mms-maxw-narrow: 820px;
  --mms-gutter:      clamp(1.25rem, 5vw, 4rem);
  --mms-radius-sm:   8px;
  --mms-radius:      16px;
  --mms-radius-lg:   28px;
  --mms-radius-pill: 999px;

  --mms-shadow-sm: 0 2px 8px rgba(44, 58, 48, 0.06);
  --mms-shadow:    0 12px 40px -12px rgba(44, 58, 48, 0.18);
  --mms-shadow-lg: 0 30px 70px -24px rgba(44, 58, 48, 0.28);

  --mms-ease:    cubic-bezier(0.22, 1, 0.36, 1);
  --mms-dur:     0.32s;  /* micro-interaction timing (≈300ms, per UX guidance) */
  --mms-header-h: 96px;
  /* --mms-header-h is the header row's design height and drives its
     min-height. --mms-header-offset is the header's MEASURED height, written
     by main.js, and is what anything positioned below the header should use.
     They must stay separate: feeding the measurement back into min-height
     grew the header by its 1px border on every resize tick, without end. */
}

/* -----------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

/* NOTE: `scroll-behavior: smooth` is deliberately NOT set on the root.
   On the root element it also animates the browser's own scroll restoration
   when you navigate back to a page, and while the page height is still
   settling (images decoding, fonts swapping) that animation can chase a
   moving target and land at the bottom of the document. Smooth scrolling for
   anchors and the back-to-top button is done in JS instead, where it only
   ever runs in response to a click. */
html { -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--mms-bg);
  color: var(--mms-ink);
  font-family: var(--mms-font-body);
  font-size: var(--mms-step-0);
  font-weight: 300;
  line-height: 1.7;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* clip, not hidden: overflow-x:hidden turns body into a scroll container,
     which silently breaks position:sticky on the header (it scrolled away
     with the page). Browsers without clip get hidden via the @supports
     fallback in section 53. */
  overflow-x: clip;
}

img, picture, svg, video { display: block; max-width: 100%; height: auto; }
/* No global fill. Every icon in this theme sets its own fill presentation
   attribute -- "none" for the outline style, "currentColor" when a caller
   asks for a solid one -- and a CSS fill here overrides all of them, because
   CSS beats presentation attributes. That turned every icon built from a
   closed shape into a solid blob: the face, clock, compass and check-circle
   became discs, mail and calendar became rectangles, and Instagram became a
   plain rounded square. */

a { color: var(--mms-forest); text-decoration-color: rgba(181,98,60,0.5); text-underline-offset: 0.18em; transition: color var(--mms-dur) var(--mms-ease); }
a:hover { color: var(--mms-copper-deep); }

h1, h2, h3, h4, h5 {
  font-family: var(--mms-font-display);
  font-weight: 480;
  font-optical-sizing: auto;
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: var(--mms-forest);
  text-wrap: balance;
}
h1, h2 { font-variation-settings: "SOFT" 0, "WONK" 0; }
h1 { font-size: var(--mms-step-5); }
h2 { font-size: var(--mms-step-4); }
h3 { font-size: var(--mms-step-2); }
h4 { font-size: var(--mms-step-1); }
h5 { font-size: var(--mms-step-0); }
h6 { font-size: var(--mms-step--1); font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.14em; }

/* Display line-height and negative tracking belong on display sizes only.
   At 1.03 a two-line card title in Fraunces collides its ascenders and
   descenders, which five templates were papering over with inline font-size
   overrides. Tightening tracking below ~2.5rem reads cramped, not considered. */
h3 { line-height: 1.16; letter-spacing: -0.008em; }
h4, h5 { line-height: 1.25; letter-spacing: 0; }

p { text-wrap: pretty; }
ul, ol { padding-left: 1.2em; }

::selection { background: var(--mms-champagne); color: var(--mms-charcoal); }

/* Focus visibility (accessibility) */
:focus-visible {
  outline: 3px solid var(--mms-copper);
  outline-offset: 3px;
  border-radius: 4px;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: -100px;
  transform: translateX(-50%);
  background: var(--mms-forest);
  color: var(--mms-on-dark);
  padding: 0.8rem 1.4rem;
  border-radius: 0 0 var(--mms-radius-sm) var(--mms-radius-sm);
  z-index: 9999;
  transition: top 0.2s ease;
}
.skip-link:focus { top: 0; }

/* -----------------------------------------------------------------------------
   3. Layout helpers
   -------------------------------------------------------------------------- */
.mms-container {
  width: 100%;
  max-width: var(--mms-maxw);
  margin-inline: auto;
  padding-inline: var(--mms-gutter);
}
.mms-container--narrow { max-width: var(--mms-maxw-narrow); }

.mms-section { padding-block: clamp(3.5rem, 8vw, var(--mms-space-3xl)); }
.mms-section--tight { padding-block: clamp(2.5rem, 5vw, var(--mms-space-2xl)); }

.mms-bg-cream   { background: var(--mms-surface); }
.mms-bg-alt     { background: var(--mms-surface-alt); }
.mms-bg-forest  { background: var(--mms-forest); color: var(--mms-on-dark); }
.mms-bg-forest h1, .mms-bg-forest h2, .mms-bg-forest h3 { color: var(--mms-on-dark); }
.mms-bg-sage    { background: var(--mms-sage-soft); }

.mms-grid { display: grid; gap: var(--mms-space-lg); }
.mms-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); }
.mms-grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }
.mms-grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(230px, 100%), 1fr)); }

/* -----------------------------------------------------------------------------
   4. Section eyebrow / titles
   -------------------------------------------------------------------------- */
.mms-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-family: var(--mms-font-body);
  font-size: var(--mms-step--1);
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--mms-copper-deep);
  margin-bottom: var(--mms-space-sm);
}
.mms-eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--mms-copper);
}
.mms-bg-forest .mms-eyebrow { color: var(--mms-taupe); }

.mms-section-head { max-width: 720px; margin-bottom: var(--mms-space-xl); }
.mms-section-head--center { margin-inline: auto; text-align: center; }
.mms-section-head--center .mms-eyebrow::before { display: none; }
.mms-lede { font-size: var(--mms-step-1); color: var(--mms-ink-soft); font-weight: 300; }

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.mms-btn {
  --_bg: var(--mms-forest);
  --_fg: var(--mms-on-dark);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--mms-font-body);
  font-size: var(--mms-step--1);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 1rem 2rem;
  border: 1px solid var(--_bg);
  border-radius: var(--mms-radius-pill);
  background: var(--_bg);
  color: var(--_fg);
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: transform var(--mms-dur) var(--mms-ease),
              box-shadow var(--mms-dur) var(--mms-ease),
              background-color var(--mms-dur) var(--mms-ease),
              color var(--mms-dur) var(--mms-ease);
}
.mms-btn:hover { transform: translateY(-2px); box-shadow: var(--mms-shadow); color: var(--_fg); }
.mms-btn:active { transform: translateY(0); }

.mms-btn--accent { --_bg: var(--mms-copper-cta); --_fg: #fff; }
.mms-btn--accent:hover { --_bg: var(--mms-copper-deep); }

.mms-btn--ghost {
  --_bg: transparent;
  --_fg: var(--mms-forest);
  border-color: var(--mms-forest);
}
.mms-btn--ghost:hover { --_bg: var(--mms-forest); --_fg: var(--mms-on-dark); }

.mms-bg-forest .mms-btn--ghost { --_fg: var(--mms-on-dark); border-color: rgba(244,239,230,0.5); }
.mms-bg-forest .mms-btn--ghost:hover { --_bg: var(--mms-on-dark); --_fg: var(--mms-forest); }

.mms-btn--block { width: 100%; }

.mms-link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: var(--mms-step--1);
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--mms-copper-deep);
}
.mms-link-arrow svg { width: 16px; transition: transform var(--mms-dur) var(--mms-ease); }
.mms-link-arrow:hover svg { transform: translateX(5px); }

/* -----------------------------------------------------------------------------
   6. Header / Navigation
   -------------------------------------------------------------------------- */
.mms-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: color-mix(in srgb, var(--mms-ivory) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.4s ease, background-color 0.4s ease, box-shadow 0.4s ease;
}
.mms-header.is-scrolled {
  border-bottom-color: var(--mms-line);
  box-shadow: var(--mms-shadow-sm);
}
.mms-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mms-space-md);
  min-height: var(--mms-header-h);
}
.mms-brand { display: inline-flex; align-items: center; gap: 0.7rem; text-decoration: none; color: var(--mms-forest); }
.mms-brand img { max-height: 66px; width: auto; }
.mms-brand__text { display: flex; flex-direction: column; line-height: 1; }
.mms-brand__name { font-family: var(--mms-font-display); font-size: 1.62rem; font-weight: 600; letter-spacing: 0.01em; }
.mms-brand__tag { font-size: 0.68rem; letter-spacing: 0.32em; text-transform: uppercase; color: var(--mms-copper-deep); margin-top: 4px; }

.mms-nav { display: flex; align-items: center; gap: clamp(1rem, 2vw, 2rem); }
.mms-nav__menu { display: flex; align-items: center; gap: clamp(0.8rem, 1.6vw, 1.8rem); list-style: none; margin: 0; padding: 0; }
.mms-nav__menu a {
  font-size: 0.86rem;
  font-weight: 400;
  letter-spacing: 0.06em;
  text-decoration: none;
  color: var(--mms-ink);
  position: relative;
  padding-block: 0.4rem;
}
.mms-nav__menu a::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 0; height: 1.5px;
  background: var(--mms-copper);
  transition: width var(--mms-dur) var(--mms-ease);
}
.mms-nav__menu a:hover::after,
.mms-nav__menu .current-menu-item > a::after { width: 100%; }

/* Dropdown submenus */
.mms-nav__menu .menu-item-has-children { position: relative; }
.mms-nav__menu .sub-menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius);
  box-shadow: var(--mms-shadow);
  padding: 0.6rem;
  list-style: none;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: all var(--mms-dur) var(--mms-ease);
}
.mms-nav__menu .menu-item-has-children:hover > .sub-menu,
.mms-nav__menu .menu-item-has-children:focus-within > .sub-menu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.mms-nav__menu .sub-menu a { display: block; padding: 0.55rem 0.8rem; border-radius: var(--mms-radius-sm); }
.mms-nav__menu .sub-menu a::after { display: none; }
.mms-nav__menu .sub-menu a:hover { background: var(--mms-surface-alt); }

.mms-nav__cta { display: inline-flex; }

/* Hamburger */
.mms-burger {
  display: none;
  flex-direction: column;
  gap: 5px;
  width: 44px; height: 44px;
  align-items: center; justify-content: center;
  background: transparent;
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-sm);
  cursor: pointer;
}
.mms-burger span { width: 22px; height: 2px; background: var(--mms-forest); transition: transform 0.3s ease, opacity 0.3s ease; }
.mms-burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mms-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mms-burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 1024px) {
  .mms-burger { display: flex; }
  .mms-nav {
    /* The header's backdrop-filter makes IT the containing block for this
       fixed panel (not the viewport), so viewport insets resolved against an
       85px-tall box and the open menu was only ~136px tall. Hang the panel
       off the header's bottom edge and size it to the screen instead. */
    position: fixed;
    top: 100%; left: 0; right: 0; bottom: auto;
    height: calc(100vh - var(--mms-header-offset, var(--mms-header-h)));
    height: calc(100dvh - var(--mms-header-offset, var(--mms-header-h)));
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;
    background: var(--mms-ivory);
    padding: var(--mms-space-lg) var(--mms-gutter) var(--mms-space-2xl);
    transform: translateX(100%);
    transition: transform 0.45s var(--mms-ease);
    overflow-y: auto;
    z-index: 899;
  }
  .mms-nav.is-open { transform: translateX(0); }
  .mms-nav__menu { flex-direction: column; align-items: stretch; width: 100%; gap: 0; }
  .mms-nav__menu li { border-bottom: 1px solid var(--mms-line); }
  .mms-nav__menu a { display: block; padding: 1rem 0; font-size: 1.1rem; }
  .mms-nav__menu .sub-menu {
    position: static; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: none; background: transparent;
    padding: 0 0 0.6rem 1rem;
  }
  .mms-nav__cta { margin-top: var(--mms-space-md); }
  .mms-nav__cta .mms-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   7. Hero
   -------------------------------------------------------------------------- */
.mms-hero {
  position: relative;
  min-height: clamp(560px, 88vh, 880px);
  display: flex;
  align-items: center;
  color: var(--mms-on-dark);
  overflow: hidden;
  isolation: isolate;
}
.mms-hero__media { position: absolute; inset: 0; z-index: -2; }
.mms-hero__media img { width: 100%; height: 100%; object-fit: cover; }
.mms-hero__media::after {
  content: "";
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg, rgba(28,36,30,0.30) 0%, rgba(28,36,30,0.55) 60%, rgba(28,36,30,0.78) 100%),
    linear-gradient(90deg, rgba(28,36,30,0.55) 0%, rgba(28,36,30,0.15) 70%);
}
.mms-hero--gradient .mms-hero__media {
  background:
    radial-gradient(120% 120% at 15% 10%, rgba(141,160,140,0.45) 0%, transparent 50%),
    radial-gradient(120% 120% at 90% 80%, rgba(181,98,60,0.30) 0%, transparent 55%),
    linear-gradient(160deg, var(--mms-forest) 0%, var(--mms-charcoal) 100%);
}
.mms-hero--gradient .mms-hero__media::after { background: linear-gradient(180deg, transparent, rgba(28,36,30,0.35)); }

/* Animated mist layer */
.mms-mist {
  position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(60% 50% at 20% 90%, rgba(248,244,237,0.18) 0%, transparent 60%),
    radial-gradient(50% 40% at 80% 100%, rgba(248,244,237,0.14) 0%, transparent 65%);
  animation: mms-mist-drift 18s ease-in-out infinite alternate;
  pointer-events: none;
}
@keyframes mms-mist-drift {
  0%   { transform: translate3d(-3%, 2%, 0) scale(1.05); opacity: 0.7; }
  100% { transform: translate3d(4%, -2%, 0) scale(1.15); opacity: 1; }
}

/* Topographic line overlay (decorative) */
.mms-topo {
  position: absolute; inset: 0; z-index: -1;
  opacity: 0.12;
  background-repeat: repeat;
  pointer-events: none;
}

/* Was a flat 9rem top and bottom at every width, which on a phone left the
   headline floating in a wall of empty space above the fold. */
.mms-hero__inner { position: relative; padding-block: clamp(3.5rem, 10vw, 9rem); max-width: 760px; }
.mms-hero__title { color: #fff; font-size: var(--mms-step-5); margin-bottom: var(--mms-space-md); text-shadow: 0 2px 30px rgba(0,0,0,0.2); }
.mms-hero__sub { font-size: var(--mms-step-1); color: var(--mms-on-dark); max-width: 56ch; margin-bottom: var(--mms-space-lg); font-weight: 300; }
.mms-hero__actions { display: flex; flex-wrap: wrap; gap: var(--mms-space-sm); margin-bottom: var(--mms-space-lg); }
.mms-hero__micro { display: inline-flex; align-items: center; gap: 0.5rem; font-size: var(--mms-step--1); letter-spacing: 0.08em; color: var(--mms-on-dark-soft); }
.mms-hero__micro svg { width: 16px; }

/* Hero trust row */
.mms-trust {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--mms-space-lg) * -1);
}
.mms-trust__inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius);
  box-shadow: var(--mms-shadow);
  overflow: hidden;
}
.mms-trust__item { display: flex; align-items: center; gap: 0.8rem; padding: 1.3rem 1.5rem; }
.mms-trust__item + .mms-trust__item { border-left: 1px solid var(--mms-line); }
.mms-trust__item svg { width: 26px; color: var(--mms-copper); flex-shrink: 0; }
.mms-trust__item span { font-size: 0.9rem; line-height: 1.35; color: var(--mms-ink-soft); }
@media (max-width: 640px) {
  .mms-trust__item + .mms-trust__item { border-left: none; border-top: 1px solid var(--mms-line); }
}

/* -----------------------------------------------------------------------------
   8. Editorial two-column (intro / lifestyle)
   -------------------------------------------------------------------------- */
.mms-split { display: grid; gap: clamp(2rem, 5vw, 4.5rem); align-items: center; grid-template-columns: 1fr 1fr; }
.mms-split--reverse .mms-split__media { order: 2; }
@media (max-width: 880px) { .mms-split { grid-template-columns: 1fr; } .mms-split--reverse .mms-split__media { order: 0; } }

.mms-figure { position: relative; border-radius: var(--mms-radius-lg); overflow: hidden; box-shadow: var(--mms-shadow); }
.mms-figure img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 5; }
.mms-figure--collage { display: grid; grid-template-columns: 1.3fr 1fr; grid-template-rows: 1fr 1fr; gap: 0.8rem; box-shadow: none; }
.mms-figure--collage img { border-radius: var(--mms-radius); box-shadow: var(--mms-shadow-sm); aspect-ratio: auto; height: 100%; }
.mms-figure--collage img:first-child { grid-row: span 2; aspect-ratio: 3 / 5; }

.mms-badge-float {
  position: absolute;
  bottom: 1.4rem; right: 1.4rem;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--mms-surface);
  color: var(--mms-forest);
  padding: 0.7rem 1.2rem;
  border-radius: var(--mms-radius-pill);
  box-shadow: var(--mms-shadow);
  font-size: 0.82rem; font-weight: 500; letter-spacing: 0.08em;
}
.mms-badge-float svg { width: 16px; color: var(--mms-copper); }

.mms-prose > * + * { margin-top: var(--mms-space-md); }
.mms-prose h2 { margin-bottom: var(--mms-space-sm); }

/* -----------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */
.mms-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg);
  overflow: hidden;
  transition: transform var(--mms-dur) var(--mms-ease), box-shadow var(--mms-dur) var(--mms-ease);
}
.mms-card:hover { transform: translateY(-6px); box-shadow: var(--mms-shadow-lg); }
.mms-card__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--mms-surface-alt); }
.mms-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s var(--mms-ease); }
.mms-card:hover .mms-card__media img { transform: scale(1.06); }
.mms-card__icon {
  display: grid; place-items: center;
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--mms-surface-alt);
  color: var(--mms-copper);
  margin: var(--mms-space-md) var(--mms-space-md) 0;
}
.mms-card__icon svg { width: 30px; }
.mms-card__body { padding: var(--mms-space-md); display: flex; flex-direction: column; gap: 0.7rem; flex: 1; }
.mms-card__cat { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mms-copper-deep); }
.mms-card__title { font-size: var(--mms-step-2); }
.mms-card__desc { color: var(--mms-ink-soft); font-size: 0.98rem; }
.mms-card__foot { margin-top: auto; padding-top: 0.4rem; }

/* Service meta rows (best for / downtime) */
.mms-card__meta { list-style: none; padding: 0; margin: 0.4rem 0 0; display: grid; gap: 0.45rem; font-size: 0.86rem; }
.mms-card__meta li { display: flex; gap: 0.5rem; color: var(--mms-ink-soft); }
.mms-card__meta strong { color: var(--mms-forest); font-weight: 500; min-width: 92px; display: inline-block; }

/* -----------------------------------------------------------------------------
   10. Consultation selector & treatment finder
   -------------------------------------------------------------------------- */
.mms-choice-grid { display: grid; gap: var(--mms-space-md); grid-template-columns: repeat(auto-fit, minmax(min(260px,100%),1fr)); }
.mms-choice {
  text-align: left;
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius);
  padding: var(--mms-space-md);
  cursor: pointer;
  font-family: inherit;
  font-size: var(--mms-step-0);
  color: var(--mms-ink);
  transition: border-color var(--mms-dur) var(--mms-ease), transform var(--mms-dur) var(--mms-ease), box-shadow var(--mms-dur) var(--mms-ease);
}
.mms-choice:hover { transform: translateY(-4px); box-shadow: var(--mms-shadow); }
.mms-choice[aria-pressed="true"], .mms-choice.is-active { border-color: var(--mms-copper); box-shadow: 0 0 0 2px rgba(181,98,60,0.25); }
.mms-choice__icon { width: 40px; height: 40px; color: var(--mms-copper); margin-bottom: 0.6rem; }
.mms-choice__label { font-family: var(--mms-font-display); font-size: var(--mms-step-1); display: block; }
.mms-choice__hint { font-size: 0.88rem; color: var(--mms-ink-soft); margin-top: 0.3rem; }

.mms-recommend {
  margin-top: var(--mms-space-lg);
  padding: var(--mms-space-lg);
  border-radius: var(--mms-radius);
  background: var(--mms-surface-alt);
  border: 1px dashed var(--mms-taupe);
}
.mms-recommend[hidden] { display: none; }

/* Finder quiz */
.mms-quiz { background: var(--mms-surface); border: 1px solid var(--mms-line); border-radius: var(--mms-radius-lg); padding: clamp(1.5rem, 4vw, 3rem); box-shadow: var(--mms-shadow); }
.mms-quiz__progress { height: 4px; background: var(--mms-line); border-radius: var(--mms-radius-pill); overflow: hidden; margin-bottom: var(--mms-space-lg); }
.mms-quiz__bar { height: 100%; width: 0; background: var(--mms-copper); transition: width 0.5s var(--mms-ease); }
.mms-quiz__step { display: none; }
.mms-quiz__step.is-active { display: block; animation: mms-fade-up 0.5s var(--mms-ease); }
.mms-quiz__q { font-family: var(--mms-font-display); font-size: var(--mms-step-2); margin-bottom: var(--mms-space-md); }
.mms-quiz__options { display: grid; gap: 0.7rem; grid-template-columns: repeat(auto-fit, minmax(min(200px,100%),1fr)); }
.mms-quiz__opt {
  text-align: left; padding: 0.9rem 1.1rem; border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius); background: var(--mms-cream); cursor: pointer;
  font-family: inherit; font-size: 0.96rem; color: var(--mms-ink);
  transition: border-color 0.3s, background 0.3s, transform 0.3s;
}
.mms-quiz__opt:hover { border-color: var(--mms-copper); transform: translateY(-2px); }
.mms-quiz__opt.is-active { border-color: var(--mms-copper); background: var(--mms-surface-alt); }
.mms-quiz__nav { display: flex; justify-content: space-between; align-items: center; margin-top: var(--mms-space-lg); }
.mms-quiz__result { display: none; }
.mms-quiz__result.is-active { display: block; animation: mms-fade-up 0.5s var(--mms-ease); }
.mms-quiz__tags { display: flex; flex-wrap: wrap; gap: 0.6rem; margin: var(--mms-space-md) 0; }
.mms-tag { display: inline-block; padding: 0.5rem 1rem; border-radius: var(--mms-radius-pill); background: var(--mms-surface-alt); border: 1px solid var(--mms-line); font-size: 0.85rem; }

/* -----------------------------------------------------------------------------
   11. Journey / process timeline
   -------------------------------------------------------------------------- */
.mms-journey { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--mms-space-lg); }
.mms-journey::before {
  content: ""; position: absolute; top: 34px; left: 8%; right: 8%; height: 2px;
  background: repeating-linear-gradient(90deg, var(--mms-taupe) 0 8px, transparent 8px 16px);
  z-index: 0;
}
.mms-step { position: relative; z-index: 1; text-align: center; }
.mms-step__num {
  display: grid; place-items: center;
  width: 68px; height: 68px; margin: 0 auto var(--mms-space-sm);
  border-radius: 50%;
  background: var(--mms-surface);
  border: 2px solid var(--mms-copper);
  color: var(--mms-copper-deep);
  font-family: var(--mms-font-display); font-size: 1.6rem; font-weight: 600;
}
.mms-bg-forest .mms-step__num { background: var(--mms-forest-soft); }
.mms-step__title { font-size: var(--mms-step-1); margin-bottom: 0.4rem; }
.mms-step__desc { font-size: 0.92rem; color: var(--mms-ink-soft); }
.mms-bg-forest .mms-step__desc { color: var(--mms-on-dark-soft); }
@media (max-width: 820px) {
  .mms-journey { grid-template-columns: 1fr; gap: var(--mms-space-md); text-align: left; }
  .mms-journey::before { top: 0; bottom: 0; left: 33px; right: auto; width: 2px; height: auto;
    background: repeating-linear-gradient(180deg, var(--mms-taupe) 0 8px, transparent 8px 16px); }
  .mms-step { display: grid; grid-template-columns: 68px 1fr; gap: var(--mms-space-md); align-items: start; text-align: left; }
  .mms-step__num { margin: 0; }
}

/* -----------------------------------------------------------------------------
   12. Stats count-up
   -------------------------------------------------------------------------- */
.mms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: var(--mms-space-lg); text-align: center; }
.mms-stat__num { font-family: var(--mms-font-display); font-size: var(--mms-step-4); color: var(--mms-copper-deep); line-height: 1; font-variant-numeric: tabular-nums; }
.mms-stat__label { font-size: 0.9rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mms-ink-soft); margin-top: 0.5rem; }
.mms-bg-forest .mms-stat__label { color: var(--mms-on-dark-soft); }

/* -----------------------------------------------------------------------------
   13. Testimonials carousel
   -------------------------------------------------------------------------- */
.mms-carousel { position: relative; }
.mms-carousel__track {
  display: flex; gap: var(--mms-space-md);
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 1rem; scrollbar-width: none;
}
.mms-carousel__track::-webkit-scrollbar { display: none; }
.mms-quote {
  scroll-snap-align: center;
  flex: 0 0 min(440px, 85%);
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg);
  padding: var(--mms-space-lg);
  display: flex; flex-direction: column; gap: var(--mms-space-sm);
}
.mms-quote__stars { color: var(--mms-copper); letter-spacing: 0.2em; font-size: 1.1rem; }
.mms-quote__text { font-family: var(--mms-font-display); font-size: var(--mms-step-1); line-height: 1.35; color: var(--mms-forest); padding-top: 1.4rem; }
.mms-quote__author { font-weight: 500; margin-top: auto; }
.mms-quote__tag { font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-copper-deep); }
.mms-carousel__controls { display: flex; gap: 0.6rem; justify-content: center; margin-top: var(--mms-space-md); }
.mms-carousel__btn {
  width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--mms-forest); background: transparent; color: var(--mms-forest);
  cursor: pointer; display: grid; place-items: center;
  transition: background 0.3s, color 0.3s;
}
.mms-carousel__btn:hover { background: var(--mms-forest); color: var(--mms-on-dark); }
.mms-carousel__btn svg { width: 20px; }

/* -----------------------------------------------------------------------------
   14. Before & After gallery
   -------------------------------------------------------------------------- */
.mms-filterbar { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; margin-bottom: var(--mms-space-lg); }
.mms-filter {
  display: inline-flex; align-items: center; min-height: 44px;
  padding: 0.55rem 1.2rem; border-radius: var(--mms-radius-pill);
  border: 1px solid var(--mms-line); background: var(--mms-surface);
  font-family: inherit; font-size: 0.85rem; letter-spacing: 0.06em; cursor: pointer; color: var(--mms-ink);
  transition: color var(--mms-dur) var(--mms-ease), background-color var(--mms-dur) var(--mms-ease), border-color var(--mms-dur) var(--mms-ease);
}
.mms-filter:hover { border-color: var(--mms-copper); }
.mms-filter.is-active { background: var(--mms-forest); color: var(--mms-on-dark); border-color: var(--mms-forest); }

.mms-ba-grid { display: grid; gap: var(--mms-space-md); grid-template-columns: repeat(auto-fill, minmax(min(300px,100%),1fr)); }
.mms-ba {
  border-radius: var(--mms-radius); overflow: hidden; border: 1px solid var(--mms-line);
  background: var(--mms-surface);
}
.mms-ba__pair { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.mms-ba__pair img { aspect-ratio: 3 / 4; object-fit: cover; width: 100%; }
.mms-ba__pair span { position: absolute; top: 0.6rem; padding: 0.2rem 0.6rem; font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; background: rgba(28,36,30,0.7); color: #fff; border-radius: var(--mms-radius-pill); }
.mms-ba__pair span:first-of-type { left: 0.6rem; }
.mms-ba__pair span:last-of-type { right: 0.6rem; }
.mms-ba__caption { padding: 0.9rem var(--mms-space-md); font-size: 0.86rem; color: var(--mms-ink-soft); }
.mms-ba__caption strong { color: var(--mms-forest); display: block; font-weight: 500; font-family: var(--mms-font-display); font-size: 1.1rem; }

/* Consent gate */
.mms-consent-gate {
  display: grid; place-items: center; text-align: center; gap: var(--mms-space-md);
  padding: var(--mms-space-2xl) var(--mms-gutter);
  background: var(--mms-surface-alt); border: 1px dashed var(--mms-taupe); border-radius: var(--mms-radius-lg);
}
.mms-gallery[hidden] { display: none; }

/* -----------------------------------------------------------------------------
   15. Promotions
   -------------------------------------------------------------------------- */
.mms-promo {
  position: relative; overflow: hidden;
  border-radius: var(--mms-radius-lg);
  background: linear-gradient(150deg, var(--mms-forest), var(--mms-forest-soft));
  color: var(--mms-on-dark);
  padding: var(--mms-space-lg);
  display: flex; flex-direction: column; gap: 0.8rem;
  min-height: 260px;
}
.mms-promo::after {
  content: ""; position: absolute; inset: auto -40px -50px auto; width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(181,98,60,0.4), transparent 70%);
}
.mms-promo__tag { font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--mms-taupe); }
.mms-promo__title { color: #fff; font-size: var(--mms-step-2); }
.mms-promo__desc { color: var(--mms-on-dark-soft); font-size: 0.95rem; }
.mms-promo__meta { font-size: 0.8rem; color: var(--mms-taupe); margin-top: auto; }
.mms-promo--accent { background: linear-gradient(150deg, var(--mms-copper-deep), var(--mms-terracotta)); }
.mms-promo--accent .mms-promo__tag, .mms-promo--accent .mms-promo__meta { color: rgba(255,255,255,0.85); }

/* -----------------------------------------------------------------------------
   16. FAQ accordion
   -------------------------------------------------------------------------- */
.mms-faq { max-width: var(--mms-maxw-narrow); margin-inline: auto; }
.mms-faq__item { border-bottom: 1px solid var(--mms-line); }
.mms-faq__q {
  width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  font-family: var(--mms-font-display); font-size: var(--mms-step-1); color: var(--mms-forest);
  padding: 1.4rem 3rem 1.4rem 0; position: relative; display: flex; justify-content: space-between; gap: 1rem;
}
.mms-faq__q::after {
  content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  font-family: var(--mms-font-body); font-size: 1.6rem; color: var(--mms-copper); transition: transform 0.3s;
}
.mms-faq__q[aria-expanded="true"]::after { content: "−"; }
.mms-faq__a { overflow: hidden; max-height: 0; transition: max-height 0.4s var(--mms-ease); }
.mms-faq__a > div { padding: 0 0 1.4rem; color: var(--mms-ink-soft); }

/* -----------------------------------------------------------------------------
   17. CTA band
   -------------------------------------------------------------------------- */
.mms-cta-band {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--mms-forest), var(--mms-charcoal));
  color: var(--mms-on-dark);
  border-radius: var(--mms-radius-lg);
  padding: clamp(2.5rem, 6vw, 5rem);
  text-align: center;
}
.mms-cta-band::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0.5;
  background: radial-gradient(60% 120% at 50% 0%, rgba(141,160,140,0.4), transparent 60%);
}
.mms-cta-band h2 { color: #fff; margin-bottom: var(--mms-space-sm); }
.mms-cta-band p { color: var(--mms-on-dark-soft); max-width: 50ch; margin: 0 auto var(--mms-space-lg); font-size: var(--mms-step-1); }
.mms-cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--mms-space-sm); justify-content: center; }

/* -----------------------------------------------------------------------------
   18. Team
   -------------------------------------------------------------------------- */
.mms-team-card { text-align: center; }
.mms-team-card__photo { aspect-ratio: 1; border-radius: var(--mms-radius-lg); overflow: hidden; margin-bottom: var(--mms-space-sm); background: var(--mms-surface-alt); }
.mms-team-card__photo img { width: 100%; height: 100%; object-fit: cover; }
.mms-team-card__name { font-size: var(--mms-step-1); }
.mms-team-card__role { font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-copper-deep); }

/* -----------------------------------------------------------------------------
   19. Forms
   -------------------------------------------------------------------------- */
.mms-form { display: grid; gap: var(--mms-space-md); }
.mms-form__row { display: grid; gap: var(--mms-space-md); grid-template-columns: 1fr 1fr; }
@media (max-width: 600px) { .mms-form__row { grid-template-columns: 1fr; } }
.mms-field { display: flex; flex-direction: column; gap: 0.4rem; }
.mms-field label { font-size: 0.85rem; font-weight: 500; letter-spacing: 0.04em; color: var(--mms-forest); }
.mms-field .req { color: var(--mms-terracotta); }
.mms-field input, .mms-field select, .mms-field textarea {
  font-family: inherit; font-size: 1rem; color: var(--mms-ink);
  padding: 0.85rem 1rem; border: 1px solid var(--mms-line); border-radius: var(--mms-radius-sm);
  background: var(--mms-cream); transition: border-color 0.3s, box-shadow 0.3s;
}
.mms-field input:focus, .mms-field select:focus, .mms-field textarea:focus {
  outline: none; border-color: var(--mms-copper); box-shadow: 0 0 0 3px rgba(181,98,60,0.18);
}
.mms-field textarea { min-height: 130px; resize: vertical; }
.mms-checkgroup { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); }
.mms-check { display: flex; gap: 0.6rem; align-items: flex-start; font-size: 0.92rem; cursor: pointer; }
.mms-check input { width: auto; margin-top: 0.2rem; }
.mms-honeypot { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.mms-form__notice { padding: 1rem 1.2rem; border-radius: var(--mms-radius-sm); font-size: 0.95rem; }
.mms-form__notice--ok { background: #e6efe6; color: #2c5b34; border: 1px solid #b9d4ba; }
.mms-form__notice--err { background: #f6e3da; color: #8a3c20; border: 1px solid #e2b9a6; }
.mms-form__legal { font-size: 0.8rem; color: var(--mms-ink-muted); }

/* -----------------------------------------------------------------------------
   20. Contact / map
   -------------------------------------------------------------------------- */
.mms-contact-grid { display: grid; gap: var(--mms-space-xl); grid-template-columns: 1fr 1.1fr; align-items: start; }
@media (max-width: 880px) { .mms-contact-grid { grid-template-columns: 1fr; } }
.mms-info-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--mms-space-md); }
.mms-info-list li { display: flex; gap: 1rem; align-items: flex-start; }
.mms-info-list svg { width: 24px; color: var(--mms-copper); flex-shrink: 0; margin-top: 4px; }
.mms-info-list a { font-weight: 400; }
.mms-info-list strong { display: block; font-family: var(--mms-font-display); font-size: 1.15rem; color: var(--mms-forest); }
.mms-map { border-radius: var(--mms-radius-lg); overflow: hidden; box-shadow: var(--mms-shadow); border: 1px solid var(--mms-line); }
.mms-map iframe { display: block; width: 100%; height: 100%; min-height: 360px; border: 0; }
.mms-hours { list-style: none; padding: 0; margin: 0; }
.mms-hours li { display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid var(--mms-line); font-size: 0.95rem; }
.mms-hours li.is-closed { color: var(--mms-ink-muted); }
.mms-hours .day { font-weight: 500; color: var(--mms-forest); }

/* -----------------------------------------------------------------------------
   21. Breadcrumbs & page hero
   -------------------------------------------------------------------------- */
.mms-page-hero {
  position: relative; padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
  background: linear-gradient(160deg, var(--mms-surface-alt), var(--mms-ivory));
  border-bottom: 1px solid var(--mms-line); overflow: hidden;
}
.mms-page-hero__inner { position: relative; max-width: 760px; }
.mms-breadcrumbs { font-size: 0.8rem; letter-spacing: 0.06em; color: var(--mms-ink-muted); margin-bottom: var(--mms-space-sm); }
.mms-breadcrumbs a { color: var(--mms-ink-soft); text-decoration: none; }
.mms-breadcrumbs a:hover { color: var(--mms-copper-deep); }
.mms-breadcrumbs span[aria-current] { color: var(--mms-forest); }

/* -----------------------------------------------------------------------------
   22. Disclaimers
   -------------------------------------------------------------------------- */
.mms-disclaimer {
  font-size: 0.82rem; color: var(--mms-ink-muted); line-height: 1.6;
  border-left: 3px solid var(--mms-taupe); padding: 0.4rem 0 0.4rem 1rem;
  background: transparent;
}
.mms-disclaimer--box {
  border: 1px solid var(--mms-line); border-left: 3px solid var(--mms-copper);
  border-radius: var(--mms-radius-sm); padding: var(--mms-space-md); background: var(--mms-surface);
}

/* -----------------------------------------------------------------------------
   23. Footer
   -------------------------------------------------------------------------- */
.mms-footer { background: var(--mms-charcoal); color: var(--mms-on-dark-soft); padding-block: var(--mms-space-2xl) var(--mms-space-lg); }
.mms-footer a { color: var(--mms-on-dark-soft); text-decoration: none; }
.mms-footer a:hover { color: #fff; }
.mms-footer__grid { display: grid; gap: var(--mms-space-lg); grid-template-columns: 1.6fr 1fr 1fr 1.2fr; }
@media (max-width: 900px) { .mms-footer__grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .mms-footer__grid { grid-template-columns: 1fr; } }
.mms-footer__brand-name { font-family: var(--mms-font-display); font-size: 1.6rem; color: #fff; margin-bottom: 0.6rem; }
.mms-footer__about { font-size: 0.92rem; max-width: 34ch; margin-bottom: var(--mms-space-md); }
.mms-footer h4, .mms-footer__h { color: #fff; font-size: 0.82rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: var(--mms-font-body); font-weight: 500; margin-bottom: var(--mms-space-sm); }
.mms-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.55rem; font-size: 0.92rem; }
.mms-footer__social { display: flex; gap: 0.7rem; margin-top: var(--mms-space-sm); }
.mms-footer__social a { display: grid; place-items: center; width: 40px; height: 40px; border: 1px solid rgba(244,239,230,0.2); border-radius: 50%; transition: background 0.3s, border-color 0.3s; }
.mms-footer__social a:hover { background: var(--mms-copper); border-color: var(--mms-copper); }
.mms-footer__social svg { width: 18px; }
.mms-footer__map { border-radius: var(--mms-radius); overflow: hidden; }
.mms-footer__map iframe { width: 100%; min-height: 160px; border: 0; display: block; filter: grayscale(0.3); }
.mms-footer__bottom {
  margin-top: var(--mms-space-xl); padding-top: var(--mms-space-md);
  border-top: 1px solid rgba(244,239,230,0.12);
  display: flex; flex-wrap: wrap; gap: var(--mms-space-sm) var(--mms-space-md); justify-content: space-between; align-items: center;
  font-size: 0.8rem;
}
.mms-footer__legal-links { display: flex; flex-wrap: wrap; gap: var(--mms-space-md); }
.mms-footer__disclaimer { font-size: 0.78rem; color: rgba(244,239,230,0.5); margin-top: var(--mms-space-md); line-height: 1.6; max-width: 80ch; }

/* -----------------------------------------------------------------------------
   24. Mobile sticky booking bar & floating button
   -------------------------------------------------------------------------- */
.mms-sticky-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 950;
  display: none; grid-template-columns: repeat(3, 1fr);
  background: var(--mms-forest); box-shadow: 0 -8px 30px rgba(0,0,0,0.2);
  padding-bottom: env(safe-area-inset-bottom);
}
.mms-sticky-bar a {
  display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
  padding: 0.7rem; color: var(--mms-on-dark); text-decoration: none;
  font-size: 0.68rem; letter-spacing: 0.08em; text-transform: uppercase;
}
.mms-sticky-bar a + a { border-left: 1px solid rgba(244,239,230,0.15); }
.mms-sticky-bar a.is-primary { background: var(--mms-copper-cta); }
.mms-sticky-bar svg { width: 20px; }
@media (max-width: 768px) { .mms-sticky-bar { display: grid; } body { padding-bottom: 64px; } }

.mms-float-book {
  position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 940;
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--mms-copper-cta); color: #fff; text-decoration: none;
  padding: 0.9rem 1.4rem; border-radius: var(--mms-radius-pill);
  box-shadow: var(--mms-shadow-lg); font-size: 0.85rem; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500;
  transition: transform 0.3s, background 0.3s;
}
.mms-float-book:hover { transform: translateY(-3px); background: var(--mms-copper-deep); color: #fff; }
.mms-float-book svg { width: 18px; }
@media (max-width: 768px) { .mms-float-book { display: none; } }

/* -----------------------------------------------------------------------------
   25. Scroll-reveal animation utility
   -------------------------------------------------------------------------- */
.mms-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.8s var(--mms-ease), transform 0.8s var(--mms-ease); }
.mms-reveal.is-visible { opacity: 1; transform: none; }
.mms-reveal[data-delay="1"] { transition-delay: 0.08s; }
.mms-reveal[data-delay="2"] { transition-delay: 0.16s; }
.mms-reveal[data-delay="3"] { transition-delay: 0.24s; }
@media (prefers-reduced-motion: reduce) { .mms-reveal { opacity: 1; transform: none; } }

@keyframes mms-fade-up { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* Parallax */
.mms-parallax { background-attachment: fixed; background-size: cover; background-position: center; }
@media (max-width: 768px) { .mms-parallax { background-attachment: scroll; } }

/* -----------------------------------------------------------------------------
   26. WordPress content (single / pages / blog)
   -------------------------------------------------------------------------- */
.mms-article { max-width: var(--mms-maxw-narrow); margin-inline: auto; }
.mms-article > * + * { margin-top: var(--mms-space-md); }
.mms-article h2 { margin-top: var(--mms-space-lg); }
.mms-article img { border-radius: var(--mms-radius); }
.mms-article blockquote { border-left: 3px solid var(--mms-copper); padding-left: var(--mms-space-md); font-family: var(--mms-font-display); font-size: var(--mms-step-1); font-style: italic; color: var(--mms-forest); }
.mms-article figure { margin: var(--mms-space-md) 0; }
.mms-article ul, .mms-article ol { display: grid; gap: 0.4rem; }

.mms-post-card { background: var(--mms-surface); border: 1px solid var(--mms-line); border-radius: var(--mms-radius-lg); overflow: hidden; transition: transform 0.4s var(--mms-ease), box-shadow 0.4s var(--mms-ease); }
.mms-post-card:hover { transform: translateY(-5px); box-shadow: var(--mms-shadow); }
.mms-post-card__media { aspect-ratio: 16/10; overflow: hidden; }
.mms-post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.mms-post-card__body { padding: var(--mms-space-md); }
.mms-post-card__date { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mms-copper-deep); }
.mms-post-card__title { font-size: var(--mms-step-1); margin: 0.4rem 0; }

.mms-pagination { display: flex; gap: 0.5rem; justify-content: center; margin-top: var(--mms-space-xl); }
.mms-pagination a, .mms-pagination span {
  display: grid; place-items: center; min-width: 44px; height: 44px; padding: 0 0.6rem;
  border: 1px solid var(--mms-line); border-radius: var(--mms-radius-sm); text-decoration: none; color: var(--mms-forest);
}
.mms-pagination .current { background: var(--mms-forest); color: var(--mms-on-dark); border-color: var(--mms-forest); }

/* Utility */
.mms-text-center { text-align: center; }
.mms-mt-lg { margin-top: var(--mms-space-lg); }
.mms-mt-xl { margin-top: var(--mms-space-xl); }
.mms-flex-actions { display: flex; flex-wrap: wrap; gap: var(--mms-space-sm); }
.mms-flex-actions--center { justify-content: center; }
[hidden] { display: none !important; }

/* =============================================================================
   27. Polish layer — premium micro-interactions & finishing touches
   (additive; everything here degrades gracefully + respects reduced motion)
   ========================================================================== */

/* 27.1 Scroll progress indicator -------------------------------------------- */
.mms-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  width: 100%;
  transform: scaleX(0);
  transform-origin: 0 50%;
  /* A single clay hairline. The three-colour gradient this replaced was a
     SaaS/blog device and it was the first thing that moved on every page. */
  background: var(--mms-copper-deep);
  opacity: 0.55;
  z-index: 1000;
  pointer-events: none;
  will-change: transform;
}

/* 27.2 Film grain + animated shimmer on the hero ---------------------------- */
.mms-hero__grain {
  position: absolute; inset: 0; z-index: -1;
  pointer-events: none; opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.4'/%3E%3C/svg%3E");
}
.mms-hero::after {
  content: "";
  position: absolute; inset: -50% -10%;
  z-index: -1; pointer-events: none;
  background: radial-gradient(45% 35% at 30% 25%, rgba(181,98,60,0.20), transparent 70%);
  animation: mms-shimmer 14s ease-in-out infinite alternate;
}
@keyframes mms-shimmer {
  0%   { transform: translate3d(-4%, -2%, 0); opacity: 0.6; }
  100% { transform: translate3d(6%, 4%, 0);  opacity: 1; }
}

/* 27.3 Hero scroll cue ------------------------------------------------------ */
.mms-scroll-cue {
  position: absolute;
  left: 50%; bottom: 1.6rem;
  transform: translateX(-50%);
  display: inline-flex; flex-direction: column; align-items: center; gap: 0.5rem;
  color: var(--mms-on-dark-soft);
  font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase;
  text-decoration: none; z-index: 2;
}
.mms-scroll-cue__track {
  width: 24px; height: 40px; border: 1.5px solid rgba(244,239,230,0.55);
  border-radius: var(--mms-radius-pill); position: relative;
}
.mms-scroll-cue__track::after {
  content: ""; position: absolute; left: 50%; top: 7px;
  width: 4px; height: 8px; border-radius: var(--mms-radius-pill);
  background: var(--mms-on-dark);
  transform: translateX(-50%);
  animation: mms-scroll-bob 1.8s var(--mms-ease) infinite;
}
@keyframes mms-scroll-bob {
  0%, 100% { opacity: 0; transform: translate(-50%, 0); }
  40%      { opacity: 1; transform: translate(-50%, 12px); }
}
@media (max-width: 768px) { .mms-scroll-cue { display: none; } }

/* 27.4 Button sheen sweep — REMOVED.
   A white diagonal gloss sweeping across a button on hover is showroom
   language, and it fought the squared signage buttons set in §31. Buttons
   now change ground and lift, which is all they need to do. */

/* 27.5 Pointer-tracking spotlight on cards — REMOVED.
   A radial glow following the cursor is dashboard behaviour. The cards keep
   their lift and hairline on hover. */
/* keep card content above the spotlight */
.mms-card__media, .mms-card__body, .mms-card__icon { position: relative; z-index: 2; }

/* gilded hairline that fades in on hover */
.mms-card { box-shadow: var(--mms-shadow-sm); }
.mms-card::after {
  content: "";
  position: absolute; inset: 0; z-index: 0;
  border-radius: inherit; pointer-events: none;
  padding: 1px;
  background: linear-gradient(140deg, rgba(181,98,60,0.7), transparent 45%, rgba(141,160,140,0.5));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity 0.45s var(--mms-ease);
}
.mms-card:hover::after { opacity: 1; }

/* 27.6 Image blur-up -------------------------------------------------------- */
.mms-img-blur { filter: blur(14px); transform: scale(1.03); transition: filter 0.7s var(--mms-ease), transform 0.7s var(--mms-ease); }
.mms-img-blur.is-loaded { filter: blur(0); transform: none; }

/* 27.7 Refined reveal: add a soft scale + longer travel for hero-adjacent --- */
.mms-reveal { will-change: opacity, transform; }
.mms-reveal--scale { transform: translateY(28px) scale(0.985); }
.mms-reveal--scale.is-visible { transform: none; }

/* 27.8 Eyebrow shimmer dot -------------------------------------------------- */
.mms-eyebrow::before { transition: width 0.6s var(--mms-ease); }
.mms-section-head:hover .mms-eyebrow::before,
.mms-reveal.is-visible .mms-eyebrow::before { width: 44px; }

/* 27.9 Decorative quote glyph on testimonial cards -------------------------- */
.mms-quote { position: relative; overflow: hidden; }
.mms-quote::before {
  content: "";
  position: absolute; top: 1.6rem; left: var(--mms-space-lg);
  width: 26px; height: 2px; background: var(--mms-copper);
  z-index: 0;
}
.mms-quote > * { position: relative; z-index: 1; }

/* 27.10 Mountain-ridge divider into the footer ------------------------------ */
.mms-footer { position: relative; }
.mms-footer::before {
  content: "";
  position: absolute; left: 0; right: 0; top: -1px;
  height: 64px; transform: translateY(-100%);
  background: var(--mms-charcoal);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64 L300 18 L470 44 L700 6 L920 40 L1160 12 L1440 50 L1440 64 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 64' preserveAspectRatio='none'%3E%3Cpath d='M0 64 L300 18 L470 44 L700 6 L920 40 L1160 12 L1440 50 L1440 64 Z'/%3E%3C/svg%3E") bottom / 100% 100% no-repeat;
  pointer-events: none;
}

/* 27.11 Nav link refinement + active CTA glow ------------------------------- */
.mms-nav__cta .mms-btn { box-shadow: 0 8px 24px -10px rgba(142,74,44,0.6); }
/* Static elevation (decorative infinite animation removed per UX guidance) */

/* 27.12 Selection + smooth anchor offset ------------------------------------ */
:target { scroll-margin-top: calc(var(--mms-header-offset, var(--mms-header-h)) + 20px); }
[id] { scroll-margin-top: calc(var(--mms-header-offset, var(--mms-header-h)) + 20px); }

/* 27.13 Reduced-motion: silence the decorative animations ------------------- */
@media (prefers-reduced-motion: reduce) {
  .mms-hero::after,
  .mms-scroll-cue__track::after,
  .mms-float-book { animation: none !important; }
  .mms-btn::after { display: none; }
  .mms-img-blur { filter: none; transform: none; }
}

/* 27.14 Interaction hardening (UI/UX Pro Max audit) -------------------------- */
/* Cut the 300ms tap delay + keep gestures predictable on touch controls. */
.mms-btn, .mms-choice, .mms-filter, .mms-quiz__opt, .mms-faq__q,
.mms-carousel__btn, .mms-burger, .mms-link-arrow,
.mms-sticky-bar a, .mms-float-book, .mms-nav__menu a { touch-action: manipulation; }

/* Ensure decorative copper text never drops below AA: links/eyebrows use the
   accessible copper-deep token site-wide. */
.mms-link-arrow, .mms-card__cat, .mms-quote__tag { color: var(--mms-copper-deep); }

/* =============================================================================
   28. "Sense of Place" — mountain/forest art direction
   Layered parallax dawn hero · arched portals · ridgeline dividers ·
   editorial detailing. (Parallax Storytelling + Organic Biophilic.)
   ========================================================================== */

/* 28.1 Layered dawn-over-Ruidoso hero scene --------------------------------- */
.mms-hero--scene { color: var(--mms-on-dark); }
.mms-scene { position: absolute; inset: 0; z-index: -3; overflow: hidden; }
.mms-scene__sky {
  position: absolute; inset: 0;
  background:
    linear-gradient(180deg,
      #1d2720 0%, #243029 22%, #3c4a3a 42%,
      #6f7c5c 60%, #b88f59 78%, #ddc79f 90%, #ece0c8 100%);
}
/* rising sun glow */
.mms-scene__sun {
  position: absolute; left: 64%; top: 30%;
  width: clamp(120px, 16vw, 230px); aspect-ratio: 1; border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #fbeccb 0%, #f3d9a6 38%, rgba(243,217,166,0.0) 72%);
  filter: blur(2px);
  animation: mms-sun-rise 16s var(--mms-ease) infinite alternate;
}
@keyframes mms-sun-rise {
  0%   { transform: translateY(14px) scale(0.98); opacity: 0.85; }
  100% { transform: translateY(-10px) scale(1.04); opacity: 1; }
}
.mms-scene__layer { position: absolute; left: -2%; right: -2%; bottom: 0; line-height: 0; will-change: transform; }
.mms-scene__layer svg { width: 104%; height: auto; display: block; }
.mms-scene__layer--4 { bottom: 20%; opacity: 0.85; }
.mms-scene__layer--3 { bottom: 12%; }
.mms-scene__layer--2 { bottom: 5%; }
.mms-scene__layer--1 { bottom: 0; }
.mms-scene__mist {
  position: absolute; left: 0; right: 0; height: 26%;
  background: linear-gradient(180deg, rgba(244,239,230,0) 0%, rgba(238,224,200,0.55) 60%, rgba(238,224,200,0.0) 100%);
  filter: blur(6px); pointer-events: none; will-change: transform;
}
.mms-scene__mist--far  { bottom: 24%; opacity: 0.55; animation: mms-mist-x 26s ease-in-out infinite alternate; }
.mms-scene__mist--near { bottom: 6%;  opacity: 0.8;  animation: mms-mist-x 20s ease-in-out infinite alternate-reverse; }
@keyframes mms-mist-x { 0% { transform: translateX(-6%); } 100% { transform: translateX(6%); } }

.mms-hero--scene .mms-hero__media,
.mms-hero--scene .mms-hero__media::after { display: none; }
.mms-hero__scrim {
  position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background:
    linear-gradient(90deg, rgba(20,26,21,0.62) 0%, rgba(20,26,21,0.20) 48%, rgba(20,26,21,0) 72%),
    linear-gradient(180deg, rgba(20,26,21,0.25) 0%, rgba(20,26,21,0) 30%, rgba(20,26,21,0.15) 100%);
}

/* Vertical editorial place-label down the hero edge */
.mms-place-label {
  position: absolute; right: clamp(0.6rem, 2vw, 1.6rem); top: 50%;
  transform: translateY(-50%) rotate(180deg);
  writing-mode: vertical-rl;
  font-size: 0.7rem; letter-spacing: 0.42em; text-transform: uppercase;
  color: rgba(244,239,230,0.7);
  display: inline-flex; align-items: center; gap: 1rem; z-index: 2;
}
.mms-place-label::before { content: ""; width: 1px; height: 46px; background: rgba(244,239,230,0.4); }
@media (max-width: 900px) { .mms-place-label { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .mms-scene__sun, .mms-scene__mist { animation: none !important; }
  .mms-scene__layer { transform: none !important; }
}

/* 28.2 Organic arched "portal" image frames --------------------------------- */
.mms-figure--arch {
  border-radius: 50% 50% var(--mms-radius) var(--mms-radius) / 42% 42% 4% 4%;
  position: relative;
}
.mms-figure--arch::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(244,239,230,0.35), inset 0 6px 30px rgba(28,38,30,0.12);
}
/* a thin copper keyline that traces the arch */
.mms-figure--arch::before {
  content: ""; position: absolute; inset: -10px; z-index: -1; pointer-events: none;
  border-radius: inherit;
  border: 1px solid var(--mms-taupe); opacity: 0.5;
}

/* 28.3 Recurring ridgeline section dividers --------------------------------- */
.mms-ridge {
  display: block; width: 100%; height: clamp(36px, 5vw, 72px);
  margin: 0; line-height: 0; position: relative; z-index: 1;
}
.mms-ridge svg { width: 100%; height: 100%; display: block; }
.mms-ridge--up { margin-bottom: -1px; }
.mms-ridge--down { margin-top: -1px; transform: scaleY(-1); }

/* 28.4 Editorial section index + kicker ------------------------------------- */
.mms-section-head { position: relative; }
.mms-index {
  font-family: var(--mms-font-display); font-style: italic;
  font-size: 0.95rem; color: var(--mms-copper-deep); letter-spacing: 0.04em;
  display: inline-block; margin-bottom: 0.4rem;
}
.mms-index::before { content: ""; }
.mms-bg-forest .mms-index { color: var(--mms-taupe); }

/* 28.5 Pine-mark monogram + refined brand lockup ---------------------------- */
.mms-brand__emblem { width: 72px; height: auto; color: var(--mms-forest); flex-shrink: 0; }
.mms-bg-forest .mms-brand__emblem, .mms-hero .mms-brand__emblem { color: var(--mms-on-dark); }
.mms-brand__name { letter-spacing: 0.005em; }

/* 28.6 Pine-needle texture wash for warm sections --------------------------- */
.mms-bg-alt, .mms-bg-cream { position: relative; }
.mms-grain-soft::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
}
.mms-grain-soft > * { position: relative; z-index: 1; }

/* 28.7 Deepen the forest section into an "evening forest" gradient ---------- */
.mms-bg-forest {
  background:
    radial-gradient(120% 80% at 80% -10%, rgba(181,98,60,0.18), transparent 55%),
    linear-gradient(165deg, #2f3d33 0%, #243029 60%, #1d2720 100%);
}

/* 28.8 Section-head centering keeps the index above the eyebrow ------------- */
.mms-section-head--center .mms-index { display: block; }

/* =============================================================================
   29. Restraint pass — photography-first hero, quieter ornament
   ========================================================================== */

/* 29.1 Atmospheric (no-photo) hero: calm forest canvas, invites real imagery */
.mms-hero--atmos .mms-hero__media {
  background:
    radial-gradient(110% 80% at 50% 118%, rgba(181,98,60,0.20), transparent 60%),
    radial-gradient(70% 55% at 82% 6%, rgba(141,160,140,0.16), transparent 60%),
    linear-gradient(162deg, #243029 0%, #1d2720 58%, #151d17 100%);
}
/* gentle photographic vignette + scrim for legibility on either mode */
.mms-hero--atmos .mms-hero__scrim,
.mms-hero--photo .mms-hero__scrim {
  background:
    radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(16,21,17,0.45) 100%),
    linear-gradient(90deg, rgba(16,21,17,0.62) 0%, rgba(16,21,17,0.18) 52%, rgba(16,21,17,0) 78%),
    linear-gradient(180deg, rgba(16,21,17,0.30) 0%, rgba(16,21,17,0) 34%, rgba(16,21,17,0.30) 100%);
}

/* single delicate ridge line near the base of the hero */
.mms-hero__ridge {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: clamp(80px, 12vw, 150px);
  z-index: -1; pointer-events: none;
}

/* the ambient copper shimmer reads as clip-arty over a quiet hero — calm it */
.mms-hero::after { opacity: 0.55; }

/* 29.2 Quieter arched portals (shallow, elegant — not a half-dome) ---------- */
.mms-figure--arch {
  border-radius: 50% 50% var(--mms-radius) var(--mms-radius) / 22% 22% 4% 4%;
}
.mms-figure--arch::before { display: none; } /* drop the extra copper keyline */
.mms-figure--arch::after {
  box-shadow: inset 0 0 0 1px rgba(244,239,230,0.30);
}

/* 29.3 Calmer editorial index + lighter texture ----------------------------- */
.mms-index { font-size: 0.85rem; opacity: 0.9; letter-spacing: 0.08em; }
.mms-grain-soft::before { opacity: 0.32; }

/* 29.4 A touch more breathing room between major sections ------------------- */
.mms-section { padding-block: clamp(4rem, 9vw, 10rem); }

/* =============================================================================
   30. Ruidoso high-desert identity — signage type, clay, geography
   "No generic luxury": National Park signage labels, NM clay, topographic
   linework, real coordinates + elevation.
   ========================================================================== */

/* 30.1 Signage label voice (National Park) on all small caps labels --------- */
.mms-eyebrow, .mms-index, .mms-btn, .mms-card__cat, .mms-quote__tag,
.mms-promo__tag, .mms-stat__label, .mms-place-label, .mms-breadcrumbs,
.mms-footer h4, .mms-footer__h, .mms-team-card__role, .mms-hours .day, .mms-coords,
.mms-nav__menu a, .mms-link-arrow, .mms-filter, .mms-sticky-bar a {
  font-family: var(--mms-font-label);
}
.mms-eyebrow { letter-spacing: 0.26em; font-weight: 600; }
.mms-nav__menu a { text-transform: uppercase; font-size: 0.74rem; letter-spacing: 0.14em; font-weight: 500; }
.mms-btn { letter-spacing: 0.16em; font-weight: 600; }

/* 30.2 Section markers as trail markers (01 / 07) --------------------------- */
.mms-index {
  font-weight: 600; font-size: 0.8rem; letter-spacing: 0.2em; opacity: 1;
  color: var(--mms-copper-deep);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.mms-index::after { content: ""; }
.mms-bg-forest .mms-index { color: var(--mms-taupe); }
.mms-bg-forest .mms-index::after { color: var(--mms-on-dark-soft); }

/* 30.3 Coordinates + elevation strip (authentic geographic detail) ---------- */
.mms-coords {
  display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem;
  font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 500;
  color: var(--mms-ink-muted);
}
.mms-coords span { display: inline-flex; align-items: center; gap: 0.5rem; }
.mms-coords span + span::before { content: "·"; margin-right: 1rem; opacity: 0.5; }
.mms-hero .mms-coords { color: rgba(244,238,227,0.75); }

/* 30.4 Topographic contour linework (authentic USGS feel, very subtle) ------ */
.mms-topo-lines {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='520' viewBox='0 0 760 520' fill='none' stroke='%238E4A2C' stroke-width='1' opacity='0.5'%3E%3Cpath d='M40 440 C 180 380 260 420 360 360 S 600 300 740 360'/%3E%3Cpath d='M20 400 C 170 330 260 380 380 310 S 620 250 760 320'/%3E%3Cpath d='M60 360 C 200 290 280 340 400 270 S 620 210 740 280'/%3E%3Cpath d='M90 320 C 220 255 300 300 420 235 S 610 185 720 245'/%3E%3Cpath d='M140 285 C 250 230 320 270 430 210 S 590 170 690 215'/%3E%3Cpath d='M190 255 C 280 215 340 245 440 195 S 560 165 650 200'/%3E%3Cpath d='M240 232 C 320 205 360 228 440 192 S 530 172 600 198'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right center; background-size: 60% auto;
}
.mms-bg-forest .mms-topo-lines, .mms-hero .mms-topo-lines {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='760' height='520' viewBox='0 0 760 520' fill='none' stroke='%23C9B79C' stroke-width='1' opacity='0.5'%3E%3Cpath d='M40 440 C 180 380 260 420 360 360 S 600 300 740 360'/%3E%3Cpath d='M20 400 C 170 330 260 380 380 310 S 620 250 760 320'/%3E%3Cpath d='M60 360 C 200 290 280 340 400 270 S 620 210 740 280'/%3E%3Cpath d='M90 320 C 220 255 300 300 420 235 S 610 185 720 245'/%3E%3Cpath d='M140 285 C 250 230 320 270 430 210 S 590 170 690 215'/%3E%3Cpath d='M190 255 C 280 215 340 245 440 195 S 560 165 650 200'/%3E%3C/svg%3E");
  opacity: 0.28;
}
.mms-section, .mms-hero { position: relative; }
.mms-section > .mms-container { position: relative; z-index: 1; }

/* 30.5 Hero treatments — warm "golden hour" (default) + cool "blue hour" ---- */
.mms-hero--atmos .mms-hero__media {
  background:
    radial-gradient(115% 80% at 50% 120%, rgba(181,98,60,0.30), transparent 60%),
    radial-gradient(75% 60% at 80% 4%, rgba(201,183,156,0.18), transparent 60%),
    linear-gradient(160deg, #2b3a2e 0%, #233027 52%, #161d17 100%);
}
.mms-hero--cool .mms-hero__media {
  background:
    radial-gradient(115% 80% at 50% 122%, rgba(110,140,138,0.30), transparent 60%),
    radial-gradient(75% 60% at 78% 2%, rgba(180,196,200,0.16), transparent 60%),
    linear-gradient(160deg, #20302f 0%, #1b2624 55%, #121a1a 100%);
}

/* 30.6 Bigger, more expressive display + tighter editorial leading ---------- */
.mms-hero__title { line-height: 0.98; letter-spacing: -0.03em; font-weight: 460; }
.mms-section-head h2 { line-height: 1.0; }
.mms-lede { font-family: var(--mms-font-body); font-weight: 300; }

/* 30.7 Cards get a flat, tactile, less "glossy luxury" treatment ------------ */
.mms-card { border-radius: var(--mms-radius); }
.mms-card::after { display: none; }            /* drop the gilded hover ring */
.mms-card__cat { letter-spacing: 0.18em; font-weight: 600; }

/* 30.8 Buttons: squared, signage-like rather than pill "luxury" ------------- */
.mms-btn { border-radius: 4px; }
.mms-float-book, .mms-badge-float { border-radius: 4px; }

/* 30.9 Eyebrow rule uses clay tick ----------------------------------------- */
.mms-eyebrow::before { background: var(--mms-copper); height: 2px; width: 24px; }

/* =============================================================================
   31. Multi-agent audit fixes — identity site-wide, signage detail, a11y
   ========================================================================== */

/* 31.1 Service-card meta as signage labels (National Park caps) -------------- */
.mms-card__meta strong {
  font-family: var(--mms-font-label); text-transform: uppercase;
  letter-spacing: 0.12em; font-size: 0.66rem; font-weight: 600;
  color: var(--mms-copper-deep); min-width: 88px;
}
.mms-card__meta li { align-items: baseline; }

/* 31.2 Asymmetric editorial split (breaks the 50/50 monotony) --------------- */
.mms-split--offset { grid-template-columns: 7fr 5fr; }
.mms-split--offset.mms-split--reverse { grid-template-columns: 5fr 7fr; }
@media (max-width: 880px) { .mms-split--offset, .mms-split--offset.mms-split--reverse { grid-template-columns: 1fr; } }

/* 31.3 Expressive Fraunces display on inner page heroes --------------------- */
.mms-page-hero h1 { font-size: var(--mms-step-4); line-height: 1.0; }
.mms-page-hero { position: relative; overflow: hidden; }
.mms-page-hero .mms-coords { margin-top: var(--mms-space-md); }

/* 31.4 Coordinate strip legibility (audit: 0.7rem caps were weak) ----------- */
.mms-coords { color: var(--mms-ink-soft); font-size: 0.72rem; }
.mms-hero .mms-coords { color: rgba(244,238,227,0.9); }
.mms-place-label { color: rgba(244,239,230,0.82); }

/* 31.5 Left-aligned editorial section head (alternative to centered) -------- */
.mms-section-head--editorial { max-width: 760px; }
.mms-section-head--editorial .mms-index { margin-bottom: 0.7rem; }

/* 31.6 Quote stars -> clay; author as signage --------------------------------*/
.mms-quote__stars { color: var(--mms-copper); }
.mms-quote__author { font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.78rem; font-weight: 600; }
.mms-quote__loc { font-size: 0.66rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--mms-ink-muted); font-family: var(--mms-font-label); margin-top: 0.2rem; }

/* 31.7 Step & stat numerals: lighter optical weight for Fraunces ------------- */
.mms-step__num { font-weight: 500; font-variant-numeric: tabular-nums; border-radius: 6px; }
.mms-stat__num { font-weight: 500; }
.mms-brand__name { font-weight: 540; }

/* 31.8 Signage chips squared to match the button language ------------------- */
.mms-filter, .mms-tag, .mms-ba__pair span { border-radius: 4px; }

/* 31.9 Form focus ring matches the global clay focus affordance ------------- */
.mms-field input:focus, .mms-field select:focus, .mms-field textarea:focus {
  border-color: var(--mms-copper-deep);
  box-shadow: 0 0 0 3px rgba(142,74,44,0.22);
}

/* 31.10 No-JS fallback: FAQ answers stay open without JavaScript ------------- */
.no-js .mms-faq__a { max-height: none; }
.no-js .mms-faq__q::after { display: none; }

/* 31.11 Topo contour calmer on small screens (audit: overlaps text) --------- */
@media (max-width: 640px) {
  .mms-topo-lines { opacity: 0.18; background-size: 90% auto; background-position: right top; }
}
.mms-hero-place { color: var(--mms-copper-deep); font-style: normal; }

/* =============================================================================
   32. Bold editorial moves — signage ticker, statement band, big type
   ========================================================================== */

/* 32.1 Kinetic signage ticker (trail-sign / highway energy) ----------------- */
.mms-ticker {
  background: var(--mms-forest);
  color: var(--mms-on-dark);
  border-block: 1px solid rgba(201,183,156,0.22);
  overflow: hidden;
  position: relative;
}
.mms-ticker__track {
  display: inline-flex; align-items: center; gap: 2.5rem;
  padding-block: 1.05rem; white-space: nowrap; will-change: transform;
  animation: mms-ticker 42s linear infinite;
}
.mms-ticker:hover .mms-ticker__track { animation-play-state: paused; }
.mms-ticker__item {
  display: inline-flex; align-items: center; gap: 2.5rem;
  font-family: var(--mms-font-label); text-transform: uppercase;
  letter-spacing: 0.22em; font-size: 0.86rem; font-weight: 600;
  color: var(--mms-on-dark-soft);
}
.mms-ticker__item b { color: var(--mms-taupe); font-weight: 600; }
.mms-ticker__star { color: var(--mms-copper); font-size: 0.7rem; }
@keyframes mms-ticker { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
  .mms-ticker__track { animation: none; overflow-x: auto; }
}

/* 32.2 Full-bleed statement band (oversized Fraunces manifesto) ------------- */
.mms-statement {
  position: relative; overflow: hidden; isolation: isolate;
  background:
    radial-gradient(120% 90% at 50% 120%, rgba(181,98,60,0.22), transparent 60%),
    linear-gradient(165deg, #2b3a2e 0%, #233027 55%, #161d17 100%);
  color: var(--mms-on-dark);
  padding-block: clamp(4.5rem, 11vw, 10rem);
  text-align: center;
}
.mms-statement .mms-topo-lines { opacity: 0.3; background-position: center; background-size: 80% auto; }
.mms-statement__inner { position: relative; z-index: 1; max-width: 1100px; margin-inline: auto; padding-inline: var(--mms-gutter); }
.mms-statement__kicker {
  font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.3em;
  font-size: 0.75rem; font-weight: 600; color: var(--mms-taupe); margin-bottom: var(--mms-space-lg);
}
.mms-statement__text {
  font-family: var(--mms-font-display); font-weight: 460;
  font-size: clamp(2.3rem, 5.5vw, 5rem); line-height: 1.02; letter-spacing: -0.025em;
  color: #fff; max-width: 20ch; margin-inline: auto;
}
.mms-statement__text em { color: var(--mms-terracotta); font-style: normal; }
.mms-statement__coords { margin-top: var(--mms-space-xl); justify-content: center; color: var(--mms-on-dark-soft); }

/* 32.3 Bolder hero statement type ------------------------------------------ */
/* The 3.6rem floor is what actually rendered on a phone (8vw at 375px is
   30px), so the headline came out at 57px and wrapped to five or six lines
   with the CTA pushed below the fold. Floor lowered and the growth rate
   raised so desktop is unchanged. */
.mms-hero__title { font-size: clamp(2.5rem, 7.6vw + 0.5rem, 7.6rem); }
.mms-hero__inner { max-width: 880px; }

/* 32.4 Optional oversized hanging section number (editorial heads) ---------- */
.mms-section-head--bignum { position: relative; padding-top: 0.5rem; }
.mms-section-head--bignum .mms-bignum {
  font-family: var(--mms-font-display); font-weight: 460;
  font-size: clamp(3rem, 7vw, 6rem); line-height: 0.8;
  color: var(--mms-champagne); display: block; margin-bottom: 0.4rem; letter-spacing: -0.02em;
}
.mms-bg-forest .mms-section-head--bignum .mms-bignum { color: var(--mms-forest-soft); }

/* =============================================================================
   33. Boutique luxury devices — top utility bar, hero video, perks
   ========================================================================== */

/* 33.1 Sleek top utility bar (prestige nav convention) ---------------------- */
.mms-topbar {
  background: var(--mms-forest);
  color: var(--mms-on-dark-soft);
  font-family: var(--mms-font-label);
  font-size: 0.68rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.mms-topbar__inner { display: flex; align-items: center; justify-content: space-between; min-height: 38px; gap: 1rem; }
.mms-topbar a { color: var(--mms-on-dark-soft); text-decoration: none; display: inline-flex; align-items: center; gap: 0.4rem; }
.mms-topbar a:hover { color: #fff; }
.mms-topbar svg { width: 14px; }
.mms-topbar__right { display: flex; align-items: center; gap: 1.4rem; }
.mms-topbar__place { color: var(--mms-taupe); }
@media (max-width: 860px) { .mms-topbar { display: none; } }

/* 33.2 Hero background video ------------------------------------------------- */
.mms-hero__video { width: 100%; height: 100%; object-fit: cover; }
.mms-hero--photo .mms-hero__media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(16,21,17,0.6) 0%, rgba(16,21,17,0.15) 55%, rgba(16,21,17,0) 80%);
}

/* 33.3 Perk cards (memberships / rewards / gift) ---------------------------- */
.mms-perk {
  position: relative; display: flex; flex-direction: column; gap: 0.6rem;
  background: var(--mms-surface); border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius); padding: var(--mms-space-lg);
  overflow: hidden;
  transition: transform var(--mms-dur) var(--mms-ease), box-shadow var(--mms-dur) var(--mms-ease), border-color var(--mms-dur) var(--mms-ease);
}
.mms-perk::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
  background: var(--mms-copper); transform: scaleY(0); transform-origin: top; transition: transform var(--mms-dur) var(--mms-ease);
}
.mms-perk:hover { transform: translateY(-5px); box-shadow: var(--mms-shadow); border-color: var(--mms-taupe); }
.mms-perk:hover::before { transform: scaleY(1); }
.mms-perk__icon { width: 46px; height: 46px; color: var(--mms-copper); display: grid; place-items: center; border: 1px solid var(--mms-line); border-radius: 8px; }
.mms-perk__icon svg { width: 24px; }
.mms-perk__kicker { font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.18em; font-size: 0.68rem; font-weight: 600; color: var(--mms-copper-deep); margin-top: 0.6rem; }
.mms-perk__title { font-size: var(--mms-step-2); }
.mms-perk__desc { color: var(--mms-ink-soft); font-size: 0.96rem; flex: 1; }
.mms-perk .mms-link-arrow { margin-top: 0.4rem; }

/* 33.4 Header condenses under the (non-sticky) topbar ----------------------- */
.mms-header { top: 0; }

/* =============================================================================
   34. More features — announcement, back-to-top, compare slider, bands
   ========================================================================== */

/* 34.1 Announcement bar (dismissible) -------------------------------------- */
.mms-announce { background: var(--mms-copper-cta); color: #fff; }
.mms-announce__inner { display: flex; align-items: center; justify-content: center; gap: 1rem; min-height: 40px; position: relative; }
.mms-announce p { font-family: var(--mms-font-label); font-size: 0.74rem; letter-spacing: 0.12em; text-transform: uppercase; text-align: center; }
.mms-announce a { color: #fff; text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.mms-announce__close { position: absolute; right: 0; background: none; border: 0; color: #fff; font-size: 1.4rem; line-height: 1; cursor: pointer; padding: 0 0.4rem; opacity: 0.85; }
.mms-announce__close:hover { opacity: 1; }

/* 34.2 Back-to-top --------------------------------------------------------- */
.mms-totop {
  position: fixed; right: 1.4rem; bottom: 1.6rem; z-index: 935;
  width: 48px; height: 48px; border-radius: 50%;
  display: grid; place-items: center; cursor: pointer;
  background: var(--mms-forest); color: var(--mms-on-dark); border: 1px solid rgba(244,238,227,0.25);
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity 0.3s, visibility 0.3s, transform 0.3s, background 0.3s;
}
.mms-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mms-totop:hover { background: var(--mms-forest-soft); }
.mms-totop svg { width: 20px; transform: rotate(-90deg); }
@media (max-width: 768px) { .mms-totop { right: 1rem; bottom: 76px; width: 44px; height: 44px; } }

/* 34.3 Before/After compare slider ----------------------------------------- */
.mms-compare {
  position: relative; aspect-ratio: 3 / 4; overflow: hidden;
  border-radius: var(--mms-radius); background: var(--mms-surface-alt); --pos: 50%;
  touch-action: pan-y;
}
.mms-compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.mms-compare__after { z-index: 1; }
.mms-compare__before { position: absolute; inset: 0; z-index: 2; clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.mms-compare__range {
  -webkit-appearance: none; appearance: none;
  position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%;
  margin: 0; background: transparent; cursor: ew-resize; opacity: 0;
}
.mms-compare__handle {
  position: absolute; top: 0; bottom: 0; left: var(--pos); z-index: 3;
  width: 2px; background: var(--mms-on-dark); transform: translateX(-1px); pointer-events: none;
}
.mms-compare__handle::after {
  content: "\2194"; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center;
  background: var(--mms-on-dark); color: var(--mms-forest); font-size: 1rem; box-shadow: var(--mms-shadow-sm);
}
.mms-compare__range:focus-visible + .mms-compare__handle::after { outline: 3px solid var(--mms-copper); outline-offset: 2px; }
.mms-compare__tag {
  position: absolute; top: 0.7rem; z-index: 3; padding: 0.25rem 0.7rem; border-radius: 4px;
  font-family: var(--mms-font-label); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase;
  background: rgba(28,36,30,0.72); color: #fff; pointer-events: none;
}
.mms-compare__tag--b { left: 0.7rem; }
.mms-compare__tag--a { right: 0.7rem; }

/* 34.4 Financing band ------------------------------------------------------- */
.mms-finance {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--mms-space-lg);
  background: var(--mms-surface); border: 1px solid var(--mms-line); border-left: 4px solid var(--mms-copper);
  border-radius: var(--mms-radius); padding: var(--mms-space-lg);
}
.mms-finance__icon { width: 56px; height: 56px; border-radius: 12px; background: var(--mms-surface-alt); color: var(--mms-copper); display: grid; place-items: center; }
.mms-finance__icon svg { width: 28px; }
.mms-finance__body h2 { font-size: var(--mms-step-2); margin: 0.2rem 0; }
.mms-finance__body p { color: var(--mms-ink-soft); font-size: 0.96rem; max-width: 62ch; }
@media (max-width: 760px) { .mms-finance { grid-template-columns: 1fr; text-align: left; } }

/* 34.5 Newsletter band ------------------------------------------------------ */
.mms-newsletter {
  position: relative; overflow: hidden; isolation: isolate;
  background: linear-gradient(150deg, var(--mms-forest), var(--mms-charcoal));
  color: var(--mms-on-dark); border-radius: var(--mms-radius-lg);
  padding: clamp(2rem, 5vw, 3.5rem);
}
.mms-newsletter__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--mms-space-xl); align-items: center; }
.mms-newsletter h2 { color: #fff; }
.mms-newsletter .mms-eyebrow { color: var(--mms-taupe); }
.mms-newsletter__lede { color: var(--mms-on-dark-soft); }
.mms-newsletter__row { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.mms-newsletter__row .mms-field { flex: 1 1 160px; }
.mms-newsletter__row input { background: rgba(244,238,227,0.95); }
.mms-newsletter .mms-check { color: var(--mms-on-dark-soft); margin-top: 0.8rem; font-size: 0.8rem; }
@media (max-width: 820px) { .mms-newsletter__inner { grid-template-columns: 1fr; } }

/* =============================================================================
   35. Pass 1 — Pricing menu + Gift cards
   ========================================================================== */

/* 35.1 Treatment menu (dotted-leader price list) ---------------------------- */
.mms-menu-group { margin-bottom: var(--mms-space-xl); }
.mms-menu-group__head { display: flex; align-items: baseline; gap: 1rem; border-bottom: 2px solid var(--mms-forest); padding-bottom: 0.7rem; margin-bottom: 0.6rem; }
.mms-menu-group__head h2 { font-size: var(--mms-step-2); }
.mms-menu { list-style: none; margin: 0; padding: 0; }
.mms-menu__row { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.85rem 0; border-bottom: 1px solid var(--mms-line); }
.mms-menu__info { display: flex; flex-direction: column; flex: 0 1 auto; }
.mms-menu__name { font-family: var(--mms-font-display); font-size: var(--mms-step-1); color: var(--mms-forest); text-decoration: none; }
.mms-menu__name:hover { color: var(--mms-copper-deep); }
.mms-menu__desc { font-size: 0.84rem; color: var(--mms-ink-muted); }
.mms-menu__dots { flex: 1 1 auto; border-bottom: 1px dotted var(--mms-taupe); transform: translateY(-3px); min-width: 1.5rem; }
.mms-menu__price { font-family: var(--mms-font-label); font-weight: 600; letter-spacing: 0.04em; color: var(--mms-copper-deep); white-space: nowrap; }

/* 35.2 Gift cards ----------------------------------------------------------- */
.mms-gift-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(220px, 100%), 1fr)); gap: var(--mms-space-md); }
.mms-gift-card {
  position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: var(--mms-space-lg);
  aspect-ratio: 1.6 / 1; padding: var(--mms-space-md);
  border-radius: var(--mms-radius); text-decoration: none; overflow: hidden;
  background: linear-gradient(150deg, var(--mms-forest), var(--mms-charcoal)); color: var(--mms-on-dark);
  border: 1px solid rgba(201,183,156,0.25);
  transition: transform var(--mms-dur) var(--mms-ease), box-shadow var(--mms-dur) var(--mms-ease);
}
.mms-gift-card::after { content: ""; position: absolute; right: -30px; bottom: -40px; width: 150px; height: 150px; background: radial-gradient(circle, rgba(181,98,60,0.4), transparent 70%); }
.mms-gift-card:hover { transform: translateY(-5px); box-shadow: var(--mms-shadow-lg); }
.mms-gift-card--custom { background: linear-gradient(150deg, var(--mms-copper-deep), var(--mms-terracotta)); }
.mms-gift-card__brand { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.66rem; color: var(--mms-taupe); }
.mms-gift-card--custom .mms-gift-card__brand { color: rgba(255,255,255,0.85); }
.mms-gift-card__brand svg { width: 16px; }
.mms-gift-card__amt { position: relative; z-index: 1; font-family: var(--mms-font-display); font-size: var(--mms-step-4); line-height: 1; color: #fff; }
.mms-gift-card__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.68rem; font-weight: 600; color: var(--mms-on-dark); }
.mms-gift-card__cta svg { width: 15px; }

/* =============================================================================
   36. Pass 2 — Provider spotlight + review aggregate
   ========================================================================== */
.mms-provider { background: var(--mms-surface); border: 1px solid var(--mms-line); border-radius: var(--mms-radius); overflow: hidden; transition: transform var(--mms-dur) var(--mms-ease), box-shadow var(--mms-dur) var(--mms-ease); }
.mms-provider:hover { transform: translateY(-5px); box-shadow: var(--mms-shadow); }
.mms-provider__photo { aspect-ratio: 4 / 5; overflow: hidden; background: var(--mms-surface-alt); }
.mms-provider__photo img { width: 100%; height: 100%; object-fit: cover; }
.mms-provider__body { padding: var(--mms-space-md); display: flex; flex-direction: column; gap: 0.3rem; }
.mms-provider__name { font-size: var(--mms-step-1); }
.mms-provider__role { font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.68rem; font-weight: 600; color: var(--mms-copper-deep); }
.mms-provider__cred { font-size: 0.8rem; color: var(--mms-ink-muted); }
.mms-provider__bio { font-size: 0.9rem; color: var(--mms-ink-soft); margin: 0.3rem 0 0.5rem; }
.mms-provider .mms-link-arrow { font-size: 0.66rem; }

.mms-rating { display: inline-flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.6rem; margin-top: var(--mms-space-sm); }
.mms-rating__stars { color: var(--mms-copper); font-size: 1.15rem; letter-spacing: 0.12em; }
.mms-rating__text { font-family: var(--mms-font-label); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.74rem; font-weight: 600; color: var(--mms-ink-soft); }

/* =============================================================================
   37. Pass 3 — performance, a11y & print polish
   ========================================================================== */

/* 37.1 Perf: skip rendering work for far-offscreen heavy bands -------------
   Removed `content-visibility: auto` from the footer. It made the browser
   estimate the footer's height instead of measuring it, so the document
   height changed as you approached the bottom. Combined with scroll
   restoration that produced jumps to the end of the page. The rendering
   saving on a footer this small was not worth it. */

/* 37.2 Larger, clearer focus ring on key interactive surfaces -------------- */
.mms-card a:focus-visible, .mms-perk:focus-within, .mms-gift-card:focus-visible { outline: 3px solid var(--mms-copper); outline-offset: 3px; }

/* 37.3 Respect prefers-contrast (stronger hairlines) ----------------------- */
@media (prefers-contrast: more) {
  :root { --mms-line: #b9ad97; --mms-ink-soft: #3f3a30; --mms-ink-muted: #4d4738; }
  .mms-card, .mms-perk, .mms-quote { border-width: 2px; }
}

/* 37.4 Print: clean, ink-friendly --------------------------------------------*/
@media print {
  .mms-topbar, .mms-announce, .mms-header, .mms-nav, .mms-burger,
  .mms-sticky-bar, .mms-float-book, .mms-totop, .mms-scroll-cue,
  .mms-ticker, .mms-hero__scrim, .mms-hero__grain, .mms-topo-lines,
  .mms-carousel__controls, .mms-progress, .mms-variant-switch { display: none !important; }
  body { background: #fff; color: #000; }
  .mms-hero, .mms-bg-forest, .mms-statement, .mms-cta-band, .mms-newsletter { background: #fff !important; color: #000 !important; }
  .mms-hero__title, .mms-statement__text, h1, h2, h3 { color: #000 !important; }
  .mms-section { padding-block: 1.5rem; }
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 0.8em; color: #555; }
  .mms-card, .mms-perk { break-inside: avoid; box-shadow: none; }
}

/* =============================================================================
   38. Page-builder / wide alignment support (Elementor, Gutenberg)
   ========================================================================== */

/* Full-width template content: constrain normal blocks, let wide/full break out
   (so the block editor reads well). */
.mms-fullwidth > * {
  max-width: var(--mms-maxw);
  margin-inline: auto;
  padding-inline: var(--mms-gutter);
}
.mms-fullwidth > .alignwide { max-width: 1400px; }
.mms-fullwidth > .alignfull { max-width: none; padding-inline: 0; }

/* When the page is actually built with Elementor, get out of its way entirely —
   Elementor sections manage their own full-bleed width. */
.mms-built-with-elementor .mms-fullwidth > *,
.mms-built-with-elementor .mms-fullwidth > .alignfull {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
}

/* Wide/full alignment inside the standard prose content area. */
.mms-prose .alignwide { width: min(1100px, 92vw); margin-inline: calc(50% - min(550px, 46vw)); max-width: none; }
.mms-prose .alignfull { width: 100vw; margin-inline: calc(50% - 50vw); max-width: none; }

/* =============================================================================
   39. Polish fixes
   ========================================================================== */
/* Services directory: make each filter-item's card fill the grid cell (the
   inline display:flex left cards content-sized / uneven). */
.mms-service-filter-item { display: flex; }
.mms-service-filter-item > .mms-card { flex: 1 1 auto; width: 100%; min-width: 0; }

/* Full-width builder article: no stray top/bottom gap from the wrapper. */
.mms-fullwidth { margin: 0; }

/* Form fieldset legends -> consistent signage labels. */
.mms-form fieldset legend {
  font-family: var(--mms-font-label);
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

/* =============================================================================
   40. Couture motion — hero word reveal, drawn ridge, magnetic, progress ring
   ========================================================================== */

/* 40.1 Hero headline: masked word-by-word rise -------------------------------*/
.mms-hero__title .mms-word {
  display: inline-block; overflow: hidden; vertical-align: top;
  padding: 0.12em 0.02em 0.2em; margin: -0.12em -0.02em -0.2em;
}
.mms-hero__title .mms-word > span {
  display: inline-block; transform: translateY(118%);
  transition: transform 0.9s var(--mms-ease);
  will-change: transform;
}
.mms-hero--in .mms-hero__title .mms-word > span { transform: none; }

/* 40.2 Self-drawing topographic ridge into the page -------------------------*/
.mms-hero__ridge path {
  stroke-dasharray: 1; stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.8s var(--mms-ease) 0.35s;
}
.mms-hero--in .mms-hero__ridge path { stroke-dashoffset: 0; }

/* 40.3 Magnetic buttons: smooth trailing transform --------------------------*/
.mms-hero__actions .mms-btn, .mms-cta-band .mms-btn, .mms-float-book {
  transition: transform 0.35s var(--mms-ease),
              box-shadow var(--mms-dur) var(--mms-ease),
              background-color var(--mms-dur) var(--mms-ease),
              color var(--mms-dur) var(--mms-ease);
}

/* 40.4 Back-to-top scroll-progress ring ------------------------------------ */
.mms-totop { overflow: visible; }
.mms-totop .mms-totop__ring {
  position: absolute; inset: 0; width: 100%; height: 100%;
  transform: rotate(-90deg); pointer-events: none;
}
.mms-totop .mms-totop__track { fill: none; stroke: rgba(244,238,227,0.20); stroke-width: 2; }
.mms-totop .mms-totop__bar {
  fill: none; stroke: var(--mms-copper); stroke-width: 2; stroke-linecap: round;
  transition: stroke-dashoffset 0.1s linear;
}
.mms-totop .mms-icon { position: relative; z-index: 1; }

/* 40.5 Reduced-motion: settle everything to final state ---------------------*/
@media (prefers-reduced-motion: reduce) {
  .mms-hero__title .mms-word > span { transform: none !important; }
  .mms-hero__ridge path { stroke-dashoffset: 0 !important; transition: none; }
  .mms-figure--arch img { transform: none !important; }
}

/* =============================================================================
   41. Scroll-driven motion (CSS animation-timeline; progressive enhancement)
   Gated by body.mms-scroll-fx (Customizer → Motion). Browsers without
   support keep the JS reveals; reduced-motion visitors get static layout.
   ========================================================================== */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    /* 41.1 Image portals wipe open as they enter the viewport ---------------- */
    .mms-scroll-fx .mms-figure--arch,
    .mms-scroll-fx .mms-card__media,
    .mms-scroll-fx .mms-post-card__media,
    .mms-scroll-fx .mms-provider__photo,
    .mms-scroll-fx .mms-team-card__photo {
      animation: mms-wipe-open linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
    /* 41.2 The journey's dotted trail draws itself --------------------------- */
    .mms-scroll-fx .mms-journey::before {
      transform-origin: left center;
      animation: mms-grow-x linear both;
      animation-timeline: view();
      animation-range: entry 10% cover 40%;
    }
    /* 41.3 Section index numerals slide in from the margin ------------------- */
    .mms-scroll-fx .mms-section-head .mms-index {
      animation: mms-index-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 45%;
    }
    /* 41.4 Hero settles back as you leave it (depth, not parallax) ----------- */
    .mms-scroll-fx .mms-hero__inner {
      animation: mms-hero-recede linear both;
      animation-timeline: scroll(root);
      animation-range: 0 90vh;
    }
    /* 41.5 Statement band: the emphasised word underlines itself ------------- */
    .mms-scroll-fx .mms-statement__text em { position: relative; }
    .mms-scroll-fx .mms-statement__text em::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -0.04em; height: 0.06em;
      background: currentColor; opacity: 0.8; border-radius: 2px;
      transform-origin: left center;
      animation: mms-grow-x linear both;
      animation-timeline: view();
      animation-range: entry 30% cover 55%;
    }
  }
  @media (prefers-reduced-motion: no-preference) and (max-width: 820px) {
    .mms-scroll-fx .mms-journey::before { transform-origin: center top; animation-name: mms-grow-y; }
  }
}
@keyframes mms-wipe-open {
  from { clip-path: inset(0 0 26% 0); transform: translateY(14px); }
  to   { clip-path: inset(0 0 0 0);   transform: none; }
}
@keyframes mms-grow-x { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes mms-grow-y { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes mms-index-in { from { opacity: 0; transform: translateX(-14px); } to { opacity: 0.9; transform: none; } }
@keyframes mms-hero-recede {
  from { transform: none; opacity: 1; }
  to   { transform: translateY(72px) scale(0.985); opacity: 0.2; }
}

/* =============================================================================
   42. The Ruidoso Skin Almanac — season bezel dial + tabs
   ========================================================================== */
.mms-almanac {
  display: grid; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); gap: var(--mms-space-xl);
  background: var(--mms-surface); border: 1px solid var(--mms-line); border-radius: var(--mms-radius-lg);
  padding: clamp(1.25rem, 3vw, 2.5rem); box-shadow: var(--mms-shadow-sm);
}
.mms-almanac__side { display: grid; gap: var(--mms-space-md); align-content: start; }

/* Dial */
.mms-almanac__dial { position: relative; width: min(240px, 100%); margin-inline: auto; aspect-ratio: 1; }
.mms-almanac__svg { width: 100%; height: 100%; display: block; overflow: visible; }
.mms-almanac__ring { fill: none; stroke: var(--mms-line); stroke-width: 1; }
.mms-almanac__ring--inner { stroke-dasharray: 2 5; opacity: 0.85; }
.mms-almanac__tick { stroke: var(--mms-taupe); stroke-width: 1.5; stroke-linecap: round; }
.mms-almanac__labels text { font-family: var(--mms-font-label); font-size: 9px; letter-spacing: 0.1em; fill: var(--mms-ink-muted); }
.mms-almanac__now { fill: var(--mms-copper); }
.mms-almanac__hand { transform-origin: 100px 100px; transform-box: view-box; transition: transform 1.1s var(--mms-ease); }
.mms-almanac__hand path { fill: var(--mms-forest); }
.mms-almanac__hand line { stroke: var(--mms-forest); stroke-width: 1.5; stroke-linecap: round; }
.mms-almanac__dial-center {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 58%; text-align: center; pointer-events: none; display: grid; gap: 0.2rem;
}
.mms-almanac__dial-window { font-family: var(--mms-font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-copper-deep); }
.mms-almanac__dial-name { font-family: var(--mms-font-display); font-size: 1.15rem; color: var(--mms-forest); line-height: 1.15; }

/* Tabs */
.mms-almanac__tabs { display: grid; gap: 0.5rem; }
.mms-almanac__tab {
  display: flex; align-items: center; gap: 0.8rem; width: 100%; text-align: left;
  padding: 0.7rem 0.9rem; border: 1px solid var(--mms-line); border-radius: var(--mms-radius);
  background: transparent; color: var(--mms-ink); cursor: pointer; font: inherit;
  transition: border-color var(--mms-dur) var(--mms-ease), background-color var(--mms-dur) var(--mms-ease), transform var(--mms-dur) var(--mms-ease);
}
.mms-almanac__tab:hover { border-color: var(--mms-taupe); transform: translateX(3px); }
.mms-almanac__tab[aria-selected="true"] { border-color: var(--mms-copper); background: var(--mms-bg); box-shadow: inset 3px 0 0 var(--mms-copper); }
.mms-almanac__tab-icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--mms-surface-alt); color: var(--mms-copper-deep); flex-shrink: 0; }
.mms-almanac__tab-icon .mms-icon { width: 18px; height: 18px; }
.mms-almanac__tab-text { display: grid; line-height: 1.2; }
.mms-almanac__tab-text > span { font-family: var(--mms-font-display); font-size: 1.05rem; }
.mms-almanac__tab-text small { font-family: var(--mms-font-label); font-size: 0.64rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--mms-ink-muted); }
.mms-almanac__tab-now {
  margin-left: auto; font-family: var(--mms-font-label); font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mms-copper-cta); border: 1px solid currentColor; border-radius: 999px; padding: 0.2rem 0.5rem;
}

/* Panels */
.mms-almanac__panel { animation: mms-fade-up 0.55s var(--mms-ease); }
.mms-almanac__panel:focus-visible { outline: 2px solid var(--mms-copper); outline-offset: 8px; border-radius: var(--mms-radius-sm); }
.mms-almanac__readings {
  display: flex; flex-wrap: wrap; gap: var(--mms-space-md) var(--mms-space-xl);
  padding-bottom: var(--mms-space-md); border-bottom: 1px solid var(--mms-line); margin-bottom: var(--mms-space-md);
}
.mms-almanac__reading { display: grid; }
.mms-almanac__reading-num { font-family: var(--mms-font-display); font-size: var(--mms-step-3); line-height: 1; color: var(--mms-forest); font-variant-numeric: tabular-nums; font-weight: 500; }
.mms-almanac__reading-lbl { font-family: var(--mms-font-label); font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-ink-muted); margin-top: 0.4rem; }
.mms-almanac__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--mms-space-md) var(--mms-space-lg); }
.mms-almanac__col h3 { font-family: var(--mms-font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-copper-deep); margin-bottom: 0.5rem; font-weight: 600; }
.mms-almanac__col p, .mms-almanac__col li { font-size: 0.95rem; color: var(--mms-ink-soft); }
.mms-almanac__col ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.mms-almanac__col li { padding-left: 1rem; position: relative; }
.mms-almanac__col li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mms-taupe); }
.mms-almanac__col--book li::before { background: var(--mms-copper); }
.mms-almanac__col--book a {
  color: var(--mms-ink); text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem;
  border-bottom: 1px solid transparent; transition: border-color var(--mms-dur), color var(--mms-dur);
}
.mms-almanac__col--book a:hover { color: var(--mms-copper-deep); border-color: currentColor; }
.mms-almanac__col--book a .mms-icon { width: 14px; height: 14px; }
.mms-almanac__note {
  margin-top: var(--mms-space-md); padding: 0.9rem 1rem; border-radius: var(--mms-radius);
  background: var(--mms-bg); border: 1px dashed var(--mms-taupe); font-size: 0.92rem;
  display: flex; gap: 0.5rem; align-items: flex-start;
}
.mms-almanac__note .mms-icon { width: 16px; height: 16px; flex-shrink: 0; margin-top: 0.15rem; color: var(--mms-copper-deep); }
@media (max-width: 900px) {
  .mms-almanac { grid-template-columns: 1fr; gap: var(--mms-space-lg); }
  .mms-almanac__side { grid-template-columns: minmax(0, 200px) 1fr; align-items: center; }
}
@media (max-width: 600px) {
  .mms-almanac__side { grid-template-columns: 1fr; }
  .mms-almanac__cols { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .mms-almanac__hand { transition: none; }
  .mms-almanac__panel { animation: none; }
  .mms-almanac__tab:hover { transform: none; }
}

/* =============================================================================
   43. Journal article: provenance, quick answer, takeaways, TOC, author box
   ========================================================================== */
.mms-prov { margin-top: var(--mms-space-sm); font-family: var(--mms-font-label); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mms-ink-muted); }
.mms-prov__name { color: var(--mms-ink); font-weight: 600; }

.mms-article-layout {
  display: grid; grid-template-columns: minmax(0, var(--mms-maxw-narrow)) 250px;
  gap: var(--mms-space-2xl); justify-content: center; align-items: start;
}
.mms-article-layout .mms-article { margin-inline: 0; }
.mms-article-side { position: sticky; top: calc(var(--mms-header-offset, var(--mms-header-h)) + 1.5rem); display: grid; gap: var(--mms-space-lg); }
@media (max-width: 1000px) {
  .mms-article-layout { grid-template-columns: minmax(0, 1fr); }
  .mms-article-layout .mms-article { margin-inline: auto; }
  .mms-article-side { position: static; max-width: var(--mms-maxw-narrow); margin-inline: auto; width: 100%; }
}

.mms-quick__label, .mms-takeaways__label, .mms-toc__label, .mms-author__label, .mms-side-cta__label {
  font-family: var(--mms-font-label); font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--mms-copper-deep); margin-bottom: 0.5rem; font-weight: 600;
}
.mms-quick { border-left: 3px solid var(--mms-copper); padding: 0.2rem 0 0.2rem 1.25rem; margin-bottom: var(--mms-space-lg); }
.mms-quick__text { font-family: var(--mms-font-display); font-size: var(--mms-step-1); line-height: 1.45; color: var(--mms-forest); }

.mms-takeaways {
  background: var(--mms-surface); border: 1px solid var(--mms-line); border-radius: var(--mms-radius-lg);
  padding: var(--mms-space-md) var(--mms-space-lg); margin-bottom: var(--mms-space-lg);
}
.mms-takeaways ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; counter-reset: tk; }
.mms-takeaways li { position: relative; padding-left: 1.8rem; line-height: 1.5; }
.mms-takeaways li::before {
  content: counter(tk, decimal-leading-zero); counter-increment: tk;
  position: absolute; left: 0; top: 0.2em; font-family: var(--mms-font-label); font-size: 0.66rem; letter-spacing: 0.06em; color: var(--mms-copper-deep);
}

.mms-toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.2rem; }
.mms-toc a {
  display: block; padding: 0.3rem 0 0.3rem 0.9rem; border-left: 2px solid var(--mms-line);
  color: var(--mms-ink-soft); text-decoration: none; font-size: 0.9rem; line-height: 1.35;
  transition: color var(--mms-dur), border-color var(--mms-dur), padding-left var(--mms-dur) var(--mms-ease);
}
.mms-toc a:hover, .mms-toc a.is-active { color: var(--mms-forest); border-color: var(--mms-copper); padding-left: 1.1rem; }
.mms-prose h2[id], .mms-prose h3[id] { scroll-margin-top: calc(var(--mms-header-offset, var(--mms-header-h)) + 1.5rem); }

.mms-side-cta { background: var(--mms-forest); color: var(--mms-on-dark); border-radius: var(--mms-radius-lg); padding: var(--mms-space-md); }
.mms-side-cta__label { color: var(--mms-taupe); }
.mms-side-cta__text { font-size: 0.92rem; color: var(--mms-on-dark-soft); margin-bottom: var(--mms-space-sm); }
.mms-side-cta .mms-btn { width: 100%; justify-content: center; }

.mms-author {
  display: grid; grid-template-columns: 72px 1fr; gap: var(--mms-space-md); align-items: start;
  padding: var(--mms-space-md) 0; border-top: 1px solid var(--mms-line); border-bottom: 1px solid var(--mms-line); margin-top: var(--mms-space-xl);
}
.mms-author__avatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; display: block; }
.mms-author__name { font-family: var(--mms-font-display); font-size: var(--mms-step-1); color: var(--mms-forest); }
.mms-author__bio { color: var(--mms-ink-soft); font-size: 0.95rem; margin-top: 0.25rem; }
.mms-author__review { margin-top: 0.6rem; font-size: 0.85rem; color: var(--mms-ink-muted); display: flex; gap: 0.4rem; align-items: center; }
.mms-author__review .mms-icon { width: 15px; height: 15px; color: var(--mms-copper-deep); }
@media (max-width: 480px) { .mms-author { grid-template-columns: 56px 1fr; } .mms-author__avatar img { width: 56px; height: 56px; } }

/* =============================================================================
   43b. Fixed-element stacking (bottom-right corner)
   .mms-float-book and .mms-totop were both pinned to right:1.4rem/bottom:1.6rem,
   so the back-to-top control sat invisibly underneath the Book A Visit pill on
   every desktop page. Stack them instead: to-top sits above the pill while the
   pill is showing, and drops back down on phones where the pill is hidden and
   the sticky booking bar owns the bottom edge.
   ========================================================================== */
@media (min-width: 769px) {
  .mms-totop { bottom: calc(1.6rem + 62px); }
}
/* Below 769px .mms-float-book is hidden and the existing mobile rule already
   lifts .mms-totop clear of the sticky booking bar, so nothing to do here. */

/* =============================================================================
   44. Cherry financing widget
   Cherry injects its own styles into #hero, #calculator, #howitworks and #faq.
   We only control the wrapper, keep it inside the grid, and move the floating
   estimator out of the way of the theme's own fixed furniture.
   ========================================================================== */
.mms-cherry { display: grid; gap: var(--mms-space-lg); }
.mms-cherry > div { min-width: 0; max-width: 100%; }
.mms-cherry img { max-width: 100%; height: auto; }

/* The theme owns bottom-right: .mms-float-book (z 940) and .mms-totop (z 935).
   Cherry's estimator is configured bottom-left; on phones the sticky booking
   bar takes the full bottom edge (~57px tall), so lift the estimator above it.
   Cherry renders the pill in its own fixed container (hashed class, outside
   #floatingEstimator), so a margin on #floatingEstimator's children never
   moved it and the bar covered the pill once it slid in. */
@media (max-width: 768px) {
  [class*="floatingEstimator-floatingContainer"] {
    left: 16px !important;
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
  }
}

/* CookieAdmin's re-consent button is pinned bottom-left at 15px/15px, right on
   top of Cherry's "Pay over time" pill (bottom-left, 32px in, 52px tall).
   Stack the cookie button above the pill, lined up with its left edge. */
.cookieadmin_re_consent {
  left: 32px !important;
  bottom: calc(32px + 52px + 12px) !important;
}
@media (max-width: 768px) {
  /* Phones: the pill is 32px tall and sits 72px up, clear of the booking bar. */
  .cookieadmin_re_consent {
    left: 16px !important;
    bottom: calc(72px + 32px + 12px + env(safe-area-inset-bottom)) !important;
  }
  /* First-visit consent banner: keep it above the Call / Services / Book bar. */
  .cookieadmin_law_container {
    bottom: calc(72px + env(safe-area-inset-bottom)) !important;
    max-height: calc(100dvh - 72px - 96px);
    overflow-y: auto;
  }
}

/* Keep the floating third-party buttons off the open mobile menu. */
body.mms-nav-open [class*="floatingEstimator-floatingContainer"],
body.mms-nav-open .cookieadmin_re_consent { display: none !important; }

/* Never print a financing calculator. */
@media print {
  #floatingEstimator, .mms-cherry { display: none !important; }
}

/* =============================================================================
   45. Treatment menu list (service landing pages)
   ========================================================================== */
.mms-menu-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; max-width: 820px; margin-inline: auto; }
.mms-menu-list__item {
  display: flex; align-items: baseline; gap: var(--mms-space-md);
  padding: var(--mms-space-sm) 0;
  border-bottom: 1px solid var(--mms-line);
}
.mms-menu-list__item:first-child { border-top: 1px solid var(--mms-line); }
.mms-menu-list__num {
  font-family: var(--mms-font-label); font-size: 0.68rem; letter-spacing: 0.14em;
  color: var(--mms-copper-deep); flex-shrink: 0; min-width: 2ch;
}
.mms-menu-list__name { font-family: var(--mms-font-display); font-size: var(--mms-step-1); color: var(--mms-forest); line-height: 1.3; }
@media (max-width: 480px) { .mms-menu-list__item { gap: var(--mms-space-sm); } }

/* =============================================================================
   46. Book A Visit: scheduler card + "or" divider
   ========================================================================== */
.mms-book-online {
  background: var(--mms-forest); color: var(--mms-on-dark);
  border-radius: var(--mms-radius-lg); padding: var(--mms-space-lg);
  position: relative; overflow: hidden;
}
.mms-book-online h2 { color: #fff; font-size: var(--mms-step-2); margin-bottom: var(--mms-space-xs); }
.mms-book-online p { color: var(--mms-on-dark-soft); }
.mms-book-online .mms-eyebrow { color: var(--mms-taupe); }
.mms-book-online__icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  background: rgba(244,238,227,0.12); color: var(--mms-taupe); margin-bottom: var(--mms-space-sm);
}
.mms-book-online__icon .mms-icon { width: 22px; height: 22px; }
.mms-book-online .mms-btn { justify-content: center; }

.mms-book-or {
  display: flex; align-items: center; gap: var(--mms-space-sm);
  margin: var(--mms-space-lg) 0; color: var(--mms-ink-muted);
  font-family: var(--mms-font-label); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase;
}
.mms-book-or::before, .mms-book-or::after { content: ""; flex: 1; height: 1px; background: var(--mms-line); }

/* =============================================================================
   47. The Clinic — purpose-built rooms band
   ========================================================================== */
.mms-clinic { position: relative; overflow: hidden; }
.mms-clinic .mms-section-head h2 { color: #fff; max-width: 20ch; }
.mms-clinic .mms-section-head .mms-lede { color: var(--mms-on-dark-soft); max-width: 62ch; }
.mms-clinic .mms-eyebrow { color: var(--mms-taupe); }

.mms-clinic__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: var(--mms-space-2xl);
  align-items: start;
  margin-top: var(--mms-space-xl);
}
.mms-clinic__media { position: relative; }
.mms-clinic__media .mms-figure--arch { box-shadow: var(--mms-shadow-lg); }
.mms-clinic__media img { width: 100%; height: auto; display: block; aspect-ratio: 4 / 5; object-fit: cover; }

.mms-clinic__rooms { list-style: none; margin: 0; padding: 0; display: grid; gap: 0; counter-reset: room; }
.mms-clinic__room {
  display: grid; grid-template-columns: 48px 1fr; gap: var(--mms-space-md);
  padding: var(--mms-space-lg) 0;
  border-bottom: 1px solid rgba(244, 238, 227, 0.14);
}
.mms-clinic__room:first-child { padding-top: 0; }
.mms-clinic__room:last-child { border-bottom: 0; padding-bottom: 0; }
.mms-clinic__room-icon {
  display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid rgba(244, 238, 227, 0.22); color: var(--mms-taupe);
}
.mms-clinic__room-icon .mms-icon { width: 21px; height: 21px; }
.mms-clinic__room-body { display: block; }
.mms-clinic__room-num {
  display: block; font-family: var(--mms-font-label); font-size: 0.64rem;
  letter-spacing: 0.18em; color: var(--mms-taupe); margin-bottom: 0.35rem;
}
.mms-clinic__room-name { font-family: var(--mms-font-display); font-size: var(--mms-step-2); color: #fff; line-height: 1.15; margin-bottom: 0.5rem; }
.mms-clinic__room-desc { color: var(--mms-on-dark-soft); font-size: 1rem; line-height: 1.65; max-width: 54ch; }

.mms-clinic__note {
  margin-top: var(--mms-space-xl);
  padding-top: var(--mms-space-lg);
  border-top: 1px solid rgba(244, 238, 227, 0.14);
  font-family: var(--mms-font-display);
  font-size: var(--mms-step-1);
  line-height: 1.55;
  color: var(--mms-on-dark-soft);
  max-width: 68ch;
}

@media (max-width: 900px) {
  .mms-clinic__layout { grid-template-columns: 1fr; gap: var(--mms-space-lg); }
  .mms-clinic__media { max-width: 460px; }
}
@media (max-width: 520px) {
  .mms-clinic__room { grid-template-columns: 1fr; gap: var(--mms-space-sm); }
  .mms-clinic__room-icon { width: 40px; height: 40px; }
}

/* Utility used by the homepage stat band. */
.mms-mt-2xl { margin-top: var(--mms-space-2xl); }
.mms-arrival { font-size: 0.95rem; color: var(--mms-ink-soft); margin-top: 0.5rem; line-height: 1.6; }

/* =============================================================================
   48. Mobile repairs found in the luxury audit
   ========================================================================== */

/* 48.1 Before/after pairs were two ~160px images side by side on a phone.
   Medical result photos at that size are worthless, and this is the section
   clients travel to see. Stack them. */
@media (max-width: 620px) {
  .mms-ba__pair { grid-template-columns: 1fr; gap: var(--mms-space-xs); }
}

/* 48.2 The dotted-leader price list kept its single flex row at every width,
   so the treatment name crushed against the price. Stack, and retire the
   leader dots where they no longer have room to do their job. */
@media (max-width: 620px) {
  .mms-menu__row { flex-wrap: wrap; gap: 0.2rem 0.6rem; }
  .mms-menu__dots { display: none; }
  .mms-menu__price { margin-left: auto; }
}

/* 48.3 The topbar carried the coordinates, hours and phone number and was
   simply hidden below 860px, taking the strongest identity strip on the site
   with it. Keep the phone number, which is the part that converts. */
@media (max-width: 860px) {
  .mms-topbar { display: block; padding-block: 0.45rem; }
  .mms-topbar__inner { justify-content: center; }
  .mms-topbar__place,
  .mms-topbar__hours { display: none; }
  .mms-topbar__right { justify-content: center; width: 100%; gap: var(--mms-space-md); }
}

/* 48.4 Card interiors: 1.5rem of padding around a serif title is the visual
   signature of a stock theme, and it sat next to 2.5rem cards on the same
   page. One value. */
.mms-card__body,
.mms-post-card__body,
.mms-provider__body { padding: var(--mms-space-lg); }
@media (max-width: 520px) {
  .mms-card__body,
  .mms-post-card__body,
  .mms-provider__body { padding: var(--mms-space-md); }
}

/* 48.5 The treatment menu and the trust strip were the two tightest rhythms
   on the site, on the two moments that most want to feel printed. */
.mms-menu-list__item { padding: var(--mms-space-md) 0; }
.mms-trust__item { padding: var(--mms-space-md) var(--mms-space-md); }
.mms-footer__provider {
  margin-top: var(--mms-space-sm);
  font-family: var(--mms-font-label);
  font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--mms-taupe);
}
.mms-provider__cred { font-family: var(--mms-font-label); font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mms-copper-deep); margin-bottom: 0.15rem; }

/* =============================================================================
   49. Surface separation
   --mms-bg #F4EEE3 and --mms-surface #FBF7EF were a ~3% luminance step, so
   half the homepage's "alternation" did not read as alternation at all — the
   page scanned as one unbroken beige punctuated by dark bands. Widening the
   step does more for perceived structure than any single component change.
   ========================================================================== */
:root {
  --mms-cream: #FFFCF6;   /* was #FBF7EF */
  --mms-surface-alt: #E8DCC7; /* was #EDE4D3 */
}

/* =============================================================================
   50. Icon + button sizing
   Icons are emitted as <svg class="mms-icon" viewBox="0 0 24 24"> with no
   width or height. The base rule `svg { height: auto }` then let them take
   their intrinsic ratio from whatever width was available, so inside a flex
   button the arrow expanded and squeezed "Book A Visit" onto three lines with
   the glyph sitting over the text. Components that set their own svg width
   are more specific and still win.
   ========================================================================== */
.mms-icon { width: 1.15em; height: 1.15em; flex-shrink: 0; }

/* Button labels are short by design; they should never wrap. */
.mms-btn { white-space: nowrap; }
.mms-btn .mms-icon { width: 1.05em; height: 1.05em; }
@media (max-width: 420px) {
  /* Except on the narrowest phones, where nowrap would overflow instead. */
  .mms-btn { white-space: normal; }
}

/* Ghost buttons sit on the dark hero as well as on light sections, but only
   .mms-bg-forest was handled, so "Explore Services" rendered forest-green on
   near-black and was effectively invisible. */
.mms-hero .mms-btn--ghost,
.mms-statement .mms-btn--ghost,
.mms-cta-band .mms-btn--ghost,
.mms-clinic .mms-btn--ghost {
  --_fg: var(--mms-on-dark);
  border-color: rgba(244, 239, 230, 0.55);
}
.mms-hero .mms-btn--ghost:hover,
.mms-statement .mms-btn--ghost:hover,
.mms-cta-band .mms-btn--ghost:hover,
.mms-clinic .mms-btn--ghost:hover {
  --_bg: var(--mms-on-dark);
  --_fg: var(--mms-forest);
  border-color: var(--mms-on-dark);
}

/* =============================================================================
   51. Hero furniture collisions
   ========================================================================== */

/* The trust strip pulls 40px up into the hero, which put it straight through
   the scroll cue sitting 1.6rem off the hero's bottom edge. Lifting the cue to
   clear the strip then drove it up through the coordinates line instead, so
   both offsets now come from one reserved band: the cue sits inside it and the
   hero's content stops above it. Change the band and the two stay in step. */
.mms-hero { --mms-cue-band: 9.5rem; }
.mms-hero__scroll-space .mms-scroll-cue,
.mms-scroll-cue { bottom: 5.2rem; }
.mms-hero .mms-hero__inner { padding-bottom: calc(clamp(3.5rem, 10vw, 9rem) * 0.4 + var(--mms-cue-band)); }

/* The cue is hidden below 768px, so nothing needs reserving there. */
@media (max-width: 768px) {
  .mms-hero { --mms-cue-band: 0rem; }
}

/* The mobile sticky booking bar and the hero's own primary button were both
   on screen at the top of the page, about 40px apart, reading as two competing
   calls to action. The bar now slides in once you have scrolled past the hero,
   which is also when it becomes useful. */
@media (max-width: 768px) {
  .mms-sticky-bar {
    transform: translateY(100%);
    transition: transform 0.35s var(--mms-ease);
    will-change: transform;
  }
  body.mms-past-hero .mms-sticky-bar { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mms-sticky-bar { transition: none; }
}

/* =============================================================================
   52. Icon containers that size the box, not the glyph
   Section 50 gave .mms-icon a default size. These wrappers set their own box
   and previously relied on the SVG stretching to fill it, so they need the
   glyph told to fill again.
   ========================================================================== */
/* These wrappers are <span>s, so their width/height never applied at all —
   the glyph was sizing itself against the whole card. Make the box real and
   give the glyph an explicit size inside it. */
.mms-choice__icon,
.mms-brand__icon { display: inline-flex; align-items: center; justify-content: center; }
.mms-choice__icon .mms-icon { width: 30px; height: 30px; }
.mms-brand__icon .mms-icon { width: 100%; height: 100%; }

/* Icons dropped straight into a centred empty state, with no wrapper. */
.mms-consent-gate > .mms-icon,
.mms-quiz__result > .mms-icon { width: 38px; height: 38px; color: var(--mms-copper); }

/* Journey numerals on the dark band were clay-on-forest: legible in theory,
   muddy in practice. Give them the light ink the rest of that band uses. */
.mms-bg-forest .mms-step__num,
.mms-clinic .mms-step__num {
  background: transparent;
  border-color: rgba(244, 238, 227, 0.45);
  color: var(--mms-on-dark);
}

/* =============================================================================
   53. Horizontal overflow on mobile
   The closed mobile nav is a fixed panel parked off-screen right with
   translateX(100%). A transformed element still contributes to the document's
   scrollable area, so every page was twice as wide as the viewport on a phone
   and could be swiped sideways into empty space. `clip` rather than `hidden`
   so the sticky header keeps working.
   ========================================================================== */
html { overflow-x: clip; }
@supports not (overflow-x: clip) {
  body { overflow-x: hidden; }
}

/* Belt and braces: the parked panel should not be reachable or paintable. */
@media (max-width: 1024px) {
  .mms-nav { visibility: hidden; }
  .mms-nav.is-open { visibility: visible; }
}

/* =============================================================================
   54. "What We Use" brand strip
   Restrained on purpose: these are other companies' logos in other companies'
   colours, so they run small, muted and evenly sized, and come up to full
   strength on hover. The point is the names, not the artwork.
   ========================================================================== */
.mms-brands { border-top: 1px solid var(--mms-line); border-bottom: 1px solid var(--mms-line); }
.mms-brands__label {
  font-family: var(--mms-font-label); font-size: 0.66rem; letter-spacing: 0.2em;
  text-transform: uppercase; color: var(--mms-ink-muted);
  text-align: center; margin-bottom: var(--mms-space-lg);
}
.mms-brands__row {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: var(--mms-space-lg) var(--mms-space-2xl);
}
.mms-brands__item { display: flex; align-items: center; justify-content: center; }
.mms-brands__item img {
  max-height: 34px; width: auto; max-width: 150px; object-fit: contain;
  filter: grayscale(1); opacity: 0.55;
  transition: filter var(--mms-dur) var(--mms-ease), opacity var(--mms-dur) var(--mms-ease);
}
.mms-brands__item img:hover { filter: grayscale(0); opacity: 1; }
@media (max-width: 640px) {
  .mms-brands__row { gap: var(--mms-space-md) var(--mms-space-lg); }
  .mms-brands__item img { max-height: 26px; max-width: 110px; }
}
@media (prefers-reduced-motion: reduce) { .mms-brands__item img { transition: none; } }

/* =============================================================================
   55. Review rail — scrollable Google reviews with star ratings
   ========================================================================== */
.mms-reviews__head {
  display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between;
  gap: var(--mms-space-md); margin-bottom: var(--mms-space-lg);
}
.mms-reviews__score { display: grid; gap: 0.3rem; justify-items: flex-start; }
.mms-reviews__num {
  font-family: var(--mms-font-display); font-size: var(--mms-step-3); line-height: 1;
  color: var(--mms-forest); font-variant-numeric: tabular-nums;
}
.mms-reviews__count {
  font-family: var(--mms-font-label); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mms-ink-muted);
}

/* Stars, drawn from the SVG set rather than typed as ★ characters. */
.mms-stars { display: inline-flex; gap: 0.12rem; }
.mms-stars__s { display: inline-flex; color: var(--mms-line); }
.mms-stars__s.is-on { color: var(--mms-copper); }
.mms-stars .mms-icon { width: 15px; height: 15px; }
.mms-reviews__score .mms-stars .mms-icon { width: 18px; height: 18px; }

/* The rail itself: a real scroll container, snapping, keyboard reachable. */
.mms-reviews__rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(280px, 360px);
  gap: var(--mms-space-md);
  overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-left: var(--mms-gutter);
  padding: 0.4rem 0 var(--mms-space-md);
  scrollbar-width: thin; scrollbar-color: var(--mms-taupe) transparent;
}
.mms-reviews__rail::-webkit-scrollbar { height: 6px; }
.mms-reviews__rail::-webkit-scrollbar-thumb { background: var(--mms-taupe); border-radius: 99px; }
.mms-reviews__rail::-webkit-scrollbar-track { background: transparent; }
.mms-reviews__rail:focus-visible { outline: 3px solid var(--mms-copper); outline-offset: 6px; border-radius: var(--mms-radius); }

.mms-review {
  scroll-snap-align: start;
  display: flex; flex-direction: column; gap: 0.7rem;
  background: var(--mms-surface); border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg); padding: var(--mms-space-lg);
}
.mms-review__text {
  font-size: 0.97rem; line-height: 1.62; color: var(--mms-ink-soft);
  display: -webkit-box; -webkit-line-clamp: 8; -webkit-box-orient: vertical; overflow: hidden;
}
.mms-review__foot {
  margin-top: auto; padding-top: 0.6rem; border-top: 1px solid var(--mms-line);
  display: flex; align-items: center; gap: 0.6rem;
}
.mms-review__avatar { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.mms-review__author { display: block; font-weight: 600; font-size: 0.9rem; color: var(--mms-forest); }
.mms-review__when {
  display: block; font-family: var(--mms-font-label); font-size: 0.64rem;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--mms-ink-muted);
}

.mms-reviews__actions {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: var(--mms-space-md); margin-top: var(--mms-space-sm);
}
.mms-reviews__nav { display: flex; gap: 0.5rem; }
.mms-reviews__links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--mms-space-md); }
.mms-reviews__note {
  margin-top: var(--mms-space-md); font-size: 0.8rem; color: var(--mms-ink-muted); max-width: 62ch;
}
@media (max-width: 640px) {
  .mms-reviews__rail { grid-auto-columns: minmax(250px, 84vw); }
  .mms-reviews__nav { display: none; } /* swipe is the natural gesture here */
  .mms-reviews__actions { justify-content: center; }
}
.mms-footer__review {
  display: inline-flex; align-items: center; gap: 0.45rem; margin-top: var(--mms-space-md);
  font-family: var(--mms-font-label); font-size: 0.68rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--mms-taupe); text-decoration: none;
  border-bottom: 1px solid transparent; transition: color var(--mms-dur), border-color var(--mms-dur);
}
.mms-footer__review:hover { color: #fff; border-color: currentColor; }
.mms-footer__review .mms-icon { width: 14px; height: 14px; color: var(--mms-copper); }
.mms-footer__reviews { display: grid; gap: 0.35rem; justify-items: start; margin-top: var(--mms-space-md); }
.mms-footer__reviews .mms-footer__review { margin-top: 0; }

/* The rail is clipped by the container, which chops the next card mid-word.
   Fade the trailing edge so the cut reads as "there is more" rather than as a
   layout mistake, and drop the fade once you reach the end. */
.mms-reviews__rail {
  --_fade: 56px;
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - var(--_fade)), transparent 100%);
          mask-image: linear-gradient(to right, #000 calc(100% - var(--_fade)), transparent 100%);
}
.mms-reviews__rail.is-end { --_fade: 0px; }
@supports not (mask-image: linear-gradient(#000, #000)) {
  .mms-reviews__rail { -webkit-mask-image: none; mask-image: none; }
}

/* -----------------------------------------------------------------------------
   56. Memberships, rewards & gift terms
   -------------------------------------------------------------------------- */
.mms-mt-md { margin-top: var(--mms-space-md); }

/* Tick lists — used for gift-card terms and tier perks. */
.mms-ticks {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--mms-space-sm);
  max-width: 62ch;
}
.mms-ticks > li {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  line-height: 1.6;
}
.mms-ticks > li .mms-icon {
  width: 1.15em;
  height: 1.15em;
  flex-shrink: 0;
  margin-top: 0.28em;
  color: var(--mms-copper-deep);
}

/* Tiers */
.mms-tiers {
  display: grid;
  gap: var(--mms-space-md);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: stretch;
}
.mms-tier {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--mms-space-sm);
  padding: var(--mms-space-lg) var(--mms-space-md) var(--mms-space-md);
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg);
}
.mms-tier--featured {
  border-color: var(--mms-copper);
  box-shadow: 0 12px 40px -24px rgba(34, 30, 24, 0.5);
}
.mms-tier__flag {
  position: absolute;
  top: 0;
  left: var(--mms-space-md);
  transform: translateY(-50%);
  margin: 0;
  padding: 0.28rem 0.7rem;
  font-family: var(--mms-font-label);
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--mms-on-dark);
  background: var(--mms-copper-cta);
  border-radius: 999px;
}
.mms-tier__icon { display: inline-flex; color: var(--mms-copper-deep); }
.mms-tier__icon .mms-icon { width: 30px; height: 30px; }
.mms-tier__name { margin: 0.4rem 0 0.2rem; font-size: var(--mms-step-2); }
.mms-tier__best { margin: 0; color: var(--mms-ink-muted); font-size: var(--mms-step--1); }
.mms-tier__price { margin: 0; display: flex; align-items: baseline; gap: 0.35rem; }
.mms-tier__amt {
  font-family: var(--mms-font-display);
  font-size: var(--mms-step-3);
  line-height: 1;
}
.mms-tier__per { color: var(--mms-ink-muted); font-size: var(--mms-step--1); }
.mms-tier__ask {
  font-family: var(--mms-font-label);
  font-size: var(--mms-step-0);
  color: var(--mms-ink-muted);
}
.mms-tier__credit {
  margin: 0;
  font-weight: 500;
  color: var(--mms-copper-deep);
}
.mms-tier__perks {
  list-style: none;
  margin: 0;
  padding: var(--mms-space-sm) 0 0;
  border-top: 1px solid var(--mms-line);
  display: grid;
  gap: 0.6rem;
  flex: 1 1 auto;
}
.mms-tier__perks > li {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: var(--mms-step--1);
  line-height: 1.55;
}
.mms-tier__perks .mms-icon {
  width: 1.05em;
  height: 1.05em;
  flex-shrink: 0;
  margin-top: 0.3em;
  color: var(--mms-sage);
}
.mms-tier__cta { margin-top: auto; justify-content: center; }

/* Manufacturer rewards */
.mms-rewards {
  display: grid;
  gap: var(--mms-space-md);
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
  align-items: stretch;
}
.mms-reward {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: var(--mms-space-md);
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg);
}
.mms-reward__head { display: flex; flex-direction: column; gap: 0.15rem; }
.mms-reward__name { margin: 0; font-size: var(--mms-step-1); }
.mms-reward__by {
  margin: 0;
  font-family: var(--mms-font-label);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mms-ink-muted);
}
.mms-reward__covers {
  margin: 0;
  padding: 0.3rem 0.6rem;
  align-self: flex-start;
  font-size: var(--mms-step--1);
  color: var(--mms-forest);
  background: var(--mms-surface-alt);
  border-radius: 999px;
}
.mms-reward__earn {
  margin: 0;
  padding-left: 1.1rem;
  display: grid;
  gap: 0.45rem;
  font-size: var(--mms-step--1);
  line-height: 1.55;
}
.mms-reward__worth {
  margin: 0;
  padding-top: 0.7rem;
  border-top: 1px solid var(--mms-line);
  font-family: var(--mms-font-display);
  font-size: var(--mms-step-1);
}
.mms-reward__note {
  margin: 0;
  font-size: var(--mms-step--1);
  color: var(--mms-ink-muted);
  font-style: italic;
  line-height: 1.55;
}
.mms-reward .mms-link-arrow { margin-top: auto; }

/* -----------------------------------------------------------------------------
   57. Target size (WCAG 2.2 AA, 2.5.8)
   Three components sat under the 24px minimum on a phone: the top-bar phone
   link, the arrow CTAs inside cards, and the footer review links. They are
   standalone controls rather than links inside a sentence, so the inline
   exception does not apply to them.
   -------------------------------------------------------------------------- */
.mms-topbar a,
.mms-link-arrow,
.mms-footer__review {
  min-height: 24px;
}
.mms-topbar a,
.mms-footer__review {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.mms-link-arrow { padding-block: 0.15rem; }

/* Footer link lists are stacked standalone targets, not links inside a
   sentence, so the inline exception does not cover them either. */
.mms-footer ul a,
.mms-footer__legal-links a {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
}

/* -----------------------------------------------------------------------------
   58. Review band refinements
   The score read as a stray numeral in a narrow left column with most of the
   row empty, and the cards were undifferentiated blocks of text. Group the
   score into one unit set against the heading, and give each card an anchor.
   -------------------------------------------------------------------------- */
.mms-reviews__head {
  /* .mms-section-head caps at 720px, which made this flex row wrap and put
     the score under the heading instead of opposite it. */
  max-width: none;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mms-space-md);
}
.mms-reviews__score {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  padding: 0.7rem 1.1rem;
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius);
}
.mms-reviews__num {
  font-family: var(--mms-font-display);
  font-size: 2.5rem;
  line-height: 1;
  color: var(--mms-forest);
}
.mms-reviews__score .mms-stars { display: block; }
.mms-reviews__score > span:last-child { display: block; }
.mms-reviews__count {
  font-family: var(--mms-font-label);
  font-size: 0.66rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mms-ink-muted);
  max-width: 9rem;
  line-height: 1.4;
}

.mms-review { position: relative; padding-top: var(--mms-space-md); }
.mms-review__mark {
  position: absolute;
  top: 0.9rem;
  right: 1.1rem;
  color: var(--mms-champagne);
}
.mms-review__mark .mms-icon { width: 30px; height: 30px; }
.mms-review__text {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.mms-review__initial {
  width: 36px; height: 36px;
  flex-shrink: 0;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mms-surface-alt);
  color: var(--mms-copper-deep);
  font-family: var(--mms-font-display);
  font-size: 1rem;
  line-height: 1;
}
@media (max-width: 640px) {
  .mms-reviews__head { align-items: flex-start; }
  .mms-reviews__num { font-size: 2.1rem; }
}

/* -----------------------------------------------------------------------------
   59. Consultation dialog
   -------------------------------------------------------------------------- */
.mms-modal {
  position: fixed;
  inset: 0;
  z-index: 120;
  display: grid;
  place-items: center;
  padding: var(--mms-space-md);
}
.mms-modal[hidden] { display: none; }
.mms-modal__veil {
  position: absolute;
  inset: 0;
  background: rgba(34, 30, 24, 0.55);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity 0.22s var(--mms-ease);
}
.mms-modal.is-open .mms-modal__veil { opacity: 1; }
.mms-modal__panel {
  position: relative;
  width: min(34rem, 100%);
  max-height: calc(100dvh - 2 * var(--mms-space-md));
  overflow-y: auto;
  background: var(--mms-surface);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius-lg);
  padding: var(--mms-space-lg);
  box-shadow: 0 40px 90px -40px rgba(34, 30, 24, 0.7);
  opacity: 0;
  transform: translateY(14px) scale(0.985);
  transition: opacity 0.22s var(--mms-ease), transform 0.22s var(--mms-ease);
}
.mms-modal.is-open .mms-modal__panel { opacity: 1; transform: none; }
.mms-modal__x {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-size: 1.5rem;
  line-height: 1;
  color: var(--mms-ink-muted);
  background: none;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
}
.mms-modal__x:hover { color: var(--mms-forest); background: var(--mms-surface-alt); }
.mms-modal__title { font-size: var(--mms-step-2); margin: 0.35rem 0 0.6rem; }
.mms-modal__body { color: var(--mms-ink-soft); margin: 0 0 var(--mms-space-md); }
.mms-modal__points {
  list-style: none;
  margin: 0 0 var(--mms-space-md);
  padding: var(--mms-space-sm) 0 0;
  border-top: 1px solid var(--mms-line);
  display: grid;
  gap: 0.6rem;
}
.mms-modal__points > li {
  display: flex;
  gap: 0.65rem;
  align-items: flex-start;
  font-size: var(--mms-step--1);
  line-height: 1.55;
}
.mms-modal__points .mms-icon {
  width: 1.1em;
  height: 1.1em;
  flex-shrink: 0;
  margin-top: 0.28em;
  color: var(--mms-copper-deep);
}
.mms-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mms-space-sm);
}
/* .mms-btn is nowrap, so a flex-basis that allows shrinking clipped the
   label. Let each button hold its own text and wrap to a new row instead. */
.mms-modal__actions .mms-btn {
  flex: 1 1 auto;
  min-width: max-content;
  justify-content: center;
}
.mms-modal__dismiss {
  display: block;
  margin: var(--mms-space-md) auto 0;
  padding: 0.35rem 0.5rem;
  min-height: 24px;
  background: none;
  border: 0;
  cursor: pointer;
  font-family: var(--mms-font-label);
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mms-ink-muted);
  text-decoration: underline;
  text-underline-offset: 0.25em;
}
.mms-modal__dismiss:hover { color: var(--mms-forest); }
body.mms-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .mms-modal__veil,
  .mms-modal__panel { transition: none; }
}

/* -----------------------------------------------------------------------------
   60. Map fallback
   Shown when there is no embeddable map URL. A grey "failed to load" frame is
   worse than no frame, so this gives the address and a directions link.
   -------------------------------------------------------------------------- */
.mms-map__fallback {
  display: grid;
  place-items: center;
  gap: 0.7rem;
  min-height: 160px;
  padding: var(--mms-space-lg) var(--mms-space-md);
  text-align: center;
  background: var(--mms-surface-alt);
  border: 1px solid var(--mms-line);
  border-radius: var(--mms-radius);
}
.mms-map__fallback .mms-icon { width: 26px; height: 26px; color: var(--mms-copper-deep); }
.mms-map__addr { margin: 0; color: var(--mms-ink-soft); line-height: 1.5; }
.mms-footer__map .mms-map__fallback {
  background: rgba(244, 239, 230, 0.06);
  border-color: rgba(244, 239, 230, 0.18);
}
.mms-footer__map .mms-map__addr { color: var(--mms-on-dark-soft); }
.mms-footer__map .mms-map__fallback .mms-icon { color: var(--mms-taupe); }

/* Cancellation terms on the booking page: visible before they book, not after. */
.mms-book-online__policy {
  margin: var(--mms-space-md) 0 0;
  padding-top: var(--mms-space-sm);
  border-top: 1px solid var(--mms-line);
  font-size: var(--mms-step--1);
  color: var(--mms-ink-muted);
  line-height: 1.55;
}

/* -----------------------------------------------------------------------------
   61. Interactive service cards
   The card lifts on hover and reveals the treatments actually inside that
   category — information that otherwise costs a click. The whole card is the
   link, via a stretched overlay on the title anchor, so there is still exactly
   one link per card and its accessible name is the category.
   -------------------------------------------------------------------------- */
.mms-card--interactive {
  position: relative;
  overflow: hidden;
  transition: transform var(--mms-dur) var(--mms-ease),
              box-shadow var(--mms-dur) var(--mms-ease),
              border-color var(--mms-dur) var(--mms-ease);
}
.mms-card--interactive:hover,
.mms-card--interactive:focus-within {
  transform: translateY(-4px);
  border-color: var(--mms-copper);
  box-shadow: 0 26px 50px -30px rgba(34, 30, 24, 0.55);
}

/* One link, stretched over the whole card.
   A stretched link resolves against its nearest positioned ancestor, and
   .mms-card__body is position:relative — so the overlay was covering the body
   only, not the media or the icon, and "the whole card is clickable" was not
   actually true. That rule exists to sit above a cursor-spotlight effect that
   has since been removed; the only thing left underneath is a masked 1px
   gradient ring with pointer-events:none. Making the body static on these
   cards therefore costs nothing and gives the overlay the card as its
   containing block. */
.mms-card--interactive .mms-card__body { position: static; }
.mms-card__link { text-decoration: none; color: inherit; }
.mms-card__link::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}


/* The reveal. Collapsed by default, opened by hover or keyboard focus. */
.mms-card__reveal {
  display: grid;
  grid-template-rows: 0fr;
  opacity: 0;
  transition: grid-template-rows var(--mms-dur) var(--mms-ease),
              opacity var(--mms-dur) var(--mms-ease),
              margin var(--mms-dur) var(--mms-ease);
  margin-top: 0;
}
.mms-card__reveal > .mms-card__reveal-inner { overflow: hidden; min-height: 0; }
.mms-card--interactive:hover .mms-card__reveal,
.mms-card--interactive:focus-within .mms-card__reveal {
  grid-template-rows: 1fr;
  opacity: 1;
  margin-top: var(--mms-space-sm);
}
.mms-card__reveal-label {
  margin: 0 0 0.4rem;
  font-family: var(--mms-font-label);
  font-size: 0.64rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--mms-copper-deep);
}
.mms-card__list {
  margin: 0;
  padding: 0 0 0 1rem;
  display: grid;
  gap: 0.25rem;
  font-size: var(--mms-step--1);
  color: var(--mms-ink-soft);
  line-height: 1.5;
}

/* No hover to reveal with, so show it. Touch users get the same information. */
@media (hover: none) {
  .mms-card__reveal {
    grid-template-rows: 1fr;
    opacity: 1;
    margin-top: var(--mms-space-sm);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mms-card--interactive,
  .mms-card__reveal { transition: none; }
  .mms-card--interactive:hover,
  .mms-card--interactive:focus-within { transform: none; }
}