/* ==========================================================================
   WHITE MOON — "Grown by light" design system
   --------------------------------------------------------------------------
   One system for the whole store. The page opens at midnight (hero), and the
   surfaces lighten section by section toward moonlit white, like a moonrise.
   Light — never colour — separates sections: hairlines, tone, no boxes.

   Loaded AFTER base.css / wm-tokens.css / wm-base.css, so it also re-points the
   legacy --wm-* tokens. That is how the collection, product, cart and account
   templates pick up the new palette and type without each of them being rewritten.
   ========================================================================== */

html:root {
  /* ---- palette (exact brief tokens) ---------------------------------- */
  --midnight: #0B0F1A;
  --ink: #141A2A;
  --moon: #F7F6F2;
  --pearl: #E9E7E1;
  --silver: #9AA0AC;   /* muted text on DARK only (fails AA on light) */
  --graphite: #2A2F3A; /* body text on light */
  --glow: #D9CBA3;     /* champagne: small highlights on dark, active states */
  --hair-dark: rgb(154 160 172 / .22);
  --hair-light: rgb(42 47 58 / .14);
  --muted-light: #575D69; /* secondary text on light — 6.1:1 on --moon */

  /* ---- type ------------------------------------------------------------ */
  --f-display: "Cormorant Garamond", "Cormorant", Georgia, serif;
  --f-ui: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif;
  --t-96: clamp(3.25rem, 6.6vw, 6rem);
  --t-72: clamp(2.75rem, 5vw, 4.5rem);
  --t-56: clamp(2.25rem, 3.9vw, 3.5rem);
  --t-40: clamp(1.875rem, 2.8vw, 2.5rem);
  --t-28: clamp(1.375rem, 2vw, 1.75rem);
  --t-20: 1.25rem;
  --t-16: 1rem;
  --t-14: .875rem;
  --t-12: .75rem;
  --track-label: .18em;

  /* ---- layout ------------------------------------------------------------ */
  --maxw: 1440px;
  --gutter: 24px;
  --sec-y: 96px;
  --ease: cubic-bezier(.2, .7, .2, 1);
  --dur: 700ms;
  --head-h: 76px;
  --announce-h: 36px;

  /* ---- legacy token bridge (collection / PDP / cart / account) --------- */
  --wm-accent: var(--midnight);
  --wm-accent-rgb: 11 15 26;
  --wm-ink: var(--graphite);
  --wm-ink-rgb: 42 47 58;
  --wm-ink-soft: var(--muted-light);
  --wm-paper: #FFFFFF;
  --wm-bone: var(--moon);
  --wm-mist: var(--pearl);
  --wm-night: var(--midnight);
  --wm-night-2: var(--ink);
  --wm-bg: var(--moon);
  --wm-bg-alt: var(--pearl);
  --wm-text: var(--graphite);
  --wm-text-muted: var(--muted-light);
  --wm-heading: var(--midnight);
  --wm-link: var(--midnight);
  --wm-price: var(--midnight);
  --wm-price-sale: var(--midnight);
  --wm-line: var(--hair-light);
  --wm-font-body: var(--f-ui);
  --wm-font-heading: var(--f-display);
  --wm-font-display: var(--f-display);
  --wm-font-logo: var(--f-ui);
  --wm-weight-body: 400;
  --wm-weight-heading: 400;
  --wm-text-base: .9375rem;
  --wm-radius: 0;
  --wm-ease: var(--ease);
  --wm-announce-bg: var(--midnight);
  --wm-announce-fg: var(--moon);
  --wm-chrome-bg: var(--moon);
  --wm-chrome-text: var(--midnight);
  --wm-footer-bg: var(--midnight);
  --wm-mega-bg: var(--moon);
}
@media (min-width: 990px) { html:root { --gutter: 64px; --sec-y: 128px; } }
@media (max-width: 749px) { html:root { --sec-y: 72px; --head-h: 64px; } }

/* ---- element base --------------------------------------------------------- */
html { background: var(--midnight); }
body.m-body {
  background: var(--moon);
  color: var(--graphite);
  font-family: var(--f-ui);
  font-weight: 400;
  font-size: .9375rem;
  line-height: 1.7;
  letter-spacing: .005em;
}
.m-body h1, .m-body h2, .m-body h3, .m-body h4 {
  font-family: var(--f-display);
  font-weight: 300;
  letter-spacing: -.02em;
  color: inherit;
}
.m-body em, .m-body .m-em { font-style: italic; font-weight: 400; }
:where(.m-body) a { color: inherit; }
.m-body ::selection { background: var(--glow); color: var(--midnight); }
.m-body :focus-visible { outline: 1px solid currentColor; outline-offset: 4px; }
.m-body img { max-width: 100%; }

/* ---- primitives ------------------------------------------------------------ */
.m-wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); }
.m-sec { position: relative; padding-top: var(--sec-y); padding-bottom: var(--sec-y); }
.m-sec--midnight { background: var(--midnight); color: var(--moon); }
.m-sec--ink { background: var(--ink); color: var(--moon); }
.m-sec--moon { background: var(--moon); color: var(--graphite); }
.m-sec--pearl { background: var(--pearl); color: var(--graphite); }

.m-label {
  display: inline-block;
  font-family: var(--f-ui);
  font-size: var(--t-12);
  font-weight: 600;
  letter-spacing: var(--track-label);
  text-transform: uppercase;
  line-height: 1.4;
}
.m-sec--midnight .m-label, .m-sec--ink .m-label, .m-dark .m-label { color: var(--glow); }
.m-sec--moon .m-label, .m-sec--pearl .m-label { color: var(--muted-light); }

.m-h1 { font-size: var(--t-96); line-height: .98; }
.m-h2 { font-size: var(--t-72); line-height: 1.02; }
.m-h3 { font-size: var(--t-56); line-height: 1.05; }
.m-h4 { font-size: var(--t-40); line-height: 1.1; }
.m-h5 { font-size: var(--t-28); line-height: 1.2; }
.m-lead { font-size: var(--t-16); line-height: 1.75; max-width: 34em; }
.m-sec--moon .m-lead, .m-sec--pearl .m-lead { color: var(--graphite); }
.m-sec--midnight .m-lead, .m-sec--ink .m-lead { color: #C9CDD5; }

.m-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 32px; margin-bottom: 56px; }
.m-head__title { margin: 12px 0 0; }
@media (max-width: 749px) { .m-head { flex-direction: column; align-items: flex-start; margin-bottom: 36px; } }

/* crescent motif — the one signature mark, always the same stroke */
.m-crescent { display: inline-block; width: 18px; height: 18px; color: var(--glow); vertical-align: middle; }
.m-crescent svg { display: block; width: 100%; height: 100%; }
.m-divider { display: flex; align-items: center; gap: 16px; color: var(--glow); }
.m-divider::before, .m-divider::after { content: ""; flex: 1; height: 1px; background: currentColor; opacity: .35; }
.m-sec--moon .m-divider, .m-sec--pearl .m-divider { color: var(--graphite); }

/* ---- buttons --------------------------------------------------------------- */
.m-btn {
  --bg: var(--midnight); --fg: var(--moon); --bd: var(--midnight);
  position: relative;
  display: inline-flex; align-items: center; justify-content: center; gap: 12px;
  min-height: 52px; padding: 0 32px;
  background: var(--bg); color: var(--fg); border: 1px solid var(--bd);
  font: 600 var(--t-12)/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none; cursor: pointer; border-radius: 0;
  transition: background .45s var(--ease), color .45s var(--ease), border-color .45s var(--ease), transform .5s var(--ease);
  will-change: transform;
}
.m-btn:hover { --bg: var(--ink); --bd: var(--ink); }
.m-btn--light { --bg: var(--moon); --fg: var(--midnight); --bd: var(--moon); }
.m-btn--light:hover { --bg: #FFFFFF; --bd: #FFFFFF; }
.m-btn--ghost { --bg: transparent; --fg: var(--moon); --bd: rgb(247 246 242 / .45); }
.m-btn--ghost:hover { --bg: rgb(247 246 242 / .08); --bd: var(--moon); }
.m-btn--ghost-dark { --bg: transparent; --fg: var(--midnight); --bd: rgb(11 15 26 / .35); }
.m-btn--ghost-dark:hover { --bg: var(--midnight); --fg: var(--moon); --bd: var(--midnight); }
.m-btn--block { width: 100%; }

/* text link with an underline that draws in */
.m-link {
  position: relative; display: inline-flex; align-items: center; gap: 10px;
  font: 600 var(--t-12)/1.4 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase;
  text-decoration: none; padding: 6px 0; min-height: 44px;
}
.m-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 8px; height: 1px; background: currentColor;
  transform: scaleX(.25); transform-origin: left; transition: transform .6s var(--ease);
}
.m-link:hover::after, .m-link:focus-visible::after { transform: scaleX(1); }
.m-link__arrow { transition: transform .6s var(--ease); }
.m-link:hover .m-link__arrow { transform: translateX(4px); }

/* round arrow buttons for rails */
.m-arrow {
  width: 48px; height: 48px; display: inline-grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%; background: transparent; color: inherit; cursor: pointer;
  opacity: .8; transition: opacity .3s, background .3s, color .3s;
}
.m-arrow:hover { opacity: 1; background: var(--midnight); color: var(--moon); border-color: var(--midnight); }
.m-dark .m-arrow:hover, .m-sec--midnight .m-arrow:hover { background: var(--moon); color: var(--midnight); border-color: var(--moon); }
.m-arrow[disabled] { opacity: .25; pointer-events: none; }

/* ---- motion ---------------------------------------------------------------- */
.m-js [data-m-reveal] { opacity: 0; transform: translateY(24px); transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); }
.m-js [data-m-reveal].is-in { opacity: 1; transform: none; }
.m-js [data-m-reveal="2"] { transition-delay: 120ms; }
.m-js [data-m-reveal="3"] { transition-delay: 240ms; }
.m-js [data-m-reveal="4"] { transition-delay: 360ms; }
/* line-by-line headline reveal through a clip mask */
.m-lines .m-line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; }
.m-lines .m-line > span { display: block; }
.m-js .m-lines .m-line > span { transform: translateY(105%); transition: transform 1000ms var(--ease); }
.m-js .m-lines.is-in .m-line > span { transform: none; }
.m-js .m-lines.is-in .m-line:nth-child(2) > span { transition-delay: 110ms; }
.m-js .m-lines.is-in .m-line:nth-child(3) > span { transition-delay: 220ms; }
.m-js .m-lines.is-in .m-line:nth-child(4) > span { transition-delay: 330ms; }

/* light sweep across diamond imagery on hover */
.m-shimmer { position: relative; overflow: hidden; }
.m-shimmer::after {
  content: ""; position: absolute; inset: -20% -60%; pointer-events: none; z-index: 2;
  background: linear-gradient(105deg, transparent 40%, rgb(255 255 255 / .28) 50%, transparent 60%);
  transform: translateX(-70%); opacity: 0;
}
.m-shimmer:hover::after { animation: m-sweep 1.4s var(--ease) forwards; }
@keyframes m-sweep { 0% { transform: translateX(-70%); opacity: 1; } 100% { transform: translateX(70%); opacity: 1; } }

/* moonlight grade: pulls warm lifestyle photography toward one cool, quiet look */
.m-grade { filter: saturate(.82) contrast(1.04); }

@media (prefers-reduced-motion: reduce) {
  .m-js [data-m-reveal], .m-js .m-lines .m-line > span { opacity: 1 !important; transform: none !important; transition: none !important; }
  .m-shimmer:hover::after { animation: none; }
  * { scroll-behavior: auto !important; }
}

/* ==========================================================================
   ANNOUNCEMENT + HEADER
   ========================================================================== */
.m-announce {
  position: relative; z-index: 60;
  height: var(--announce-h); background: var(--midnight); color: var(--moon);
  display: grid; place-items: center; overflow: hidden;
  border-bottom: 1px solid var(--hair-dark);
}
.m-announce__item {
  grid-area: 1 / 1; display: flex; align-items: center; gap: 10px;
  font: 500 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity .8s var(--ease), transform .8s var(--ease);
  white-space: nowrap;
}
.m-announce__item.is-on { opacity: 1; transform: none; }
.m-announce__item .m-crescent { width: 12px; height: 12px; }
.m-announce__item:first-child { opacity: 1; transform: none; }
.m-js .m-announce__item:first-child:not(.is-on) { opacity: 0; transform: translateY(8px); }

.m-header {
  position: sticky; top: 0; z-index: 50;
  color: var(--midnight); background: rgb(247 246 242 / .96);
  border-bottom: 1px solid var(--hair-light);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  transition: background .5s var(--ease), color .5s var(--ease), border-color .5s var(--ease);
}
/* over the hero: transparent, moon-white type */
.m-header--overlay { margin-bottom: calc(-1 * var(--head-h)); }
.m-header--overlay:not(.is-solid):not(.is-open) {
  background: transparent; color: var(--moon); border-color: transparent;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.m-header__bar {
  height: var(--head-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px;
}
.m-nav { display: flex; align-items: center; gap: 32px; height: 100%; }
.m-nav__link {
  position: relative; display: inline-flex; align-items: center; height: 100%;
  font: 500 11.5px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  background: none; border: 0; color: inherit; cursor: pointer; padding: 0;
}
.m-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: calc(50% - 14px); height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.m-nav__link:hover::after, .m-nav__item.is-open > .m-nav__link::after, .m-nav__link[aria-current]::after { transform: scaleX(1); }

.m-brand { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; text-decoration: none; color: inherit; }
.m-brand__row { display: flex; align-items: center; gap: 10px; }
.m-brand__word { font: 300 26px/1 var(--f-display); letter-spacing: .32em; text-transform: uppercase; margin-right: -.32em; white-space: nowrap; }
.m-brand__sub { font: 500 8.5px/1 var(--f-ui); letter-spacing: .5em; text-transform: uppercase; opacity: .7; margin-right: -.5em; }
.m-brand .m-crescent { width: 20px; height: 20px; color: currentColor; }
.m-header--overlay:not(.is-solid):not(.is-open) .m-brand .m-crescent { color: var(--glow); }

.m-tools { display: flex; align-items: center; justify-content: flex-end; gap: 4px; }
.m-icon {
  position: relative; width: 44px; height: 44px; display: inline-grid; place-items: center;
  background: none; border: 0; color: inherit; cursor: pointer; text-decoration: none; border-radius: 50%;
  transition: background .3s;
}
.m-icon:hover { background: rgb(127 127 127 / .12); }
.m-icon svg { width: 19px; height: 19px; }
.m-icon__count {
  position: absolute; top: 6px; right: 4px; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 8px; background: var(--glow); color: var(--midnight);
  font: 700 9.5px/16px var(--f-ui); text-align: center;
}
.m-icon__count[hidden] { display: none; }
.m-appt-link {
  margin-right: 8px; display: inline-flex; align-items: center; gap: 8px; min-height: 44px;
  font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  padding: 0 16px; border: 1px solid currentColor; border-color: rgb(127 127 127 / .45);
  transition: border-color .3s, background .3s;
}
.m-appt-link:hover { border-color: currentColor; }
.m-burger { display: none; }

/* progress crescent: the header's thin moonrise line */
.m-header__progress { position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--glow); transform-origin: left; transform: scaleX(var(--m-progress, 0)); opacity: .9; pointer-events: none; }

/* ---- mega menu ----------------------------------------------------------- */
.m-mega {
  position: absolute; left: 0; right: 0; top: 100%;
  background: var(--moon); color: var(--graphite);
  border-top: 1px solid var(--hair-light); border-bottom: 1px solid var(--hair-light);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .45s var(--ease), transform .45s var(--ease), visibility 0s linear .45s;
}
.m-nav__item.is-open > .m-mega { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.m-mega__grid { display: grid; grid-template-columns: 1.15fr 1fr 1fr; gap: 64px; padding-top: 48px; padding-bottom: 56px; }
.m-mega__grid--fine { grid-template-columns: repeat(3, 1fr) 1.1fr; gap: 40px; }
.m-mega__title { margin: 0 0 24px; font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--muted-light); }
.m-shapes-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 8px; }
.m-shape-link {
  display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 12px 4px;
  text-decoration: none; color: var(--graphite); font: 500 12px/1.2 var(--f-ui);
  transition: color .3s;
}
.m-shape-link svg { width: 34px; height: 34px; transition: transform .5s var(--ease); }
.m-shape-link:hover { color: var(--midnight); }
.m-shape-link:hover svg { transform: translateY(-3px); }
.m-mega__list { list-style: none; margin: 0; padding: 0; columns: 1; }
.m-mega__list li + li { margin-top: 2px; }
.m-mega__list a {
  display: inline-flex; min-height: 36px; align-items: center;
  font: 300 22px/1.2 var(--f-display); text-decoration: none; color: var(--midnight);
  background: linear-gradient(currentColor, currentColor) left 85% / 0 1px no-repeat; transition: background-size .5s var(--ease);
}
.m-mega__list a:hover { background-size: 100% 1px; }
.m-mega__feature { display: block; text-decoration: none; color: var(--moon); position: relative; overflow: hidden; background: var(--midnight); }
.m-mega__feature img { display: block; width: 100%; aspect-ratio: 4/3.4; object-fit: cover; transition: transform 1.2s var(--ease); opacity: .9; }
.m-mega__feature:hover img { transform: scale(1.04); }
.m-mega__feature-copy { position: absolute; left: 0; right: 0; bottom: 0; padding: 24px; background: linear-gradient(transparent, rgb(11 15 26 / .85)); }
.m-mega__feature-copy .m-label { color: var(--glow); }
.m-mega__feature-copy h3 { margin: 8px 0 12px; font-size: 26px; line-height: 1.15; color: var(--moon); }
.m-mega__feature-copy span:last-child { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; }
.m-mega__tile { display: block; text-decoration: none; color: var(--midnight); }
.m-mega__tile img { display: block; width: 100%; aspect-ratio: 3/4; object-fit: cover; margin-bottom: 14px; }
.m-mega__tile span { font: 300 22px/1.2 var(--f-display); }

/* ---- search panel (wm-chrome.js toggles [hidden]) --------------------------- */
.m-search { position: absolute; left: 0; right: 0; top: 100%; background: var(--moon); color: var(--midnight); border-bottom: 1px solid var(--hair-light); }
.m-search[hidden] { display: none; }
.m-search__form { display: flex; align-items: center; gap: 16px; padding-top: 28px; padding-bottom: 28px; }
.m-search__input {
  flex: 1; min-width: 0; height: 56px; border: 0; border-bottom: 1px solid var(--midnight); background: transparent;
  font: 300 clamp(22px, 2.6vw, 32px)/1 var(--f-display); color: var(--midnight); padding: 0; border-radius: 0;
}
.m-search__input:focus { outline: none; border-bottom-width: 2px; }
.m-search [data-wm-suggest] { padding-bottom: 24px; }

/* ---- mobile ---------------------------------------------------------------- */
@media (max-width: 1099px) {
  .m-header__bar { grid-template-columns: auto 1fr auto; gap: 8px; }
  .m-nav, .m-appt-link, .m-tools .m-icon--desk { display: none; }
  .m-burger {
    display: inline-grid; place-items: center; width: 44px; height: 44px; background: none; border: 0; color: inherit; cursor: pointer; margin-left: -10px;
  }
  .m-burger span { display: block; width: 22px; height: 1px; background: currentColor; box-shadow: 0 -6px 0 currentColor, 0 6px 0 currentColor; }
  .m-brand { justify-self: center; }
  .m-brand__word { font-size: 20px; letter-spacing: .26em; margin-right: -.26em; }
  .m-brand__sub { font-size: 7.5px; }
  .m-tools { gap: 0; margin-right: -10px; }
}
@media (max-width: 380px) { .m-brand__word { font-size: 18px; letter-spacing: .2em; margin-right: -.2em; } .m-brand .m-crescent { display: none; } }

.m-drawer {
  position: fixed; inset: 0; z-index: 90; background: var(--midnight); color: var(--moon);
  display: flex; flex-direction: column; overflow-y: auto; overscroll-behavior: contain;
  opacity: 0; visibility: hidden; transition: opacity .5s var(--ease), visibility 0s linear .5s;
}
.m-drawer.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
.m-drawer__top { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 14px 0 var(--gutter); border-bottom: 1px solid var(--hair-dark); flex: none; }
.m-drawer__body { padding: 32px var(--gutter) 48px; }
.m-drawer__shapes { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; margin: 16px 0 40px; }
.m-drawer__shapes .m-shape-link { color: var(--moon); font-size: 11px; padding: 10px 0; }
.m-drawer__shapes .m-shape-link svg { width: 28px; height: 28px; color: var(--glow); }
.m-drawer__nav { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair-dark); }
.m-drawer__nav li { border-bottom: 1px solid var(--hair-dark); }
.m-drawer__nav a { display: flex; justify-content: space-between; align-items: center; min-height: 64px; font: 300 30px/1.1 var(--f-display); text-decoration: none; color: var(--moon); }
.m-drawer__nav a span { font: 400 14px/1 var(--f-ui); color: var(--silver); }
.m-drawer__meta { margin-top: 40px; display: grid; gap: 4px; }
.m-drawer__meta a { display: flex; align-items: center; min-height: 44px; color: #C9CDD5; text-decoration: none; font-size: 14px; gap: 12px; }
.m-drawer .m-label { color: var(--silver); }

/* ==========================================================================
   FOOTER
   ========================================================================== */
.m-footer { background: var(--midnight); color: #C9CDD5; position: relative; overflow: hidden; padding-top: 96px; }
.m-footer__grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 48px; padding-bottom: 72px; border-bottom: 1px solid var(--hair-dark); }
.m-footer .m-brand { align-items: flex-start; color: var(--moon); }
.m-footer .m-brand .m-crescent { color: var(--glow); }
.m-footer__blurb { margin: 24px 0 28px; max-width: 30em; font-size: 15px; line-height: 1.75; color: #C9CDD5; }
.m-footer__contact { display: grid; gap: 6px; font-size: 14px; }
.m-footer__contact a, .m-footer__contact span { display: inline-flex; gap: 12px; align-items: flex-start; color: #DADDE3; text-decoration: none; min-height: 32px; align-items: center; }
.m-footer__contact svg { width: 16px; height: 16px; color: var(--glow); flex: none; }
.m-footer__h { margin: 0 0 20px; font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); text-transform: uppercase; color: var(--glow); }
.m-footer__links { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.m-footer__links a { display: inline-flex; align-items: center; min-height: 34px; color: #DADDE3; text-decoration: none; font-size: 14.5px; background: linear-gradient(currentColor, currentColor) left 80% / 0 1px no-repeat; transition: background-size .5s var(--ease), color .3s; }
.m-footer__links a:hover { color: var(--moon); background-size: 100% 1px; }
.m-footer__social { display: flex; gap: 4px; margin-top: 24px; margin-left: -12px; }
.m-footer__social a { width: 44px; height: 44px; display: grid; place-items: center; color: var(--moon); border-radius: 50%; transition: background .3s; }
.m-footer__social a:hover { background: rgb(255 255 255 / .08); }
.m-footer__social svg { width: 18px; height: 18px; }
.m-footer__bottom { display: flex; justify-content: space-between; align-items: center; gap: 24px; padding-top: 28px; padding-bottom: 28px; font-size: 12.5px; color: var(--silver); flex-wrap: wrap; }
.m-pay { display: flex; gap: 8px; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; }
.m-pay li { border: 1px solid var(--hair-dark); padding: 6px 10px; font: 600 10px/1 var(--f-ui); letter-spacing: .12em; text-transform: uppercase; color: #C9CDD5; }
.m-footer__mark {
  display: block; text-align: center; white-space: nowrap; user-select: none; pointer-events: none;
  font: 300 clamp(64px, 17.5vw, 260px)/.8 var(--f-display); letter-spacing: .04em; margin: 8px 0 -0.14em;
  color: transparent; -webkit-text-stroke: 1px rgb(154 160 172 / .16);
  background: linear-gradient(180deg, rgb(217 203 163 / .07), rgb(217 203 163 / 0)); -webkit-background-clip: text; background-clip: text;
}
@media (max-width: 989px) { .m-footer__grid { grid-template-columns: 1fr 1fr; } .m-footer__brandcol { grid-column: 1 / -1; } }
@media (max-width: 549px) { .m-footer { padding-top: 64px; } .m-footer__grid { grid-template-columns: 1fr; gap: 36px; } }

/* ---- floating actions ----------------------------------------------------- */
.m-float {
  position: fixed; z-index: 40; bottom: 20px;
  display: inline-flex; align-items: center; gap: 10px; min-height: 44px; padding: 0 18px;
  background: rgb(11 15 26 / .92); color: var(--moon); border: 1px solid var(--hair-dark);
  font: 600 11px/1 var(--f-ui); letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: transform .5s var(--ease), opacity .5s var(--ease), background .3s;
}
.m-float:hover { background: var(--midnight); }
.m-float svg { width: 16px; height: 16px; color: var(--glow); }
.m-float--appt { left: 20px; border-radius: 22px; }
.m-float--chat { right: 20px; width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
.m-float.is-hidden { transform: translateY(90px); opacity: 0; pointer-events: none; }
@media (max-width: 749px) {
  .m-float--appt span { display: none; }
  .m-float--appt { width: 48px; height: 48px; padding: 0; justify-content: center; border-radius: 50%; }
  .m-float { bottom: 16px; }
  .m-float--appt { left: 16px; } .m-float--chat { right: 16px; }
}
/* the legacy "call now" pill is replaced by the two floats above */
.wm-call { display: none !important; }

/* ---- round-2 fixes ----------------------------------------------------------- */
/* `.m-body a { color: inherit }` out-ranks single-class components — re-assert. */
.m-body .m-btn { color: var(--fg); }
.m-body .m-float { color: var(--moon); }
.m-body .m-brand, .m-body .m-nav__link { color: inherit; }
.m-h1, .m-h2, .m-h3, .m-h4, .m-h5 { font-family: var(--f-display); font-weight: 300; letter-spacing: -.02em; }
.m-h5 { letter-spacing: -.01em; font-weight: 400; }
.m-footer .m-footer__h { font: 600 11px/1 var(--f-ui); letter-spacing: var(--track-label); }
.m-arrow svg { width: 18px; height: 18px; }
.m-nav { gap: 28px; }
.m-nav__link { white-space: nowrap; }
.m-appt-link { white-space: nowrap; }
.m-appt-link svg { width: 16px; height: 16px; flex: none; }
@media (max-width: 1360px) { .m-appt-link span { display: none; } .m-appt-link { width: 44px; padding: 0; justify-content: center; border-color: transparent; margin-right: 0; } .m-nav { gap: 22px; } }
.m-footer__mark { text-transform: uppercase; letter-spacing: .08em; font-size: clamp(56px, 13.5vw, 200px); }
@media (max-width: 549px) { .m-footer__grid { grid-template-columns: 1fr 1fr; gap: 36px 20px; } .m-footer__brandcol { grid-column: 1 / -1; } }

/* ---- self-review fixes (round 4) ------------------------------------------------------ */
/* 1 no orphans in display type */
.m-body h1, .m-body h2, .m-body h3, .m-h1, .m-h2, .m-h3, .m-h4, .m-h5, .m-lead { text-wrap: balance; }
/* 2 calmer section rhythm on desktop */
@media (min-width: 990px) { html:root { --sec-y: 112px; } }
/* 3 header appointment link: hairline only on hover, so the wordmark leads */
.m-appt-link { border-color: transparent; }
.m-appt-link:hover { border-color: currentColor; }
/* 4 floats: hide while scrolling down, return on scroll up (moon.js) */
.m-float.is-tucked { transform: translateY(90px); opacity: 0; pointer-events: none; }
/* announcement: the outgoing line leaves before the next one arrives — never two at once */
.m-announce__item { transition: opacity .5s var(--ease), transform .5s var(--ease); }
.m-announce__item.is-on { transition-delay: .5s; }