/* ==========================================================================
   Hero brand pass (design options, local only). Loads after 10 and 11.
   Source: docs/brand-rules.md (Brand Guidelines + Brand Board).

   Every hero option sits on ONE solid brand ground, clearly different from
   the cream header above it and the cream section below it:

     option 1 and 5  pastel grey  #A5C3C2   ink text
     option 2        terracotta   #BC5A1B   white text, photo in a framed picture
     option 3        muted gold   #EFDC95   ink text
     option 4        sage deep    --sage-deep (#3F6664 here)   white text (6.4:1)

   Flat colour only: no gradients, duotones, blends or photo filters. The foot
   of every hero is the brand stripe bar (terracotta | amber | grey thirds,
   6px, on a 3px cream hairline so every third shows on any ground). Primary buttons are solid: terracotta + white on the light grounds,
   amber + ink on terracotta and sage deep. Text colours come from four
   custom properties set with the ground:
     --hg ground   --hf headings / body   --hf2 secondary text   --hn numerals
     --hu decoration (wavy underline)
   Contrast (computed): ink on grey 9:1, ink-soft on grey 6.5:1, ink on gold
   12:1, white on terracotta 4.7:1, white on sage deep 6.4:1, ink on amber 7.3:1.
   ========================================================================== */

:root {
  --o-stripe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 3 3' preserveAspectRatio='none'%3E%3Crect width='3' height='1' fill='%23EFEEE4'/%3E%3Crect y='1' width='1' height='2' fill='%23BC5A1B'/%3E%3Crect x='1' y='1' width='1' height='2' fill='%23EB940E'/%3E%3Crect x='2' y='1' width='1' height='2' fill='%23A5C3C2'/%3E%3C/svg%3E");
  --hx: max(var(--gutter), calc((100% - var(--wrap)) / 2 + var(--gutter)));
}

/* ---- Grounds (custom properties) ----------------------------------------- */
:is(.hr--1, .ph--1, .hp--1, .hr--5, .ph--5, .hp--5, html[data-o-hero-page="1"] :is(.listing-hero, .page-hero:not(.ph)), html[data-o-hero-page="5"] :is(.listing-hero, .page-hero:not(.ph))) {
  --hg: var(--accent-sage); --hf: var(--ink); --hf2: var(--ink-soft); --hn: var(--ink); --hu: var(--brand);
}
:is(.hr--2, .ph--2, .hp--2, html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph))) {
  --hg: var(--brand); --hf: #fff; --hf2: #fff; --hn: #fff; --hu: var(--accent-yellow);
}
:is(.hr--3, .ph--3, .hp--3, html[data-o-hero-page="3"] :is(.listing-hero, .page-hero:not(.ph))) {
  --hg: var(--accent-yellow); --hf: var(--ink); --hf2: var(--ink-soft); --hn: var(--ink); --hu: var(--brand);
}
:is(.hr--4, .ph--4, .hp--4, html[data-o-hero-page="4"] :is(.listing-hero, .page-hero:not(.ph))) {
  --hg: var(--sage-deep); --hf: #fff; --hf2: #fff; --hn: #fff; --hu: var(--accent-yellow);
}

/* ---- Common: ground, stripe, spacing -------------------------------------- */
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) {
  background: var(--o-stripe) left bottom / 100% 9px no-repeat, var(--hg);
  color: var(--hf); border-radius: 0; --hill-h: 9px; --hill-gap: 22px;
}
html .page-hero.ph::before, html .page-hero.ph::after, html .hero.hr::before, html .hero.hr::after, html .mp-hero.hp::before, html .mp-hero.hp::after { content: none; }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))::before { content: none; }
html[data-o-hero-page="5"][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))::before { content: ""; mix-blend-mode: normal; filter: none; -webkit-mask: none; mask: none; transform: none; background-repeat: no-repeat; }
html[data-o-hero-page="5"][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))::after { mix-blend-mode: normal; filter: none; }
html[data-o-hero-page]:is([data-o-hero-page="1"], [data-o-hero-page="3"]) :is(.listing-hero, .page-hero:not(.ph)) > .photo-band { display: none; }

/* ---- Common: text -------------------------------------------------------- */
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(h1, .hero__title) { color: var(--hf); background: none; -webkit-text-fill-color: currentColor; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hero__sub, .ph__lead, .mp-lead, .mp-fine, .partner-note, .split-hero__lead, .split-hero__note, .page-hero__inner > p, .hr3__door > p, .hp3__where, .hr3__stickers em, .hr1__lbl em, .hr1__n, .hr1__age) { color: var(--hf2); opacity: 1; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.breadcrumb, .breadcrumb a, .breadcrumb [data-crumb], .breadcrumb li) { color: var(--hf2); opacity: 1; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .hero__title .grad { color: inherit; background: none; -webkit-text-fill-color: currentColor; text-decoration: underline wavy var(--hu) 2.5px; text-underline-offset: 8px; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hr3__door h2, .hr1__lbl strong, .hr3__stickers strong, .hr-fact__text, .h4-f__l, .ph__data span, .hp-f dd, .hp-f dt) { color: var(--hf); }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hp-f dt, .hp-f dd small, .hp-note, .hp-ruler) { color: var(--hf2); opacity: 1; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hr-fact__n, .hr1__big, .h4-f b, .ph__data b, .listing-hero .ph-n, .page-hero .ph-facts b, .hp-f dd b, .hp-f .mp-price b, .hr-stars) { color: var(--hn); text-shadow: none; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hr-fact__text small, .hp-f .mp-price small) { opacity: 1; color: var(--hf2); }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .hr-dots i { background: var(--hn); }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .hp-dots i { background: var(--hn); }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .hp3__where svg { color: var(--hn); }
html body .hp .tag-pill { background: #fff; color: var(--ink); }

html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.split-hero__facts li, .split-hero__facts span, .ph-facts li, .ph-facts span, .ph-n + span) { color: var(--hf); opacity: 1; }

/* ---- Badge: a stamp (amber, ink text, one line). Home badge, page eyebrow. - */
html body :is(.hero.hr, .page-hero.ph, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hero__badge, .listing-hero .eyebrow, .page-hero:not(.ph) .eyebrow) {
  display: inline-flex; align-items: center; flex-wrap: nowrap; gap: 8px; max-width: 100%; white-space: nowrap;
  min-height: 30px; padding: 4px 14px 4px 4px; margin: 0 0 12px; border: 0; border-radius: 999px;
  background: var(--accent-sun); color: var(--ink); box-shadow: 0 0 0 3px rgba(235, 148, 14, .28); outline: 1.5px dashed rgba(36, 26, 18, .55); outline-offset: -4px;
  font-family: var(--font-head); font-size: .72rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; line-height: 1.1;
  transform: rotate(-1.5deg);
}
html body :is(.hero.hr, .page-hero.ph) .hero__badge .pill { background: var(--ink); color: #fff; padding: 4px 10px; font-size: .68rem; letter-spacing: .06em; border-radius: 999px; }
html body :is(.hero.hr, .page-hero.ph) .hero__badge b { color: var(--ink); }
/* The eyebrow has no pill inside, so equal padding both sides (the badge rule above outranks a plain .eyebrow selector). */
html body :is(.hero.hr, .page-hero.ph, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.listing-hero .eyebrow, .page-hero:not(.ph) .eyebrow) { padding: 4px 14px; }
html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) .eyebrow::before, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) .eyebrow::after { content: none; }
@media (max-width: 420px) {
  html body :is(.hero.hr, .page-hero.ph, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.hero__badge, .listing-hero .eyebrow, .page-hero:not(.ph) .eyebrow) { font-size: .62rem; letter-spacing: .03em; padding-right: 10px; gap: 6px; }
  html body :is(.hero.hr, .page-hero.ph, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.listing-hero .eyebrow, .page-hero:not(.ph) .eyebrow) { padding-inline: 10px; }
}

/* ---- Buttons: always solid, always distinct from the ground ---------------- */
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.btn, .hero__alt, .split-hero__cta) { min-height: 44px; }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.btn--secondary, .btn--line, .btn--ghost, .hero__alt, .split-hero__cta) {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 20px; border: 0; border-radius: 999px; text-decoration: none;
  background: #fff; color: var(--ink); font-family: var(--font-head); font-weight: 600; font-size: .92rem; box-shadow: var(--shadow-xs);
}
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) :is(.btn--secondary, .btn--line, .btn--ghost, .hero__alt, .split-hero__cta):hover { background: var(--canvas-2); color: var(--ink); transform: translateY(-1px); }
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .btn--primary {
  --btn-bg: var(--brand); --btn-fg: #fff; background: var(--brand); color: #fff; box-shadow: var(--shadow-brand);
}
html body :is(.hero.hr, .page-hero.ph, .mp-hero.hp, html[data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph))) .btn--primary:hover { background: var(--brand-dark); color: #fff; }
html body :is(.hr--2, .ph--2, .hp--2, .hr--4, .ph--4, .hp--4, html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)), html[data-o-hero-page="4"] :is(.listing-hero, .page-hero:not(.ph))) .btn--primary {
  --btn-bg: var(--accent-sun); --btn-fg: var(--ink); background: var(--accent-sun); color: var(--ink); box-shadow: 0 8px 20px rgba(36, 26, 18, .22);
}
html body :is(.hr--2, .ph--2, .hp--2, .hr--4, .ph--4, .hp--4, html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)), html[data-o-hero-page="4"] :is(.listing-hero, .page-hero:not(.ph))) .btn--primary:hover { background: var(--accent-yellow); color: var(--ink); }

/* ---- 1: Growing-up path / Numbers on a path (pastel grey) ------------------ */
html body .hr--1 .hr1__bar { background: var(--brand-dark); box-shadow: none; }
html body .hr--1 .hr1__cols > li[data-band="primary"] .hr1__bar { background: #fff; box-shadow: inset 0 0 0 1.5px var(--ink); }
html body .hr--1 .hr1__cols > li[data-band="middle-high"] .hr1__bar { background: var(--ink); }
html body .hr--1 .hr1__bands > li { --c: var(--brand-dark); }
html body .hr--1 .hr1__bands > li[data-band="primary"] { --c: #fff; }
html body .hr--1 .hr1__bands > li[data-band="middle-high"] { --c: var(--ink); }
html[data-o-calm] .hr-sticker.hr1__sticker { width: 88px; }
html[data-o-calm] .hr-sticker.hr1__sticker b { font-size: .8rem; letter-spacing: -.01em; }
html body .hr--1 .hr1__frame, html body .hp--1 .hp1__frame { background: #fff; }
html body .ph--1 .ph__data b, html body .ph--1 .ph__data span { background: var(--canvas-2); }
html body .ph--1 .ph__data .is-text b { color: var(--ink); }

/* ---- 2: terracotta + a framed picture (never text over a photo) ------------- */
html body :is(.hr2__bg, .hp2__bg, .page-hero.ph--2 > .photo-band) {
  display: block; position: absolute; z-index: 1; inset: auto; top: 22px; bottom: 28px; right: var(--hx); left: auto; width: min(38vw, 480px); height: auto;
  border: 4px solid #fff; border-radius: var(--r-xl); overflow: hidden; background: var(--sage-tint); box-shadow: 0 10px 26px rgba(36, 26, 18, .22);
}
html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)) > .photo-band { display: none; }
html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph))::after {
  content: ""; position: absolute; z-index: 1; inset: auto; top: 22px; bottom: 28px; right: var(--hx); left: auto; width: min(38vw, 480px);
  border: 4px solid #fff; border-radius: var(--r-xl); background: var(--o-photo) center 35% / cover no-repeat; box-shadow: 0 10px 26px rgba(36, 26, 18, .22); filter: none;
}
html body :is(.hr2__bg, .hp2__bg, .page-hero.ph--2 > .photo-band) :is(img, svg) { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; filter: none; display: block; }
html body .hr--2 .hr2__copy, html body .hr--2 .hr-facts { max-width: min(640px, 58%); }
html body .hp--2 .hp__copy, html body .ph--2 .ph__copy, html body .ph--2 .ph__side { max-width: min(640px, 56%); }
html body .ph--2 .ph__grid { grid-template-columns: minmax(0, 1fr); }
html[data-o-hero-page="2"] :is(.listing-hero .split-hero__copy, .page-hero:not(.ph) .page-hero__inner) { max-width: min(620px, 56%); }
html body .hp--2 .hp-facts { max-width: min(660px, 58%); }
html body .ph--2 .ph__data { display: flex; flex-wrap: wrap; gap: 14px 0; padding-top: 14px; border-top: 3px dotted #fff; }
html body .ph--2 .ph__data > li { display: flex; align-items: baseline; gap: 10px; padding: 0 clamp(14px, 2.4vw, 30px); border-left: 2px dotted #fff; }
html body .ph--2 .ph__data > li:first-child { padding-left: 0; border-left: 0; }
html body .ph--2 .ph__data .is-text b { font-size: 1.05rem; font-weight: 700; }
html body .ph--2 .ph__data span { max-width: 16ch; }
html body .hr--2 .hr-dots--cap i { background: #fff; }
html body .hp--2 .hp-ruler__on { background: var(--accent-yellow); box-shadow: none; }
@media (max-width: 899px) {
  html body :is(.hr2__bg, .hp2__bg, .page-hero.ph--2 > .photo-band, html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)) > .photo-band), html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph)) > .photo-band { display: none; }
html[data-o-hero-page="2"] :is(.listing-hero, .page-hero:not(.ph))::after { display: none; }
  html body .hr--2 .hr2__copy, html body .hr--2 .hr-facts, html body .hp--2 .hp__copy, html body .ph--2 .ph__copy, html body .ph--2 .ph__side, html body .hp--2 .hp-facts, html[data-o-hero-page="2"] :is(.listing-hero .split-hero__copy, .page-hero:not(.ph) .page-hero__inner) { max-width: none; }
}
@media (max-width: 640px) {
  html body .ph--2 .ph__data { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 12px; }
  html body .ph--2 .ph__data > li { padding: 0; border-left: 0; flex-direction: column; gap: 2px; }
}

/* ---- 3: muted gold, flat window scene, round stickers ----------------------- */
/* Stickers carry their own text colours through the custom properties: white on terracotta and sage deep, ink on amber. */
html body :is(.ph--3 .ph__data > li, .hr3__stickers .hr-sticker, .hp3__st, html[data-o-hero-page="3"] :is(.listing-hero .split-hero__facts li, .page-hero .ph-facts li)) { --hn: #fff; --hf: #fff; --hf2: #fff; color: #fff; }
html body :is(.ph--3 .ph__data > li:nth-child(3):not(.is-text), .hr3__stickers li:nth-child(2) .hr-sticker, .hp3__st--price, html[data-o-hero-page="3"] :is(.listing-hero .split-hero__facts li:nth-child(3), .page-hero .ph-facts li:nth-child(3))) {
  --hn: var(--ink); --hf: var(--ink); --hf2: var(--ink); background: var(--accent-sun); color: var(--ink);
}
html body .hr--3 .hr3__door--school { border-left-color: var(--brand); }
html body .hr-sticker, html body .hr-sticker b, html body .hr-sticker > span { text-shadow: none; }
html[data-o-hero-page="3"][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) {
  background: var(--o-stripe) left bottom / 100% 9px no-repeat, var(--o-scene) right max(var(--gutter), calc(50vw - var(--wrap) / 2 + var(--gutter))) center / min(22vw, 270px) auto no-repeat, var(--hg);
}
html[data-o-herodetail="1"][data-o-hero-page="3"][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) { background: var(--o-stripe) left bottom / 100% 9px no-repeat, var(--hg); }
@media (max-width: 899px) {
  html[data-o-hero-page="3"][data-o-hero-page] :is(.listing-hero, .page-hero:not(.ph)) { background: var(--o-stripe) left bottom / 100% 9px no-repeat, var(--hg); }
}

/* ---- 4: sage deep, cut-outs, solid numerals --------------------------------- */
@media (max-width: 899px) { html body .h4__cut { display: none; } }
html[data-o-calm] .hero.hr.h4 { padding-bottom: calc(var(--hill-h) + var(--hill-gap)); }
html body .h4__copy, html body .h4 .ph__copy { max-width: 720px; }
html body .h4.h4 :is(h1, .hero__title) { font-size: clamp(1.9rem, 2.8vw, 2.5rem); }
html body .h4 .h4-f + .h4-f::before, html[data-o-hero-page="4"] :is(.listing-hero .split-hero__facts, .page-hero .ph-facts) li + li::before { color: var(--accent-yellow); }

/* ---- 5: pastel grey, split photo -------------------------------------------- */
html body .h5 .h4-f + .h4-f::before, html[data-o-hero-page="5"] :is(.listing-hero .split-hero__facts, .page-hero .ph-facts) li + li::before { color: var(--brand-dark); }

/* ---- Hero detail: the venue panel (Programs, Standard) keeps its own white card ---- */
html body .listing-hero .venue-panel, html body .listing-hero .venue-panel :is(h2, h3, p, a, span, li, button) { color: var(--ink); }

/* ---- Program hero: weekday circles, ruler, solid colours -------------------- */
html body .hp :is(.hp-f dd, .hp3__when) .hp-week b { opacity: 1; color: var(--hf2); border: 1.5px dashed var(--hf2); text-shadow: none; }
html body .hp :is(.hp-f dd, .hp3__when) .hp-week .is-on b { background: var(--brand); color: #fff; border: 1.5px solid #fff; box-shadow: 0 4px 10px rgba(36, 26, 18, .22); }
html body :is(.hp--2, .hp--4) :is(.hp-f dd, .hp3__when) .hp-week .is-on b { background: #fff; color: var(--ink); border-color: #fff; box-shadow: none; }
html body .hp .hp-week span { color: var(--hf2); }
html body .hp-ruler i span { opacity: 1; color: var(--hf2); white-space: nowrap; }
html body .hp-ruler i { opacity: 1; background: color-mix(in srgb, currentColor 60%, transparent); }
html body .hp-ruler__line { opacity: .45; }
html body :is(.hp--4) .hp-ruler__on { background: var(--accent-yellow); box-shadow: none; }

html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li.is-text { white-space: nowrap; width: max-content; max-width: 280px; }
html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li.is-text b { overflow-wrap: normal; }
@media (min-width: 900px) {
  html[data-o-calm] .page-hero.ph.ph--3 .ph__side { max-width: 340px; }
  html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li:not(.is-text) { width: clamp(80px, 6.8vw, 92px); }
}
@media (max-width: 899px) { html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li:not(.is-text) { width: 108px; } }
html body .hp3__st--cap > span { white-space: normal; max-width: 9ch; }
@media (max-width: 700px) { html body :is(.hr1__crane, .hp1__crane) { display: none; } }
html[data-o-hero-page="2"] .listing-hero .venue-panel { display: none !important; }
html[data-o-hero-page="2"] .listing-hero .split-hero__grid { grid-template-columns: minmax(0, 1fr); }

/* Stickers fit their words ---------------------------------------------------- */
.hr-sticker b { white-space: nowrap; }
.hp3__st { width: clamp(88px, 8vw, 104px); }
.hp3__st--price b { font-size: 1rem; }
html .page-hero.ph.ph--3 .ph__data > li { width: clamp(100px, 10vw, 118px); padding: 4px; }
html .page-hero.ph.ph--3 .ph__data span { font-size: .66rem; line-height: 1.08; max-width: 12ch; }
html .page-hero.ph.ph--3 .ph__data > li:nth-child(1) { left: -4%; }
@media (max-width: 899px) {
  html .page-hero.ph.ph--3 .ph__data > li { width: 104px; }
}

/* ==========================================================================
   POLISH PASS (all hero options, both detail states)
   ========================================================================== */

/* Figure rows that wrap: a divider (dotted rule or middle dot) never starts a
   line. Every item carries its divider on the left; the row is pulled left by
   one divider and clipped there, so the divider of whichever item starts a
   line is cut away. clip-path keeps shadows and outlines visible elsewhere. */
@media (min-width: 701px) {
  html body :is(.hp-facts, .hr-facts) {
    --dv: clamp(14px, 2.2vw, 30px);
    margin-left: calc(-1 * (var(--dv) + 2px)); clip-path: inset(-60px -60px -60px 4px);
  }
  html body :is(.hp-facts > .hp-f, .hr-facts > .hr-fact),
  html body :is(.hp-facts > .hp-f, .hr-facts > .hr-fact):first-child { padding-inline: var(--dv); border-left: 2px dotted currentColor; }

  html body .h4-line { --sep: 1.6rem; margin-left: calc(-1 * var(--sep)); clip-path: inset(-60px -60px -60px var(--sep)); gap: 4px 0; }
  html body .h4-line > .h4-f { position: relative; padding-left: var(--sep); }
  html body .h4-line > .h4-f::before {
    content: "\00b7"; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    width: var(--sep); margin: 0; text-align: center; font-weight: 800; font-size: 1.5rem; line-height: 1;
  }
  html body .h4 .h4-line > .h4-f::before { color: var(--accent-yellow); }
  html body .h5 .h4-line > .h4-f::before { color: var(--brand-dark); }
}
@media (min-width: 641px) {
  html body .ph--2 .ph__data { --dv: clamp(14px, 2.4vw, 30px); margin-left: calc(-1 * (var(--dv) + 2px)); clip-path: inset(-60px -60px -60px calc(var(--dv) + 2px)); }
  html body .ph--2 .ph__data > li, html body .ph--2 .ph__data > li:first-child { padding: 0 var(--dv); border-left: 2px dotted #fff; }
}
/* A word label next to a text figure ("Where", "Email") never breaks inside. */
.h4-f.is-text .h4-f__l { white-space: nowrap; }

/* Option 4: the paper cut-outs always fit inside the band, above the stripe. */
html body .h4__cut { top: 14px; height: calc(100% - 40px); max-height: 340px; width: auto; max-width: min(32vw, 430px); }

/* Headline to lead: the wavy underline needs its own room. */
html[data-o-calm] body :is(.hero.hr, .page-hero.ph, .mp-hero.hp) :is(.hero__title, h1).hero__title,
html[data-o-calm] body :is(.page-hero.ph, .mp-hero.hp) h1 { margin-bottom: 14px; }
html[data-o-calm] body .hero.hr .hero__title.hero__title { margin-bottom: 16px; }

/* Programs (CSS-only page hero): its one CTA is the primary action, so it is a solid brand button. */
html[data-o-hero-page] body .listing-hero .split-hero__cta.split-hero__cta.split-hero__cta { background: var(--brand); color: #fff; font-weight: 700; box-shadow: var(--shadow-brand); }
html[data-o-hero-page] body .listing-hero .split-hero__cta.split-hero__cta.split-hero__cta:hover { background: var(--brand-dark); color: #fff; }
html[data-o-hero-page]:is([data-o-hero-page="2"], [data-o-hero-page="4"]) body .listing-hero .split-hero__cta.split-hero__cta.split-hero__cta { background: var(--accent-sun); color: var(--ink); box-shadow: 0 8px 20px rgba(36, 26, 18, .22); }
html[data-o-hero-page]:is([data-o-hero-page="2"], [data-o-hero-page="4"]) body .listing-hero .split-hero__cta.split-hero__cta.split-hero__cta:hover { background: var(--accent-yellow); }

/* Home option 3, Minimal: the window scene sits level with the copy, a little larger, so the right half is not empty. */
@media (min-width: 900px) {
  html[data-o-calm]:not([data-o-herodetail="1"]) .hr--3 .hr3__scene { width: min(28vw, 360px); top: 50%; transform: translateY(-54%); }
}

/* Program hero photos: keep the hands and the work in frame, faces out where the photo allows. */
html body :is(.hp1__frame, .hp2__bg, .hp3__arch, .hp.h5 .h5__ph) img[src*="robotics-7"] { object-position: center 88%; }
html body :is(.hp1__frame, .hp2__bg, .hp3__arch, .hp.h5 .h5__ph) img[src*="classroom-1"] { object-position: 30% 70%; }
html body :is(.hp1__frame, .hp2__bg, .hp3__arch, .hp.h5 .h5__ph) img[src*="media-1"] { object-position: center 70%; }

@media (max-width: 899px) {
  /* The trial button stays in the hero on phones (the sticky bar repeats it once the hero has scrolled away). */
  html body.has-sticky-cta .mp-hero.hp .mp-actions .btn--primary { display: inline-flex; }
  /* Option 3 stickers: a tidy row under the arch, never on top of the photo or each other. */
  html body .hp3__pic { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 14px; padding: 0; max-width: 340px; }
  html body .hp3__arch { flex: 0 0 100%; }
  html body .hp3__pic .hp3__st { position: static; inset: auto; margin-top: -26px; }
}
@media (max-width: 700px) {
  /* Program figures: the age ruler gets the full row so its numbers have room. */
  html body .hp-facts > .hp-f--age { grid-column: 1 / -1; }
  html body .hp-ruler { width: min(280px, 100%); }
  /* Home option 1 ruler: the bar heights carry the counts on a phone. */
  html body .hr1__n { visibility: hidden; }
  /* Page hero option 1 and 2: an e-mail or phone number takes its own row and never breaks. */
  html body .ph--1 .ph__data > li.is-text, html body .ph--2 .ph__data > li.is-text { grid-column: 1 / -1; }
  html body :is(.ph--1, .ph--2) .ph__data .is-text b { overflow-wrap: normal; white-space: nowrap; font-size: 1.2rem; }
}
@media (max-width: 899px) {
  /* Page hero option 3 on phones: ribbon tags (e-mail, phone) keep their own height instead of stretching to the stickers' row. */
  html[data-o-calm] .page-hero.ph.ph--3 .ph__data { align-items: center; }
  html[data-o-calm] .page-hero.ph.ph--3 .ph__data > li.is-text { align-self: center; height: auto; min-height: 0; transform: rotate(-2deg); }
}