/* ==========================================================================
   MONARCH WELL — Design System
   Phase 1: colour, typography, spacing, buttons, cards, icons, navigation.
   Phase 2: breakpoints, swipe rails, mobile navigation panel, utilities.

   MOBILE-FIRST. Every base rule targets a 320px phone. Media queries only
   ever scale UP (min-width). Never author a desktop rule and walk it back.

   Palette source of truth: the pillar artwork + the logo, cross-checked
   against "Monarch Well Color Schemes.png". EVERY pillar is now its artwork
   value exactly — no overrides. Renew was the last exception: the 6 Aug
   artwork read #62A8D1 and the site recoloured it to stay muted, until
   Renew_Opt1 (11 Aug) supplied #73AACA and settled it in the artwork itself.
   MOVE = terracotta. RENEW = muted blue. Orange never means Renew.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FONTS

   Metropolis is self-hosted: SIL Open Font License, Chris Simpson 2016. The
   licence travels with the files in assets/fonts/OFL.txt, which the OFL
   requires — do not delete it. Source .otf files live in the Monarch Well
   folder on the Desktop; these are woff2 conversions, 31% smaller.

   Only the four weights the stylesheet actually asks for are shipped
   (300/400/500/600). No italics — every italic on the site is set in the
   serif. If you add an italic sans rule, a file has to be added here too or
   the browser will synthesise a slanted fake.

   Sabon LT Pro is also self-hosted, and is LICENSED COMMERCIAL SOFTWARE —
   Monotype Imaging, © 2015-2018, designed by Jan Tschichold. Monarch Well
   holds a web licence for it. Do not copy these files into another project,
   another domain, or a public repository; a web licence covers the site it
   was bought for. Source .otf files live in "Sabon Font Archive" in the
   Monarch Well folder on the Desktop. Replaced EB Garamond on 12 August.

   Three cuts are shipped — Roman, Italic, Bold — mapped across the weights
   the stylesheet asks for. Sabon has no Medium, so 400 and 500 both get
   Roman and 600 gets Bold. That is deliberate: it renders real outlines
   rather than letting the browser fake a weight that does not exist.

   No fonts come from a third party any more. The Google Fonts <link> and its
   two preconnects were removed from all six pages when Sabon landed.
   -------------------------------------------------------------------------- */

@font-face {
  font-family: "Sabon";
  src: url("../assets/fonts/SabonPro-Roman.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sabon";
  src: url("../assets/fonts/SabonPro-Roman.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sabon";
  src: url("../assets/fonts/SabonPro-Bold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Sabon";
  src: url("../assets/fonts/SabonPro-Italic.woff2") format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Sabon";
  src: url("../assets/fonts/SabonPro-Italic.woff2") format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/metropolis-300.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/metropolis-400.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/metropolis-500.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Metropolis";
  src: url("../assets/fonts/metropolis-600.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

/* --------------------------------------------------------------------------
   1. RESET
   -------------------------------------------------------------------------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Keep anchored headings clear of the sticky header. */
  scroll-padding-top: 84px;
}

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

body, h1, h2, h3, h4, p, figure, blockquote, dl, dd, ul, ol {
  margin: 0;
  padding: 0;
}

ul[class], ol[class] { list-style: none; }

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

input, button, textarea, select { font: inherit; color: inherit; }

button {
  background: none;
  border: 0;
  cursor: pointer;
}

a { color: inherit; }

/* --------------------------------------------------------------------------
   2. TOKENS
   -------------------------------------------------------------------------- */

:root {

  /* ---- Brand ---------------------------------------------------------- */
  /* Monarch Gold. #D59F0F from 17 August, taken from the supplied lockups
     (Monarch Well.png / …notag_white.png). The site ran on #DDAE44 until then
     — sampled from the older artwork, because #D59F0F was specified in the
     brief but appeared in no file we had. The new lockups settle it. The two
     are ~13 deltaE apart, which is why they could not both stay on the page.
     Every value below is derived from and measured against this one. */
  --mw-gold:          #D59F0F;   /* ink on gold 6.83:1 · gold on ink 6.83:1  */
  --mw-gold-deep:     #89660A;   /* text-safe gold: 4.99 paper / 4.59 cream  */
  --mw-gold-tint:     #FAF8F0;
  --mw-gold-hover:    #BB8C0D;
  /* Small uppercase gold text over a photograph cannot reach 4.5:1 at full
     gold without a scrim so dark the image is lost. This pale gold keeps the
     warmth and clears AA. Currently unused — the hero eyebrow it was built
     for is gone — but kept for the next time type sits on an image. */
  --mw-gold-onmedia:  #F0DBAB;

  /* ---- Neutrals (warm, never cool grey) ------------------------------- */
  --mw-ink:           #231F20;   /* exact logo black — 15.4:1 on paper       */
  --mw-ink-soft:      #5B5450;   /* body copy — 7.0:1 on paper               */
  --mw-ink-faint:     #8A817B;   /* meta, captions — 3.5:1, large/UI only    */
  --mw-line:          #E4DDD2;
  --mw-line-strong:   #CFC5B6;
  --mw-paper:         #FBF8F3;   /* page background                          */
  --mw-cream:         #F4EEE4;   /* alternating section wash                 */
  --mw-white:         #FFFFFF;

  /* ---- The five wellness ways + Connect -------------------------------
     Each pillar carries three values:
       core  — fills, dots, rules, large blocks
       deep  — text on light backgrounds, and fills under white text (AA)
       tint  — section washes and card backgrounds
     Connect uses Monarch Gold: it integrates the five rather than
     competing as a sixth colour.
     ------------------------------------------------------------------- */

  --p-nourish:        #6E8F57;
  --p-nourish-deep:   #566B45;
  --p-nourish-tint:   #F1F4EE;

  --p-move:           #D18A5B;
  --p-move-deep:      #996848;
  --p-move-tint:      #FAF3EF;

  --p-renew:          #73AACA;
  --p-renew-deep:     #387193;
  --p-renew-tint:     #F2F5F7;

  --p-rest:           #8D84A8;
  --p-rest-deep:      #6B647C;
  --p-rest-tint:      #F4F3F6;

  --p-protect:        #8A4E59;
  --p-protect-deep:   #693F47;
  --p-protect-tint:   #F3EDEE;

  --p-connect:        var(--mw-gold);
  --p-connect-deep:   var(--mw-gold-deep);
  --p-connect-tint:   var(--mw-gold-tint);

  /* ---- Type families ---------------------------------------------------
     Change a typeface here and it changes everywhere; every font-family in
     this file points at one of these two. Both families are now self-hosted,
     so a swap means adding @font-face files in section 0 — there is no
     third-party <link> left to update.

     FIGURES: Cormorant and EB Garamond both defaulted to old-style figures,
     which rendered "12" closer to "I2", and the four
     `font-variant-numeric: lining-nums` rules further down exist to fix that.
     Sabon LT Pro already uses lining figures, so those rules are currently
     inert — measured, not assumed. They are kept as a guard: swap in another
     old-style serif and they start doing work again. Do not remove them.
     ------------------------------------------------------------------- */
  --mw-serif: "Sabon", "Iowan Old Style", Georgia, serif;
  --mw-sans:  "Metropolis", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* ---- Fluid type scale ------------------------------------------------
     clamp() lets one token serve 320px → desktop with no breakpoint jumps.
     Minimums are tuned so nothing drops below comfortable phone reading.
     ------------------------------------------------------------------- */
  --t-display:  clamp(2.5rem,  1.55rem + 4.75vw, 5rem);      /* 40 → 80 */
  --t-h1:       clamp(2rem,    1.40rem + 3.00vw, 3.5rem);    /* 32 → 56 */
  --t-h2:       clamp(1.625rem,1.24rem + 1.92vw, 2.75rem);   /* 26 → 44 */
  --t-h3:       clamp(1.25rem, 1.10rem + 0.75vw, 1.75rem);   /* 20 → 28 */
  --t-lede:     clamp(1.125rem,1.03rem + 0.47vw, 1.4375rem); /* 18 → 23 */
  --t-body:     1.0625rem;                                    /* 17      */
  --t-small:    0.9375rem;                                    /* 15      */
  --t-label:    0.75rem;                                      /* 12      */

  --lh-tight:   1.08;
  --lh-snug:    1.22;
  --lh-body:    1.65;

  /* ---- Spacing (4px base) ---------------------------------------------- */
  --sp-1:  0.25rem;
  --sp-2:  0.5rem;
  --sp-3:  0.75rem;
  --sp-4:  1rem;
  --sp-5:  1.5rem;
  --sp-6:  2rem;
  --sp-7:  2.5rem;
  --sp-8:  3rem;
  --sp-9:  4rem;
  --sp-10: 5rem;
  --sp-11: 7rem;

  /* Section rhythm and gutters grow with the viewport. */
  --mw-gutter:  clamp(1.25rem, 0.85rem + 2vw, 2.5rem);
  --mw-section: clamp(3.5rem,  2.20rem + 6.5vw, 7rem);
  --mw-measure: 34rem;   /* readable line length */
  --mw-max:     72rem;   /* page container       */

  /* ---- Radius / elevation / motion ------------------------------------- */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  --sh-sm: 0 1px 2px rgba(35,31,32,.05), 0 2px 6px -2px rgba(35,31,32,.06);
  --sh-md: 0 2px 4px rgba(35,31,32,.04), 0 10px 24px -12px rgba(35,31,32,.16);
  --sh-lg: 0 4px 8px rgba(35,31,32,.04), 0 24px 48px -20px rgba(35,31,32,.22);

  --ease: cubic-bezier(.22,.61,.36,1);
  --dur:  .22s;

  /* Minimum comfortable tap target — never go below this. */
  --tap: 44px;
}

/* --------------------------------------------------------------------------
   3. BASE
   -------------------------------------------------------------------------- */

body {
  margin: 0;
  background: var(--mw-paper);
  color: var(--mw-ink);
  font-family: var(--mw-sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Guarantee no sideways scroll on any phone. */
  overflow-x: hidden;
}

:where(a, button, input, textarea, select, [tabindex]):focus-visible {
  outline: 2px solid var(--mw-gold-deep);
  outline-offset: 3px;
  border-radius: var(--r-sm);
}

::selection { background: var(--mw-gold); color: var(--mw-ink); }

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

.mw-skip-link {
  position: absolute;
  left: var(--sp-4);
  top: -100%;
  z-index: 999;
  padding: var(--sp-3) var(--sp-5);
  background: var(--mw-ink);
  color: var(--mw-paper);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  text-decoration: none;
  transition: top var(--dur) var(--ease);
}
.mw-skip-link:focus { top: var(--sp-4); }

/* --------------------------------------------------------------------------
   4. LAYOUT
   -------------------------------------------------------------------------- */

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

.mw-wrap--narrow { max-width: 48rem; }

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

.mw-section--cream { background: var(--mw-cream); }
.mw-section--ink   { background: var(--mw-ink); color: var(--mw-paper); }
.mw-section--ink .mw-eyebrow { color: var(--mw-gold); }
.mw-section--ink .mw-lede,
.mw-section--ink p { color: rgba(251,248,243,.82); }

/* Vertical stack — the workhorse. Children flow, gap does the spacing. */
.mw-stack { display: flex; flex-direction: column; }
.mw-stack--2 { gap: var(--sp-2); }
.mw-stack--3 { gap: var(--sp-3); }
.mw-stack--4 { gap: var(--sp-4); }
.mw-stack--5 { gap: var(--sp-5); }
.mw-stack--6 { gap: var(--sp-6); }
.mw-stack--8 { gap: var(--sp-8); }

/* Auto-fitting grid. Single column on a phone by definition — the minimum
   track is wider than the smallest viewport, so it can never produce
   cramped columns on mobile. */
.mw-grid {
  display: grid;
  gap: var(--sp-5);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
}

.mw-center { text-align: center; }
.mw-measure { max-width: var(--mw-measure); }
.mw-center .mw-measure,
.mw-measure.mw-center { margin-inline: auto; }

/* --------------------------------------------------------------------------
   5. TYPOGRAPHY
   -------------------------------------------------------------------------- */

/* Editorial serif — reserved for emotional statements, never for UI. */
.mw-display,
.mw-h1, .mw-h2 {
  font-family: var(--mw-serif);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--mw-ink);
  text-wrap: balance;
}

.mw-display { font-size: var(--t-display); line-height: var(--lh-tight); }
.mw-h1      { font-size: var(--t-h1);      line-height: var(--lh-tight); }
.mw-h2      { font-size: var(--t-h2);      line-height: var(--lh-snug);  }

/* Sub-heads switch to the sans — this is UI, not an emotional statement. */
.mw-h3 {
  font-family: var(--mw-sans);
  font-size: var(--t-h3);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}

/* Small-caps label. The logo's "LIVE WELL, LONGER." lockup, systematised. */
.mw-eyebrow {
  font-family: var(--mw-sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-gold-deep);
  line-height: 1.4;
}

.mw-lede {
  font-size: var(--t-lede);
  line-height: 1.5;
  color: var(--mw-ink-soft);
  font-weight: 300;
  text-wrap: pretty;
}

.mw-body  { font-size: var(--t-body);  color: var(--mw-ink-soft); text-wrap: pretty; }
.mw-small { font-size: var(--t-small); color: var(--mw-ink-soft); }
.mw-meta  { font-size: var(--t-small); color: var(--mw-ink-faint); }

/* Reflective serif line — the quiet voice of the brand. */
.mw-quiet {
  font-family: var(--mw-serif);
  font-size: var(--t-lede);
  font-style: italic;
  font-weight: 400;
  line-height: 1.45;
  color: var(--mw-ink-soft);
}

.mw-trademark {
  /* 0.44em resolved to 5.28px on the 12px eyebrow, which renders as a smudge
     on a phone. The floor keeps the mark readable wherever it is set. */
  font-size: max(8px, 0.6em);
  vertical-align: super;
  letter-spacing: 0;
  font-family: var(--mw-sans);
  font-weight: 400;
}

/* Hairline rule with optional centred mark, echoing the logo's flanking rules. */
.mw-rule {
  border: 0;
  height: 1px;
  background: var(--mw-line);
  margin-block: var(--sp-6);
}

/* --------------------------------------------------------------------------
   6. BUTTONS
   Every variant is >= 44px tall. Primary is gold with INK text: white on
   gold is only 2.06:1 and fails badly — ink on gold is 7.9:1 and matches
   the logo lockup.
   -------------------------------------------------------------------------- */

.mw-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-6);
  border-radius: var(--r-pill);
  font-family: var(--mw-sans);
  font-size: var(--t-body);
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  transition: background var(--dur) var(--ease),
              color      var(--dur) var(--ease),
              border     var(--dur) var(--ease),
              transform  var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.mw-btn:active { transform: translateY(1px); }

.mw-btn--primary {
  background: var(--mw-gold);
  color: var(--mw-ink);
  box-shadow: var(--sh-sm);
}
.mw-btn--primary:hover { background: var(--mw-gold-hover); box-shadow: var(--sh-md); }

.mw-btn--secondary {
  background: transparent;
  color: var(--mw-ink);
  box-shadow: inset 0 0 0 1px var(--mw-line-strong);
}
.mw-btn--secondary:hover {
  background: var(--mw-white);
  box-shadow: inset 0 0 0 1px var(--mw-ink);
}

.mw-btn--ink { background: var(--mw-ink); color: var(--mw-paper); }
.mw-btn--ink:hover { background: #3A3335; }

/* Inline text link with an arrow. Underline is the affordance, not colour. */
.mw-link {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  font-weight: 500;
  color: var(--mw-gold-deep);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  align-self: flex-start;
  transition: gap var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mw-link:hover { gap: var(--sp-3); color: var(--mw-ink); }
.mw-link .mw-arrow { transition: transform var(--dur) var(--ease); }
.mw-link:hover .mw-arrow { transform: translateX(2px); }

/* --------------------------------------------------------------------------
   7. CARDS
   -------------------------------------------------------------------------- */

.mw-card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-5);
  background: var(--mw-white);
  border: 1px solid var(--mw-line);
  border-radius: var(--r-lg);
  transition: transform var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease),
              border-color var(--dur) var(--ease);
}

.mw-card--raised { box-shadow: var(--sh-sm); border-color: transparent; }

/* Only make a card interactive when the whole card is a link. */
.mw-card--link:hover {
  transform: translateY(-2px);
  box-shadow: var(--sh-md);
  border-color: var(--mw-line-strong);
}

/* Card carrying a pillar identity: tinted ground + a colour edge. */
.mw-card--pillar {
  background: var(--pillar-tint, var(--mw-white));
  border-color: transparent;
  border-left: 3px solid var(--pillar, var(--mw-gold));
}

/* A card whose heading is a brand statement rather than a label — "Within." and
   "Between." are the two halves lifted out of the section headline above them,
   so they take the serif that headline is set in. Sans made them read as tabs.
   Scoped to a modifier: every other .mw-h3 on the site is a label and stays sans.
   Extra padding because serif at this size needs more room off the gold rule. */
.mw-card--statement { padding: var(--sp-6); }
.mw-card--statement .mw-h3 {
  font-family: var(--mw-serif);
  font-weight: 500;
  letter-spacing: 0;
}

/* Full-bleed media at the top of a card. */
.mw-card__media {
  margin: calc(var(--sp-5) * -1) calc(var(--sp-5) * -1) 0;
  border-radius: var(--r-lg) var(--r-lg) 0 0;
  overflow: hidden;
  aspect-ratio: 16 / 10;
}
.mw-card__media img { width: 100%; height: 100%; object-fit: cover; }

/* --------------------------------------------------------------------------
   8. PILLAR SYSTEM
   Set data-pillar on any element and its subtree inherits the right colours
   through --pillar / --pillar-deep / --pillar-tint. One hook, no per-pillar
   component variants to keep in sync.
   -------------------------------------------------------------------------- */

[data-pillar="nourish"] { --pillar: var(--p-nourish); --pillar-deep: var(--p-nourish-deep); --pillar-tint: var(--p-nourish-tint); }
[data-pillar="move"]    { --pillar: var(--p-move);    --pillar-deep: var(--p-move-deep);    --pillar-tint: var(--p-move-tint);    }
[data-pillar="renew"]   { --pillar: var(--p-renew);   --pillar-deep: var(--p-renew-deep);   --pillar-tint: var(--p-renew-tint);   }
[data-pillar="rest"]    { --pillar: var(--p-rest);    --pillar-deep: var(--p-rest-deep);    --pillar-tint: var(--p-rest-tint);    }
[data-pillar="protect"] { --pillar: var(--p-protect); --pillar-deep: var(--p-protect-deep); --pillar-tint: var(--p-protect-tint); }
[data-pillar="connect"] { --pillar: var(--p-connect); --pillar-deep: var(--p-connect-deep); --pillar-tint: var(--p-connect-tint); }

/* The disc icon, drawn from assets/pillars/*.png */
.mw-pillar-icon {
  width: var(--icon-size, 56px);
  height: var(--icon-size, 56px);
  flex: 0 0 auto;
  border-radius: 50%;
}
.mw-pillar-icon--sm { --icon-size: 40px; }
.mw-pillar-icon--lg { --icon-size: 80px; }
.mw-pillar-icon--xl { --icon-size: clamp(96px, 26vw, 132px); }

/* Pillar name label, used on cards and in the journey. */
.mw-pillar-name {
  font-family: var(--mw-sans);
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pillar-deep, var(--mw-gold-deep));
}

/* Filter / category chip. Unselected chips stay neutral so the selected
   state reads instantly; selected fills with the pillar colour. */
.mw-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: var(--mw-white);
  box-shadow: inset 0 0 0 1px var(--mw-line-strong);
  font-size: var(--t-small);
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mw-ink-soft);
  white-space: nowrap;
  transition: background var(--dur) var(--ease),
              color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}
.mw-chip__dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--pillar, var(--mw-gold));
}
.mw-chip:hover { box-shadow: inset 0 0 0 1px var(--pillar, var(--mw-ink)); color: var(--mw-ink); }

.mw-chip[aria-pressed="true"],
.mw-chip.is-active {
  background: var(--pillar-deep, var(--mw-ink));
  color: var(--mw-white);
  box-shadow: none;
}
.mw-chip[aria-pressed="true"] .mw-chip__dot,
.mw-chip.is-active .mw-chip__dot { background: var(--mw-white); }

/* Horizontal chip rail — scrolls on a phone rather than wrapping into
   a tall block that pushes content off screen. */
.mw-chip-rail {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  /* Bleed to the screen edges so the rail reads as scrollable. */
  margin-inline: calc(var(--mw-gutter) * -1);
  padding-inline: var(--mw-gutter);
  padding-block: var(--sp-1);
  scroll-padding-inline: var(--mw-gutter);   /* see .mw-rail */
}
.mw-chip-rail::-webkit-scrollbar { display: none; }
.mw-chip-rail > * { scroll-snap-align: start; }

@media (min-width: 48rem) {
  .mw-chip-rail { flex-wrap: wrap; overflow-x: visible; margin-inline: 0; padding-inline: 0; }
}

/* --------------------------------------------------------------------------
   9. NAVIGATION (appearance only — behaviour lands in Phase 2)
   -------------------------------------------------------------------------- */

.mw-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(251,248,243,.88);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.mw-header.is-stuck { border-bottom-color: var(--mw-line); }

.mw-header__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
}

.mw-brand {
  display: flex;
  align-items: center;
  gap: var(--sp-3);
  text-decoration: none;
  min-height: var(--tap);
}
.mw-brand__mark { width: 34px; height: 34px; flex: 0 0 auto; }
.mw-brand__name {
  font-family: var(--mw-serif);
  font-size: 1.375rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--mw-gold-deep);
  line-height: 1;
}
.mw-brand__name span { font-weight: 400; letter-spacing: 0.2em; }

/* Desktop nav is hidden on a phone; the toggle takes over. */
.mw-nav { display: none; }

.mw-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  font-size: var(--t-small);
  font-weight: 400;
  letter-spacing: 0.04em;
  color: var(--mw-ink-soft);
  text-decoration: none;
  transition: color var(--dur) var(--ease);
}
.mw-nav__link:hover { color: var(--mw-ink); }
.mw-nav__link[aria-current="page"] { color: var(--mw-ink); font-weight: 500; }

.mw-nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* Without this the header's flex row shrinks the button to 42px at 320px
     wide, putting the only navigation control under the 44px tap minimum. */
  flex: none;
  width: var(--tap);
  height: var(--tap);
  margin-right: calc(var(--sp-2) * -1);
  border-radius: var(--r-pill);
  color: var(--mw-ink);
}
.mw-nav-toggle:hover { background: var(--mw-cream); }

@media (min-width: 60rem) {
  .mw-nav { display: flex; align-items: center; gap: var(--sp-2); }
  .mw-nav-toggle { display: none; }
  .mw-header__bar { min-height: 76px; }
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */

.mw-footer {
  background: var(--mw-ink);
  color: rgba(251,248,243,.72);
  padding-block: var(--sp-9) var(--sp-7);
  font-size: var(--t-small);
}
.mw-footer a { color: rgba(251,248,243,.72); text-decoration: none; }
.mw-footer a:hover { color: var(--mw-gold); }
.mw-footer .mw-brand__name { color: var(--mw-gold); }

/* --------------------------------------------------------------------------
   11. MOTION
   Minimal by policy — a single soft rise on scroll-in, nothing more.
   -------------------------------------------------------------------------- */

.mw-reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
}
.mw-reveal.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .mw-reveal { opacity: 1; transform: none; }
}

/* ==========================================================================
   PHASE 2 — MOBILE NAVIGATION & RESPONSIVE FRAMEWORK
   ========================================================================== */

/* --------------------------------------------------------------------------
   12. BREAKPOINTS
   The system uses four, and only ever as min-width. Named here so every
   component reaches for the same numbers.

     base    320px+   phone. All unqualified rules.
     sm      30rem    480px — large phone / small tablet portrait
     md      48rem    768px — tablet. Grids may go multi-column.
     lg      60rem    960px — desktop nav replaces the drawer.
     xl      75rem    1200px — max container is reached.

   Anything that must change at a breakpoint changes UP. There is no rule
   authored for desktop and later undone for mobile.
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   13. HORIZONTAL RAIL
   The generic swipe primitive behind chip filters, date strips and image
   galleries. Bleeds to the screen edges so a cut-off item signals that there
   is more to swipe.
   -------------------------------------------------------------------------- */

.mw-rail {
  display: flex;
  gap: var(--sp-3);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x mandatory;
  margin-inline: calc(var(--mw-gutter) * -1);
  padding-inline: var(--mw-gutter);
  padding-block: var(--sp-1);
  /* Snapping aligns a card's edge with the SCROLLPORT edge, which ignores the
     gutter padding above. Without a matching scroll-padding every rail loads
     one gutter-width scrolled, so the first card sits proud of the page
     margin while every other element lines up. */
  scroll-padding-inline: var(--mw-gutter);
}
.mw-rail::-webkit-scrollbar { display: none; }
.mw-rail > * { scroll-snap-align: start; flex: 0 0 auto; }

/* One card at a time on a phone — never six cramped columns. */
.mw-rail--cards > * { width: min(78vw, 20rem); }

/* Rails stop being rails once there is room to lay everything out. */
@media (min-width: 48rem) {
  .mw-rail--release {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr));
    overflow: visible;
    margin-inline: 0;
    padding-inline: 0;
  }
  .mw-rail--release > * { width: auto; }
}

/* --------------------------------------------------------------------------
   14. MOBILE NAVIGATION
   A full-screen panel. Links sit low so they fall under the thumb, and the
   primary action is the last thing above the safe area.
   -------------------------------------------------------------------------- */

.mw-navpanel {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  flex-direction: column;
  background: var(--mw-paper);
  visibility: hidden;
  transform: translateX(100%);
  transition: transform .32s var(--ease), visibility 0s linear .32s;
}

.mw-navpanel.is-open {
  visibility: visible;
  transform: none;
  transition: transform .32s var(--ease);
}

@media (prefers-reduced-motion: reduce) {
  .mw-navpanel { transition: none; }
  .mw-navpanel.is-open { transition: none; }
}

/* Mirrors the site header so the panel opens without anything jumping. */
.mw-navpanel__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 64px;
  padding-inline: var(--mw-gutter);
  flex: 0 0 auto;
}

.mw-navpanel__body {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;   /* push links toward the thumb */
  gap: var(--sp-6);
  padding: var(--sp-6) var(--mw-gutter);
  padding-bottom: max(var(--sp-6), env(safe-area-inset-bottom, 0px));
  overflow-y: auto;
}

/* The vision, holding the upper half so the panel reads as a brand moment
   rather than an empty screen. margin-bottom:auto keeps the links and the
   action in the thumb zone below. */
.mw-navpanel__vision {
  margin-bottom: auto;
  padding-top: var(--sp-2);
  max-width: 12ch;
  font-family: var(--mw-serif);
  font-size: clamp(2rem, 1.4rem + 3vw, 2.75rem);
  font-weight: 500;
  line-height: var(--lh-tight);
  letter-spacing: -0.01em;
  color: var(--mw-ink);
}

.mw-navpanel__links {
  display: flex;
  flex-direction: column;
}

.mw-navpanel__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 60px;
  padding-block: var(--sp-2);
  border-bottom: 1px solid var(--mw-line);
  font-size: 1.375rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  color: var(--mw-ink);
  text-decoration: none;
  transition: color var(--dur) var(--ease), padding-left var(--dur) var(--ease);
}
.mw-navpanel__link:first-child { border-top: 1px solid var(--mw-line); }
.mw-navpanel__link:hover { padding-left: var(--sp-2); }

.mw-navpanel__link[aria-current="page"] { color: var(--mw-gold-deep); font-weight: 500; }
.mw-navpanel__link[aria-current="page"]::after {
  content: "";
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--mw-gold);
  flex: 0 0 auto;
}

.mw-navpanel__foot {
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.mw-navpanel__foot .mw-btn { width: 100%; }

/* Staggered entrance. Purely additive — links are visible without it. */
.mw-navpanel.is-open .mw-navpanel__link,
.mw-navpanel.is-open .mw-navpanel__foot {
  animation: mw-nav-in .34s var(--ease) backwards;
}
.mw-navpanel.is-open .mw-navpanel__link:nth-child(1) { animation-delay: .04s; }
.mw-navpanel.is-open .mw-navpanel__link:nth-child(2) { animation-delay: .08s; }
.mw-navpanel.is-open .mw-navpanel__link:nth-child(3) { animation-delay: .12s; }
.mw-navpanel.is-open .mw-navpanel__link:nth-child(4) { animation-delay: .16s; }
.mw-navpanel.is-open .mw-navpanel__link:nth-child(5) { animation-delay: .20s; }
.mw-navpanel.is-open .mw-navpanel__foot { animation-delay: .24s; }

@keyframes mw-nav-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mw-navpanel.is-open .mw-navpanel__link,
  .mw-navpanel.is-open .mw-navpanel__foot { animation: none; }
}

/* The drawer does not exist at desktop width. */
@media (min-width: 60rem) {
  .mw-navpanel { display: none; }
}

/* Locks the page behind the open panel without losing scroll position. */
body.mw-scroll-locked {
  position: fixed;
  inset-inline: 0;
  overflow: hidden;
  width: 100%;
}

/* --------------------------------------------------------------------------
   15. RESPONSIVE UTILITIES
   -------------------------------------------------------------------------- */

.mw-only-mobile  { display: revert; }
.mw-only-desktop { display: none; }

@media (min-width: 60rem) {
  .mw-only-mobile  { display: none; }
  .mw-only-desktop { display: revert; }
}

/* Opt out of the container to run edge to edge. */
.mw-bleed {
  margin-inline: calc(var(--mw-gutter) * -1);
  width: calc(100% + (var(--mw-gutter) * 2));
}
@media (min-width: 75rem) {
  .mw-bleed { margin-inline: 0; width: 100%; }
}

/* ==========================================================================
   PHASE 3 — COMPONENTS
   ========================================================================== */

/* --------------------------------------------------------------------------
   16. HERO
   -------------------------------------------------------------------------- */

.mw-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  min-height: min(78svh, 640px);
  padding-block: var(--sp-10) var(--sp-8);
  overflow: hidden;
}

.mw-hero__media {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.mw-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* Keeps type legible over the photograph without washing the image out.
   NOT a guess and NOT portable: these stops are measured against the photo
   currently installed. Re-run qa/hero-contrast.py after ANY hero swap.

   The first main-area photo was bright — a white marble counter sat directly
   behind the hero text and needed .76 through the text band to clear 4.5:1.
   The 11 August replacement is a darker room, so these were lightened.

   11 August, second pass: lightened 10% (every stop x0.90). That was only
   possible by giving up the gold eyebrow, which was the binding constraint —
   it was the palest type on the page and sat high where the scrim is thinnest.

   12 August, third pass: the eyebrow was REMOVED from the hero entirely, so
   that constraint is gone and the white heading is now the floor. Re-swept
   against the shelves photo, worst case across 320/390/768/1280:

       x0.90  (10% lighter)  5.79   +1.29 margin
       x0.85  (15% lighter)  5.06   +0.56 margin  <- INSTALLED
       x0.80  (20% lighter)  4.56   +0.06 margin  passes, but see below
       x0.75  (25% lighter)  4.02   FAIL
       x0.70  (30% lighter)  3.65   FAIL

   x0.80 was rejected despite passing. 0.06 over a hard accessibility limit is
   not margin — a photo swap, a JPEG re-encode, or a font change would spend it
   without anyone noticing. Same reasoning that picked .72 over .70 back in
   August's first pass.

   THE STOPS BELOW ARE x0.85 OF THE ORIGINAL. Re-run qa/hero-contrast.py after
   ANY hero swap, font change, or scrim edit. Note the script skips selectors
   that are not present, so it now measures the title and lede only. */
.mw-hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(35,31,32,.75) 0%,
    rgba(35,31,32,.70) 40%,
    rgba(35,31,32,.61) 72%,
    rgba(35,31,32,.43) 88%,
    rgba(35,31,32,.27) 100%);
}

/* The photograph's subject is the room, centre-right; the bright counter is
   bottom-left. Favour the room so the crop keeps the interesting half. */
.mw-hero__media img { object-position: var(--hero-pos, 62% 42%); }
@media (min-width: 48rem) {
  .mw-hero__media img { object-position: var(--hero-pos-lg, 50% 46%); }
}

.mw-hero__inner { position: relative; z-index: 1; }

/* On a photograph the hero inverts to light type. */
.mw-hero--onmedia .mw-hero__title,
.mw-hero--onmedia .mw-hero__lede { color: var(--mw-paper); }
/* Paper, not gold. --mw-gold-onmedia is the palest type on the page, and on a
   photograph it is what caps how far the scrim can be lightened. Trading this
   one small-caps line for paper bought the 10% lightening above at 5.11:1.
   Gold still carries the hero — the mark above it and the primary button. */
.mw-hero--onmedia .mw-hero__eyebrow { color: var(--mw-paper); }
.mw-hero--onmedia .mw-quiet { color: rgba(251,248,243,.88); }
.mw-hero--onmedia .mw-btn--primary { box-shadow: 0 10px 30px -12px rgba(0,0,0,.6); }
.mw-hero--onmedia .mw-btn--secondary {
  color: var(--mw-paper);
  box-shadow: inset 0 0 0 1px rgba(251,248,243,.55);
}
.mw-hero--onmedia .mw-btn--secondary:hover {
  background: rgba(251,248,243,.12);
  box-shadow: inset 0 0 0 1px var(--mw-paper);
}

.mw-hero__eyebrow { color: var(--mw-gold-deep); }

.mw-hero__title {
  font-family: var(--mw-serif);
  font-weight: 500;
  font-size: var(--t-display);
  line-height: var(--lh-tight);
  letter-spacing: -0.015em;
  color: var(--mw-ink);
  text-wrap: balance;
}

.mw-hero__lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.45;
  color: var(--mw-ink-soft);
  max-width: 30rem;
  text-wrap: pretty;
}

/* Actions stack full width on a phone; the primary always sits first. */
.mw-hero__actions { display: flex; flex-direction: column; gap: var(--sp-3); }
.mw-hero__actions .mw-btn { width: 100%; }

@media (min-width: 30rem) {
  .mw-hero__actions { flex-direction: row; flex-wrap: wrap; }
  .mw-hero__actions .mw-btn { width: auto; }
}

/* --------------------------------------------------------------------------
   17. SECTION HEADING
   -------------------------------------------------------------------------- */

.mw-sectionhead { display: flex; flex-direction: column; gap: var(--sp-3); }
.mw-sectionhead--center { text-align: center; align-items: center; }
.mw-sectionhead--center .mw-lede,
.mw-sectionhead--center .mw-body { margin-inline: auto; }
.mw-sectionhead__title { margin: 0; }

/* --------------------------------------------------------------------------
   18. JOURNEY CARD
   One of the six Wellward expressions.
   -------------------------------------------------------------------------- */

.mw-journey {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
  padding: var(--sp-6) var(--sp-5) var(--sp-5);
  background: var(--pillar-tint, var(--mw-white));
  border-radius: var(--r-lg);
  /* NO overflow: hidden. It was here only to clip the colour bar below to the
     rounded corners, but on a card that holds text it silently truncates a
     stray line instead of letting the card grow. The bar rounds itself now. */
  height: 100%;
}

/* A colour edge along the top, so a stack of these reads as a sequence. */
.mw-journey::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--pillar, var(--mw-gold));
  border-radius: var(--r-lg) var(--r-lg) 0 0;
}

.mw-journey__step {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  color: var(--pillar-deep, var(--mw-gold-deep));
  opacity: .7;
}

.mw-journey__title {
  font-family: var(--mw-sans);
  font-size: 1.25rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1.25;
  color: var(--mw-ink);
}

.mw-journey__body { font-size: var(--t-body); color: var(--mw-ink-soft); }

/* Connect is NOT a sixth area. There are five, and Connect is what holds them
   together — so it sits below the row rather than inside it, full width, and it
   carries no step number. Numbering it 06 made it the last item in a list,
   which is exactly what it is not. This is the diagram's logic in card form:
   five around the outside, Connect underneath holding them. */
.mw-journey--connect {
  width: 100%;
  margin-top: var(--sp-4);
}
/* Once there is room, the lockup goes on one line and CENTRES. Left-aligned in
   a full-width band it stranded three words against a screen of empty space —
   correct geometry, but it read as a mistake. Centred, the band looks like a
   deliberate footing under the five. */
@media (min-width: 40rem) {
  .mw-journey--connect {
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: var(--sp-4);
    padding: var(--sp-5);
  }
  .mw-journey--connect .mw-pillar-icon { flex: none; margin-bottom: 0; }
  .mw-journey--connect .mw-journey__title { flex: none; }
  .mw-journey--connect .mw-journey__body { max-width: 32rem; }
}
.mw-journey .mw-pillar-icon { margin-bottom: var(--sp-1); }

/* --------------------------------------------------------------------------
   19. CONNECTED WELLNESS GRAPHIC
   Five ways in a ring, each linked to the two beside it, with Connect at the
   centre joined to all five.

   It used to join every way to every other. Those five cross-chords drew a
   pentagram, and the graphic read as a star before it read as a system —
   removed 13 August at the client's request. The ring plus the gold spokes
   still carry the argument: the five connect, and Connect holds them together.
   -------------------------------------------------------------------------- */

.mw-connected {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
}

.mw-connected__figure {
  width: 100%;
  max-width: 34rem;
  margin: 0;
}
.mw-connected__figure svg { width: 100%; height: auto; display: block; }

/* The ring joining each way to its two neighbours. */
.mw-connected .web line {
  stroke: var(--mw-line-strong);
  stroke-width: 1;
  opacity: .55;
}

/* Spokes into Connect read stronger than the mesh. */
.mw-connected .spoke line {
  stroke: var(--mw-gold);
  stroke-width: 1.5;
  opacity: .5;
}

.mw-connected .node-label {
  font-family: var(--mw-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  fill: var(--mw-ink-soft);
}

.mw-connected .center-label {
  font-family: var(--mw-sans);
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  fill: var(--mw-gold-deep);
}

/* A closing thought for a whole section — centred, measured, and set apart.
   Distinct from .mw-connected__caption, which labels the diagram rather than
   closing the argument around it. */
.mw-closing-line {
  max-width: 34rem;
  margin-inline: auto;
  text-align: center;
}

.mw-connected__caption {
  font-family: var(--mw-serif);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--mw-ink-soft);
  text-align: center;
}

/* Draw the connections in once, on reveal. */
@media (prefers-reduced-motion: no-preference) {
  .mw-connected .web line,
  .mw-connected .spoke line {
    stroke-dasharray: var(--len, 400);
    stroke-dashoffset: var(--len, 400);
  }
  .mw-connected.is-visible .web line,
  .mw-connected.is-visible .spoke line {
    animation: mw-draw .9s var(--ease) forwards;
  }
  @keyframes mw-draw { to { stroke-dashoffset: 0; } }
}

/* --------------------------------------------------------------------------
   20. EVENTS
   -------------------------------------------------------------------------- */

.mw-eventlist { display: flex; flex-direction: column; gap: var(--sp-6); }

.mw-eventday { display: flex; flex-direction: column; gap: var(--sp-3); }

.mw-eventday__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  border-bottom: 1px solid var(--mw-line);
}
.mw-eventday__weekday {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-ink-faint);
}
.mw-eventday__date {
  font-family: var(--mw-serif);
  font-size: 1.375rem;
  font-weight: 500;
  color: var(--mw-ink);
  font-variant-numeric: lining-nums;
}
.mw-eventday__today {
  margin-left: auto;
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-gold-deep);
}

.mw-event {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--sp-2) var(--sp-4);
  align-items: start;
  padding: var(--sp-4);
  background: var(--mw-white);
  border: 1px solid var(--mw-line);
  border-left: 3px solid var(--pillar, var(--mw-gold));
  border-radius: var(--r-md);
  text-decoration: none;
  transition: box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.mw-event:hover { box-shadow: var(--sh-md); transform: translateY(-1px); }

/* The icon holds column one for the whole card; every line of text stays in
   column two, so a summary lines up under the title instead of dropping
   beneath the icon. */
.mw-event__icon {
  grid-column: 1;
  grid-row: 1 / -1;
  width: 40px; height: 40px;
  border-radius: 50%;
}
.mw-event > :not(.mw-event__icon) { grid-column: 2; }

.mw-event__time {
  font-size: var(--t-small);
  font-weight: 500;
  color: var(--mw-ink-soft);
  font-variant-numeric: tabular-nums;
}
.mw-event__pillar {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--pillar-deep, var(--mw-gold-deep));
}
.mw-event__title {
  font-family: var(--mw-sans);
  font-size: 1.0625rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--mw-ink);
}
.mw-event__meta { font-size: var(--t-small); color: var(--mw-ink-faint); }

/* Placeholder content can never pass as real. */
.mw-notice {
  display: flex;
  gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  background: var(--p-protect-tint);
  border-left: 3px solid var(--p-protect);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  font-size: var(--t-small);
  color: var(--p-protect-deep);
}
.mw-notice strong { color: var(--p-protect-deep); }

.mw-empty {
  padding: var(--sp-8) var(--sp-5);
  text-align: center;
  color: var(--mw-ink-faint);
  border: 1px dashed var(--mw-line-strong);
  border-radius: var(--r-lg);
}

/* --------------------------------------------------------------------------
   21. GALLERY
   -------------------------------------------------------------------------- */

.mw-gallery { display: flex; flex-direction: column; gap: var(--sp-3); }
.mw-gallery__track > figure { width: min(82vw, 26rem); margin: 0; }
.mw-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}
.mw-gallery figcaption {
  margin-top: var(--sp-2);
  font-size: var(--t-small);
  color: var(--mw-ink-faint);
}

/* Stand-in for photography that has not been supplied yet. */
/* A real photograph occupies a media slot on exactly the terms the dashed
   placeholder did, so a half-photographed page still reads as one grid. */
.mw-pillar-detail__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--r-lg);
}

.mw-imgslot {
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--sp-4);
  background: var(--mw-cream);
  border: 1px dashed var(--mw-line-strong);
  border-radius: var(--r-lg);
  font-size: var(--t-small);
  color: var(--mw-ink-faint);
  text-align: center;
}

/* --------------------------------------------------------------------------
   22. CTA BAND
   -------------------------------------------------------------------------- */

.mw-cta {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-5);
  text-align: center;
}
.mw-cta__title {
  font-family: var(--mw-serif);
  font-weight: 500;
  font-size: var(--t-h1);
  line-height: var(--lh-tight);
  text-wrap: balance;
}
.mw-cta__actions { display: flex; flex-direction: column; gap: var(--sp-3); width: 100%; }
.mw-cta__actions .mw-btn { width: 100%; }

@media (min-width: 30rem) {
  .mw-cta__actions { flex-direction: row; justify-content: center; width: auto; }
  .mw-cta__actions .mw-btn { width: auto; min-width: 12rem; }
}

/* The brand lockup that closes a page. */
.mw-signoff { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); }
.mw-signoff__mark { width: 44px; height: 44px; }

/* The supplied lockup, sitting where the rebuilt mark + wordmark used to. Sized
   by width so the aspect ratio comes from the file, never from CSS. */
.mw-signoff__logo {
  display: block;
  width: min(260px, 62vw);
  height: auto;
  margin-inline: auto;
}
.mw-signoff__name {
  font-family: var(--mw-serif);
  font-size: 1.5rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mw-gold);
  line-height: 1;
}
.mw-signoff__name span { font-weight: 400; letter-spacing: 0.22em; }
.mw-signoff__line {
  font-family: var(--mw-serif);
  font-style: italic;
  font-size: var(--t-lede);
  color: var(--mw-ink-soft);
}

/* --------------------------------------------------------------------------
   23. PILLAR DETAIL
   The long-form treatment of one wellness way, for the Pillars page.
   Stacks on a phone; alternates side to side once there is room.
   -------------------------------------------------------------------------- */

.mw-pillar-detail {
  display: grid;
  gap: var(--sp-5);
  padding: var(--sp-6) var(--sp-5);
  background: var(--pillar-tint, var(--mw-white));
  border-radius: var(--r-xl);
}

.mw-pillar-detail__head {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

.mw-pillar-detail__title {
  font-family: var(--mw-serif);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: var(--lh-snug);
  color: var(--mw-ink);
}

.mw-pillar-detail__lede {
  font-size: var(--t-lede);
  font-weight: 300;
  line-height: 1.5;
  color: var(--mw-ink-soft);
}

/* What this way looks like in practice. Marker is the pillar colour. */
.mw-pillar-detail__list { display: flex; flex-direction: column; gap: var(--sp-3); }
.mw-pillar-detail__list li {
  position: relative;
  padding-left: var(--sp-5);
  font-size: var(--t-body);
  color: var(--mw-ink-soft);
}
.mw-pillar-detail__list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: .68em;
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--pillar, var(--mw-gold));
}

@media (min-width: 48rem) {
  .mw-pillar-detail {
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: var(--sp-8);
    padding: var(--sp-8);
  }
  /* Every other one leads with the media instead, so a column of these
     does not read as a single repeated shape. */
  .mw-pillar-detail:nth-child(even) .mw-pillar-detail__media { order: -1; }
}

/* --------------------------------------------------------------------------
   24. COMMUNITY
   -------------------------------------------------------------------------- */

.mw-community { display: grid; gap: var(--sp-3); }

.mw-community__item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  background: var(--mw-white);
  border: 1px solid var(--mw-line);
  border-radius: var(--r-pill);
}

.mw-community__dot {
  width: 10px; height: 10px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: var(--pillar, var(--mw-gold));
}

.mw-community__label {
  font-size: var(--t-body);
  font-weight: 400;
  color: var(--mw-ink);
}

@media (min-width: 48rem) {
  .mw-community { grid-template-columns: repeat(2, 1fr); }
}

/* A quiet statistic or standing fact. Never a fabricated number. */
.mw-fact {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
  padding: var(--sp-5);
  border-left: 2px solid var(--mw-gold);
}
.mw-fact__value {
  font-family: var(--mw-serif);
  font-size: var(--t-h2);
  font-weight: 500;
  line-height: 1;
  color: var(--mw-ink);
}
.mw-fact__label {
  font-size: var(--t-label);
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--mw-ink-faint);
}

/* ==========================================================================
   PHASE 5 — CALENDAR
   Not a shrunken desktop calendar. A date strip you thumb through, then the
   events for the day you landed on.
   ========================================================================== */

.mw-cal { display: flex; flex-direction: column; gap: var(--sp-5); }

.mw-cal__month {
  font-family: var(--mw-serif);
  font-size: var(--t-h3);
  font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--mw-ink);
  font-variant-numeric: lining-nums;
}

.mw-cal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

/* Swipeable date strip. */
.mw-datestrip {
  display: flex;
  gap: var(--sp-2);
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: x proximity;
  margin-inline: calc(var(--mw-gutter) * -1);
  padding: var(--sp-1) var(--mw-gutter);
}
.mw-datestrip::-webkit-scrollbar { display: none; }

.mw-date {
  flex: 0 0 auto;
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  width: 58px;
  min-height: 72px;
  padding: var(--sp-2) var(--sp-1);
  border-radius: var(--r-md);
  background: var(--mw-white);
  box-shadow: inset 0 0 0 1px var(--mw-line);
  color: var(--mw-ink-soft);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease),
              box-shadow var(--dur) var(--ease);
}

.mw-date__weekday {
  font-size: 0.75rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--mw-ink-faint);
}
.mw-date__num {
  font-family: var(--mw-serif);
  font-size: 1.375rem;
  font-weight: 500;
  line-height: 1;
  /* Kept as a guard. Cormorant and EB Garamond defaulted to old-style figures,
     which turned "12" into something
     closer to "I2". Dates need lining figures. */
  font-variant-numeric: lining-nums tabular-nums;
}

/* A day with something on carries a dot; an empty day carries a gap the same
   size, so the row never jumps as you scroll. */
.mw-date__dot {
  width: 5px; height: 5px;
  border-radius: 50%;
  background: var(--mw-gold);
}
.mw-date__dot--empty { background: transparent; }

.mw-date:hover { box-shadow: inset 0 0 0 1px var(--mw-line-strong); color: var(--mw-ink); }

.mw-date.is-today .mw-date__num { color: var(--mw-gold-deep); }

.mw-date.is-selected {
  background: var(--mw-ink);
  color: var(--mw-paper);
  box-shadow: none;
}
.mw-date.is-selected .mw-date__weekday { color: rgba(251,248,243,.72); }
.mw-date.is-selected .mw-date__num { color: var(--mw-paper); }
.mw-date.is-selected .mw-date__dot { background: var(--mw-gold); }

/* The day being shown. */
.mw-cal__daytitle {
  font-family: var(--mw-serif);
  font-size: var(--t-h3);
  font-weight: 500;
  color: var(--mw-ink);
  font-variant-numeric: lining-nums;
}

.mw-cal__count { font-size: var(--t-small); color: var(--mw-ink-faint); }

/* Actions on an event: register, or put it in your own calendar. */
.mw-event__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  margin-top: var(--sp-2);
}
.mw-event__action {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  min-height: var(--tap);
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  font-size: var(--t-small);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.mw-event__action--rsvp {
  background: var(--pillar-deep, var(--mw-ink));
  color: var(--mw-white);
}
.mw-event__action--rsvp:hover { filter: brightness(1.08); }
.mw-event__action--ics {
  color: var(--mw-ink-soft);
  box-shadow: inset 0 0 0 1px var(--mw-line-strong);
}
.mw-event__action--ics:hover { background: var(--mw-white); color: var(--mw-ink); }

/* A card in the calendar carries actions, so it is a container, never a link. */
.mw-event--detailed { gap: var(--sp-2) var(--sp-4); }