/* ══════════════════════════════════════════════════════════════════
   MIUUM site chrome: floating nav island (four groups: Our services,
   For business, For chauffeurs, Help), theme + language tools, mobile
   menu with accordions, footer.
   Source of truth: _chrome/chrome.css (copied to /chrome.css, linked as
   /chrome.css?v=N by every page). Every selector is scoped under
   .mm-nav / .mm-menu / .mm-foot so it drops into any page next to that
   page's own styles. The island, the menu and the footer are dark in
   both site themes, so nothing here reads the theme tokens except the
   theme button icon (html[data-theme]).
   Bump ?v=N on every page when you change this file (see CLAUDE.md).
   ══════════════════════════════════════════════════════════════════ */
@keyframes mmShimmer {
  0%   { transform: translateX(-100%) skewX(-15deg); }
  100% { transform: translateX(250%) skewX(-15deg); }
}

.mm-nav, .mm-menu, .mm-foot, .mm-topbar {
  --mm-cream: #F5F0E8;
  --mm-dark: #1C1917;
  --mm-dark-deep: #0D0C0B;
  --mm-gold: #9A7B2E;
  --mm-gold-light: #C4A45A;
  --mm-white: #ffffff;
  --mm-easing: cubic-bezier(0.32, 0.72, 0, 1);
  --mm-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --mm-icon-moon: 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='M21 12.8A9 9 0 1 1 11.2 3a7 7 0 0 0 9.8 9.8z'/%3E%3C/svg%3E");
  --mm-icon-sun: 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%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='M12 2v2M12 20v2M4.9 4.9l1.4 1.4M17.7 17.7l1.4 1.4M2 12h2M20 12h2M4.9 19.1l1.4-1.4M17.7 6.3l1.4-1.4'/%3E%3C/svg%3E");
  --mm-icon-globe: 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.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3a14 14 0 0 1 0 18M12 3a14 14 0 0 0 0 18'/%3E%3C/svg%3E");
  --mm-icon-chev: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 6' fill='none' stroke='black' stroke-width='1.6'%3E%3Cpath d='M1 1l4 4 4-4'/%3E%3C/svg%3E");
  font-family: 'Outfit', 'Montserrat', system-ui, -apple-system, sans-serif;
  box-sizing: border-box;
}
.mm-nav *, .mm-menu *, .mm-foot *, .mm-topbar * { box-sizing: border-box; }

/* ── Floating pill header ─────────────────────────────────────────── */
header.mm-nav {
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 900;
  width: calc(100% - 48px);
  max-width: 1180px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  transition: top 0.4s var(--mm-easing);
}
header.mm-nav.scrolled { top: 10px; }
.mm-nav .mm-island {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 8px;
  height: 60px;
  background: rgba(10,10,10,0.92);
  backdrop-filter: blur(24px) saturate(180%);
  -webkit-backdrop-filter: blur(24px) saturate(180%);
  border-radius: 50px;
  border: 1px solid rgba(196,164,90,0.22);
  box-shadow: 0 8px 32px rgba(0,0,0,0.4), inset 0 1px 0 rgba(255,255,255,0.06);
  transition: height 0.4s var(--mm-easing), box-shadow 0.4s var(--mm-easing);
}
header.mm-nav.scrolled .mm-island {
  height: 52px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5), inset 0 1px 0 rgba(255,255,255,0.06);
}

/* Brand: the gold wordmark, left of the island. */
.mm-nav .mm-brand {
  position: absolute;
  left: 24px;
  top: 50%;
  transform: translateY(-50%);
  display: block;
  line-height: 0;
  text-decoration: none;
  transition: opacity 0.3s var(--mm-easing);
}
.mm-nav .mm-brand:hover { opacity: 0.82; }
.mm-nav .mm-brand img {
  display: block;
  height: 18px;
  width: auto;
}

/* Primary links, centered: three dropdown groups and one plain link. */
.mm-nav nav.mm-links {
  display: flex;
  gap: 26px;
  align-items: center;
  margin: 0;
  padding: 0;
}
.mm-nav nav.mm-links > a,
.mm-nav .mm-dd-btn {
  font-family: inherit;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; text-decoration: none;
  color: rgba(255,255,255,0.62);
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  line-height: 1.4;
  position: relative;
  transition: color 0.3s var(--mm-easing);
  white-space: nowrap;
}
.mm-nav nav.mm-links > a::after,
.mm-nav .mm-dd-btn::after {
  content: '';
  position: absolute; bottom: -3px; left: 0; right: 0;
  height: 1px; background: var(--mm-gold-light);
  transform: scaleX(0); transform-origin: left;
  transition: transform 0.3s var(--mm-easing);
}
.mm-nav nav.mm-links > a:hover::after,
.mm-nav nav.mm-links > a.active::after,
.mm-nav .mm-dd.open .mm-dd-btn::after,
.mm-nav .mm-dd:hover .mm-dd-btn::after,
.mm-nav .mm-dd-btn.active::after { transform: scaleX(1); }
.mm-nav nav.mm-links > a:hover,
.mm-nav nav.mm-links > a.active,
.mm-nav .mm-dd-btn:hover,
.mm-nav .mm-dd.open .mm-dd-btn,
.mm-nav .mm-dd:hover .mm-dd-btn,
.mm-nav .mm-dd-btn.active { color: var(--mm-gold-light); }

/* Dropdown groups (hover opens on pointer devices, click and keyboard via chrome.js). */
.mm-nav .mm-dd { position: relative; display: flex; align-items: center; height: 60px; }
.mm-nav .mm-dd-btn { display: inline-flex; align-items: center; gap: 6px; }
.mm-nav .mm-dd-btn svg {
  width: 9px; height: 9px;
  transition: transform 0.3s var(--mm-easing);
}
.mm-nav .mm-dd.open .mm-dd-btn svg,
.mm-nav .mm-dd:hover .mm-dd-btn svg { transform: rotate(180deg); }
.mm-nav .mm-dd-menu {
  position: absolute;
  top: calc(100% - 4px);
  left: 50%;
  transform: translate(-50%, -6px);
  min-width: 232px;
  padding: 8px;
  background: rgba(14,13,12,0.97);
  border: 1px solid rgba(196,164,90,0.22);
  border-radius: 16px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.25s var(--mm-easing), transform 0.25s var(--mm-easing), visibility 0s linear 0.25s;
}
/* Invisible bridge so the pointer can travel from the label to the panel. */
.mm-nav .mm-dd-menu::before {
  content: '';
  position: absolute; left: 0; right: 0; top: -12px; height: 12px;
}
.mm-nav .mm-dd.open .mm-dd-menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition-delay: 0s;
}
@media (hover: hover) and (pointer: fine) {
  .mm-nav .mm-dd:hover .mm-dd-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-50%, 0);
    transition-delay: 0s;
  }
}
.mm-nav .mm-dd-menu a {
  display: block;
  padding: 10px 14px;
  border-radius: 10px;
  font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em;
  text-transform: none; text-decoration: none;
  color: rgba(255,255,255,0.72);
  white-space: nowrap;
  transition: background 0.2s var(--mm-easing), color 0.2s var(--mm-easing);
}
.mm-nav .mm-dd-menu a:hover,
.mm-nav .mm-dd-menu a:focus-visible,
.mm-nav .mm-dd-menu a.active { background: rgba(196,164,90,0.12); color: var(--mm-gold-light); }

/* Right group: tools slot (theme, language, and on the home page sign-in), CTA, burger. */
.mm-nav .mm-right {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  display: flex; align-items: center; gap: 10px;
}
.mm-nav .nav-tools { display: flex; align-items: center; gap: 6px; }
.mm-nav .nav-tools:empty { display: none; }
.mm-nav .mm-tools-chrome { display: contents; }
/* Links a page mounts in the slot (a portal login, for example) read like nav links. */
.mm-nav .nav-tools > a {
  font-family: inherit;
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em;
  text-transform: uppercase; text-decoration: none; white-space: nowrap;
  color: rgba(255,255,255,0.62);
  transition: color 0.3s var(--mm-easing);
}
.mm-nav .nav-tools > a:hover { color: var(--mm-gold-light); }

/* Theme button: a round ghost button whose icon follows html[data-theme]. The home
   page's engine button (#themeBtn, text set to an emoji by account.js) gets the same
   look; its text is hidden and the icon is drawn here. */
.mm-nav .mm-theme, .mm-nav #themeBtn,
.mm-menu .mm-theme, .mm-menu #themeBtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; padding: 0; margin: 0;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-size: 0; line-height: 0;
  cursor: pointer;
  transition: border-color 0.25s var(--mm-easing), color 0.25s var(--mm-easing), background 0.25s;
}
.mm-nav .mm-theme::before, .mm-nav #themeBtn::before,
.mm-menu .mm-theme::before, .mm-menu #themeBtn::before {
  content: '';
  width: 15px; height: 15px;
  background: currentColor;
  -webkit-mask: var(--mm-icon-sun) center / contain no-repeat;
  mask: var(--mm-icon-sun) center / contain no-repeat;
}
html[data-theme="dark"] .mm-nav .mm-theme::before, html[data-theme="dark"] .mm-nav #themeBtn::before,
html[data-theme="dark"] .mm-menu .mm-theme::before, html[data-theme="dark"] .mm-menu #themeBtn::before {
  -webkit-mask-image: var(--mm-icon-moon);
  mask-image: var(--mm-icon-moon);
}
.mm-nav .mm-theme:hover, .mm-nav #themeBtn:hover,
.mm-menu .mm-theme:hover, .mm-menu #themeBtn:hover {
  border-color: rgba(196,164,90,0.6); color: var(--mm-gold-light); background: rgba(196,164,90,0.08);
}

/* Language dropdown: globe + current language, panel of four. The engine's
   #langDD / #langTrig / #langCur (home page) share the look; account.js renders
   its own .pl-dd-panel under #langDD. */
.mm-nav .mm-lang, .mm-nav #langDD,
.mm-menu .mm-lang, .mm-menu #langDD { position: relative; display: inline-flex; }
.mm-nav .mm-lang-btn, .mm-nav #langTrig,
.mm-menu .mm-lang-btn, .mm-menu #langTrig {
  display: inline-flex; align-items: center; gap: 7px;
  width: auto; height: 34px; padding: 0 11px 0 10px; margin: 0;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.72);
  font-family: inherit; font-size: 0; line-height: 1;
  cursor: pointer; white-space: nowrap;
  transition: border-color 0.25s var(--mm-easing), color 0.25s var(--mm-easing), background 0.25s;
}
.mm-nav .mm-lang-btn::before, .mm-nav #langTrig::before,
.mm-menu .mm-lang-btn::before, .mm-menu #langTrig::before {
  content: '';
  flex: none;
  width: 14px; height: 14px;
  background: currentColor;
  -webkit-mask: var(--mm-icon-globe) center / contain no-repeat;
  mask: var(--mm-icon-globe) center / contain no-repeat;
}
.mm-nav .mm-lang-btn::after, .mm-nav #langTrig::after,
.mm-menu .mm-lang-btn::after, .mm-menu #langTrig::after {
  content: '';
  flex: none;
  width: 8px; height: 6px;
  background: currentColor;
  -webkit-mask: var(--mm-icon-chev) center / contain no-repeat;
  mask: var(--mm-icon-chev) center / contain no-repeat;
  transition: transform 0.3s var(--mm-easing);
}
.mm-nav .mm-lang.open .mm-lang-btn::after, .mm-menu .mm-lang.open .mm-lang-btn::after { transform: rotate(180deg); }
.mm-nav .mm-lang-cur, .mm-nav #langCur,
.mm-menu .mm-lang-cur, .mm-menu #langCur {
  font-size: 10.5px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase;
  display: inline !important;
}
/* The button shows the two-letter code (EN / ES / PT / FR); the panel spells the
   names out. chrome.js writes the code into .mm-lang-cur; the engine writes the
   full name into #langCur, so that one is drawn from html[lang] instead. */
.mm-nav #langCur, .mm-menu #langCur { font-size: 0 !important; }
.mm-nav #langCur::after, .mm-menu #langCur::after { content: 'EN'; font-size: 10.5px; }
html[lang="es"] .mm-nav #langCur::after, html[lang="es"] .mm-menu #langCur::after { content: 'ES'; }
html[lang="pt"] .mm-nav #langCur::after, html[lang="pt"] .mm-menu #langCur::after { content: 'PT'; }
html[lang="fr"] .mm-nav #langCur::after, html[lang="fr"] .mm-menu #langCur::after { content: 'FR'; }
/* The engine trigger carries a globe emoji and a caret span; the icons above replace them. */
.mm-nav #langTrig > span:not(#langCur), .mm-menu #langTrig > span:not(#langCur) { display: none !important; }
.mm-nav .mm-lang-btn:hover, .mm-nav #langTrig:hover, .mm-nav .mm-lang.open .mm-lang-btn,
.mm-menu .mm-lang-btn:hover, .mm-menu #langTrig:hover, .mm-menu .mm-lang.open .mm-lang-btn {
  border-color: rgba(196,164,90,0.6); color: var(--mm-gold-light); background: rgba(196,164,90,0.08);
}
.mm-nav .mm-lang-menu, .mm-menu .mm-lang-menu {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  min-width: 168px;
  padding: 6px;
  background: rgba(14,13,12,0.97);
  border: 1px solid rgba(196,164,90,0.22);
  border-radius: 14px;
  box-shadow: 0 18px 44px rgba(0,0,0,0.45);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(-6px);
  transition: opacity 0.22s var(--mm-easing), transform 0.22s var(--mm-easing), visibility 0s linear 0.22s;
  z-index: 5;
}
.mm-nav .mm-lang.open .mm-lang-menu, .mm-menu .mm-lang.open .mm-lang-menu {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition-delay: 0s;
}
.mm-nav .mm-lang-menu button, .mm-menu .mm-lang-menu button {
  display: flex; align-items: center; gap: 10px;
  width: 100%; text-align: left;
  padding: 9px 12px;
  border: 0; border-radius: 9px;
  background: none;
  font-family: inherit; font-size: 12.5px; font-weight: 400; letter-spacing: 0.02em;
  color: rgba(255,255,255,0.72);
  cursor: pointer;
  transition: background 0.2s var(--mm-easing), color 0.2s var(--mm-easing);
}
.mm-nav .mm-lang-menu button::before, .mm-menu .mm-lang-menu button::before {
  content: ''; width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: transparent; border: 1px solid rgba(255,255,255,0.25);
}
.mm-nav .mm-lang-menu button.on::before, .mm-menu .mm-lang-menu button.on::before { background: var(--mm-gold-light); border-color: var(--mm-gold-light); }
.mm-nav .mm-lang-menu button:hover, .mm-nav .mm-lang-menu button:focus-visible, .mm-nav .mm-lang-menu button.on,
.mm-menu .mm-lang-menu button:hover, .mm-menu .mm-lang-menu button:focus-visible, .mm-menu .mm-lang-menu button.on {
  background: rgba(196,164,90,0.12); color: var(--mm-gold-light);
}

/* Home page sign-in pill and the signed-in account chip (rendered by account.js). */
.mm-nav .nav-tools .mm-tools { display: flex; align-items: center; gap: 6px; flex-wrap: nowrap; }
.mm-nav .nav-tools .mm-tools .btn-signin {
  display: inline-flex; align-items: center;
  height: 34px; padding: 0 12px; margin: 0;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.16);
  background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.78);
  font-family: inherit; font-size: 10.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  white-space: nowrap; cursor: pointer;
  transition: border-color 0.25s var(--mm-easing), color 0.25s var(--mm-easing), background 0.25s;
}
.mm-nav .nav-tools .mm-tools .btn-signin:hover { border-color: rgba(196,164,90,0.6); color: var(--mm-gold-light); background: rgba(196,164,90,0.08); }
.mm-nav .nav-tools .mm-tools .head-acct { height: 34px; padding: 0 10px 0 3px; font-size: 12px; border-color: rgba(255,255,255,0.16); }
.mm-nav .nav-tools .mm-tools .head-acct .ha-av { width: 26px; height: 26px; font-size: 12px; }

.mm-nav .mm-cta {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  background: var(--mm-gold-light); color: var(--mm-white) !important;
  font-family: inherit;
  font-size: 10.5px; font-weight: 600; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none;
  padding: 10px 18px 10px 22px;
  border-radius: 50px;
  overflow: hidden;
  white-space: nowrap;
  transition: background 0.3s var(--mm-easing), transform 0.2s var(--mm-easing);
}
.mm-nav .mm-cta::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 40%; height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.18), transparent);
  animation: mmShimmer 3.5s ease-in-out infinite;
  pointer-events: none;
}
.mm-nav .mm-cta:hover { background: #B8963A; transform: scale(1.03); }
.mm-nav .mm-cta .mm-arrow {
  width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.18);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 13px;
  transition: transform 0.3s var(--mm-spring);
}
.mm-nav .mm-cta:hover .mm-arrow { transform: translate(3px,-1px); }

.mm-nav .mm-burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 8px;
  margin: 0;
  z-index: 901;
  flex-shrink: 0;
  width: 40px; height: 40px;
}
.mm-nav .mm-burger span {
  display: block;
  width: 20px;
  height: 1.5px;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.3s var(--mm-spring), opacity 0.2s ease;
}
.mm-nav .mm-burger.open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.mm-nav .mm-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.mm-nav .mm-burger.open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ── Mobile menu overlay ──────────────────────────────────────────── */
.mm-menu {
  position: fixed;
  inset: 0;
  background: rgba(10,10,10,0.97);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 890;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 92px 24px 48px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.mm-menu.open { opacity: 1; pointer-events: auto; }
.mm-menu nav {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 0;
  width: 100%;
  max-width: 340px;
  margin: auto;
}
.mm-menu nav > a,
.mm-menu .mm-menu-acc {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  font-family: inherit;
  text-transform: none;
  font-size: 21px;
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-weight: 300;
  letter-spacing: 0.03em;
  padding: 15px 0;
  width: 100%;
  text-align: center;
  background: none; border: 0; margin: 0; cursor: pointer;
  border-bottom: 1px solid rgba(196,164,90,0.1);
  transition: color 0.2s ease;
}
.mm-menu nav > a:hover, .mm-menu nav > a.active, .mm-menu .mm-menu-acc:hover { color: var(--mm-gold-light); }
.mm-menu .mm-menu-acc svg { width: 10px; height: 10px; transition: transform 0.3s var(--mm-easing); opacity: 0.7; }
.mm-menu .mm-menu-group { width: 100%; }
.mm-menu .mm-menu-group.open .mm-menu-acc { color: var(--mm-gold-light); border-bottom-color: transparent; }
.mm-menu .mm-menu-group.open .mm-menu-acc svg { transform: rotate(180deg); }
.mm-menu .mm-menu-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--mm-easing);
  border-bottom: 1px solid rgba(196,164,90,0.1);
}
.mm-menu .mm-menu-group.open .mm-menu-panel { grid-template-rows: 1fr; }
.mm-menu .mm-menu-panel > div { overflow: hidden; min-height: 0; }
.mm-menu .mm-menu-group.open .mm-menu-panel > div { padding-bottom: 10px; }
/* Pages style bare "nav a" (uppercase, underline pseudo-element); the menu links opt out. */
.mm-menu nav a::after, .mm-menu nav a::before { display: none !important; }
.mm-menu .mm-menu-panel a {
  display: block;
  font-family: inherit;
  font-size: 15.5px; font-weight: 300; letter-spacing: 0.02em; text-transform: none;
  color: rgba(255,255,255,0.58);
  text-decoration: none;
  text-align: center;
  padding: 8px 0;
  transition: color 0.2s ease;
}
.mm-menu .mm-menu-panel a:hover, .mm-menu .mm-menu-panel a.active { color: var(--mm-gold-light); }
/* Legacy group markup (label + links) from an older paste of nav.html still renders. */
.mm-menu .mm-menu-label {
  display: block;
  font-size: 9.5px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--mm-gold-light); font-weight: 600;
  padding: 12px 0 4px;
}
.mm-menu .mm-menu-group > a { display: block; font-size: 16px; padding: 8px 0; text-align: center; color: rgba(255,255,255,0.58); text-decoration: none; }

/* Tools row (#navToolsMobile, first child of the mobile nav, shown just above Book
   now): chrome.js and account.js move the children of #navTools here below 1024px. */
.mm-menu .mm-menu-tools {
  width: 100%; order: 5;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px;
  padding: 22px 0 0;
}
.mm-menu .mm-menu-tools:empty { display: none; }
.mm-menu .mm-tools-chrome { display: contents; }
.mm-menu .mm-menu-tools .mm-tools { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 10px; }
.mm-menu .mm-theme, .mm-menu #themeBtn { width: 40px; height: 40px; }
.mm-menu .mm-lang-btn, .mm-menu #langTrig { height: 40px; padding: 0 14px 0 12px; }
.mm-menu .mm-lang-cur { font-size: 11.5px; }
.mm-menu #langCur::after { font-size: 11.5px; }
.mm-menu .mm-tools .btn-signin {
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px; margin: 0;
  border-radius: 50px; border: 1px solid rgba(255,255,255,0.16); background: rgba(255,255,255,0.04);
  color: rgba(255,255,255,0.82); font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  cursor: pointer;
}
.mm-menu .mm-tools .head-acct { height: 40px; }
.mm-menu .mm-menu-tools > a {
  font-family: inherit; font-size: 11.5px; font-weight: 500; letter-spacing: 0.13em; text-transform: uppercase;
  text-decoration: none; color: rgba(255,255,255,0.82);
  display: inline-flex; align-items: center; height: 40px; padding: 0 18px;
  border-radius: 50px; border: 1px solid rgba(255,255,255,0.16);
}
.mm-menu .mm-lang-menu { left: 50%; right: auto; transform: translate(-50%, -6px); }
.mm-menu .mm-lang.open .mm-lang-menu { transform: translate(-50%, 0); }

.mm-menu nav a.mm-menu-book {
  order: 6;
  margin-top: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--mm-gold-light);
  color: var(--mm-dark);
  font-weight: 600;
  font-size: 13px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 14px 28px;
  border-radius: 50px;
  border-bottom: none;
  width: auto;
  min-height: 44px;
}
.mm-menu nav a.mm-menu-book:hover { background: #B8963A; color: var(--mm-dark); }

/* A leftover close button from an older paste of nav.html stays hidden; the burger X closes the menu. */
.mm-menu .mm-menu-close { display: none; }

/* ── Footer ───────────────────────────────────────────────────────── */
footer.mm-foot {
  background: var(--mm-dark-deep);
  color: rgba(255,255,255,0.38);
  padding: 72px 80px 40px;
  border-top: 1px solid rgba(196,164,90,0.12);
  margin: 0;
  position: relative;
  text-align: left;
  font-size: 13px;
  line-height: 1.6;
}
footer.mm-foot::before {
  content: '';
  position: absolute; top: 0; left: 80px; right: 80px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(196,164,90,0.3), transparent);
}
.mm-foot .mm-foot-inner { max-width: 1180px; margin: 0 auto; }
.mm-foot .mm-fgrid {
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr 1.05fr 1.25fr;
  gap: 40px;
  margin-bottom: 56px;
  align-items: start;
}
.mm-foot .mm-fbrand { display: flex; flex-direction: column; align-items: flex-start; padding-right: 24px; }
.mm-foot .mm-fbrand a { display: block; line-height: 0; margin-bottom: 22px; transition: opacity 0.3s var(--mm-easing), transform 0.4s var(--mm-easing); }
.mm-foot .mm-fbrand a:hover { opacity: 0.85; transform: translateY(-3px); }
.mm-foot .mm-fbrand img { display: block; height: 26px; width: auto; }
.mm-foot .mm-fbrand p {
  font-size: 13px; line-height: 1.85; color: rgba(255,255,255,0.32);
  font-weight: 300; max-width: 300px; margin: 0;
}
.mm-foot h4 {
  font-family: inherit;
  font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase;
  color: var(--mm-gold-light); margin: 0 0 22px; font-weight: 600;
}
.mm-foot .mm-fsub {
  font-family: inherit;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); margin: 22px 0 12px; font-weight: 600;
}
.mm-foot .mm-fcol a {
  display: block; font-size: 13px; color: rgba(255,255,255,0.38);
  text-decoration: none; margin: 0 0 12px; font-weight: 300;
  transition: color 0.3s var(--mm-easing), transform 0.3s var(--mm-easing);
}
.mm-foot .mm-fcol a:hover { color: var(--mm-gold-light); transform: translateX(4px); }
.mm-foot .mm-fcol p { margin: 0 0 12px; font-size: 13px; font-weight: 300; color: rgba(255,255,255,0.38); }
.mm-foot .mm-ftel { color: rgba(255,255,255,0.7) !important; font-weight: 400 !important; }
.mm-foot .mm-fcities { color: rgba(255,255,255,0.28); letter-spacing: 0.02em; }
.mm-foot .mm-fsocial { display: flex; gap: 10px; margin: 4px 0 22px; }
.mm-foot .mm-ficon {
  width: 30px; height: 30px; border-radius: 50%;
  border: 1px solid rgba(196,164,90,0.22);
  display: grid !important; place-items: center;
  color: rgba(255,255,255,0.42); text-decoration: none;
  line-height: 0; margin: 0 !important;
  transition: border-color 0.3s var(--mm-easing), color 0.3s var(--mm-easing), transform 0.3s var(--mm-spring), background 0.3s;
}
.mm-foot .mm-ficon svg { display: block; width: 15px; height: 15px; }
.mm-foot .mm-ficon:hover { border-color: var(--mm-gold-light); color: var(--mm-gold-light); transform: translateY(-3px) !important; background: rgba(196,164,90,0.08); }
.mm-foot .mm-fapps-label {
  display: block;
  font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase;
  color: rgba(255,255,255,0.28); margin: 0 0 10px; font-weight: 600;
}
.mm-foot .mm-badges { display: flex; flex-wrap: wrap; gap: 8px; }
.mm-foot .mm-badge {
  display: inline-flex; align-items: center; gap: 7px;
  height: 34px; padding: 0 12px;
  border: 1px solid rgba(255,255,255,0.14); border-radius: 8px;
  color: rgba(255,255,255,0.42);
  font-size: 11.5px; font-weight: 500; letter-spacing: 0.02em;
  white-space: nowrap;
}
.mm-foot .mm-badge svg { width: 14px; height: 14px; }
.mm-foot .mm-fapps-soon {
  display: inline-block; margin-top: 10px;
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mm-gold-light); font-weight: 600;
}
.mm-foot .mm-fbottom {
  border-top: 1px solid rgba(255,255,255,0.05);
  padding-top: 28px;
  display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap;
}
.mm-foot .mm-fbottom p { font-size: 11px; color: rgba(255,255,255,0.22); letter-spacing: 0.06em; margin: 0; }
.mm-foot .mm-flegal { display: flex; flex-wrap: wrap; gap: 6px 22px; }
.mm-foot .mm-flegal a {
  font-size: 11px; letter-spacing: 0.06em; color: rgba(255,255,255,0.3);
  text-decoration: none; transition: color 0.3s var(--mm-easing);
}
.mm-foot .mm-flegal a:hover { color: var(--mm-gold-light); }

/* ── Portal top bar (app-like pages: wordmark + back link, no full nav) ── */
.mm-topbar-wordmark { display: block; height: 16px; width: auto; }
.mm-topbar-back {
  font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 600;
  text-decoration: none; color: inherit; opacity: 0.6; white-space: nowrap;
  transition: opacity 0.2s ease;
}
.mm-topbar-back:hover { opacity: 1; }

/* Wordmark image where an app-like page used the text wordmark. */
.mm-login-back { display: inline-block; margin-bottom: 16px; }
.mm-wm-img { display: block; height: 20px; width: auto; }
.mm-wm-img.mm-hd { height: 15px; }
.mm-wm-img.mm-side { height: 14px; }
.mm-wm-img.mm-login { height: 24px; margin-bottom: 18px; }

/* Pages whose content starts directly under the floating island. */
.mm-pad-top { padding-top: 108px !important; }

/* ── Responsive ───────────────────────────────────────────────────── */
@media (max-width: 1400px) {
  /* Compact language control (globe only) so the centered links and the right group never meet. */
  .mm-nav .mm-lang-btn, .mm-nav #langTrig { width: 34px; padding: 0; gap: 0; justify-content: center; }
  .mm-nav .mm-lang-btn::after, .mm-nav #langTrig::after { display: none; }
  .mm-nav .mm-lang-cur, .mm-nav #langCur { display: none !important; }
  .mm-nav .mm-lang-btn::before, .mm-nav #langTrig::before { width: 15px; height: 15px; }
}
@media (max-width: 1240px) {
  .mm-nav nav.mm-links { gap: 20px; }
  .mm-nav .mm-brand { left: 20px; }
}
@media (max-width: 1080px) {
  header.mm-nav { width: calc(100% - 24px); top: 12px; }
  .mm-nav .mm-island { padding: 0 8px 0 4px; justify-content: space-between; }
  .mm-nav .mm-brand { position: static; transform: none; margin-left: 16px; }
  .mm-nav nav.mm-links { display: none; }
  .mm-nav .mm-right { position: static; transform: none; }
  .mm-nav .mm-burger { display: flex; }
  .mm-nav .mm-cta .mm-arrow { display: none; }
  .mm-nav .mm-cta { padding: 10px 16px; min-height: 40px; }
  footer.mm-foot { padding: 56px 24px 40px; }
  footer.mm-foot::before { left: 24px; right: 24px; }
  .mm-foot .mm-fgrid { grid-template-columns: 1fr 1fr; gap: 36px; }
  .mm-foot .mm-fgrid > * { min-width: 0; }
  .mm-foot .mm-fbrand { grid-column: 1 / -1; padding-right: 0; }
  .mm-pad-top { padding-top: 96px !important; }
}
@media (max-width: 1023px) {
  /* The tools moved into the mobile menu; nothing may linger in the island slot. */
  .mm-nav .mm-right > .nav-tools { display: none; }
}
@media (max-width: 480px) {
  .mm-nav .mm-brand img { height: 15px; }
  .mm-nav .mm-brand { margin-left: 12px; }
  .mm-nav .mm-cta { font-size: 9.5px; padding: 10px 13px; letter-spacing: 0.1em; }
  .mm-foot .mm-fgrid { grid-template-columns: 1fr; gap: 32px; }
  .mm-foot .mm-fbottom { flex-direction: column; align-items: flex-start; gap: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-nav .mm-cta::after { animation: none; }
  .mm-nav, .mm-menu, .mm-foot, .mm-nav *, .mm-menu *, .mm-foot * { transition: none !important; }
}