/* =========================================================================
   Ma Maison Immobilier : Joomla template styles

   Loaded after bootstrap.min.css. Every colour, size, radius and shadow is a
   custom property in the :root block below; nothing below that block hard-codes
   a value. Rebrand by editing :root only.

   Site specific tweaks belong in css/custom.css (create it when needed), so a
   new version of this file can be dropped in without losing them.
   ========================================================================= */

:root {
  /* ---- Brand palette (sampled from the logo) ------------------------- */
  --mmi-red:          #9a264c;   /* "MaMaison" */
  --mmi-red-dark:     #7c1d3d;
  --mmi-red-darker:   #57142b;
  --mmi-red-light:    #b4426a;
  --mmi-rose:         #cb8f9a;   /* "Immobilier" */
  --mmi-rose-light:   #e3b8c0;
  --mmi-rose-pale:    #f7ecee;

  --mmi-gold:         #b8975a;
  --mmi-gold-light:   #d7bd88;
  --mmi-gold-dark:    #8c6d36;

  /* ---- Neutrals (warm greys, Gascon stone) --------------------------- */
  --mmi-ink:          #221f24;
  --mmi-charcoal:     #2c282e;
  --mmi-charcoal-deep:#1c191e;
  --mmi-body:         #4e4a50;
  --mmi-muted:        #7f7980;
  --mmi-line:         #e5e0dc;
  --mmi-stone:        #f6f3f0;
  --mmi-stone-deep:   #ece6e0;
  --mmi-white:        #ffffff;

  /* ---- Semantic ------------------------------------------------------ */
  --mmi-bg:           var(--mmi-white);
  --mmi-bg-alt:       var(--mmi-stone);
  --mmi-text:         var(--mmi-body);
  --mmi-heading:      var(--mmi-ink);
  --mmi-link:         var(--mmi-red);
  --mmi-link-hover:   var(--mmi-red-dark);
  --mmi-accent:       var(--mmi-gold);
  --mmi-on-dark:      rgba(255, 255, 255, .8);
  --mmi-on-dark-soft: rgba(255, 255, 255, .58);
  --mmi-line-dark:    rgba(255, 255, 255, .14);

  /* Photo scrims: warm charcoal, so headlines read on any picture. */
  --mmi-scrim:        28, 25, 30;

  /* ---- Type ---------------------------------------------------------- */
  --mmi-font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mmi-font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;

  --mmi-fs-xs:    .75rem;
  --mmi-fs-sm:    .875rem;
  --mmi-fs-base:  1.0625rem;
  --mmi-fs-lg:    1.1875rem;
  --mmi-fs-xl:    1.5rem;
  --mmi-fs-h3:    clamp(1.45rem, 1.2rem + .8vw,  1.9rem);
  --mmi-fs-h2:    clamp(2rem,    1.5rem + 1.8vw, 3rem);
  --mmi-fs-h1:    clamp(2.5rem,  1.6rem + 3.6vw, 4.75rem);

  --mmi-lh-tight: 1.1;
  --mmi-lh-base:  1.7;
  --mmi-ls-wide:  .2em;
  --mmi-ls-nav:   .09em;

  /* ---- Space --------------------------------------------------------- */
  --mmi-space-1:  .25rem;
  --mmi-space-2:  .5rem;
  --mmi-space-3:  .75rem;
  --mmi-space-4:  1rem;
  --mmi-space-5:  1.5rem;
  --mmi-space-6:  2rem;
  --mmi-space-7:  3rem;
  --mmi-space-8:  4rem;
  --mmi-section:  clamp(3rem, 1.8rem + 4.5vw, 6rem);

  /* ---- Radius / shadow / motion -------------------------------------- */
  --mmi-radius-sm:   4px;
  --mmi-radius:      6px;
  --mmi-radius-lg:   12px;
  --mmi-radius-pill: 999px;

  --mmi-shadow-sm: 0 1px 3px rgba(34, 31, 36, .07);
  --mmi-shadow:    0 8px 24px rgba(34, 31, 36, .09);
  --mmi-shadow-lg: 0 20px 50px rgba(34, 31, 36, .16);

  --mmi-ease:       cubic-bezier(.2, .7, .2, 1);
  --mmi-transition: 200ms var(--mmi-ease);
  --mmi-slow:       700ms var(--mmi-ease);

  /* ---- Header metrics ------------------------------------------------- */
  --mmi-topbar-h:  40px;
  --mmi-nav-h:     96px;
  --mmi-nav-h-sm:  70px;
  --mmi-z-header:  1030;
}

/* =========================================================================
   Base
   ========================================================================= */

html {
  scroll-behavior: smooth;
  /* No double-tap zoom (pinch zoom stays, for those who need it), and
     nothing can push the page sideways on a phone. */
  touch-action: manipulation;
  overflow-x: clip;
}
body { overflow-x: clip; }
/* Bootstrap's widest gutter is wider than the container's padding on a
   phone, so those rows stuck out 12px and let the page slide sideways. */
@media (max-width: 991.98px) {
  .g-5, .gx-5 { --bs-gutter-x: 1.5rem; }
}
/* iOS zooms in on any form field under 16px when it gets focus. */
@media (max-width: 991.98px) {
  input:not([type="checkbox"]):not([type="radio"]), select, textarea { font-size: max(1rem, 16px) !important; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}

body {
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-base);
  line-height: var(--mmi-lh-base);
  color: var(--mmi-text);
  background: var(--mmi-bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, .mmi-display {
  font-family: var(--mmi-font-display);
  /* Cormorant's default figures dip below the line ("41" reads as "4I");
     prices and counts need the upright kind. */
  font-variant-numeric: lining-nums;
  font-weight: 600;
  line-height: var(--mmi-lh-tight);
  letter-spacing: -.005em;
  color: var(--mmi-heading);
}
h1, h2, h3 { overflow-wrap: break-word; }
h1 { font-size: var(--mmi-fs-h1); }
h2 { font-size: var(--mmi-fs-h2); }
h3 { font-size: var(--mmi-fs-h3); }
h4 { font-size: var(--mmi-fs-xl); }
h5, h6 {
  font-family: var(--mmi-font-body);
  font-weight: 700;
  color: var(--mmi-heading);
}

a {
  color: var(--mmi-link);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color var(--mmi-transition);
}
a:hover { color: var(--mmi-link-hover); }

::selection { background: var(--mmi-rose-light); color: var(--mmi-ink); }

:focus-visible { outline: 2px solid var(--mmi-gold); outline-offset: 2px; }

/* Anchored sections must clear the sticky header when jumped to. */
[id] { scroll-margin-top: calc(var(--mmi-nav-h-sm) + var(--mmi-space-5)); }

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

/* ---- Sections --------------------------------------------------------- */

.mmi-section      { padding-block: var(--mmi-section); }
.mmi-section--alt { background: var(--mmi-bg-alt); }

.mmi-section--dark {
  background: var(--mmi-charcoal);
  color: var(--mmi-on-dark);
}
.mmi-section--dark h2,
.mmi-section--dark h3 { color: var(--mmi-white); }

.mmi-section--brand {
  background: var(--mmi-red);
  color: var(--mmi-on-dark);
}
.mmi-section--brand h2,
.mmi-section--brand h3 { color: var(--mmi-white); }

/* ---- Band text column (featured view) --------------------------------
   The columns are 7 and 5, and the text keeps a readable measure inside its
   7. The space left over becomes the gap towards the picture. */
@media (min-width: 992px) {
  .mmi-band__inner { max-width: 68ch; }
  .mmi-band__inner > .mmi-lead { max-width: none; }
  .mmi-band__text--end .mmi-band__inner { margin-left: auto; }
}

/* The picture in a band: big radius, a gold offset frame behind it. */
.mmi-band__media {
  position: relative;
  isolation: isolate;
}
/* Only where there is room for it beside the column: on phones the offset
   would push past the screen edge. */
@media (max-width: 991.98px) {
  .mmi-band__media::before { display: none; }
}
.mmi-band__media::before {
  content: "";
  position: absolute;
  inset: var(--mmi-space-5) calc(var(--mmi-space-5) * -1) calc(var(--mmi-space-5) * -1) var(--mmi-space-5);
  border: 1px solid var(--mmi-gold-light);
  border-radius: var(--mmi-radius-lg);
  z-index: -1;
}
.flex-lg-row-reverse .mmi-band__media::before {
  inset: var(--mmi-space-5) var(--mmi-space-5) calc(var(--mmi-space-5) * -1) calc(var(--mmi-space-5) * -1);
}
.mmi-band__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow);
}

/* A band whose photo column holds a folder slideshow ("galerie" field):
   same frame and proportions as a single photo, swipe carousel inside. */
.mmi-band__media--slides {
  aspect-ratio: 4 / 3;
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow);
}
.mmi-band__media--slides .mmi-carousel {
  border-radius: var(--mmi-radius-lg);
  overflow: hidden;
}
.mmi-band__media--slides .mmi-carousel__slide img {
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
/* Arrows always visible here: there is no card hover to reveal them. */
.mmi-band__media--slides .mmi-carousel__arrow:not(:disabled) { opacity: 1; }

/* Lists inside a band read as a set of points, with a gold tick each. */
.mmi-band__body ul {
  list-style: none;
  padding: 0;
  margin: var(--mmi-space-4) 0;
  display: grid;
  gap: var(--mmi-space-2);
}
.mmi-band__body ul li {
  position: relative;
  padding-left: 1.75rem;
}
.mmi-band__body ul li::before {
  content: "\f00c";
  font-family: var(--fa-style-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  position: absolute;
  left: 0;
  top: .1em;
  font-size: .85em;
  color: var(--mmi-gold);
}
.mmi-bands__intro p:last-child { margin-bottom: 0; }

/* Numbered lists inside a band read as steps: a gold number in a ring. */
.mmi-band__body ol {
  list-style: none;
  counter-reset: mmi-step;
  padding: 0;
  margin: var(--mmi-space-4) 0;
  display: grid;
  gap: var(--mmi-space-4);
}
.mmi-band__body ol > li {
  counter-increment: mmi-step;
  position: relative;
  padding-left: 3rem;
}
.mmi-band__body ol > li::before {
  content: counter(mmi-step);
  position: absolute;
  left: 0;
  top: -.1em;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 1px solid var(--mmi-gold);
  border-radius: 50%;
  font-family: var(--mmi-font-display);
  font-size: 1.1rem;
  font-weight: 600;
  font-variant-numeric: lining-nums;
  line-height: 1;
  color: var(--mmi-gold-dark);
}
.mmi-band__body ol > li strong:first-child { display: block; color: var(--mmi-heading); }

/* Questions and answers: each <details> opens on a click. */
.mmi-band__body details { border-bottom: 1px solid var(--mmi-line); }
.mmi-band__body details:first-of-type { border-top: 1px solid var(--mmi-line); }
.mmi-band__body summary {
  position: relative;
  list-style: none;
  cursor: pointer;
  padding: var(--mmi-space-3) 2rem var(--mmi-space-3) 0;
  font-weight: 700;
  color: var(--mmi-heading);
  transition: color var(--mmi-transition);
}
.mmi-band__body summary::-webkit-details-marker { display: none; }
.mmi-band__body summary::after {
  content: "";
  position: absolute;
  right: .4rem;
  top: 50%;
  width: .5em;
  height: .5em;
  border-right: 1.5px solid var(--mmi-gold);
  border-bottom: 1.5px solid var(--mmi-gold);
  transform: translateY(-75%) rotate(45deg);
  transition: transform var(--mmi-transition);
}
.mmi-band__body details[open] > summary::after { transform: translateY(-25%) rotate(-135deg); }
.mmi-band__body summary:hover { color: var(--mmi-red); }
.mmi-band__body details > p { margin: 0 0 var(--mmi-space-4); }

/* ---- Image placeholder (html/layouts/mamaison/placeholder.php) -------- */
.mmi-placeholder {
  display: grid;
  place-items: center;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--mmi-radius-lg);
  background: linear-gradient(135deg, var(--mmi-stone) 0%, var(--mmi-stone-deep) 45%, var(--mmi-rose-pale) 100%);
  box-shadow: var(--mmi-shadow);
}
.mmi-placeholder img {
  width: 42%;
  height: auto;
  opacity: .32;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}
/* Inside a card the media box already sets the shape. */
.mmi-card__media .mmi-placeholder {
  height: 100%;
  aspect-ratio: auto;
  border-radius: 0;
  box-shadow: none;
}

/* ---- Small typographic parts ----------------------------------------- */

.mmi-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--mmi-space-3);
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-xs);
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  font-weight: 700;
  color: var(--mmi-gold-dark);
  margin-bottom: var(--mmi-space-3);
}
/* A short gold line ahead of the eyebrow, the template's signature detail. */
.mmi-eyebrow::before {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.text-center .mmi-eyebrow::after {
  content: "";
  width: 28px;
  height: 1px;
  background: currentColor;
}
.mmi-section--dark .mmi-eyebrow,
.mmi-section--brand .mmi-eyebrow { color: var(--mmi-gold-light); }

.mmi-lead {
  font-size: var(--mmi-fs-lg);
  color: var(--mmi-muted);
  max-width: 62ch;
}
.mmi-section--dark .mmi-lead,
.mmi-section--brand .mmi-lead { color: var(--mmi-on-dark); }

.mmi-rule {
  width: 64px;
  height: 2px;
  border: 0;
  opacity: 1;
  background: linear-gradient(90deg, var(--mmi-gold), var(--mmi-gold-light));
  margin: var(--mmi-space-4) 0 var(--mmi-space-5);
}
.mmi-rule--center { margin-inline: auto; }

/* =========================================================================
   Buttons
   ========================================================================= */

.btn {
  --bs-btn-border-radius: var(--mmi-radius);
  font-family: var(--mmi-font-body);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  font-size: var(--mmi-fs-sm);
  padding: .85rem 1.6rem;
  transition: background var(--mmi-transition), border-color var(--mmi-transition),
              color var(--mmi-transition), transform var(--mmi-transition), box-shadow var(--mmi-transition);
}
.btn:active { transform: translateY(1px); }

.btn-mmi,
.btn-primary {
  background: var(--mmi-red);
  border: 1px solid var(--mmi-red);
  color: var(--mmi-white);
}
.btn-mmi:hover, .btn-mmi:focus-visible,
.btn-primary:hover, .btn-primary:focus-visible {
  background: var(--mmi-red-dark);
  border-color: var(--mmi-red-dark);
  color: var(--mmi-white);
  box-shadow: 0 8px 20px rgba(154, 38, 76, .25);
}
.btn-mmi-gold {
  background: var(--mmi-gold);
  border: 1px solid var(--mmi-gold);
  color: var(--mmi-ink);
}
.btn-mmi-gold:hover, .btn-mmi-gold:focus-visible {
  background: var(--mmi-gold-light);
  border-color: var(--mmi-gold-light);
  color: var(--mmi-ink);
}
.btn-mmi-outline {
  background: transparent;
  border: 1px solid var(--mmi-red);
  color: var(--mmi-red);
}
.btn-mmi-outline:hover, .btn-mmi-outline:focus-visible {
  background: var(--mmi-red);
  color: var(--mmi-white);
}
.btn-mmi-ghost {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .5);
  color: var(--mmi-white);
}
.btn-mmi-ghost:hover, .btn-mmi-ghost:focus-visible {
  background: var(--mmi-white);
  border-color: var(--mmi-white);
  color: var(--mmi-ink);
}
.btn:focus-visible {
  outline: 2px solid var(--mmi-gold);
  outline-offset: 2px;
}

/* Text link with an arrow, for "more" links inside text. */
.mmi-link-arrow {
  font-weight: 700;
  font-size: var(--mmi-fs-sm);
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  text-decoration: none;
}
.mmi-link-arrow::after {
  content: "\2192";
  display: inline-block;
  margin-left: .4em;
  transition: transform var(--mmi-transition);
}
.mmi-link-arrow:hover::after { transform: translateX(4px); }

/* =========================================================================
   Header : top bar
   ========================================================================= */

.mmi-header {
  position: sticky;
  top: 0;
  z-index: var(--mmi-z-header);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  backdrop-filter: saturate(160%) blur(10px);
  transition: box-shadow var(--mmi-transition);
}
.mmi-header.is-stuck { box-shadow: var(--mmi-shadow); }

.mmi-topbar {
  background: var(--mmi-charcoal-deep);
  color: var(--mmi-on-dark);
  font-size: var(--mmi-fs-sm);
  min-height: var(--mmi-topbar-h);
  display: flex;
  align-items: center;
  overflow: hidden;
  transition: min-height var(--mmi-transition), opacity var(--mmi-transition);
}
/* The top bar retracts once the page scrolls; the main nav stays. */
.mmi-header.is-stuck .mmi-topbar { min-height: 0; opacity: 0; }

.mmi-topbar a {
  color: var(--mmi-on-dark);
  text-decoration: none;
}
.mmi-topbar a:hover, .mmi-topbar a:focus-visible { color: var(--mmi-gold-light); }
.mmi-topbar .fa-solid { color: var(--mmi-gold); margin-right: .35em; font-size: .85em; }

/* Lists in the bar (utility menu, language switcher): one quiet row. */
.mmi-topbar ul,
.mmi-topbar .mod-languages ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: var(--mmi-space-3);
}
.mmi-topbar li {
  display: flex;
  align-items: center;
  gap: var(--mmi-space-3);
}
.mmi-topbar li + li::before {
  content: "";
  width: 1px;
  height: .9em;
  background: rgba(255, 255, 255, .22);
}

/* A default-layout menu module in the bar must not look like the main nav. */
.mmi-topbar .mmi-menu__link,
.mmi-topbar .mod-languages a {
  display: inline;
  width: auto;
  padding: 0;
  border: 0;
  background: none;
  font-size: var(--mmi-fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.4;
  color: var(--mmi-on-dark);
  white-space: nowrap;
}
.mmi-topbar .mmi-menu__link::after { content: none; }

/* Current language, and the visually hidden label Joomla ships. */
.mmi-topbar .lang-active > a,
.mmi-langs .is-active > span {
  color: var(--mmi-gold-light);
  font-weight: 700;
}
.mmi-topbar .mod-languages .visually-hidden { display: none; }
/* Languages always at the far right of the bar, after the utility links
   (About, Region), with a divider between the two groups. */
.mmi-topbar .d-lg-flex > .mmi-langs { order: 2; }
.mmi-topbar .d-lg-flex:has(> .mmi-topbar__menu:not(.mmi-langs)) > .mmi-langs::before {
  content: "";
  width: 1px;
  height: .9em;
  background: rgba(255, 255, 255, .22);
}
.mmi-langs a,
.mmi-langs span { text-transform: uppercase; letter-spacing: .06em; }

/* =========================================================================
   Header : main navigation
   ========================================================================= */

.mmi-nav { padding-block: var(--mmi-space-4); transition: padding var(--mmi-transition); }
.mmi-header.is-stuck .mmi-nav { padding-block: var(--mmi-space-2); }

.mmi-brand {
  flex: 0 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  text-decoration: none;
}
/* The logo is sized by height so the lockup holds at any nav height. */
.mmi-brand__logo {
  height: 52px;
  width: auto;
  transition: height var(--mmi-transition);
}
.mmi-header.is-stuck .mmi-brand__logo { height: 42px; }
@media (max-width: 575.98px) {
  .mmi-brand__logo { height: 42px; }
}

/* ---- Menu list ------------------------------------------------------- */

.mmi-menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}
.mmi-menu__item { position: relative; }

.mmi-menu__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mmi-space-2);
  width: 100%;
  padding: var(--mmi-space-3) 0;
  background: none;
  border: 0;
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-ink);
  text-decoration: none;
  text-align: left;
  transition: color var(--mmi-transition);
}
.mmi-menu__link:hover,
.mmi-menu__link:focus-visible,
.mmi-menu__item.is-active > .mmi-menu__link { color: var(--mmi-red); }

.mmi-menu__caret {
  flex: 0 0 auto;
  width: .5em; height: .5em;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform var(--mmi-transition);
}
.mmi-menu__item.is-open > .mmi-menu__link .mmi-menu__caret { transform: rotate(-135deg); }

/* A menu item styled as the call to action. Put "mmi-cta" in the menu item's
   Link CSS Style field (menu item > Link Type > Link CSS Style). */
.mmi-menu__link.mmi-cta {
  justify-content: center;
  padding: var(--mmi-space-3) var(--mmi-space-5);
  border-radius: var(--mmi-radius);
  background: var(--mmi-red);
  color: var(--mmi-white);
  transition: background var(--mmi-transition);
}
.mmi-menu__link.mmi-cta:hover,
.mmi-menu__link.mmi-cta:focus-visible,
.mmi-menu__item.is-active > .mmi-menu__link.mmi-cta {
  background: var(--mmi-red-dark);
  color: var(--mmi-white);
}
.mmi-menu__link.mmi-cta::after { content: none; }

/* ---- Submenu --------------------------------------------------------- */

.mmi-submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  max-height: 0;
  transition: max-height var(--mmi-transition);
}
.mmi-menu__item.is-open > .mmi-submenu { max-height: 36rem; }

.mmi-submenu__link {
  display: block;
  padding: var(--mmi-space-2) 0 var(--mmi-space-2) var(--mmi-space-4);
  font-size: var(--mmi-fs-base);
  color: var(--mmi-body);
  text-decoration: none;
  border-left: 2px solid var(--mmi-line);
  transition: color var(--mmi-transition), border-color var(--mmi-transition), background var(--mmi-transition);
}
.mmi-submenu__link:hover,
.mmi-submenu__link:focus-visible,
.mmi-submenu__link.is-active {
  color: var(--mmi-red);
  border-left-color: var(--mmi-gold);
  background: var(--mmi-stone);
}
/* The menu item's meta description, cut to two lines: the full text stays
   for search engines, the dropdown stays tidy. */
.mmi-submenu__desc {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: .15rem;
  font-size: var(--mmi-fs-sm);
  line-height: 1.45;
  color: var(--mmi-muted);
}

.mmi-nav__actions,
.mmi-nav__mobile-extra {
  display: flex;
  flex-direction: column;
  gap: var(--mmi-space-3);
  padding-block: var(--mmi-space-4);
  border-top: 1px solid var(--mmi-line);
  margin-top: var(--mmi-space-3);
}
/* The language switcher, when it follows the menu in the drawer. */
.mmi-nav__mobile-extra ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmi-space-2);
}
.mmi-nav__mobile-extra a,
.mmi-nav__mobile-extra li > span {
  display: inline-block;
  padding: var(--mmi-space-2) var(--mmi-space-4);
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius-pill);
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  color: var(--mmi-ink);
  text-decoration: none;
}
.mmi-nav__mobile-extra .is-active > span,
.mmi-nav__mobile-extra .lang-active > a {
  background: var(--mmi-red);
  border-color: var(--mmi-red);
  color: var(--mmi-white);
}
.mmi-nav__mobile-extra .visually-hidden { display: none; }

/* ---- Burger ---------------------------------------------------------- */

.mmi-burger {
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: none;
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius);
  padding: 10px;
  cursor: pointer;
}
.mmi-burger span {
  display: block;
  width: 22px; height: 2px;
  grid-area: 1 / 1;
  background: var(--mmi-ink);
  border-radius: 2px;
  transition: transform var(--mmi-transition), opacity var(--mmi-transition);
}
.mmi-burger span:nth-child(1) { transform: translateY(-6px); }
.mmi-burger span:nth-child(3) { transform: translateY(6px); }
.mmi-burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.mmi-burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.mmi-burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* ---- Mobile drawer --------------------------------------------------- */

.mmi-nav__panel {
  display: none;
  flex: 0 0 100%;
  order: 3;
  padding-bottom: var(--mmi-space-4);
  max-height: calc(100dvh - var(--mmi-nav-h-sm));
  overflow-y: auto;
}
.mmi-nav__panel.is-open { display: block; }

.mmi-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(var(--mmi-scrim), .5);
  z-index: calc(var(--mmi-z-header) - 1);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--mmi-transition), visibility var(--mmi-transition);
}
.mmi-backdrop.is-visible { opacity: 1; visibility: visible; }

/* Drawer look below 1200px: the menu in the display serif, sentence case,
   with hairlines between the items, on solid white. Lighter than the
   uppercase bar style, which only suits the desktop row. */
@media (max-width: 1199.98px) {
  .mmi-header:has(.mmi-nav__panel.is-open) {
    background: var(--mmi-white);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .mmi-nav__panel { padding-top: var(--mmi-space-3); }
  .mmi-nav__panel .mmi-menu > .mmi-menu__item { border-bottom: 1px solid var(--mmi-line); }
  .mmi-nav__panel .mmi-menu > .mmi-menu__item:first-child { border-top: 1px solid var(--mmi-line); }
  .mmi-nav__panel .mmi-menu__link {
    padding: .7rem 0;
    font-family: var(--mmi-font-display);
    font-size: 1.5rem;
    font-weight: 500;
    letter-spacing: 0;
    text-transform: none;
    line-height: 1.2;
  }
  .mmi-nav__panel .mmi-menu__item.is-active > .mmi-menu__link { color: var(--mmi-red); }
  .mmi-nav__panel { overflow-x: hidden; }
  .mmi-nav__panel .mmi-menu__caret { width: .32em; height: .32em; margin-right: .3rem; border-width: 1px; }
  .mmi-nav__panel .mmi-submenu__link { font-size: var(--mmi-fs-base); }
  .mmi-nav__panel .mmi-submenu { margin-bottom: var(--mmi-space-2); }
  /* The call to action stays a button, in the site's usual small caps. */
  .mmi-nav__panel .mmi-menu__link.mmi-cta {
    margin-top: var(--mmi-space-5);
    padding: .8rem var(--mmi-space-5);
    font-family: var(--mmi-font-body);
    font-size: var(--mmi-fs-xs);
    font-weight: 700;
    letter-spacing: var(--mmi-ls-nav);
    text-transform: uppercase;
  }
  .mmi-nav__panel .mmi-menu > .mmi-menu__item:has(> .mmi-cta) { border-bottom: 0; }
  .mmi-nav__panel .mmi-nav__actions,
  .mmi-nav__panel .mmi-nav__mobile-extra { border-top: 0; margin-top: 0; }
  /* Languages: two quiet words, the current one underlined in gold. */
  .mmi-nav__mobile-extra ul { gap: var(--mmi-space-5); justify-content: center; }
  /* The top bar's utility links are already in the drawer's menu (as
     "mmi-mobile-only" items); only the languages follow it. */
  .mmi-nav__mobile-extra .mmi-topbar__menu:not(.mmi-langs) { display: none; }
  .mmi-nav__mobile-extra a,
  .mmi-nav__mobile-extra li > span {
    padding: var(--mmi-space-1) 0;
    border: 0;
    border-bottom: 1px solid transparent;
    border-radius: 0;
    font-size: var(--mmi-fs-xs);
    letter-spacing: .14em;
    color: var(--mmi-muted);
  }
  .mmi-nav__mobile-extra .is-active > span,
  .mmi-nav__mobile-extra .lang-active > a {
    background: none;
    border-color: var(--mmi-gold);
    color: var(--mmi-ink);
  }
}

/* =========================================================================
   Desktop navigation (>= 1200px) : flat bar + hover/click dropdowns
   The breakpoint matches DESKTOP in template.js.
   ========================================================================= */

@media (min-width: 1200px) {
  [id] { scroll-margin-top: calc(var(--mmi-nav-h) + var(--mmi-space-5)); }

  .mmi-burger { display: none; }

  .mmi-nav__panel {
    display: flex !important;
    flex: 1 1 auto;
    order: 0;
    align-items: center;
    justify-content: flex-end;
    gap: var(--mmi-space-5);
    padding-bottom: 0;
    max-height: none;
    overflow: visible;
  }
  .mmi-nav__mobile-extra { display: none !important; }

  .mmi-menu {
    flex-direction: row;
    align-items: center;
    gap: var(--mmi-space-5);
  }

  /* Semi-bold, a touch less tracking: the bar keeps its capitals without
     shouting next to the serif headings. The Contact button stays bold. */
  .mmi-menu__link {
    width: auto;
    padding: var(--mmi-space-4) 0;
    position: relative;
    font-weight: 600;
    letter-spacing: .08em;
  }
  .mmi-menu__link.mmi-cta { font-weight: 700; }

  /* A main menu item with Link CSS Style "mmi-mobile-only" shows in the phone
     drawer only; on desktop it lives in the top bar instead. */
  .mmi-menu__item:has(> .mmi-mobile-only) { display: none; }
  /* Red underline grows from the left on hover / active. */
  .mmi-menu__link::after {
    content: "";
    position: absolute;
    left: 0; bottom: var(--mmi-space-2);
    width: 100%; height: 2px;
    background: var(--mmi-red);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform var(--mmi-transition);
  }
  .mmi-menu__item:hover > .mmi-menu__link::after,
  .mmi-menu__item.is-open > .mmi-menu__link::after,
  .mmi-menu__item.is-active > .mmi-menu__link::after { transform: scaleX(1); }

  .mmi-menu__caret { width: .42em; height: .42em; }

  /* Left aligned under its parent: the dropdown's text lines up with the
     parent's word (link padding + its 2px left border pulled back). */
  .mmi-submenu {
    position: absolute;
    top: 100%;
    left: calc(-1 * (var(--mmi-space-5) + 2px));
    transform: translateY(var(--mmi-space-2));
    min-width: 17rem;
    max-height: none;
    overflow: visible;
    background: var(--mmi-white);
    border-top: 2px solid var(--mmi-red);
    border-radius: 0 0 var(--mmi-radius-lg) var(--mmi-radius-lg);
    box-shadow: var(--mmi-shadow-lg);
    padding: var(--mmi-space-3) 0;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--mmi-transition), transform var(--mmi-transition), visibility var(--mmi-transition);
  }
  .mmi-menu__item.is-open > .mmi-submenu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }
  /* Submenus near the right edge flip so they never overflow the viewport. */
  .mmi-menu__item--flip-end > .mmi-submenu {
    left: auto; right: 0;
    transform: translateY(var(--mmi-space-2));
  }
  .mmi-menu__item--flip-end.is-open > .mmi-submenu { transform: translateY(0); }

  .mmi-submenu__link {
    padding: var(--mmi-space-2) var(--mmi-space-5);
    border-left: 2px solid transparent;
  }

  .mmi-nav__actions {
    flex-direction: row;
    align-items: center;
    gap: var(--mmi-space-3);
    padding-block: 0;
    border-top: 0;
    margin-top: 0;
  }
}

/* Between the desktop breakpoint and large screens, tighten type and
   spacing so the header stays on one line. */
@media (min-width: 1200px) and (max-width: 1399.98px) {
  .mmi-menu { gap: var(--mmi-space-4); }
  .mmi-nav__panel { gap: var(--mmi-space-4); }
  .mmi-menu__link { font-size: .8125rem; letter-spacing: .06em; }
}

/* =========================================================================
   Hero (home)
   ========================================================================= */

.mmi-hero {
  position: relative;
  min-height: clamp(30rem, 82vh, 52rem);
  display: flex;
  align-items: center;
  padding-block: var(--mmi-space-8) calc(var(--mmi-space-8) + var(--mmi-space-6));
  color: var(--mmi-white);
  overflow: hidden;
  background: linear-gradient(135deg, var(--mmi-charcoal) 0%, var(--mmi-red-darker) 100%);
}

/* Crossfading slides, each with a slow push in while it is on screen. */
.mmi-hero__slides { position: absolute; inset: 0; overflow: hidden; }
.mmi-hero__slide {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 1400ms ease, transform 8s linear;
}
.mmi-hero__slide.is-active { opacity: 1; transform: scale(1); }

/* The scrim: darker on the text side and at the foot, open in the middle. */
.mmi-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(var(--mmi-scrim), .78) 0%, rgba(var(--mmi-scrim), .4) 50%, rgba(var(--mmi-scrim), .1) 100%),
    linear-gradient(180deg, rgba(var(--mmi-scrim), .25) 0%, rgba(var(--mmi-scrim), 0) 35%, rgba(var(--mmi-scrim), .55) 100%);
  pointer-events: none;
}
.mmi-hero > .container { position: relative; z-index: 1; }

/* Captions stack like the slides, so only the active one shows. The first is
   in normal flow to give the hero its height; the rest overlay it. */
.mmi-hero__caption {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
  transition: opacity 700ms ease, visibility 700ms ease, transform 700ms var(--mmi-ease);
}
.mmi-hero__caption:not(:first-child) {
  position: absolute;
  top: 0;
  left: var(--bs-gutter-x, .75rem);
  right: var(--bs-gutter-x, .75rem);
}
.mmi-hero__caption.is-active { opacity: 1; visibility: visible; transform: none; }

.mmi-hero__eyebrow,
.mmi-hero .mmi-eyebrow { color: var(--mmi-gold-light); }

.mmi-hero__title {
  font-size: var(--mmi-fs-h1);
  font-weight: 500;
  color: var(--mmi-white);
  margin-bottom: var(--mmi-space-5);
  text-wrap: balance;
}
.mmi-hero__sub {
  font-size: var(--mmi-fs-lg);
  color: rgba(255, 255, 255, .9);
  max-width: 52ch;
}
.mmi-hero__sub p:last-child { margin-bottom: 0; }

/* ---- Featured properties slider (snippets/featured-hero.php) ---------- */
/* Details sit low on the left, on the same line as the controls on the
   right, so the photo keeps the whole upper part of the screen. */
.mmi-hero--featured {
  min-height: clamp(32rem, 86vh, 54rem);
  align-items: flex-end;
  padding-bottom: var(--mmi-space-7);
}
/* Doubled class: the general hero rule further down lifts the controls for
   a search panel and would otherwise win. */
.mmi-hero.mmi-hero--featured .mmi-slidenav { bottom: var(--mmi-space-7); }
/* A search panel overlapping the foot of the hero pushes both up. */
.mmi-hero--featured:has(+ .mmi-herobar) { padding-bottom: calc(var(--mmi-space-8) + var(--mmi-space-6)); }
.mmi-hero.mmi-hero--featured:has(+ .mmi-herobar) .mmi-slidenav { bottom: calc(var(--mmi-space-8) + var(--mmi-space-6)); }
/* Darker in the lower left corner, where the text now sits. */
.mmi-hero--featured::after {
  background:
    radial-gradient(ellipse at 0% 100%, rgba(var(--mmi-scrim), .75) 0%, rgba(var(--mmi-scrim), 0) 60%),
    linear-gradient(180deg, rgba(var(--mmi-scrim), .2) 0%, rgba(var(--mmi-scrim), 0) 30%, rgba(var(--mmi-scrim), .45) 100%);
}
/* All captions share one grid cell, aligned to its foot: a title that runs
   to two lines grows upwards, so price and button stay on the same line on
   every slide, level with the controls. */
.mmi-hero__captions {
  display: grid;
  align-items: end;
}
.mmi-hero__captions > .mmi-hero__caption,
.mmi-hero__captions > .mmi-hero__caption:not(:first-child) {
  position: static;
  grid-area: 1 / 1;
}
.mmi-hero--featured .mmi-eyebrow { margin-bottom: var(--mmi-space-2); }
.mmi-hero--featured .mmi-hero__title {
  font-size: clamp(1.9rem, 1.4rem + 1.8vw, 3rem);
  margin-bottom: var(--mmi-space-3);
  /* Two lines at most: long listing titles end in an ellipsis rather than
     climbing up over the photo. The full title is on the property page. */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-wrap: balance;
}
/* Phone and tablet: no room beside the price, so the controls get their own
   row underneath, centred, and the hero grows a little to make space. */
@media (max-width: 991.98px) {
  .mmi-hero.mmi-hero--featured:not(:has(+ .mmi-herobar)) {
    padding-bottom: calc(var(--mmi-space-5) + 44px + var(--mmi-space-4));
  }
  /* Small viewport height (browser bars showing) minus the header, so the
     price and the controls are on screen when the page opens. */
  .mmi-hero.mmi-hero--featured { min-height: clamp(30rem, calc(100svh - 8.5rem), 46rem); }
  .mmi-hero.mmi-hero--featured:not(:has(+ .mmi-herobar)) .mmi-slidenav { bottom: var(--mmi-space-5); }
}
/* Controls to the right, clear of the price and button on the left. */
@media (min-width: 992px) {
  .mmi-hero--featured .mmi-slidenav {
    left: auto;
    right: max(var(--mmi-space-5), calc((100vw - 1320px) / 2 + var(--mmi-space-3)));
    transform: none;
  }
}
.mmi-hero__title a { color: inherit; text-decoration: none; }
.mmi-hero__title a:hover { color: var(--mmi-gold-light); }

.mmi-hero__facts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmi-space-2) var(--mmi-space-5);
  margin: 0 0 var(--mmi-space-4);
  padding: 0;
  list-style: none;
  font-size: var(--mmi-fs-sm);
  color: rgba(255, 255, 255, .92);
}
.mmi-hero__facts li { display: inline-flex; align-items: center; gap: .5em; }
.mmi-hero__facts .fa-solid { font-size: .75rem; color: var(--mmi-gold-light); }

.mmi-hero__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mmi-space-3) var(--mmi-space-5);
  padding-top: var(--mmi-space-4);
  border-top: 1px solid rgba(255, 255, 255, .22);
}
.mmi-hero__foot .btn { padding: .6rem 1.2rem; font-size: var(--mmi-fs-xs); }
.mmi-hero__price {
  margin: 0;
  font-family: var(--mmi-font-display);
  font-size: clamp(1.5rem, 1.3rem + .7vw, 2rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--mmi-white);
}

/* =========================================================================
   Hero bar: the panel that overlaps the foot of the hero (property search)
   ========================================================================= */

.mmi-herobar {
  position: relative;
  z-index: 2;
  margin-top: calc(var(--mmi-space-8) * -1);
}
.mmi-herobar__inner {
  background: var(--mmi-white);
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow-lg);
  padding: var(--mmi-space-5);
}
@media (min-width: 992px) {
  .mmi-herobar__inner { padding: var(--mmi-space-5) var(--mmi-space-6); }
}
/* A sub page hero has less room under its title; overlap it less. */
.is-subpage .mmi-herobar { margin-top: calc(var(--mmi-space-6) * -1); }

/* =========================================================================
   Slideshow controls (hero and sub page hero)
   ========================================================================= */

.mmi-slidenav {
  position: absolute;
  z-index: 2;
  left: 50%;
  bottom: var(--mmi-space-5);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: var(--mmi-space-4);
}
/* With the search panel overlapping, the controls move up out of its way. */
.mmi-hero .mmi-slidenav { bottom: calc(var(--mmi-space-8) + var(--mmi-space-4)); }

.mmi-slidenav__arrow {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: var(--mmi-white);
  font-size: var(--mmi-fs-xl);
  line-height: 1;
  cursor: pointer;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  transition: var(--mmi-transition);
}
.mmi-slidenav__arrow:hover {
  background: var(--mmi-white);
  border-color: var(--mmi-white);
  color: var(--mmi-red);
}

.mmi-slidenav__dots {
  list-style: none;
  margin: 0; padding: 0;
  display: flex;
  gap: var(--mmi-space-2);
}
.mmi-slidenav__dots button {
  width: 22px; height: 3px;
  padding: 0;
  border: 0;
  border-radius: 2px;
  background: rgba(255, 255, 255, .45);
  cursor: pointer;
  transition: var(--mmi-transition);
}
.mmi-slidenav__dots button:hover { background: rgba(255, 255, 255, .8); }
.mmi-slidenav__dots button[aria-current] {
  width: 40px;
  background: var(--mmi-gold-light);
}

/* =========================================================================
   Sub-page hero
   ========================================================================= */

.mmi-pagehero {
  position: relative;
  background:
    radial-gradient(ellipse at 85% 0%, rgba(154, 38, 76, .45) 0%, rgba(154, 38, 76, 0) 60%),
    var(--mmi-charcoal);
  color: var(--mmi-on-dark);
  padding-block: clamp(3rem, 2rem + 4vw, 5.5rem);
  overflow: hidden;
}
.mmi-pagehero h1 {
  color: var(--mmi-white);
  font-weight: 500;
  margin-bottom: var(--mmi-space-3);
  text-wrap: balance;
}
.mmi-pagehero .mmi-eyebrow { color: var(--mmi-gold-light); }
.mmi-pagehero__sub {
  font-size: var(--mmi-fs-lg);
  color: var(--mmi-on-dark);
  max-width: 58ch;
  margin: 0;
}

/* Sub page hero carrying a crossfading photo sequence behind the title. */
.mmi-pagehero--media {
  /* Ma Maison's banners are 2000 x 600 (10:3). The hero keeps that shape on
     every desktop width, so the photo is shown whole rather than cropped top
     and bottom; phones get a minimum height and the centre of the photo. */
  min-height: max(20rem, 30vw);
  display: flex;
  align-items: flex-end;
  padding-bottom: calc(var(--mmi-space-8) + var(--mmi-space-4));
}
/* One photo from the menu item: no slideshow controls to keep clear of. */
.mmi-pagehero--media:not([data-mmi-slideshow]) { padding-bottom: var(--mmi-space-7); }
.mmi-pagehero--media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--mmi-scrim), .3) 0%, rgba(var(--mmi-scrim), .45) 45%, rgba(var(--mmi-scrim), .85) 100%);
}
.mmi-pagehero--media > .container { position: relative; z-index: 1; }

/* Joomla's breadcrumbs module inside the page hero. */
.mmi-pagehero .mod-breadcrumbs,
.mmi-pagehero .breadcrumb {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mmi-space-2);
  margin: 0 0 var(--mmi-space-5);
  padding: 0;
  font-size: var(--mmi-fs-xs);
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-on-dark-soft);
}
.mmi-pagehero .breadcrumb a { color: var(--mmi-on-dark-soft); text-decoration: none; }
.mmi-pagehero .breadcrumb a:hover { color: var(--mmi-gold-light); }
.mmi-pagehero .breadcrumb .active { color: var(--mmi-white); }
.mmi-pagehero .breadcrumb li + li::before { content: "\203A"; margin-right: var(--mmi-space-2); opacity: .6; }
/* Joomla starts the trail with a hidden "You are here" item; the first real
   crumb after it gets no separator. */
.mmi-pagehero .breadcrumb .mod-breadcrumbs__here + li::before { content: none; }
/* The module adds Bootstrap padding classes (px-3 py-2); the trail sits flush. */
.mmi-pagehero .breadcrumb { padding: 0 !important; background: none; }
.mmi-pagehero .breadcrumb-item + .breadcrumb-item { padding-left: 0; }
.mmi-pagehero .breadcrumb-item + .breadcrumb-item::before { float: none; padding-right: 0; color: inherit; }
.mmi-pagehero .breadcrumb .visually-hidden,
.mmi-pagehero .mod-breadcrumbs__here { display: none; }

/* =========================================================================
   Cards
   ========================================================================= */

.mmi-card {
  height: 100%;
  background: var(--mmi-white);
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform var(--mmi-transition), box-shadow var(--mmi-transition), border-color var(--mmi-transition);
}
.mmi-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--mmi-shadow);
  border-color: transparent;
}
.mmi-card__media {
  display: block;
  aspect-ratio: 3 / 2;
  background: linear-gradient(135deg, var(--mmi-stone-deep), var(--mmi-stone));
  overflow: hidden;
}
.mmi-card__media--img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-card:hover .mmi-card__media--img img { transform: scale(1.05); }

.mmi-card__body { padding: var(--mmi-space-5) var(--mmi-space-5) var(--mmi-space-4); flex: 1 1 auto; }
.mmi-card__foot { padding: 0 var(--mmi-space-5) var(--mmi-space-5); }
.mmi-card__title {
  font-size: var(--mmi-fs-xl);
  margin-bottom: var(--mmi-space-3);
}
.mmi-card__title a {
  color: var(--mmi-heading);
  text-decoration: none;
}
.mmi-card__title a:hover { color: var(--mmi-red); }
.mmi-card__text { color: var(--mmi-body); }
.mmi-card__text p:last-child { margin-bottom: 0; }

/* A leading article lies on its side once it has a picture. */
@media (min-width: 768px) {
  .mmi-card--lead { flex-direction: row; }
  .mmi-card--lead .mmi-card__media { flex: 0 0 50%; aspect-ratio: auto; min-height: 20rem; }
  .mmi-card--lead .mmi-card__body { align-self: center; padding: var(--mmi-space-6); }
  .mmi-card--lead .mmi-card__foot { display: none; }
}

/* Sidebar module chrome. */
aside .mmi-card:hover { transform: none; box-shadow: none; border-color: var(--mmi-line); }
aside .mmi-card .mmi-card__title { font-size: var(--mmi-fs-lg); }

/* =========================================================================
   Tiles (mod_articles "tiles" layout: property themes)
   ========================================================================= */

.mmi-tile {
  position: relative;
  display: flex;
  align-items: flex-end;
  aspect-ratio: 4 / 5;
  border-radius: var(--mmi-radius-lg);
  overflow: hidden;
  background: linear-gradient(160deg, var(--mmi-red-light), var(--mmi-red-darker));
  color: var(--mmi-white);
  text-decoration: none;
  isolation: isolate;
}
.mmi-tile__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform var(--mmi-slow);
}
.mmi-tile::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(var(--mmi-scrim), 0) 30%, rgba(var(--mmi-scrim), .88) 100%);
  transition: background var(--mmi-transition);
}
.mmi-tile:hover { color: var(--mmi-white); }
.mmi-tile:hover .mmi-tile__img { transform: scale(1.06); }
.mmi-tile:hover::before {
  background: linear-gradient(180deg, rgba(87, 20, 43, .1) 0%, rgba(87, 20, 43, .9) 100%);
}

.mmi-tile__body {
  display: block;
  padding: var(--mmi-space-5);
}
.mmi-tile__title {
  font-variant-numeric: lining-nums;
  display: block;
  font-family: var(--mmi-font-display);
  font-size: var(--mmi-fs-h3);
  font-weight: 600;
  line-height: var(--mmi-lh-tight);
  margin-bottom: var(--mmi-space-2);
}
.mmi-tile__title::after {
  content: "";
  display: block;
  width: 36px;
  height: 2px;
  margin-top: var(--mmi-space-3);
  background: var(--mmi-gold-light);
  transition: width var(--mmi-transition);
}
.mmi-tile:hover .mmi-tile__title::after { width: 64px; }

/* The description folds open on hover where there is a pointer; on touch
   screens it simply shows. */
.mmi-tile__text {
  display: block;
  font-size: var(--mmi-fs-sm);
  line-height: 1.55;
  color: rgba(255, 255, 255, .86);
}
@media (hover: hover) {
  .mmi-tile__text {
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    transition: max-height var(--mmi-slow), opacity var(--mmi-transition);
  }
  .mmi-tile:hover .mmi-tile__text,
  .mmi-tile:focus-visible .mmi-tile__text { max-height: 10rem; opacity: 1; }
}
.mmi-tile__more {
  display: inline-block;
  margin-top: var(--mmi-space-3);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-gold-light);
}
.mmi-tile__more .fa-solid { transition: transform var(--mmi-transition); }
.mmi-tile:hover .mmi-tile__more .fa-solid { transform: translateX(4px); }

/* ---- Town tiles (snippets/region-towns.php) ---------------------------- */
.mmi-tile__dept {
  display: block;
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, .8);
}
.mmi-towns .mmi-tile { aspect-ratio: 3 / 4; }

/* ---- Getting here (snippets/region-access.php) ------------------------- */
.mmi-access__list {
  list-style: none;
  margin: 0;
  padding: 0;
  border-top: 1px solid var(--mmi-line);
}
.mmi-access__list li {
  display: grid;
  grid-template-columns: 2.75rem 1fr auto;
  align-items: center;
  gap: var(--mmi-space-4);
  padding: var(--mmi-space-4) 0;
  border-bottom: 1px solid var(--mmi-line);
}
.mmi-access__icon {
  width: 2.75rem;
  height: 2.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mmi-rose-pale);
  color: var(--mmi-red);
}
.mmi-access__name {
  font-weight: 700;
  color: var(--mmi-ink);
  line-height: 1.3;
}
.mmi-access__name small {
  display: block;
  font-weight: 400;
  color: var(--mmi-muted);
}
.mmi-access__time {
  font-family: var(--mmi-font-display);
  font-size: var(--mmi-fs-xl);
  font-weight: 600;
  font-variant-numeric: lining-nums;
  color: var(--mmi-red);
  white-space: nowrap;
}

/* =========================================================================
   Contact page (html/com_contact/contact/default.php)
   ========================================================================= */

.mmi-contact__intro { margin-bottom: var(--mmi-space-7); }
.mmi-contact__intro .mmi-lead { max-width: 64ch; }
.mmi-contact__intro .mmi-lead p:last-child { margin-bottom: 0; }

/* The office card: warm paper with a gold edge, like TSEA's office cards. */
.mmi-office {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: var(--mmi-space-6);
  background: var(--mmi-stone);
  border-left: 3px solid var(--mmi-gold);
  border-radius: var(--mmi-radius-lg);
}
.mmi-office__name { font-size: var(--mmi-fs-h3); margin-bottom: var(--mmi-space-3); }
.mmi-office__address { color: var(--mmi-body); margin-bottom: var(--mmi-space-5); }
.mmi-office__lines {
  list-style: none;
  margin: 0 0 var(--mmi-space-5);
  padding: 0;
  display: grid;
  gap: var(--mmi-space-3);
}
.mmi-office__lines li { display: flex; align-items: center; gap: var(--mmi-space-3); }
.mmi-office__lines a { color: var(--mmi-ink); text-decoration: none; }
.mmi-office__lines a:hover { color: var(--mmi-red); }
.mmi-office__icon {
  flex: 0 0 2.25rem;
  height: 2.25rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--mmi-rose-pale);
  color: var(--mmi-red);
  font-size: .85rem;
}
.mmi-office__directions { align-self: flex-start; }
.mmi-office__follow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--mmi-space-4);
  margin-top: auto;
  padding-top: var(--mmi-space-5);
  border-top: 1px solid var(--mmi-line);
}
.mmi-office__follow > span {
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-muted);
}
/* The footer's social icons, on a light ground. */
.mmi-social--light a {
  border: 1px solid var(--mmi-stone-deep);
  background: var(--mmi-white);
  color: var(--mmi-ink);
}
.mmi-social--light a:hover { color: var(--mmi-white); }

/* Duotone map with the office pin at its centre. */
.mmi-map {
  position: relative;
  height: 100%;
  min-height: 22rem;
  margin: 0;
  border-radius: var(--mmi-radius-lg);
  overflow: hidden;
  box-shadow: var(--mmi-shadow);
}
.mmi-map a { display: block; height: 100%; }
.mmi-map img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.mmi-map__pin {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -100%);
  font-size: 2.6rem;
  line-height: 1;
  color: var(--mmi-red);
  filter: drop-shadow(0 4px 6px rgba(34, 31, 36, .35));
  transition: transform var(--mmi-transition);
}
.mmi-map a:hover .mmi-map__pin { transform: translate(-50%, -112%); }
.mmi-map__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  padding: .15rem .5rem;
  background: rgba(255, 255, 255, .8);
  font-size: .6875rem;
  color: var(--mmi-muted);
}
.mmi-map__credit a { display: inline; color: inherit; }

/* Joomla's own contact form, restyled: two columns for name and e-mail. */
.mmi-contact__form {
  max-width: 52rem;
  margin: var(--mmi-section) auto 0;
  padding: var(--mmi-space-7) var(--mmi-space-6);
  background: var(--mmi-white);
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow-sm);
}
.mmi-contact__form .well { padding: 0; border: 0; background: none; box-shadow: none; }
.mmi-contact__form legend { display: none; }
.mmi-contact__form fieldset {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--mmi-space-5);
}
@media (min-width: 768px) {
  .mmi-contact__form fieldset { grid-template-columns: 1fr 1fr; }
  .mmi-contact__form fieldset > .control-group:has(textarea),
  .mmi-contact__form fieldset > .control-group:has([name*="subject"]),
  .mmi-contact__form fieldset > .control-group:has(input[type="checkbox"]) { grid-column: 1 / -1; }
}
.mmi-contact__form .control-group { margin-bottom: var(--mmi-space-4); }
.mmi-contact__form .control-label { margin-bottom: var(--mmi-space-1); }
.mmi-contact__form .control-label label {
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  color: var(--mmi-ink);
}
.mmi-contact__form .star { color: var(--mmi-red); }
.mmi-contact__form textarea { min-height: 10rem; }
.mmi-contact__form button[type="submit"] { width: 100%; margin-top: var(--mmi-space-2); }
/* ---- RSForm! Pro inside the contact block -------------------------------
   RSForm's "Responsive" layout puts labels beside the fields. Here they sit
   above, short fields pair up two by two, message and button run full width,
   matching Joomla's own form in the same place. */
.mmi-contact__form #userForm > h2 { display: none; }   /* RSForm's own form title */
.mmi-contact__form .formContainer > .row > [class*="col-"] {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0 var(--mmi-space-5);
}
@media (min-width: 768px) {
  .mmi-contact__form .formContainer > .row > [class*="col-"] { grid-template-columns: 1fr 1fr; }
  .mmi-contact__form .rsform-type-textarea,
  .mmi-contact__form .rsform-type-submitbutton,
  .mmi-contact__form .rsform-type-checkboxgroup,
  .mmi-contact__form .rsform-type-gdpr,
  .mmi-contact__form .rsform-type-captcha,
  .mmi-contact__form .rsform-type-freetext { grid-column: 1 / -1; }
}
.mmi-contact__form .rsform-block { --bs-gutter-x: 0; margin: 0 0 var(--mmi-space-4); }
.mmi-contact__form .formContainer > .row { --bs-gutter-x: 0; margin: 0; }
.mmi-contact__form .rsform-block > [class*="col-sm-"] {
  flex: 0 0 100%;
  max-width: 100%;
  margin-left: 0;
}
.mmi-contact__form .formControlLabel {
  padding: 0 0 var(--mmi-space-1);
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  color: var(--mmi-ink);
}
.mmi-contact__form .formRequired {
  margin-left: .2em;
  font-size: 0;          /* hides RSForm's "(*)" text ... */
  color: var(--mmi-red);
}
.mmi-contact__form .formRequired::after { content: "*"; font-size: var(--mmi-fs-sm); }  /* ... for a red asterisk */
.mmi-contact__form textarea { min-height: 10rem; }
.mmi-contact__form .formError {
  display: block;
  margin-top: var(--mmi-space-1);
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-red);
}
.mmi-contact__form .rsform-error { border-color: var(--mmi-red); }
.mmi-contact__form .rsform-type-submitbutton .btn,
.mmi-contact__form .rsform-submit-button { width: 100%; }
.mmi-contact__form .formResponsive .alert,
.mmi-contact__form .formError + .alert { border-radius: var(--mmi-radius); }

/* Call-to-action band (snippets/cta-sell.php): red, centred, gold button. */
.mmi-cta-band .mmi-lead { max-width: 56ch; }
.mmi-section--brand .mmi-rule { background: var(--mmi-gold-light); }

.mmi-contact__privacy {
  margin: var(--mmi-space-4) 0 0;
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-muted);
  text-align: center;
}

/* ---- Team (snippets/team.php) ----------------------------------------- */
/* Cards keep their own height, so opening one bio does not stretch the rest. */
.mmi-team .row { align-items: flex-start; }
.mmi-person {
  display: flex;
  flex-direction: column;
  background: var(--mmi-white);
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow-sm), 0 0 0 1px var(--mmi-line);
  overflow: hidden;
}
.mmi-person__photo {
  aspect-ratio: 1 / 1;
  background: var(--mmi-stone-deep);
  overflow: hidden;
}
.mmi-person__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-person:hover .mmi-person__photo img { transform: scale(1.03); }
.mmi-person__body { padding: var(--mmi-space-5); }
.mmi-person__name { font-size: var(--mmi-fs-xl); margin-bottom: var(--mmi-space-1); }
.mmi-person__role {
  margin-bottom: var(--mmi-space-3);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-gold-dark);
}
/* Bio: three lines, then "Read more" opens the rest. */
.mmi-person__bio summary {
  list-style: none;
  cursor: pointer;
  color: var(--mmi-body);
  font-size: var(--mmi-fs-sm);
  line-height: 1.65;
}
.mmi-person__bio summary::-webkit-details-marker { display: none; }
.mmi-person__teaser {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mmi-person__bio[open] .mmi-person__teaser { display: block; }
.mmi-person__more {
  display: inline-block;
  margin-top: var(--mmi-space-2);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-red);
}
.mmi-person__bio[open] .mmi-person__more { font-size: 0; }
.mmi-person__bio[open] .mmi-person__more::after { content: attr(data-open); font-size: var(--mmi-fs-xs); }

/* ---- Testimonials (snippets/testimonials.php) -------------------------- */
.mmi-quotes { background: var(--mmi-stone); }
/* Straight after a stone band, the quotes go white so the two don't run together. */
.mmi-section--alt + .mmi-quotes { background: var(--mmi-white); }
.mmi-quotes__stage {
  position: relative;
  display: grid;
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}
.mmi-quotes__mark {
  display: block;
  font-family: var(--mmi-font-display);
  font-size: 6rem;
  line-height: .6;
  height: 3rem;
  color: var(--mmi-gold-light);
}
/* All quotes share one grid cell; only the active one shows. */
.mmi-quote {
  grid-area: 2 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity 600ms ease, visibility 600ms ease, transform 600ms var(--mmi-ease);
}
.mmi-quote.is-active { opacity: 1; visibility: visible; transform: none; }
.mmi-quote__text {
  margin: 0 0 var(--mmi-space-5);
  padding: 0;
  border: 0;
  font-family: var(--mmi-font-display);
  font-size: clamp(1.25rem, 1.05rem + .7vw, 1.65rem);
  font-style: italic;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mmi-ink);
}
.mmi-quote__text p { margin-bottom: var(--mmi-space-3); }
.mmi-quote__text p:last-child { margin-bottom: 0; }
.mmi-quote__who strong {
  display: block;
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-red);
}
.mmi-quote__who span { font-size: var(--mmi-fs-sm); color: var(--mmi-muted); }

/* ---- Our sold collection (snippets/sold-collection.php) ---------------- */
.mmi-soldfacts { background: var(--mmi-stone); border-bottom: 1px solid var(--mmi-line); }
.mmi-soldfacts .container { display: flex; flex-wrap: wrap; justify-content: center; }
.mmi-soldfacts .container > div { flex: 1 1 12rem; max-width: 22rem; padding: var(--mmi-space-5) var(--mmi-space-3); text-align: center; }
.mmi-soldfacts .container > div + div { border-left: 1px solid var(--mmi-line); }
.mmi-soldfacts strong {
  display: block;
  font-family: var(--mmi-font-display);
  font-size: 2.75rem;
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--mmi-red);
}
.mmi-soldfacts span { font-size: var(--mmi-fs-sm); color: var(--mmi-muted); }
@media (max-width: 575.98px) {
  .mmi-soldfacts .container > div { flex-basis: 100%; padding-block: var(--mmi-space-4); }
  .mmi-soldfacts .container > div + div { border-left: 0; border-top: 1px solid var(--mmi-line); }
}

/* A photo wall: three columns of different heights, so it reads as a
   collection rather than a list. */
.mmi-soldwall { columns: 1; column-gap: var(--mmi-space-5); }
@media (min-width: 768px)  { .mmi-soldwall { columns: 2; } }
@media (min-width: 1200px) { .mmi-soldwall { columns: 3; } }
.mmi-soldtile { break-inside: avoid; margin: 0 0 var(--mmi-space-6); }
.mmi-soldtile__media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow);
  background: var(--mmi-stone-deep);
}
.mmi-soldtile__media img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  transition: transform 900ms var(--mmi-ease);
}
.mmi-soldtile:nth-child(3n + 1) .mmi-soldtile__media img { aspect-ratio: 4 / 5; }
.mmi-soldtile:nth-child(3n) .mmi-soldtile__media img { aspect-ratio: 1; }
.mmi-soldtile__media:hover img { transform: scale(1.045); }
.mmi-soldtile__media:focus-visible { outline: 3px solid var(--mmi-gold); outline-offset: 3px; }
.mmi-soldtile__stamp {
  position: absolute;
  top: var(--mmi-space-3);
  left: var(--mmi-space-3);
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .75rem;
  border-radius: var(--mmi-radius-pill);
  background: rgba(255, 255, 255, .94);
  box-shadow: 0 4px 14px rgba(0, 0, 0, .12);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1;
  color: var(--mmi-red);
}
.mmi-soldtile__stamp::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.mmi-soldtile__count {
  position: absolute;
  right: var(--mmi-space-3);
  bottom: var(--mmi-space-3);
  padding: .35rem .7rem;
  border-radius: var(--mmi-radius-pill);
  background: rgba(var(--mmi-scrim), .6);
  font-size: var(--mmi-fs-sm);
  font-weight: 600;
  line-height: 1;
  color: var(--mmi-white);
}
.mmi-soldtile__count .fa-solid { margin-right: .25rem; font-size: .8em; }
.mmi-soldtile__body { padding: var(--mmi-space-4) var(--mmi-space-1) 0; }
.mmi-soldtile__town {
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--mmi-gold-dark);
}
.mmi-soldtile__title { font-size: 1.5rem; margin: .35rem 0 .3rem; }
.mmi-soldtile__facts { margin: 0; font-size: var(--mmi-fs-sm); color: var(--mmi-muted); }
.mmi-soldtile__facts b { font-weight: 600; color: var(--mmi-ink); }
.mmi-soldwall__shown { margin: var(--mmi-space-3) 0 0; font-size: var(--mmi-fs-sm); color: var(--mmi-muted); }

/* ---- Testimonials page (html/com_content/category/quotes.php) -------- */
/* Two calm columns of cards, no movement: easy to read at one's own pace. */
.mmi-quotewall__intro { max-width: 46rem; }
.mmi-quotewall { columns: 1; column-gap: var(--mmi-space-5); }
@media (min-width: 992px) { .mmi-quotewall { columns: 2; } }
.mmi-quotecard {
  position: relative;
  break-inside: avoid;
  margin: 0 0 var(--mmi-space-5);
  padding: var(--mmi-space-6) var(--mmi-space-5) var(--mmi-space-5);
  background: var(--mmi-white);
  border: 1px solid var(--mmi-line);
  border-top: 2px solid var(--mmi-gold);
  border-radius: var(--mmi-radius-lg);
}
.mmi-quotecard__mark {
  position: absolute;
  top: .2rem;
  left: var(--mmi-space-5);
  font-family: var(--mmi-font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--mmi-gold-light);
}
/* The display italic, as on the home page slider, but large enough (and a
   little heavier) to stay comfortable over a long quote. */
.mmi-quotecard .mmi-quotecard__text,
.mmi-quotecard .mmi-quotecard__text p {
  font-family: var(--mmi-font-display);
  font-style: italic;
  font-weight: 500;
  font-size: 1.45rem;
  line-height: 1.5;
  color: var(--mmi-ink);
}
@media (max-width: 575.98px) {
  .mmi-quotecard .mmi-quotecard__text,
  .mmi-quotecard .mmi-quotecard__text p { font-size: 1.25rem; }
  .mmi-quotecard { padding-inline: var(--mmi-space-4); }
  .mmi-quotecard__mark { left: var(--mmi-space-4); }
}
.mmi-quotecard__text {
  margin: 0 0 var(--mmi-space-4);
  padding: 0;
  border: 0;
}
.mmi-quotecard__text p { margin-bottom: var(--mmi-space-3); }
.mmi-quotecard__text p:last-child { margin-bottom: 0; }

/* The slideshow controls, on a light ground. */
.mmi-quotes__nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--mmi-space-4);
  margin-top: var(--mmi-space-6);
}
.mmi-quotes .mmi-slidenav__arrow {
  background: var(--mmi-white);
  border-color: var(--mmi-line);
  color: var(--mmi-ink);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
.mmi-quotes .mmi-slidenav__arrow:hover { background: var(--mmi-red); border-color: var(--mmi-red); color: var(--mmi-white); }
.mmi-quotes .mmi-slidenav__dots button { background: var(--mmi-stone-deep); }
.mmi-quotes .mmi-slidenav__dots button:hover { background: var(--mmi-rose); }
.mmi-quotes .mmi-slidenav__dots button[aria-current] { background: var(--mmi-red); }

/* =========================================================================
   Article and content typography
   ========================================================================= */

.com-content-article__body,
.mmi-prose {
  max-width: 75ch;
}
.com-content-article__body h2 { font-size: var(--mmi-fs-h3); margin-top: var(--mmi-space-6); }
.com-content-article__body h3 { font-size: var(--mmi-fs-xl); margin-top: var(--mmi-space-5); }
.com-content-article__body > p:first-child { font-size: var(--mmi-fs-lg); color: var(--mmi-ink); }

.page-header h1,
.page-header h2 { margin-bottom: var(--mmi-space-5); }

blockquote {
  margin: var(--mmi-space-6) 0;
  padding-left: var(--mmi-space-5);
  border-left: 2px solid var(--mmi-gold);
  font-family: var(--mmi-font-display);
  font-size: var(--mmi-fs-xl);
  font-style: italic;
  font-weight: 500;
  line-height: 1.4;
  color: var(--mmi-ink);
}

/* Article image: the float class comes from a free text field on the
   article, so Bootstrap's names and the plain English ones both work. */
.item-image { margin-bottom: var(--mmi-space-5); }
.item-image img {
  border-radius: var(--mmi-radius-lg);
  width: 100%;
  height: auto;
}
.item-image .caption {
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-muted);
  margin-top: var(--mmi-space-2);
}
@media (min-width: 768px) {
  .item-image.right, .item-image.float-end, .item-image.pull-right {
    float: right; max-width: 50%; margin-left: var(--mmi-space-6);
  }
  .item-image.left, .item-image.float-start, .item-image.pull-left {
    float: left; max-width: 50%; margin-right: var(--mmi-space-6);
  }
}
.com-content-article::after { content: ""; display: block; clear: both; }

/* Article info block, tags. */
.article-info {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmi-space-2) var(--mmi-space-5);
  margin-bottom: var(--mmi-space-5);
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-muted);
}
.article-info dt { display: none; }
.article-info dd { margin: 0; }
.tags { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--mmi-space-2); }
.tags a, .tags .btn {
  display: inline-block;
  padding: .2rem .7rem;
  border-radius: var(--mmi-radius-pill);
  background: var(--mmi-rose-pale);
  color: var(--mmi-red);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: none;
  text-decoration: none;
  border: 0;
}

/* Tables pasted into articles. */
.com-content-article__body table,
.mmi-table {
  width: 100%;
  margin-block: var(--mmi-space-5);
  border-collapse: collapse;
  font-size: var(--mmi-fs-sm);
}
.com-content-article__body th,
.com-content-article__body td,
.mmi-table th,
.mmi-table td {
  padding: var(--mmi-space-3) var(--mmi-space-4);
  border-bottom: 1px solid var(--mmi-line);
  text-align: left;
}
.com-content-article__body thead th,
.mmi-table thead th {
  font-size: var(--mmi-fs-xs);
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-ink);
  border-bottom: 2px solid var(--mmi-red);
}

/* =========================================================================
   Joomla system output: messages, pagination, forms
   ========================================================================= */

#system-message-container joomla-alert,
#system-message-container .alert {
  border-radius: var(--mmi-radius);
  margin-bottom: var(--mmi-space-5);
}

.pagination {
  --bs-pagination-color: var(--mmi-ink);
  --bs-pagination-hover-color: var(--mmi-red);
  --bs-pagination-hover-bg: var(--mmi-stone);
  --bs-pagination-focus-color: var(--mmi-red);
  --bs-pagination-focus-box-shadow: 0 0 0 .2rem rgba(184, 151, 90, .35);
  --bs-pagination-active-bg: var(--mmi-red);
  --bs-pagination-active-border-color: var(--mmi-red);
  --bs-pagination-border-color: var(--mmi-line);
  --bs-pagination-border-radius: var(--mmi-radius);
  justify-content: center;
  gap: var(--mmi-space-1);
}
.pagination .page-link { border-radius: var(--mmi-radius) !important; }

.form-control,
.form-select {
  border-color: var(--mmi-line);
  border-radius: var(--mmi-radius);
  padding: .75rem 1rem;
  font-size: var(--mmi-fs-base);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--mmi-gold);
  box-shadow: 0 0 0 .2rem rgba(184, 151, 90, .2);
}
.form-check-input:checked {
  background-color: var(--mmi-red);
  border-color: var(--mmi-red);
}
.form-label,
.control-label label {
  font-weight: 600;
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-ink);
}

/* =========================================================================
   Lightbox
   ========================================================================= */

.mmi-lightbox {
  position: fixed;
  inset: 0;
  z-index: calc(var(--mmi-z-header) + 20);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--mmi-space-6);
  background: rgba(var(--mmi-scrim), .94);
}
.mmi-lightbox[hidden] { display: none; }

.mmi-lightbox__body {
  max-width: min(96vw, 1400px);
  max-height: 90vh;
  display: flex;
}
.mmi-lightbox__img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  border-radius: var(--mmi-radius);
  display: block;
}
.mmi-lightbox__video {
  width: min(96vw, 1200px);
  aspect-ratio: 16 / 9;
  max-height: 90vh;
}
.mmi-lightbox__video iframe {
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: var(--mmi-radius);
  display: block;
}
.mmi-lightbox__close {
  position: absolute;
  top: var(--mmi-space-4);
  right: var(--mmi-space-4);
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  color: var(--mmi-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--mmi-transition);
}
.mmi-lightbox__close:hover {
  background: var(--mmi-white);
  color: var(--mmi-red);
}

/* A picture that opens is worth signalling. */
[data-mmi-lightbox] {
  display: block;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  width: 100%;
}

/* =========================================================================
   Footer
   ========================================================================= */

.mmi-footer {
  position: relative;
  background: var(--mmi-charcoal-deep);
  color: var(--mmi-on-dark);
  font-size: var(--mmi-fs-sm);
}
/* Brand line across the top: red into gold. */
.mmi-footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--mmi-red) 0%, var(--mmi-red-light) 45%, var(--mmi-gold) 100%);
}
.mmi-footer .row { padding-top: var(--mmi-space-8) !important; }
.mmi-footer h2, .mmi-footer h3 { color: var(--mmi-white); }

.mmi-footer__logo { height: 64px; width: auto; }

.mmi-footer .mmi-footer__title {
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-gold-light);
  margin-bottom: var(--mmi-space-4);
}
.mmi-footer a {
  color: var(--mmi-on-dark);
  text-decoration: none;
}
.mmi-footer a:hover, .mmi-footer a:focus-visible { color: var(--mmi-white); }

.mmi-footer__col ul { list-style: none; margin: 0; padding: 0; }
.mmi-footer__col li + li { margin-top: var(--mmi-space-2); }
.mmi-footer__col a {
  display: inline-block;
  transition: color var(--mmi-transition), transform var(--mmi-transition);
}
.mmi-footer__col a:hover { transform: translateX(3px); }
/* A default-layout menu module dropped into a footer column. */
.mmi-footer__col .mmi-menu__link {
  display: inline;
  padding: 0;
  font-size: var(--mmi-fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mmi-on-dark);
}
.mmi-footer__col .mmi-menu__link::after { content: none; }

.mmi-footer address { font-style: normal; }
.mmi-footer__contact {
  display: grid;
  gap: var(--mmi-space-3);
}
.mmi-footer__contact > span {
  display: grid;
  grid-template-columns: 1.25rem 1fr;
  gap: var(--mmi-space-3);
  align-items: baseline;
}
.mmi-footer__contact .fa-solid { color: var(--mmi-gold); }

.mmi-social {
  display: flex;
  gap: var(--mmi-space-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.mmi-social a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  border: 1px solid var(--mmi-line-dark);
  border-radius: 50%;
  font-size: .95rem;
  line-height: 1;
  transition: background var(--mmi-transition), border-color var(--mmi-transition), color var(--mmi-transition);
}
.mmi-social a:hover {
  background: var(--mmi-red);
  border-color: var(--mmi-red);
  color: var(--mmi-white);
}

.mmi-footer__bar {
  border-top: 1px solid var(--mmi-line-dark);
  padding-block: var(--mmi-space-5);
  font-size: var(--mmi-fs-xs);
  color: var(--mmi-on-dark-soft);
}
.mmi-footer__bar ul {
  list-style: none;
  margin: 0; padding: 0;
  display: flex; flex-wrap: wrap;
  gap: var(--mmi-space-2) var(--mmi-space-4);
}
/* Legal links in the bottom bar: readable, with a thin separator between. */
.mmi-footer__bar .mmi-menu__link {
  padding: 0;
  font-size: var(--mmi-fs-sm);
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mmi-on-dark);
}
.mmi-footer__bar .mmi-menu__link:hover,
.mmi-footer__bar .mmi-menu__link:focus-visible { color: var(--mmi-white); text-decoration: underline; }
.mmi-footer__bar .mmi-menu__link::after { content: none; }
.mmi-footer__bar .mmi-menu { flex-direction: row; flex-wrap: wrap; gap: var(--mmi-space-2) 0; }
/* The main nav makes each link a flex block; here each item is one inline row. */
.mmi-footer__bar .mmi-menu__item { display: flex; align-items: center; }
.mmi-footer__bar .mmi-menu__link { display: inline; width: auto; }
.mmi-footer__bar .mmi-menu__item + .mmi-menu__item::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: .85em;
  margin: 0 var(--mmi-space-3);
  background: var(--mmi-line-dark);
}
.mmi-footer__credit a {
  color: inherit;
  border-bottom: 1px solid currentColor;
}

/* ---- Back to top ----------------------------------------------------- */

.mmi-totop {
  position: fixed;
  right: var(--mmi-space-5);
  bottom: var(--mmi-space-5);
  width: 46px; height: 46px;
  display: grid; place-items: center;
  background: var(--mmi-red);
  color: var(--mmi-white);
  border: 0;
  border-radius: 50%;
  box-shadow: var(--mmi-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--mmi-transition), visibility var(--mmi-transition),
              transform var(--mmi-transition), background var(--mmi-transition);
  z-index: calc(var(--mmi-z-header) - 2);
}
.mmi-totop.is-visible { opacity: 1; visibility: visible; transform: none; }
.mmi-totop:hover { background: var(--mmi-red-dark); }

/* ---- Skip link ------------------------------------------------------- */

.mmi-skip {
  position: absolute;
  left: var(--mmi-space-4);
  top: var(--mmi-space-4);
  transform: translateY(-200%);
  z-index: calc(var(--mmi-z-header) + 10);
  background: var(--mmi-white);
  color: var(--mmi-red);
  padding: var(--mmi-space-2) var(--mmi-space-4);
  border-radius: var(--mmi-radius);
  box-shadow: var(--mmi-shadow);
  transition: transform var(--mmi-transition);
}
.mmi-skip:focus { transform: translateY(0); }

/* =========================================================================
   Error page
   ========================================================================= */

.is-error .mmi-section { min-height: 70vh; display: flex; align-items: center; }
.is-error .mmi-error__code {
  font-variant-numeric: lining-nums;
  font-family: var(--mmi-font-display);
  font-size: clamp(5rem, 3rem + 10vw, 10rem);
  line-height: 1;
  color: var(--mmi-rose-light);
}

/* =========================================================================
   Property listing (OS Property)
   Toolbar with the total and the sort order, then a grid of cards. The
   photo leads; the facts sit in one quiet row of icons under the price.
   ========================================================================= */

.mmi-props__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--mmi-space-4);
  padding-bottom: var(--mmi-space-5);
  margin-bottom: var(--mmi-space-6);
  border-bottom: 1px solid var(--mmi-line);
}
.mmi-props__count {
  margin: 0;
  font-size: var(--mmi-fs-sm);
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-muted);
}
.mmi-props__count strong {
  font-variant-numeric: lining-nums;
  display: block;
  font-family: var(--mmi-font-display);
  font-size: var(--mmi-fs-h2);
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0;
  text-transform: none;
  color: var(--mmi-ink);
  margin-bottom: var(--mmi-space-1);
}
.mmi-props__sort {
  display: flex;
  align-items: center;
  gap: var(--mmi-space-3);
}
.mmi-props__sort label {
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-muted);
  white-space: nowrap;
}
.mmi-props__sort .form-select {
  min-width: 15rem;
  padding-block: .6rem;
  font-size: var(--mmi-fs-sm);
  font-weight: 600;
  color: var(--mmi-ink);
}

/* ---- Card ------------------------------------------------------------ */

.mmi-prop {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  background: var(--mmi-white);
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow-sm), 0 0 0 1px var(--mmi-line);
  overflow: hidden;
  transition: transform var(--mmi-transition), box-shadow var(--mmi-transition);
}
.mmi-prop:hover {
  transform: translateY(-4px);
  box-shadow: var(--mmi-shadow-lg);
}

.mmi-prop__media {
  position: relative;
  display: block;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mmi-stone-deep);
}
/* ---- Photo carousel in the card -----------------------------------------
   Native horizontal scrolling with snap points: swiping is the browser's own,
   the arrows only nudge it one photo along. No library, nothing loaded from
   a third party. Sits above the card-wide link so arrows and swipes work. */
.mmi-carousel {
  position: absolute;
  inset: 0;
  z-index: 3;
}
.mmi-carousel__track {
  display: flex;
  height: 100%;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.mmi-carousel__track::-webkit-scrollbar { display: none; }
.mmi-carousel__slide {
  position: relative;
  flex: 0 0 100%;
  height: 100%;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  overflow: hidden;
}
.mmi-carousel__slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-prop:hover .mmi-carousel__slide img { transform: scale(1.04); }

.mmi-carousel__arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 36px;
  height: 36px;
  margin-top: -18px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, .88);
  color: var(--mmi-ink);
  font-size: .75rem;
  box-shadow: var(--mmi-shadow-sm);
  cursor: pointer;
  opacity: 0;
  transition: opacity var(--mmi-transition), background var(--mmi-transition), color var(--mmi-transition);
}
.mmi-carousel__arrow--prev { left: var(--mmi-space-3); }
.mmi-carousel__arrow--next { right: var(--mmi-space-3); }
.mmi-prop:hover .mmi-carousel__arrow:not(:disabled),
.mmi-carousel__arrow:focus-visible { opacity: 1; }
.mmi-carousel__arrow:hover { background: var(--mmi-red); color: var(--mmi-white); }
.mmi-carousel__arrow:disabled { opacity: 0 !important; pointer-events: none; }
/* Touch screens swipe; the arrows would only cover the photo. */
@media (hover: none) {
  .mmi-carousel__arrow { display: none; }
}

.mmi-carousel__dots {
  position: absolute;
  left: 50%;
  bottom: var(--mmi-space-3);
  z-index: 2;
  display: flex;
  gap: 5px;
  transform: translateX(-50%);
  pointer-events: none;
}
.mmi-carousel__dots span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .55);
  transition: background var(--mmi-transition), transform var(--mmi-transition);
}
.mmi-carousel__dots span.is-on { background: var(--mmi-white); transform: scale(1.3); }

/* The last photo leads on to the full gallery on the property page. */
.mmi-carousel__more {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  background: rgba(var(--mmi-scrim), .55);
  color: var(--mmi-white);
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
}
.mmi-carousel__more .fa-solid { transition: transform var(--mmi-transition); }
.mmi-carousel__slide:hover .mmi-carousel__more .fa-solid { transform: translateX(4px); }
/* A soft foot so the photo count reads on any picture. */
.mmi-prop__media::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: auto 0 0 0;
  height: 40%;
  background: linear-gradient(180deg, rgba(var(--mmi-scrim), 0), rgba(var(--mmi-scrim), .45));
  pointer-events: none;
}

.mmi-prop__badge {
  position: absolute;
  top: var(--mmi-space-4);
  left: var(--mmi-space-4);
  z-index: 4;
  pointer-events: none;
  padding: .35rem .8rem;
  border-radius: var(--mmi-radius-pill);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  line-height: 1.2;
  background: var(--mmi-white);
  color: var(--mmi-ink);
  box-shadow: var(--mmi-shadow-sm);
}
.mmi-prop__badge--new         { background: var(--mmi-gold); color: var(--mmi-ink); }
.mmi-prop__badge--under-offer { background: var(--mmi-white); color: var(--mmi-red); }
.mmi-prop__badge--sold,
.mmi-prop__badge--sold-by-ma-maison { background: var(--mmi-red); color: var(--mmi-white); }

.mmi-prop__photos {
  position: absolute;
  right: var(--mmi-space-4);
  bottom: var(--mmi-space-3);
  z-index: 4;
  pointer-events: none;
  font-size: var(--mmi-fs-xs);
  font-weight: 600;
  color: var(--mmi-white);
}
.mmi-prop__photos .fa-solid { margin-right: .3em; }

.mmi-prop__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  padding: var(--mmi-space-5) var(--mmi-space-5) 0;
}
.mmi-prop__place {
  margin: 0 0 var(--mmi-space-2);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-gold-dark);
}
.mmi-prop__place .fa-solid { margin-right: .35em; }

.mmi-prop__title {
  font-size: var(--mmi-fs-xl);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 var(--mmi-space-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.mmi-prop__title a {
  color: var(--mmi-heading);
  text-decoration: none;
}
/* The whole card is clickable through the title link. */
.mmi-prop__title a::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
}
.mmi-prop__title a:focus-visible { outline: none; }
.mmi-prop:has(.mmi-prop__title a:focus-visible) { box-shadow: 0 0 0 3px var(--mmi-gold); }

.mmi-prop__price {
  font-variant-numeric: lining-nums;
  margin: auto 0 0;
  font-family: var(--mmi-font-display);
  font-size: 1.6rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--mmi-red);
}
.mmi-prop__ref {
  margin-left: var(--mmi-space-2);
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-xs);
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--mmi-muted);
  vertical-align: middle;
}

.mmi-prop__facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--mmi-space-2) var(--mmi-space-5);
  margin: var(--mmi-space-4) var(--mmi-space-5) 0;
  padding: var(--mmi-space-3) 0;
  border-top: 1px solid var(--mmi-line);
  border-bottom: 1px solid var(--mmi-line);
  list-style: none;
}
.mmi-prop__facts li {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-body);
  white-space: nowrap;
}
.mmi-prop__facts .fa-solid {
  font-size: .8rem;
  color: var(--mmi-gold-dark);
}
/* The words stay for screen readers and search engines; the icons say it. */
.mmi-prop__facts small {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.mmi-prop__more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  margin: var(--mmi-space-4) var(--mmi-space-5) var(--mmi-space-5);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-red);
}
.mmi-prop__more .fa-solid { transition: transform var(--mmi-transition); }
.mmi-prop:hover .mmi-prop__more .fa-solid { transform: translateX(4px); }

/* Sold listings stay elegant but step back a little. */
.mmi-prop--sold .mmi-carousel__slide img { filter: saturate(.75); }
.mmi-prop--sold .mmi-prop__price { color: var(--mmi-muted); }

/* ---- Pagination under the grid -------------------------------------- */
.mmi-props__pages { margin-top: var(--mmi-space-7); }

/* =========================================================================
   Property detail (html/com_osproperty/mmi/details.php)
   Photo slider as the hero, title and price, the long description beside a
   sticky enquiry card, gallery, area map, similar properties.
   ========================================================================= */

/* ---- 1 + 2. Photos beside the title panel ----------------------------------
   The photos keep their own 3:2 shape, so a roof or a garden is never cut
   off. On a phone the panel simply follows the photo. */
.mmi-detail__top {
  display: grid;
  background: var(--mmi-stone);
}
@media (min-width: 992px) {
  .mmi-detail__top { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); }
}
.mmi-detail__hero {
  position: relative;
  aspect-ratio: 3 / 2;
  background: var(--mmi-charcoal-deep);
  overflow: hidden;
}
@media (min-width: 992px) {
  /* At least the photo's full 3:2 height (1.65 / 2.65 of the width, times
     2/3); taller only when a long title needs it, and then it fills the row. */
  .mmi-detail__hero { aspect-ratio: auto; min-height: 41.5vw; }
}
.mmi-carousel--hero .mmi-carousel__slide img { transition: none; }
.mmi-carousel--hero .mmi-carousel__arrow {
  width: 50px;
  height: 50px;
  margin-top: -25px;
  font-size: .95rem;
  opacity: 1;
  background: rgba(255, 255, 255, .92);
}
.mmi-carousel--hero .mmi-carousel__arrow--prev { left: var(--mmi-space-5); }
.mmi-carousel--hero .mmi-carousel__arrow--next { right: var(--mmi-space-5); }
.mmi-detail__count {
  position: absolute;
  right: var(--mmi-space-5);
  bottom: var(--mmi-space-5);
  z-index: 2;
  padding: .4rem .9rem;
  border-radius: var(--mmi-radius-pill);
  background: rgba(var(--mmi-scrim), .6);
  color: var(--mmi-white);
  font-size: var(--mmi-fs-sm);
  font-weight: 600;
  font-variant-numeric: lining-nums tabular-nums;
  pointer-events: none;
}
.mmi-detail__count .fa-solid { margin-right: .35em; }
.mmi-detail__hero .mmi-prop__badge {
  top: var(--mmi-space-5);
  left: var(--mmi-space-5);
  font-size: var(--mmi-fs-sm);
}
.mmi-detail--sold .mmi-carousel__slide img { filter: saturate(.8); }

.mmi-detail__head {
  align-self: center;
  width: 100%;
  max-width: 36rem;
  padding: clamp(2rem, 1.2rem + 3vw, 4rem) clamp(1rem, .5rem + 3vw, 3.5rem);
}
@media (max-width: 991.98px) {
  .mmi-detail__head { max-width: none; padding-inline: max(var(--mmi-space-4), calc((100vw - 720px) / 2 + .75rem)); }
}
.mmi-detail__title {
  margin: 0 0 var(--mmi-space-5);
  font-size: clamp(1.9rem, 1.4rem + 1.5vw, 2.9rem);
  line-height: 1.1;
  text-wrap: balance;
}
.mmi-detail__price {
  margin: 0;
  font-family: var(--mmi-font-display);
  font-size: clamp(1.8rem, 1.5rem + 1vw, 2.4rem);
  font-weight: 600;
  line-height: 1;
  font-variant-numeric: lining-nums;
  color: var(--mmi-red);
}
.mmi-detail--sold .mmi-detail__price { color: var(--mmi-muted); }
.mmi-detail__ref {
  margin: var(--mmi-space-2) 0 0;
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  color: var(--mmi-muted);
}
/* Key facts: two by two, divided by hairlines. */
.mmi-detail__facts {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: var(--mmi-space-5) 0 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mmi-line);
}
.mmi-detail__facts li {
  display: grid;
  grid-template-columns: 1.6rem 1fr;
  column-gap: var(--mmi-space-2);
  align-items: center;
  padding: var(--mmi-space-3) 0;
  border-bottom: 1px solid var(--mmi-line);
}
.mmi-detail__facts li:nth-child(even) { padding-left: var(--mmi-space-4); border-left: 1px solid var(--mmi-line); }
.mmi-detail__facts .fa-solid {
  grid-row: 1 / 3;
  font-size: 1rem;
  color: var(--mmi-gold);
}
.mmi-detail__facts strong {
  font-family: var(--mmi-font-display);
  font-size: 1.45rem;
  font-weight: 600;
  line-height: 1.05;
  font-variant-numeric: lining-nums;
  color: var(--mmi-ink);
}
.mmi-detail__facts span {
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-muted);
}
.mmi-detail__cta { margin: var(--mmi-space-6) 0 0; }
.mmi-enquiry { scroll-margin-top: 9rem; }

/* ---- 3. The description: Ma Maison's long texts, given room ------------- */
.mmi-detail__main.mmi-section { padding-top: clamp(2.5rem, 1.8rem + 2.5vw, 4rem); }
.mmi-desc {
  font-size: var(--mmi-fs-lg);
  line-height: 1.75;
  color: var(--mmi-body);
}
.mmi-desc > p { max-width: 68ch; margin: 0 0 1.1em; }
/* The opening paragraph sets the tone: larger, in the display face. */
.mmi-desc > p:first-child {
  font-family: var(--mmi-font-display);
  font-size: clamp(1.4rem, 1.2rem + .6vw, 1.7rem);
  line-height: 1.45;
  color: var(--mmi-ink);
}
/* A floor or a building: small gold heading over its room schedule. */
.mmi-desc h3 {
  display: flex;
  align-items: center;
  gap: var(--mmi-space-4);
  margin: var(--mmi-space-7) 0 var(--mmi-space-3);
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
  line-height: 1.5;
  color: var(--mmi-gold-dark);
}
.mmi-desc h3::after {
  content: "";
  flex: 1 1 auto;
  height: 1px;
  background: var(--mmi-line);
}
/* "Main chateau<br>Ground floor": the building reads larger, above its floor. */
.mmi-desc h3 br { display: none; }
.mmi-desc ul,
.mmi-desc ol { margin: 0 0 var(--mmi-space-5); padding: 0; list-style: none; }
.mmi-desc li {
  padding: var(--mmi-space-3) 0;
  border-bottom: 1px solid var(--mmi-line);
  font-size: var(--mmi-fs-base);
  line-height: 1.6;
}
/* Plain lists (no room rows) keep a gold square marker. */
.mmi-desc li:not(:has(.mmi-room)) {
  position: relative;
  padding-left: 1.4em;
}
.mmi-desc li:not(:has(.mmi-room))::before {
  content: "";
  position: absolute;
  left: .2em;
  top: 1.35em;
  width: 6px;
  height: 6px;
  background: var(--mmi-gold);
}
/* A room schedule runs in two columns once there is room for them. */
@media (min-width: 768px) {
  .mmi-desc ul:has(.mmi-room) { columns: 2; column-gap: var(--mmi-space-7); }
  .mmi-desc ul:has(.mmi-room) li { break-inside: avoid; }
}
.mmi-room {
  display: flex;
  align-items: baseline;
  gap: var(--mmi-space-3);
  font-weight: 400;
}
.mmi-room__name {
  font-family: var(--mmi-font-display);
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--mmi-ink);
}
.mmi-room__size {
  margin-left: auto;
  flex: 0 0 auto;
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  color: var(--mmi-red);
  white-space: nowrap;
}
.mmi-desc li strong:not(.mmi-room) { font-weight: 600; color: var(--mmi-ink); }
.mmi-desc a { color: var(--mmi-link); }

/* ---- The enquiry card, sticky beside the text ---------------------------- */
.mmi-enquiry {
  position: sticky;
  top: calc(var(--mmi-header-h, 90px) + var(--mmi-space-5));
  padding: var(--mmi-space-6);
  background: var(--mmi-white);
  border: 1px solid var(--mmi-line);
  border-top: 3px solid var(--mmi-gold);
  border-radius: var(--mmi-radius-lg);
  box-shadow: var(--mmi-shadow-lg);
}
.mmi-enquiry__title {
  margin: 0 0 var(--mmi-space-3);
  font-size: var(--mmi-fs-h3);
}
.mmi-enquiry__lead { font-size: var(--mmi-fs-sm); color: var(--mmi-muted); }
.mmi-enquiry__buttons {
  display: grid;
  gap: var(--mmi-space-2);
}
.mmi-enquiry__buttons .btn { width: 100%; }
/* The contact page's RSForm styling, but in one column and without its card. */
.mmi-enquiry .mmi-contact__form {
  max-width: none;
  margin: var(--mmi-space-5) 0 0;
  padding: var(--mmi-space-5) 0 0;
  background: none;
  border-width: 1px 0 0;
  border-radius: 0;
  box-shadow: none;
}
.mmi-enquiry .mmi-contact__form .formContainer > .row > [class*="col-"] { grid-template-columns: 1fr; }
.mmi-enquiry .mmi-contact__form textarea { min-height: 7rem; }
@media (max-width: 991.98px) {
  .mmi-enquiry { position: static; }
}

/* ---- 4. Gallery ----------------------------------------------------------- */
.mmi-gallery {
  display: grid;
  grid-auto-flow: dense;   /* the large tiles leave no holes behind them */
  grid-template-columns: repeat(2, 1fr);
  gap: var(--mmi-space-2);
}
@media (min-width: 768px) {
  .mmi-gallery { grid-template-columns: repeat(3, 1fr); gap: var(--mmi-space-3); }
  /* Every seventh photo gets double width, so the grid has a rhythm. */
  .mmi-gallery__item:nth-child(7n + 1) { grid-column: span 2; grid-row: span 2; }
}
.mmi-gallery__item {
  position: relative;
  overflow: hidden;
  border-radius: var(--mmi-radius);
  aspect-ratio: 3 / 2;
  background: var(--mmi-stone-deep);
}
.mmi-gallery__item:nth-child(7n + 1) { aspect-ratio: auto; }
.mmi-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-gallery__item:hover img { transform: scale(1.05); }
.mmi-gallery:not(.is-open) .mmi-gallery__item.is-extra { display: none; }

/* ---- 5. The area map: duotone tiles, a halo, never the address ----------- */
.mmi-areamap {
  position: relative;
  z-index: 0;
  aspect-ratio: 16 / 10;
  min-height: 18rem;
  border-radius: var(--mmi-radius-lg);
  overflow: hidden;
  background: var(--mmi-stone-deep);
  box-shadow: var(--mmi-shadow-sm), 0 0 0 1px var(--mmi-line);
}
.mmi-areamap .leaflet-tile-pane {
  filter: grayscale(1) sepia(.12) contrast(.92) brightness(1.05);   /* warm grey; the halo carries the colour */
}
.mmi-areamap .leaflet-control-attribution {
  font-size: 10px;
  background: rgba(255, 255, 255, .75);
}
.mmi-areamap .leaflet-control-zoom a { color: var(--mmi-ink); }
.mmi-areamap__label {
  padding: .35rem .8rem;
  border: 0;
  border-radius: var(--mmi-radius-pill);
  background: var(--mmi-red);
  color: var(--mmi-white);
  font-family: var(--mmi-font-body);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  box-shadow: var(--mmi-shadow-sm);
}
.mmi-areamap__label::before { display: none; }

/* ---- 6. Similar properties: the listing card, simpler ---------------------- */
.mmi-detail__related .mmi-prop__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-detail__related .mmi-prop:hover .mmi-prop__img { transform: scale(1.04); }

/* ---- Lightbox: browsing a gallery ---------------------------------------- */
.mmi-lightbox__nav {
  position: absolute;
  top: 50%;
  width: 52px;
  height: 52px;
  margin-top: -26px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .4);
  border-radius: 50%;
  background: transparent;
  color: var(--mmi-white);
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: var(--mmi-transition);
}
.mmi-lightbox__nav:hover { background: var(--mmi-white); color: var(--mmi-red); }
.mmi-lightbox__nav--prev { left: var(--mmi-space-4); }
.mmi-lightbox__nav--next { right: var(--mmi-space-4); }
.mmi-lightbox__count {
  position: absolute;
  left: 50%;
  bottom: var(--mmi-space-4);
  transform: translateX(-50%);
  color: var(--mmi-on-dark);
  font-size: var(--mmi-fs-sm);
  font-variant-numeric: lining-nums tabular-nums;
}
.mmi-lightbox__caption {
  position: absolute;
  top: var(--mmi-space-4);
  left: var(--mmi-space-5);
  right: 4.5rem;
  margin: 0;
  font-family: var(--mmi-font-display);
  font-size: 1.5rem;
  line-height: 1.2;
  color: var(--mmi-white);
}
@media (max-width: 575.98px) {
  .mmi-lightbox { padding: var(--mmi-space-3); }
  .mmi-lightbox__nav { top: auto; bottom: var(--mmi-space-3); margin-top: 0; width: 44px; height: 44px; }
}

/* ---- Features in the title panel: pool, guesthouse, outbuildings ---------- */
.mmi-detail__features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--mmi-space-2);
  margin: var(--mmi-space-4) 0 0;
  padding: 0;
  list-style: none;
}
.mmi-detail__features li {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  padding: .35rem .8rem;
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius-pill);
  background: var(--mmi-white);
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-ink);
}
.mmi-detail__features .fa-solid { font-size: .8rem; color: var(--mmi-gold); }

/* ---- Distances beside the map ------------------------------------------- */
.mmi-distances {
  margin: var(--mmi-space-5) 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid var(--mmi-line);
}
.mmi-distances li {
  display: flex;
  align-items: center;
  gap: var(--mmi-space-3);
  padding: var(--mmi-space-3) 0;
  border-bottom: 1px solid var(--mmi-line);
}
.mmi-distances .fa-solid { width: 1.2rem; text-align: center; color: var(--mmi-gold); }
.mmi-distances strong {
  margin-left: auto;
  font-variant-numeric: lining-nums;
  color: var(--mmi-ink);
}

/* ---- Energy performance (DPE / GES) -------------------------------------
   The official colour scales; each class a bar, longer as the class gets
   worse, the property's own class picked out with its value. */
.mmi-energy {
  margin-top: var(--mmi-space-7);
  padding-top: var(--mmi-space-6);
  border-top: 1px solid var(--mmi-line);
}
.mmi-energy__title { font-size: var(--mmi-fs-h3); margin-bottom: var(--mmi-space-5); }
.mmi-energy__labels {
  display: grid;
  gap: var(--mmi-space-6);
}
@media (min-width: 768px) {
  .mmi-energy__labels { grid-template-columns: 1fr 1fr; }
}
.mmi-scale { margin: 0; }
.mmi-scale figcaption {
  margin-bottom: var(--mmi-space-3);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
  color: var(--mmi-muted);
}
.mmi-scale ol { margin: 0; padding: 0; list-style: none; display: grid; gap: 3px; }
.mmi-scale li {
  display: flex;
  align-items: center;
  gap: var(--mmi-space-3);
  height: 1.6rem;
}
.mmi-scale li span {
  width: var(--w);
  height: 100%;
  display: flex;
  align-items: center;
  padding-left: .6rem;
  border-radius: 2px 999px 999px 2px;
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  color: var(--mmi-white);
  opacity: .45;
}
.mmi-scale li.is-current { height: 2.2rem; }
.mmi-scale li.is-current span { opacity: 1; box-shadow: 0 0 0 2px var(--mmi-white), 0 0 0 3px var(--mmi-ink); font-size: var(--mmi-fs-base); }
.mmi-scale li em {
  font-style: normal;
  font-size: var(--mmi-fs-sm);
  font-weight: 700;
  font-variant-numeric: lining-nums;
  color: var(--mmi-ink);
  white-space: nowrap;
}
.mmi-scale--dpe .mmi-scale__A span { background: #009c6d; }
.mmi-scale--dpe .mmi-scale__B span { background: #52b153; }
.mmi-scale--dpe .mmi-scale__C span { background: #78bd76; }
.mmi-scale--dpe .mmi-scale__D span { background: #f4e70f; color: var(--mmi-ink); }
.mmi-scale--dpe .mmi-scale__E span { background: #f0b50f; color: var(--mmi-ink); }
.mmi-scale--dpe .mmi-scale__F span { background: #eb8235; }
.mmi-scale--dpe .mmi-scale__G span { background: #d7221f; }
.mmi-scale--ges .mmi-scale__A span { background: #a4dbf8; color: var(--mmi-ink); }
.mmi-scale--ges .mmi-scale__B span { background: #8cb4d3; color: var(--mmi-ink); }
.mmi-scale--ges .mmi-scale__C span { background: #7792b1; }
.mmi-scale--ges .mmi-scale__D span { background: #606f8f; }
.mmi-scale--ges .mmi-scale__E span { background: #4d5271; }
.mmi-scale--ges .mmi-scale__F span { background: #393551; }
.mmi-scale--ges .mmi-scale__G span { background: #281b35; }
.mmi-energy__status,
.mmi-energy__note { font-size: var(--mmi-fs-sm); color: var(--mmi-muted); margin: var(--mmi-space-4) 0 0; }
.mmi-energy__excessive {
  margin: var(--mmi-space-5) 0 0;
  padding: var(--mmi-space-3) var(--mmi-space-4);
  border-left: 3px solid #d7221f;
  background: var(--mmi-stone);
  font-weight: 600;
  color: var(--mmi-ink);
}

/* ---- RSForm radios and checkboxes ---------------------------------------
   Bootstrap's inline checks float the box and wrap the label under it in a
   narrow card. Here: box and text side by side, options one per line. */
.mmi-contact__form fieldset.rsfp-fieldset { display: block; margin: 0; padding: 0; border: 0; min-width: 0; }
.mmi-contact__form .form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--mmi-space-3);
  margin: 0 0 var(--mmi-space-2);
  padding-left: 0;
}
.mmi-contact__form .form-check-inline { display: flex; margin-right: 0; }
.mmi-contact__form .form-check-input {
  float: none;
  flex: 0 0 auto;
  width: 1.15rem;
  height: 1.15rem;
  margin: .2rem 0 0;
  border-color: var(--mmi-muted);
  cursor: pointer;
}
.mmi-contact__form .form-check-input:checked { background-color: var(--mmi-red); border-color: var(--mmi-red); }
.mmi-contact__form .form-check-input:focus { border-color: var(--mmi-gold); box-shadow: 0 0 0 .2rem rgba(184, 151, 90, .25); }
.mmi-contact__form .form-check-label {
  font-size: var(--mmi-fs-sm);
  line-height: 1.5;
  color: var(--mmi-body);
  cursor: pointer;
}
/* RSForm prints "Invalid Input" under every field and hides it with its own
   stylesheet; keep it hidden until a field really fails. */
.mmi-contact__form .formNoError { display: none; }
.mmi-contact__form .formError { display: block; }

/* ---- The enquiry form inside the property card: compact -----------------
   Labels move into the fields as placeholders (template.js copies them, so
   RSForm's translations still apply) and stay for screen readers only. The
   two "I would like to" options become a pair of buttons. */
.mmi-enquiry .rsform-type-textbox .formControlLabel,
.mmi-enquiry .rsform-type-textarea .formControlLabel,
.mmi-enquiry .rsform-type-radiogroup .formControlLabel,
.mmi-enquiry .rsform-type-checkboxgroup .formControlLabel,
.mmi-enquiry .rsform-type-submitbutton .formControlLabel {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
.mmi-enquiry .mmi-contact__form .rsform-block { margin: 0 0 var(--mmi-space-2); }
.mmi-enquiry .mmi-contact__form .form-control {
  min-height: 2.9rem;
  padding: .6rem .9rem;
  background: var(--mmi-stone);
  border: 1px solid transparent;
  border-radius: var(--mmi-radius);
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-ink);
  box-shadow: none;
}
.mmi-enquiry .mmi-contact__form .form-control::placeholder { color: var(--mmi-muted); opacity: 1; }
.mmi-enquiry .mmi-contact__form .form-control:focus { background: var(--mmi-white); border-color: var(--mmi-gold); box-shadow: 0 0 0 .2rem rgba(184, 151, 90, .2); }
.mmi-enquiry .mmi-contact__form textarea.form-control { min-height: 6.5rem; }

/* Interest: two buttons side by side. */
.mmi-enquiry .rsform-type-radiogroup fieldset.rsfp-fieldset {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--mmi-space-2);
}
.mmi-enquiry .rsform-type-radiogroup .form-check { position: relative; margin: 0; }
.mmi-enquiry .rsform-type-radiogroup .form-check-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
}
.mmi-enquiry .rsform-type-radiogroup .form-check-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 2.9rem;
  padding: .45rem .6rem;
  border: 1px solid var(--mmi-line);
  border-radius: var(--mmi-radius);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.3;
  text-align: center;
  color: var(--mmi-body);
  background: var(--mmi-white);
  transition: var(--mmi-transition);
}
/* An empty ring before each choice; the chosen one fills in solid with a white tick. */
.mmi-enquiry .rsform-type-radiogroup .form-check-label::before {
  content: "";
  flex: 0 0 auto;
  width: 1.05rem;
  height: 1.05rem;
  margin-right: .5rem;
  border: 1.5px solid var(--mmi-muted);
  border-radius: 50%;
  font-family: var(--fa-style-family-classic, "Font Awesome 6 Pro");
  font-weight: 900;
  font-size: 1.05rem;
  line-height: 1;
}
.mmi-enquiry .rsform-type-radiogroup .form-check:hover .form-check-label { border-color: var(--mmi-gold); }
.mmi-enquiry .rsform-type-radiogroup .form-check-input:checked + .form-check-label {
  background: var(--mmi-red);
  border-color: var(--mmi-red);
  color: var(--mmi-white);
}
.mmi-enquiry .rsform-type-radiogroup .form-check-input:checked + .form-check-label::before {
  content: "\f058"; /* circle-check */
  border: 0;
  width: auto;
  height: auto;
}
.mmi-enquiry .rsform-type-radiogroup .form-check-input:focus-visible + .form-check-label { box-shadow: 0 0 0 .2rem rgba(184, 151, 90, .35); }

/* Consent: small print. */
.mmi-enquiry .rsform-type-checkboxgroup { margin-top: var(--mmi-space-3) !important; }
.mmi-enquiry .rsform-type-checkboxgroup .form-check-label { font-size: var(--mmi-fs-xs); color: var(--mmi-muted); }
.mmi-enquiry .rsform-type-submitbutton { margin-top: var(--mmi-space-4) !important; }

/* =========================================================================
   Home: "How can we help?" (snippets/home-paths.php)
   Three tall photo tiles, text at the foot over a dark fade. Prestige gets a
   fine gold inner frame and a count.
   ========================================================================= */
.mmi-paths .row { --bs-gutter-x: 1.25rem; --bs-gutter-y: 1.25rem; }
.mmi-path {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: 30rem;
  height: 100%;
  padding: var(--mmi-space-6);
  overflow: hidden;
  border-radius: var(--mmi-radius-lg);
  background: var(--mmi-charcoal);
  color: var(--mmi-white);
  text-decoration: none;
}
.mmi-path:hover, .mmi-path:focus-visible { color: var(--mmi-white); }
.mmi-path:focus-visible { outline: 3px solid var(--mmi-gold); outline-offset: 3px; }
.mmi-path__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--mmi-slow);
}
.mmi-path::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(var(--mmi-scrim), 0) 25%, rgba(var(--mmi-scrim), .45) 55%, rgba(var(--mmi-scrim), .9) 100%);
}
.mmi-path > *:not(img):not(.mmi-path__count) { position: relative; z-index: 1; }
.mmi-path:hover .mmi-path__img { transform: scale(1.05); }
.mmi-path .mmi-eyebrow { color: var(--mmi-gold-light); margin-bottom: var(--mmi-space-2); }
.mmi-path__title {
  margin: 0 0 var(--mmi-space-3);
  font-size: clamp(1.7rem, 1.3rem + 1vw, 2.3rem);
  line-height: 1.1;
  color: var(--mmi-white);
}
.mmi-path__text {
  max-width: 30ch;
  margin: 0 0 var(--mmi-space-5);
  font-size: var(--mmi-fs-sm);
  color: var(--mmi-on-dark);
}
.mmi-path__more {
  display: inline-flex;
  align-items: center;
  gap: .5em;
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-wide);
  text-transform: uppercase;
}
.mmi-path__more .fa-solid { transition: transform var(--mmi-transition); }
.mmi-path:hover .mmi-path__more .fa-solid { transform: translateX(4px); }
.mmi-path--prestige::before {
  content: "";
  position: absolute;
  inset: var(--mmi-space-3);
  z-index: 1;
  border: 1px solid rgba(215, 189, 136, .55);
  border-radius: calc(var(--mmi-radius-lg) - 4px);
  pointer-events: none;
}
.mmi-path__count {
  position: absolute;
  top: 1.75rem;
  left: 1.75rem;
  z-index: 2;
  padding: .35rem .8rem;
  border-radius: var(--mmi-radius-pill);
  background: var(--mmi-gold);
  color: var(--mmi-ink);
  font-size: var(--mmi-fs-xs);
  font-weight: 700;
  letter-spacing: var(--mmi-ls-nav);
  text-transform: uppercase;
}
@media (max-width: 991.98px) {
  .mmi-path { min-height: 22rem; }
}