/* Month pages (/month/). Same vocabulary as the service pages' inline "dx-" styles
   (image hero with a left-heavy navy scrim, docked stat band, gold eyebrows, navy
   bands with gold rules), pulled into one shared file so thirteen pages do not each
   carry their own copy. Tokens mirror design/DESIGN.md and the :root in style.css. */

.mo-page {
    --mo-navy: #0f172a;
    --mo-gold: #d4c18c;
    --mo-gold-light: #D8CFB0;
    --mo-gold-deep: #b89e63;
    --mo-cream: #faf8f5;
    --mo-surface: #ffffff;
    --mo-surface-alt: #f3f4f6;
    --mo-border: #e5e7eb;
    --mo-muted: #64748b;
    --mo-on-dark: rgba(255, 255, 255, 0.85);
    background: var(--mo-cream);
    color: var(--mo-navy);
}

.mo-container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; }
.mo-sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}

/* ── Hero ─────────────────────────────────────────────────────────── */
.mo-hero { position: relative; background: var(--mo-navy); overflow: hidden; color: #fff; }
.mo-hero__image {
    position: absolute; inset: 0; background-size: cover; background-repeat: no-repeat;
    background-position: var(--mo-pos, center 30%);
}
/* The words sit on the left. The scrim is darkest there and lets the photo through on the right. */
.mo-hero__scrim {
    position: absolute; inset: 0;
    background:
        linear-gradient(to right, rgba(15, 23, 42, 0.95) 0%, rgba(15, 23, 42, 0.88) 50%, rgba(15, 23, 42, 0.5) 70%, rgba(15, 23, 42, 0.18) 92%),
        linear-gradient(to top, rgba(15, 23, 42, 0.6) 0%, rgba(15, 23, 42, 0) 38%);
}
/* On a wide screen the photo takes the right-hand side and fades in from the left, so
   its subject sits clear of the words instead of underneath them. */
@media (min-width: 1024px) {
    .mo-hero__image {
        left: 40%;
        -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 46%);
        mask-image: linear-gradient(to right, transparent 0%, #000 46%);
    }
    .mo-hero__scrim {
        background:
            linear-gradient(to right, rgba(15, 23, 42, 0.96) 0%, rgba(15, 23, 42, 0.85) 52%, rgba(15, 23, 42, 0.4) 70%, rgba(15, 23, 42, 0.06) 90%),
            linear-gradient(to top, rgba(15, 23, 42, 0.55) 0%, rgba(15, 23, 42, 0) 36%);
    }
}
.mo-hero__inner {
    position: relative; z-index: 2; min-height: 58vh;
    display: flex; flex-direction: column; justify-content: center;
    padding-top: 3.25rem; padding-bottom: 2.75rem;
}
/* The procedure leads the hero: a small month tag, the procedure's name large and gold, then the hook. */
.mo-hero__title { margin: 0 0 0.9rem; max-width: 820px; font-size: 1rem; font-weight: 400; }
.mo-lead { display: block; max-width: 760px; margin-bottom: 1.1rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(212, 193, 140, 0.4); }
.mo-lead__tag { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin-bottom: 0.7rem; }
.mo-lead__when {
    font-family: 'Inter', sans-serif; color: rgba(255, 255, 255, 0.82); font-size: 0.8rem; font-weight: 600;
    letter-spacing: 0.17em; text-transform: uppercase; line-height: 1.45;
}
.mo-lead__now {
    color: var(--mo-navy); background: var(--mo-gold); border-radius: 999px; padding: 0.22rem 0.65rem;
    font-family: 'Inter', sans-serif; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
}
.mo-lead__now[hidden] { display: none; }
.mo-lead__name {
    display: block; font-family: 'Playfair Display', serif; font-weight: 700; color: var(--mo-gold);
    font-size: clamp(2.3rem, 4.6vw, 3.7rem); line-height: 1.02; letter-spacing: -0.01em;
}
.mo-hero__hook {
    display: block; font-family: 'Playfair Display', serif; color: #fff; font-weight: 700;
    font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.14;
    text-shadow: 0 2px 18px rgba(15, 23, 42, 0.55);
}
.mo-hero__sub {
    color: rgba(255, 255, 255, 0.93); max-width: 560px; font-size: 1.08rem;
    line-height: 1.65; margin: 0 0 1.75rem;
}
.mo-cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; }
.mo-hero__subline { font-size: 0.78rem; font-style: italic; color: rgba(255, 255, 255, 0.72); margin: 0.75rem 0 0; }

/* The offer, stated in the hero. One gold highlight per view. */
.mo-offer {
    display: inline-flex; align-items: center; gap: 0.75rem; margin-top: 1.5rem;
    padding: 0.6rem 1rem 0.6rem 0.6rem; max-width: 560px;
    border: 1px solid rgba(212, 193, 140, 0.55); border-radius: 999px;
    background: rgba(15, 23, 42, 0.55); color: #fff; text-decoration: none;
    font-size: 0.9rem; line-height: 1.35; transition: background 0.2s, border-color 0.2s;
}
.mo-offer:hover { background: rgba(15, 23, 42, 0.8); border-color: var(--mo-gold); }
.mo-offer__pct {
    flex: 0 0 auto; font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1rem;
    color: var(--mo-navy); background: var(--mo-gold); border-radius: 999px; padding: 0.3rem 0.75rem;
}
.mo-offer__arrow { color: var(--mo-gold); margin-left: 0.15rem; }

.mo-statband {
    position: relative; z-index: 2; background: rgba(15, 23, 42, 0.78);
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
    border-top: 1px solid rgba(212, 193, 140, 0.35);
}
.mo-statband__grid { display: grid; grid-template-columns: repeat(6, 1fr); padding: 1.15rem 0; }
.mo-stat { text-align: center; padding: 0 0.75rem; border-left: 1px solid rgba(255, 255, 255, 0.14); }
.mo-stat:first-child { border-left: 0; }
.mo-stat__value {
    font-family: 'Playfair Display', serif; font-size: 1.22rem; font-weight: 600;
    color: #fff; line-height: 1.2; margin: 0 0 0.15rem;
}
.mo-stat__label {
    font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase;
    color: rgba(255, 255, 255, 0.62); font-weight: 600; line-height: 1.45; margin: 0;
}

/* ── Buttons (same shapes as the service pages) ───────────────────── */
.mo-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem;
    padding: 0.95rem 1.6rem; font-size: 0.86rem; font-weight: 600; letter-spacing: 0.05em;
    text-transform: uppercase; text-decoration: none; border-radius: 4px;
    transition: background 0.2s, color 0.2s;
}
.mo-btn svg { width: 18px; height: 18px; flex-shrink: 0; }
.mo-btn--whatsapp { background: #25d366; color: #fff; }
.mo-btn--whatsapp:hover { background: #1ebe5d; }
.mo-btn--ghost { background: transparent; color: #fff; border: 2px solid #fff; }
.mo-btn--ghost:hover { background: #fff; color: var(--mo-navy); }
.mo-btn--gold { background: var(--mo-gold); color: var(--mo-navy); }
.mo-btn--gold:hover { background: #b8863f; }

/* ── Sections ─────────────────────────────────────────────────────── */
.mo-section { padding: 4.25rem 0; background: var(--mo-cream); }
.mo-section--white { background: var(--mo-surface); }
.mo-section--alt { background: var(--mo-surface-alt); }
.mo-section__head { max-width: 700px; margin: 0 0 2.25rem; }
/* Small labels on light backgrounds are slate, not gold: gold on cream is too faint to read. */
.mo-eyebrow {
    color: var(--mo-muted); font-size: 0.76rem; letter-spacing: 0.17em;
    text-transform: uppercase; font-weight: 600; margin-bottom: 0.5rem;
}
.mo-section__head h2, .mo-h2 {
    font-family: 'Playfair Display', serif; color: var(--mo-navy);
    font-size: clamp(1.6rem, 2.8vw, 2.1rem); line-height: 1.2; margin: 0 0 0.6rem;
}
.mo-section__head p { color: var(--mo-muted); font-size: 1rem; margin: 0; }

.mo-split { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; align-items: start; }
.mo-prose p { font-size: 1rem; line-height: 1.8; color: var(--mo-navy); margin: 0 0 1.1rem; }
.mo-prose .mo-monthline { font-family: 'Playfair Display', serif; font-style: italic; font-size: 1.12rem; line-height: 1.6; color: var(--mo-navy); }
.mo-figure { margin: 0; border-radius: 12px; overflow: hidden; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.07); }
.mo-figure img { width: 100%; height: 100%; aspect-ratio: 4 / 5; object-fit: cover; display: block; }

.mo-rows { margin: 1.6rem 0 0; }
.mo-row {
    display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 1.25rem;
    padding: 0.95rem 0; border-top: 1px solid var(--mo-border);
}
.mo-row:last-child { border-bottom: 1px solid var(--mo-border); }
.mo-row dt { font-weight: 600; font-size: 0.9rem; line-height: 1.5; padding-top: 0.1rem; }
.mo-row dd { margin: 0; font-size: 0.95rem; color: var(--mo-muted); line-height: 1.7; }

.mo-urgent {
    margin: 1.6rem 0 0; padding: 1rem 1.2rem; background: var(--mo-surface);
    border: 1px solid var(--mo-gold-light); border-radius: 8px;
    font-size: 0.92rem; line-height: 1.65;
}
.mo-urgent strong {
    display: block; font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase;
    color: var(--mo-navy); margin-bottom: 0.25rem;
}

.mo-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
a.mo-card {
    display: flex; flex-direction: column; background: var(--mo-surface);
    border: 1px solid var(--mo-border); border-radius: 12px; padding: 1.75rem;
    text-decoration: none; transition: box-shadow 0.2s;
}
.mo-section--white a.mo-card { background: var(--mo-cream); }
a.mo-card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.mo-card h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--mo-navy); }
.mo-card p { color: var(--mo-muted); font-size: 0.92rem; margin: 0 0 1rem; line-height: 1.65; flex: 1; }
.mo-card span {
    color: var(--mo-navy); font-weight: 600; font-size: 0.76rem;
    letter-spacing: 0.1em; text-transform: uppercase;
    border-bottom: 2px solid var(--mo-gold); padding-bottom: 0.2rem; align-self: flex-start;
}

/* ── Offer band ───────────────────────────────────────────────── */
.mo-perk { background: var(--mo-navy); color: #fff; padding: 4.25rem 0; scroll-margin-top: 90px; }
.mo-perk__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 3.5rem; align-items: center; }
.mo-perk .mo-eyebrow { color: var(--mo-gold); }
.mo-perk h2 {
    font-family: 'Playfair Display', serif; color: #fff;
    font-size: clamp(1.7rem, 3vw, 2.3rem); line-height: 1.2; margin: 0 0 0.9rem;
}
.mo-perk__lead { color: var(--mo-on-dark); font-size: 1.03rem; line-height: 1.7; margin: 0 0 1.4rem; max-width: 520px; }
.mo-perk__facts { list-style: none; margin: 0 0 1.8rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; max-width: 560px; }
.mo-perk__facts li { border-top: 2px solid rgba(212, 193, 140, 0.5); padding-top: 0.7rem; color: rgba(255, 255, 255, 0.7); font-size: 0.82rem; line-height: 1.5; }
.mo-perk__facts strong { display: block; font-family: 'Playfair Display', serif; font-size: 1.35rem; color: #fff; font-weight: 600; line-height: 1.2; margin-bottom: 0.15rem; }
.mo-perk__terms { font-size: 0.8rem; font-style: italic; color: rgba(255, 255, 255, 0.6); margin: 1rem 0 0; max-width: 520px; line-height: 1.55; }

/* A drawn card, not a photo: navy on navy with a gold hairline. */
.mo-perkcard {
    position: relative; aspect-ratio: 1.586 / 1; width: 100%; max-width: 420px; margin: 0 auto;
    border-radius: 16px; padding: 1.6rem 1.7rem; display: flex; flex-direction: column;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.09) 0%, rgba(255, 255, 255, 0) 55%, rgba(0, 0, 0, 0.25) 100%), var(--mo-navy);
    border: 1px solid rgba(212, 193, 140, 0.6);
    transform: rotate(-3deg);
}
.mo-perkcard__logo { width: 96px; height: 65px; object-fit: contain; filter: brightness(0) invert(1); opacity: 0.95; }
.mo-perkcard__label {
    position: absolute; top: 1.7rem; right: 1.7rem; color: var(--mo-gold);
    font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 600;
}
.mo-perkcard__pct {
    margin-top: auto; font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: clamp(2.6rem, 6vw, 3.6rem); line-height: 1; color: var(--mo-gold);
}
.mo-perkcard__fine { color: rgba(255, 255, 255, 0.75); font-size: 0.8rem; letter-spacing: 0.06em; margin-top: 0.4rem; }

/* ── Steps ────────────────────────────────────────────────────────── */
.mo-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.75rem; }
.mo-step { padding-top: 1rem; border-top: 2px solid var(--mo-gold-light); }
.mo-step__num { font-family: 'Playfair Display', serif; font-style: italic; color: var(--mo-gold-deep); font-size: 1.6rem; line-height: 1; margin-bottom: 0.45rem; }
.mo-step h3 { font-family: 'Playfair Display', serif; font-size: 1.08rem; margin: 0 0 0.4rem; color: var(--mo-navy); }
.mo-step p { font-size: 0.92rem; color: var(--mo-muted); line-height: 1.65; margin: 0; }

/* ── Month to month ───────────────────────────────────────────────── */
.mo-monthnav {
    display: grid; grid-template-columns: 1fr auto 1fr; gap: 1rem; align-items: center;
    margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--mo-border);
}
.mo-monthnav a { text-decoration: none; color: var(--mo-navy); font-weight: 600; font-size: 0.95rem; }
.mo-monthnav a:hover { color: var(--mo-gold-deep); }
.mo-monthnav small { display: block; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mo-muted); font-weight: 600; }
.mo-monthnav__next { text-align: right; }
.mo-monthnav__all { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; }

/* ── Closing band ─────────────────────────────────────────────────── */
.mo-close { position: relative; padding: 5.5rem 0; color: #fff; overflow: hidden; background: var(--mo-navy); }
.mo-close__image { position: absolute; inset: 0; background-size: cover; background-position: center; }
.mo-close__scrim {
    position: absolute; inset: 0;
    background: linear-gradient(to right, rgba(15, 23, 42, 0.94) 0%, rgba(15, 23, 42, 0.8) 55%, rgba(15, 23, 42, 0.45) 100%);
}
.mo-close__inner { position: relative; z-index: 2; }
.mo-close__copy { max-width: 580px; }
.mo-close .mo-eyebrow { color: var(--mo-gold); }
.mo-close h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: clamp(1.9rem, 3.4vw, 2.6rem); line-height: 1.15; margin: 0 0 1rem; }
.mo-close p { color: var(--mo-on-dark); font-size: 1.03rem; line-height: 1.7; margin: 0 0 1.9rem; }
.mo-close .mo-hero__subline { margin: 0.75rem 0 0; font-size: 0.78rem; }
.mo-note { font-size: 0.78rem; color: var(--mo-muted); line-height: 1.6; margin: 2rem 0 0; max-width: 760px; }

/* ── Hub (/month/) ────────────────────────────────────────────────── */
.mo-hubgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
a.mo-hubcard {
    position: relative; display: flex; flex-direction: column; background: var(--mo-surface);
    border: 1px solid var(--mo-border); border-radius: 12px; overflow: hidden;
    text-decoration: none; transition: box-shadow 0.2s;
}
a.mo-hubcard:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); }
.mo-hubcard img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; object-position: center 30%; display: block; }
.mo-hubcard__body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex: 1; }
.mo-hubcard__label {
    font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
    line-height: 1.45; margin: 0 0 0.5rem; color: var(--mo-muted);
}
.mo-hubcard h3 {
    font-family: 'Playfair Display', serif; font-weight: 700; font-size: 1.45rem; line-height: 1.15; color: var(--mo-navy);
    padding-bottom: 0.55rem; margin: 0 0 0.6rem; border-bottom: 2px solid var(--mo-gold); align-self: flex-start;
}
.mo-hubcard p { color: var(--mo-muted); font-size: 0.9rem; line-height: 1.6; margin: 0; }
/* What the procedure is, then the hook. */
.mo-hubcard .mo-hubcard__what { color: var(--mo-navy); font-size: 0.95rem; margin: 0 0 0.6rem; }
.mo-hubcard .mo-hubcard__hook { font-family: 'Playfair Display', serif; font-style: italic; }
.mo-hubcard__flag {
    display: none; position: absolute; top: 0.9rem; left: 0.9rem; background: var(--mo-gold); color: var(--mo-navy);
    font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 700;
    padding: 0.3rem 0.7rem; border-radius: 999px;
}
.mo-hubcard.is-current { border-color: var(--mo-gold); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08); order: -1; }
.mo-hubcard.is-current .mo-hubcard__flag { display: inline-block; }
@media (min-width: 1024px) {
    /* This month's card runs the full width, photo on the left. */
    a.mo-hubcard.is-current { grid-column: 1 / -1; flex-direction: row; align-items: stretch; }
    .mo-hubcard.is-current img { width: 48%; aspect-ratio: auto; height: 340px; }
    .mo-hubcard.is-current .mo-hubcard__body { justify-content: center; padding: 2rem 2.75rem; }
    .mo-hubcard.is-current h3 { font-size: 2.7rem; }
    .mo-hubcard.is-current .mo-hubcard__label { font-size: 0.86rem; }
    .mo-hubcard.is-current .mo-hubcard__what { font-size: 1.08rem; line-height: 1.6; margin-bottom: 0.9rem; }
    .mo-hubcard.is-current .mo-hubcard__hook { font-size: 1.3rem; line-height: 1.35; color: var(--mo-navy); }
}

/* ── Phone bar ────────────────────────────────────────────────────── */
.mo-bar { display: none; }

/* ── Reveal (only once month.js has run; content shows without JS) ── */
.mo-js .mo-reveal { opacity: 0; transform: translateY(14px); transition: opacity 0.6s ease, transform 0.6s ease; }
.mo-js .mo-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    .mo-js .mo-reveal { opacity: 1; transform: none; transition: none; }
    .mo-perkcard { transform: none; }
}
@media print {
    .mo-js .mo-reveal { opacity: 1; transform: none; }
    .mo-bar { display: none; }
}

/* ── Smaller screens ──────────────────────────────────────────────── */
@media (max-width: 1023px) {
    .mo-split, .mo-perk__grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .mo-figure img { aspect-ratio: 16 / 10; }
    .mo-perkcard { max-width: 360px; margin: 0; }
    .mo-hubgrid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
    .mo-statband__grid { grid-template-columns: repeat(3, 1fr); row-gap: 1rem; }
    .mo-stat:nth-child(4) { border-left: 0; }
    .mo-cards, .mo-steps { grid-template-columns: 1fr; }
    .mo-row { grid-template-columns: 1fr; gap: 0.25rem; }
}
@media (max-width: 700px) {
    /* On a phone the words would cover the whole photo, so the photo gets its own band
       above them and fades into the navy the words sit on. */
    .mo-hero__image { position: relative; inset: auto; height: 60vw; max-height: 320px; }
    .mo-hero__scrim {
        inset: 0 0 auto 0; height: 60vw; max-height: 320px;
        background: linear-gradient(to bottom, rgba(15, 23, 42, 0.1) 0%, rgba(15, 23, 42, 0.15) 55%, rgba(15, 23, 42, 1) 100%);
    }
    .mo-hero__inner { min-height: 0; padding-top: 0.75rem; padding-bottom: 2.5rem; }
    .mo-hero__sub { font-size: 1rem; }
    .mo-cta-row .mo-btn { width: 100%; }
    .mo-offer { border-radius: 14px; align-items: flex-start; }
    .mo-statband__grid { grid-template-columns: repeat(2, 1fr); }
    .mo-stat { border-left: 0; padding: 0 0.4rem; }
    .mo-section, .mo-perk { padding: 3.25rem 0; }
    .mo-close { padding: 4rem 0; }
    .mo-perk__facts { grid-template-columns: 1fr; gap: 0.9rem; }
    .mo-hubgrid { grid-template-columns: 1fr; }
    .mo-monthnav { grid-template-columns: 1fr 1fr; }
    .mo-monthnav__all { grid-column: 1 / -1; grid-row: 2; text-align: center; }
    .mo-close__scrim { background: rgba(15, 23, 42, 0.88); }

    .mo-bar {
        display: flex; gap: 0.5rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90;
        background: var(--mo-surface); border-top: 3px solid var(--mo-gold);
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08); padding: 0.7rem 0.9rem;
    }
    .mo-bar a {
        flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem;
        padding: 0.8rem 0.5rem; border-radius: 4px; text-decoration: none; font-weight: 600;
        font-size: 0.8rem; letter-spacing: 0.03em; text-transform: uppercase;
    }
    .mo-bar svg { width: 18px; height: 18px; flex-shrink: 0; }
    .mo-bar__wa { background: #25d366; color: #fff; }
    .mo-bar__second { background: var(--mo-navy); color: var(--mo-gold); }
    .mo-page { padding-bottom: 4.6rem; }
}

/* ── What is true of every visit (navy band under the hero) ───────── */
.mo-pillars { background: var(--mo-navy); color: #fff; padding: 3.25rem 0 3.5rem; border-top: 1px solid rgba(255, 255, 255, 0.06); }
.mo-pillars__head { margin-bottom: 1.9rem; max-width: 640px; }
.mo-pillars .mo-eyebrow { color: var(--mo-gold); }
.mo-pillars h2 { font-family: 'Playfair Display', serif; color: #fff; font-size: clamp(1.6rem, 2.6vw, 2rem); line-height: 1.2; margin: 0; }
.mo-pillars__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2.25rem; }
.mo-pillar__rule { width: 34px; height: 2px; background: var(--mo-gold); border: 0; margin: 0 0 0.8rem; }
.mo-pillar h3 { font-family: 'Playfair Display', serif; color: #fff; font-size: 1.08rem; margin: 0 0 0.4rem; }
.mo-pillar p { color: var(--mo-on-dark); font-size: 0.93rem; line-height: 1.65; margin: 0; }

/* ── What the procedure is (the first section under the hero) ─────── */
.mo-what__grid { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: 3.5rem; align-items: start; }
.mo-prose .mo-what__lead {
    font-family: 'Playfair Display', serif; font-size: clamp(1.2rem, 1.9vw, 1.45rem);
    line-height: 1.5; margin: 0.9rem 0 1.3rem;
}
.mo-what__terms { background: var(--mo-surface); border: 1px solid var(--mo-border); border-radius: 12px; padding: 1.5rem 1.75rem 0.5rem; }
.mo-what__terms dl { margin: 0; }
.mo-what__terms dl > div { padding: 0.9rem 0; border-top: 1px solid var(--mo-border); }
.mo-what__terms dl > div:first-child { border-top: 0; padding-top: 0; }
.mo-what__terms dt { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--mo-navy); margin: 0 0 0.2rem; }
.mo-what__terms dd { margin: 0; font-size: 0.93rem; line-height: 1.65; color: var(--mo-muted); }

/* ── Good to know: four quick facts ───────────────────────────────── */
.mo-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.mo-tile { background: var(--mo-cream); border: 1px solid var(--mo-border); border-radius: 12px; padding: 1.5rem 1.6rem; }
.mo-tile h3, .mo-what__terms h3 {
    display: inline-block; font-family: 'Inter', sans-serif; font-size: 0.74rem; font-weight: 600;
    letter-spacing: 0.14em; text-transform: uppercase; color: var(--mo-muted);
    margin: 0 0 0.75rem; padding-bottom: 0.55rem; border-bottom: 2px solid var(--mo-gold);
}
.mo-tile p { font-size: 0.98rem; line-height: 1.6; color: var(--mo-navy); margin: 0; }
.mo-fit { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 2rem; padding-top: 1.75rem; border-top: 1px solid var(--mo-border); }
.mo-fit h3 { font-family: 'Playfair Display', serif; font-size: 1.15rem; color: var(--mo-navy); margin: 0 0 0.4rem; }
.mo-fit p { font-size: 0.97rem; line-height: 1.7; color: var(--mo-muted); margin: 0; }

/* ── What to expect: the visit step by step, beside a photo ───────── */
.mo-expect__grid { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: 3.5rem; align-items: start; }
.mo-timeline { display: grid; gap: 1.5rem; }
.mo-timeline .mo-step { display: grid; grid-template-columns: 2.75rem minmax(0, 1fr); column-gap: 1rem; padding-top: 1.1rem; }
.mo-timeline .mo-step__num { grid-row: 1 / span 2; margin: 0; }
.mo-timeline .mo-step h3, .mo-timeline .mo-step p { grid-column: 2; }
.mo-timeline .mo-step p { font-size: 0.95rem; }

/* ── Doctor card. The markup is lifted from the service pages; these are that card's rules. ── */
.mo-page .dx-doctor {
    background: var(--mo-navy); border-radius: 12px; color: #fff; display: grid;
    grid-template-columns: 240px minmax(0, 1fr); gap: 2rem; padding: 2.25rem; align-items: center;
}
.mo-page .dx-doctor img { width: 100%; height: auto; border-radius: 10px; border: 2px solid var(--mo-gold); display: block; }
.mo-page .dx-doctor h3 { font-family: 'Playfair Display', serif; color: var(--mo-gold); font-size: 1.7rem; margin: 0 0 0.3rem; }
.mo-page .dx-doctor p { color: var(--mo-on-dark); font-size: 0.95rem; line-height: 1.7; margin: 0 0 0.9rem; }
.mo-page .dx-doctor .dx-doctor__role { color: rgba(255, 255, 255, 0.7); font-style: italic; margin: 0 0 1rem; }
.mo-page .dx-doctor .dx-doctor__caption { font-size: 0.8rem; color: rgba(255, 255, 255, 0.65); margin: 0.5rem 0 0; }
.mo-page .dx-doctor a { color: var(--mo-gold); }

/* ── Questions ────────────────────────────────────────────────────── */
.mo-faq__list { max-width: 820px; }
.mo-faq__item { background: var(--mo-surface); border: 1px solid var(--mo-border); border-radius: 12px; margin-bottom: 0.7rem; padding: 1.1rem 1.5rem; }
.mo-faq__item summary {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    font-weight: 600; color: var(--mo-navy); font-size: 0.98rem; cursor: pointer; list-style: none;
}
.mo-faq__item summary::-webkit-details-marker { display: none; }
.mo-faq__item summary::after { content: '+'; flex: 0 0 auto; color: var(--mo-gold-deep); font-size: 1.35rem; line-height: 1; }
.mo-faq__item[open] summary::after { content: '\2013'; }
.mo-faq__item summary:focus-visible { outline: 2px solid var(--mo-gold-deep); outline-offset: 4px; border-radius: 4px; }
.mo-faq__item > div { margin-top: 0.9rem; color: var(--mo-muted); font-size: 0.95rem; line-height: 1.7; }
.mo-section--white .mo-faq__item { background: var(--mo-cream); }

/* ── Other months, at the foot of a month page ────────────────────── */
.mo-more { padding: 2.75rem 0; }
.mo-more .mo-monthnav { margin-top: 0; padding-top: 0; border-top: 0; }

@media (max-width: 1023px) {
    .mo-pillars__grid, .mo-tiles { grid-template-columns: repeat(2, 1fr); }
    .mo-expect__grid, .mo-what__grid { grid-template-columns: 1fr; gap: 2.25rem; }
    .mo-page .dx-doctor { grid-template-columns: 1fr; text-align: center; }
    .mo-page .dx-doctor img { max-width: 260px; margin: 0 auto; }
}
@media (max-width: 700px) {
    .mo-pillars { padding: 2.75rem 0; }
    .mo-pillars__grid, .mo-tiles { grid-template-columns: 1fr; gap: 1.4rem; }
    .mo-tiles { gap: 0.9rem; }
    .mo-fit { grid-template-columns: 1fr; gap: 1.4rem; }
    .mo-page .dx-doctor { padding: 1.75rem 1.4rem; }
    .mo-more { padding: 2.25rem 0; }
}