@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:ital,wght@0,100..900;1,100..900&display=swap');

/* ==========================================================================
   MORINGA MEDIA TECH — main.css
   One stylesheet. Load after bootstrap.min.css and nothing else.

   CONTENTS
     01  Tokens ................ colour, type, space, shape, motion (:root)
     02  Legacy aliases ........ old variable names kept alive
     03  Bootstrap bridge ...... points Bootstrap's vars at our tokens
     04  Base .................. reset, element defaults, smooth scroll
     05  Typography ............ .mm-display, .mm-heading, .mm-body ...
     06  Buttons ............... .btn overrides and .mm-btn
     07  Layout ................ container, section, bands
     08  Frames ................ media containers, overlays, annotation pills
     09  Cards ................. perk, stat, tile button
     10  Strips ................ notice bar, marquee, chips
     11  Placeholder visuals ... delete when Figma artwork lands
     12  Navigation ............ floating logo + button, fading links, mobile sheet
     13  Footer ................ rounded panel over a dark base
     14  Motion utilities ...... reveals, image unmask, parallax, page curtain
     15  Page hero ............. inner-page heroes (.mm-hero, .mm-page-hero), jump link, roles
     16  Home view ............. video hero, stage photos, portfolio, team
     17  Shared view parts ..... fx frames, FAQ, contact block, forms
     18  Accessibility
     19  Legal pages

   RULE OF THUMB: no raw hex below section 01. If you need a colour, add a
   token. That is what makes re-theming a one-block edit.
   ========================================================================== */


/* ==========================================================================
   01  TOKENS
   ========================================================================== */
:root {

  /* --- brand ramp, sampled from the Moringa leaf mark ------------------- */
  --mm-green-950: #05130E;
  /* near-black with a green cast — dark bands  */
  --mm-green-900: #072A1F;
  --mm-green-800: #0B4A36;
  --mm-green-700: #0E6B4C;
  /* darkest usable for TEXT and solid buttons  */
  --mm-green-600: #128A61;
  --mm-green-500: #16B67F;
  /* mid brand green — body of the mark         */
  --mm-green-400: #10CE8E;
  /* SMALL ACCENTS ONLY — dots, rings, gradient */
  --mm-green-300: #0FE39F;
  /* stops on dark. Never a large light surface. */

  /* --- warm stone: all light surfaces ----------------------------------
       A saturated green at 95% lightness always reads mint, and mint reads
       clinical. Stone keeps the light end warm so the green stays an accent
       rather than becoming the whole environment. */
  --mm-stone-50: #FAF8F4;
  /* faintest wash — hovers, chips              */
  --mm-stone-100: #F2EEE7;
  /* tint surface — cards, media frames         */
  --mm-stone-200: #E6DFD4;
  --mm-stone-300: #D4CBBC;

  /* CONTRAST — these are requirements, not preferences
         --mm-green-700 on white ...... 5.8:1  OK for text and buttons
         white on --mm-green-700 ...... 5.8:1  OK for button labels
         --mm-green-500 on white ...... 2.9:1  large display text only
         --mm-green-300 on white ...... 1.8:1  NEVER text. Fills only.       */

  /* --- neutrals, warmed to sit on stone rather than mint ---------------- */
  --mm-paper: #F7F5F0;
  /* page background                            */
  --mm-white: #FFFFFF;
  --mm-ink: #101A16;
  /* primary text                               */
  --mm-ink-soft: #3A423D;
  /* secondary text                             */
  --mm-muted: #5A625C;
  /* body copy, captions                        */
  --mm-faint: #A0A49C;
  /* de-emphasised, body copy on dark           */
  --mm-line: #E4DDD2;
  /* hairlines and card borders                 */
  --mm-line-soft: #EFEAE2;

  /* --- semantic aliases: use THESE in rules, not the ramp --------------- */
  --mm-surface: var(--mm-white);
  --mm-surface-page: var(--mm-paper);
  --mm-surface-tint: var(--mm-stone-100);
  --mm-surface-wash: var(--mm-stone-50);
  --mm-surface-inverse: var(--mm-green-950);

  --mm-text: var(--mm-ink);
  --mm-text-secondary: var(--mm-ink-soft);
  --mm-text-muted: var(--mm-muted);
  --mm-text-on-inverse: var(--mm-white);
  --mm-text-muted-on-inverse: var(--mm-faint);
  --mm-text-link: var(--mm-green-700);
  --mm-text-link-hover: var(--mm-green-800);

  --mm-action: var(--mm-green-700);
  --mm-action-hover: var(--mm-green-800);
  --mm-action-label: var(--mm-white);
  --mm-emphasis: var(--mm-green-700);
  /* eyebrows, numerals —
                                   was green-500 at 2.9:1, which fails for
                                   14px uppercase text                       */
  --mm-focus-ring: var(--mm-green-500);

  /* errors only: a warm red that sits with the greens, never used for text
     on light surfaces */
  --mm-danger: #D2564A;

  /* green, very quietly: selected states, icon tiles and soft panels, so
     highlights read as the brand rather than as beige */
  --mm-tint-brand: rgba(14, 107, 76, .08);
  --mm-surface-brand: color-mix(in srgb, var(--mm-green-700) 6%, var(--mm-paper));
  /* decorative, exempt   */

  /* --- on photography ----------------------------------------------------
       Lines and type laid over images and dark bands. Alpha steps of white
       and of --mm-green-950, so photos always grade toward the brand. */
  --mm-line-on-inverse: rgba(255, 255, 255, .14);
  --mm-text-on-photo: rgba(255, 255, 255, .82);
  --mm-glass: rgba(255, 255, 255, .12);
  --mm-glass-line: rgba(255, 255, 255, .35);
  --mm-icon-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h16'/%3E%3Cpath d='m13 5 7 7-7 7'/%3E%3C/svg%3E");
  /* the button arrow, used as a mask so it takes the text colour */
  --mm-surface-inverse-raised: rgba(255, 255, 255, .06);
  /* a card sitting on a dark band */

  --mm-gradient-brand: linear-gradient(135deg, var(--mm-green-800), var(--mm-green-500));
  --mm-gradient-soft: linear-gradient(135deg, var(--mm-stone-200), var(--mm-stone-50));
  --mm-gradient-text: linear-gradient(90deg, var(--mm-green-200), var(--mm-green-400), var(--mm-green-300));
  --mm-gradient-deep:
    radial-gradient(60% 70% at 20% 20%, rgba(22, 182, 127, .38), transparent 60%),
    radial-gradient(70% 70% at 85% 80%, rgba(15, 227, 159, .28), transparent 60%),
    linear-gradient(140deg, #0B3427, #05130E);

  /* The footer panel: starts on exactly the page colour, so it rises out
     of whatever is above with no line, settles into stone, and carries a
     soft green glow behind the statement. */
  --mm-gradient-footer-panel:
    radial-gradient(55% 35% at 22% 72%, rgba(22, 182, 127, .09), transparent 70%),
    radial-gradient(40% 30% at 88% 82%, rgba(15, 227, 159, .05), transparent 70%),
    linear-gradient(180deg, var(--mm-paper) 0%, var(--mm-stone-100) 45%);

  /* hero grade: darkest where the type sits, cooled toward green at the left */
  --mm-shade-hero:
    linear-gradient(to top, rgba(5, 19, 14, .88) 0%, rgba(5, 19, 14, .55) 32%, rgba(5, 19, 14, .08) 62%, rgba(5, 19, 14, .25) 100%),
    linear-gradient(to right, rgba(7, 42, 31, .45), transparent 60%);
  /* band grade: any stock photo becomes on-palette under this */
  --mm-shade-band:
    linear-gradient(180deg, rgba(5, 19, 14, .72), rgba(5, 19, 14, .9)),
    rgba(11, 74, 54, .55);
  --mm-shade-caption: linear-gradient(to top, rgba(5, 19, 14, .55), transparent);

  /* --- type ------------------------------------------------------------- */
  /* One family. --mm-font-display is the large-type voice (headlines,
     titles, big numerals); it was the Newsreader serif. --mm-font-serif is
     kept as an alias so older markup still resolves. */
  --mm-font-sans: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  --mm-font-display: var(--mm-font-sans);
  --mm-font-serif: var(--mm-font-display);
  --mm-weight-display: 500;
  /* large type sits heavier and tighter than body */
  --mm-weight-body: 400;

  --mm-text-hero: clamp(2.75rem, 6.2vw, 5.5rem);
  /* the home hero headline only: a step up from every other page title */
  --mm-text-page-title: clamp(2.5rem, 5.4vw, 5rem);
  /* inner-page headline (About, Careers, FAQ) */
  --mm-text-display: clamp(2.5rem, 6.4vw, 4.375rem);
  --mm-text-heading: clamp(1.75rem, 3.6vw, 3.125rem);
  --mm-text-row: clamp(1.75rem, 3.6vw, 3rem);
  --mm-text-title-lg: clamp(1.875rem, 3.2vw, 2.5rem);
  --mm-text-title-sm: clamp(1.25rem, 1.8vw, 1.5rem);
  --mm-text-lead: clamp(1.125rem, 1.4vw, 1.25rem);
  --mm-text-body: clamp(1rem, 1.1vw, 1.125rem);
  --mm-text-ui: 1rem;
  --mm-text-caption: .875rem;

  --mm-leading-tight: 1;
  --mm-leading-snug: 1.15;
  --mm-leading-body: 1.6;
  --mm-tracking-flat: -.025em;
  --mm-tracking-display: -.04em;

  /* --- space ------------------------------------------------------------ */
  --mm-space-section: clamp(3.75rem, 9vw, 10rem);
  --mm-space-section-tight: clamp(3rem, 6vw, 6.25rem);
  --mm-space-block: clamp(1.5rem, 3vw, 2.5rem);
  --mm-container-max: 1312px;
  --mm-container-gutter: 16px;
  --mm-nav-h: 68px;
  /* height of the floating nav bar itself */
  --mm-nav-offset: clamp(.75rem, 1.6vw, 1.5rem);
  /* air between the top of the page and the bar */
  --mm-frame-inset: clamp(.5rem, 1.1vw, 1rem);
  /* gap between a full-bleed frame and the viewport edge */

  /* --- shape and depth --------------------------------------------------- */
  --mm-radius-photo: clamp(16px, 1.8vw, 28px);
  /* large photographic frames */
  --mm-radius-footer: clamp(28px, 4.5vw, 72px);
  /* the footer panel's big soft corners */
  --mm-radius-nav: 22px;
  --mm-radius-hero: 26px;
  --mm-radius-lg: 24px;
  --mm-radius-md: 16px;
  --mm-radius-sm: 12px;
  --mm-radius-xs: 8px;
  --mm-radius-pill: 999rem;

  --mm-shadow-card: 0 1px 2px rgba(16, 26, 22, .04), 0 12px 32px -12px rgba(16, 26, 22, .12);
  --mm-shadow-lift: 0 20px 50px -24px rgba(16, 26, 22, .35);

  /* --- motion ------------------------------------------------------------ */
  --mm-ease: cubic-bezier(.4, 0, .2, 1);
  --mm-ease-out: cubic-bezier(.22, 1, .36, 1);
  /* long, soft landing — reveals, wipes, hovers on large surfaces */
  --mm-duration-fast: .18s;
  --mm-duration-mid: .3s;
  --mm-duration-slow: .55s;
  --mm-duration-reveal: 1.1s;
}

@media (max-width: 991.98px) {
  :root { --mm-nav-h: 60px; }
}


/* ==========================================================================
     02  LEGACY ALIASES
     The older variable names, re-pointed at the current system. Existing views
     (FAQ, contact, membership) keep working and pick up the palette with no
     markup changes. Retire these as each view is migrated to --mm-*.
     ========================================================================== */
:root {
  --primary: var(--mm-green-700);
  --primary-hover: var(--mm-green-800);
  --accent: var(--mm-green-700);
  --accent-hover: var(--mm-green-800);

  --paper: var(--mm-paper);
  --light: var(--mm-stone-50);
  --lightgrey: var(--mm-line-soft);
  --white: var(--mm-white);

  --tint-blue: var(--mm-stone-100);
  --tint-clay: var(--mm-stone-50);
  --tint-sage: var(--mm-stone-100);
  --line: var(--mm-line);

  --dark: var(--mm-ink);
  --grey: var(--mm-muted);

  --fs-h1: var(--mm-text-display);
  --fs-h2: var(--mm-text-heading);
  --fs-h3: var(--mm-text-title-lg);
  --fs-h4: var(--mm-text-title-sm);
  --fs-h5: clamp(1.1rem, 3vw, 1.4rem);

  --fs-base: var(--mm-text-ui);
  --fs-md: .9rem;
  --fs-sm: var(--mm-text-caption);
  --fs-xs: .75rem;

  --fw-300: 300;
  --fw-400: 400;
  --fw-500: 500;
  --fw-600: 600;
  --fw-700: 700;
  --fw-800: 800;
  --fw-900: 900;

  --section-p-xl: clamp(7em, 11vw, 13em);
  --section-p-lg: var(--mm-space-section);
  --section-p-base: clamp(3.5em, 7vw, 7em);
  --section-p-md: var(--mm-space-section-tight);
  --section-p-sm: clamp(2em, 3.5vw, 3.5em);
  --section-p-xs: clamp(1em, 2vw, 2em);
  --section-p-xxs: clamp(.5em, 1.5vw, 1.5em);

  --br-base: var(--mm-radius-md);
  --br-sm: var(--mm-radius-xs);
  --br-rd: var(--mm-radius-pill);
  --br-frame: 0;

  --transition: all var(--mm-duration-mid) ease-in-out;
  --transition-slow: all .4s ease-in-out;
}


/* ==========================================================================
     03  BOOTSTRAP BRIDGE
     Bootstrap 5.3 runs on its own CSS variables, so pointing them here means
     .btn-primary, .text-primary, .border and .link-primary inherit the brand
     with no Sass rebuild and no !important.
     ========================================================================== */
:root {
  --bs-primary: var(--mm-green-700);
  --bs-primary-rgb: 14, 107, 76;
  --bs-primary-text-emphasis: var(--mm-green-800);
  --bs-primary-bg-subtle: var(--mm-stone-100);
  --bs-primary-border-subtle: var(--mm-stone-200);

  --bs-body-color: var(--mm-ink);
  --bs-body-color-rgb: 16, 26, 22;
  --bs-body-bg: var(--mm-paper);
  --bs-secondary-color: var(--mm-muted);

  --bs-border-color: var(--mm-line);
  --bs-border-radius: var(--mm-radius-xs);
  --bs-border-radius-lg: var(--mm-radius-md);
  --bs-border-radius-xl: var(--mm-radius-lg);
  --bs-border-radius-pill: var(--mm-radius-pill);

  --bs-link-color: var(--mm-text-link);
  --bs-link-color-rgb: 14, 107, 76;
  --bs-link-hover-color: var(--mm-text-link-hover);

  --bs-font-sans-serif: var(--mm-font-sans);
  --bs-body-font-family: var(--mm-font-sans);
  --bs-focus-ring-color: rgba(22, 182, 127, .35);
}


/* ==========================================================================
   04  BASE
   ========================================================================== */
html {
  color: var(--mm-text);
}

/* clip, never hidden: `hidden` makes body a scroll container, which silently
   breaks every position:sticky on the site. Do not change this back. */
html, body {
  overflow-x: clip;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  padding: 0 !important;
  font-family: var(--mm-font-sans);
  font-optical-sizing: auto;
  font-weight: var(--mm-weight-body);
  background: var(--mm-surface-page);
}

main {
  flex: 1;
}

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

/* No underlines anywhere: links and buttons carry their own hover
   treatments. This overrides Bootstrap's reboot, which underlines every
   link and keeps it on hover. */
a,
a:hover,
a:focus,
a:focus-visible,
button,
.btn,
.mm-btn,
.mm-link,
.nav-link {
  text-decoration: none;
}

section {
  position: relative;
  padding-block: var(--mm-space-section-tight);
}

.section-lg {
  padding-block: var(--mm-space-section);
}

.head {
  position: relative;
}

.head-xl {
  padding: var(--section-p-xl) 0;
}

.head-lg {
  padding: var(--mm-space-section) 0;
}

.head-md {
  padding: var(--mm-space-section-tight) 0;
}

.head-sm {
  padding: var(--section-p-sm) 0 var(--mm-space-section-tight);
}

.message {
  position: absolute;
  top: 10%;
  z-index: 99;
  left: 40px;
  right: 40px;
  margin: auto;
}

/* --- smooth scroll -------------------------------------------------------
   Native smooth scrolling for in-page anchors everywhere. Where Lenis runs
   (home), it adds .lenis to <html> and takes over; the native behaviour
   must step aside or the two fight on every anchor jump. */
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* in-page anchors stop below the floating nav, not under it */
html {
  scroll-padding-top: calc(var(--mm-nav-offset) + var(--mm-nav-h) + 1.5rem);
}

html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }


/* ==========================================================================
   05  TYPOGRAPHY
   Class names describe ROLE, not pixel size, so changing the scale in
   section 01 never leaves a class called .t40 rendering at 32px.
   ========================================================================== */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5 {
  font-family: var(--mm-font-sans);
  font-weight: 500;
  letter-spacing: -.015em;
  line-height: 1.14;
  color: var(--mm-text);
}

h1, .h1 {
  font-size: var(--fs-h1);
}

h2, .h2 {
  font-size: var(--fs-h2);
}

h3, .h3 {
  font-size: var(--fs-h3);
}

h4, .h4 {
  font-size: var(--fs-h4);
}

h5, .h5 {
  font-size: var(--fs-h5);
}

p, .p {
  font-family: var(--mm-font-sans);
  font-size: var(--fs-base);
  line-height: 1.75;
  color: var(--mm-text-muted);
}

.text-primary {
  color: var(--mm-text-link) !important;
}

.text-dark {
  color: var(--mm-text);
}

.text-white {
  color: var(--mm-white) !important;
}

/* a .text-white heading still lets its second line drop back */
.text-white .mm-heading__line--serif {
  color: color-mix(in srgb, var(--mm-white) 55%, transparent) !important;
}

.text-grey {
  color: var(--mm-text-muted);
}

/* --- design-system type ---------------------------------------------- */
.mm-serif {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
}

.mm-display {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: var(--mm-text-display);
  line-height: var(--mm-leading-tight);
  letter-spacing: var(--mm-tracking-flat);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

/* Two-line heading: sans on top, light serif beneath. The house device. */
.mm-heading {
  margin: 0;
  line-height: var(--mm-leading-tight);
  text-align: center;
}

.mm-heading--start {
  text-align: left;
}

.mm-heading__line {
  display: block;
  font-family: var(--mm-font-display);
  font-size: var(--mm-text-heading);
  line-height: 1.02;
  letter-spacing: var(--mm-tracking-display);
  font-weight: var(--mm-weight-display);
  color: inherit;
}

/* The house device, re-voiced for one family: the second line drops back
   in tone rather than switching typeface. color-mix with currentColor keeps
   it right on light and dark bands alike. */
.mm-heading__line--serif {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  color: color-mix(in srgb, currentColor 52%, transparent);
}

.mm-heading__line--accent {
  background: var(--mm-gradient-text);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.mm-lead {
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-secondary);
  max-width: 50rem;
  margin-inline: auto;
}

.mm-lead--inverse {
  color: var(--mm-text-muted-on-inverse);
}

.mm-lead--light {
  color: var(--mm-text-on-inverse);
}

.mm-title-lg {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: var(--mm-text-title-lg);
  line-height: var(--mm-leading-snug);
  letter-spacing: var(--mm-tracking-flat);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-title-sm {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: var(--mm-text-title-sm);
  line-height: 1.25;
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-title-sm--inverse {
  color: var(--mm-text-on-inverse);
}

.mm-body {
  font-size: var(--mm-text-body);
  line-height: var(--mm-leading-body);
  color: var(--mm-text-muted);
  margin: 0;
}

.mm-body--inverse {
  color: var(--mm-text-muted-on-inverse);
}

.mm-caption {
  font-size: var(--mm-text-caption);
  line-height: 1.3;
}

.mm-quote {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.5rem, 3vw, 2.5rem);
  line-height: var(--mm-leading-snug);
  margin: 0;
  color: inherit;
  /* takes colour from the band it sits in */
}

.mm-eyebrow {
  font-size: var(--mm-text-caption);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--mm-emphasis);
}

.mm-eyebrow--sm { font-size: .7rem; letter-spacing: .16em; }


/* ==========================================================================
   06  BUTTONS
   ========================================================================== */
.btn {
  position: relative;
  width: fit-content;
  padding: 1rem 1.6rem;
  line-height: 1;
  font-family: var(--mm-font-sans);
  font-size: var(--fs-base);
  font-weight: 500 !important;
  border-radius: var(--mm-radius-xs);
  transition: var(--transition);
}

.btn-primary {
  background-color: var(--mm-action);
  border-color: var(--mm-action);
  color: var(--mm-action-label);
}

.btn-primary:hover {
  background-color: var(--mm-action-hover);
  border-color: var(--mm-action-hover);
  color: var(--mm-action-label);
}

.btn-secondary {
  background-color: var(--mm-emphasis);
  border-color: var(--mm-emphasis);
  color: var(--mm-ink);
}

.btn-secondary:hover {
  background-color: var(--mm-green-600);
  border-color: var(--mm-green-600);
  color: var(--mm-white);
}

.btn-outline-primary {
  background-color: transparent;
  border-color: var(--mm-action);
  color: var(--mm-text-link);
}

.btn-outline-primary:hover {
  background-color: var(--mm-action);
  border-color: var(--mm-action);
  color: var(--mm-action-label);
}

.btn-light {
  background-color: var(--mm-white);
  border-color: var(--mm-white);
  color: var(--mm-text-link);
}

.btn-light:hover {
  background-color: var(--mm-surface-wash);
  border-color: var(--mm-surface-wash);
  color: var(--mm-text-link);
}

/* design-system button ------------------------------------------------------
   One shape everywhere: a soft rounded rectangle, label left, arrow right.
   The arrow is drawn by CSS (a mask filled with currentColor), so every
   existing .mm-btn picks it up with no markup change. It nudges forward on
   hover. Buttons that carry their own icon, or .mm-btn--plain, skip it. */
.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: .9rem;
  height: 52px;
  padding: 0 1.2rem 0 1.5rem;
  border: 1px solid transparent;
  border-radius: 16px;
  font-family: var(--mm-font-sans);
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color .45s var(--mm-ease-out),
    border-color .45s var(--mm-ease-out),
    color .45s var(--mm-ease-out);
}

.mm-btn::after {
  content: "";
  flex: 0 0 auto;
  width: 18px;
  height: 18px;
  background: currentColor;
  -webkit-mask: var(--mm-icon-arrow) center / contain no-repeat;
  mask: var(--mm-icon-arrow) center / contain no-repeat;
  transition: transform .5s var(--mm-ease-out);
}

.mm-btn:hover::after,
.mm-btn:focus-visible::after {
  transform: translateX(4px);
}

.mm-btn--plain::after,
.mm-btn:has(svg)::after {
  display: none;
}

.mm-btn:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 3px;
}

/* --- colours ---
   primary .... brand green, the default call to action on light pages
   dark ...... ink, for a quieter action on light pages
   light ..... white, for actions over photography, video or dark bands
   secondary . outlined, for the lesser of two actions
   glass ..... translucent, a secondary action over photography */
.mm-btn--primary {
  background: var(--mm-action);
  color: var(--mm-action-label);
}

.mm-btn--primary:hover {
  background: var(--mm-action-hover);
  color: var(--mm-action-label);
}

.mm-btn--dark {
  background: var(--mm-ink);
  color: var(--mm-white);
}

.mm-btn--dark:hover {
  background: var(--mm-green-900);
  color: var(--mm-white);
}

.mm-btn--light,
.mm-btn--inverse {
  background: var(--mm-white);
  color: var(--mm-ink);
}

.mm-btn--light:hover,
.mm-btn--inverse:hover {
  background: var(--mm-stone-100);
  color: var(--mm-ink);
}

.mm-btn--secondary {
  background: transparent;
  color: var(--mm-text);
  border-color: var(--mm-line);
}

.mm-btn--secondary:hover {
  background: var(--mm-surface);
  color: var(--mm-text);
  border-color: var(--mm-stone-300);
}

.mm-btn--glass {
  background: var(--mm-glass);
  color: var(--mm-white);
  border-color: var(--mm-glass-line);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}

.mm-btn--glass:hover {
  background: var(--mm-white);
  color: var(--mm-ink);
  border-color: var(--mm-white);
}

.mm-btn--ghost {
  background: transparent;
  color: var(--mm-text);
}

.mm-btn--ghost:hover {
  background: var(--mm-surface-wash);
  color: var(--mm-text);
}

.mm-btn--outline {
  background: transparent;
  color: var(--mm-text-link);
  border-color: var(--mm-action);
}

.mm-btn--outline:hover {
  background: var(--mm-action);
  color: var(--mm-action-label);
}

/* --- sizes --- */
.mm-btn--sm {
  height: 44px;
  padding: 0 1rem 0 1.2rem;
  border-radius: 14px;
  font-size: .9375rem;
}

.mm-btn--md {
  height: 52px;
}

.mm-btn--lg {
  height: 60px;
  padding: 0 1.4rem 0 1.75rem;
  border-radius: 18px;
  font-size: 1.125rem;
  gap: 1.25rem;
}

.mm-btn--lg::after {
  width: 20px;
  height: 20px;
}

/* full width on mobile, natural width from md up */
.mm-btn--block {
  width: 100%;
}

@media (min-width: 768px) {
  .mm-btn--block {
    width: auto;
  }
}

.mm-link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  font-weight: 600;
  color: var(--mm-text-link);
}

.mm-link:hover {
  color: var(--mm-text-link-hover);
}

@media (prefers-reduced-motion: reduce) {
  .mm-btn::after { transition: none; }
}

/* --- submit button, busy state ------------------------------------------
   The label is swapped rather than hidden, so the button never changes
   width mid-submit. */
.btn--busy {
  position: relative;
  pointer-events: none;
}

.btn--busy .btn__label,
.mm-btn.btn--busy::after {
  visibility: hidden;
}

.btn--busy .btn__spinner {
  display: block;
}

.btn__spinner {
  display: none;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 18px;
  height: 18px;
  margin: -9px 0 0 -9px;
  border-radius: 50%;
  border: 2px solid rgba(255, 255, 255, .35);
  border-top-color: var(--mm-white);
  animation: mm-btn-spin .7s linear infinite;
}

@keyframes mm-btn-spin {
  to {
    transform: rotate(360deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn__spinner {
    animation-duration: 1.4s;
  }
}


/* ==========================================================================
   07  LAYOUT
   Bootstrap keeps the grid, flex, spacing and display utilities. We only
   add what it lacks.
   ========================================================================== */
.mm {
  font-family: var(--mm-font-sans);
  color: var(--mm-text);
  background: var(--mm-surface-page);
  -webkit-font-smoothing: antialiased;
}

/* :where() gives these resets zero weight, so any component that sets its
   own margins wins without a fight. (As plain ".mm p" this rule used to
   strip the spacing from every paragraph in the page.) */
:where(.mm) a {
  text-decoration: none;
}

:where(.mm) p {
  margin: 0;
}

/* Never add overflow, transform or filter to .mm — it would make it the
   scroll container and break every sticky descendant. */

.mm-container {
  width: 100%;
  max-width: var(--mm-container-max);
  margin-inline: auto;
  padding-inline: var(--mm-container-gutter);
}

/* a 12-column grid for editorial splits; Bootstrap's .row fights the
   container gutter and can't place items by line number */
.mm-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  column-gap: 1.5rem;
}

.mm-section {
  padding-block: var(--mm-space-section);
}

.mm-section--tight {
  padding-block: var(--mm-space-section-tight);
}

.mm-section--flush-top {
  padding-top: 0;
}

.mm-band--tint {
  background: var(--mm-surface-tint);
}

.mm-band--wash {
  background: var(--mm-surface-wash);
}

.mm-band--dark {
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
}

.mm-band--gradient {
  position: relative;
  overflow: hidden;
  background: var(--mm-gradient-deep);
  color: var(--mm-text-on-inverse);
}

/* Perks carrying a label and a paragraph rather than a single line.
   .mm-perk is fixed-height by default, which is right for short cards
   and wrong here. */
.mm-band--gradient .mm-perk {
  height: auto;
  min-height: 0;
  width: 100%;
  max-width: none;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 1rem;
  padding: 1.5rem;
  overflow: visible;
}

@media (min-width: 768px) {
  .mm-band--gradient .mm-perk {
    max-width: 18rem;
    flex: 1 1 0;
    padding: 1.75rem;
  }
}

.mm-band__inner {
  position: relative;
  z-index: 1;
  padding-block: clamp(4rem, 10vw, 12.25rem);
}


/* ==========================================================================
   08  FRAMES
   One media container, several ratios. This is where Figma artwork drops in:
   add <img class="mm-frame__fill"> and delete the placeholder markup.
   ========================================================================== */
.mm-frame {
  position: relative;
  width: 100%;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-tint);
  padding: clamp(1rem, 3vw, 2.5rem);
  overflow: hidden;
  display: grid;
  place-items: center;
}

.mm-frame--hero {
  border-radius: var(--mm-radius-hero);
  aspect-ratio: 16 / 7;
  padding: clamp(1rem, 4vw, 3rem);
}

.mm-frame--stage {
  aspect-ratio: 592 / 570;
}

.mm-frame--tile {
  aspect-ratio: 288 / 280;
}

.mm-frame--portrait {
  height: 440px;
  padding: 2rem;
}

.mm-frame--gradient {
  background: var(--mm-gradient-soft);
}

.mm-frame--flush {
  padding: 0;
}

@media (max-width: 767.98px) {
  .mm-frame--hero {
    aspect-ratio: 4 / 5;
  }
}

@media (min-width: 768px) {
  .mm-frame--tile {
    aspect-ratio: 592 / 570;
  }
}

.mm-frame__fill {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Cross-fading contents. The frame never fades or moves, only these layers.
   inset matches the frame padding, since absolute positioning resolves
   against the padding box. */
.mm-frame__layer {
  position: absolute;
  inset: clamp(1rem, 3vw, 2.5rem);
  display: grid;
  place-items: center;
  opacity: 0;
  transform: translateY(12px) scale(.985);
  transition: opacity var(--mm-duration-slow) var(--mm-ease),
    transform var(--mm-duration-slow) var(--mm-ease);
  pointer-events: none;
  will-change: opacity, transform;
}

.mm-frame__layer.is-active {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

.mm-frame__layer>* {
  width: 100%;
}

/* --- image frames with positioned overlay elements ---------------------- */
.mm-frame--media {
  padding: 0;
}

/* A looping video is motion the OS setting should be able to refuse.
   Hiding the video reveals the poster underneath, so the frame still fills. */
@media (prefers-reduced-motion: reduce) {
  .mm-frame__fill video,
  video.mm-frame__fill {
    display: none;
  }
}

/* the fade that covers the loop seam — dips to the poster underneath */
.mm-frame--media video { transition: opacity .45s var(--mm-ease); }
.mm-frame--media.is-looping video { opacity: 0; }

.mm-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.mm-overlay>* {
  pointer-events: auto;
}

/* Position with --mm-x / --mm-y as percentages, stagger with --mm-delay.
   The outer element owns placement, the inner owns motion, so the two
   transforms never fight. */
.mm-overlay__item {
  position: absolute;
  top: var(--mm-y, 50%);
  left: var(--mm-x, 50%);
  transform: translate(-50%, -50%);
  max-width: 62%;
}

.mm-overlay__card {
  opacity: 0;
  animation: mm-rise-in .6s var(--mm-ease) var(--mm-delay, 0s) forwards,
    mm-drift 6s ease-in-out calc(var(--mm-delay, 0s) + .6s) infinite;
}

@keyframes mm-rise-in {
  from {
    opacity: 0;
    transform: translateY(16px) scale(.96);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes mm-drift {
  0%, 100% {
    transform: translateY(0);
  }

  50% {
    transform: translateY(-8px);
  }
}

@media (max-width: 767.98px) {
  .mm-overlay__item {
    max-width: 78%;
  }
}

/* --- floating glass labels over media ----------------------------------
   HTML only. Position with --mm-x / --mm-y percentages, stagger with
   --mm-delay. No connectors: the pills read as ambient annotation rather
   than a diagram, which stays legible however the footage crops. */
.mm-annotate {
  position: absolute;
  inset: 0;
  pointer-events: none;
  display: none;
}

@media (min-width: 992px) {
  .mm-annotate {
    display: block;
  }
}

.mm-annotate__pill {
  position: absolute;
  left: var(--mm-x);
  top: var(--mm-y);
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  padding: .55rem 1.05rem;
  border-radius: var(--mm-radius-pill);
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, .7);
  box-shadow: 0 10px 30px -14px rgba(10, 21, 18, .45);
  font-family: var(--mm-font-sans);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1;
  color: var(--mm-ink);
  white-space: nowrap;

  /* translate lives on the element, so the keyframes below must carry it
        too or the pill jumps to the corner when the animation takes over */
  opacity: 0;
  transform: translate(-50%, -50%);
  animation: mm-pill-in .6s var(--mm-ease) var(--mm-delay, 0s) forwards,
    mm-pill-float 7s ease-in-out calc(var(--mm-delay, 0s) + .6s) infinite;
  /* staged but held until the frame is on screen */
  animation-play-state: paused;
}

.mm-annotate__pill::before {
  content: "";
  flex: 0 0 auto;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mm-green-500);
  box-shadow: 0 0 0 3px rgba(22, 182, 127, .18);
}

.mm-frame--media.is-revealed .mm-annotate__pill { animation-play-state: running; }
.mm-annotate.is-reset .mm-annotate__pill { animation: none !important; }

/* No JS? Show them. Better a static pill than an invisible one. */
.no-js .mm-annotate__pill {
  animation-play-state: running;
}

/* a pill that just sits there: no entrance, no drift. For static images
   where the label is a caption rather than part of a sequence. */
.mm-annotate__pill--static {
  animation: none;
  opacity: 1;
  transform: translate(-50%, -50%);
}

@keyframes mm-pill-in {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-50% + 14px)) scale(.96);
  }

  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@keyframes mm-pill-float {
  0%, 100% {
    transform: translate(-50%, -50%);
  }

  50% {
    transform: translate(-50%, calc(-50% - 7px));
  }
}

@media (max-width: 1199.98px) {
  .mm-annotate__pill {
    font-size: .875rem;
    padding: .45rem .85rem;
  }
}


/* ==========================================================================
   09  CARDS
   ========================================================================== */
.mm-card {
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-lg);
  padding: var(--mm-space-block);
}

.mm-card--lift {
  border-color: transparent;
  box-shadow: var(--mm-shadow-card);
}

/* icon holder on card-based sections */
.mm-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: var(--mm-radius-sm);
  background: var(--mm-surface-wash);
  color: var(--mm-green-700);
  flex: 0 0 auto;
}

.mm-card__icon svg { width: 22px; height: 22px; }

.mm-perk {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1.5rem;
  width: 100%;
  height: 188px;
  padding: 1.5rem 2rem;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface-tint);
  color: var(--mm-text);
}

@media (min-width: 768px) {
  .mm-perk {
    height: 320px;
    width: 280px;
    flex: 0 0 280px;
  }
}

.mm-perk__icon {
  width: 24px;
  height: 24px;
  flex: 0 0 auto;
}

.mm-perk__label {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mm-green-700);
  margin-bottom: .55rem;
}

.mm-perk__body {
  display: block;
  font-family: var(--mm-font-sans);
  font-size: 1.2rem;
  line-height: 1.55;
  color: var(--mm-ink-soft);
}

.mm-stat-card {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  background: var(--mm-gradient-brand);
}

@media (min-width: 768px) {
  .mm-stat-card {
    width: 384px;
    flex: 0 0 384px;
  }
}

.mm-stat-card__label {
  position: absolute;
  top: 1.5rem;
  left: 1.5rem;
  font-size: var(--mm-text-caption);
  font-weight: 700;
  letter-spacing: .16em;
  color: var(--mm-text-on-inverse);
}

.mm-stat {
  position: absolute;
  left: 18px;
  bottom: 18px;
  width: 212px;
  height: 237px;
  padding: 1.5rem;
  border-radius: var(--mm-radius-lg);
  background: var(--mm-surface);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: space-between;
}

.mm-stat__value {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: 2.5rem;
  line-height: 1.15;
  background: var(--mm-gradient-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* --- large tappable CTA card -------------------------------------------- */
.mm-tile-btn {
  position: relative;
  display: block;
  width: 100%;
  height: 200px;
  padding: 1.25rem 1.25rem 2rem 2rem;
  border-radius: var(--mm-radius-lg);
  overflow: hidden;
  background: var(--mm-surface);
  color: var(--mm-text);
  transition: transform var(--mm-duration-mid) var(--mm-ease),
    box-shadow var(--mm-duration-mid) var(--mm-ease);
}

@media (min-width: 768px) {
  .mm-tile-btn {
    width: 384px;
    flex: 0 0 384px;
  }
}

.mm-tile-btn--gradient {
  background: var(--mm-gradient-soft);
}

.mm-tile-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -22px rgba(16, 26, 22, .5);
}

.mm-tile-btn:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
}

.mm-tile-btn__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem;
  height: 100%;
}

.mm-tile-btn__label {
  font-size: clamp(1.5rem, 2.4vw, 1.875rem);
  line-height: 1.2;
}

.mm-tile-btn__label span {
  display: block;
}

/* --- the arrow disc ---
   Two identical arrows stacked in one grid cell. On hover the first leaves
   up-right while fading, and the second arrives from below-left after a
   short delay — so the two are never both visible at the centre. */
.mm-tile-btn__circle {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-action);
  color: var(--mm-white);
  display: grid;
  place-items: center;
  overflow: hidden;
  transition: background-color var(--mm-duration-mid) var(--mm-ease);
}

.mm-tile-btn:hover .mm-tile-btn__circle {
  background: var(--mm-green-600);
}

.mm-tile-btn__circle svg {
  grid-area: 1 / 1;
  transition: transform var(--mm-duration-mid) var(--mm-ease),
    opacity .18s var(--mm-ease);
}

/* outgoing: leaves and fades */
.mm-tile-btn:hover .mm-tile-btn__circle svg:nth-child(1) {
  transform: translate(110%, -110%);
  opacity: 0;
}

/* incoming: parked below-left, arrives on a short delay */
.mm-tile-btn__circle svg:nth-child(2) {
  transform: translate(-110%, 110%);
  opacity: 0;
}

.mm-tile-btn:hover .mm-tile-btn__circle svg:nth-child(2) {
  transform: none;
  opacity: 1;
  transition: transform var(--mm-duration-mid) var(--mm-ease) .1s,
    opacity .2s var(--mm-ease) .12s;
}

@media (prefers-reduced-motion: reduce) {
  .mm-tile-btn:hover {
    transform: none;
  }

  .mm-tile-btn__circle svg {
    transition: none;
  }

  .mm-tile-btn__circle svg:nth-child(2) {
    display: none;
  }
}


/* ==========================================================================
   10  STRIPS
   ========================================================================== */
.mm-notice {
  display: block;
  padding: .625rem 1rem;
  background: var(--mm-surface-tint);
  color: var(--mm-text);
  overflow: hidden;
}

.mm-notice:hover {
  background: var(--mm-green-200);
  color: var(--mm-text);
}

.mm-notice__inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
}

.mm-notice__badge {
  padding: .25rem .625rem;
  border-radius: 4px;
  background: var(--mm-action);
  color: var(--mm-action-label);
  font-size: var(--mm-text-caption);
  white-space: nowrap;
}

.mm-notice__text {
  font-size: var(--mm-text-caption);
  white-space: nowrap;
}

.mm-marquee {
  overflow: hidden;
}

.mm-marquee__track {
  display: flex;
  width: max-content;
  align-items: center;
  gap: 2rem;
  animation: mm-scroll 26s linear infinite;
}

@keyframes mm-scroll {
  to {
    transform: translateX(-50%);
  }
}

.mm-cloud-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 50px;
  min-width: 100px;
  padding-inline: 1rem;
  font-weight: 600;
  color: var(--mm-text-muted);
  white-space: nowrap;
}

.mm-chip {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  padding: .35rem .7rem;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-surface-wash);
  color: var(--mm-text-link);
  font-size: .8125rem;
  font-weight: 500;
}


/* ==========================================================================
   11  PLACEHOLDER VISUALS
   Temporary stand-ins for the Figma artwork. Safe to delete this whole
   block once real imagery lands — nothing above depends on it.
   ========================================================================== */
.mm-mock {
  width: 100%;
  max-width: 420px;
  padding: 1.25rem;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-lift);
}

.mm-mock__row {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .6rem 0;
}

.mm-mock__row+.mm-mock__row {
  border-top: 1px solid var(--mm-line);
}

.mm-mock__avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--mm-surface-tint);
  flex: 0 0 auto;
}

.mm-mock__bar {
  height: 8px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-line);
}

.mm-mock__bar--accent {
  background: var(--mm-gradient-brand);
}

.mm-mock__big {
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: 2.5rem;
  line-height: 1;
}

.mm-swatches {
  display: flex;
  gap: .5rem;
}

.mm-swatch {
  flex: 1 1 0;
  height: 44px;
  border-radius: 10px;
  background: var(--mm-c, var(--mm-surface-tint));
}

.mm-specimen {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .75rem 0 1rem;
  border-bottom: 1px solid var(--mm-line);
}

.mm-specimen__glyph {
  font-size: 3rem;
  line-height: 1;
}

.mm-specimen__meta {
  flex: 1 1 auto;
}

.mm-browser {
  width: 100%;
  max-width: 420px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--mm-surface);
  box-shadow: var(--mm-shadow-lift);
}

.mm-browser__bar {
  display: flex;
  align-items: center;
  gap: .375rem;
  padding: .75rem 1rem;
  background: var(--mm-surface-wash);
  border-bottom: 1px solid var(--mm-line);
}

.mm-browser__bar span {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--mm-line);
}

.mm-browser__body {
  padding: 1rem;
}

.mm-browser__hero {
  height: 96px;
  border-radius: 10px;
  background: var(--mm-gradient-brand);
}

.mm-browser__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: .5rem;
  margin-top: .75rem;
}

.mm-browser__grid i {
  display: block;
  height: 44px;
  border-radius: var(--mm-radius-xs);
  background: var(--mm-surface-tint);
}

.mm-chart {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: .5rem;
  height: 120px;
}

.mm-chart span {
  flex: 1 1 0;
  max-width: 34px;
  height: var(--mm-h, 50%);
  border-radius: 6px 6px 3px 3px;
  background: linear-gradient(180deg, var(--mm-green-300), var(--mm-green-500));
}

.mm-chart span:last-child {
  background: var(--mm-green-800);
}


/* ==========================================================================
   12  NAVIGATION
   No bar, no panel. The logo tile and the call to action float in place on
   every page; only the centre links react to scrolling, fading away on the
   way down and drifting back on the way up. Colours follow whatever is
   underneath: the layout script adds .is-on-dark over dark sections.

   States set by the layout script on .site-header:
     .is-condensed ... scrolling down: links fade out
     .is-on-dark ..... a dark band or the hero sits under the nav
     .is-menu-open ... mobile sheet open
   Each state only swaps the variables below, never rules.
   ========================================================================== */
.site-header {
  --mm-nav-fg: var(--mm-text);
  --mm-nav-fg-active: var(--mm-text-link);
  --mm-nav-pill: var(--mm-tint-brand);
  --mm-nav-cta-bg: var(--mm-action);
  --mm-nav-cta-bg-hover: var(--mm-action-hover);
  --mm-nav-cta-fg: var(--mm-action-label);
  --mm-nav-tile-bg: var(--mm-ink);
  --mm-nav-tile-fg: var(--mm-white);

  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  padding-top: var(--mm-nav-offset);
  /* only the pieces themselves take clicks; the page shows through the rest */
  pointer-events: none;
}

.site-header.is-on-dark,
.site-header.is-menu-open {
  --mm-nav-fg: var(--mm-white);
  --mm-nav-fg-active: var(--mm-white);
  --mm-nav-pill: var(--mm-glass);
  --mm-nav-cta-bg: var(--mm-white);
  --mm-nav-cta-bg-hover: var(--mm-stone-100);
  --mm-nav-cta-fg: var(--mm-ink);
  --mm-nav-tile-bg: var(--mm-white);
  --mm-nav-tile-fg: var(--mm-ink);
}

/* the footer has its own logo and button, so on desktop the nav steps
   aside once the footer comes into view */
.site-header {
  transition: opacity .5s var(--mm-ease-out), transform .6s var(--mm-ease-out), visibility 0s linear 0s;
}

@media (min-width: 992px) {
  .site-header.is-away {
    opacity: 0;
    transform: translateY(-16px);
    visibility: hidden;
    transition: opacity .4s var(--mm-ease), transform .5s var(--mm-ease-out), visibility 0s linear .5s;
  }
}

/* the header floats, so pages without a full-bleed hero start below it */
body:not(:has(.mm-h-hero)) > main {
  padding-top: calc(var(--mm-nav-offset) + var(--mm-nav-h));
}

/* three columns so the links sit on the true centre, whatever the widths
   of the logo and the button either side */
.mm-nav__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--mm-nav-h);
}

.mm-nav__brand,
.mm-nav__center,
.mm-nav__end {
  pointer-events: auto;
}

.mm-nav__brand {
  justify-self: start;
  display: inline-flex;
  border-radius: 14px;
}

.mm-nav__brand img {
  display: block;
  width: 52px;
  height: 52px;
  border-radius: 14px;
}

.mm-nav__brand:focus-visible,
.mm-nav__link:focus-visible,
.mm-nav__toggle:focus-visible {
  outline: 2px solid var(--mm-nav-fg);
  outline-offset: 3px;
}

/* --- links ---------------------------------------------------------------
   They leave one after another, each lifting slightly and softening as it
   fades, and return the same way, so the row never blinks off at once. */
.mm-nav__center {
  position: relative;
  transition: visibility 0s linear 0s;
}

.mm-nav__links {
  position: relative;
  z-index: 1;
  display: flex;
  gap: .25rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-nav__links > li {
  transition: opacity .7s var(--mm-ease-out) calc(var(--i, 0) * 60ms),
    transform .8s var(--mm-ease-out) calc(var(--i, 0) * 60ms),
    filter .7s var(--mm-ease-out) calc(var(--i, 0) * 60ms);
}

.site-header.is-condensed .mm-nav__center {
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .9s;
}

.site-header.is-condensed .mm-nav__links > li {
  opacity: 0;
  transform: translateY(-10px);
  filter: blur(6px);
  transition-duration: .45s, .55s, .45s;
  transition-delay: calc(var(--i, 0) * 40ms);
}

.site-header.is-condensed .mm-nav__pill { opacity: 0; }

/* the hover pill: glides to whichever link is hovered or focused and rests
   on the current page */
.mm-nav__pill {
  position: absolute;
  top: 50%;
  left: 0;
  z-index: 0;
  width: var(--w, 0);
  height: 40px;
  margin-top: -20px;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-nav-pill);
  opacity: 0;
  transform: translateX(var(--x, 0));
  pointer-events: none;
  transition: transform .6s var(--mm-ease-out),
    width .6s var(--mm-ease-out),
    opacity .4s var(--mm-ease),
    background-color .6s var(--mm-ease-out);
}

.mm-nav__pill.is-on { opacity: 1; }

.mm-nav__pill.is-instant {
  transition: opacity .4s var(--mm-ease),
    background-color .6s var(--mm-ease-out);
}

.mm-nav__link {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 1.05rem;
  border-radius: var(--mm-radius-pill);
  font-size: 1rem;
  font-weight: 500;
  color: var(--mm-nav-fg);
  transition: color .6s var(--mm-ease-out);
}

.mm-nav__link:hover,
.mm-nav__link:focus-visible {
  color: var(--mm-nav-fg);
}

/* the current page: green on light pages, white over dark ones */
.mm-nav__link[aria-current="page"],
.mm-nav__link[aria-current="page"]:hover {
  color: var(--mm-nav-fg-active);
}

/* the label rolls: it slides up and an identical copy rises in behind it */
.mm-nav__roll {
  position: relative;
  display: block;
  height: 1.25em;
  overflow: hidden;
  line-height: 1.25em;
}

.mm-nav__roll > span,
.mm-nav__roll::after {
  display: block;
  transition: transform .55s var(--mm-ease-out);
}

.mm-nav__roll::after {
  content: attr(data-text);
  position: absolute;
  inset: 100% 0 auto;
}

.mm-nav__link:hover .mm-nav__roll > span,
.mm-nav__link:hover .mm-nav__roll::after,
.mm-nav__link:focus-visible .mm-nav__roll > span,
.mm-nav__link:focus-visible .mm-nav__roll::after {
  transform: translateY(-100%);
}

.mm-nav__end {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: .5rem;
}

/* --- call to action, shared by the nav, the mobile sheet and the footer -- */
.mm-nav__cta {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  height: 52px;
  padding: 0 1.25rem 0 1.5rem;
  border-radius: 16px;
  /* fallbacks: outside the header (sheet, footer) the nav variables are unset */
  background: var(--mm-nav-cta-bg, var(--mm-action));
  color: var(--mm-nav-cta-fg, var(--mm-action-label));
  font-size: 1rem;
  font-weight: 500;
  white-space: nowrap;
  transition: background-color .6s var(--mm-ease-out),
    color .6s var(--mm-ease-out);
}

.mm-nav__cta:hover {
  background: var(--mm-nav-cta-bg-hover, var(--mm-action-hover));
  color: var(--mm-nav-cta-fg, var(--mm-action-label));
  transition-duration: var(--mm-duration-mid);
}

.mm-nav__cta:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 3px;
}

.mm-nav__cta svg {
  width: 18px;
  height: 18px;
  transition: transform .45s var(--mm-ease-out);
}

.mm-nav__cta:hover svg {
  transform: translateX(4px);
}

.mm-nav__cta--lg {
  height: 56px;
  padding: 0 1.4rem 0 1.6rem;
  border-radius: 18px;
  font-size: 1.125rem;
  gap: .8rem;
}

.mm-nav__cta--light {
  --mm-nav-cta-bg: var(--mm-white);
  --mm-nav-cta-bg-hover: var(--mm-stone-100);
  --mm-nav-cta-fg: var(--mm-ink);
}

/* the menu button is a tile, like the logo, so it reads on any background */
.mm-nav__toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--mm-nav-tile-bg);
  color: var(--mm-nav-tile-fg);
  transition: background-color .6s var(--mm-ease-out), color .6s var(--mm-ease-out);
}

/* two bars, the lower one short. Both are right-aligned so the short one
   reads as deliberate rather than clipped. */
.mm-burger {
  position: relative;
  display: block;
  width: 20px;
  height: 10px;
}

.mm-burger span {
  position: absolute;
  right: 0;
  height: 1.6px;
  border-radius: 2px;
  background: currentColor;
  transition: width var(--mm-duration-mid) var(--mm-ease),
    transform .45s var(--mm-ease-out);
}

.mm-burger span:nth-child(1) {
  top: 0;
  width: 20px;
}

.mm-burger span:nth-child(2) {
  bottom: 0;
  width: 12px;
}

.mm-nav__toggle:hover .mm-burger span:nth-child(2) {
  width: 20px;
}

/* open: both bars meet in the middle and cross */
.mm-nav__toggle[aria-expanded="true"] .mm-burger span:nth-child(1) {
  width: 20px;
  transform: translateY(4.2px) rotate(45deg);
}

.mm-nav__toggle[aria-expanded="true"] .mm-burger span:nth-child(2) {
  width: 20px;
  transform: translateY(-4.2px) rotate(-45deg);
}

@media (max-width: 991.98px) {
  .mm-nav__bar { grid-template-columns: 1fr auto; }
  .mm-nav__center { display: none; }
  .mm-nav__toggle { display: inline-flex; }
  .mm-nav__brand img { width: 48px; height: 48px; }
  .mm-nav__cta { height: 48px; border-radius: 14px; }
}

@media (max-width: 575.98px) {
  .mm-nav__end > .mm-nav__cta { display: none; }
}

/* --- mobile sheet --------------------------------------------------------
   Drops from the top over the whole screen, dark, with the logo and the
   close tile staying exactly where they were. */
.mm-menu {
  position: fixed;
  inset: 0;
  z-index: -1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2rem;
  padding: calc(var(--mm-nav-offset) + var(--mm-nav-h) + 2rem) var(--mm-container-gutter) calc(env(safe-area-inset-bottom, 0px) + 2rem);
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
  overflow-y: auto;
  pointer-events: auto;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--mm-ease-out), visibility 0s linear .8s;
}

.site-header.is-menu-open .mm-menu {
  clip-path: inset(0 0 0 0);
  visibility: visible;
  transition: clip-path .8s var(--mm-ease-out);
}

.mm-menu__links {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-menu__links > li {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--mm-ease-out), transform .7s var(--mm-ease-out);
}

.site-header.is-menu-open .mm-menu__links > li {
  opacity: 1;
  transform: none;
  transition-delay: calc(.2s + var(--i, 0) * 60ms);
}

.mm-menu__link {
  display: block;
  padding: .3rem 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(2.25rem, 10vw, 3.5rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--mm-text-on-inverse);
  transition: color var(--mm-duration-mid) var(--mm-ease);
}

.mm-menu__link:hover,
.mm-menu__link[aria-current="page"] {
  color: var(--mm-green-300);
}

.mm-menu__foot {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1.5rem;
}

.mm-menu__address {
  margin: 0;
  font-style: normal;
  font-size: .9375rem;
  color: var(--mm-text-muted-on-inverse);
}

@media (min-width: 992px) {
  .mm-menu { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-menu,
  .mm-menu__links > li,
  .mm-burger span,
  .mm-nav__pill,
  .mm-nav__links > li,
  .mm-nav__roll > span,
  .mm-nav__roll::after { transition: none; }
  .site-header.is-condensed .mm-nav__links > li { filter: none; }
}


/* ==========================================================================
   13  FOOTER
   One light panel with big rounded lower corners on the dark base: the
   closing "Get in touch", the name and a hairline, then the statement and
   links. The address and a contact card sit on the dark base beneath.
   The contact block above ends on the panel's colour and the panel's top
   is square, so the lead-in and the footer read as one surface.
   ========================================================================== */
.mm-footer {
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
}

.mm-footer__panel {
  padding-block: var(--mm-space-section) clamp(4rem, 9vw, 9rem);
  border-radius: 0 0 var(--mm-radius-footer) var(--mm-radius-footer);
  background: var(--mm-gradient-footer-panel);
  color: var(--mm-text);
}

/* the closing invitation: heading left, lead and button right. A view can
   switch it off with $this->set('hideFooterCta', true). */
.mm-footer__cta {
  row-gap: 1.75rem;
  align-items: end;
  margin-bottom: clamp(4rem, 9vw, 8rem);
}

.mm-footer__cta .mm-heading {
  grid-column: 1 / span 7;
  text-wrap: balance;
}

.mm-footer__cta-aside {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2rem;
}

.mm-footer__cta-lead {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

@media (max-width: 991.98px) {
  .mm-footer__cta .mm-heading,
  .mm-footer__cta-aside { grid-column: 1 / -1; }
}

/* opens with the name and a long hairline, Neko-style: the brand is said
   in words here, since the nav (and its logo) steps aside over the footer */
.mm-footer__rule {
  display: flex;
  align-items: center;
  gap: 1.25rem;
}

.mm-footer__name {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  flex: 0 0 auto;
  font-size: 1rem;
  font-weight: 500;
  color: var(--mm-text);
}

.mm-footer__name:hover { color: var(--mm-text); }

.mm-footer__name:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
  border-radius: 4px;
}

.mm-footer__mark {
  width: 14px;
  height: 14px;
  border-radius: 4px;
  background: var(--mm-green-800);
}

.mm-footer__line {
  flex: 1 1 auto;
  height: 1px;
  background: var(--mm-ink);
  opacity: .85;
}

.mm-footer__main {
  margin-top: clamp(3rem, 7vw, 6rem);
  row-gap: 3rem;
}

.mm-footer__statement {
  grid-column: 1 / span 5;
  max-width: 30ch;
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.2rem, 2.2vw, 1.8rem);
  line-height: 1.15;
  letter-spacing: -.02em;
  color: var(--mm-text);
}

.mm-footer__cols {
  grid-column: 7 / -1;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2rem;
}

.mm-footer__label {
  margin: 0 0 1.25rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mm-text-muted);
}

.mm-footer__links {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* the underline draws in under the link rather than appearing */
.mm-footer__links a {
  padding-bottom: 2px;
  font-size: 1.0625rem;
  color: var(--mm-text);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--mm-ease-out), color var(--mm-duration-fast) var(--mm-ease);
}

.mm-footer__links a:hover,
.mm-footer__links a:focus-visible {
  color: var(--mm-text-link);
  background-size: 100% 1px;
}

.mm-footer__base {
  padding-block: clamp(3rem, 6vw, 5rem) clamp(2rem, 4vw, 3rem);
}

.mm-footer__base-inner {
  row-gap: 2rem;
  align-items: center;
}

.mm-footer__address {
  grid-column: 1 / span 5;
  margin: 0;
  font-style: normal;
  font-size: .85rem;
  line-height: 1.55;
  color: var(--mm-text-muted-on-inverse);
}

.mm-footer__copy {
  grid-column: 6 / span 3;
  margin: 0;
  font-size: .9375rem;
  line-height: 1.4;
  color: var(--mm-text-muted-on-inverse);
}

.mm-footer__card {
  grid-column: 9 / -1;
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: .5rem 1.25rem .5rem .5rem;
  border-radius: var(--mm-radius-md);
  background: var(--mm-surface-inverse-raised);
  color: var(--mm-text-on-inverse);
  transition: background-color var(--mm-duration-mid) var(--mm-ease);
}

.mm-footer__card:hover {
  background: var(--mm-glass);
  color: var(--mm-text-on-inverse);
}

.mm-footer__card:focus-visible {
  outline: 2px solid var(--mm-green-300);
  outline-offset: 3px;
}

.mm-footer__card img {
  flex: 0 0 auto;
  width: 64px;
  height: 64px;
  border-radius: var(--mm-radius-sm);
  object-fit: cover;
}

.mm-footer__card strong {
  display: block;
  font-size: 1rem;
  font-weight: 500;
}

.mm-footer__card-link {
  font-size: .9375rem;
  color: var(--mm-text-muted-on-inverse);
}

.mm-footer__card:hover .mm-footer__card-link {
  color: var(--mm-text-on-inverse);
}

@media (max-width: 991.98px) {
  .mm-footer__statement,
  .mm-footer__cols { grid-column: 1 / -1; }
  .mm-footer__address { grid-column: 1 / span 6; }
  .mm-footer__copy { grid-column: 7 / -1; }
  .mm-footer__card { grid-column: 1 / -1; }
}

@media (max-width: 575.98px) {
  .mm-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; }
  .mm-footer__address,
  .mm-footer__copy { grid-column: 1 / -1; }
}

/* --- back to top ---------------------------------------------------------
   Optional, for the base row. */
.mm-to-top {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .25rem 0;
  background: none;
  border: 0;
  font-size: var(--fs-xs);
  color: var(--mm-text-muted-on-inverse);
  text-decoration: none;
  transition: color var(--mm-duration-fast) var(--mm-ease);
}

.mm-to-top:hover { color: var(--mm-green-300); }
.mm-to-top:focus-visible { outline: 2px solid var(--mm-green-300); outline-offset: 4px; }

.mm-to-top svg {
  width: 13px;
  height: 13px;
  transition: transform var(--mm-duration-fast) var(--mm-ease);
}

.mm-to-top:hover svg { transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .mm-to-top svg { transition: none; }
}


/* ==========================================================================
   14  MOTION UTILITIES
   Opt-in reveals, usable on any view. Hidden states only apply while <html>
   carries .mm-motion, which a view adds and its script confirms (see
   home.php). No script, no hiding: content can never be left invisible.

     .mm-reveal on an .mm-heading .... each line slides up out of a mask
     [data-mm-words] ................. word-by-word mask (script splits it)
     [data-mm-fade] .................. quiet fade-up for copy under a heading
     [data-mm-in] .................... the trigger; script adds .is-in
     [data-mm-unmask] ................ photo opens from a smaller window
     [data-mm-parallax] .............. image drifts inside its frame
   ========================================================================== */

/* --- headings, line by line -------------------------------------------- */
.mm-motion .mm-reveal .mm-heading__line {
  overflow: hidden;
  padding-bottom: .08em;
  margin-bottom: -.08em;
}

.mm-motion .mm-reveal .mm-heading__line > .mm-line-in {
  display: block;
  transform: translateY(105%);
  transition: transform var(--mm-duration-reveal) var(--mm-ease-out);
}

.mm-motion .mm-reveal .mm-heading__line:nth-child(2) > .mm-line-in { transition-delay: .09s; }
.mm-motion .mm-reveal.is-in .mm-heading__line > .mm-line-in { transform: none; }

/* --- words -------------------------------------------------------------- */
.mm-w {
  display: inline-block;
  vertical-align: top;
}

.mm-motion .mm-w {
  overflow: hidden;
  padding-bottom: .1em;
  margin-bottom: -.1em;
}

.mm-motion .mm-w > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1.3s var(--mm-ease-out);
  transition-delay: calc(var(--i, 0) * 55ms + .15s);
}

.mm-motion .is-in .mm-w > span { transform: none; }

/* --- fade ---------------------------------------------------------------- */
.mm-motion [data-mm-fade] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 1s var(--mm-ease-out) .25s,
    transform var(--mm-duration-reveal) var(--mm-ease-out) .25s;
}

.mm-motion [data-mm-fade].is-in {
  opacity: 1;
  transform: none;
}

/* --- photos: scrubbed by GSAP, these are only the hooks ----------------- */
[data-mm-unmask] { overflow: hidden; }
[data-mm-parallax] { will-change: transform; }

/* --- growing bands: the hero in reverse -----------------------------------
   Rounded and inset to the content width to start, square and edge to edge
   once it has grown. home.js tweens the two variables together; without JS
   both rest at 0, so the band is simply full bleed. */
[data-mm-grow] {
  clip-path: inset(0 var(--mm-grow-x, 0px) round var(--mm-grow-r, 0px));
  will-change: clip-path;
}


/* --- page transition -----------------------------------------------------
   A full-screen curtain in the brand green. Leaving: it rises from the
   bottom, its top edge curved like a wave, and covers the page. Arriving:
   the new page starts covered and the curtain lifts away off the top,
   curving the other way. The layout script drives the three classes on
   <html>; nothing here runs on a first visit or with reduced motion. */
.mm-curtain {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: grid;
  place-items: center;
  background: var(--mm-surface-inverse);
  pointer-events: none;
  visibility: hidden;
  transform: translateY(100%);
  border-radius: 50% 50% 0 0 / 14vh 14vh 0 0;
}

/* sized by height so any image shape works; it keeps its own proportions */
.mm-curtain__mark {
  display: block;
  width: auto;
  height: clamp(56px, 7vw, 96px);
  max-width: 60vw;
  object-fit: contain;
  opacity: 0;
  transform: translateY(12px) scale(.96);
}

.mm-leaving .mm-curtain,
.mm-arriving .mm-curtain,
.mm-revealing .mm-curtain {
  visibility: visible;
  pointer-events: auto;
}

/* leaving: rise and settle flat */
.mm-leaving .mm-curtain {
  transform: none;
  border-radius: 0;
  transition: transform .8s cubic-bezier(.76, 0, .24, 1),
    border-radius .8s cubic-bezier(.76, 0, .24, 1);
}

.mm-leaving .mm-curtain__mark {
  opacity: 1;
  transform: none;
  transition: opacity .45s var(--mm-ease-out) .35s, transform .7s var(--mm-ease-out) .3s;
}

/* arriving: already covering, before the first paint */
.mm-arriving .mm-curtain {
  transform: none;
  border-radius: 0;
  transition: none;
}

.mm-arriving .mm-curtain__mark {
  opacity: 1;
  transform: none;
  transition: none;
}

/* revealing: lift away, the lower edge curving as it goes */
.mm-revealing .mm-curtain {
  transform: translateY(-100%);
  border-radius: 0 0 50% 50% / 0 0 14vh 14vh;
  transition: transform .9s cubic-bezier(.76, 0, .24, 1),
    border-radius .9s cubic-bezier(.76, 0, .24, 1);
}

.mm-revealing .mm-curtain__mark {
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity .25s var(--mm-ease), transform .5s var(--mm-ease-out);
}

@media (prefers-reduced-motion: reduce) {
  .mm-curtain { display: none; }
}


/* ==========================================================================
   15  PAGE HERO
   Entrance for inner-page heroes (.mm-hero). Runs once on load. CSS-only,
   so it cannot leave content hidden if JS fails — the animation is on a
   delay, not a class toggle.

   Targets the direct children of whichever wrapper the page uses:
     centred → .mm-hero__copy
     split   → .row > .col
   ========================================================================== */
.mm-hero {
  padding-top: 2.5rem;
  padding-bottom: 5rem;
}

@media (min-width: 768px) {
  .mm-hero {
    padding-top: 5rem;
  }
}

.mm-hero__copy {
  max-width: 820px;
  margin-inline: auto;
  text-align: center;
}

.mm-hero__copy>*,
.mm-hero .row>[class*="col-"]>*,
.mm-hero .mm-frame--hero {
  opacity: 0;
  animation: mm-enter .7s var(--mm-ease) forwards;
}

/* stagger by position within the column */
.mm-hero__copy>*:nth-child(1),
.mm-hero .row>[class*="col-"]>*:nth-child(1) {
  animation-delay: .05s;
}

.mm-hero__copy>*:nth-child(2),
.mm-hero .row>[class*="col-"]>*:nth-child(2) {
  animation-delay: .15s;
}

.mm-hero__copy>*:nth-child(3),
.mm-hero .row>[class*="col-"]>*:nth-child(3) {
  animation-delay: .25s;
}

.mm-hero__copy>*:nth-child(4),
.mm-hero .row>[class*="col-"]>*:nth-child(4) {
  animation-delay: .35s;
}

/* the media column comes in behind the copy */
.mm-hero .row>[class*="col-"]:last-child>* {
  animation-delay: .4s;
}

.mm-hero .mm-frame--hero {
  animation-delay: .35s;
}

/* the annotation pills already stagger themselves, so push their delays
   back to start after the frame has landed */
.mm-hero .mm-annotate__pill {
  animation-delay: calc(var(--mm-delay, 0s) + .6s);
}

/* Pages with a short hero: the section below is already in view on load,
   so it joins the entrance sequence rather than waiting for a scroll. */
.mm-hero + .mm-section > .mm-container {
  opacity: 0;
  animation: mm-enter .7s var(--mm-ease) .45s forwards;
}

@keyframes mm-enter {
  from {
    opacity: 0;
    transform: translateY(16px);
  }

  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-hero__copy>*,
  .mm-hero .row>[class*="col-"]>*,
  .mm-hero .mm-frame--hero,
  .mm-hero + .mm-section > .mm-container {
    opacity: 1;
    animation: none;
  }
}



/* --- inner-page hero (.mm-page-hero) -------------------------------------
   Neko-style: a small label, a big headline, a jump link on the right, then
   a wide photo that grows out to the screen edges as you scroll. Plays a short
   CSS entrance on load, no script needed. Used by careers; reusable on any
   inner page. */
section.mm-page-hero {
  padding-block: clamp(2.5rem, 6vw, 5rem) 0;
}

.mm-page-hero__label,
.mm-label {
  margin: 0 0 clamp(2rem, 5vw, 4rem);
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--mm-text);
}

.mm-page-hero__main {
  row-gap: 2.5rem;
  align-items: end;
}

.mm-page-hero__copy {
  grid-column: 1 / span 8;
}

.mm-page-hero__title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: var(--mm-text-page-title);
  line-height: 1;
  letter-spacing: var(--mm-tracking-display);
  color: var(--mm-text);
  text-wrap: balance;
}

.mm-page-hero__lead {
  max-width: 36rem;
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-secondary);
}

.mm-page-hero__main > .mm-jump {
  grid-column: 9 / -1;
  justify-self: end;
}

/* the photo: a growing band (data-mm-grow). It opens inset to the content
   width with rounded corners and grows to the screen edges as you scroll;
   without JS it simply sits edge to edge. */
.mm-page-hero__media {
  position: relative;
  margin: clamp(3.5rem, 8vw, 7rem) 0 0;
  height: clamp(22rem, 78vh, 54rem);
  overflow: hidden;
  background: var(--mm-surface-tint);
}

.mm-page-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mm-page-hero__tag {
  position: absolute;
  left: 50%;
  bottom: clamp(1.25rem, 3vw, 2.25rem);
  transform: translateX(-50%);
  padding: .7rem 1.25rem;
  border-radius: var(--mm-radius-sm);
  background: var(--mm-white);
  color: var(--mm-ink);
  font-size: .9375rem;
  font-weight: 500;
  white-space: nowrap;
  box-shadow: 0 12px 30px -16px rgba(16, 26, 22, .35);
}

/* entrance: the copy rises in, then the photo slides up beneath it */
.mm-page-hero__label,
.mm-page-hero__copy > *,
.mm-page-hero__main > .mm-jump,
.mm-page-hero__media {
  animation: mm-enter .9s var(--mm-ease-out) both;
}

.mm-page-hero__copy > :nth-child(1) { animation-delay: .08s; }
.mm-page-hero__copy > :nth-child(2) { animation-delay: .16s; }
.mm-page-hero__main > .mm-jump { animation-delay: .24s; }
.mm-page-hero__media { animation: mm-page-hero-media 1.2s var(--mm-ease-out) .3s both; }

/* arriving behind the page curtain: hold the entrance until it lifts */
.mm-arriving .mm-page-hero__label,
.mm-arriving .mm-page-hero__copy > *,
.mm-arriving .mm-page-hero__main > .mm-jump,
.mm-arriving .mm-page-hero__media,
.mm-arriving .mm-hero__copy > *,
.mm-arriving .mm-hero .row > [class*="col-"] > * {
  animation-play-state: paused;
}

@keyframes mm-page-hero-media {
  from { opacity: 0; transform: translateY(60px); }
  to { opacity: 1; transform: none; }
}

@media (max-width: 991.98px) {
  .mm-page-hero__copy { grid-column: 1 / -1; }
  .mm-page-hero__main > .mm-jump { grid-column: 1 / -1; justify-self: start; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-page-hero__label,
  .mm-page-hero__copy > *,
  .mm-page-hero__main > .mm-jump,
  .mm-page-hero__media { animation: none; }
}

/* --- jump link: label + dark tile with an arrow --------------------------
   For in-page jumps ("View roles"), where a full button would be too loud. */
.mm-jump {
  display: inline-flex;
  align-items: center;
  gap: 1.1rem;
  color: var(--mm-text);
}

.mm-jump:hover { color: var(--mm-text); }

.mm-jump__label {
  font-size: 1.0625rem;
  font-weight: 500;
}

.mm-jump__tile {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  border-radius: 16px;
  background: var(--mm-action);
  color: var(--mm-action-label);
  overflow: hidden;
  transition: background-color .45s var(--mm-ease-out);
}

.mm-jump__tile svg {
  width: 22px;
  height: 22px;
  transition: transform .5s var(--mm-ease-out);
}

.mm-jump:hover .mm-jump__tile { background: var(--mm-action-hover); }
.mm-jump:hover .mm-jump__tile svg { transform: translateY(4px); }

.mm-jump:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
  border-radius: 16px;
}

/* --- open roles ---------------------------------------------------------- */
section.mm-roles {
  padding-block: var(--mm-space-section);
}

.mm-roles .mm-grid {
  row-gap: 1.5rem;
  align-items: end;
}

.mm-roles__head { grid-column: 1 / span 6; }
.mm-roles__head .mm-page-hero__label { margin-bottom: 1.5rem; }

.mm-roles__title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  line-height: 1.05;
  letter-spacing: var(--mm-tracking-display);
  color: var(--mm-text);
  text-wrap: balance;
}

.mm-roles__body {
  grid-column: 8 / -1;
  margin: 0;
  font-size: var(--mm-text-body);
  line-height: 1.65;
  color: var(--mm-text-secondary);
}

@media (max-width: 991.98px) {
  .mm-roles__head,
  .mm-roles__body { grid-column: 1 / -1; }
}


/* --- inner-page parts -----------------------------------------------------
   Shared by About and the pages after it. */

/* small uppercase label above a heading */
.mm-label {
  margin-bottom: 1.5rem;
}

.mm-label--inverse {
  color: var(--mm-text-on-photo);
}

/* heading on the left, a short lead on the right, aligned on the baseline */
.mm-intro {
  row-gap: 1.5rem;
  align-items: end;
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.mm-intro > .mm-heading,
.mm-intro__head {
  grid-column: 1 / span 7;
}

.mm-intro .mm-heading { text-wrap: balance; }

.mm-intro__lead {
  grid-column: 9 / -1;
  margin: 0;
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-secondary);
}

/* three pillars under hairlines, each with a small icon tile */
section.mm-about-intro {
  padding-block: var(--mm-space-section);
}

.mm-pillars {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3rem) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-pillar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--mm-line);
}

.mm-motion .mm-pillar[data-mm-fade] {
  transition-delay: calc(.1s + var(--d, 0) * .12s);
}

.mm-pillar__icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-bottom: .75rem;
  border-radius: 14px;
  background: var(--mm-tint-brand);
  color: var(--mm-green-700);
}

.mm-pillar__icon svg { width: 22px; height: 22px; }

.mm-pillar__title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--mm-text);
}

.mm-pillar__body {
  margin: 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

/* how we operate: photo beside a numbered list (it is a sequence) */
section.mm-practice {
  padding-block: var(--mm-space-section);
}

.mm-practice__body {
  row-gap: 3rem;
  align-items: start;
}

.mm-practice__media {
  grid-column: 1 / span 5;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius-photo);
  background: var(--mm-green-900);
}

.mm-practice__media img,
.mm-about-team__media img {
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
}

.mm-steps {
  grid-column: 7 / -1;
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-step {
  display: grid;
  grid-template-columns: 3.25rem 1fr;
  gap: 1rem;
  padding-block: clamp(1.75rem, 3vw, 2.5rem);
  border-top: 1px solid var(--mm-line-on-inverse);
}

.mm-step:first-child { padding-top: 0; border-top: 0; }

.mm-step__num {
  padding-top: .35rem;
  font-size: 1rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--mm-green-300);
}

.mm-step__title {
  margin: 0 0 .75rem;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 1.9vw, 1.75rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--mm-text-on-inverse);
}

.mm-step__body {
  margin: 0;
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mm-text-on-photo);
}

/* the team: copy beside a tall photo */
section.mm-about-team {
  padding-block: var(--mm-space-section);
}

.mm-about-team .mm-grid {
  row-gap: 3rem;
  align-items: center;
}

.mm-about-team__copy {
  grid-column: 1 / span 5;
}

.mm-about-team__copy .mm-heading {
  margin-bottom: 2rem;
  text-wrap: balance;
}

.mm-about-team__lead {
  margin: 0 0 1.25rem;
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-secondary);
}

.mm-about-team__note {
  margin: 0;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--mm-text-muted);
}

.mm-about-team__media {
  grid-column: 7 / -1;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius-photo);
  background: var(--mm-surface-tint);
}

@media (max-width: 991.98px) {
  .mm-intro > .mm-heading,
  .mm-intro__head,
  .mm-intro__lead,
  .mm-practice__media,
  .mm-steps,
  .mm-about-team__copy,
  .mm-about-team__media { grid-column: 1 / -1; }

  .mm-pillars { grid-template-columns: 1fr; }
  .mm-motion .mm-pillar[data-mm-fade] { transition-delay: .1s; }
  .mm-practice__media,
  .mm-about-team__media { aspect-ratio: 4 / 3; }
}

/* --- FAQ -------------------------------------------------------------------
   A plain page hero (no photo), then the questions in groups: the group
   name sits on the left and stays in view beside its questions. Each
   question is a native <details> with name="faq", so one opens at a time
   with no script. A closing panel invites anything not covered. */
section.mm-page-hero--plain {
  padding-bottom: clamp(3rem, 6vw, 5rem);
}

section.mm-faq-section {
  padding-block: 0 var(--mm-space-section);
}

.mm-faq-group {
  row-gap: 1rem;
  align-items: start;
}

.mm-faq-group + .mm-faq-group {
  margin-top: clamp(3.5rem, 7vw, 6rem);
}

.mm-faq-group__title {
  grid-column: 1 / span 4;
  position: sticky;
  top: calc(var(--mm-nav-offset) + var(--mm-nav-h) + 2rem);
  display: flex;
  align-items: baseline;
  gap: .9rem;
  margin: 0;
  padding-top: clamp(1.4rem, 2.4vw, 1.9rem);
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--mm-text);
}

.mm-faq-group__num {
  font-family: var(--mm-font-sans);
  font-size: .9375rem;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
  color: var(--mm-text-link);
}

.mm-faq-list {
  grid-column: 5 / -1;
  interpolate-size: allow-keywords;
}

.mm-faq {
  border-top: 1px solid var(--mm-line);
}

.mm-faq:last-child {
  border-bottom: 1px solid var(--mm-line);
}

.mm-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  padding: clamp(1.4rem, 2.4vw, 1.9rem) 0;
  list-style: none;
  cursor: pointer;
}

.mm-faq__q::-webkit-details-marker { display: none; }

.mm-faq__q:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 4px;
  border-radius: 6px;
}

.mm-faq__title {
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.125rem, 1.5vw, 1.3125rem);
  line-height: 1.3;
  letter-spacing: -.015em;
  color: var(--mm-text);
  transition: color var(--mm-duration-mid) var(--mm-ease);
}

.mm-faq__q:hover .mm-faq__title { color: var(--mm-text-link); }

/* a plus in a ring that turns into a cross and fills when open */
.mm-faq__icon {
  position: relative;
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border: 1px solid var(--mm-line);
  border-radius: 50%;
  color: var(--mm-text);
  transition: background-color .45s var(--mm-ease-out),
    border-color .45s var(--mm-ease-out),
    color .45s var(--mm-ease-out),
    transform .55s var(--mm-ease-out);
}

.mm-faq__icon::before,
.mm-faq__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 14px;
  height: 1.6px;
  margin: -.8px 0 0 -7px;
  border-radius: 2px;
  background: currentColor;
}

.mm-faq__icon::after { transform: rotate(90deg); }

.mm-faq__q:hover .mm-faq__icon { border-color: var(--mm-action); color: var(--mm-action); }

.mm-faq[open] .mm-faq__icon {
  background: var(--mm-action);
  border-color: var(--mm-action);
  color: var(--mm-action-label);
  transform: rotate(45deg);
}

.mm-faq__a {
  padding: 0 clamp(0rem, 5vw, 4.5rem) clamp(1.5rem, 2.6vw, 2rem) 0;
}

.mm-faq__a p {
  margin: 0;
  max-width: 44rem;
  font-size: 1.0625rem;
  line-height: 1.7;
  color: var(--mm-text-secondary);
}

/* closing panel */
.mm-faq-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem 3rem;
  margin-top: clamp(4rem, 8vw, 7rem);
  padding: clamp(1.75rem, 4vw, 3rem);
  border-radius: var(--mm-radius-photo);
  background: var(--mm-surface-brand);
}

.mm-faq-cta__title {
  margin: 0 0 .5rem;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.5rem, 2.4vw, 2.125rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--mm-text);
  text-wrap: balance;
}

.mm-faq-cta__text {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

.mm-faq-cta .mm-btn { flex: 0 0 auto; }

/* ease open where the browser can animate to auto height */
.mm-faq::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size .5s var(--mm-ease-out), content-visibility .5s allow-discrete;
}

.mm-faq[open]::details-content {
  block-size: auto;
}

.mm-faq[open] .mm-faq__a p {
  animation: mm-enter .6s var(--mm-ease-out) both;
}

@media (max-width: 991.98px) {
  .mm-faq-group__title {
    grid-column: 1 / -1;
    position: static;
    padding-top: 0;
  }

  .mm-faq-list { grid-column: 1 / -1; }
}

@media (max-width: 767.98px) {
  .mm-faq-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mm-faq::details-content { transition: none; }
  .mm-faq[open] .mm-faq__a p { animation: none; }
  .mm-faq__icon { transition: none; }
}

/* --- contact page ---------------------------------------------------------
   The form on a soft stone panel with white fields, beside the direct
   details under hairlines. The footer's "Get in touch" is off on this page. */
section.mm-contact {
  padding-block: 0 var(--mm-space-section);
}

.mm-contact .mm-grid {
  row-gap: 3rem;
  align-items: start;
}

.mm-contact__form {
  grid-column: 1 / span 7;
  padding: clamp(1.5rem, 3.5vw, 3rem);
  border-radius: var(--mm-radius-photo);
  background: var(--mm-surface-brand);
}

.mm-contact__title {
  margin: 0 0 2rem;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  line-height: 1.1;
  letter-spacing: -.03em;
  color: var(--mm-text);
}

.mm-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem 1rem;
  margin-bottom: 2rem;
}

.mm-field--full { grid-column: 1 / -1; }

.mm-contact__form .form-label {
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--mm-text);
}

.mm-contact__form .form-control {
  height: 56px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--mm-surface);
  font-size: 1rem;
  color: var(--mm-text);
  box-shadow: none;
  transition: border-color var(--mm-duration-mid) var(--mm-ease),
    box-shadow var(--mm-duration-mid) var(--mm-ease);
}

.mm-contact__form textarea.form-control {
  height: auto;
  min-height: 10rem;
  padding: 1rem 1.1rem;
  line-height: 1.55;
  resize: vertical;
}

.mm-contact__form .form-control::placeholder {
  color: var(--mm-faint);
}

.mm-contact__form .form-control:hover {
  border-color: var(--mm-line);
}

.mm-contact__form .form-control:focus {
  border-color: var(--mm-green-700);
  background: var(--mm-surface);
  box-shadow: 0 0 0 4px rgba(22, 182, 127, .15);
}

.mm-contact__submit {
  width: 100%;
  justify-content: center;
  gap: .75rem;
}

/* details: sticky beside the form on desktop */
.mm-contact__aside {
  grid-column: 9 / -1;
  position: sticky;
  top: calc(var(--mm-nav-offset) + var(--mm-nav-h) + 2rem);
  padding-top: clamp(1.5rem, 3.5vw, 3rem);
}

.mm-contact__item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding-block: 1.5rem;
  border-top: 1px solid var(--mm-line);
}

.mm-contact__title + .mm-contact__item {
  padding-top: 0;
  border-top: 0;
}

.mm-contact__label {
  margin: 0 0 .5rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mm-text-muted);
}

/* the address itself is the call to action: big, with a drawn underline */
.mm-contact__email {
  padding-bottom: 2px;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.25rem, 1.7vw, 1.5rem);
  letter-spacing: -.02em;
  color: var(--mm-text);
  word-break: break-word;
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat;
  transition: background-size .45s var(--mm-ease-out), color var(--mm-duration-fast) var(--mm-ease);
}

.mm-contact__email:hover,
.mm-contact__email:focus-visible {
  color: var(--mm-text-link);
  background-size: 100% 1px;
}

.mm-contact__item-title {
  margin: 0 0 .5rem;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: 1.125rem;
  line-height: 1.3;
  letter-spacing: -.01em;
  color: var(--mm-text);
}

.mm-contact__text {
  margin: 0;
  font-size: 1rem;
  font-style: normal;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

.mm-contact__text + .mm-btn {
  margin-top: 1.25rem;
}

@media (max-width: 991.98px) {
  .mm-contact__form,
  .mm-contact__aside { grid-column: 1 / -1; }
  .mm-contact__aside { position: static; padding-top: 0; }
}

@media (max-width: 575.98px) {
  .mm-fields { grid-template-columns: 1fr; }
}

/* --- toasts (flash messages) ----------------------------------------------
   A small dark card that slides up at the foot of the screen with an icon,
   the message and a close button. A thin bar along the bottom runs down;
   when it empties the toast leaves. Hover or focus pauses it. Without JS
   the toasts simply sit there, still readable and closable by nothing more
   than navigating on. */
.mm-toasts {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 1.25rem);
  z-index: 950;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: .5rem;
  width: min(30rem, calc(100% - 2rem));
  transform: translateX(-50%);
  pointer-events: none;
}

.mm-toasts:empty { display: none; }

.mm-toast {
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: .9rem;
  padding: .8rem .8rem .8rem 1rem;
  border-radius: 18px;
  background: var(--mm-green-950);
  color: var(--mm-text-on-inverse);
  box-shadow: 0 1px 2px rgba(5, 19, 14, .2), 0 24px 50px -20px rgba(5, 19, 14, .6);
  overflow: hidden;
  pointer-events: auto;
}

/* with JS: start hidden below, rise in, sink out */
.mm-toasts.is-live .mm-toast {
  opacity: 0;
  transform: translateY(18px) scale(.97);
  transition: opacity .45s var(--mm-ease-out), transform .6s var(--mm-ease-out);
}

.mm-toasts.is-live .mm-toast.is-in {
  opacity: 1;
  transform: none;
}

.mm-toasts.is-live .mm-toast.is-out {
  opacity: 0;
  transform: translateY(10px) scale(.97);
  transition-duration: .35s, .45s;
}

.mm-toast__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
}

.mm-toast__icon svg { width: 18px; height: 18px; }

.mm-toast--success .mm-toast__icon { background: var(--mm-green-300); color: var(--mm-green-950); }
.mm-toast--error .mm-toast__icon { background: var(--mm-danger); color: var(--mm-white); }
.mm-toast--info .mm-toast__icon { background: var(--mm-glass); color: var(--mm-white); }

.mm-toast__text {
  margin: 0;
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.45;
  color: var(--mm-text-on-inverse);
}

.mm-toast__text a {
  color: var(--mm-green-300);
}

.mm-toast__close {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--mm-text-on-photo);
  cursor: pointer;
  transition: background-color var(--mm-duration-fast) var(--mm-ease), color var(--mm-duration-fast) var(--mm-ease);
}

.mm-toast__close:hover { background: var(--mm-glass); color: var(--mm-white); }

.mm-toast__close:focus-visible {
  outline: 2px solid var(--mm-green-300);
  outline-offset: 2px;
}

.mm-toast__close svg { width: 18px; height: 18px; }

/* the timer: runs down along the bottom edge; its end dismisses the toast */
.mm-toast__timer {
  position: absolute;
  inset: auto 0 0;
  height: 2px;
  transform-origin: left;
  opacity: .9;
}

.mm-toast--success .mm-toast__timer { background: var(--mm-green-300); }
.mm-toast--error .mm-toast__timer { background: var(--mm-danger); }
.mm-toast--info .mm-toast__timer { background: var(--mm-glass-line); }

.mm-toasts.is-live .mm-toast.is-in .mm-toast__timer {
  animation: mm-toast-timer var(--mm-toast-time, 6s) linear forwards;
}

.mm-toast:hover .mm-toast__timer,
.mm-toast:focus-within .mm-toast__timer {
  animation-play-state: paused;
}

@keyframes mm-toast-timer {
  from { transform: scaleX(1); }
  to { transform: scaleX(0); }
}

@media (prefers-reduced-motion: reduce) {
  .mm-toast__timer { display: none; }
}

/* --- reCAPTCHA ------------------------------------------------------------
   Google allows hiding the floating badge as long as the reCAPTCHA line is
   shown in the form flow, which .mm-recaptcha-note does under both forms. */
.grecaptcha-badge {
  visibility: hidden !important;
}

.mm-recaptcha-note {
  margin: .85rem 0 0;
  text-align: center;
  font-size: .8125rem;
  line-height: 1.5;
  color: var(--mm-text-muted);
}

.mm-recaptcha-note a {
  color: inherit;
  font-weight: 500;
}

.mm-recaptcha-note a:hover { color: var(--mm-text-link); }

/* --- contact drawer --------------------------------------------------------
   Opened by "Let's talk". A rounded panel slides in from the right while
   the page behind blurs; inside, one short form. On phones it fills the
   screen with a small margin. */
.mm-drawer {
  position: fixed;
  inset: 0;
  z-index: 900;
  visibility: hidden;
  pointer-events: none;
  transition: visibility 0s linear .7s;
}

.mm-drawer.is-open {
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

.mm-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: color-mix(in srgb, var(--mm-paper) 35%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  backdrop-filter: blur(14px) saturate(120%);
  opacity: 0;
  transition: opacity .5s var(--mm-ease-out);
}

.mm-drawer.is-open .mm-drawer__backdrop { opacity: 1; }

.mm-drawer__panel {
  position: absolute;
  top: .75rem;
  right: .75rem;
  bottom: .75rem;
  display: flex;
  flex-direction: column;
  width: min(560px, calc(100% - 1.5rem));
  border-radius: var(--mm-radius-photo);
  background: var(--mm-surface);
  box-shadow: 0 30px 80px -30px rgba(16, 26, 22, .35);
  overflow: hidden;
  transform: translateX(calc(100% + 2rem));
  transition: transform .7s var(--mm-ease-out);
}

.mm-drawer.is-open .mm-drawer__panel { transform: none; }

/* header: the title and a close button */
.mm-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .85rem 1rem .85rem clamp(1.5rem, 4vw, 2.5rem);
  border-bottom: 1px solid var(--mm-line-soft);
}

.mm-drawer__heading {
  margin: 0;
  font-size: 1rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mm-text);
}

.mm-drawer__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 12px;
  background: var(--mm-surface-wash);
  color: var(--mm-text);
  cursor: pointer;
  transition: background-color var(--mm-duration-mid) var(--mm-ease), opacity var(--mm-duration-mid) var(--mm-ease);
}

.mm-drawer__icon:hover { background: var(--mm-tint-brand); }
.mm-drawer__icon svg { width: 20px; height: 20px; }

.mm-drawer__icon:focus-visible {
  outline: 2px solid var(--mm-focus-ring);
  outline-offset: 2px;
}

.mm-drawer__form {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.mm-drawer__body {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: clamp(1.5rem, 3.5vh, 2.25rem) clamp(1.5rem, 4vw, 2.5rem);
}

.mm-drawer__foot {
  flex: 0 0 auto;
  padding: 1rem clamp(1.5rem, 4vw, 2.5rem) 1.25rem;
  border-top: 1px solid var(--mm-line-soft);
  background: var(--mm-surface);
}

.mm-drawer__title {
  max-width: 16ch;
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.05;
  letter-spacing: var(--mm-tracking-display);
  color: var(--mm-text);
  text-wrap: balance;
}

.mm-drawer__lead {
  margin: .75rem 0 1.75rem;
  max-width: 30rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

/* fields */
.mm-drawer__fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.mm-drawer__field--full { grid-column: 1 / -1; }

.mm-drawer .form-label {
  margin-bottom: .5rem;
  font-size: .9375rem;
  font-weight: 500;
  color: var(--mm-text);
}

.mm-drawer .form-control {
  height: 52px;
  padding: 0 1.1rem;
  border: 1px solid transparent;
  border-radius: 14px;
  background: var(--mm-surface-wash);
  font-size: 1rem;
  color: var(--mm-text);
  box-shadow: none;
  transition: border-color var(--mm-duration-mid) var(--mm-ease), box-shadow var(--mm-duration-mid) var(--mm-ease);
}

.mm-drawer textarea.form-control {
  height: auto;
  min-height: 8rem;
  padding: 1rem 1.1rem;
  line-height: 1.55;
  resize: vertical;
}

.mm-drawer .form-control::placeholder { color: var(--mm-faint); }
.mm-drawer .form-control:hover { border-color: var(--mm-line); }

.mm-drawer .form-control:focus {
  border-color: var(--mm-green-700);
  background: var(--mm-surface);
  box-shadow: 0 0 0 4px rgba(22, 182, 127, .15);
}

.mm-drawer__action {
  width: 100%;
  justify-content: center;
  gap: .75rem;
}


@media (max-width: 575.98px) {
  .mm-drawer__panel {
    top: .5rem;
    right: .5rem;
    bottom: .5rem;
    width: calc(100% - 1rem);
  }

  .mm-drawer__fields { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-drawer,
  .mm-drawer__backdrop,
  .mm-drawer__panel { transition: none; }
}

/* --- values --------------------------------------------------------------
   A dark band between open roles and the contact block, so two light
   sections never sit back to back. Six short principles in a 3 x 2 grid,
   each under a hairline that draws in as it arrives. Not numbered: they are
   a set, not a sequence. */
section.mm-values {
  padding-block: var(--mm-space-section);
}

.mm-values__head {
  margin-bottom: clamp(3rem, 6vw, 5rem);
}

.mm-values__head .mm-heading {
  grid-column: 1 / span 8;
  text-wrap: balance;
}

.mm-values__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 3vw, 3rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.mm-value {
  position: relative;
  padding-top: 1.5rem;
}

.mm-value::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--mm-line-on-inverse);
}

.mm-value::after {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--mm-green-300);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.2s var(--mm-ease-out) calc(.2s + var(--d, 0) * .12s);
}

.mm-value.is-in::after,
html:not(.mm-motion) .mm-value::after {
  transform: scaleX(.18);
}

.mm-motion .mm-value[data-mm-fade] {
  transition-delay: calc(.1s + var(--d, 0) * .12s);
}

.mm-value__title {
  margin: 0 0 .75rem;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.15;
  letter-spacing: -.025em;
  color: var(--mm-text-on-inverse);
}

.mm-value__body {
  margin: 0;
  max-width: 24rem;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mm-text-on-photo);
}

@media (max-width: 991.98px) {
  .mm-values__head .mm-heading { grid-column: 1 / -1; }
  .mm-values__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mm-value { --d: 0 !important; }
}

@media (max-width: 575.98px) {
  .mm-values__grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* ==========================================================================
   16  HOME VIEW
   Photography-led. Four parts, each scoped under its own .mm-h-* block:
     a  video hero ....... .mm-h-hero
     b  stages ........... .mm-h-stages  (three columns, fade in)
     c  portfolio band ... .mm-h-portfolio
     d  team ............. .mm-h-team
   The closing contact block lives in section 17; it is shared.

   Sections are qualified (section.mm-h-*) so they outrank the global
   `section { padding-block }` in 04 without !important.
   ========================================================================== */

/* --- a  video hero -------------------------------------------------------
   Full bleed, full height, under the overlay header. On scroll the hero
   pins while the frame scales in and its corners round (home.js), then it
   releases and the page carries on. Without JS it simply stays full bleed. */
section.mm-h-hero {
  padding: 0;
}

.mm-h-hero__frame {
  /* the mask makes browsers clip the video's own layer to the rounded
     corners too; without it the video can show square for a frame */
  -webkit-mask-image: -webkit-radial-gradient(white, black);
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  background: var(--mm-surface-inverse);
  color: var(--mm-text-on-inverse);
  isolation: isolate;
  transform-origin: 50% 50%;
  will-change: transform, border-radius;
}

/* the poster is painted here as well, so the loop fade and a slow first
   load both land on a picture rather than a flat colour */
.mm-h-hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  background-position: center;
  background-size: cover;
}

.mm-h-hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity .6s var(--mm-ease);
}

/* With JS running, the video waits invisibly over the poster until it is
   really painting frames (main.js adds .is-playing), then fades in. It
   fades back to the poster across the loop seam. Without JS it shows as
   soon as it plays. */
   .mm-motion .mm-h-hero__video { opacity: 0; }
   .mm-motion .mm-h-hero__frame.is-playing .mm-h-hero__video { opacity: 1; }
   .mm-h-hero__frame.is-looping .mm-h-hero__video,
   .mm-motion .mm-h-hero__frame.is-playing.is-looping .mm-h-hero__video { opacity: 0; }

.mm-h-hero__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mm-shade-hero);
}

.mm-h-hero__content {
  position: absolute;
  inset: auto 0 0;
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  row-gap: 2rem;
  align-items: end;
}

.mm-h-hero__title {
  grid-column: 1 / span 8;
  margin: 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: var(--mm-text-hero);
  line-height: 1;
  letter-spacing: var(--mm-tracking-display);
  color: var(--mm-text-on-inverse);
  text-wrap: balance;
}

.mm-h-hero__foot {
  grid-column: 9 / -1;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  padding-bottom: .4rem;
}

.mm-h-hero__lead {
  margin: 0;
  font-size: clamp(1rem, 1.05vw, 1.0625rem);
  line-height: 1.6;
  color: var(--mm-text-on-photo);
}

.mm-h-hero__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
}

@media (max-width: 991.98px) {
  .mm-h-hero__title,
  .mm-h-hero__foot { grid-column: 1 / -1; }
  .mm-h-hero__foot { max-width: 34rem; }
}

@media (max-width: 575.98px) {
  .mm-h-hero__ctas .mm-btn { flex: 0; }
  .mm-h-hero__lead { font-size: .975rem; }
}

/* --- b  stages -----------------------------------------------------------
   Three columns: photo, number and label, title, paragraph. Each card fades
   in as it arrives, a beat after the one before. Still by design. */
section.mm-h-stages {
  padding-block: var(--mm-space-section);
}

.mm-h-stages__head {
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

.mm-h-stages__head .mm-heading {
  grid-column: 1 / span 8;
}

.mm-h-stages__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(2.5rem, 4vw, 3rem) clamp(1.25rem, 2.5vw, 2.5rem);
}

.mm-h-stage {
  display: flex;
  flex-direction: column;
  gap: .9rem;
}

/* stagger the shared fade by card */
.mm-motion .mm-h-stage[data-mm-fade] {
  transition-delay: calc(.1s + var(--d, 0) * .12s);
}

.mm-h-stage__media {
  margin: 0 0 .6rem;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius-photo);
  overflow: hidden;
  background: var(--mm-surface-tint);
}

.mm-h-stage__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 1.2s var(--mm-ease-out);
}

.mm-h-stage:hover .mm-h-stage__media img {
  transform: scale(1.04);
}

.mm-h-stage__meta {
  display: flex;
  align-items: baseline;
  gap: .75rem;
  margin: 0;
  padding-bottom: .9rem;
  border-bottom: 1px solid var(--mm-line);
  font-size: .9375rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mm-text-muted);
}

.mm-h-stage__num {
  color: var(--mm-text-link);
  font-variant-numeric: tabular-nums;
}

.mm-h-stage__title {
  margin: .25rem 0 0;
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 1.8vw, 1.625rem);
  line-height: 1.12;
  letter-spacing: -.03em;
  color: var(--mm-text);
  text-wrap: balance;
}

.mm-h-stage__text {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mm-text-secondary);
}

@media (max-width: 991.98px) {
  .mm-h-stages__head .mm-heading { grid-column: 1 / -1; }
  .mm-h-stages__grid { grid-template-columns: 1fr; gap: 3.5rem; }
  .mm-h-stage__media { aspect-ratio: 4 / 3; }
  .mm-motion .mm-h-stage[data-mm-fade] { transition-delay: .1s; }
}

@media (prefers-reduced-motion: reduce) {
  .mm-h-stage__media img { transition: none; }
}

/* --- c  portfolio band --------------------------------------------------- */
section.mm-h-portfolio {
  padding-block: 0;
}

/* The band itself. Full bleed by default (and without JS); home.js clips it
   in to the content width first and lets it grow out as it scrolls in. */
.mm-h-portfolio__frame {
  position: relative;
  padding-block: clamp(6rem, 13vw, 12rem);
  overflow: hidden;
  color: var(--mm-text-on-inverse);
  background: var(--mm-surface-inverse);
  isolation: isolate;
}

.mm-h-portfolio__bg {
  position: absolute;
  inset: -12% 0;
  z-index: -2;
}

.mm-h-portfolio__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(.55) contrast(1.05);
}

.mm-h-portfolio__shade {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--mm-shade-band);
}

.mm-h-portfolio__top {
  row-gap: 2rem;
  align-items: end;
}

.mm-h-portfolio__top .mm-heading { grid-column: 1 / span 7; }

.mm-h-portfolio__lead {
  grid-column: 9 / -1;
  margin: 0;
  font-size: var(--mm-text-lead);
  line-height: 1.55;
  color: var(--mm-text-on-photo);
}

.mm-h-principles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-top: clamp(4rem, 9vw, 8rem);
}

.mm-h-principle {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 4rem;
  min-height: 14rem;
  padding: 1.75rem 1.75rem 0 0;
}

.mm-h-principle + .mm-h-principle {
  padding-left: 1.75rem;
  border-left: 1px solid var(--mm-line-on-inverse);
}

/* the top rule draws across as the row arrives */
.mm-h-principle::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 1px;
  background: var(--mm-glass-line);
  transform-origin: left;
}

.mm-motion .mm-h-principles .mm-h-principle::before {
  transform: scaleX(0);
  transition: transform 1.2s var(--mm-ease-out);
}

.mm-motion .mm-h-principles .mm-h-principle:nth-child(2)::before { transition-delay: .12s; }
.mm-motion .mm-h-principles .mm-h-principle:nth-child(3)::before { transition-delay: .24s; }
.mm-motion .mm-h-principles .mm-h-principle:nth-child(4)::before { transition-delay: .36s; }
.mm-motion .mm-h-principles.is-in .mm-h-principle::before { transform: scaleX(1); }

.mm-h-principle svg {
  width: 26px;
  height: 26px;
  color: var(--mm-green-300);
}

.mm-h-principle p {
  margin: 0;
  max-width: 15rem;
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--mm-text-on-photo);
}

@media (max-width: 991.98px) {
  .mm-h-portfolio__top .mm-heading,
  .mm-h-portfolio__lead { grid-column: 1 / -1; }

  .mm-h-principles {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    row-gap: 3rem;
  }

  .mm-h-principle {
    min-height: 0;
    gap: 2.5rem;
  }

  .mm-h-principle:nth-child(3) {
    padding-left: 0;
    border-left: 0;
  }
}

@media (max-width: 575.98px) {
  .mm-h-principles {
    grid-template-columns: 1fr;
    row-gap: 0;
  }

  .mm-h-principle,
  .mm-h-principle + .mm-h-principle {
    flex-direction: row;
    align-items: flex-start;
    gap: 1.25rem;
    padding: 1.5rem 0;
    border-left: 0;
  }

  .mm-h-principle svg {
    flex: 0 0 auto;
    margin-top: .15rem;
  }
}

/* --- d  team ------------------------------------------------------------- */
section.mm-h-team {
  padding-block: var(--mm-space-section);
}

.mm-h-team__grid {
  row-gap: 3rem;
  align-items: center;
}

.mm-h-team__media {
  grid-column: 1 / span 6;
  aspect-ratio: 4 / 5;
  border-radius: var(--mm-radius-photo);
  background: var(--mm-surface-tint);
}

.mm-h-team__media img {
  width: 100%;
  height: 112%;
  margin-top: -6%;
  object-fit: cover;
  object-position: left center;
}

.mm-h-team__copy { grid-column: 8 / -1; }
.mm-h-team__copy .mm-heading { margin-bottom: 2rem; }

.mm-h-team__text {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.mm-h-team__text .mm-lead {
  margin: 0;
  max-width: 34rem;
}

.mm-h-team__ctas {
  display: flex;
  flex-wrap: wrap;
  gap: .6rem;
  margin-top: 1rem;
}

@media (max-width: 991.98px) {
  .mm-h-team__media,
  .mm-h-team__copy { grid-column: 1 / -1; }
  .mm-h-team__media { aspect-ratio: 4 / 3; }
}


/* ==========================================================================
   17  SHARED VIEW PARTS
   Carried over from the previous build so About, FAQ, Contact and the
   membership blocks keep working. They read the aliases in section 02, so
   they picked up the new palette automatically. Migrate them to --mm-*
   tokens as you touch each view.
   ========================================================================== */

/* --- accordion ---------------------------------------------------------- */
.accordion-item {
  margin-bottom: 20px;
  border-radius: 10px !important;
  background-color: var(--mm-surface);
  border: 1px solid var(--mm-line) !important;
  box-shadow: none !important;
  padding: 0;
}

.accordion-header {
  border-radius: 10px !important;
}

.accordion-item>.accordion-header .accordion-button {
  border-radius: 10px;
  background-color: var(--mm-surface);
  border: 0;
  box-shadow: none !important;
  padding: 20px;
}

.accordion-button::after,
.accordion-button:not(.collapsed)::after {
  background-position: center;
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%230E6B4C' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M2 5L8 11L14 5'/%3e%3c/svg%3e");
}

.accordion-button:not(.collapsed) {
  box-shadow: none;
}

.accordion-button:focus {
  box-shadow: none;
  border-color: transparent;
}

.accordion-body {
  padding: 0 20px 20px;
  color: var(--mm-text-muted);
}

.accordion-button svg {
  fill: var(--mm-action);
}

/* --- forms -------------------------------------------------------------- */
.form-label {
  font-weight: 500;
  color: var(--mm-text);
}

.form-control {
  padding: 12px 16px;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
  background-color: var(--mm-surface);
  color: var(--mm-text);
  transition: var(--transition);
}

.form-control::placeholder {
  color: var(--mm-text-muted);
  opacity: 1;
}

.form-control:focus {
  border-color: var(--mm-action);
  box-shadow: 0 0 0 .15rem rgba(22, 182, 127, .18);
  background-color: var(--mm-white);
}

.input-group {
  background-color: var(--mm-surface-wash);
  border-radius: var(--mm-radius-xs);
  overflow: hidden;
}

.input-group-text {
  background-color: var(--mm-surface-wash);
  border: 0;
  color: var(--mm-text);
  border-radius: var(--mm-radius-xs) 0 0 var(--mm-radius-xs);
}

/* --- backgrounds -------------------------------------------------------- */
.bg-light {
  background-color: var(--mm-surface-wash) !important;
}

.bg {
  padding: var(--section-p-xs) var(--section-p-sm) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-sm {
  padding: var(--section-p-xs) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-xxs {
  padding: var(--section-p-xs) var(--section-p-xxs) !important;
  border-radius: var(--mm-radius-xs);
  border: 1px solid var(--mm-line);
}

.bg-pattern-dots {
  background-image: radial-gradient(rgba(10, 21, 18, .05) 1px, transparent 1.4px);
  background-size: 22px 22px;
}

/* --- offset image frames ------------------------------------------------ */
.fx {
  position: relative;
  display: inline-block;
  max-width: 100%;
  isolation: isolate;
}

.fx img {
  position: relative;
  z-index: 1;
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: var(--br-frame);
  border: 1px solid var(--mm-line);
}

.fx-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--br-frame);
  background: var(--mm-surface-tint);
  transform: translate(18px, 18px);
  transition: transform .35s ease;
}

.fx-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: var(--br-frame);
  border: 1.5px solid var(--mm-ink);
  transform: translate(-14px, -14px);
  transition: transform .35s ease;
}

.fx-frame:hover::before {
  transform: translate(8px, 8px);
}

.fx-frame:hover::after {
  transform: translate(-7px, -7px);
}

.fx-frame--left::before {
  background: var(--mm-surface-wash);
  transform: translate(-18px, 18px);
}

.fx-frame--left::after {
  transform: translate(14px, -14px);
}

.fx-frame--left:hover::before {
  transform: translate(-8px, 8px);
}

.fx-frame--left:hover::after {
  transform: translate(7px, -7px);
}

.fx-frame.fx-warm::before {
  background: var(--mm-green-200);
}

@media (max-width: 575.98px) {
  .fx-frame::before {
    transform: translate(10px, 10px);
  }

  .fx-frame::after {
    transform: translate(-8px, -8px);
  }

  .fx-frame--left::before {
    transform: translate(-10px, 10px);
  }

  .fx-frame--left::after {
    transform: translate(8px, -8px);
  }
}

/* --- oversized ghost numerals ------------------------------------------- */
.section-index {
  position: absolute;
  z-index: 0;
  top: -.34em;
  left: -.08em;
  font-size: clamp(5rem, 14vw, 11rem);
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
  color: var(--mm-emphasis);
  opacity: .09;
  pointer-events: none;
}

.section-index--sm {
  font-size: clamp(4rem, 11vw, 7rem);
}

/* --- numbered membership blocks ----------------------------------------- */
.feature-list {
  counter-reset: feat;
}

.feature-block {
  counter-increment: feat;
  position: relative;
  padding: 1.6rem 0 0 3rem;
  margin-top: 1.6rem;
  border-top: 1px solid var(--mm-line);
}

.feature-block:first-child {
  padding-top: 0;
  margin-top: 0;
  border-top: 0;
}

.feature-block::before {
  content: counter(feat, decimal-leading-zero);
  position: absolute;
  left: 0;
  top: 1.6rem;
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: .04em;
  color: var(--mm-emphasis);
}

.feature-block:first-child::before {
  top: 0;
}

@media (max-width: 575.98px) {
  .feature-block {
    padding-left: 2.5rem;
  }
}

/* --- contact page CTAs -------------------------------------------------- */
.contact-cta-section {
  padding-block: var(--mm-space-section);
}

.contact-cta-label {
  font-size: var(--fs-sm);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--mm-emphasis);
  margin-bottom: .75rem;
}

.contact-cta-card {
  background-color: var(--mm-surface);
  border: 1px solid var(--mm-line);
  border-radius: var(--mm-radius-md);
  padding: 2rem 1.75rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  transition: border-color var(--transition-slow);
}

.contact-cta-card:hover {
  border-color: var(--mm-action);
  box-shadow: none;
  transform: none;
}

.contact-cta-card--featured {
  border-color: var(--mm-action);
  background: linear-gradient(135deg, var(--mm-white) 70%, var(--mm-surface-wash) 100%);
}

.contact-cta-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--mm-radius-xs);
  background-color: var(--mm-surface-tint);
  color: var(--mm-text-link);
  margin-bottom: 1.25rem;
  flex-shrink: 0;
}

.contact-cta-icon--accent {
  background-color: var(--mm-surface-wash);
  color: var(--mm-emphasis);
}

.contact-cta-card-label {
  font-size: var(--fs-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--mm-text-muted);
  margin-bottom: .4rem;
}

.contact-cta-card-value {
  font-size: var(--fs-h5);
  font-weight: 600;
  color: var(--mm-text);
  text-decoration: none;
  line-height: 1.3;
  margin-bottom: .5rem;
  transition: var(--transition);
}

.contact-cta-card-value:hover {
  color: var(--mm-text-link);
}

.contact-cta-card-note {
  font-size: var(--fs-sm);
  color: var(--mm-text-muted);
  margin: 0;
}

.cta-band {
  position: relative;
  width: 100vw;
  left: 50%;
  transform: translateX(-50%);
  background: var(--mm-surface-wash);
  border-top: 1px solid var(--mm-line);
  padding: clamp(3.5rem, 7vw, 6rem) 0;
}

.contact-cta-row {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  padding: 1.4rem 1.5rem;
  transition: border-color var(--transition-slow);
}

.contact-cta-row:hover {
  border-color: var(--mm-action);
}

.contact-cta-row--featured {
  border-color: var(--mm-action);
  border-left: 3px solid var(--mm-action);
}

.contact-cta-row__body {
  display: flex;
  flex-direction: column;
}

.contact-cta-row .contact-cta-icon {
  margin-bottom: 0;
}

/* --- contact + support panels ------------------------------------------- */
.contact-form-panel {
  position: relative;
  background: var(--mm-surface);
  border: 1px solid var(--mm-line);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  height: 100%;
}

.contact-form-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 52px;
  height: 3px;
  background: var(--mm-action);
}

.contact-aside {
  background: var(--mm-surface-wash);
  border: 1px solid var(--mm-line);
  padding: clamp(1.5rem, 3vw, 2.25rem);
  height: 100%;
}

.contact-aside__item {
  padding-top: 1.1rem;
  margin-top: 1.1rem;
  border-top: 1px solid var(--mm-line);
}

.contact-aside__item a:hover {
  color: var(--mm-text-link) !important;
}

.support-statement {
  text-align: center;
  border-block: 1px solid var(--mm-line);
  padding: clamp(3rem, 6vw, 5rem) 0;
}

.support-statement p {
  font-size: clamp(1.15rem, 2.4vw, 1.5rem);
  line-height: 1.6;
  color: var(--mm-text);
  max-width: 46rem;
  margin-inline: auto;
}


/* ==========================================================================
   18  ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }

  .mm-marquee__track {
    animation: none;
  }

  .fx-frame::before, .fx-frame::after {
    transition: none;
  }

}


/* ==========================================================================
   19  LEGAL PAGES
   Plain page hero, then the text beside a sticky contents list whose
   current entry highlights as you read. A narrow measure and a calm heading
   rhythm, since these pages are read rather than scanned.
   ========================================================================== */
section.mm-legal-page {
  padding-block: 0 var(--mm-space-section);
}

.mm-legal-page .mm-grid {
  row-gap: 2.5rem;
  align-items: start;
}

/* contents */
.mm-legal-toc {
  grid-column: 1 / span 3;
  position: sticky;
  top: calc(var(--mm-nav-offset) + var(--mm-nav-h) + 2rem);
}

.mm-legal-toc__label {
  margin: 0 0 1rem;
  font-size: .875rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mm-text-muted);
}

.mm-legal-toc__list {
  display: flex;
  flex-direction: column;
  gap: .15rem;
  margin: 0;
  padding: 0 0 0 1rem;
  list-style: none;
  border-left: 1px solid var(--mm-line);
}

.mm-legal-toc__list a {
  position: relative;
  display: block;
  padding: .4rem 0;
  font-size: .9375rem;
  line-height: 1.35;
  color: var(--mm-text-muted);
  transition: color var(--mm-duration-mid) var(--mm-ease);
}

.mm-legal-toc__list a::before {
  content: "";
  position: absolute;
  top: .4rem;
  bottom: .4rem;
  left: calc(-1rem - 1px);
  width: 2px;
  border-radius: 2px;
  background: var(--mm-action);
  transform: scaleY(0);
  transition: transform .45s var(--mm-ease-out);
}

.mm-legal-toc__list a:hover { color: var(--mm-text); }

.mm-legal-toc__list a[aria-current] {
  color: var(--mm-text-link);
  font-weight: 500;
}

.mm-legal-toc__list a[aria-current]::before { transform: scaleY(1); }

/* the text */
.mm-legal {
  grid-column: 5 / -1;
  max-width: 46rem;
}

.mm-legal__updated {
  display: inline-block;
  margin: 0 0 1rem;
  padding: .4rem .8rem;
  border-radius: var(--mm-radius-pill);
  background: var(--mm-tint-brand);
  font-size: .875rem;
  font-weight: 500;
  color: var(--mm-text-link);
}

.mm-legal h2 {
  margin: 3.25rem 0 1rem;
  padding-top: 2rem;
  border-top: 1px solid var(--mm-line);
  font-family: var(--mm-font-display);
  font-weight: var(--mm-weight-display);
  font-size: clamp(1.375rem, 2vw, 1.75rem);
  line-height: 1.2;
  letter-spacing: -.025em;
  color: var(--mm-text);
}

.mm-legal__updated + h2 {
  margin-top: 1.5rem;
}

.mm-legal p,
.mm-legal li {
  font-size: 1.0625rem;
  line-height: 1.75;
  color: var(--mm-text-secondary);
}

.mm-legal p { margin: 0 0 1.1rem; }

.mm-legal ul {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
}

.mm-legal li {
  position: relative;
  margin-bottom: .55rem;
  padding-left: 1.5rem;
}

.mm-legal li::before {
  content: "";
  position: absolute;
  top: .72em;
  left: .25rem;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mm-green-600);
}

.mm-legal a {
  color: var(--mm-text-link);
  font-weight: 500;
}

.mm-legal a:hover { color: var(--mm-text-link-hover); }

@media (max-width: 991.98px) {
  .mm-legal-toc { display: none; }
  .mm-legal { grid-column: 1 / -1; }
}