/* ==========================================================================
   Calm scale: the shared type and density every option builds on.

   Applies whenever the picker is on (html[data-o-calm]); "Show original" in
   the picker removes it. SLEEK pass (round 5): compact, modern marketing-site
   rhythm that is comfortable on a 13" MacBook and on a phone.

   Targets:
     desktop  body 15.5px · h1 <= 2.2rem · section h2 <= 1.7rem · h3 <= 1.1rem
              lead 1.02rem · buttons 44-48px · section padding 32-48px
              heading to content 16-20px · hero bottom <= ~48px
     phone    h1 1.7rem · h2 1.35rem · body .95rem · section padding 32px
   ========================================================================== */

html[data-o-calm] {
  --band:     clamp(32px, 3.4vw, 48px);
  --band-lg:  clamp(36px, 3.8vw, 52px);
  --header-h: 64px;
  /* Hills / curve at the foot of a hero and the clear space kept above them. */
  --hill-h:   clamp(20px, 1.7vw, 26px);
  --hill-gap: 24px;
}
@media (max-width: 899px) {
  /* The site's phone root is 122% (19.5px), so every rem is 30% bigger than on a laptop.
     Calm phones use 106% (17px): rem-based type and gaps come down ~13%. */
  html[data-o-calm] { font-size: 106%; }
  html[data-o-calm] {
    --band:     32px;
    --band-lg:  36px;
    --hill-h:   18px;
    --hill-gap: 20px;
  }
}

@media (min-width: 900px) {
  html[data-o-calm] body { font-size: 16px; line-height: 1.6; }
}

/* Page titles: one scale for every template. */
html[data-o-calm] .hero__title,
html[data-o-calm] .page-hero h1,
html[data-o-calm] .listing-hero h1,
html[data-o-calm] .detail-hero h1,
html[data-o-calm] .split-hero h1,
html[data-o-calm] .split-hero__copy h1 {
  font-size: clamp(1.9rem, 2.8vw, 2.5rem);
  line-height: 1.14;
  letter-spacing: -0.02em;
}
html[data-o-calm] .hero__sub,
html[data-o-calm] .split-hero__lead,
html[data-o-calm] .page-hero__lead,
html[data-o-calm] .page-hero p,
html[data-o-calm] .detail-hero__lead { font-size: 1rem; line-height: 1.58; }

/* Section titles and their sub line: 1.35rem phone to 1.7rem desktop. */
html[data-o-calm] .section-title,
html[data-o-calm] :is(.safety-band, .catalog__copy, .safety__copy) h2,
html[data-o-calm] .form-card h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); line-height: 1.18; margin-bottom: 6px; }
html[data-o-calm] .section-sub   { font-size: .96rem; line-height: 1.55; }
html[data-o-calm] .section-head  { margin-bottom: clamp(16px, 1.8vw, 22px); }
html[data-o-calm] h3 { line-height: 1.22; }
html[data-o-calm] main :is(.value-card__body h3, .session-tl__copy h3, .teacher-card h3, .booking__title, .program-panel h3) { font-size: 1.1rem; }
html[data-o-calm] .booking-band__head h2 { font-size: clamp(1.35rem, 1.9vw, 1.7rem); }

/* Big numerals: calm, never a shout. */
html[data-o-calm] .split-hero__stats b { font-size: 1.7rem; }
html[data-o-calm] .story__badge b { font-size: 1.6rem; }
html[data-o-calm] .program-panel__figure b { font-size: 1.6rem; }
html[data-o-calm] .session-tl__num { font-size: 2rem; }
html[data-o-calm] .session-tl__panel { padding: 16px 20px; gap: 16px; grid-template-columns: 64px minmax(0, 1fr) auto; margin-top: 14px; }

/* Controls. */
/* Brand rule: every CTA is a solid button at least 44px tall. */
html[data-o-calm] .btn     { min-height: 44px; padding: 9px 20px; font-size: .92rem; }
html[data-o-calm] .btn--lg { min-height: 48px; padding: 11px 24px; font-size: .95rem; }
html[data-o-calm] .btn--sm { min-height: 40px; padding: 7px 15px; font-size: .86rem; }

/* Phone: the same scale, one notch smaller. */
@media (max-width: 899px) {
  html[data-o-calm] body { font-size: 15.2px; line-height: 1.58; }
  html[data-o-calm] .hero__sub,
  html[data-o-calm] .split-hero__lead,
  html[data-o-calm] .page-hero__lead,
  html[data-o-calm] .page-hero p,
  html[data-o-calm] .detail-hero__lead { font-size: .97rem; }
  html[data-o-calm] .section-sub { font-size: .94rem; }
  html[data-o-calm] .section-head { margin-bottom: 16px; }
  html[data-o-calm] .section-foot { margin-top: 20px; }
}

/* ==========================================================================
   Spacing audit (vertical rhythm). Applies to Current and every option.
   Sections 32-48 desktop / 32 phone; heading to content 16-20; never under
   12 between distinct text blocks.
   ========================================================================== */
html[data-o-calm] .trust--facts { padding-block: clamp(24px, 2.2vw, 30px); }
html[data-o-calm] .trust__fact > * + * { margin-top: 3px; }
html[data-o-calm] .why h3 { margin-bottom: 6px; }
html[data-o-calm] .catalog-band { padding-bottom: var(--band); }
html[data-o-calm] .mm-page-contact main > section[style*="padding-top"] { padding-top: clamp(28px, 3.4vw, 40px) !important; }
html[data-o-calm] .section.facts-band,
html[data-o-calm] .section.outcomes { padding-block: var(--band); }
html[data-o-calm] .partners { padding-block: var(--band); }
html[data-o-calm] .partners .section-head { margin-bottom: 18px; }
html[data-o-calm] .section--listing { padding-top: clamp(22px, 2.6vw, 32px); }
html[data-o-calm] .listing-hero { padding-block: clamp(32px, 3.4vw, 44px) clamp(36px, 3.8vw, 48px); }
@media (max-width: 899px) {
  html[data-o-calm] .facts-band,
  html[data-o-calm] .post-band { padding-block: 28px; }
  html[data-o-calm] .section--listing { padding-top: 24px; }
  html[data-o-calm] .listing-hero { padding-block: 26px 30px; }
}
/* The "Placed by the teacher" closing note under the Current levels list (16px grid gap + 12px). */
html[data-o-calm] .levels-band .level-list__item--note { margin-top: 12px; }

/* Closing CTA (Current): a slim terracotta band, not a billboard. */
html[data-o-calm] .cta-strip__box { padding: clamp(28px, 3.2vw, 40px) var(--gutter); }
html[data-o-calm] .cta-strip h2 { font-size: clamp(1.35rem, 2vw, 1.75rem); margin-bottom: 8px; }
html[data-o-calm] .cta-strip p { margin-bottom: 18px; font-size: .97rem; }
html[data-o-calm] .cta-strip__eyebrow { margin-bottom: 10px; padding: 5px 13px 5px 11px; font-size: .8rem; }
html[data-o-calm] .cta-strip__points { margin-top: 14px; }
html[data-o-calm] .cta-strip__alt { margin-top: 12px; }

/* Footer (Current) a little lighter. */
html[data-o-calm] .site-footer { padding-block: clamp(28px, 3vw, 40px) 14px; }

/* Cards: 16-20px inner padding. */
html[data-o-calm] :is(.form-card, .teacher-card, .booking__summary, .value-card__body) { padding-block: clamp(16px, 1.6vw, 20px); }
html[data-o-calm] .section-foot { margin-top: clamp(20px, 2.4vw, 28px); }

/* ==========================================================================
   SLEEK PASS 5b: the original (Current) components, compacted.
   Rhythm: sections 32-44px, hero bottoms <= 40px, heading to content 16-20,
   cards 16-20px inner padding, smaller photos and note cards. Every rule is
   scoped to the Current class names, so option markup keeps its own values.
   ========================================================================== */
html[data-o-calm] { --sec: clamp(32px, 3.1vw, 44px); }
@media (max-width: 899px) { html[data-o-calm] { --sec: 30px; } }

/* Bands that used the 48-56px token. */
html[data-o-calm] :is(.section, .testimonials, .safety-band, .partners, .faq-band, .levels-band, .join-band, .session-band, .booking-band, .siblings-band, .outcomes, .facts-band, .post-band):not([class*="mmo-"]):not(.cta-strip):not(.cta-o) {
  padding-block: var(--sec);
}
html[data-o-calm] .booking-band { padding-block: var(--sec); }
html[data-o-calm] .section-head { margin-bottom: clamp(16px, 1.6vw, 20px); }

/* Home hero (Current). Heroes keep room to breathe: about three quarters of the live padding. */
html[data-o-calm] .hero:not(.hr) { min-height: 0; padding-block: clamp(32px, 3.6vw, 48px) clamp(44px, 4.6vw, 60px); }
html[data-o-calm] .hero:not(.hr) .hero__grid { min-height: 0; gap: clamp(20px, 3vw, 40px); }
html[data-o-calm] .hero:not(.hr) .hero__photo { width: 100%; max-width: 340px; margin-inline: auto; justify-self: center; }
html[data-o-calm] .hero:not(.hr) .hero__title { margin-bottom: 12px; }
html[data-o-calm] .hero:not(.hr) .hero__sub { margin-bottom: 16px; }
html[data-o-calm] .hero:not(.hr) .hero__card { padding: 10px 14px; }
html[data-o-calm] .trust--facts { padding-block: 22px; }
html[data-o-calm] .partners__mark { height: 44px; width: auto; max-width: 128px; }
html[data-o-calm] .trust .partners__row, html[data-o-calm] .trust__logos { margin-top: 14px; }

/* "Why" split: a smaller photo. */
html[data-o-calm] .why--split .why__media { width: 100%; max-width: 340px; justify-self: center; }
html[data-o-calm] .why--split .why__point { padding-block: 8px; }
html[data-o-calm] .why--split .why__points { gap: 4px; }

/* Class cards on the home carousel. */
html[data-o-calm] .class-card__media, html[data-o-calm] .class-card__img { max-height: 120px; }
html[data-o-calm] .class-card__body { padding: 14px 16px 6px; }
html[data-o-calm] .class-card__foot { padding: 6px 16px 14px; }

/* Sticky-note testimonials: shorter notes. */
html[data-o-calm] .note-card__note { min-height: 0; padding: 38px 26px 22px; }
html[data-o-calm] .note-card__tilt { min-height: 0; }
html[data-o-calm] .note-card__note p, html[data-o-calm] .note-card__note blockquote { font-size: .98rem; line-height: 1.5; }
html[data-o-calm] .testi-carousel__nav { margin-top: 18px; }

/* Safety band (Current photo version). */
html[data-o-calm] .safety__media, html[data-o-calm] .safety__frame { max-height: 240px; }
html[data-o-calm] .safety__row { padding-block: 10px; }
html[data-o-calm] .safety__list { gap: 10px; }

/* Partners strip. */
html[data-o-calm] .partners__row { padding: 18px 24px; gap: 14px 28px; }
html[data-o-calm] .partners > .wrap > :nth-child(2) { padding: 18px 28px; }

/* Teacher and collaborator carousel cards: portraits stay readable at ~190px. */
html[data-o-calm] .collab-card { padding: 10px 10px 14px; gap: 8px; }
html[data-o-calm] .collab-card__photo { aspect-ratio: 4 / 3; max-height: 196px; }
html[data-o-calm] .collab-card__bio { -webkit-line-clamp: 3; }

/* Blog cards. */
html[data-o-calm] .blog-card { padding: 10px; }
html[data-o-calm] .blog-card__media { aspect-ratio: 16 / 9; height: auto; max-height: 170px; }
html[data-o-calm] .blog-card__body { padding-block: 10px 4px; }

/* Closing CTA band. */
html[data-o-calm] .cta-strip__inner { margin-block: 0; }

/* Footer: compact (about 320px at 1440). */
html[data-o-calm] .site-footer { padding-block: 20px 10px; }
html[data-o-calm] .footer__newsletter { margin-bottom: 16px; padding-bottom: 14px; }
html[data-o-calm] .footer__newsletter h3 { font-size: 1.05rem; }
html[data-o-calm] .footer__newsletter-note { margin-top: 6px; }
html[data-o-calm] .footer__grid { padding-block: 0; }
html[data-o-calm] .footer__col h4 { margin-bottom: 8px; }
html[data-o-calm] .footer__col li { margin: 0 0 4px; line-height: 1.35; }
html[data-o-calm] .site-footer__blurb { margin-top: 8px; }
@media (min-width: 900px) {
  html[data-o-calm] .footer__col:not(.footer__col--programs) ul { display: grid; grid-template-columns: repeat(2, auto); gap: 0 28px; justify-content: start; }
}

/* Page heroes (Current): photo bands, split heroes, facts panel. */
html[data-o-calm] .page-hero--photo:not(.ph) { padding-block: clamp(32px, 3.4vw, 46px) clamp(36px, 3.8vw, 50px); }
html[data-o-calm] .page-hero--split.page-hero--photo:not(.ph) { padding-block: clamp(32px, 3.4vw, 46px) clamp(36px, 3.8vw, 50px); }
html[data-o-calm] .page-hero__inner { padding: 22px 32px; }
html[data-o-calm] .split-hero__copy { padding: 24px 30px; }
html[data-o-calm] .split-hero__stats { margin-top: 16px; }
html[data-o-calm] .split-hero__actions { margin-top: 14px; gap: 10px; }
html[data-o-calm] .facts-panel { padding: 16px 20px 12px; }
html[data-o-calm] .facts-panel__list > * { padding-block: 10px; }
html[data-o-calm] .listing-hero .split-hero__copy { padding: 22px 28px; }

/* Schools Current. */
html[data-o-calm] .case-card { padding: 20px 22px; }
html[data-o-calm] .programs-pills__card { padding: 18px 22px; }
html[data-o-calm] .feature-card { padding: 18px 20px; }
html[data-o-calm] .catalog__aside { padding: 28px; }

/* About Current: story photo, values rail, team grid. */
html[data-o-calm]:not([data-o-about-story]) .story__media { width: 100%; max-width: 340px; justify-self: center; }
html[data-o-calm] .story__copy p { font-size: .98rem; margin-bottom: 12px; }
html[data-o-calm] .team-section { margin-bottom: 24px; }
html[data-o-calm] .team-card__photo { aspect-ratio: 5 / 4; max-height: 210px; }
html[data-o-calm] .team-card__body { padding: 14px 16px 16px; }
html[data-o-calm] .team-card h3, html[data-o-calm] .team-card h4 { font-size: 1.05rem; margin-bottom: 6px; }
html[data-o-calm] .team-grid { gap: 16px; }
html[data-o-calm] .value-card__photo { max-height: 190px; }

/* Contact Current. */
html[data-o-calm] .contact-row { margin-bottom: 20px; }
html[data-o-calm] .form-card { padding: 20px 28px; }
html[data-o-calm] .field { margin-bottom: 12px; }
html[data-o-calm] .field input, html[data-o-calm] .field select { min-height: 44px; padding-block: 10px; }
html[data-o-calm] .field textarea { min-height: 96px; padding-block: 10px; }
html[data-o-calm] .map-box__frame { aspect-ratio: 16 / 6; }
html[data-o-calm] .map-box__foot { padding: 12px 16px 14px; }
html[data-o-calm] .map-grid { gap: 16px; }
html[data-o-calm] .faq-item__q { padding: 14px 20px; min-height: 0; }
html[data-o-calm] .faq-item__a { padding-inline: 20px; }
html[data-o-calm] .faq-list { gap: 10px; }
html[data-o-calm] .faq-tabs__list { margin-bottom: 18px; }

/* Program page Current. */
html[data-o-calm] .detail-hero { padding-block: 22px clamp(28px, 3vw, 38px); }
html[data-o-calm] .detail-hero--panel .detail-hero__copy { padding: 22px 28px; }
/* The photo band at a fixed height, not a max-height. 35.1 gives the box
   aspect-ratio: 4 / 3 with an auto width, and CSS Sizing transfers a
   max-height through an aspect ratio into a max-width: 190px became 253px,
   the box shrank to a quarter of the 420px panel and sat at its left with
   white beside it, on every program page the picker ran on (19 Oct 2026).
   A height has nothing to transfer, and the ratio is switched off so it
   cannot come back through another constraint. */
html[data-o-calm] .program-panel__photo { aspect-ratio: auto; height: 190px; overflow: hidden; }
html[data-o-calm] .program-panel__photo img { width: 100%; height: 100%; object-fit: cover; }
html[data-o-calm] .facts-rail__item { padding: 14px 16px; }
html[data-o-calm] .outcome-list__item { padding: 16px 18px; }
html[data-o-calm] .activity-card { padding: 16px 18px; }
html[data-o-calm] .join-step p { margin-top: 4px; }
html[data-o-calm] .teacher-card { padding-block: 16px; }
html[data-o-calm] .teacher-card__photo { max-height: 220px; }
html[data-o-calm] .booking__photo { max-height: 200px; overflow: hidden; }

/* Programs hero (Current): the area shortcut list is compact. */
html[data-o-calm] .venue-panel { padding: 14px 18px; }
html[data-o-calm] .venue-pick { padding-block: 9px; }
@media (max-width: 899px) {
  html[data-o-calm] .venue-panel { padding: 12px 14px; }
  html[data-o-calm] .venue-panel__list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 10px; }
  html[data-o-calm] .venue-pick { padding: 7px 4px; }
  html[data-o-calm] .venue-pick__meta, html[data-o-calm] .venue-pick__arrow { display: none; }
  html[data-o-calm] .venue-pick__ico { width: 30px; height: 30px; }
  html[data-o-calm] .hero:not(.hr) .hero__actions { margin-top: 4px; }
  html[data-o-calm] .hero:not(.hr) .hero__grid { gap: 16px; }
}
@media (max-width: 899px) {
  html[data-o-calm]:not([data-o-about-story]) .story__media { max-width: 230px; }
  html[data-o-calm] .why--split .why__media { max-width: 260px; }
}

/* Header CTA: solid, 44px touch height (brand rules) */
html[data-o-calm] .nav__cta .btn { min-height: 44px; }