/* Maison Mekong landing page.
   Layout transcribed from the Claude Design mock: project/Landing Page.dc.html
   Every value that exists as a design token is referenced as one. */

/* ============================================================
   base  (from the design system's tokens/base.css)
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Eases the in-page anchor jumps ("Talk to us", the skip link). This is the
     native implementation - it does not intercept or re-drive normal scrolling,
     and it is switched off under prefers-reduced-motion further down. */
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-regular);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-display);
  margin: 0;
}

p { margin: 0; }

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

img, svg { display: block; max-width: 100%; }

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

/* Focus ring needs to invert on the forest/texture grounds. */
.mm-statement :focus-visible { outline-color: var(--mm-lime); }

/* Not --text-muted: that measures 4.16:1 on paper, under the 4.5 AA floor. */
.mm-eyebrow--muted { color: var(--mm-neutral-600); }

.mm-eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
}

/* Khmer has no case and no letterspacing convention; uppercase + 0.14em tracking
   mangles the script. Neutralise both, and swap to the Khmer faces. */
html[lang="km"] {
  --font-display: "Noto Serif Khmer", "Newsreader", Georgia, serif;
  --font-sans: "Noto Sans Khmer", "Hanken Grotesk", Arial, sans-serif;
  --lh-display: 1.5;
  --lh-heading: 1.5;
  --lh-body: 1.9;
}
html[lang="km"] .mm-eyebrow {
  text-transform: none;
  letter-spacing: 0;
}
html[lang="km"] h1,
html[lang="km"] h2,
html[lang="km"] .mm-statement__line { letter-spacing: 0; }

.skip-link {
  position: absolute;
  top: var(--space-3);
  left: var(--space-3);
  z-index: 100;
  padding: 10px 18px;
  border-radius: var(--radius-pill);
  background: var(--mm-forest);
  color: var(--mm-white);
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  text-decoration: none;
  transform: translateY(-200%);
  transition: transform var(--dur-base) var(--ease-standard);
}
.skip-link:focus-visible {
  transform: translateY(0);
  color: var(--mm-white);
}

/* ============================================================
   button  (design system: components/core/Button.jsx)
   ============================================================ */

.mm-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-family: var(--font-ui);
  font-weight: var(--fw-medium);
  letter-spacing: 0.02em;
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--dur-base) var(--ease-standard),
    color var(--dur-base) var(--ease-standard),
    border-color var(--dur-base) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard);
}
.mm-btn:active { transform: scale(var(--press-scale)); }
.mm-btn[disabled] { opacity: 0.4; pointer-events: none; }

.mm-btn--lg { font-size: var(--fs-body); padding: 16px 32px; min-height: 52px; }
.mm-btn--md { font-size: var(--fs-body-s); padding: 12px 24px; min-height: 44px; min-width: 120px; }

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

/* ============================================================
   hero
   ============================================================ */

.mm-hero {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;

  /* Width caps the band so its content spans --content-max and aligns with the
     sections below; height caps it so tall screens do not stretch the tiles.
     Below 1440px neither applies. */
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  min-height: 100vh;
  min-height: min(100svh, 1000px);
}

.mm-hero__copy {
  flex: 4 1 360px;
  min-width: 0;
  padding: var(--space-8) var(--space-6) var(--space-9) var(--page-margin);
  display: flex;
  flex-direction: column;
  gap: var(--space-7);
}

.mm-hero__logo { display: flex; line-height: 0; }
.mm-hero__logo img { height: 36px; width: auto; }

.mm-hero__spacer { flex: 1; }

.mm-hero__title {
  margin: 0;
  font-size: var(--fs-display-l);
  font-weight: var(--fw-light);
  line-height: 1.2;
  letter-spacing: -0.01em;
  max-width: 13ch;
}
.mm-hero__title strong { font-weight: var(--fw-semibold); }

/* --- headline word swap (European <-> French) --- */

/* Width is set in JS, only while the word is invisible. */
.mm-swap {
  display: inline-block;
  position: relative;
  white-space: nowrap;
  transition: width var(--dur-base) var(--ease-standard);
}

.mm-swap__word {
  display: inline-block;
  font-weight: var(--fw-semibold);
  transition:
    opacity var(--dur-base) var(--ease-standard),
    transform var(--dur-base) var(--ease-standard);
}

/* Fades and small translations only, per the brand's motion rules. */
.mm-swap.is-out .mm-swap__word { opacity: 0; transform: translateY(-0.14em); }
.mm-swap.is-in  .mm-swap__word { opacity: 0; transform: translateY(0.14em); }

/* The measuring twin: laid out for its width, never painted. */
.mm-swap__measure {
  position: absolute;
  left: 0;
  top: 0;
  visibility: hidden;
  pointer-events: none;
  white-space: nowrap;
  font-weight: var(--fw-semibold);
}

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.mm-hero__actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-top: var(--space-5);
}

/* --- the image collage --- */

.mm-hero__art {
  flex: 8 1 480px;
  min-width: 0;
  padding: var(--space-8) var(--page-margin) var(--space-8) 0;
  display: flex;
  gap: var(--space-6);
  min-height: 480px;
}

.mm-hero__col {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
}
.mm-hero__col--a { padding-bottom: var(--space-9); }
.mm-hero__col--b {
  padding-top: var(--space-9);
  margin-bottom: calc(-1 * var(--space-10));
}

.mm-tile {
  border-radius: var(--radius-card);
  background-color: var(--mm-neutral-200);
  background-size: cover;
  box-shadow:
    0 16px 28px -12px rgba(16, 17, 11, 0.45),
    0 4px 10px -4px rgba(16, 17, 11, 0.25);
}
.mm-tile--tall  { flex: 3; }
.mm-tile--short { flex: 1.1; }

.mm-tile--paris  { background-image: url("../assets/img/paris.webp");       background-position: 50% 8%; }
.mm-tile--cashew { background-image: url("../assets/img/cashew-leaf.webp"); background-position: center 60%; }
.mm-tile--smog   { background-image: url("../assets/textures/texture-smog-yellow.webp");  background-position: center; }
.mm-tile--leaves { background-image: url("../assets/textures/texture-leaves-blue.webp");  background-position: center; }


/* ============================================================
   reveals

   Gated behind html.js, set by an inline script before first paint. Without
   scripting the hidden state is never applied, so content is simply visible
   rather than stuck at opacity 0.
   ============================================================ */

/* Local value, deliberately longer than the brand's 120/220/420 scale. Not a
   change to --dur-slow, which other motion still uses. */
:root { --mm-dur-reveal: 700ms; }

[data-reveal] {
  transition:
    opacity var(--mm-dur-reveal) var(--ease-entrance),
    transform var(--mm-dur-reveal) var(--ease-entrance);
}

.js [data-reveal]:not(.is-revealed) {
  opacity: 0;
  transform: translateY(12px);
}

/* ============================================================
   language switcher
   ============================================================ */

.mm-lang {
  position: absolute;
  top: var(--space-8);
  right: var(--page-margin);
  z-index: 5;
}

.mm-lang__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-hairline);
  background: var(--surface-page);
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--mm-forest);
  transition: border-color var(--dur-fast) var(--ease-standard);
}
.mm-lang__toggle:hover { border-color: var(--mm-forest); }

.mm-lang__chevron {
  width: 14px;
  height: 14px;
  transform: rotate(90deg);
  transition: transform var(--dur-base) var(--ease-standard);
}
.mm-lang__toggle[aria-expanded="true"] .mm-lang__chevron { transform: rotate(-90deg); }

.mm-flag {
  width: 18px;
  height: 12px;
  display: block;
  flex: none;
  border-radius: 2px;
  box-shadow: 0 0 0 1px rgba(16, 17, 11, 0.12);
  background-size: cover;
}

.mm-lang__menu {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 110px;
  padding: 6px;
  background: var(--surface-page);
  border-radius: 14px;
  box-shadow: var(--shadow-float);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
/* visibility (not display) so the panel can transition, while still being
   removed from the accessibility tree and the tab order when closed. */
.mm-lang__menu {
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--dur-fast) var(--ease-standard),
    transform var(--dur-fast) var(--ease-standard),
    visibility 0s linear var(--dur-fast);
}
.mm-lang__menu.is-open {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}
/* Before the script runs, the attribute still hides it. */
.mm-lang__menu[hidden] { display: none; }

.mm-lang__option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  font-family: var(--font-ui);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  color: var(--mm-forest);
  text-align: left;
  transition: background-color var(--dur-fast) var(--ease-standard);
}
.mm-lang__option:hover { background: var(--mm-neutral-200); }
.mm-lang__option[aria-current="page"] { background: var(--mm-neutral-100); }
/* Options are anchors now; keep them from inheriting link styling. */
a.mm-lang__option { text-decoration: none; }
a.mm-lang__option:hover { color: var(--mm-forest); }

/* ============================================================
   offers
   ============================================================ */

.mm-offers {
  background: var(--surface-paper);
  padding: calc(var(--space-10) + var(--space-8)) var(--page-margin) var(--space-10);
}

.mm-offers__inner {
  max-width: var(--content-max);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-8);
}

.mm-offers__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
}

.mm-offers__title {
  margin: 0;
  font-size: var(--fs-display-m);
  font-weight: var(--fw-light);
  line-height: 1.08;
  max-width: 22ch;
}

.mm-offers__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-7) var(--space-5);
}

.mm-offer {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
}

/* Square-first: the brand only rounds story cards and pills, never a product frame. */
.mm-offer__frame {
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--mm-neutral-200);
}

.mm-offer__img {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  transition: transform var(--dur-slow) var(--ease-standard);
}
.mm-offer:hover .mm-offer__img { transform: scale(1.03); }

.mm-offer__name {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  font-weight: var(--fw-regular);
  line-height: 1.2;
  margin: var(--space-2) 0 0;
}

.mm-offer__text {
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  line-height: 1.5;
  color: var(--mm-neutral-600);
}

/* ============================================================
   statement + contact  (design system: components/brand/TextureBlock.jsx)
   ============================================================ */

.mm-statement {
  position: relative;
  padding: var(--space-10) var(--page-margin) var(--space-7);
  background-image: url("../assets/textures/texture-palm-green.webp");
  background-size: cover;
  background-position: center;
  color: var(--text-on-dark);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.mm-statement__line {
  max-width: 30ch;
  margin: 0 auto;
  font-family: var(--font-display);
  font-size: var(--fs-display-m);
  font-weight: var(--fw-light);
  line-height: 1.12;
  color: var(--mm-white);
  text-wrap: balance;
}
.mm-statement__line strong { font-weight: var(--fw-semibold); }

.mm-contact {
  width: 100%;
  margin-top: var(--space-10);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-6);
}

.mm-contact__logo {
  height: 96px;
  width: auto;
}

.mm-contact__note {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: rgba(255, 255, 255, 0.85);
}

/* ============================================================
   responsive
   ============================================================ */

/* ------------------------------------------------------------------
   Below 900px the hero becomes a single full-bleed photograph with the
   copy laid over it.

   Why not keep the collage: stacked, its four tiles fall to ~159px wide on a
   phone, and two of them are duotone textures carrying no information - it
   reads as clutter, not as a composition. One uncropped photograph is what the
   brand book asks for anyway, and type over photography is specified to sit on
   the scrim. The whole hero then fits one screen.
   ------------------------------------------------------------------ */
@media (max-width: 900px) {
  .mm-hero {
    min-height: 100svh;
    background-color: var(--mm-forest);
    /* Portrait crop matching the viewport; the shared paris.webp wastes 31% of
       its width here. Plain url() is the pre-image-set fallback. */
    background-image: url("../assets/img/paris-mobile.webp");
    background-image: image-set(
      url("../assets/img/paris-mobile.avif") type("image/avif"),
      url("../assets/img/paris-mobile.webp") type("image/webp")
    );
    background-size: cover;
    background-position: 50% 50%;
  }

  /* Bottom-up scrim for the copy, plus a short top one: the sky is near-white
     and the lockup over it is white. */
  .mm-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background:
      linear-gradient(to bottom, rgba(16, 17, 11, 0.5) 0%, rgba(16, 17, 11, 0) 20%),
      linear-gradient(to top,
        rgba(16, 17, 11, 0.92) 0%,
        rgba(16, 17, 11, 0.8) 26%,
        rgba(16, 17, 11, 0.58) 50%,
        rgba(16, 17, 11, 0) 82%);
    pointer-events: none;
  }

  .mm-hero__art { display: none; }

  .mm-hero__copy {
    position: relative;
    z-index: 1;
    flex: 1 1 100%;
    min-height: 100svh;
    padding: var(--space-8) var(--page-margin) var(--space-9);
    gap: var(--space-5);
    color: var(--mm-white);
  }
  /* First spacer keeps its flex:1 and pushes the copy to the foot of the
     screen; the trailing one would fight it. */
  .mm-hero__copy > .mm-hero__spacer:last-child { display: none; }

  .mm-hero__title { color: var(--mm-white); }
  /* Must stay scoped: unscoped it also whitens the offers eyebrow on paper. */
  .mm-hero .mm-eyebrow--muted { color: rgba(255, 255, 255, 0.82); }

  /* Forest on the scrim is too close in value; the inverse fill reads. */
  .mm-hero__actions .mm-btn--primary {
    background: var(--mm-white);
    color: var(--mm-forest);
  }
  .mm-hero__actions .mm-btn--primary:hover {
    background: var(--mm-neutral-200);
    color: var(--mm-forest);
  }

  /* The lockup is a single-colour vector, so it inverts to the solid white
     version the brand requires over photography without a second file. */
  .mm-hero__logo img { filter: brightness(0) invert(1); }

  /* Logo row takes the pill's height and centres, so the two align. */
  .mm-hero__logo {
    align-items: center;
    min-height: 36px;
  }
  .mm-lang { top: var(--space-8); }
}

@media (max-width: 560px) {
  /* Shrunk so the lockup clears the language pill on one row. */
  .mm-hero__logo img { height: 28px; }

  .mm-offers { padding-top: var(--space-10); }
  .mm-contact__logo { height: 72px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .mm-offer:hover .mm-offer__img { transform: none; }
  .mm-swap__word { opacity: 1 !important; transform: none !important; }
  .js [data-reveal]:not(.is-revealed) { opacity: 1; transform: none; }
  .mm-lang__menu { transition: none; }
}

@media print {
  .mm-lang, .skip-link { display: none; }
  .mm-hero { min-height: 0; }
}

/* ============================================================
   flags  (inline SVG data URIs, lifted from the design mock)
   ============================================================ */

.mm-flag[data-flag="fr"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%203%202%22%3E%3Crect%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23002395%22%2F%3E%3Crect%20x%3D%221%22%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23fff%22%2F%3E%3Crect%20x%3D%222%22%20width%3D%221%22%20height%3D%222%22%20fill%3D%22%23ED2939%22%2F%3E%3C%2Fsvg%3E');
}

.mm-flag[data-flag="en"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3CclipPath%20id%3D%22c%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%2F%3E%3C%2FclipPath%3E%3Cg%20clip-path%3D%22url(%23c)%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%20fill%3D%22%23012169%22%2F%3E%3Cpath%20d%3D%22M0%2C0%2060%2C40M60%2C0%200%2C40%22%20stroke%3D%22%23fff%22%20stroke-width%3D%228%22%2F%3E%3Cpath%20d%3D%22M0%2C0%2060%2C40M60%2C0%200%2C40%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%223%22%2F%3E%3Cpath%20d%3D%22M30%2C0V40M0%2C20H60%22%20stroke%3D%22%23fff%22%20stroke-width%3D%2212%22%2F%3E%3Cpath%20d%3D%22M30%2C0V40M0%2C20H60%22%20stroke%3D%22%23C8102E%22%20stroke-width%3D%227%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
}

.mm-flag[data-flag="km"] {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2060%2040%22%3E%3Crect%20width%3D%2260%22%20height%3D%2240%22%20fill%3D%22%23032EA1%22%2F%3E%3Crect%20y%3D%2210%22%20width%3D%2260%22%20height%3D%2220%22%20fill%3D%22%23E00025%22%2F%3E%3Cpath%20d%3D%22M20%2C26h20v-2h-2v-3h-2v-4h-1v-3h-2v3h-1v-3h-2v3h-1v-3h-2v3h-1v4h-2v3h-2z%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E');
}

/* ============================================================
   legal / document pages  (mentions-legales, confidentialite)
   ============================================================ */

.mm-doc {
  max-width: calc(var(--content-max) + 2 * var(--page-margin));
  margin-inline: auto;
  padding: var(--space-8) var(--page-margin) var(--space-10);
}

.mm-doc__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  padding-bottom: var(--space-7);
  border-bottom: 1px solid var(--border-hairline);
}

.mm-doc__logo img { height: 32px; width: auto; }

.mm-doc__title {
  font-size: var(--fs-display-m);
  font-weight: var(--fw-light);
  line-height: 1.08;
  max-width: 20ch;
}

.mm-doc__body {
  max-width: var(--measure);
  padding-top: var(--space-7);
}

.mm-doc__body h2 {
  font-size: var(--fs-display-s);
  font-weight: var(--fw-light);
  margin: var(--space-8) 0 var(--space-3);
}
.mm-doc__body h2:first-child { margin-top: 0; }

.mm-doc__body h3 {
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--mm-neutral-600);
  margin: var(--space-6) 0 var(--space-2);
}

.mm-doc__body p,
.mm-doc__body li {
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--mm-neutral-700);
}
.mm-doc__body p { margin-bottom: var(--space-4); }
.mm-doc__body ul { margin: 0 0 var(--space-4); padding-left: var(--space-5); }
.mm-doc__body li { margin-bottom: var(--space-2); }

.mm-doc__body dl { margin: 0 0 var(--space-4); }
.mm-doc__body dt {
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: var(--space-3);
}
.mm-doc__body dd {
  font-family: var(--font-ui);
  font-size: var(--fs-body-s);
  line-height: 1.6;
  color: var(--mm-neutral-700);
  margin: 2px 0 0;
}

/* A field left empty until its value exists. Shows as a ruled blank rather
   than collapsing to nothing, so a missing entry is visible on the page. */
.mm-blank {
  display: block;
  min-height: 1.6em;
  border-bottom: 1px dashed var(--border-hairline);
  max-width: 34ch;
}
.mm-blank--inline {
  display: inline-block;
  min-height: 0;
  width: 10ch;
  vertical-align: baseline;
}

.mm-doc__foot {
  margin-top: var(--space-9);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border-hairline);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
  color: var(--text-muted);
}

/* Legal links beside the copyright line in the site footer. */
.mm-contact__links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: var(--space-4);
  font-family: var(--font-ui);
  font-size: var(--fs-caption);
}
.mm-contact__links a { color: rgba(255, 255, 255, 0.85); text-decoration: none; }
.mm-contact__links a:hover { color: var(--mm-white); text-decoration: underline; }