/* Self-hosted fonts (Sep 2, 2026): moved off fonts.googleapis.com so there is no render-blocking cross-origin request. Figtree is a variable font (300-900). Font files are NOT hashed: if a font file ever changes, rename it. */
@font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/caprasimo-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Caprasimo"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/caprasimo-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(assets/fonts/figtree-latin-ext.woff2) format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Figtree"; font-style: normal; font-weight: 300 900; font-display: swap; src: url(assets/fonts/figtree-latin.woff2) format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Metric-matched local fallbacks (Sep 5, 2026): same advance width + vertical metrics as the web fonts, so the swap from fallback to Figtree/Caprasimo causes no layout shift (CLS). size-adjust was calibrated in Chrome by measuring a sample sentence in the web font vs Arial (the variable-font OS/2 xAvgCharWidth gave 120%/137%, which was wrong); vertical overrides = woff2 ascent/descent divided by size-adjust. */
@font-face { font-family: "Figtree Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 101.32%; ascent-override: 93.76%; descent-override: 24.67%; line-gap-override: 0%; }
@font-face { font-family: "Caprasimo Fallback"; src: local("Arial"), local("Helvetica"), local("Liberation Sans"); size-adjust: 113.00%; ascent-override: 81.24%; descent-override: 20.27%; line-gap-override: 0%; }

/* Organic - design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md. */
:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps - generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", "Caprasimo Fallback", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", "Figtree Fallback", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation - derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components - built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
/* .eyebrow - visual twin of h6, used for decorative section kickers so real
   heading order (h1 > h2 > h3) stays intact for screen readers and SEO. */
.eyebrow { font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.2; margin: 0; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* - rules - */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* - buttons - */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none; white-space: nowrap;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px -
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent-700); color: var(--color-bg); }
/* `.nav a { color: inherit }` outranks `.btn-primary` on specificity, which left
   the nav CTA with dark text on a dark button. Restate it at higher specificity. */
.nav a.btn-primary, .nav a.btn-primary:hover { color: var(--color-bg); }
.btn-primary:hover { background: var(--color-accent-800); }
.btn-primary:active { background: var(--color-accent-900); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* - forms - */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* - cards - */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); } /* Sep 21 2026: accent was 2.69:1 on the card surface (Lighthouse color-contrast on partners.html); accent-700 is 5.1:1 */
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* - tags - */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }

/* - navigation - */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-800); }

/* - rounded frame: everything softens, small controls go pill - */
.card { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }


/* ---- socials hub page ---- */
.socials-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-4); margin-top: var(--space-6);
}
@media (max-width: 900px) { .socials-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 580px) { .socials-grid { grid-template-columns: 1fr; } }
.social-card {
  display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-neutral-100); color: inherit; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: background 160ms ease, box-shadow 160ms ease, transform 160ms ease;
}
.social-card:hover { background: var(--color-accent-100); box-shadow: var(--shadow-md); color: inherit; } /* Sep 16 2026: lift via data-pop */
.social-card:active { background: var(--color-accent-200); transform: translateY(0); }
.social-card[hidden] { display: none; }
.social-glyph {
  display: inline-flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 999px;
  background: var(--color-accent-200); color: var(--color-accent-800);
}
.social-open { font-family: var(--font-heading); font-size: 15px; color: var(--color-accent-700); display: flex; align-items: center; gap: 6px; }
.socials-link {
  display: inline-flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  width: 100%; padding: var(--space-4) var(--space-6); border-radius: var(--radius-lg);
  background: var(--color-accent-2-100); color: var(--color-text); text-decoration: none;
  font-family: var(--font-heading); font-size: 18px;
  transition: background 160ms ease, transform 160ms ease;
}
.socials-link:hover { background: var(--color-accent-2-200); color: var(--color-text); transform: translateY(-2px); }
.socials-link:active { background: var(--color-accent-2-300); transform: translateY(0); }

/* (the mobile-only .call-bar was replaced by .mn-callbar in the Sep 10 2026 alive restyle) */
/* ---- header dropdown ---- */
.nav-drop { position: relative; display: inline-flex; }
.nav-drop-trigger {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 14px; color: inherit;
  background: none; border: 0; padding: 0; cursor: pointer;
}
.nav-drop-trigger svg { transition: transform 140ms ease; }
.nav-drop:hover .nav-drop-trigger,
.nav-drop:focus-within .nav-drop-trigger { color: var(--color-accent); }
.nav-drop:hover .nav-drop-trigger svg,
.nav-drop:focus-within .nav-drop-trigger svg { transform: rotate(180deg); }
.nav-drop-menu {
  position: absolute; top: 100%; left: 0; z-index: 70;
  display: none; min-width: 200px; padding-top: var(--space-2);
}
.nav-drop:hover .nav-drop-menu,
.nav-drop:focus-within .nav-drop-menu { display: block; }
.nav-drop-inner {
  display: flex; flex-direction: column;
  padding: var(--space-2); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-md);
}
.nav-drop-inner a {
  padding: var(--space-2) var(--space-3); border-radius: 999px;
  font-size: 14px; color: inherit; text-decoration: none; white-space: nowrap;
}
.nav-drop-inner a:hover { background: var(--color-accent-100); color: var(--color-accent-700); }
.nav-drop-inner a:active { background: var(--color-accent-200); }
@media (max-width: 900px) {
  .nav-drop-menu { position: static; min-width: 0; padding-top: var(--space-1); }
}

/* ---- "Follow Melod" row (header dropdown on all nav pages + index mobile menu), Sep 5 2026 ----
   Scoped at 3 classes so it beats `.nav-drop-inner a` / `.nav a:hover`; `color: inherit` beats each page's inline `a { color }`. */
.nav-follow-label {
  margin: var(--space-2) var(--space-3) var(--space-1); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.nav-follow { display: flex; flex-wrap: wrap; gap: 10px; padding: 0 var(--space-3) var(--space-2); }
.nav-follow a, .nav-drop-inner .nav-follow a {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  width: 40px; height: 40px; padding: 0; border-radius: 50%;
  border: 1.5px solid var(--color-divider); background: transparent; color: inherit;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.nav-follow a svg { display: block; width: 20px; height: 20px; }
.nav-follow a:hover, .nav-follow a:focus-visible,
.nav-drop-inner .nav-follow a:hover, .nav-drop-inner .nav-follow a:focus-visible {
  background: var(--color-accent); border-color: var(--color-accent); color: #fff;
}
.nav-follow a:focus-visible, .nav-drop-inner .nav-follow a:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
#mobile-menu .nav-follow { padding: 0 0 var(--space-1); }
#mobile-menu .nav-follow-label { margin: var(--space-2) 0 var(--space-1); }
@media (max-width: 900px) {
  .nav-follow a, .nav-drop-inner .nav-follow a, #mobile-menu .nav-follow a { width: 44px; height: 44px; }
}


/* - desktop tel:/mailto: fallback -
   Windows PCs with no default mail or calling app do nothing on click.
   The toast copies the value and offers a webmail compose link. */
.contact-toast {
  position: fixed; right: var(--space-4); bottom: var(--space-4); z-index: 70;
  display: none; flex-direction: column; gap: var(--space-2);
  width: min(360px, calc(100vw - var(--space-6)));
  padding: var(--space-4); border-radius: calc(var(--radius-lg) * 1.15);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.contact-toast[data-open="1"] { display: flex; }
.contact-toast-head { display: flex; gap: var(--space-2); align-items: flex-start; padding-right: var(--space-4); }
.contact-toast-dot {
  flex: none; width: 28px; height: 28px; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
  background: var(--color-accent-2-100); color: var(--color-accent-2-800);
}
.contact-toast-title { margin: 0; font-family: var(--font-heading); font-size: 17px; line-height: 1.25; }
.contact-toast-val { margin: 0; font-size: 15px; word-break: break-word; }
.contact-toast-note { margin: 0; font-size: 13px; line-height: 1.5; opacity: 0.8; text-wrap: pretty; }
.contact-toast-actions { display: flex; gap: var(--space-2); flex-wrap: wrap; }
.contact-toast-close {
  position: absolute; top: var(--space-2); right: var(--space-2);
  width: 30px; height: 30px; border-radius: 999px; cursor: pointer;
  border: 0; background: transparent; color: var(--color-text);
  font-size: 20px; line-height: 1;
}
.contact-toast-close:hover { background: var(--color-accent-100); }
.contact-toast-close:active { background: var(--color-accent-200); }
.contact-toast-close:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
@media (max-width: 700px) { .contact-toast { display: none !important; } }


/* the nine role cards on the Your Team page are links */
.role-card,
.role-card:link,
.role-card:visited,
.role-card:hover,
.role-card:focus,
.role-card:active { text-decoration: none; color: var(--color-text); transition: transform 0.18s ease, box-shadow 0.18s ease; }
/* the card is a link, so nothing inside it may pick up link colouring on hover */
.role-card .card-title,
.role-card:hover .card-title { color: var(--color-text); }
.role-card .card-body,
.role-card:hover .card-body { color: var(--color-text); }
.role-card { cursor: pointer; border: 1.5px solid var(--color-divider); }
.role-card:hover { box-shadow: var(--shadow-md); border-color: var(--color-accent-300); } /* Sep 16 2026: lift via data-pop */

/* the arrow line reads as a button so the card is obviously clickable */
.role-cta {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 17px; border-radius: 999px;
  border: 1.5px solid currentColor;
  background: transparent;
  transition: background 0.18s ease;
}
.role-card:hover .role-cta { background: color-mix(in oklch, currentColor 14%, transparent); }
@media (prefers-reduced-motion: reduce) { .role-cta { transition: none; } }
.role-card:active { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
.role-card:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.role-num { transition: transform 0.18s ease; }
.role-card:hover .role-num { transform: scale(1.09); }
@media (prefers-reduced-motion: reduce) {
  .role-card, .role-num { transition: none; }
  .role-card:hover { transform: none; }
  .role-card:hover .role-num { transform: none; }
}


/* other-services: columns pack tight so a short card leaves no gap below it */
.svc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); }
@media (max-width: 760px) { .svc-grid { grid-template-columns: minmax(0, 1fr); } }


/* - floating contact bar -
   Service pages run 500-800 words; the CTA at the bottom is too far down.
   This keeps Call / Email / Book reachable the whole way. It uses real
   tel: and mailto: links so the desktop fallback toast and the GA click
   tracking both pick it up with no extra wiring. */


/* ---- 3D depth layer, Sep 9 2026 (pairs with assets/mn-3d.js) ----
   Trimmed Sep 10 2026 for the "alive" restyle (Zdog hero, cubes, scroll rise removed) and again Sep 16 2026 when mn-3d.js was
   retired: the pointer tilt + sheen moved to the uniform [data-pop] layer in mn-alive.js. What stays here is pure CSS:
   button lift, dropdown flip, and the unused .mn-depth hook. Every motion rule sits under
   prefers-reduced-motion: no-preference and (hover: hover). The tilt owns `transform`; the reveal layer only ever
   animates `translate` / `opacity`, so the two never fight. Never put .mn-tilt on the quick form. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .btn { transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease, border-color 0.18s ease; }
  .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 18px -10px color-mix(in srgb, #2e2b25 55%, transparent); }
  .btn:active { transform: translateY(0) scale(0.985); box-shadow: none; }
  .btn:disabled, .btn:disabled:hover { transform: none; box-shadow: none; }

  .nav-drop-inner { transform-origin: 50% 0; animation: mn-flip 0.24s cubic-bezier(0.2, 0.8, 0.2, 1) both; }

  /* Sep 16 2026: the .mn-tilt rules left with mn-3d.js; the uniform [data-pop] layer at the end of this file replaces them */
}
@keyframes mn-flip {
  from { opacity: 0; transform: perspective(700px) rotateX(-16deg) translateY(-4px); }
  to { opacity: 1; transform: none; }
}
.mn-depth { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }


/* ---- "Alive" restyle, Sep 10 2026 (Claude Design mockups: Homepage Alive / Inner Pages Alive) : pairs with assets/mn-alive.js ----
   Reveals animate the individual `translate` and `opacity` properties, never `transform` (the 3D tilt owns that).
   The hidden start state is guarded by @media (scripting: enabled): with scripts off, nothing is ever invisible.
   Every animation is switched off at the end of this block under prefers-reduced-motion. Photo headers keep their
   image absolutely positioned inside a min-height band, so text never waits for the image and CLS stays 0. */
@media (scripting: enabled) { .rv { opacity: 0; translate: 0 24px; } }
.rv { transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); }
.rv.rv-fast { transition-duration: .35s; transition-delay: 0s !important; } /* already in the viewport when the script ran: no slow fade (Speed Index) */
.rv.in { opacity: 1; translate: 0 0; }
.rv.d1 { transition-delay: .12s; } .rv.d2 { transition-delay: .24s; } .rv.d3 { transition-delay: .36s; }
.mn-lift { transition: opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1), transform .4s ease, box-shadow .4s ease; }
@keyframes mn-rise { from { opacity: 0; translate: 0 24px; } to { opacity: 1; translate: 0 0; } }
@keyframes mn-rise-h1 { from { translate: 0 24px; } to { translate: 0 0; } }
@keyframes mn-kb { from { scale: 1.04; } to { scale: 1.14; } }
@keyframes mn-drift1 { from { translate: 0 0; } to { translate: 22px -30px; } }
@keyframes mn-drift2 { from { translate: 0 0; } to { translate: -26px 20px; } }
@keyframes mn-scrollline { 0% { transform: scaleY(0); transform-origin: top; } 50% { transform: scaleY(1); transform-origin: top; } 51% { transform-origin: bottom; } 100% { transform: scaleY(0); transform-origin: bottom; } }
@keyframes mn-pulse { 0%, 100% { box-shadow: var(--shadow-lg), 0 0 0 0 rgba(198,113,57,.5); } 60% { box-shadow: var(--shadow-lg), 0 0 0 16px rgba(198,113,57,0); } }
@keyframes mn-marquee { from { translate: 0 0; } to { translate: -50% 0; } }

/* shared pill buttons */
.mn-btn-hero, .mn-btn-ghost, .mn-btn-cream, .mn-btn-outline-cream, .mn-btn-sage, .mn-btn-sage-outline, .mn-link-pill {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 24px; border-radius: 999px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 16px; line-height: 1.2; text-decoration: none; white-space: nowrap;
  transition: background .2s ease, color .2s ease, transform .18s ease, box-shadow .18s ease;
}
.mn-btn-hero { background: var(--color-accent-700); color: var(--color-bg); box-shadow: var(--shadow-lg); }
.mn-btn-hero:hover { background: var(--color-accent-800); color: var(--color-bg); }
.mn-btn-ghost { background: rgba(32,30,29,.28); border: 1.5px solid rgba(245,234,216,.75); color: var(--color-bg); } /* no backdrop-filter: it sits over an animated layer on mobile */
.mn-btn-ghost:hover { background: rgba(245,234,216,.3); color: var(--color-bg); }
.mn-btn-cream { background: var(--color-bg); color: var(--color-accent-800); }
.mn-btn-cream:hover { background: var(--color-accent-100); color: var(--color-accent-900); }
.mn-btn-outline-cream { border: 1.5px solid var(--color-accent-100); color: var(--color-bg); }
.mn-btn-outline-cream:hover { background: rgba(245,234,216,.12); color: var(--color-bg); }
.mn-btn-sage { background: var(--color-accent-2-700); color: var(--color-bg); }
.mn-btn-sage:hover { background: var(--color-accent-2-800); color: var(--color-bg); }
.mn-btn-sage-outline { border: 2px solid var(--color-accent-2-700); color: var(--color-accent-2-800); padding: 12px 22px; }
.mn-btn-sage-outline:hover { background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.mn-link-pill { border: 2px solid var(--color-accent-700); color: var(--color-accent-700); padding: 11px 20px; }
.mn-link-pill:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .mn-btn-hero:hover, .mn-btn-ghost:hover, .mn-btn-cream:hover, .mn-btn-outline-cream:hover, .mn-btn-sage:hover, .mn-btn-sage-outline:hover, .mn-link-pill:hover { transform: translateY(-2px); }
}
.mn-pill { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; padding: 6px 14px; border-radius: 999px; background: rgba(245,234,216,.18); border: 1px solid rgba(245,234,216,.5); color: var(--color-bg); font-size: 13px; font-weight: 600; letter-spacing: .04em; line-height: 1.4; }

/* focus: accent 2px ring on every new control, haloed so it reads on dark and light */
.mn-tile-toggle:focus-visible, .mn-tile-close:focus-visible, .mn-tile-links a:focus-visible, .mn-tab:focus-visible, .mn-faq-q:focus-visible,
.mn-callbar a:focus-visible, .mn-btn-hero:focus-visible, .mn-btn-ghost:focus-visible, .mn-link-pill:focus-visible, .mn-btn-sage:focus-visible,
.mn-btn-sage-outline:focus-visible, .mn-btn-cream:focus-visible, .mn-btn-outline-cream:focus-visible, .mn-article-card:focus-visible,
.mn-crumb a:focus-visible, .mn-cta-actions a:focus-visible, .mn-video-pill:focus-visible {
  outline: 2px solid var(--color-accent); outline-offset: 3px; box-shadow: 0 0 0 5px var(--color-bg);
}

/* nav links and dropdown triggers are 21.7px tall text; give every nav target the 24px minimum axe target-size wants
   (Lighthouse 13 flags them on the mobile inner-page header where they sit 17px apart) */
.nav-links > a, .nav-drop-trigger { min-height: 24px; display: inline-flex; align-items: center; }

/* ---- homepage: fixed transparent header over the photo hero (desktop only; the mobile header stays the sticky cream bar) ---- */
.mn-home main > section { scroll-margin-top: 84px; }
@media (min-width: 901px) {
  .mn-nav-hero { position: fixed !important; left: 0; right: 0; top: 0; background: transparent !important; border-bottom-color: transparent !important; backdrop-filter: none !important; transition: background .35s ease, border-color .35s ease; }
  .mn-nav-hero .nav-brand, .mn-nav-hero .text-muted { color: var(--color-bg); text-shadow: 0 1px 12px rgba(32,30,29,.5); }
  .mn-nav-hero .nav-links { padding: 4px 6px !important; border-radius: 999px; background: rgba(245,234,216,.62); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); gap: 2px !important; transition: background .35s ease; }
  .mn-nav-hero .nav-links > a, .mn-nav-hero .nav-links .nav-drop-trigger { color: var(--color-text); padding: 8px 12px; border-radius: 999px; font-weight: 600; transition: background .2s ease, color .2s ease; }
  .mn-nav-hero .nav-links > a:hover, .mn-nav-hero .nav-drop:hover .nav-drop-trigger, .mn-nav-hero .nav-drop:focus-within .nav-drop-trigger { background: rgba(245,234,216,.92); color: var(--color-accent-800); }
  .mn-nav-hero a.btn-primary[href$="partners.html"] { background: transparent; border-color: rgba(245,234,216,.75); color: var(--color-bg); }
  .mn-nav-hero a.btn-primary[href$="partners.html"]:hover { background: rgba(245,234,216,.2); color: var(--color-bg); }
  .mn-nav-hero.is-solid { background: color-mix(in srgb, var(--color-bg) 92%, transparent) !important; border-bottom-color: var(--color-divider) !important; backdrop-filter: blur(6px) !important; -webkit-backdrop-filter: blur(6px); }
  .mn-nav-hero.is-solid .nav-brand { color: inherit; text-shadow: none; }
  .mn-nav-hero.is-solid .text-muted { color: color-mix(in srgb, var(--color-text) 70%, transparent); text-shadow: none; }
  .mn-nav-hero.is-solid .nav-links { background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .mn-nav-hero.is-solid a.btn-primary[href$="partners.html"] { border-color: var(--color-divider); color: var(--color-text); }
  .mn-nav-hero.is-solid a.btn-primary[href$="partners.html"]:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); color: var(--color-text); }
}
@media (max-width: 900px) { .mn-nav-book { display: none !important; } }

/* ---- homepage hero ---- */
.mn-hero { position: relative; min-height: 100svh; display: grid; align-items: end; overflow: hidden; background: var(--color-accent-900); color: var(--color-bg); }
.mn-hero-media, .mn-hdr-media { position: absolute; inset: -6% 0; overflow: hidden; }
.mn-hdr-media { inset: 0; } /* Sep 21 2026 (Inner Pages Alive v2): inner headers are a static photo, the Ken Burns drift stays on the homepage hero only */
.mn-hero-media img, .mn-hdr-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-hero-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32,30,29,.9) 0%, rgba(32,30,29,.8) 50%, rgba(32,30,29,.7) 100%); } /* Sep 16 2026: deepened for the six-photo carousel; cream copy measures >= 6.1:1 on the lightest row of every photo (was 2.8 on Uptown Waterloo at .88/.6/.42) */
.mn-hero-grid { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr); gap: var(--space-8); align-items: end; padding: 120px var(--space-4) 64px; max-width: 1360px; margin: 0 auto; width: 100%; box-sizing: border-box; }
.mn-hero-copy { display: flex; flex-direction: column; gap: 20px; }
.mn-hero h1 { margin: 0; color: var(--color-bg); font-size: clamp(38px, 5.4vw, 70px); line-height: .98; max-width: 16ch; text-shadow: 0 2px 10px rgba(32,30,29,.55); text-wrap: pretty; }
.mn-hero-copy p { margin: 0; color: var(--color-bg); text-shadow: 0 1px 6px rgba(32,30,29,.6); }
.mn-hero-lede { max-width: 46ch; font-size: clamp(16px, 1.4vw, 19px); line-height: 1.5; }
.mn-hero-where { font-size: 14px; display: flex; align-items: center; gap: 6px; max-width: 54ch; }
.mn-hero-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.mn-scroll-hint { display: flex; align-items: center; gap: 12px; margin-top: 12px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-bg); }
.mn-scroll-hint i { display: block; width: 2px; height: 40px; background: var(--color-bg); border-radius: 2px; }
.mn-portrait-wrap { position: relative; justify-self: end; width: min(100%, 340px); aspect-ratio: 1; }
.mn-orb { position: absolute; border-radius: 50%; opacity: .92; aspect-ratio: 1; }
.mn-orb-a { top: -8%; right: -10%; width: 46%; background: var(--color-accent); }
.mn-orb-b { bottom: -6%; left: -12%; width: 38%; background: var(--color-accent-2); }
.mn-portrait { position: absolute; inset: 0; border-radius: 50%; overflow: hidden; box-shadow: var(--shadow-lg); border: 6px solid rgba(245,234,216,.85); }
.mn-portrait img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; display: block; }
.mn-video-pill { position: absolute; left: 6%; bottom: 4%; display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px 8px 8px; border-radius: 999px; background: var(--color-bg); color: var(--color-text); box-shadow: var(--shadow-md); font-size: 13px; font-weight: 700; white-space: nowrap; }
.mn-video-pill i { width: 30px; height: 30px; border-radius: 50%; background: var(--color-accent-700); color: var(--color-bg); display: grid; place-items: center; font-style: normal; font-size: 11px; flex: none; }
@media (prefers-reduced-motion: no-preference) {
  /* the 26s Ken Burns zoom starts only after `load` (mn-alive.js adds html.mn-ready), so the LCP/TBT window is not paying for a
     full-viewport animated layer */
  .mn-hero-media img.is-on, .mn-hero-media:not(.is-live) img:first-child { animation: mn-kb 26s ease-in-out infinite alternate; animation-play-state: paused; }
  html.mn-ready .mn-hero-media img.is-on, html.mn-ready .mn-hero-media:not(.is-live) img:first-child { animation-play-state: running; }
  .mn-hero .mn-pill, .mn-hero-lede, .mn-hero-where, .mn-hero-ctas, .mn-scroll-hint, .mn-portrait-wrap { animation: mn-rise .6s cubic-bezier(.2,1,.3,1) backwards; }
  .mn-hero .mn-pill { animation-delay: .05s; } .mn-hero-lede { animation-delay: .2s; } .mn-hero-where { animation-delay: .28s; } .mn-hero-ctas { animation-delay: .36s; } .mn-scroll-hint { animation-delay: .5s; } .mn-portrait-wrap { animation-delay: .3s; }
  .mn-hero h1 { animation: mn-rise-h1 .6s cubic-bezier(.2,1,.3,1) .1s backwards; }
  .mn-orb-a { animation: mn-drift1 12s ease-in-out infinite alternate; }
  .mn-orb-b { animation: mn-drift2 15s ease-in-out infinite alternate; }
  .mn-scroll-hint i { animation: mn-scrollline 2.2s ease-in-out infinite; }
}

/* ---- numbers strip ---- */
.mn-numbers { padding: 48px var(--space-4) 8px; }
.mn-numbers-grid { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 20px; }
.mn-num { display: flex; flex-direction: column; gap: 4px; }
.mn-num b { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(34px, 4vw, 52px); line-height: 1; color: var(--color-accent-700); font-variant-numeric: tabular-nums; }
.mn-num span { font-size: 14px; color: var(--color-neutral-700); }

/* ---- lead section (quick form keeps its ids, fields, consent box and handler) ---- */
.mn-lead { max-width: 1360px; margin: 0 auto; padding: var(--space-6) var(--space-4) var(--space-8); }
.mn-lead-grid { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--space-8); align-items: start; }
.mn-lead-copy h2 { margin: 0 0 var(--space-3); font-size: clamp(28px, 3.6vw, 40px); line-height: 1.05; max-width: 20ch; }
@media (max-width: 900px) { .mn-lead-grid { grid-template-columns: 1fr; } }

/* ---- section heads, service tiles ---- */
.mn-sec-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; margin-bottom: 28px; }
.mn-sec-head h2 { margin: 0; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; max-width: 20ch; }
.mn-tiles { padding: 24px var(--space-4) 64px; }
.mn-tiles-wrap, .mn-article-wrap { max-width: 1360px; margin: 0 auto; }
.mn-tile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; }
.mn-tile { position: relative; border-radius: var(--radius-lg); overflow: clip; min-height: 520px; /* clip, not hidden (Sep 16 2026): the slide-up panel's translateY adds scrollable overflow, and a hidden box is still a scroll container that scrollIntoView/focus can scroll by ~200px, exposing the tile's dark ground; clip can never scroll */ box-shadow: var(--shadow-md); background: var(--color-accent-900); cursor: pointer; isolation: isolate; transition: opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.8,.2,1), box-shadow .5s; }
@media (hover: hover) { .mn-tile:hover .mn-tile-media { transform: scale(1.06); } } /* Sep 16 2026: the lift itself comes from data-pop */
.mn-tile-media { position: absolute; inset: 0; transition: transform .8s cubic-bezier(.2,.8,.2,1); }
.mn-tile-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-tile-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32,30,29,.82), rgba(32,30,29,.08) 55%); }
.mn-tile-face { position: absolute; left: 24px; right: 24px; bottom: 24px; display: flex; justify-content: space-between; align-items: end; gap: 12px; color: var(--color-bg); }
.mn-tile-kicker { display: block; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; margin-bottom: 6px; }
.mn-tile-title { font-family: var(--font-heading); font-size: clamp(28px, 3vw, 40px); line-height: 1; display: block; text-shadow: 0 1px 6px rgba(32,30,29,.45); }
.mn-tile-toggle { width: 52px; height: 52px; border-radius: 50%; border: 0; background: var(--color-bg); color: var(--color-text); display: grid; place-items: center; font-size: 30px; font-weight: 300; line-height: 1; flex: none; cursor: pointer; transition: transform .4s; padding: 0; font-family: var(--font-body); }
.mn-tile.is-open .mn-tile-toggle { transform: rotate(45deg); }
.mn-tile-panel { position: absolute; inset: 0; background: var(--color-accent-800); color: var(--color-accent-100); padding: 28px; display: flex; flex-direction: column; gap: 16px; transform: translateY(101%); visibility: hidden; transition: transform .55s cubic-bezier(.2,.8,.2,1), visibility 0s linear .55s; cursor: default; }
.mn-tile.is-open .mn-tile-panel { transform: translateY(0); visibility: visible; transition-delay: 0s; }
.mn-tile-panel-head { display: flex; justify-content: space-between; align-items: center; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.mn-tile-close { border: 0; background: transparent; color: var(--color-accent-100); font: inherit; font-size: 13px; font-weight: 700; letter-spacing: 0; text-transform: none; cursor: pointer; padding: 6px 10px; border-radius: 999px; }
.mn-tile-close:hover { background: rgba(245,234,216,.14); }
.mn-tile-panel h3 { margin: 0; font-size: 34px; line-height: 1; color: var(--color-bg); }
.mn-tile-panel p { margin: 0; line-height: 1.55; font-size: 16px; color: var(--color-accent-100); }
.mn-tile-links { display: flex; flex-direction: column; gap: 8px; margin-top: auto; position: relative; z-index: 1; }
.mn-tile-links a { display: flex; justify-content: space-between; padding: 12px 16px; border-radius: 999px; background: rgba(245,234,216,.12); color: var(--color-bg); text-decoration: none; font-weight: 600; transition: background .2s; }
.mn-tile-links a:hover { background: rgba(245,234,216,.24); color: var(--color-bg); }
.mn-tile-big { font-family: var(--font-heading); font-size: clamp(40px, 5vw, 64px); line-height: .9; color: rgba(245,234,216,.14); position: absolute; right: 20px; top: 64px; pointer-events: none; }
.mn-tiles-more { margin: 18px 0 0; font-size: 14px; color: var(--color-neutral-700); }

/* ---- cities ---- */
.mn-cities { background: var(--color-accent-2-100); padding: 72px var(--space-4); }
.mn-cities-wrap { max-width: 1360px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.mn-cities-copy { display: flex; flex-direction: column; gap: 18px; }
.mn-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mn-tab { border: 0; cursor: pointer; font: inherit; font-weight: 700; font-size: 14px; padding: 10px 18px; border-radius: 999px; transition: background .3s, color .3s; background: var(--color-accent-2-200); color: var(--color-accent-2-900); }
.mn-tab:hover { background: var(--color-accent-2-300); }
.mn-tab.is-on { background: var(--color-accent-2-700); color: var(--color-bg); }
.mn-eyebrow-sm { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: var(--color-accent-2-800); font-weight: 700; }
.mn-city h2 { margin: 0 0 12px; font-size: clamp(44px, 6.5vw, 84px); line-height: .9; color: var(--color-accent-2-900); }
.mn-city p { margin: 0; max-width: 48ch; line-height: 1.6; font-size: 17px; }
.mn-city-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
.mn-city-photo { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(-1.5deg); background: var(--color-accent-2-300); }
.mn-city-photo .washed { position: absolute; inset: 0; }
.mn-city-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-city-tag { position: absolute; left: 20px; bottom: 18px; padding: 8px 14px; border-radius: 999px; background: var(--color-bg); color: var(--color-text); font-size: 13px; font-weight: 700; box-shadow: var(--shadow-sm); }
.mn-city-placeholder { position: absolute; inset: 0; background: linear-gradient(135deg, var(--color-accent-2-300), var(--color-accent-2-500)); }

/* ---- renewals band ---- */
.mn-band { background: var(--color-accent-800); color: var(--color-accent-100); padding: 80px var(--space-4); position: relative; overflow: hidden; }
.mn-band-orb { position: absolute; right: -8%; top: -30%; width: 44vw; max-width: 560px; aspect-ratio: 1; border-radius: 50%; background: var(--color-accent-700); opacity: .6; pointer-events: none; }
.mn-band-grid { max-width: 1360px; margin: 0 auto; position: relative; display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.mn-band .mn-eyebrow-sm { color: var(--color-accent-100); }
.mn-band h2 { margin: 12px 0 16px; font-size: clamp(32px, 4.4vw, 58px); line-height: .98; color: var(--color-bg); }
.mn-band h2 [data-count] { font-variant-numeric: tabular-nums; }
.mn-band p { margin: 0 0 24px; max-width: 56ch; line-height: 1.6; font-size: 17px; color: var(--color-accent-100); }
.mn-band-ctas { display: flex; gap: 12px; flex-wrap: wrap; }
.mn-band-photo { margin: 0; aspect-ratio: 4 / 3; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); transform: rotate(1.5deg); }
.mn-band-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---- how it works number badges ---- */
.mn-step-num { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--color-accent); color: var(--color-bg); font-family: var(--font-heading); font-size: 24px; margin-bottom: 6px; }
.mn-step-num.n2 { background: var(--color-accent-2); } .mn-step-num.n3 { background: var(--color-accent-800); }

/* ---- FAQ accordion (index: pre-built items; inner pages: cards wrapped by mn-alive.js) ---- */
.mn-faq { display: flex !important; flex-direction: column; gap: 10px; }
.mn-faq-item { background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden; padding: 0 !important; gap: 0 !important; }
.mn-faq-h { margin: 0 !important; font-size: inherit !important; }
.mn-faq-q { width: 100%; text-align: left; border: 0; background: transparent; cursor: pointer; font: inherit; display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 18px 22px; font-family: var(--font-heading); font-size: 17px; line-height: 1.25; color: var(--color-text); }
.mn-faq-q::after { content: "+"; width: 32px; height: 32px; border-radius: 50%; background: var(--color-accent-100); color: var(--color-accent-800); display: grid; place-items: center; flex: none; font-size: 22px; line-height: 1; font-family: var(--font-body); transition: transform .4s; }
.mn-faq-item.is-open .mn-faq-q::after { transform: rotate(45deg); }
.mn-faq-panel { display: grid; grid-template-rows: 1fr; transition: grid-template-rows .45s cubic-bezier(.2,.8,.2,1); }
@media (scripting: enabled) { .mn-faq-panel { grid-template-rows: 0fr; } .mn-faq-item.is-open .mn-faq-panel { grid-template-rows: 1fr; } }
.mn-faq-panel > div { overflow: hidden; }
.mn-faq-panel p { margin: 0 !important; padding: 0 22px 20px; line-height: 1.6; font-size: 15px; max-width: 72ch; }
.mn-faq-panel p + p { margin-top: -8px !important; }

/* ---- articles row ---- */
.mn-articles { padding: 8px var(--space-4) 64px; }
.mn-article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.mn-article-card { display: block; text-decoration: none; color: inherit; background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.mn-article-card:hover { color: inherit; }
.mn-article-card .washed { aspect-ratio: 16 / 9; overflow: hidden; }
.mn-article-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-article-body { padding: 20px 22px 24px; }
.mn-article-kicker { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent-700); font-weight: 700; }
.mn-article-card h3 { margin: 8px 0 0; font-size: 22px; line-height: 1.15; }

/* ---- sage CTA band (index: with marquee; inner pages: .mn-cta-inner) ---- */
.mn-cta-band { background: var(--color-accent-2-900); color: var(--color-accent-2-100); padding: 80px 0 40px; overflow: clip; }
.mn-cta-band.mn-cta-inner { padding: 64px 0; }
.mn-cta-grid { max-width: 1360px; margin: 0 auto; padding: 0 var(--space-4); display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 40px; align-items: center; }
.mn-cta-band h2 { margin: 0 0 16px; font-size: clamp(32px, 4.6vw, 60px); line-height: .98; color: var(--color-bg); }
.mn-cta-inner h2 { margin: 0; }
.mn-cta-band p { margin: 0; font-size: 17px; line-height: 1.6; max-width: 50ch; color: var(--color-accent-2-100); }
.mn-cta-actions { display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.mn-cta-actions.mn-cta-row { flex-direction: row; flex-wrap: wrap; align-items: center; }
.mn-cta-actions .mn-btn-hero { font-size: 18px; padding: 17px 30px; }
.mn-cta-actions a { color: var(--color-bg); font-weight: 700; font-size: 18px; text-decoration: none; }
.mn-cta-actions a.mn-cta-mail { color: var(--color-accent-2-100); font-weight: 400; font-size: 16px; text-decoration: underline; text-underline-offset: 3px; }
.mn-marquee { margin: 64px 0 0; white-space: nowrap; overflow: clip; font-family: var(--font-heading); font-size: clamp(40px, 7vw, 110px); line-height: 1; color: rgba(245,234,216,.14); }
/* the marquee text is decorative: it lives in a data-text attribute and is painted by ::before, so it is neither read by
   assistive tech nor scored as low-contrast body text (axe flagged the 14% cream text at 1.16:1 when it was a text node) */
.mn-marquee > div { display: inline-block; }
.mn-marquee > div::before { content: attr(data-text); }
/* the marquee is a ~4500px-wide text layer: it only animates while the band is on screen (mn-alive.js toggles .is-visible),
   otherwise a full-width layer would be rasterised and moved every frame for a strip nobody can see (Lighthouse TBT) */
@media (prefers-reduced-motion: no-preference) { .mn-cta-band.is-visible .mn-marquee > div { animation: mn-marquee 80s linear infinite; } } /* Sep 16 2026: 16 services, text twice as long, same scroll speed */
.mn-hero:not(.is-visible) .mn-orb, .mn-hero:not(.is-visible) .mn-scroll-hint i { animation-play-state: paused; }

/* ---- floating call bar (replaces the old mobile-only .call-bar; see partials/footer.html) ---- */
.mn-callbar { position: fixed; left: 50%; bottom: 18px; z-index: 45; display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: var(--color-bg); box-shadow: var(--shadow-lg); translate: -50% 120%; opacity: 0; pointer-events: none; transition: translate .45s cubic-bezier(.2,.8,.2,1), opacity .45s; }
.mn-callbar.is-on { translate: -50% 0; opacity: 1; pointer-events: auto; }
.mn-callbar a { padding: 12px 18px; border-radius: 999px; font-weight: 700; font-size: 14px; color: var(--color-text); text-decoration: none; white-space: nowrap; transition: background .2s; }
.mn-callbar a:hover { background: var(--color-accent-100); color: var(--color-accent-800); }
.mn-callbar a.mn-callbar-book { background: var(--color-accent-700); color: var(--color-bg); }
.mn-callbar a.mn-callbar-book:hover { background: var(--color-accent-800); color: var(--color-bg); }
@media (prefers-reduced-motion: no-preference) { .mn-callbar.is-on { animation: mn-pulse 3s ease-out infinite; } }
@media (max-width: 420px) { .mn-callbar a { padding: 11px 13px; font-size: 13px; } }

/* ---- inner-page photo header band ---- */
.mn-hdr { position: relative; min-height: 78vh; display: grid; align-items: end; overflow: hidden; background: var(--color-accent-900); color: var(--color-bg); }
.mn-hdr-shade { position: absolute; inset: 0; background: linear-gradient(to top, rgba(32,30,29,.88), rgba(32,30,29,.56) 60%, rgba(32,30,29,.42)); }
.mn-hdr-inner { position: relative; z-index: 2; max-width: 1360px; margin: 0 auto; width: 100%; box-sizing: border-box; padding: 120px var(--space-4) 64px; display: flex; flex-direction: column; gap: 14px; }
.mn-hdr-inner.mn-hdr-wide { max-width: 1360px; }
.mn-crumb { display: inline-flex; align-self: flex-start; gap: 8px; white-space: nowrap; padding: 6px 14px; border-radius: 999px; background: rgba(245,234,216,.18); border: 1px solid rgba(245,234,216,.5); font-size: 13px; font-weight: 600; color: var(--color-bg); }
.mn-crumb a { color: var(--color-bg); text-decoration: none; }
.mn-crumb a:hover { text-decoration: underline; color: var(--color-bg); }
.mn-hdr h1 { margin: 0; color: var(--color-bg); font-size: clamp(34px, 5.2vw, 60px); line-height: .98; max-width: 18ch; text-wrap: pretty; text-shadow: 0 2px 10px rgba(32,30,29,.55); }
.mn-hdr-intro { margin: 0 !important; max-width: 58ch; font-size: 17px !important; line-height: 1.5 !important; color: var(--color-bg) !important; opacity: 1 !important; text-shadow: 0 1px 6px rgba(32,30,29,.6); }
.mn-hdr-intro a { color: var(--color-bg); text-decoration: underline; text-underline-offset: 3px; }
.mn-hdr-intro a:hover { color: var(--color-accent-200); }
.mn-hdr-meta { margin: 0 !important; font-size: 14px; color: var(--color-bg) !important; opacity: 1 !important; }
.mn-hdr-meta a, .mn-hdr-meta time { color: var(--color-bg); }
.mn-hdr .tag { align-self: flex-start; }
.mn-hdr-ctas { display: flex; gap: 10px; flex-wrap: wrap; }
@media (prefers-reduced-motion: no-preference) {
  .mn-crumb, .mn-hdr .tag, .mn-hdr-intro, .mn-hdr-meta, .mn-hdr-ctas { animation: mn-rise .6s cubic-bezier(.2,1,.3,1) backwards; }
  .mn-crumb { animation-delay: .04s; } .mn-hdr .tag { animation-delay: .08s; } .mn-hdr-intro { animation-delay: .18s; } .mn-hdr-meta { animation-delay: .22s; } .mn-hdr-ctas { animation-delay: .28s; }
  .mn-hdr h1 { animation: mn-rise-h1 .6s cubic-bezier(.2,1,.3,1) .1s backwards; }
}
.mn-chips-block { margin-top: var(--space-6); }
.mn-chips-title { font-size: 12px !important; letter-spacing: .12em; text-transform: uppercase; color: var(--color-accent-700); margin: 0 0 10px !important; font-family: var(--font-body); font-weight: 700; }
.mn-chips { display: flex; gap: 10px; flex-wrap: wrap; }
.mn-chip { padding: 9px 16px; border-radius: 999px; background: var(--color-accent-100); color: var(--color-accent-800); font-size: 14px; font-weight: 600; }

/* ---- responsive ---- */
@media (max-width: 900px) {
  .mn-hero-grid { grid-template-columns: 1fr; padding: 88px var(--space-4) 44px; gap: var(--space-6); }
  .mn-portrait-wrap { justify-self: start; width: min(58vw, 220px); }
  .mn-hero h1 { font-size: clamp(34px, 9vw, 48px); }
  .mn-tile { min-height: 440px; }
  .mn-hdr-inner { padding: 64px var(--space-4) 36px; }
  .mn-hdr { min-height: 64vh; }
  .mn-band, .mn-cities { padding-top: 56px; padding-bottom: 56px; }
  .mn-cta-band { padding: 56px 0 32px; }
}

/* ---- print: photo bands become plain headings, floating chrome disappears ---- */
@media print {
  .mn-hdr-media, .mn-hdr-shade, .mn-hdr-ctas, .mn-callbar, .mn-cta-band, .mn-marquee, .mn-hero-media, .mn-hero-shade { display: none !important; }
  .mn-hdr, .mn-hero { min-height: 0; background: none; color: var(--color-text); }
  .mn-hdr h1, .mn-hdr-intro, .mn-hdr-meta, .mn-crumb, .mn-crumb a { color: var(--color-text) !important; text-shadow: none; }
}

/* ---- reduced motion: everything visible, nothing moves ---- */
@media (prefers-reduced-motion: reduce) {
  .rv, .rv.in { opacity: 1; translate: 0 0; transition: none; }
  .mn-hero *:not([data-marquee]), .mn-hdr *, .mn-callbar, .mn-marquee > div:not([data-marquee]), .mn-tile:not([data-pop-always]), .mn-tile-media, .mn-tile-panel, .mn-tile-toggle, .mn-faq-panel, .mn-faq-q::after, .mn-lift, .mn-tab, .mn-orb, .mn-btn-hero, .mn-btn-ghost, .mn-link-pill, .mn-btn-sage, .mn-btn-sage-outline, .mn-btn-cream, .mn-btn-outline-cream { animation: none !important; transition: none !important; }
}

/* ---- Sep 16 2026 (brief v2): hero carousel, uniform 3D pop, "what happens next" card, callbar room. Pairs with mn-alive.js 9 + 10 ----
   Carousel: six absolutely stacked <img> layers. Without scripts only the first is visible; once mn-alive.js adds .is-live to
   the media box it owns the .is-on class (1.6 s opacity crossfade every 6.5 s). Only the visible layer runs the Ken Burns zoom. */
.mn-hero-media img { position: absolute; inset: 0; opacity: 0; transition: opacity 1.6s ease; }
.mn-hero-media img:first-child, .mn-hero-media img.is-on { opacity: 1; }
.mn-hero-media.is-live img:first-child:not(.is-on) { opacity: 0; }
.mn-hero-nav { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 2px; }
.mn-hero-place { display: inline-flex; align-items: center; min-height: 30px; padding: 5px 14px; border-radius: 999px; background: rgba(245,234,216,.92); color: var(--color-text); font-size: 13px; font-weight: 700; white-space: nowrap; }
.mn-hero-dots { display: flex; gap: 4px; }
.mn-hero-dot { position: relative; width: 24px; height: 24px; padding: 0; border: 0; background: transparent; cursor: pointer; transition: width .35s cubic-bezier(.2,.8,.2,1); }
.mn-hero-dot::before { content: ""; position: absolute; left: 50%; top: 50%; translate: -50% -50%; width: 10px; height: 10px; border-radius: 999px; background: rgba(245,234,216,.55); transition: width .35s cubic-bezier(.2,.8,.2,1), background .35s; }
.mn-hero-dot:hover::before { background: rgba(245,234,216,.85); }
.mn-hero-dot.is-on { width: 42px; }
.mn-hero-dot.is-on::before { width: 28px; background: var(--color-bg); }
.mn-hero-dot:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 3px; box-shadow: 0 0 0 5px var(--color-bg); border-radius: 999px; }
@media (prefers-reduced-motion: no-preference) { .mn-hero-nav { animation: mn-rise .6s cubic-bezier(.2,1,.3,1) .55s backwards; } }

/* counted numbers carry the heading font themselves, so a counting span matches the static ones exactly */
.mn-num b [data-count], .mn-band h2 [data-count] { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: inherit; line-height: inherit; }

/* uniform 3D pop: every card and content photo carries data-pop (never the hero, header bands, FAQ rows, nav, callbar or the quick form).
   mn-alive.js writes the pointer tilt to el.style.transform and restores data-pop-base (a resting transform such as the photo tilt).
   The transition keeps the reveal timings for opacity/translate, because this rule and .rv share specificity and the shorthand would
   otherwise reset them. The caption layer's translateZ is flattened inside overflow:hidden tiles (ships per brief, inert there). */
/* the parent's perspective: 1200px is set once by mn-alive.js 10 (a universal :has() selector here cost ~1 s of mobile TBT in Lighthouse) */
[data-pop] { transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s, opacity .7s cubic-bezier(.2,.7,.2,1), translate .7s cubic-bezier(.2,.7,.2,1); transform-style: preserve-3d; } /* Sep 22 2026 (S005 M11): will-change: transform dropped, see CLAUDE.md */
.mn-tile[data-pop] { transition: transform .55s cubic-bezier(.2,.8,.2,1), box-shadow .55s, opacity .9s cubic-bezier(.2,.7,.2,1), translate .9s cubic-bezier(.2,.7,.2,1); }
[data-pop] [data-pop-layer] { transition: transform .55s cubic-bezier(.2,.8,.2,1); }
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  [data-pop]:hover { box-shadow: var(--shadow-lg); }
  [data-pop]:hover [data-pop-layer] { transform: translateZ(40px); }
}

/* the floating callbar never covers a card title: the grids whose last row can sit behind it keep 100px of room
   (bar 57px + 18px offset + 24px), and mn-alive.js adds .is-off while the pointer is over any [data-pop] */
.mn-tiles { padding-bottom: 100px; }
.mn-articles { padding-bottom: 100px; }
.mn-callbar.is-off { translate: -50% 120%; opacity: 0; pointer-events: none; animation: none; }

/* lead section: the left column stretches to the form's height; "Reach me directly" stays, a second card fills the rest */
.mn-lead-grid { align-items: stretch; }
.mn-lead-copy { display: flex; flex-direction: column; gap: var(--space-4); }
.mn-after { flex: 1; display: flex; flex-direction: column; gap: 18px; background: var(--color-surface); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-6); max-width: 420px; box-sizing: border-box; }
.mn-after h2 { margin: 0; font-size: 22px; line-height: 1.15; } /* h2, not h3: the lead section's only heading before the form's h2 (Lighthouse heading-order) */
.mn-after ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; }
.mn-after li { display: flex; gap: 14px; align-items: flex-start; }
.mn-after .mn-step-num { width: 40px; height: 40px; font-size: 19px; margin: 0; flex: none; }
.mn-after li b { display: block; font-size: 15.5px; margin-bottom: 2px; }
.mn-after li p { margin: 0; font-size: 14px; line-height: 1.5; color: var(--color-neutral-700); }
.mn-after-strip { margin-top: auto; background: var(--color-accent-2-100); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; font-size: 14px; line-height: 1.5; color: var(--color-accent-2-900); }
.mn-after-strip p { margin: 0; }
.mn-after-strip .mn-btn-sage-outline { align-self: flex-start; padding: 8px 16px; font-size: 14px; }

@media print { .mn-hero-nav { display: none !important; } }
@media (prefers-reduced-motion: reduce) {
  /* Sep 16 2026 late (Melod's PC reports reduce): three decorative motions on index are exempt by name, data-marquee (footer marquee + the six
     hero layers) and data-pop-always (the three service tiles); everything else stays still. The exempt rules follow this block. */
  *:not([data-marquee]) { animation: none !important; }
  [data-pop]:not([data-pop-always]) { transition: none; }
  [data-pop]:not([data-pop-always]):hover [data-pop-layer] { transform: none; }
  [data-pop]:not([data-pop-always]) [data-pop-layer], .mn-hero-dot, .mn-hero-dot::before, .mn-hero-nav { transition: none !important; }
}

/* ---- Sep 16 2026 late: reduced-motion exemptions on index.html (Melod's Windows reports prefers-reduced-motion: reduce). Three decorative
   motions run in BOTH modes: the footer service marquee, the hero carousel (6.5 s crossfade + 26 s zoom) and the three service tiles' tilt.
   They are declared here, outside any media query, because every other motion rule lives inside a no-preference block, and the reduce
   block above spares [data-marquee] / [data-pop-always] by name. mn-alive.js 8a (mn-ready), 9 (timer) and 10 (pop selector) match. ---- */
.mn-cta-band.is-visible .mn-marquee > div[data-marquee] { animation: mn-marquee 80s linear infinite; }
.mn-hero-media img[data-marquee].is-on { animation: mn-kb 26s ease-in-out infinite alternate; animation-play-state: paused; }
html.mn-ready .mn-hero-media img[data-marquee].is-on { animation-play-state: running; }
@media (hover: hover) {
  [data-pop-always]:hover { box-shadow: var(--shadow-lg); }
  [data-pop-always]:hover [data-pop-layer] { transform: translateZ(40px); } /* flattened by the tile's overflow: clip, inert as under no-preference */
}

/* ===== Sep 21 2026: Inner Pages Alive v2 + partner directory ===== */
/* full-width wrapper for a partial that sits between sections (pages without a chips block) */
.mn-partial-band { max-width: 1360px; margin: 0 auto; padding: 0 var(--space-4); box-sizing: border-box; }
/* numbers strip on inner pages: the homepage's five figures as static text */
.mn-numbers-inner { padding: 40px 0 8px; }
.mn-numbers-inner .mn-num b { font-size: clamp(32px, 3.6vw, 48px); }
/* service tiles on service pages: three linked photo tiles (the homepage tiles minus the slide-up panel) */
.mn-stiles { padding: 40px 0 24px; }
.mn-stiles-title { margin: 0 0 24px; font-size: clamp(28px, 3.6vw, 44px); line-height: 1; max-width: 20ch; }
.mn-stile-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; }
.mn-stile { position: relative; display: block; border-radius: var(--radius-lg); overflow: clip; min-height: 360px; box-shadow: var(--shadow-md); text-decoration: none; color: var(--color-bg); }
.mn-stile:hover, .mn-stile:focus-visible { color: var(--color-bg); }
.mn-stile .mn-tile-media, .mn-stile .mn-tile-shade, .mn-stile .mn-tile-face, .mn-stile .mn-tile-kicker, .mn-stile .mn-tile-title { display: block; }
.mn-stile .mn-tile-face { display: flex; }
@media (hover: hover) { .mn-stile:hover .mn-tile-media { transform: scale(1.06); } }
.mn-stile:focus-visible { outline: 3px solid var(--color-accent-700); outline-offset: 3px; }
.mn-stile-arrow { width: 48px; height: 48px; border-radius: 50%; background: var(--color-bg); color: var(--color-text); display: grid; place-items: center; flex: none; }
/* partner directory (partners.html #directory, rendered by assets/mn-partners.js) */
.mn-dir { padding: 80px var(--space-4); background: var(--color-bg); }
.mn-dir-wrap { max-width: 1360px; margin: 0 auto; display: flex; flex-direction: column; gap: 28px; }
.mn-dir-head { display: flex; justify-content: space-between; align-items: end; gap: 24px; flex-wrap: wrap; }
.mn-dir-head > div { display: flex; flex-direction: column; gap: 12px; max-width: 60ch; }
.mn-dir-head h2 { margin: 0; font-size: clamp(32px, 4.4vw, 56px); line-height: 1; text-wrap: pretty; max-width: none; }
.mn-dir-head p { margin: 0; font-size: 17px; line-height: 1.55; color: var(--color-neutral-800); }
.mn-dir-join { padding: 14px 22px; border-radius: 999px; background: var(--color-accent-700); color: var(--color-bg); font-weight: 700; text-decoration: none; white-space: nowrap; box-shadow: var(--shadow-md); }
.mn-dir-join:hover { background: var(--color-accent-800); color: var(--color-bg); }
.mn-dir-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.mn-dir-filters button { border: 0; cursor: pointer; font: inherit; font-size: 14px; font-weight: 700; padding: 10px 18px; border-radius: 999px; min-height: 44px; background: var(--color-accent-2-100); color: var(--color-accent-2-900); transition: background .25s, color .25s; }
.mn-dir-filters button:hover { background: var(--color-accent-2-200); }
.mn-dir-filters button[aria-pressed="true"] { background: var(--color-accent-2-800); color: var(--color-bg); }
.mn-dir-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 20px; }
.mn-dir-card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 24px; box-shadow: var(--shadow-sm); display: flex; flex-direction: column; gap: 14px; transition: transform .35s, box-shadow .35s; }
@media (hover: hover) { .mn-dir-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } }
.mn-dir-who { display: flex; align-items: center; gap: 14px; }
.mn-dir-face { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex: none; background: var(--color-accent-2-100); display: grid; place-items: center; font-family: var(--font-heading); font-size: 24px; color: var(--color-accent-2-800); }
.mn-dir-face img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mn-dir-card h3 { margin: 0; font-size: 22px; line-height: 1.1; }
.mn-dir-title { display: block; font-size: 14px; color: var(--color-neutral-700); margin-top: 3px; }
.mn-dir-brok { font-size: 14px; line-height: 1.5; color: var(--color-neutral-800); }
.mn-dir-brok strong { display: block; color: var(--color-text); }
.mn-dir-areas { display: flex; gap: 6px; flex-wrap: wrap; }
.mn-dir-areas span { padding: 5px 11px; border-radius: 999px; background: var(--color-accent-2-100); color: var(--color-accent-2-900); font-size: 12px; font-weight: 700; }
.mn-dir-connect { margin-top: auto; display: flex; justify-content: center; align-items: center; gap: 8px; min-height: 46px; border-radius: 999px; border: 2px solid var(--color-accent-700); color: var(--color-accent-700); font-weight: 700; font-size: 14px; text-decoration: none; }
.mn-dir-connect:hover { background: var(--color-accent-700); color: var(--color-bg); }
.mn-dir-note { margin: 0; padding: 32px; border-radius: var(--radius-lg); background: var(--color-accent-2-100); color: var(--color-accent-2-900); font-size: 16px; text-align: center; }
.mn-dir-note a { color: var(--color-accent-2-900); font-weight: 700; }
.mn-dir-fine { margin: 0; font-size: 13px; line-height: 1.5; color: var(--color-neutral-700); max-width: 80ch; }
.mn-dir-skel { min-height: 236px; background: var(--color-accent-100); box-shadow: none; }
@media (prefers-reduced-motion: no-preference) { .mn-dir-skel { animation: mn-dir-pulse 1.4s ease-in-out infinite alternate; } }
@keyframes mn-dir-pulse { from { opacity: .55; } to { opacity: 1; } }
@media print { .mn-dir-filters, .mn-dir-join, .mn-stiles { display: none !important; } }

/* ── Sep 22 2026 (S005 SEO pass) ─────────────────────────────────────────────
   1. index city tab-panel titles are <p class="mn-city-title"> (they were h2s: tab-panel labels, not page sections). Visual twin of the old .mn-city h2 rule.
   2. the 7-icon "Follow Melod" row lives ONLY in the footer partial now (out of the About dropdown and the index mobile menu); it reuses .nav-follow. */
.mn-city .mn-city-title { margin: 0 0 12px; font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: clamp(44px, 6.5vw, 84px); line-height: .9; letter-spacing: -0.015em; color: var(--color-accent-2-900); }
.mnm-footer-left .nav-follow-label { margin: var(--space-2) 0 var(--space-1); }
.mnm-footer-left .nav-follow { padding: 0; }