/* ==========================================================================
   Hero options (hero-home .hero.hr, hero-page .page-hero.ph / .listing-hero /
   the blog hero, hero-program .mp-hero.hp): layout and the open figures.

   Brand rules (docs/brand-rules.md): every hero sits on a SOLID brand ground
   (set per option in 12-heroes-color.css), flat colour only (no gradients,
   duotones, blends or photo filters), Nunito + Open Sans, a stripe bar at the
   foot. Classes used by the option markup only (hr-, hr1-3, ph, hp, hs-), so
   Current is untouched. The two pages whose hero is not printed by a block
   (Programs .listing-hero, Blog .page-hero) are restyled under
   html[data-o-hero-page="n"].
   ========================================================================== */

/* ---- Shared drawing pieces ------------------------------------------------ */
.hs-crane { display: block; width: 64px; height: auto; }
.hs-scene { display: block; width: 100%; height: auto; }

/* A round paper sticker: white edge, a soft warm shadow, a slight tilt. */
.hr-sticker {
  display: inline-grid; place-content: center; justify-items: center; text-align: center; gap: 1px;
  width: clamp(84px, 8vw, 100px); aspect-ratio: 1; border-radius: 50%;
  background: var(--sage-deep); color: #fff;
  border: 3px solid #fff; box-shadow: 0 6px 16px rgba(60, 30, 10, .18), 0 0 0 1px rgba(60, 30, 10, .06);
  transform: rotate(-6deg); line-height: 1.05; padding: 6px;
}
.hr-sticker b { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.1rem, 1.7vw, 1.45rem); letter-spacing: -.02em; }
.hr-sticker > span { font-size: .62rem; font-weight: 600; word-break: keep-all; hyphens: none; white-space: nowrap; }

/* Open facts: a big numeral with its words, set straight on the background. */
.hr-dots { display: inline-flex; flex-wrap: wrap; }
.hr-dots i { display: block; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); }
.hr-dots--cap { display: inline-grid; grid-template-columns: repeat(6, 8px); gap: 4px; flex: none; }
.hr-dots--cap i { width: 8px; height: 8px; background: var(--sage-deep); }
.hr-facts { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 14px 0; align-items: center; }
.hr-fact { display: flex; align-items: center; gap: 10px; padding: 0 clamp(14px, 2.2vw, 30px); border-left: 2px dotted currentColor; min-width: 0; }
.hr-fact:first-child { padding-left: 0; border-left: 0; }
.hr-fact__n { white-space: nowrap; font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 2.6vw, 2.3rem); line-height: 1; letter-spacing: -.02em; color: var(--brand-dark); }
.hr-fact__text { display: grid; line-height: 1.25; font-size: .88rem; max-width: 17ch; }
.hr-fact__text small { font-size: .78rem; opacity: .8; }
.hr-fact__text b { font-family: var(--font-head); font-weight: 700; }
.hr-stars { color: var(--accent-sun); letter-spacing: 1px; }
.hr-fact--cap .hr-fact__text { max-width: 20ch; }

/* ==========================================================================
   HOME HERO
   ========================================================================== */
.hero.hr {
  min-height: 0; display: block; position: relative; overflow: hidden; isolation: isolate;
  padding-block: clamp(24px, 3.2vw, 42px) 0;
}
.hero.hr::before { content: none; }
.hero.hr::after { content: none; }
.hr .wrap { position: relative; z-index: 2; }
.hr__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hr .hero__badge { margin-bottom: 12px; padding: 4px 12px 4px 4px; font-size: .82rem; gap: 8px; }
.hr .hero__badge .pill { padding: 3px 10px; font-size: .72rem; }
.hr .hero__title { font-size: clamp(1.8rem, 2.7vw, 2.4rem); line-height: 1.14; letter-spacing: -.02em; margin-bottom: 10px; text-wrap: balance; background: none; -webkit-text-fill-color: currentColor; color: var(--ink); }
.hr .hero__title .grad { color: var(--brand-dark); background: none; -webkit-text-fill-color: currentColor; }
.hero.hr { border-radius: 0; }
.hr .hero__sub { color: var(--ink-soft); }
.hr .hero__badge { background: #fff; border: 1px solid var(--line); color: var(--ink-soft); box-shadow: none; }
.hr .hero__badge b { color: var(--brand-dark); }
.hr .hero__badge .pill { background: var(--accent-sun); color: #fff; }
.hr .hero__alt { color: var(--ink); }
.hr .hero__sub { font-size: 1rem; line-height: 1.6; max-width: 54ch; margin-bottom: 16px; }
.hr .hero__actions { margin: 0; }
.hr .btn { min-height: 44px; padding: 10px 22px; font-size: .95rem; }
.hr-photo__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }

/* ---- 1: Growing-up path. An age ruler drawn on the ground,
   the three age groups as big numerals along a coloured line. ---- */
.hr--1 .hr1__top { display: grid; gap: 22px; align-items: center; }
@media (min-width: 900px) { .hr--1 .hr1__top { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; } }
.hr1__photo { position: relative; max-width: 460px; width: 100%; justify-self: center; }
.hr1__frame { aspect-ratio: 16 / 10; overflow: hidden; border: 5px solid #fff; border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; box-shadow: 0 10px 26px rgba(60, 30, 10, .16); background: var(--sage-tint); }
.hr1__crane { position: absolute; left: -22px; bottom: -14px; width: 70px; height: auto; transform: rotate(-8deg); }
.hr1__sticker { position: absolute; right: -10px; top: -18px; width: clamp(88px, 8.4vw, 104px); background: var(--brand); transform: rotate(7deg); }
.hr1__sticker b { font-size: clamp(.9rem, 1.2vw, 1.05rem); }

.hr1__ruler { margin-top: clamp(14px, 2vw, 24px); padding-bottom: clamp(48px, 6.4vw, 92px); }
.hr1__cols { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(17, minmax(0, 1fr)); align-items: end; }
.hr1__cols > li { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; }
.hr1__n { font-size: .68rem; font-weight: 700; color: var(--ink-soft); line-height: 1; margin-bottom: 3px; font-variant-numeric: tabular-nums; }
.hr1__bar { display: block; width: 62%; max-width: 26px; min-width: 7px; height: calc(5px + var(--n) / var(--max, 9) * 54px); border-radius: 99px 99px 3px 3px; background: var(--sage-deep); }
.hr1__cols > li[data-band="primary"] .hr1__bar { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
.hr1__cols > li[data-band="middle-high"] .hr1__bar { background: var(--brand); }
.hr1__age { font-size: .72rem; line-height: 1; color: var(--ink-soft); padding-top: 5px; font-variant-numeric: tabular-nums; position: relative; }
.hr1__age::before { content: ""; position: absolute; left: 50%; top: 0; width: 1px; height: 4px; background: var(--ink-soft); opacity: .5; }
.hr1__bands { list-style: none; margin: 4px 0 0; padding: 0; display: flex; }
.hr1__bands > li { flex: var(--w, 1) 1 0; min-width: 0; --c: var(--sage-deep); padding-right: 6px; }
.hr1__bands > li[data-band="primary"] { --c: #fff; }
.hr1__bands > li[data-band="middle-high"] { --c: var(--brand); }
.hr1__bands a { display: flex; align-items: center; gap: 10px; padding-top: 8px; border-top: 5px solid var(--c); color: var(--ink); text-decoration: none; }
.hr1__bands a:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; }
.hr1__big { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.7rem, 2.9vw, 2.5rem); line-height: 1; letter-spacing: -.03em; color: var(--brand-dark); }
.hr1__lbl { display: grid; line-height: 1.2; min-width: 0; }
.hr1__lbl strong { font-family: var(--font-head); font-size: .92rem; }
.hr1__lbl em { font-style: normal; font-size: .76rem; color: var(--ink-soft); }
.hr1__bands a:hover .hr1__lbl strong { text-decoration: underline; text-underline-offset: 3px; }
@media (max-width: 720px) {
  .hr1__bands { flex-direction: column; gap: 8px; margin-top: 12px; }
  .hr1__bands > li { flex: none; padding: 0; }
  .hr1__lbl em { font-size: .74rem; }
  .hr1__n { font-size: .6rem; }
  .hr1__sticker { right: 0; }
}


/* ---- 3: Classroom window. A flat scene on warm gold; two doors with open
   numbers; the age groups as round stickers. ---- */
.hero.hr--3 { padding-bottom: clamp(54px, 6.4vw, 88px); }
.hr3__scene { position: absolute; right: max(2vw, calc(50% - 690px)); top: 10px; width: min(33vw, 400px); z-index: 1; pointer-events: none; }
.hr3__head { max-width: 600px; }
.hr3__doors { display: grid; gap: 22px 0; margin-top: clamp(12px, 1.6vw, 20px); }
@media (min-width: 900px) { .hr3__doors { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); } .hr3__door--school { padding-left: clamp(24px, 3.4vw, 52px); border-left: 3px dotted var(--brand); } .hr3__door--parent { padding-right: clamp(20px, 3vw, 44px); } }
.hr3__door h2 { font-size: 1.25rem; margin: 0 0 6px; text-decoration: underline wavy var(--brand) 2px; text-underline-offset: 7px; display: inline-block; }
.hr3__door > p { margin: 6px 0 0; font-size: .9rem; color: var(--ink-soft); max-width: 50ch; line-height: 1.55; }
.hr3__stickers { list-style: none; display: flex; flex-wrap: wrap; gap: 8px clamp(16px, 2.4vw, 32px); margin: 12px 0 0; padding: 0; }
.hr3__stickers .hr-sticker { width: 84px; }
.hr3__stickers a { display: grid; justify-items: center; gap: 2px; text-align: center; color: var(--ink); text-decoration: none; width: 112px; }
.hr3__stickers strong { font-family: var(--font-head); font-size: .88rem; margin-top: 5px; line-height: 1.15; }
.hr3__stickers em { font-style: normal; font-size: .74rem; color: var(--ink-soft); }
.hr3__stickers li:nth-child(1) .hr-sticker { background: var(--sage-deep); transform: rotate(-6deg); }
.hr3__stickers li:nth-child(2) .hr-sticker { background: var(--accent-sun); color: var(--ink); transform: rotate(4deg); }
.hr3__stickers li:nth-child(3) .hr-sticker { background: var(--brand); transform: rotate(-3deg); }
.hr3__stickers a:hover .hr-sticker { transform: rotate(0) scale(1.05); }
.hr3__stickers .hr-sticker { transition: transform var(--fast, .2s) var(--ease); }
.hr3__foot { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin-top: 12px; }
.hr--3 .hr-facts { color: var(--ink-soft); }
.hr--3 .hr-facts--big { margin-top: 14px; }
.hr--3 .hr-facts--big .hr-fact__n { font-size: clamp(2.2rem, 3.4vw, 2.9rem); }
.hr--3 .hr-facts--big .hr-fact:first-child { padding-left: 0; }
@media (max-width: 899px) { .hr3__scene { display: none; } }

/* ==========================================================================
   PAGE HEROES (About, Contact, For Schools: .ph; Programs, Blog: CSS only)
   ========================================================================== */
html .page-hero.ph {
  position: relative; overflow: hidden; isolation: isolate; text-align: left; border-radius: 0;
  padding-block: clamp(32px, 3.6vw, 48px) clamp(44px, 5.4vw, 72px);
}
html .page-hero.ph::after { content: none; }
html .page-hero.ph .wrap { position: relative; z-index: 2; }
.ph__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
html .page-hero.ph .breadcrumb { justify-content: flex-start; margin-bottom: 12px; }
.ph__grid { display: grid; gap: 26px clamp(28px, 4vw, 60px); align-items: center; }
@media (min-width: 900px) { .ph__grid { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); } }
html .page-hero.ph h1 { font-size: clamp(1.8rem, 2.7vw, 2.3rem); line-height: 1.14; letter-spacing: -.02em; margin: 0 0 14px; text-wrap: balance; }
html .page-hero.ph .ph__lead { font-size: 1rem; line-height: 1.6; max-width: 58ch; margin: 0; }
.ph__copy { max-width: 640px; }
.ph__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
html .page-hero.ph .btn { min-height: 42px; padding: 9px 20px; font-size: .92rem; }
.ph__side { position: relative; }
.ph__data { list-style: none; margin: 0; padding: 0; }
.ph__data > li > a { color: inherit; text-decoration: none; display: contents; }
.ph__data > li:has(> a):hover b { text-decoration: underline; text-underline-offset: 4px; }
.ph__data > li:has(> a:focus-visible) { outline: 2px solid var(--brand); outline-offset: 4px; }
.ph__data b { font-family: var(--font-head); font-weight: 800; letter-spacing: -.02em; line-height: 1; overflow-wrap: anywhere; }
.ph__data span { font-size: .86rem; line-height: 1.25; }

/* ---- 1: Numbers on a path. Sage ground with cut-paper shapes; the page's
   numbers sit along a dotted, hand-drawn curve. ---- */
html .page-hero.ph.ph--1 { color: var(--ink); }
html .page-hero.ph.ph--1 .ph__lead { color: var(--ink-soft); }
html .page-hero.ph:is(.ph--1, .ph--3) :is(h1, .breadcrumb, .breadcrumb a, .breadcrumb [data-crumb]) { color: var(--ink); }
html .page-hero.ph:is(.ph--1, .ph--3) .breadcrumb { color: var(--ink-soft); }
html .page-hero.ph.ph--1::before { content: none; }
.hs-curve { position: absolute; inset: -6px 0 -6px 0; width: 100%; height: calc(100% + 12px); pointer-events: none; }
html .page-hero.ph.ph--1 .ph__data { position: relative; display: grid; gap: clamp(10px, 1.6vw, 18px); }
html .page-hero.ph.ph--1 .ph__data > li { display: flex; align-items: baseline; gap: 10px; max-width: 78%; }
html .page-hero.ph.ph--1 .ph__data > li:nth-child(odd) { justify-self: start; margin-left: 4%; }
html .page-hero.ph.ph--1 .ph__data > li:nth-child(even) { justify-self: end; margin-right: 2%; }
html .page-hero.ph.ph--1 .ph__data b { font-size: clamp(2rem, 3.3vw, 2.8rem); color: var(--brand-dark); background: var(--canvas-2); padding: 2px 8px; border-radius: var(--r-sm); margin-left: -8px; }
html .page-hero.ph.ph--1 .ph__data .is-text b { font-size: 1.05rem; font-weight: 700; color: var(--ink); }
html .page-hero.ph.ph--1 .ph__data span { color: var(--ink); background: var(--canvas-2); padding: 2px 4px; }
@media (max-width: 899px) {
  .hs-curve { display: none; }
  html .page-hero.ph.ph--1 .ph__data { grid-template-columns: 1fr 1fr; gap: 12px 18px; }
  html .page-hero.ph.ph--1 .ph__data > li { max-width: none; justify-self: start !important; margin: 0 !important; flex-direction: column; gap: 2px; }
  html .page-hero.ph.ph--1 .ph__data b { margin-left: 0; padding: 0; background: none; }
  html .page-hero.ph.ph--1 .ph__data span { padding: 0; background: none; }
}


/* ---- 3: Stickers + scene. Gold ground, a classroom window scene, the numbers
   as round stickers (ribbon tags for e-mail and phone). ---- */
html .page-hero.ph.ph--3 { color: var(--ink); }
html .page-hero.ph.ph--3::before { content: none; }
html .page-hero.ph.ph--3 .ph__lead { color: var(--ink-soft); }
html .page-hero.ph.ph--3 .ph__side { aspect-ratio: 560 / 400; width: 100%; max-width: 500px; margin-left: auto; }
.ph__scene { position: absolute; inset: 0; width: 100%; height: 100%; }
html .page-hero.ph.ph--3 .ph__data > li { position: absolute; display: grid; place-content: center; justify-items: center; text-align: center; width: clamp(88px, 9vw, 108px); aspect-ratio: 1; border-radius: 50%; background: var(--sage-deep); color: #fff; border: 3px solid #fff; box-shadow: 0 6px 16px rgba(60, 30, 10, .2); padding: 6px; transform: rotate(-6deg); }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(1) { left: -3%; top: 4%; }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(2) { right: -3%; top: -6%; background: var(--brand); transform: rotate(5deg); }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(3) { left: 8%; bottom: -8%; background: var(--accent-sun); color: var(--ink); transform: rotate(3deg); }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(4) { right: 3%; bottom: -2%; background: var(--sage-deep); transform: rotate(-4deg); }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(5) { left: 42%; top: 40%; background: var(--brand); transform: rotate(6deg); }
html .page-hero.ph.ph--3 .ph__data b { font-size: clamp(1.1rem, 1.8vw, 1.5rem); }
html .page-hero.ph.ph--3 .ph__data span { font-size: .66rem; font-weight: 600; max-width: 12ch; }
html .page-hero.ph.ph--3 .ph__data > li.is-text { border-radius: var(--r-sm); width: auto; aspect-ratio: auto; padding: 8px 22px 8px 14px; background: var(--brand); color: #fff; border: 0; clip-path: polygon(0 0, 100% 0, calc(100% - 12px) 50%, 100% 100%, 0 100%); box-shadow: none; justify-items: start; text-align: left; place-content: center start; }
html .page-hero.ph.ph--3 .ph__data > li.is-text:nth-child(3) { background: var(--sage-deep); bottom: 4%; left: 6%; }
html .page-hero.ph.ph--3 .ph__data > li.is-text:nth-child(2) { top: 0; right: -2%; }
html .page-hero.ph.ph--3 .ph__data > li.is-text:nth-child(4) { bottom: 8%; right: 0; background: var(--sage-deep); }
html .page-hero.ph.ph--3 .ph__data > li.is-text b { font-size: .9rem; font-weight: 700; overflow-wrap: anywhere; }
html .page-hero.ph.ph--3 .ph__data > li.is-text span { font-size: .68rem; max-width: none; }
@media (max-width: 899px) {
  html .page-hero.ph.ph--3 .ph__side { aspect-ratio: auto; max-width: none; }
  .ph__scene { display: none; }
  html .page-hero.ph.ph--3 .ph__data { display: flex; flex-wrap: wrap; gap: 12px 14px; }
  html .page-hero.ph.ph--3 .ph__data > li { position: static; transform: none; width: 92px; }
  html .page-hero.ph.ph--3 .ph__data > li.is-text { width: auto; }
}

/* ---- Programs (.listing-hero) and Blog (.page-hero): CSS only. Same three
   looks over the page's own markup; the counts are set as open numerals. ---- */
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) { position: relative; overflow: hidden; isolation: isolate; border-radius: 0; text-align: left; padding-block: clamp(32px, 3.6vw, 48px) clamp(44px, 5.4vw, 72px); }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))::after { content: none; }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) .eyebrow { display: none; }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) :is(.split-hero__copy, .page-hero__inner) { background: none; box-shadow: none; border-radius: 0; padding: 0; border: 0; backdrop-filter: none; }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) .breadcrumb { justify-content: flex-start; }
html[data-o-hero-page] .page-hero:not(.ph) .page-hero__inner { margin-inline: 0; max-width: 680px; }
html[data-o-hero-page] .page-hero:not(.ph) p { margin-inline: 0; }
html[data-o-hero-page] :is(.listing-hero h1, .page-hero:not(.ph) h1) { font-size: clamp(1.8rem, 2.7vw, 2.3rem); line-height: 1.14; letter-spacing: -.02em; margin-bottom: 8px; text-wrap: balance; }
html[data-o-hero-page] .listing-hero .split-hero__facts,
html[data-o-hero-page] .page-hero .ph-facts { display: flex; flex-wrap: wrap; align-items: baseline; gap: 12px 0; list-style: none; margin: 18px 0 0; padding: 0; background: none; border: 0; box-shadow: none; }
html[data-o-hero-page] .listing-hero .split-hero__facts li,
html[data-o-hero-page] .page-hero .ph-facts li { display: inline-flex; align-items: baseline; gap: 8px; padding: 0 clamp(14px, 2.2vw, 28px); border-left: 2px dotted currentColor; background: none; font-size: .9rem; }
html[data-o-hero-page] .listing-hero .split-hero__facts li:first-child,
html[data-o-hero-page] .page-hero .ph-facts li:first-child { padding-left: 0; border-left: 0; }
html[data-o-hero-page] .listing-hero .split-hero__facts svg { display: none; }
html[data-o-hero-page] :is(.listing-hero .ph-n, .page-hero .ph-facts b) { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.9rem, 3vw, 2.6rem); line-height: 1; letter-spacing: -.02em; }
html[data-o-hero-page] .page-hero:not(.ph) .ph-facts { display: flex; }
.page-hero .ph-facts { display: none; }


/* 3: gold, the classroom window scene, facts as round stickers */
html[data-o-hero-page="3"] :is(.listing-hero, .page-hero:not(.ph)) .photo-band { display: none; }
html[data-o-hero-page="3"] :is(.listing-hero, .page-hero:not(.ph))::before { content: none; }
html[data-o-hero-page="3"] .listing-hero .split-hero__facts li, html[data-o-hero-page="3"] .page-hero .ph-facts li {
  flex-direction: column; justify-content: center; align-items: center; text-align: center; gap: 2px;
  width: 92px; aspect-ratio: 1; border: 3px solid #fff; border-radius: 50%; padding: 6px; margin-right: 14px;
  background: var(--sage-deep); color: #fff; font-size: .68rem; font-weight: 600; line-height: 1.1; box-shadow: 0 6px 16px rgba(60, 30, 10, .2); transform: rotate(-5deg);
}
html[data-o-hero-page="3"] .listing-hero .split-hero__facts li:nth-child(2), html[data-o-hero-page="3"] .page-hero .ph-facts li:nth-child(2) { background: var(--brand); transform: rotate(4deg); }
html[data-o-hero-page="3"] .listing-hero .split-hero__facts li:nth-child(3), html[data-o-hero-page="3"] .page-hero .ph-facts li:nth-child(3) { background: var(--accent-sun); color: var(--ink); transform: rotate(-3deg); }
html[data-o-hero-page="3"] .page-hero .ph-facts li:nth-child(4) { background: var(--sage-deep); transform: rotate(5deg); }
html[data-o-hero-page="3"] :is(.listing-hero .ph-n, .page-hero .ph-facts b) { font-size: 1.35rem; }
html[data-o-hero-page="3"] .listing-hero .split-hero__facts li:first-child, html[data-o-hero-page="3"] .page-hero .ph-facts li:first-child { padding: 6px; }

/* ==========================================================================
   PROGRAM HERO (single-mm_class.php, entries 1 to 3)
   ========================================================================== */
.mp-hero.hp { position: relative; overflow: hidden; isolation: isolate; padding: 10px 0 clamp(44px, 5.4vw, 72px); }
.hp .wrap { position: relative; z-index: 2; }
.hp__art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hp .breadcrumb { margin-bottom: 10px; }
.hp__grid { display: grid; gap: clamp(20px, 3vw, 40px); align-items: center; }
@media (min-width: 900px) { .hp__grid { grid-template-columns: minmax(0, 1.1fr) minmax(300px, .9fr); } }
.hp img { display: block; width: 100%; height: 100%; object-fit: cover; }
.hp .tag-pill { background: rgba(255, 255, 255, .85); }

/* Open facts */
.hp-facts { margin: clamp(16px, 2.4vw, 28px) 0 0; display: flex; flex-wrap: wrap; gap: 16px 0; align-items: flex-start; }
.hp-f { padding: 0 clamp(14px, 2.2vw, 30px); border-left: 2px dotted currentColor; flex: 0 1 auto; }
.hp-f--when { flex: none; }
.hp-f:first-child { padding-left: 0; border-left: 0; }
.hp-f dt { font-family: var(--font-head); font-size: .8rem; font-weight: 700; opacity: .9; margin-bottom: 6px; }
.hp-f dd { margin: 0; display: grid; gap: 6px; justify-items: start; font-size: .9rem; }
.hp-f dd b { font-family: var(--font-head); font-weight: 800; font-size: clamp(1.25rem, 1.9vw, 1.65rem); line-height: 1.1; letter-spacing: -.02em; }
.hp-f dd small { font-size: .8rem; opacity: .85; }
.hp-f .mp-price b { font-size: clamp(1.5rem, 2.4vw, 2.1rem); color: inherit; }
.hp-f .mp-price small { color: inherit; opacity: .85; }
.hp-ruler { position: relative; display: block; width: min(250px, 60vw); height: 28px; }
.hp-ruler__line { position: absolute; left: 0; right: 0; top: 5px; height: 3px; border-radius: 3px; background: currentColor; opacity: .3; }
.hp-ruler i { position: absolute; top: 3px; width: 1px; height: 8px; background: currentColor; opacity: .55; }
.hp-ruler i span { position: absolute; top: 11px; left: 50%; transform: translateX(-50%); font-size: .68rem; font-style: normal; line-height: 1; opacity: .9; }
.hp-ruler__on { position: absolute; top: 1px; height: 11px; border-radius: 99px; background: var(--brand); box-shadow: 0 0 0 2px rgba(255, 255, 255, .85); }
.hp-week { list-style: none; margin: 0; padding: 0; display: flex; gap: 6px; flex-wrap: nowrap; }
@media (max-width: 480px) { .hp-week { flex-wrap: wrap; } }
.hp-week li { flex: none; display: grid; justify-items: center; gap: 2px; }
.hp :is(.hp-f dd, .hp3__when) .hp-week b { line-height: 1; letter-spacing: 0; text-shadow: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px dashed currentColor; font-family: var(--font-head); font-size: .66rem; font-weight: 700; opacity: .55; }
.hp :is(.hp-f dd, .hp3__when) .hp-week .is-on b { opacity: 1; border: 1.5px solid #fff; background: var(--brand); color: #fff; box-shadow: 0 4px 10px rgba(188, 90, 27, .3); }
.hp-week span { font-size: .64rem; line-height: 1; min-height: .64rem; }
.hp-note { font-size: .82rem; opacity: .9; max-width: 28ch; line-height: 1.35; margin-top: 4px; display: block; }
.hp-week .u-sr-only, .hp-week em { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.hp-dots { display: inline-grid; grid-template-columns: repeat(6, 9px); gap: 4px; }
.hp-dots i { width: 9px; height: 9px; border-radius: 50%; background: var(--sage-deep); }

.hp1__photo { position: relative; max-width: 440px; width: 100%; justify-self: center; }
.hp1__frame { aspect-ratio: 16 / 11; overflow: hidden; border: 5px solid #fff; border-radius: 58% 42% 52% 48% / 46% 54% 46% 54%; box-shadow: 0 10px 26px rgba(60, 30, 10, .16); background: var(--sage-tint); }
.hp1__scene { width: 100%; height: auto; }
.hp1__crane { position: absolute; left: -20px; bottom: -12px; width: 66px; height: auto; transform: rotate(-8deg); }


/* 3: arch picture with stickers, gold ground */
.hp3__when { margin: 12px 0 0; }
.hp3__where { display: flex; align-items: center; gap: 6px; margin: 10px 0 0; font-weight: 600; color: var(--ink-soft); }
.hp3__where svg { width: 16px; height: 16px; color: var(--sage-deep); flex: none; }
.hp3__pic { position: relative; max-width: 420px; width: 100%; justify-self: center; padding: 0 14px 14px; }
.hp3__arch { aspect-ratio: 4 / 4.4; overflow: hidden; border: 5px solid #fff; border-radius: 999px 999px var(--r-xl) var(--r-xl); box-shadow: 0 10px 26px rgba(60, 30, 10, .16); background: var(--sage-tint); }
.hp3__arch .hp3__scene { width: 100%; height: 100%; object-fit: cover; }
.hp3__st { position: absolute; }
.hp3__st--age { left: -4px; top: 18%; background: var(--brand); transform: rotate(-7deg); }
.hp3__st--cap { right: -6px; top: 8%; background: var(--sage-deep); transform: rotate(6deg); }
.hp3__st--price { right: 4px; bottom: -4px; background: var(--accent-sun); color: var(--ink); transform: rotate(-4deg); }
.hp3__st--price b { font-size: 1.1rem; }
@media (max-width: 899px) {
  .hp3__arch { aspect-ratio: 16 / 10; border-radius: 999px 999px var(--r-lg) var(--r-lg); }
}

@media (max-width: 700px) {
  .hp-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 14px; }
  .hp-f { padding: 0; border-left: 0; }
  .hp-f--when { grid-column: 1 / -1; order: 5; }
  .hr-facts { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  .hr-fact { padding: 0; border-left: 0; }
}


@media (max-width: 700px) {
  .hr-fact { flex-direction: column; align-items: flex-start; gap: 2px; }
  .hr-fact__text { max-width: none; }
  .hr-fact--cap { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 10px; }
  .hr3__stickers { gap: 8px 12px; justify-content: space-between; flex-wrap: nowrap; }
  .hr3__stickers a { width: 31%; }
  .hr3__stickers .hr-sticker { width: 80px; }
  .hero.hr--3 .hr-facts--big { grid-template-columns: 1fr 1fr; }
}

/* ==========================================================================
   Hero detail (round 3, calm pass). Picker slot "Hero detail":
     Minimal (default) = headline, one short line, ONE button, at most three
                         open figures.
     Standard          = html[data-o-herodetail="1"], everything the option
                         shows (up to 5-6 items).
   Markup tags: .ph-x = extra (hidden in Minimal), .ph-m = Minimal-only.
   Scoped to the option heroes, so Current is never touched.
   ========================================================================== */
html:not([data-o-herodetail="1"]) :is(.hero.hr, .page-hero.ph, .mp-hero.hp) :is(.ph-x, .mp-actions .btn--secondary, .class-actions__note),
html[data-o-hero-page]:not([data-o-herodetail="1"]) :is(.listing-hero, .page-hero:not(.ph)) .ph-x { display: none !important; }
html[data-o-herodetail="1"] :is(.hero.hr, .page-hero.ph, .mp-hero.hp) .ph-m { display: none !important; }

/* Minimal figures, home option 1: three open figures on the ground, under the copy. */
.hr1__min { margin-top: clamp(14px, 2vw, 24px); padding-bottom: clamp(52px, 6.4vw, 92px); }
.hr1__min .hr-fact__n { font-size: clamp(1.9rem, 3vw, 2.6rem); }
/* Home option 3: the button, then the three figures as round stickers. */
.hr3__min { margin-top: clamp(12px, 1.6vw, 20px); }
.hr3__stickers--min { margin-top: 18px; gap: 8px clamp(18px, 2.6vw, 36px); }
.hr3__stickers--min .hr-sticker { width: clamp(88px, 8vw, 100px); }
.hr3__stickers--min .hr-sticker b { font-size: clamp(1.15rem, 1.8vw, 1.5rem); }
@media (max-width: 700px) {
  .hr3__stickers--min { justify-content: flex-start; gap: 8px 16px; }
  .hr3__stickers--min .hr-sticker { width: 84px; }
  .hr3__stickers--min .hr-sticker b { font-size: 1.1rem; }
}
/* Programs and Blog: the three figures stay in one tidy row. */
html[data-o-hero-page] .listing-hero .split-hero__facts { flex-wrap: wrap; }
/* Program page: a short lead, never a paragraph wall. */
html:not([data-o-herodetail="1"]) .hp .mp-lead { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }

/* Minimal keeps every hero under about 560px at 1440 wide: a little less ground and a smaller picture. */
html:not([data-o-herodetail="1"]) .mp-hero.hp { padding-bottom: clamp(48px, 5.4vw, 72px); }
html:not([data-o-herodetail="1"]) :is(.hp1__photo, .hp3__pic) { max-width: 370px; }
html:not([data-o-herodetail="1"]) .hero.hr--3 { padding-bottom: clamp(48px, 5.4vw, 72px); }
@media (max-width: 899px) {
  html:not([data-o-herodetail="1"]) .hr1__photo { max-width: 300px; }
}
/* Programs: the "Where we run" panel is a second finder inside the hero; Minimal leaves it to the filter bar below. */
html[data-o-hero-page]:not([data-o-herodetail="1"]) .listing-hero .venue-panel { display: none !important; }

/* Spacing audit: headline to lead line never closer than 14px in any hero option. */
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) :is(.split-hero__copy h1, .page-hero__inner h1) { margin-bottom: 14px; }

/* ==========================================================================
   SLEEK PASS (round 5). Heroes: shorter, smaller type and drawings, and the
   the foot is a 6px stripe bar with a guaranteed clear gap above it:
     padding-bottom = hill height + gap (--hill-h / --hill-gap in 01-calm.css),
   so the last content (link, underline, buttons, figures) never touches them.
   ========================================================================== */

/* Home hero */
html[data-o-calm] .hero.hr { padding-block: clamp(20px, 2.4vw, 30px) 0; }
html[data-o-calm] .hero.hr--1 .hr1__ruler,
html[data-o-calm] .hr1__min { padding-bottom: calc(var(--hill-h) + var(--hill-gap)); margin-top: clamp(12px, 1.4vw, 18px); }
html[data-o-calm] .hero.hr--2 { padding-bottom: 36px; }
html[data-o-calm] .hero.hr--3,
html:not([data-o-herodetail="1"])[data-o-calm] .hero.hr--3 { padding-bottom: calc(var(--hill-h) + var(--hill-gap)); }
html[data-o-calm] .hr .hero__sub { margin-bottom: 14px; font-size: 1rem; }
html[data-o-calm] .hr .hero__title { font-size: clamp(1.7rem, 2.4vw, 2.2rem); }
html[data-o-calm] .hr .btn { min-height: 42px; padding: 9px 20px; }
html[data-o-calm] .hr1__photo { max-width: 340px; }
html[data-o-calm] :where(.hr--1, .hr--3) .hr1__top { gap: 18px; }
@media (min-width: 900px) { html[data-o-calm] .hr--1 .hr1__top { gap: 32px; } }
html[data-o-calm] .hr1__crane { width: 54px; }
html[data-o-calm] .hr1__sticker { width: clamp(72px, 6.4vw, 84px); top: -12px; }
html[data-o-calm] .hr1__big { font-size: clamp(1.4rem, 2.1vw, 1.9rem); }
html[data-o-calm] .hr1__bar { height: calc(4px + var(--n) / var(--max, 9) * 40px); }
html[data-o-calm] .hr-sticker { width: clamp(72px, 6.4vw, 84px); border-width: 2px; }
html[data-o-calm] .hr-sticker b { font-size: clamp(1rem, 1.4vw, 1.2rem); }
html[data-o-calm] .hr-fact__n,
html[data-o-calm] .hr--2 .hr-fact__n,
html[data-o-calm] .hr1__min .hr-fact__n { font-size: clamp(1.4rem, 2vw, 1.85rem); }
html[data-o-calm] .hr--3 .hr-facts--big .hr-fact__n { font-size: clamp(1.5rem, 2.2vw, 1.9rem); }
html[data-o-calm] .hr--2 .hr-facts { margin-top: clamp(14px, 1.8vw, 22px); }
html[data-o-calm] .hr3__scene { width: min(26vw, 320px); top: 6px; }
html[data-o-calm] .hr3__doors { gap: 16px 0; margin-top: 12px; }
html[data-o-calm] .hr3__stickers .hr-sticker,
html[data-o-calm] .hr3__stickers--min .hr-sticker { width: 72px; }
html[data-o-calm] .hr3__stickers a { width: 100px; }
html[data-o-calm] .hr3__stickers, html[data-o-calm] .hr3__foot { margin-top: 10px; }
html[data-o-calm] .hr3__stickers--min { margin-top: 14px; }
html[data-o-calm] .hr3__door h2 { font-size: 1.1rem; }
@media (max-width: 700px) {
  html[data-o-calm] .hr3__stickers .hr-sticker,
  html[data-o-calm] .hr3__stickers--min .hr-sticker { width: 68px; }
  html[data-o-calm] .hr1__photo { max-width: 240px; }
}

/* Page heroes (About, Contact, Schools, Programs, Blog) */
html[data-o-calm] .page-hero.ph,
html[data-o-calm][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) {
  padding-block: clamp(22px, 2.4vw, 30px) calc(var(--hill-h) + var(--hill-gap));
}
html[data-o-calm] .page-hero.ph--2,
html[data-o-calm][data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)) { padding-bottom: 32px; }
html[data-o-calm] .page-hero.ph .breadcrumb,
html[data-o-calm][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) .breadcrumb { margin-bottom: 8px; }
html[data-o-calm] .ph__grid { gap: 18px clamp(24px, 3.2vw, 44px); }
html[data-o-calm] .page-hero.ph h1,
html[data-o-calm][data-o-hero-page] :is(.listing-hero h1, .page-hero:not(.ph) h1) { font-size: clamp(1.7rem, 2.4vw, 2.2rem); margin-bottom: 10px; }
html[data-o-calm] .ph__actions { margin-top: 12px; }
html[data-o-calm] .page-hero.ph .btn { min-height: 40px; padding: 8px 18px; }
html[data-o-calm] .ph__data b { font-size: clamp(1.4rem, 2vw, 1.85rem); }
html[data-o-calm] .page-hero.ph.ph--1 .ph__data b,
html[data-o-calm] .page-hero.ph.ph--2 .ph__data b { font-size: clamp(1.4rem, 2vw, 1.85rem); }
html[data-o-calm] .page-hero.ph.ph--1 .ph__data { gap: clamp(8px, 1.2vw, 14px); }
html[data-o-calm] .page-hero.ph.ph--2 .ph__data { padding-top: 12px; gap: 12px 0; }
html[data-o-calm] .page-hero.ph.ph--3 .ph__side { max-width: 380px; }
html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li { width: clamp(72px, 7vw, 86px); }
html[data-o-calm] .page-hero.ph.ph--3 .ph__data b { font-size: clamp(1rem, 1.5vw, 1.25rem); }
@media (max-width: 899px) {
  html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li { width: 80px; }
}
/* Programs / Blog: facts and scene */
html[data-o-calm][data-o-hero-page] :is(.listing-hero, .page-hero) .split-hero__facts,
html[data-o-calm][data-o-hero-page] .page-hero .ph-facts { margin-top: 12px; }
html[data-o-calm][data-o-hero-page] :is(.listing-hero .ph-n, .page-hero .ph-facts b) { font-size: clamp(1.4rem, 2vw, 1.85rem); }
html[data-o-calm][data-o-hero-page="3"] :is(.listing-hero .ph-n, .page-hero .ph-facts b) { font-size: 1.15rem; }
html[data-o-calm][data-o-hero-page="3"] .listing-hero .split-hero__facts li,
html[data-o-calm][data-o-hero-page="3"] .page-hero .ph-facts li { width: 76px; margin-right: 10px; }
@media (max-width: 899px) {
  html[data-o-calm] .listing-hero .split-hero__facts { gap: 10px 0; }
}

/* Program hero */
html[data-o-calm] .mp-hero.hp,
html[data-o-calm]:not([data-o-herodetail="1"]) .mp-hero.hp { padding: 8px 0 calc(var(--hill-h) + var(--hill-gap)); }
html[data-o-calm] .hp__grid { gap: clamp(16px, 2.4vw, 32px); }
html[data-o-calm] .hp--2.mp-hero { padding-bottom: 32px; }
html[data-o-calm] .hp-facts { margin-top: clamp(12px, 1.6vw, 18px); gap: 12px 0; }
html[data-o-calm] .hp-f dd b { font-size: clamp(1.1rem, 1.5vw, 1.35rem); }
html[data-o-calm] .hp-f .mp-price b { font-size: clamp(1.3rem, 1.8vw, 1.7rem); }
html[data-o-calm] .hp-f dt { margin-bottom: 4px; }
html[data-o-calm] .hp1__photo, html[data-o-calm]:not([data-o-herodetail="1"]) :is(.hp1__photo, .hp3__pic) { max-width: 320px; }
html[data-o-calm] .hp1__crane { width: 52px; }
html[data-o-calm] .hp-week b { width: 32px !important; height: 32px !important; }
html[data-o-calm] .hp3__st { width: 72px; }
@media (max-width: 899px) {
  html[data-o-calm] .hp1__photo, html[data-o-calm] .hp3__pic { max-width: 280px; }
}

/* SLEEK 5b: smaller scene so the copy column is not left floating; clear space above the stripe. */
@media (min-width: 900px) {
  html[data-o-calm] .page-hero.ph.ph--3 .ph__side { max-width: 300px; }
  html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li { width: clamp(64px, 6vw, 74px); }
}
html[data-o-calm] .hr3__scene { width: min(22vw, 260px); }