/*
Theme Name: Mountains of Hope
Theme URI: https://mountainsofhope.com
Author: Learn And Grow Rich
Description: Block theme for Mountains of Hope — a licensed medical facility and healing center in Rionegro, Colombia. Implements the official brand system from the Marketing & Sales Packet v1.0: Deep Green #25492B, Terracotta #CF8758, Grey-Beige paper, Cormorant Garamond and Jost. Built for WordPress Multisite and for programmatic publishing via the REST API.
Version: 1.2.2
Requires at least: 6.5
Tested up to: 6.7
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: mountains-of-hope
Tags: full-site-editing, block-patterns, one-column, wide-blocks, custom-colors, custom-logo
*/

/* ============================================================
   1. TOKENS
   The brand palette is declared in theme.json; these aliases keep
   the section CSS readable and give non-block markup the same values.
   ============================================================ */
:root{
  --moh-green:#25492B;
  --moh-green-deep:#1D3A22;
  --moh-olive:#3A4521;
  --moh-terracotta:#CF8758;
  --moh-terracotta-ink:#A05F33;
  --moh-paper:#EAE1D6;
  --moh-surface:#F6F2EB;
  --moh-blush:#E1BCAA;
  --moh-ink:#3C3C3B;
  --moh-muted:#6F6A62;
  --moh-line:#D5CABB;
  --moh-line-soft:#E0D7C9;
  --moh-on-green:#EAE1D6;
  --moh-on-green-muted:#AFC0AE;
  --moh-display:"Cormorant Garamond","EB Garamond",Georgia,serif;
  --moh-body:"Jost","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

body{ -webkit-font-smoothing:antialiased; }
img{ max-width:100%; height:auto; }
:focus-visible{ outline:2px solid var(--moh-terracotta); outline-offset:3px; }
html{ scroll-behavior:smooth; }
@media (prefers-reduced-motion:reduce){ html{scroll-behavior:auto;} *{transition:none!important;animation:none!important;} }

/* ============================================================
   2. BANDS — full-bleed alternating sections
   Applied as a className on a core/group block.
   ============================================================ */
.moh-band{ padding-block:clamp(58px,8vw,104px); position:relative; overflow:hidden; }
.moh-band.is-paper{ background:var(--moh-paper); }
.moh-band.is-raised{ background:var(--moh-surface); }
.moh-band.is-green{ background:var(--moh-green); color:var(--moh-on-green); }
.moh-band.is-green :is(h1,h2,h3,h4){ color:var(--moh-on-green); }
.moh-band.is-green p{ color:var(--moh-on-green-muted); }
.moh-band.is-green strong{ color:var(--moh-on-green); }
.moh-band.is-green a{ color:var(--moh-on-green); }

/* ============================================================
   3. TYPE UTILITIES
   ============================================================ */
.moh-eyebrow{
  font-family:var(--moh-body); font-size:11px; letter-spacing:.2em;
  text-transform:uppercase; font-weight:500; color:var(--moh-terracotta-ink);
  margin:0 0 16px;
}
.moh-band.is-green .moh-eyebrow{ color:var(--moh-terracotta); }
.moh-lede{
  font-family:var(--moh-display); font-size:clamp(20px,2.7vw,26px);
  line-height:1.46; font-weight:400; color:var(--moh-ink); max-width:44ch;
}
.moh-band.is-green .moh-lede{ color:var(--moh-on-green-muted); }
.moh-prose p{ max-width:64ch; }

/* ============================================================
   4. BUTTONS
   ============================================================ */
.wp-block-button__link,
.moh-btn{
  font-family:var(--moh-body); font-size:13.5px; letter-spacing:.09em;
  text-transform:uppercase; font-weight:500; padding:14px 26px;
  border:1px solid transparent; border-radius:1px; text-decoration:none;
  display:inline-block; transition:background .2s,color .2s,border-color .2s;
}
.moh-btn-primary,
.is-style-moh-primary .wp-block-button__link{
  background:var(--moh-terracotta); color:#20200F; border-color:var(--moh-terracotta);
}
.moh-btn-primary:hover,
.is-style-moh-primary .wp-block-button__link:hover{ background:transparent; color:var(--moh-terracotta); }
.moh-btn-ghost,
.is-style-moh-ghost .wp-block-button__link{
  background:transparent; color:var(--moh-on-green); border-color:rgba(234,225,214,.42);
}
.moh-btn-ghost:hover,
.is-style-moh-ghost .wp-block-button__link:hover{ border-color:var(--moh-on-green); background:rgba(234,225,214,.09); }

/* ============================================================
   5. HEADER / FOOTER
   ============================================================ */
.moh-header{ position:sticky; top:0; z-index:40; background:var(--moh-green); border-bottom:1px solid rgba(234,225,214,.14); }
.moh-header .wp-block-site-logo img{ height:42px; width:auto; }
.moh-header .wp-block-navigation a{ color:var(--moh-on-green-muted); text-decoration:none; font-size:13.5px; letter-spacing:.04em; }
.moh-header .wp-block-navigation a:hover{ color:var(--moh-on-green); }
.moh-footer{ background:var(--moh-green-deep); color:var(--moh-on-green-muted); padding-block:52px 40px; }
.moh-footer :is(h2,h3,h4){ font-family:var(--moh-body); font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--moh-on-green); font-weight:500; }
.moh-footer a{ color:var(--moh-on-green-muted); text-decoration:none; font-size:14px; }
.moh-footer a:hover{ color:var(--moh-on-green); }
.moh-legal p{ font-size:12.5px; line-height:1.7; color:rgba(175,192,174,.85); max-width:88ch; }

/* ============================================================
   6. HERO
   ============================================================ */
.moh-hero{ background:var(--moh-green); color:var(--moh-on-green); position:relative; overflow:hidden;
  padding-block:clamp(56px,10vw,108px) clamp(64px,10vw,116px); }
.moh-hero__ridge{ position:absolute; right:-6%; bottom:-14%; width:min(760px,85%); opacity:.115;
  pointer-events:none; filter:invert(1); z-index:1; }
.moh-hero > *{ position:relative; z-index:2; }
.moh-hero__mark{ width:min(360px,72%); margin:0 0 34px; }
.moh-hero h1{ color:var(--moh-on-green); max-width:15ch; }
.moh-hero__licence{ margin-top:38px; padding-top:20px; border-top:1px solid rgba(234,225,214,.2);
  font-size:13px; letter-spacing:.11em; text-transform:uppercase; color:var(--moh-on-green-muted);
  display:flex; flex-wrap:wrap; gap:8px 26px; }

/* ============================================================
   7. CARD GRIDS — pillars, programmes, personas
   ============================================================ */
.moh-grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:38px; }
@media (max-width:860px){ .moh-grid-3{ grid-template-columns:1fr; } }
.moh-card{ border:1px solid var(--moh-line); background:var(--moh-surface); padding:26px 24px; display:flex; flex-direction:column; }
.moh-card.is-lead{ background:var(--moh-green); border-color:var(--moh-green); }
.moh-card.is-lead :is(h2,h3,h4){ color:var(--moh-on-green); }
.moh-card.is-lead p{ color:var(--moh-on-green-muted); }
.moh-card__label{ font-size:10.5px; letter-spacing:.17em; text-transform:uppercase; color:var(--moh-terracotta-ink); margin:0 0 10px; font-weight:500; }
.moh-card.is-lead .moh-card__label{ color:var(--moh-terracotta); }
.moh-card p{ font-size:15.5px; line-height:1.62; }
.moh-card__meta{ margin-top:auto; padding-top:18px; border-top:1px solid var(--moh-line-soft); font-size:13.5px; color:var(--moh-muted); display:grid; gap:3px; }
.moh-card.is-lead .moh-card__meta{ border-top-color:rgba(234,225,214,.22); color:var(--moh-on-green-muted); }
.moh-price{ font-family:var(--moh-display); font-size:36px; line-height:1; color:var(--moh-green); margin-top:16px; }
.moh-card.is-lead .moh-price{ color:var(--moh-on-green); }
.moh-price small{ font-family:var(--moh-body); font-size:13px; color:var(--moh-muted); letter-spacing:.04em; }
.moh-card.is-lead .moh-price small{ color:var(--moh-on-green-muted); }
.moh-from{ font-size:10.5px; letter-spacing:.16em; text-transform:uppercase; color:var(--moh-muted); margin-top:14px; }
.moh-card.is-lead .moh-from{ color:var(--moh-on-green-muted); }

/* ============================================================
   8. NUMBERED PROCESS
   ============================================================ */
.moh-steps{ margin:38px 0 0; counter-reset:mohstep; }
.moh-steps > .moh-step{ counter-increment:mohstep; display:grid; grid-template-columns:44px 1fr; gap:0 20px;
  padding:20px 0; border-bottom:1px solid rgba(234,225,214,.16); }
.moh-steps > .moh-step:last-child{ border-bottom:0; }
.moh-steps > .moh-step::before{ content:counter(mohstep); font-family:var(--moh-display); font-size:26px;
  line-height:1; color:var(--moh-terracotta); padding-top:5px; }
.moh-steps h3{ margin:0 0 5px; font-size:21px; }
@media (min-width:1000px){
  .moh-steps{ display:grid; grid-template-columns:1fr 1fr; column-gap:54px; }
  .moh-steps > .moh-step{ padding:22px 0; }
  .moh-steps > .moh-step:nth-last-child(-n+2){ border-bottom:0; }
  .moh-steps p{ max-width:46ch; }
}
.moh-steps p{ font-size:15.5px; line-height:1.62; margin:0; max-width:58ch; }

/* ============================================================
   9. TOOLKIT COLUMNS
   ============================================================ */
.moh-kit{ display:grid; grid-template-columns:repeat(3,1fr); gap:34px 40px; margin-top:38px; }
@media (max-width:860px){ .moh-kit{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .moh-kit{ grid-template-columns:1fr; } }
.moh-kit h3{ font-size:19px; margin:0 0 12px; padding-bottom:9px; border-bottom:1px solid var(--moh-line); }
.moh-kit ul{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.moh-kit li{ font-size:15.5px; padding-left:16px; position:relative; line-height:1.5; }
.moh-kit li::before{ content:""; position:absolute; left:0; top:.62em; width:7px; height:1px; background:var(--moh-terracotta); }

/* ============================================================
   10. NOTICES & QUOTES
   ============================================================ */
.moh-notice{ margin-top:40px; padding:22px 24px; background:var(--moh-blush); border-left:2px solid var(--moh-terracotta); }
.moh-notice p{ margin:0; font-size:15.5px; line-height:1.6; color:#3A2A1F; max-width:74ch; }
.moh-pullquote{ background:var(--moh-green); color:var(--moh-on-green); padding:34px 36px; margin-top:40px; position:relative; overflow:hidden; }
.moh-pullquote__text{ font-family:var(--moh-display); font-size:clamp(23px,3.4vw,34px); line-height:1.3; color:var(--moh-on-green); margin:0; max-width:26ch; }
.moh-pullquote__mark{ position:absolute; right:-20px; bottom:-30px; width:190px; opacity:.13; filter:invert(1); pointer-events:none; }
.moh-promise{ border:1px solid rgba(234,225,214,.28); padding:30px 32px; background:rgba(234,225,214,.05); }
.moh-promise p{ font-family:var(--moh-display); font-size:clamp(22px,3vw,30px); line-height:1.32; color:var(--moh-on-green); margin:0; max-width:24ch; }

/* ============================================================
   11. STATS
   ============================================================ */
.moh-stats{ display:grid; grid-template-columns:repeat(5,1fr); gap:1px; background:var(--moh-line); border:1px solid var(--moh-line); margin-top:48px; }
@media (max-width:820px){ .moh-stats{ grid-template-columns:repeat(2,1fr); } .moh-stats > :last-child{ grid-column:1/-1; } }
.moh-stat{ background:var(--moh-surface); padding:24px 18px 20px; text-align:center; }
.moh-stat__n{ font-family:var(--moh-display); font-size:40px; line-height:1; color:var(--moh-green); font-variant-numeric:tabular-nums; }
.moh-stat__l{ font-size:10.5px; letter-spacing:.13em; text-transform:uppercase; color:var(--moh-muted); margin-top:10px; line-height:1.5; }

/* ============================================================
   12. EDITORIAL CONTENT — what the SEO engine publishes
   Blog posts and pages written via the REST API land here. Keeping
   this generous and on-brand is what lets automated pages ship
   without a designer touching them.
   ============================================================ */
.moh-article{ padding-block:clamp(48px,7vw,84px); background:var(--moh-paper); }
.moh-article .entry-content > *{ margin-block:0 1.15em; }
.moh-article .entry-content > :is(h2,h3){ margin-top:2em; }
.moh-article .entry-content blockquote{
  border-left:2px solid var(--moh-terracotta); padding-left:22px; margin-left:0;
  font-family:var(--moh-display); font-size:1.28rem; line-height:1.45; color:var(--moh-green);
}
.moh-article .entry-content :is(ul,ol){ padding-left:1.15em; }
.moh-article .entry-content li{ margin-bottom:.45em; }
.moh-article .entry-content img{ margin-block:1.8em; }
.moh-article .entry-content figcaption{ font-size:13px; color:var(--moh-muted); margin-top:9px; }
.moh-article .entry-content hr{ border:0; border-top:1px solid var(--moh-line); margin-block:2.6em; }
.moh-article .entry-content a{ color:var(--moh-green); text-underline-offset:3px; }

/* Every automated page ends with the same compliance footer. */
.moh-disclaimer{ margin-top:56px; padding-top:22px; border-top:1px solid var(--moh-line); }
.moh-disclaimer p{ font-size:12.5px; line-height:1.7; color:var(--moh-muted); max-width:78ch; }

/* ============================================================
   13. MEMBER JOURNEY + CLOSING
   ============================================================ */
.moh-journey{ display:grid; grid-template-columns:repeat(3,1fr); gap:26px 34px; margin-top:40px; }
@media (max-width:820px){ .moh-journey{ grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .moh-journey{ grid-template-columns:1fr; } }
.moh-journey__n{ font-family:var(--moh-display); font-size:22px; color:var(--moh-terracotta); line-height:1; margin:0 0 7px; }
.moh-journey h3{ font-size:18px; margin:0 0 5px; color:var(--moh-on-green); }
.moh-journey p{ font-size:14px; margin:0; color:var(--moh-on-green-muted); }

.moh-closing{ text-align:center; padding-block:clamp(74px,10vw,124px); }
.moh-closing > *{ position:relative; z-index:2; }
.moh-closing h2{ max-width:23ch; margin-inline:auto; }
.moh-closing p{ margin-inline:auto; }
.moh-closing__mark{ position:absolute; left:50%; top:-86px; transform:translateX(-50%);
  width:340px; opacity:.10; filter:invert(1); pointer-events:none; z-index:1; }

/* ============================================================
   14. LAYOUT CORRECTIONS
   WordPress's constrained layout centres every direct child of a
   group. These keep the intended alignment and column flow.
   ============================================================ */

/* Ledes read left-aligned, not centred in their own max-width. */
:is(.moh-pagewrap, .moh-prose) .moh-lede{ margin-left:0; margin-right:auto; }

/* The hero is its own band, so it does not inherit .is-green's text colours. */
.moh-hero .moh-lede{ color:var(--moh-on-green-muted); max-width:46ch; }
.moh-hero p{ color:var(--moh-on-green-muted); }
.moh-hero :is(h1,h2,h3){ color:var(--moh-on-green); }

/* Each step's heading and copy belong beside the number, not under it. */
.moh-steps > .moh-step > *{ grid-column:2; margin-left:0; margin-right:0; }
.moh-steps > .moh-step > :last-child{ margin-bottom:0; }

/* Cards and grid children are laid out by the grid, not by auto margins. */
.moh-grid-3 > *, .moh-card > *, .moh-kit > *{ margin-left:0; margin-right:0; }
.moh-card > :last-child{ margin-bottom:0; }

/* The closing band is deliberately centred. */
.moh-closing .moh-lede, .moh-closing p{ margin-inline:auto; }

/* ============================================================
   15. BLOCK-LAYOUT CORRECTIONS — v1.0.1
   Found by rendering the theme on a live install. WordPress
   wraps pattern markup in its own layout containers, and three
   things in section 2–13 above assumed markup one level shallower.
   ============================================================ */

/* The gap WordPress puts between top-level sections was showing a
   strip of page background between the sticky header and the hero. */
.wp-site-blocks > *,
.wp-site-blocks > main > * { margin-block-start: 0; }

/* Bands are full-bleed; only their contents are constrained.
   Without this the hero renders inside the 720px reading column. */
.moh-band > .wp-block-group,
.moh-band > .wp-block-columns,
.moh-band > .wp-block-buttons,
.moh-band > p,
.moh-band > :is(h1,h2,h3),
.moh-hero > *:not(.moh-hero__ridge):not(.moh-hero__photo):not(.moh-hero__scrim){
  max-width: 1080px;
  margin-inline: auto;
}
.moh-band, .moh-hero{ padding-inline: 22px; }

/* A .moh-lede carries a reading measure (44-48ch). Everything else in a band is
   a full 1080px child that WP's constrained layout centres, so the narrow lede
   was being centred as a narrow box and drifted into the middle of the band,
   away from the heading above it. Keeping the BOX at 1080 and pulling the text
   in with padding leaves the lede's left edge exactly on the heading's. */
.moh-band > .moh-lede{
  max-width:48ch;
  margin-inline-start:max(0px, calc((100% - 1080px) / 2));
  margin-inline-end:auto;
}

/* Hero: the lockup sits left with the copy, not centred. */
.moh-hero__mark{ margin-inline: 0; width: min(360px, 72%); height: auto; }
.moh-hero > .moh-lede,
.moh-hero > :is(h1,h2){ margin-inline: 0 auto; }

/* The ridge is a watermark, not a picture in the flow. */
.moh-hero{ position: relative; }
.moh-hero__ridge{
  position: absolute; right: -6%; bottom: -14%; left: auto; top: auto;
  width: min(760px, 85%); opacity: .115; filter: invert(1);
  pointer-events: none; z-index: 0; margin: 0;
}
.moh-hero > *:not(.moh-hero__ridge):not(.moh-hero__photo):not(.moh-hero__scrim){ position: relative; z-index: 2; }

/* Header: keep the row balanced while the logo and menu are still empty. */
.moh-header .wp-block-group{ width: 100%; }
.moh-header .wp-block-site-logo{ margin-inline-end: auto; }
.moh-header .wp-block-site-logo:empty{ min-width: 1px; }

/* The closing band centres; the width rule above must not fight it. */
.moh-closing > *{ margin-inline: auto; }

/* ============================================================
   16. HEADER — v1.0.2
   The logo and menu are rendered by the theme rather than left to
   a Site Logo block and a saved menu, so the header is correct the
   moment the theme is activated, with no media library step.
   ============================================================ */
.moh-header{ padding-inline: 0; }
.moh-header__bar{
  max-width: 1080px; margin-inline: auto; padding: 12px 22px;
  display: flex; align-items: center; gap: 28px;
}
.moh-header__logo{ display: block; flex: 0 0 auto; line-height: 0; }
.moh-header__logo img{ height: 44px; width: auto; display: block; }
.moh-nav{ display: flex; flex-wrap: wrap; gap: 26px; margin-inline-start: auto; }
.moh-nav a{
  color: var(--moh-on-green-muted); text-decoration: none;
  font-size: 13.5px; letter-spacing: .04em; white-space: nowrap;
  padding-block: 4px; border-bottom: 1px solid transparent;
  transition: color .18s, border-color .18s;
}
.moh-nav a:hover{ color: var(--moh-on-green); border-bottom-color: var(--moh-terracotta); }
.moh-header__cta{ flex: 0 0 auto; padding: 11px 20px; font-size: 12px; }

/* Compact disclosure menu. Hidden entirely on wide screens, where .moh-nav
   carries the navigation; below 900px .moh-nav hides and this takes over.
   CSS-only (details/summary) so the header needs no JavaScript. */
.moh-menu{ display: none; position: relative; flex: 0 0 auto; }
.moh-menu__toggle{
  list-style: none; cursor: pointer; display: block;
  width: 42px; height: 42px; border-radius: 3px;
  display: grid; place-items: center;
}
.moh-menu__toggle::-webkit-details-marker{ display: none; }
.moh-menu__toggle:focus-visible{ outline: 2px solid var(--moh-terracotta); outline-offset: 2px; }
.moh-menu__bars,
.moh-menu__bars::before,
.moh-menu__bars::after{
  display: block; width: 22px; height: 2px;
  background: var(--moh-on-green); border-radius: 2px;
  transition: transform .18s ease, opacity .18s ease;
}
.moh-menu__bars{ position: relative; }
.moh-menu__bars::before,
.moh-menu__bars::after{ content: ""; position: absolute; left: 0; }
.moh-menu__bars::before{ top: -7px; }
.moh-menu__bars::after{ top: 7px; }
.moh-menu[open] .moh-menu__bars{ background: transparent; }
.moh-menu[open] .moh-menu__bars::before{ transform: translateY(7px) rotate(45deg); }
.moh-menu[open] .moh-menu__bars::after{ transform: translateY(-7px) rotate(-45deg); }

.moh-menu__panel{
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 210px; padding: 10px 6px;
  display: flex; flex-direction: column;
  background: var(--moh-green-deep);
  border: 1px solid rgba(234,225,214,.18); border-radius: 4px;
  box-shadow: 0 18px 40px rgba(0,0,0,.35);
}
.moh-menu__panel a{
  color: var(--moh-on-green-muted); text-decoration: none;
  font-size: 14.5px; letter-spacing: .03em;
  padding: 11px 16px; border-radius: 3px;
  transition: color .16s, background-color .16s;
}
.moh-menu__panel a:hover,
.moh-menu__panel a:focus-visible{ color: var(--moh-on-green); background: rgba(234,225,214,.08); }

@media (max-width: 900px){
  .moh-nav{ display: none; }
  .moh-menu{ display: block; }
  .moh-header__cta{ margin-inline-start: auto; }
}
@media (max-width: 420px){
  .moh-header__bar{ gap: 14px; }
  .moh-header__logo img{ height: 36px; }
  .moh-header__cta{ padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce){
  .moh-menu__bars,
  .moh-menu__bars::before,
  .moh-menu__bars::after{ transition: none; }
}

/* Footer, rendered by the theme for the same reason as the header. */
.moh-footer{ padding-inline: 0; }
.moh-footer__inner{ max-width:1080px; margin-inline:auto; padding-inline:22px; }
.moh-footer__cols{
  display:grid; grid-template-columns:1.5fr 1fr 1fr; gap:34px;
  padding-bottom:30px; border-bottom:1px solid rgba(234,225,214,.16);
}
@media (max-width:820px){ .moh-footer__cols{ grid-template-columns:1fr; } }
.moh-footer__logo{ width:230px; height:auto; margin-bottom:16px; display:block; }
.moh-footer__brand p{ max-width:40ch; }
.moh-footer ul{ list-style:none; padding:0; margin:0; display:grid; gap:9px; }
.moh-footer .moh-legal{ padding-top:24px; }

/* ============================================================
   17. PHOTOGRAPHY — v1.1.0
   Real images from the property, the kitchen and the garden.
   Everything here keeps cream type legible over a photograph by
   putting a green scrim between the two, never by dimming the
   image alone — a bright sky in one frame would break that.
   ============================================================ */

/* ---------- home hero over a photograph ---------- */
.moh-hero.has-photo{ isolation: isolate; }
.moh-hero.has-photo > .moh-hero__photo,
.moh-hero.has-photo > .moh-hero__scrim{
  position:absolute; inset:0; width:100%; height:100%;
  max-width:none; margin:0; z-index:0;
}
.moh-hero.has-photo > .moh-hero__photo{
  object-fit:cover; object-position:center 58%;
}
/* The headline runs the full measure, so the scrim has to stay dark the whole
   way across. The old gradient thinned to .42 on the right and the last words
   of the headline sat on the brightest part of the photograph. */
.moh-hero.has-photo > .moh-hero__scrim{
  z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(20,42,25,.95) 0%, rgba(20,42,25,.88) 55%, rgba(20,42,25,.74) 100%),
    linear-gradient(to bottom, rgba(20,42,25,.45) 0%, rgba(20,42,25,.30) 45%, rgba(20,42,25,.72) 100%);
}
/* Give the photograph room to be a photograph. */
.moh-hero.has-photo{ padding-block:clamp(88px,13vw,164px); }
.moh-hero.has-photo .moh-hero__ridge{ opacity:.07; }

/* ---------- programme card photographs ---------- */
.moh-card > .moh-card__photo{
  width:calc(100% + 48px); max-width:none; margin:0 -24px 20px; display:block;
  aspect-ratio:16/10; object-fit:cover;
}
/* The negative pull only applies when the photograph really is the top of the
   card. Anywhere else it climbs over whatever is above it. */
.moh-card > .moh-card__photo:first-child{ margin-top:-26px; }

/* ---------- modality grid ---------- */
.moh-modgrid{
  display:grid; grid-template-columns:repeat(5,1fr); gap:12px; margin:0 0 44px;
}
@media (max-width:900px){ .moh-modgrid{ grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .moh-modgrid{ grid-template-columns:repeat(2,1fr); } }
.moh-modgrid figure{ margin:0; position:relative; overflow:hidden; background:var(--moh-green); }
.moh-modgrid img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.moh-modgrid figcaption{
  position:absolute; inset:auto 0 0 0; padding:22px 12px 9px;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase; color:#EAE1D6;
  background:linear-gradient(to top, rgba(20,42,25,.92), rgba(20,42,25,0));
  line-height:1.35;
}

/* ---------- interior page hero ---------- */
.moh-pagehero{
  position:relative; isolation:isolate; overflow:hidden;
  background:var(--moh-green); color:var(--moh-on-green);
  min-height:clamp(340px,52vw,560px);
  display:flex; align-items:flex-end;
  padding:clamp(40px,7vw,80px) 22px clamp(36px,6vw,64px);
}
.moh-pagehero__photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; }
.moh-pagehero__scrim{
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background:
    linear-gradient(to right, rgba(20,42,25,.92) 0%, rgba(20,42,25,.70) 55%, rgba(20,42,25,.34) 100%),
    linear-gradient(to bottom, rgba(20,42,25,.30) 0%, rgba(20,42,25,.10) 35%, rgba(20,42,25,.80) 100%);
}
.moh-pagehero__body{ position:relative; z-index:2; max-width:1080px; margin-inline:auto; width:100%; }
.moh-pagehero h1{ color:var(--moh-on-green); max-width:18ch; margin:0 0 14px; }
.moh-pagehero .moh-lede{ color:var(--moh-on-green-muted); margin:0; }
.moh-pagehero .moh-eyebrow{ color:var(--moh-terracotta); }

/* ---------- page furniture ---------- */
.moh-pagewrap{ max-width:1080px; margin-inline:auto; padding-inline:22px; }
.moh-band .moh-pagewrap > :is(h2,h3,p){ margin-inline:0; }
.moh-prose p{ max-width:66ch; }

figure{ margin:0; }
figcaption{ font-size:12.5px; color:var(--moh-muted); margin-top:9px; line-height:1.55; }
.moh-band.is-green figcaption{ color:var(--moh-on-green-muted); }

/* full-bleed plate */
.moh-full{ margin-inline:0; }
.moh-full img{ width:100%; height:auto; display:block; max-height:78vh; object-fit:cover; }
.moh-full figcaption{ max-width:1080px; margin-inline:auto; padding-inline:22px; }

/* two up */
.moh-split{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:720px){ .moh-split{ grid-template-columns:1fr; } }
.moh-split img{ width:100%; aspect-ratio:4/3; object-fit:cover; display:block; }

/* three up */
.moh-row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px; margin-top:30px; }
@media (max-width:720px){ .moh-row-3{ grid-template-columns:1fr; } }
.moh-row-3 img{ width:100%; aspect-ratio:3/4; object-fit:cover; display:block; }

/* mosaic — one wide plate, then a rhythm of squares */
.moh-mosaic{ display:grid; grid-template-columns:repeat(3,1fr); gap:14px; }
@media (max-width:720px){ .moh-mosaic{ grid-template-columns:repeat(2,1fr); } }
.moh-mosaic figure{ margin:0; }
.moh-mosaic img{ width:100%; aspect-ratio:1/1; object-fit:cover; display:block; }
.moh-mosaic .is-wide{ grid-column:span 2; }
.moh-mosaic .is-wide img{ aspect-ratio:2/1; }
@media (max-width:720px){ .moh-mosaic .is-wide{ grid-column:span 2; } }

/* button row inside raw-html sections */
.moh-btnrow{ display:flex; flex-wrap:wrap; gap:13px; margin-top:28px; }
.moh-closing .moh-btnrow{ justify-content:center; }
.moh-closing .moh-pagewrap{ text-align:center; }
.moh-closing .moh-pagewrap h2{ max-width:23ch; margin-inline:auto; }
.moh-closing .moh-pagewrap p{ margin-inline:auto; }

/* Images never overflow their container on any page. */
.moh-band img, .moh-pagehero img{ max-width:100%; }