:root {
  --sky: #76cce4;
  --sky-dark: #1f7d96;
  --sky-soft: #cfeef5;
  --canvas-top: #a7e0f0;
  --canvas-bottom: #7cccE6;
  --teal-deep: #12576a;
  --teal-deeper: #0e4655;
  /* thin light-teal rule that frames the inner-page footers (top + bottom) */
  --footer-rule: #76cce4;
  --ink: #23201c;
  --muted: #736b60;
  --paper: #ffffff;
  --cream: #fbf7f0;
  --white: #ffffff;
  --coral: #e07a5f;
  --coral-dark: #c4502f;
  --sage: #9eb8a8;
  --sage-soft: #e8efe9;
  --sun: #f4c15d;
  --line: rgba(35, 32, 28, 0.10);
  --shadow-soft: 0 28px 60px -34px rgba(40, 55, 60, 0.34);
  --shadow-tight: 0 14px 30px -18px rgba(40, 55, 60, 0.26);
  --radius: 20px;
  --radius-sm: 12px;
  --max: 1180px;
  --display: 'Lora', Georgia, 'Times New Roman', serif;
  --body: 'Figtree', ui-sans-serif, system-ui, -apple-system, sans-serif;
  /* Scrapbook hands: brush = bold display accents ("Happy", "home."),
     pen = light handwritten margin notes & stickies. */
  --script-brush: 'Caveat', 'Bradley Hand', cursive;
  --script-pen: 'Shadows Into Light', 'Bradley Hand', cursive;
  /* Airy sky canvas — a hair lighter than the hero, fading toward white. */
  --canvas-paper: #e4f3f9;
  --canvas-cream: #f5fbfd;
  /* Pastel sticker/blob/icon family */
  --lilac: #c9b6e6;
  --lilac-soft: #ece4f7;
  --blush: #f6c9cf;
  --peach: #f6c8a8;
  --butter: #f7e3a1;
  --mint: #cfe8d6;
  --sage-mid: #8fcccd;
  --sun-soft: #fbe6b3;
}

* {
  box-sizing: border-box;
}

html {
  /* clip (not hidden) contains the decorative bleed without making html/body a
     scroll container — hidden promotes overflow-y to auto and breaks the
     sticky header (it would anchor to a phantom scroller and scroll away). */
  overflow-x: clip;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  overflow-x: clip;
  background:
    radial-gradient(120% 80% at 82% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 52%),
    linear-gradient(180deg, var(--canvas-paper), var(--canvas-cream));
  background-attachment: fixed;
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

/* NOTE: no scroll lock while the menu is open — overflow:hidden on body
   removes the scroll container, position:sticky collapses, and the header
   (with the drawer attached) snaps back to the document top. */

/* iOS ignores background-attachment:fixed (falls back to scroll), which
   stretches the canvas gradient over the WHOLE document — it quantizes into
   visible bands with hard step lines on phones (seen at the classes/schedule
   boundary). Paint the identical canvas on a viewport-fixed pseudo-element
   instead. html::before, NOT body::before — that one is the menu scrim. */
@media (max-width: 900px) {
  body {
    background: none;
  }
  html::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 80% at 82% -8%, #ffffff 0%, rgba(255, 255, 255, 0) 52%),
      linear-gradient(180deg, var(--canvas-paper), var(--canvas-cream));
  }
}

img,
svg {
  display: block;
}

img {
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

h1,
h2 {
  margin: 0;
  font-family: var(--display);
  font-optical-sizing: auto;
  font-weight: 480;
  letter-spacing: -0.012em;
  line-height: 1;
}

h1 {
  max-width: 780px;
  font-size: clamp(3.35rem, 7vw, 6rem);
}

h2 {
  font-size: clamp(2.25rem, 5vw, 4.5rem);
}

h3,
p {
  margin-top: 0;
}

p {
  color: var(--muted);
  font-size: 1.02rem;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 0.6rem clamp(1rem, 4vw, 2rem);
  background: rgba(190, 231, 245, 0.94);
  border-bottom: 0;
  backdrop-filter: blur(10px);
  /* always lifted off the page so it reads as overlapping the content — even at
     the very top of the hero (it no longer blends in). */
  box-shadow:
    0 1px 0 rgba(18, 87, 106, 0.05),
    0 10px 22px -16px rgba(12, 64, 78, 0.3);
  transition: background-color 240ms ease, box-shadow 240ms ease;
}

/* Scrolled off the hero: deepen the shadow a touch for subtle depth feedback. */
.site-header.scrolled {
  box-shadow:
    0 1px 0 rgba(18, 87, 106, 0.06),
    0 16px 32px -16px rgba(12, 64, 78, 0.4);
}

.header-inner {
  width: min(100%, 1240px);
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.5rem;
  min-height: 60px;
}

.site-nav a {
  color: var(--teal-deep);
}

.header-cta {
  min-height: 42px;
  padding: 0.55rem 1.3rem;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  min-width: 0;
}

.brand-mark,
.footer-mark {
  display: grid;
  place-items: center;
}

.brand-mark {
  width: 52px;
  color: var(--ink);
}

.footer-mark {
  width: 52px;
}

.brand-mark svg,
.footer-mark svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

.brand strong {
  display: block;
  font-family: var(--display);
  font-weight: 500;
  font-size: 1.4rem;
  line-height: 1;
}

.brand small {
  display: block;
  margin-top: 0.2rem;
  font-size: 0.72rem;
  font-weight: 600;
}

.site-nav {
  display: flex;
  justify-content: center;
  gap: clamp(0.55rem, 1.25vw, 1.25rem);
  font-size: clamp(0.84rem, 1.05vw, 0.98rem);
  font-weight: 600;
}

.site-nav a {
  padding: 0.45rem 0;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.site-nav a:hover,
.site-nav a:focus-visible,
.site-nav a[aria-current="page"] {
  border-bottom-color: currentColor;
}

/* hamburger: a soft white puck (same shadow language as the Book Now pill)
   holding three hand-set teal strokes — the middle one shorter, like pen
   marks. aria-expanded morphs it into a close X. */
.menu-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 12px 20px -12px rgba(12, 64, 78, 0.5);
}

.menu-toggle span:not(.visually-hidden) {
  position: absolute;
  top: 50%;
  left: 50%;
  display: block;
  height: 2.5px;
  border-radius: 999px;
  background: var(--teal-deep);
  transition:
    transform 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    width 280ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 160ms ease;
}

.menu-toggle span:nth-child(1) { width: 19px; transform: translate(-50%, calc(-50% - 6.5px)); }
.menu-toggle span:nth-child(2) { width: 13px; transform: translate(calc(-50% - 3px), -50%); }
.menu-toggle span:nth-child(3) { width: 19px; transform: translate(-50%, calc(-50% + 6.5px)); }

.menu-toggle[aria-expanded="true"] span:nth-child(1) { width: 18px; transform: translate(-50%, -50%) rotate(45deg); }
.menu-toggle[aria-expanded="true"] span:nth-child(2) { width: 6px; opacity: 0; }
.menu-toggle[aria-expanded="true"] span:nth-child(3) { width: 18px; transform: translate(-50%, -50%) rotate(-45deg); }

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0.72rem 1.12rem;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background 160ms ease;
}

.button:hover,
.button:focus-visible {
  transform: translateY(-1px);
  box-shadow: var(--shadow-tight);
}

.button-primary {
  border-color: transparent;
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 16px 30px -14px rgba(196, 80, 47, 0.55);
}

.button-card {
  width: 100%;
  min-height: 42px;
  border-color: rgba(35, 32, 28, 0.18);
  background: var(--white);
}

.section {
  position: relative;
  padding: clamp(4.4rem, 7vw, 6.4rem) clamp(1rem, 4vw, 3.5rem);
}

.section-inner {
  width: min(100%, var(--max));
  margin: 0 auto;
}

.eyebrow {
  margin-bottom: 1rem;
  color: var(--coral-dark);
  font-size: 0.86rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}

/* little leading dash motif off every eyebrow */
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  margin-right: 0.6rem;
  vertical-align: middle;
  background: currentColor;
  border-radius: 2px;
}

.tag {
  margin-bottom: 0.75rem;
  color: var(--coral-dark);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.55rem;
}

.home-hero,
.page-hero {
  overflow: hidden;
  color: #1c2b30;
  background:
    radial-gradient(135% 135% at 78% 6%, #e9f8fc 0%, #b6e6f1 44%, #8ed3e9 100%);
}

.home-hero {
  position: relative;
  display: grid;
  align-items: center;
  min-height: 600px;
  padding-top: clamp(4rem, 7vw, 6.5rem);
  padding-bottom: clamp(4.7rem, 8vw, 7.4rem);
}

/* Editorial hero: one full-bleed photo on the right, fading into the cyan. */
.home-hero .hero-photo {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 46%;
  overflow: hidden;
}

.home-hero .hero-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.home-hero .hero-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, #74cbe3 0%, rgba(116, 203, 227, 0) 26%),
    linear-gradient(0deg, rgba(20, 88, 107, 0.3), rgba(20, 88, 107, 0.05));
}

.home-hero .section-inner {
  position: relative;
  z-index: 2;
}

.home-hero .hero-copy {
  max-width: 56%;
}

.home-hero h1 {
  max-width: none;
  font-size: clamp(3.7rem, 7.4vw, 6.8rem);
  line-height: 0.94;
}

.home-hero .uline {
  position: relative;
  white-space: nowrap;
}

.home-hero .uline::after {
  content: "";
  position: absolute;
  left: 1%;
  right: 7%;
  bottom: 0.06em;
  height: 0.1em;
  background: var(--coral);
  border-radius: 999px;
  transform: rotate(-0.7deg);
}

.home-hero .hero-subtitle {
  color: var(--coral-dark);
}

/* (the home-hero mobile rules live at the END of the scrapbook layer —
   "HOME HERO — MOBILE" — they must sit below the desktop collage rules
   or the two-column grid re-declared there wins the cascade) */

.home-hero .eyebrow,
.page-hero .eyebrow {
  color: var(--coral-dark);
}

.page-hero {
  min-height: 560px;
  display: grid;
  align-items: center;
}

.hero-layout,
.split,
.owner-layout,
.curriculum-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(410px, 1fr);
  align-items: center;
  gap: clamp(2rem, 6vw, 5rem);
}

.hero-copy p,
.page-hero-copy p,
.curriculum-layout > div > p {
  max-width: 700px;
  color: var(--ink);
  font-size: clamp(1.08rem, 1.7vw, 1.27rem);
}

.hero-subtitle {
  margin: 0.35rem 0 1.4rem;
  max-width: 760px;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 430;
  font-style: italic;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.08;
}

.trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 1.6rem;
}

.trust-row span {
  padding: 0.36rem 0.72rem;
  border: 1px solid rgba(23, 23, 23, 0.18);
  border-radius: 999px;
  background: rgba(255, 253, 248, 0.72);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.hero-single-image {
  width: 100%;
  height: 450px;
  /* thick white mat — reads as a real photo frame, like the About portrait
     and Classes "Gentle Flow" card */
  border: 10px solid #fff;
  border-radius: 24px;
  object-fit: cover;
  /* layered drop shadow: tight contact + mid lift + big soft ambient */
  box-shadow:
    0 2px 6px rgba(20, 55, 65, 0.13),
    0 16px 30px -12px rgba(20, 55, 65, 0.30),
    0 36px 64px -34px rgba(20, 55, 65, 0.42);
}

.section-heading {
  max-width: 780px;
  margin-bottom: 2rem;
}

.section-heading h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.05rem);
  line-height: 1.05;
}

.section-heading h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  margin-top: 0.95rem;
  background: var(--coral);
  border-radius: 999px;
}

.section-heading p:last-child {
  max-width: 680px;
  margin-top: 1.05rem;
  color: var(--ink);
}

/* Most content sits on the blue canvas; white "menu" bands break the rhythm. */
.start-section,
.explore-section,
.proof-section,
.events-section,
.owner-story-section,
.teaching-section,
.training-overview,
.training-path-section,
.curriculum-section,
.blog-section {
  background: transparent;
}

.classes-section {
  background: var(--white);
}

.step-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.step-card,
.class-card,
.price-card,
.explore-card,
.testimonial-card,
.contact-card,
.contact-form,
.feature-card,
.milestone-card,
.program-panel,
.timeline-grid article,
.event-card,
.blog-card,
.stat-grid article {
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow-soft);
}

.step-card {
  min-height: 260px;
  padding: 1.45rem;
}

.step-card span,
.feature-card span {
  color: var(--coral-dark);
  font-size: 0.86rem;
  font-weight: 700;
  text-transform: uppercase;
}

.step-card h3,
.class-card h3,
.price-card h3,
.explore-card strong,
.feature-card h3,
.timeline-grid h3,
.event-card h3,
.blog-card h3 {
  display: block;
  margin: 0.65rem 0 0.4rem;
  font-family: inherit;
  font-size: 1.32rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.12;
}

.featured-step {
  display: grid;
  align-content: start;
  gap: 0.85rem;
  border: 2px solid rgba(219, 119, 95, 0.55);
  background:
    linear-gradient(135deg, rgba(219, 119, 95, 0.13), rgba(158, 184, 168, 0.2)),
    var(--white);
}

/* (section backgrounds are defined together above, in the canvas system) */

.segmented-control {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 5px;
  margin-bottom: 1.5rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
  box-shadow: var(--shadow-tight);
}

.segmented-control.compact {
  width: min(100%, 310px);
  margin-bottom: 0;
}

.segment,
.price-segment {
  min-height: 44px;
  border: 0;
  border-radius: 13px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}

.segment.active,
.price-segment.active {
  background: var(--coral);
  color: var(--white);
}

.class-panel,
.price-panel {
  display: none;
}

.class-panel.active,
.price-panel.active {
  display: grid;
}

.class-panel,
.price-panel,
.feature-grid,
.testimonial-grid,
.event-grid,
.blog-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

/* These grids set columns but were never told to BE grids, so their cards
   stacked full-width. This single declaration fixes the Events, About, and
   Teacher-Training layouts at once. */
.feature-grid,
.event-grid,
.blog-grid {
  display: grid;
}

.class-card {
  overflow: hidden;
}

.class-card img,
.blog-card img,
.explore-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
}

.class-card > div,
.blog-card > div {
  padding: 1.15rem;
}

.class-card p,
.price-card p,
.feature-card p,
.event-card p,
.blog-card p,
.testimonial-card p,
.step-card p,
.explore-card p {
  margin-bottom: 0;
}

.schedule-band {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.35fr) auto;
  align-items: center;
  gap: 1.4rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
  padding: 1.2rem;
  border: 1px solid rgba(255, 255, 255, 0.58);
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.82);
  box-shadow: var(--shadow-soft);
}

.schedule-band h2 {
  font-size: clamp(1.85rem, 3vw, 2.5rem);
}

.schedule-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0.7rem;
}

.schedule-list article {
  padding: 0.85rem;
  border-radius: var(--radius);
  background: var(--white);
}

.schedule-list span {
  display: block;
  color: var(--sky-dark);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
}

.schedule-list strong {
  display: block;
  margin: 0.1rem 0;
}

.schedule-list small {
  color: var(--muted);
  font-weight: 600;
}

.pricing-header {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}

.pricing-header .section-heading {
  margin-bottom: 0;
}

.price-card {
  display: grid;
  align-content: start;
  gap: 0.9rem;
  min-height: 310px;
  padding: 1.35rem;
}

.feature-price {
  border: 2px solid var(--coral);
  background:
    linear-gradient(180deg, #fff8f1, var(--white));
}

.badge {
  justify-self: start;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  background: var(--sage);
  color: var(--ink);
  font-size: 0.78rem;
  font-weight: 700;
}

.badge.soft {
  border: 1px solid var(--line);
  background: var(--paper);
}

.price {
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.4rem, 6vw, 3.8rem);
  font-weight: 500;
  line-height: 1;
}

.price span {
  font-size: 1.35rem;
}

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem;
}

.explore-card {
  overflow: hidden;
  min-height: 430px;
  padding-bottom: 1.2rem;
  transition: transform 160ms ease, box-shadow 160ms ease;
}

.explore-card:hover,
.explore-card:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 20px 45px rgba(23, 23, 23, 0.16);
}

.explore-card span,
.blog-card .badge {
  display: inline-flex;
  margin: 1.1rem 1.1rem 0;
}

.explore-card strong,
.explore-card p {
  margin-left: 1.1rem;
  margin-right: 1.1rem;
}

.testimonial-head {
  max-width: 1000px;
  margin: 0 auto 2.4rem;
  text-align: center;
}

.testimonial-head h2 {
  position: relative;
}

.testimonial-head h2::after {
  content: "";
  display: block;
  width: 66px;
  height: 4px;
  margin: 0.85rem auto 0;
  background: var(--coral);
  border-radius: 999px;
}

.testimonial-grid {
  display: grid;
}

.testimonial-card {
  position: relative;
  display: grid;
  gap: 1rem;
  align-content: start;
  overflow: hidden;
  padding: 1.7rem 1.5rem;
}

.testimonial-card .stars {
  color: var(--coral);
  font-size: 1rem;
  letter-spacing: 3px;
}

.quote-mark {
  position: absolute;
  top: -0.4rem;
  right: 0.9rem;
  color: rgba(224, 122, 95, 0.13);
  font-family: var(--display);
  font-size: 5rem;
  line-height: 1;
}

.testimonial-quote {
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-weight: 430;
  font-size: 1.24rem;
  line-height: 1.42;
}

.testimonial-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.testimonial-avatar {
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  overflow: hidden;
  background: linear-gradient(140deg, var(--coral), var(--coral-dark));
  color: var(--white);
  font-weight: 700;
  flex-shrink: 0;
}

.testimonial-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.tp-meta {
  display: block;
}

.tp-name {
  display: flex;
  align-items: center;
  gap: 0.34rem;
}

.tp-name strong {
  font-weight: 700;
}

.tp-verified {
  flex-shrink: 0;
}

.testimonial-person small {
  display: block;
  color: var(--muted);
  font-size: 0.85rem;
}

.rev-date {
  display: block;
  margin-top: 0.1rem;
  color: var(--muted);
  font-size: 0.78rem;
}

/* sourced + verified: aggregate rating bar under the heading */
.review-summary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  width: fit-content;
  margin: -0.4rem auto 2.3rem;
  padding: 0.55rem 1.1rem;
  background: var(--white);
  border: 1px solid rgba(35, 32, 28, 0.08);
  border-radius: 999px;
  box-shadow: 0 12px 28px -20px rgba(40, 55, 60, 0.5);
  font-size: 0.92rem;
}

.review-summary svg {
  display: block;
}

.review-summary b {
  font-weight: 800;
  font-size: 1.05rem;
}

.review-summary .rs-stars {
  color: #fbbc05;
  letter-spacing: 2px;
  font-size: 1rem;
}

.review-summary .rs-count {
  color: var(--muted);
}

/* small Google "G" anchored in each card's top-right corner */
.card-google {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  opacity: 0.9;
}

/* featured (middle) review — elevated, coral-bordered, like the pricing card */
.testimonial-card.is-featured {
  background: linear-gradient(175deg, #fff8f2, var(--white));
  border: 2px solid var(--coral);
  box-shadow: 0 30px 54px -22px rgba(40, 55, 60, 0.36);
}

.testimonial-card.is-featured .testimonial-quote {
  font-size: 1.4rem;
}

@media (min-width: 1041px) {
  .testimonial-grid {
    align-items: center;
  }
  .testimonial-card.is-featured {
    transform: translateY(-16px) scale(1.04);
    z-index: 2;
    padding: 2.1rem 1.8rem;
  }
}

.owner-page {
  background:
    radial-gradient(125% 130% at 80% 12%, #d3f0f6 0%, #9edded 44%, #74cbe3 100%);
}

.owner-layout {
  grid-template-columns: minmax(310px, 0.72fr) minmax(0, 1fr);
}

.owner-portrait {
  position: relative;
  overflow: hidden;
  min-height: 440px;
  border: 3px solid rgba(255, 255, 255, 0.72);
  border-radius: var(--radius);
  background:
    linear-gradient(145deg, rgba(255, 253, 248, 0.7), rgba(226, 235, 229, 0.95)),
    var(--sage-soft);
  box-shadow: var(--shadow-soft);
  display: grid;
  align-items: end;
  padding: 1.2rem;
}

.owner-portrait::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 72 48' fill='none' stroke='%239eb8a8' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M36 43c-8-8-8-17 0-28 8 11 8 20 0 28Z'/%3E%3Cpath d='M34 42C21 42 11 34 8 19c13 1 23 9 26 23Z'/%3E%3Cpath d='M38 42c13 0 23-8 26-23-13 1-23 9-26 23Z'/%3E%3Cpath d='M36 20c-4-4-4-9 0-15 4 6 4 11 0 15Z'/%3E%3Cpath d='M22 42h28'/%3E%3C/svg%3E") center 36% / 132px no-repeat;
  opacity: 0.55;
}

.owner-portrait img {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.portrait-panel {
  position: relative;
  z-index: 1;
  padding: 1.1rem;
  border-radius: var(--radius);
  background: rgba(255, 253, 248, 0.92);
  box-shadow: var(--shadow-tight);
}

.portrait-panel span {
  color: var(--sky-dark);
  font-size: 0.76rem;
  font-weight: 700;
  text-transform: uppercase;
}

.portrait-panel strong {
  display: block;
  margin: 0.2rem 0;
  font-size: 1.55rem;
}

.portrait-panel p {
  margin: 0;
}

.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
  margin-bottom: 4rem;
}

.stat-grid article {
  padding: 1.2rem;
  text-align: center;
}

.stat-grid strong {
  display: block;
  font-family: var(--display);
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--coral-dark);
}

.stat-grid span {
  color: var(--muted);
  font-weight: 500;
}

.story-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(320px, 0.82fr);
  gap: clamp(2rem, 5vw, 4rem);
  align-items: start;
}

.story-copy blockquote {
  margin: 1.55rem 0;
  padding-left: 1rem;
  border-left: 5px solid var(--coral);
  font-size: 1.18rem;
  font-style: italic;
}

.milestone-card,
.feature-card,
.program-panel,
.timeline-grid article,
.event-card {
  padding: 1.45rem;
}

.milestone-card h2 {
  margin-bottom: 1rem;
  font-size: clamp(2rem, 4vw, 3rem);
}

.milestone-card ol {
  display: grid;
  gap: 0.8rem;
  padding-left: 1.2rem;
}

.milestone-card li::marker {
  color: var(--coral);
}

.curriculum-section {
  background: var(--cream);
  border-top: 1px solid var(--line);
}

.price-hero-panel,
.contact-info-panel {
  align-self: center;
  border: 3px solid rgba(255, 255, 255, 0.72);
}

.price-hero-panel h2 {
  font-size: clamp(2.1rem, 4vw, 3.4rem);
}

.class-page-schedule {
  margin-top: 0;
}

.curriculum-layout {
  align-items: start;
}

.check-list {
  display: grid;
  gap: 0.7rem;
  padding: 0;
  margin: 1.2rem 0 0;
  list-style: none;
}

.check-list li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 500;
}

.check-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.58rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--coral);
}

.program-list,
.contact-list {
  display: grid;
  gap: 1rem;
  margin: 1.2rem 0 0;
}

.program-list div,
.contact-list div {
  display: grid;
  gap: 0.1rem;
}

.program-list dt,
.contact-list dt {
  color: var(--sky-dark);
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
}

.program-list dd,
.contact-list dd {
  margin: 0;
  font-size: 1.06rem;
  font-weight: 500;
}

.timeline-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.5rem;
}

.timeline-grid strong {
  color: var(--coral-dark);
  font-size: 1.45rem;
}

.event-card {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 1rem;
}

.date-badge {
  display: grid;
  align-content: center;
  justify-items: center;
  width: 72px;
  height: 82px;
  border-radius: var(--radius);
  background: var(--coral);
  color: var(--white);
  box-shadow: 0 14px 24px -12px rgba(196, 80, 47, 0.5);
}

.date-badge span {
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
}

.date-badge strong {
  font-size: 2rem;
  line-height: 1;
}

.blog-card {
  overflow: hidden;
}

.blog-card a:not(.button) {
  display: inline-flex;
  margin-top: 0.8rem;
  color: var(--sky-dark);
  font-weight: 700;
}

.contact-section {
  position: relative;
  overflow: hidden;
  /* Eased (ease-in) teal gradient: the wave's teal layer above is a FLAT fill, so a
     plain linear gradient starting to darken at the seam creates a slope discontinuity
     the eye reads as a phantom horizontal band (Mach band). These stops keep the slope
     near-zero at the top — continuous with the flat wave — then ramp up smoothly. */
  background: linear-gradient(
    165deg,
    var(--teal-deep) 0%,
    #125669 25%,
    #115365 50%,
    #104d5e 75%,
    var(--teal-deeper) 100%
  );
  color: #e9f6f9;
}

/* Contact page only: layer the same cyan depth-glow the Training page uses over
   the teal contact section. Anchored in the upper-LEFT body (centre 16% 36%) and
   faded out by 52% of its radius, so the top ~10% stays flat --teal-deep and the
   hero's wave crest (same colour) still pours in seamlessly. */
body.page-contact .contact-section {
  background:
    radial-gradient(72% 50% at 16% 36%, rgba(118, 204, 228, 0.22), rgba(118, 204, 228, 0) 52%),
    linear-gradient(
      165deg,
      var(--teal-deep) 0%,
      #125669 25%,
      #115365 50%,
      #104d5e 75%,
      var(--teal-deeper) 100%
    );
}

.contact-section .eyebrow {
  color: #ffd5c6;
}

.contact-card {
  background: transparent;
  box-shadow: none;
}

.contact-card h2 {
  color: #fff;
  /* global h2 is line-height:1 — too tight for this 3-line display heading (lines touch) */
  line-height: 1.08;
}

.contact-card > p {
  color: #cfe9ef;
}

.contact-section .check-list li {
  color: #e6f3f6;
}

.contact-section .contact-list dt {
  color: #ffd5c6;
}

.contact-section .contact-list dd,
.contact-section .contact-list a {
  color: #eef8fa;
}

.contact-split {
  align-items: stretch;
  /* Mirror of .split: form gets the wider track on the left, text on the right */
  grid-template-columns: minmax(410px, 1fr) minmax(0, 0.92fr);
}

.contact-split .contact-form {
  order: 1;
}

.contact-split .contact-card {
  order: 2;
}

.contact-card,
.contact-form {
  padding: 1.7rem;
}

.contact-form {
  display: grid;
  gap: 1rem;
}

.contact-form label {
  display: grid;
  gap: 0.4rem;
  color: var(--ink);
  font-weight: 600;
}

.contact-form input,
.contact-form textarea {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 0.92rem 1rem;
  background: var(--cream);
  color: var(--ink);
  font: inherit;
}

.contact-form input::placeholder,
.contact-form textarea::placeholder {
  color: var(--muted);
}

.contact-form textarea {
  min-height: 150px;
  /* allow vertical drag-resize only — block horizontal so it can't overflow the card */
  resize: vertical;
}

.contact-form .form-check {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.65rem;
  font-weight: 500;
  color: var(--ink);
  cursor: pointer;
}

.contact-form .form-check input {
  width: 1.2rem;
  height: 1.2rem;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  accent-color: var(--coral);
  cursor: pointer;
}

.contact-form input:focus,
.contact-form textarea:focus {
  outline: 3px solid rgba(219, 119, 95, 0.34);
  border-color: var(--coral);
}

.form-status {
  min-height: 1.5rem;
  margin: 0;
  color: var(--sky-dark);
  font-weight: 600;
}

.contact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
}

/* ---- home closing CTA: asymmetric full-width invitation ---- */
.closing-cta {
  position: relative;
  overflow: hidden;
  padding: clamp(4.4rem, 7.5vw, 7rem) 0;
  color: #e9f6f9;
  /* flat teal-deep: top matches the breathe waves' flat teal, bottom matches
     the footer's teal-deep top -> both seams seamless. Glow lives in ::before
     and fades out before either edge. */
  background: var(--teal-deep);
}

.closing-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: radial-gradient(46% 72% at 24% 46%, rgba(96, 178, 196, 0.26), rgba(96, 178, 196, 0) 64%);
}

.closing-cta-inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(2rem, 6vw, 6rem);
  text-align: left;
}

.closing-cta .eyebrow {
  color: #ffd5c6;
}

.closing-cta h2 {
  margin: 0.4rem 0 0;
  color: #fff;
  font-size: clamp(2.4rem, 4.4vw, 3.85rem);
  line-height: 1.08;
}

.closing-cta-copy > p {
  margin: 1.05rem 0 0;
  max-width: 540px;
  color: #cfe9ef;
  font-size: clamp(1.05rem, 1.5vw, 1.2rem);
}

.closing-cta-action {
  display: grid;
  justify-items: start;
  gap: 0.85rem;
}

.closing-cta-btn {
  min-height: 58px;
  padding: 0.95rem 2.4rem;
  font-size: 1.02rem;
}

.closing-cta-note {
  margin: 0;
  color: #9fd0db;
  font-size: 0.86rem;
}

/* close the hairline where the breathe waves meet the CTA */
.breathe-section + .closing-cta {
  margin-top: -1px;
}

/* graceful footer hand-off on pages whose closing CTA teal meets the footer
   teal (home + classes): hide the crest wave so the teal flows straight in
   instead of creating a color-inversion band. Other pages keep their crest
   (it sits above a lighter section, where the wave reads). */
.page-home .footer-crest {
  display: none;
}

.page-home .site-footer.slim {
  margin-top: -1px;
}

/* Inner pages: the crest wave reads as an odd lighter-teal band against the
   footer's darker gradient, so drop it and cap the footer with a thin light-teal
   rule along the top instead. (Home keeps its layered breathe-waves.) */
body:not(.page-home) .footer-crest {
  display: none;
}

body:not(.page-home) .site-footer.slim {
  border-top: 3px solid var(--footer-rule);
}

@media (max-width: 760px) {
  .closing-cta-inner {
    grid-template-columns: 1fr;
    gap: 1.8rem;
  }

  .closing-cta::before {
    background: radial-gradient(70% 50% at 30% 30%, rgba(96, 178, 196, 0.22), rgba(96, 178, 196, 0) 62%);
  }
}

/* ---- Classes & Pricing ---- */
/* hero — offer-led, premium boutique (no portrait; About page owns Michelle) */
/* the hero's bottom is clipped into a wave (#cgHeroWave) so the body canvas
   shows through below it — same fixed gradient on both sides, so no seam line.
   The extra bottom padding keeps content clear of the clipped wave. */
.classes-hero {
  min-height: auto;
  padding-top: clamp(3rem, 5vw, 4.6rem);
  padding-bottom: clamp(5.4rem, 8vw, 8rem);
  -webkit-clip-path: url(#cgHeroWave);
  clip-path: url(#cgHeroWave);
}

.classes-hero .cph-grid {
  display: grid;
  grid-template-columns: minmax(440px, 1.03fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(2.2rem, 5vw, 5rem);
}

.classes-hero .cph-title {
  margin: 0;
  font-family: var(--display);
  color: #1c2b30;
  font-weight: 480;
  font-size: clamp(2.6rem, 4.3vw, 4.2rem);
  line-height: 1.02;
  letter-spacing: -0.012em;
}

.classes-hero .cph-body {
  margin: 1.5rem 0 0;
  max-width: 44ch;
  color: var(--ink);
  font-size: clamp(1.05rem, 1.4vw, 1.2rem);
  line-height: 1.55;
}

/* trust pill — one white pill, internal divider */
.classes-hero .cph-trust {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  margin: 2.1rem 0 0;
  padding: 0.7rem 1.3rem;
  background: #fff;
  border-radius: 999px;
  box-shadow: var(--shadow-tight);
}
.classes-hero .cph-trust .seg {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.92rem;
  color: var(--ink);
}
.classes-hero .cph-trust .star,
.classes-hero .cph-trust .spark { display: inline-flex; align-items: center; }
.classes-hero .cph-trust .seg svg { display: block; width: 18px; height: 18px; flex: none; }
.classes-hero .cph-trust .star { color: #f1ad33; }
.classes-hero .cph-trust .spark { color: var(--coral); }
.classes-hero .cph-trust .score { font-weight: 800; }
.classes-hero .cph-trust .quiet { color: rgba(35, 32, 28, 0.58); }
.classes-hero .cph-trust .divider {
  width: 1px;
  align-self: stretch;
  margin: 0.1rem 0;
  background: rgba(35, 32, 28, 0.16);
}

/* framed, tilted photo card with washi tape + label */
/* image sits in the left column; copy stays first in the DOM (a11y/SEO) */
.classes-hero .cph-figure { position: relative; margin: 0; order: -1; }
.classes-hero .cph-figure .frame {
  display: block;
  padding: 9px;
  background: #fff;
  border-radius: 26px;
  box-shadow: 0 34px 60px -30px rgba(20, 55, 65, 0.45);
}
.classes-hero .cph-figure img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: 18px;
}
.classes-hero .cph-tape {
  position: absolute;
  z-index: 3;
  width: 118px;
  height: 34px;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.42) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    var(--butter);
  opacity: 0.92;
  box-shadow: 0 5px 12px -7px rgba(20, 40, 50, 0.5);
  -webkit-mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
  mask: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.classes-hero .cph-tape.top { top: -15px; left: 50%; transform: translateX(-50%) rotate(-3deg); }
.classes-hero .cph-label {
  position: absolute;
  left: 50%;
  bottom: 26px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  white-space: nowrap;
  opacity: 0.9;
  padding: 0.6rem 1.1rem;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 16px 30px -16px rgba(20, 55, 65, 0.5);
  color: var(--teal-deep);
  font-size: 0.92rem;
}
.classes-hero .cph-label b { font-family: var(--display); font-weight: 600; }

@media (max-width: 880px) {
  .classes-hero .cph-grid { grid-template-columns: 1fr; gap: 2.6rem; }
  /* text leads on mobile (reset the desktop image-left order) */
  .classes-hero .cph-figure { order: 0; max-width: 440px; margin-inline: auto; }
}

@media (max-width: 560px) {
  /* trust pill: stack the two segments, drop the now-vertical divider */
  .classes-hero .cph-trust { flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.9rem; }
  .classes-hero .cph-trust .divider { display: none; }
  /* photo label: let it wrap inside the narrower card instead of clipping */
  .classes-hero .cph-label { white-space: normal; text-align: center; max-width: calc(100% - 28px); font-size: 0.82rem; line-height: 1.25; }
}

/* movement-with-mission community band (reused by the mission grace note) */
.cp-mission {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.1rem 1.4rem;
  align-items: center;
  padding: 1.5rem 1.7rem;
  border-radius: 24px;
  background:
    linear-gradient(135deg, rgba(158, 184, 168, 0.28), rgba(219, 119, 95, 0.12)),
    var(--white);
  box-shadow: var(--shadow-soft);
}

.cp-mission .mh {
  font-family: var(--script-pen);
  color: var(--coral-dark);
  font-size: 1.9rem;
  transform: rotate(-3deg);
  white-space: nowrap;
}

.cp-mission p { margin: 0; color: var(--ink); }
.cp-mission p b { color: var(--teal-deep); }

@media (max-width: 820px) {
  .cp-mission { grid-template-columns: 1fr; text-align: center; justify-items: center; }
  .cp-mission .mh { font-size: 1.5rem; white-space: normal; }
}

/* ===== Classes & Pricing body — editorial guide / ledger / accordion ===== */
/* tighter vertical rhythm than the default .section padding (scoped to this
   page so other pages keep their original spacing) */
.page-classes .section:not(.page-hero) {
  padding-top: clamp(2.8rem, 4vw, 4rem);
  padding-bottom: clamp(2.8rem, 4vw, 4rem);
}

/* shared left-aligned section head (eyebrow stays coral) */
.cg-head { max-width: 640px; margin-bottom: 0.4rem; }
.cg-head .eyebrow { color: var(--coral-dark); }
.cg-head h2 { font-family: var(--display); font-weight: 480; font-size: clamp(1.95rem, 3vw, 2.6rem); line-height: 1.04; letter-spacing: -0.01em; margin: 0.25rem 0 0; }
.cg-head p:not(.eyebrow) { margin: 0.7rem 0 0; color: var(--ink); max-width: 54ch; font-size: 1.05rem; line-height: 1.5; }

/* 1 · CLASSES — editorial guide (alternating intention-led rows) */
.cg-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(1.6rem, 4.5vw, 3.6rem); align-items: center; }
.cg-row:first-child { margin-top: 0; }
.cg-row + .cg-row { margin-top: clamp(2.6rem, 4.5vw, 3.8rem); }
.cg-row--flip .cg-media { order: 2; }
.cg-media img { display: block; width: 100%; aspect-ratio: 5 / 4; object-fit: cover; border: 7px solid #fff; border-radius: 22px;
  box-shadow: 0 0 0 1px rgba(20, 55, 65, 0.05), 0 3px 12px -5px rgba(20, 55, 65, 0.16), 0 30px 56px -32px rgba(20, 55, 65, 0.45); }
.cg-intent { color: var(--coral-dark); font-weight: 800; letter-spacing: 0.13em; text-transform: uppercase; font-size: 0.85rem; margin: 0; }
.cg-intent::before { content: ""; display: inline-block; width: 24px; height: 2px; margin-right: 0.6rem; vertical-align: middle; background: currentColor; border-radius: 2px; }
.cg-copy h3 { margin: 0.55rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(2.05rem, 3.2vw, 2.85rem); line-height: 1.02; }
.cg-desc { margin: 0.8rem 0 0; color: var(--ink); font-size: 1.18rem; line-height: 1.6; }
.cg-good { margin: 1rem 0 0; color: var(--ink); font-size: 1.08rem; line-height: 1.5; }
.cg-good b { color: var(--coral-dark); }
.cg-ask { display: inline-block; margin-top: 1.3rem; color: var(--teal-deep); font-weight: 700; font-size: 1rem; }
.cg-ask:hover { color: var(--coral-dark); }

/* 1b · KIDS & TEENS — full-width header row, then photo (left) + age rows (right) */
.cg-kids-section { position: relative; z-index: 1; background: #b6e6f1;
  box-shadow: 0 12px 26px -16px rgba(20, 55, 65, 0.2), 0 -12px 26px -16px rgba(20, 55, 65, 0.17); }
/* header spans the full section so the subtitle stays on one line */
.cg-kids-section .cg-head { max-width: none; margin-bottom: clamp(1.9rem, 3.4vw, 2.8rem); }
.cg-kids-section .cg-head .eyebrow { margin-bottom: 0.4rem; }
.cg-kids-section .cg-head h2 { margin-top: 0; }
.cg-kids-section .cg-head p:not(.eyebrow) { max-width: none; margin-top: 0.4rem; }
.cg-kids-layout { display: grid; grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr); gap: clamp(2.4rem, 5vw, 5rem); align-items: center; }
.cg-kids-photo { position: relative; aspect-ratio: 16 / 9; margin: 0; border: 7px solid #fff; border-radius: 18px; overflow: hidden;
  background: linear-gradient(135deg, #c2e1ee, #a8cfe2); box-shadow: 0 26px 46px -28px rgba(20, 55, 65, 0.4); display: grid; place-items: center; }
.cg-kids-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cg-ph-ic { width: 42px; height: 42px; color: rgba(18, 80, 95, 0.42); }
.cg-ph-ic svg { width: 100%; height: 100%; }
.cg-kids-photo figcaption { position: absolute; bottom: 13px; left: 0; right: 0; text-align: center; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(18, 80, 95, 0.5); }
.cg-kid-list { display: flex; flex-direction: column; }
.cg-kid { display: flex; gap: 1.25rem; align-items: center; padding: 0.9rem 0; }
.cg-kid:first-child { padding-top: 0; }
.cg-kid:last-child { padding-bottom: 0; }
.cg-kid + .cg-kid { border-top: 1px solid rgba(20, 55, 65, 0.18); }
.cg-kid-ic { flex: none; display: grid; place-items: center; width: 52px; height: 52px; border-radius: 15px; color: #fff; }
.cg-kid-ic svg { width: 26px; height: 26px; }
.cg-kid-ic.ic-coral { background: var(--coral); }
.cg-kid-ic.ic-amber { background: #e0a23a; }
.cg-kid-ic.ic-sky { background: var(--sky-dark); }
.cg-kid-txt { flex: 1; }
.cg-kid-age { margin: 0.15rem 0 0; font-size: 0.73rem; font-weight: 800; letter-spacing: 0.09em; text-transform: uppercase; }
.cg-kid-age.tx-coral { color: var(--coral-dark); }
.cg-kid-age.tx-amber { color: #8a5e16; }
.cg-kid-age.tx-sky { color: #0f5168; }
.cg-kid h4 { margin: 0.1rem 0 0.08rem; font-family: var(--body); font-weight: 700; font-size: 1.24rem; color: #16323b; }
.cg-kid-desc { margin: 0; color: rgba(18, 52, 62, 0.78); font-size: 0.96rem; line-height: 1.55; }

/* 2 · SCHEDULE — Momence live-calendar placeholder */
.cg-momence { margin-top: 1.3rem; border: 1.5px dashed rgba(18, 87, 106, 0.32); border-radius: 24px; background: rgba(255, 255, 255, 0.5); padding: clamp(1.9rem, 3.5vw, 2.8rem); text-align: center; }
.cg-momence .cal { display: block; width: 44px; height: 44px; margin: 0 auto; color: var(--teal-deep); }
.cg-momence .cal svg { display: block; width: 100%; height: 100%; }
.cg-momence h3 { margin: 0.9rem 0 0; font-family: var(--display); font-weight: 500; font-size: clamp(1.4rem, 2.4vw, 1.9rem); }
.cg-momence p { margin: 0.55rem auto 0; max-width: 48ch; color: var(--ink); }
.cg-momence .button { margin-top: 1.4rem; }
.cg-momence .mom-note { margin-top: 1.1rem; font-size: 0.82rem; color: var(--muted); }

/* 3 · PRICING — ledger (two visible groups, no tabs) */
.cg-pgroup { margin-top: clamp(2.2rem, 3.5vw, 3rem); }
.cg-pgroup:first-of-type { margin-top: 1.4rem; }
.cg-pglabel { display: flex; align-items: baseline; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 1rem; }
.cg-pglabel h3 { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.5rem; }
.cg-pglabel span { color: var(--muted); font-size: 0.95rem; }
.cg-ledger { background: #fff; border-radius: 22px; box-shadow: var(--shadow-soft); overflow: hidden; }
.cg-pr { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(150px, auto); align-items: center; gap: 0.6rem 1.6rem; padding: 1.3rem 1.6rem; border-bottom: 1px solid var(--line); }
.cg-pr:last-child { border-bottom: 0; }
.cg-pr.is-feat { background: linear-gradient(180deg, #fff8f1, #ffffff); }
.cg-pr-name { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.32rem; display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.cg-pr-tag { font-family: var(--body); font-weight: 800; font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: #fff; background: var(--coral); padding: 0.22rem 0.55rem; border-radius: 999px; }
.cg-pr-blurb { margin: 0.2rem 0 0; color: var(--muted); font-size: 0.93rem; }
.cg-pr-price { margin: 0; font-family: var(--display); font-weight: 500; font-size: 1.85rem; line-height: 1; white-space: nowrap; }
.cg-pr-price span { font-size: 0.95rem; color: var(--muted); }
.cg-pr-cta { justify-self: end; min-height: auto; padding: 0.6rem 1.1rem; }
@media (max-width: 620px) {
  .cg-pr { grid-template-columns: 1fr auto; }
  .cg-pr-cta { grid-column: 1 / -1; justify-self: start; }
}

/* 4 · FAQ — native accordion */
/* trimmed vertical padding — this section sits between the pricing cards and the
   slim mission band, so it doesn't need the full .section rhythm */
.cg-faq-sec { padding-top: clamp(2.4rem, 4vw, 3.4rem); padding-bottom: clamp(2.4rem, 4vw, 3.4rem); }
.cg-faq { margin-top: 1.4rem; border-top: 1px solid var(--line); }
.cg-faq details { border-bottom: 1px solid var(--line); }
.cg-faq summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1.2rem; padding: 1.15rem 0; font-weight: 700; font-size: 1.08rem; color: var(--teal-deep); }
.cg-faq summary::-webkit-details-marker { display: none; }
.cg-faq summary::after { content: "+"; flex: none; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: rgba(224, 122, 95, 0.12); color: var(--coral-dark); font-size: 1.25rem; line-height: 1; }
.cg-faq details[open] summary::after { content: "\2212"; }
.cg-faq details > p { margin: 0 0 1.2rem; color: var(--ink); max-width: 64ch; line-height: 1.55; }

/* MISSION band — a slim grace note closing the page below the FAQ; keep its
   own padding small so it doesn't stack a big gap onto the FAQ's bottom space */
.cg-mission-sec { padding-top: clamp(0.4rem, 1vw, 1rem); padding-bottom: clamp(1.6rem, 2.8vw, 2.4rem); }

@media (max-width: 760px) {
  .cg-row { grid-template-columns: 1fr; }
  .cg-row--flip .cg-media { order: 0; }
  .cg-kids-layout { grid-template-columns: 1fr; gap: 1.9rem; align-items: start; }
  .cg-kids-photo { aspect-ratio: 16 / 9; }
}

.site-footer {
  position: relative;
  overflow: hidden;
  padding: clamp(3rem, 6vw, 4.6rem) clamp(1rem, 4vw, 3.5rem) 2.4rem;
  color: #d7edf2;
  background: linear-gradient(165deg, var(--teal-deep), var(--teal-deeper));
}

.footer-motif {
  position: absolute;
  right: -70px;
  bottom: -120px;
  width: 380px;
  height: 380px;
  color: #fff;
  opacity: 0.1;
  pointer-events: none;
}

.footer-motif .mandala {
  width: 100%;
  height: 100%;
}

.footer-inner {
  position: relative;
  z-index: 1;
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: clamp(2rem, 6vw, 5rem);
}

.footer-brand {
  display: grid;
  gap: 0.4rem;
  align-content: start;
  max-width: 420px;
}

.footer-brand .footer-mark {
  width: 54px;
  height: 40px;
  color: #fff;
}

.footer-brand strong {
  font-family: var(--display);
  font-size: 2rem;
  font-weight: 500;
  color: #fff;
}

.footer-tag {
  margin: 0;
  color: #bfe3ea;
  font-weight: 700;
  letter-spacing: 0.04em;
}

.footer-brand > p {
  margin: 0.2rem 0 0;
  color: #bfe3ea;
}

.footer-meta {
  margin-top: 0.5rem !important;
  line-height: 1.7;
}

.footer-social {
  display: flex;
  gap: 0.6rem;
  margin-top: 0.9rem;
}

.footer-social a {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #eaf6f9;
}

.footer-social a:hover {
  background: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.55);
  color: #fff;
}

.footer-social svg {
  width: 18px;
  height: 18px;
}

.footer-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem 2rem;
  align-content: start;
}

.footer-cols h4 {
  margin: 0 0 0.85rem;
  font-family: var(--body);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #94cdd9;
}

.footer-cols a {
  display: block;
  padding: 0.34rem 0;
  color: #eaf6f9;
  font-weight: 600;
}

.footer-cols a:hover {
  color: #fff;
  text-decoration: underline;
}

/* =========================================================
   v2 components & polish — blue canvas, motifs, custom parts
   ========================================================= */

/* never top-heavy headings */
h1,
h2 {
  text-wrap: balance;
}

/* cards lift off the blue canvas */
.step-card,
.class-card,
.price-card,
.explore-card,
.testimonial-card,
.feature-card,
.milestone-card,
.program-panel,
.event-card,
.blog-card,
.stat-grid article,
.contact-form,
.value-card {
  box-shadow: 0 26px 54px -30px rgba(12, 64, 78, 0.5);
}

.button-ghost {
  border-color: rgba(255, 255, 255, 0.85);
  background: transparent;
  color: #fff;
}

.button-ghost:hover,
.button-ghost:focus-visible {
  background: rgba(255, 255, 255, 0.16);
}

/* botanical mandala motifs */
.mandala {
  display: block;
  width: 100%;
  height: 100%;
}

.section-motif {
  position: absolute;
  z-index: 0;
  color: #fff;
  opacity: 0.16;
  pointer-events: none;
}

.section > .section-inner {
  position: relative;
  z-index: 1;
}

.motif-tr {
  top: -130px;
  right: -120px;
  width: 300px;
  height: 300px;
}

.motif-bl {
  bottom: -140px;
  left: -130px;
  width: 320px;
  height: 320px;
}

/* white "menu" bands get a faint sky motif instead of white */
.classes-section .section-motif,
.pricing-section .section-motif {
  color: var(--sky);
  opacity: 0.12;
}

/* ---- value-prop cards (home "why us") ---- */
.value-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.05rem;
}

.value-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.5rem;
  padding: 1.7rem 1.15rem 1.45rem;
  border-radius: 18px;
  background: #fffdfa;
  border: 1px solid rgba(35, 32, 28, 0.05);
}

.value-card p {
  font-size: 0.92rem;
  line-height: 1.46;
}

.value-icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border-radius: 15px;
  background: linear-gradient(140deg, #ffe7df, #ffd1c2);
  color: var(--coral-dark);
}

.value-icon svg {
  width: 34px;
  height: 34px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.value-card h3 {
  margin: 0.25rem 0 0;
  font-size: 1.16rem;
  font-weight: 700;
}

.value-card p {
  margin: 0;
}

/* ---- schedule cards ---- */
.schedule-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.2rem;
}

/* "this week" classes as taped, tear-off tickets with a class photo (Option E) */
/* OUTER wrapper — carries ONLY the tilt + the tape, and is deliberately filter-free.
   Why no filter here: a filter makes Safari render the card as a re-rasterized GPU
   layer, and it then resolves the body's notch MASK against that layer's (filter-
   expanded) box instead of the layout box. Anything that rescales the layer — page
   zoom (Cmd +/-), the tilt, Retina DPR — re-rounds the notch to a different spot while
   the dashed .sc-tear (normal paint) stays put, so the notch drifts off the tear.
   (Safari-only; Chrome rasterizes the layer 1:1 so it never drifts.) The depth shadow
   therefore lives on a separate blurred .sc-shadow element behind the ticket — keeping
   the masked card filter-free welds the notch to the tear at every zoom/tilt. */
.schedule-card {
  --notch-y: 68px; /* distance from the bottom for the side notches; body + shadow inherit it */
  position: relative;
  display: grid;
  border-radius: 18px;
  transform: rotate(var(--tilt, 0deg));
  box-shadow: none;
}

/* INNER body — the white ticket, the only masked element. Because it has NO filter
   on any ancestor now, Safari computes its notch mask against the real layout box, so
   the cut-outs stay pixel-locked to the dashed tear at every zoom/tilt. --notch-y
   (inherited from .schedule-card) is the fixed distance from the bottom that both this
   mask and the .sc-shadow clone use, so notch, tear and shadow always agree.
   Sits above .sc-shadow (z-index). */
.sc-ticket-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 12px 14px 1.15rem;
  border-radius: 18px;
  background: var(--white);
  -webkit-mask:
    radial-gradient(circle 12px at left calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat,
    radial-gradient(circle 12px at right calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 12px at left calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat,
    radial-gradient(circle 12px at right calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat;
  mask-composite: intersect;
}

/* Depth shadow — a separate, blurred clone of the notched silhouette sitting behind the
   ticket. It carries the filter so the card itself can stay filter-free (see .schedule-card).
   ::before is the sharp notched dark shape (same mask as the body); .sc-shadow blurs + drops
   it. The blur hides this clone's own harmless notch drift, while the crisp ticket above
   stays locked to the tear. drop-shadow traced the notch silhouette before — this reproduces
   that punched-rim look without putting a filter on the masked card. */
.sc-shadow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  transform: translateY(13px);
  filter: blur(12px);
  will-change: transform; /* pin the blurred layer so all load paths rasterize it the same */
}
.sc-shadow::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 18px;
  background: rgba(9, 46, 58, 0.4);
  -webkit-mask:
    radial-gradient(circle 12px at left calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat,
    radial-gradient(circle 12px at right calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat;
  -webkit-mask-composite: source-in;
  mask:
    radial-gradient(circle 12px at left calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat,
    radial-gradient(circle 12px at right calc(100% - var(--notch-y)), #0000 0 11px, #000 11.5px) no-repeat;
  mask-composite: intersect;
}

/* Pinned, slightly askew like tickets on a board. The tilt is carried through
   the scroll-reveal transforms below so .reveal.in { transform: none } can't
   wipe it (which is what made the live cards sit straight vs. the lab). */
.schedule-card:nth-child(1) { --tilt: -1.5deg; }
.schedule-card:nth-child(2) { --tilt: 1.2deg; }
.schedule-card:nth-child(3) { --tilt: -1deg; }
.schedule-card.reveal { transform: translateY(20px) rotate(var(--tilt, 0deg)); }
.schedule-card.reveal.in { transform: rotate(var(--tilt, 0deg)); }

.schedule-card .sc-tape {
  top: -13px;
  left: 50%;
  width: 86px;
  transform: translateX(-50%) rotate(-4deg);
}

.schedule-card:nth-child(2) .sc-tape { background-color: var(--blush); transform: translateX(-50%) rotate(3deg); }
.schedule-card:nth-child(3) .sc-tape { background-color: #cdb8e6; transform: translateX(-50%) rotate(-2deg); }

/* class photo with the day stamped on the corner */
.sc-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
}

.sc-photo img {
  display: block;
  width: 100%;
  height: 152px;
  object-fit: cover;
}

.sc-day {
  position: absolute;
  top: 10px;
  left: 10px;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 13px;
  background: var(--coral);
  color: #fff;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  box-shadow: 0 8px 16px -6px rgba(8, 40, 50, 0.5);
}

.sc-when {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
}

.sc-time {
  color: var(--ink);
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 600;
  line-height: 1;
}

.sc-loc {
  color: var(--teal-deep);
  font-size: 0.78rem;
  font-weight: 700;
}

.schedule-card h3 {
  margin: 0;
  font-family: var(--display);
  font-size: 1.4rem;
  font-weight: 500;
}

/* tear-off perforation — the side notches are real mask cut-outs on the card
   (above); this is just the dashed line, pinned to the bottom (margin-top:auto)
   so it sits at the same fixed offset the notches are cut at */
.sc-tear {
  height: 0;
  margin: auto -14px 0;
  border-top: 2px dashed rgba(35, 32, 28, 0.18);
}

.sc-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}

.sc-with {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.86rem;
  font-weight: 600;
}

.sc-with .av {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(140deg, var(--sky), var(--sky-dark));
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  flex: none;
}

.schedule-card .button {
  min-height: 38px;
  padding: 0.5rem 1.15rem;
  border-color: transparent;
  background: #5cb6af;
  color: #093a44;
  /* The global .button hover LIFTS (transform), adds a box-shadow, and fades the bg
     over 160ms. All three animate INSIDE the card's filter:drop-shadow — and a
     descendant repainting every frame forces the drop-shadow to re-rasterize every
     frame, which is the notch/tear flicker on hover. Kill the animation on THIS
     button: hover becomes a single instant repaint, which the static drop-shadow
     redraws cleanly. (The card already supplies the depth; the button doesn't need
     its own lift.) */
  transition: none;
}

.schedule-card .button:hover,
.schedule-card .button:focus-visible {
  background: #4ba8a1;
  transform: none;   /* cancel the global translateY lift — it animated inside the filter */
  box-shadow: none;  /* cancel the global hover shadow — same reason */
}

/* stacked on mobile — drop the playful tilt so they read straight */
@media (max-width: 1040px) {
  .schedule-card { --tilt: 0deg; }
}

.schedule-cta {
  margin-top: 2.2rem;
  text-align: center;
}

/* ---- feature band (teacher training spotlight on home) ---- */
.feature-band {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 0.82fr);
  align-items: center;
  gap: clamp(2rem, 5vw, 4rem);
  padding: clamp(2rem, 4vw, 3.2rem);
  border-radius: 28px;
  background: linear-gradient(150deg, #1f7d96, #12576a);
  color: #eaf6f9;
}

.feature-band .eyebrow {
  color: #ffd5c6;
}

.feature-band h2 {
  color: #fff;
}

.feature-band > div > p {
  color: #d2ebf1;
}

.feature-media {
  position: relative;
  z-index: 1;
}

.feature-media img {
  width: 100%;
  height: 340px;
  object-fit: cover;
  border-radius: 20px;
  border: 3px solid rgba(255, 255, 255, 0.55);
}

.feature-motif {
  position: absolute;
  right: -100px;
  bottom: -130px;
  width: 320px;
  height: 320px;
  color: #fff;
  opacity: 0.12;
  z-index: 0;
  pointer-events: none;
}

/* a bold flowing wave "ribbon" that bleeds in from the left, undulates behind
   the teacher-training card (cresting above + below it), and sweeps off the
   right — in the card's teal so it reads as a current. Card sits on top. */
.explore-section { position: relative; }
.explore-section .section-inner { position: relative; z-index: 1; }

.tt-ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 116vw;
  height: clamp(440px, 48vw, 620px);
  z-index: 0;
  pointer-events: none;
}

.tt-ribbon svg {
  display: block;
  width: 100%;
  height: 100%;
}

.tt-ribbon path {
  fill: rgba(31, 125, 150, 0.15);
}

.feature-points {
  display: grid;
  gap: 0.55rem;
  margin: 1.3rem 0 1.6rem;
  padding: 0;
  list-style: none;
}

.feature-points li {
  position: relative;
  padding-left: 1.7rem;
  font-weight: 500;
}

.feature-points li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55rem;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--coral);
}

/* pricing hero: keep the side panel inside the hero (no overlap) */
.pricing-hero {
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.price-hero-panel {
  align-self: center;
  margin: 0;
}

/* =========================================================
   Mood C — bright & joyful: blobs, stickers, doodles, warmth
   ========================================================= */

/* tactile coral buttons */
.button-primary {
  box-shadow: 0 4px 0 0 var(--coral-dark), 0 16px 26px -14px rgba(196, 80, 47, 0.5);
}

.button-primary:hover,
.button-primary:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 6px 0 0 var(--coral-dark), 0 22px 34px -14px rgba(196, 80, 47, 0.55);
}

/* organic blobs */
.blob {
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.blob-sun {
  background: var(--sun);
}

.blob-coral {
  background: var(--coral);
}

.blob-sky {
  background: #c4ebf6;
}

/* sticker badge */
.sticker {
  position: absolute;
  z-index: 4;
  display: grid;
  place-items: center;
  width: 108px;
  height: 108px;
  border-radius: 50%;
  background: var(--sun);
  color: #6a3a14;
  font: 800 0.72rem/1.25 var(--body);
  letter-spacing: 0.03em;
  text-align: center;
  box-shadow: 0 14px 26px -12px rgba(20, 40, 50, 0.4);
  transform: rotate(-11deg);
}

.sticker.coral {
  background: var(--coral);
  color: #fff;
}

/* hand-drawn doodles */
.doodle {
  position: absolute;
  z-index: 4;
  color: #fff;
  pointer-events: none;
}

.doodle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.doodle-coral {
  color: var(--coral);
}

/* ---- home hero (Mood C: joyful figure + blobs + sticker) ---- */
.home-hero {
  min-height: 0;
  align-items: center;
  padding-top: clamp(2.4rem, 4vw, 3.6rem);
  padding-bottom: clamp(4rem, 7vw, 6rem);
}

.home-hero .section-inner {
  display: grid;
  grid-template-columns: 1.12fr 0.88fr;
  align-items: center;
  gap: clamp(2rem, 5vw, 3.6rem);
}

.home-hero .hero-copy {
  max-width: none;
}

.home-hero .hero-blob-sun {
  top: -34px;
  right: 2%;
  width: 184px;
  height: 184px;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  opacity: 0.95;
}

.home-hero .hero-blob-coral {
  bottom: calc(6% - 100px);
  left: calc(28% - 400px);
  width: 220px;
  height: 220px;
  border-radius: 60% 40% 50% 50% / 40% 60% 40% 60%;
  opacity: 0.18;
}

.hero-figure {
  position: relative;
  z-index: 2;
}

.home-hero h1 {
  font-size: clamp(3rem, 5.1vw, 4.9rem);
  line-height: 0.98;
  white-space: nowrap;
}

.home-hero h1 .uline {
  color: #fff;
}

.home-hero h1 .uline::after {
  display: none;
}

/* sunny accent on the "why us" eyebrow row */
.start-section {
  position: relative;
}

.start-section .blob-sun {
  top: -40px;
  right: 6%;
  width: 130px;
  height: 130px;
  border-radius: 60% 40% 55% 45% / 50% 55% 45% 50%;
  opacity: 0.5;
}

/* playful value-card icon tints */
.value-card:nth-child(2) .value-icon {
  background: linear-gradient(140deg, #fdeebf, #f7d98a);
  color: #9a6a18;
}

.value-card:nth-child(3) .value-icon {
  background: linear-gradient(140deg, #d4eef8, #aaddee);
  color: var(--sky-dark);
}

.value-card:nth-child(4) .value-icon {
  background: linear-gradient(140deg, #e2efe4, #c2dcc8);
  color: #4e7a5e;
}

/* ---- inner page heroes get the joyful treatment too ---- */
.page-hero {
  overflow: hidden;
}

.page-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  top: -56px;
  right: -44px;
  width: 200px;
  height: 200px;
  background: var(--sun);
  opacity: 0.5;
  border-radius: 46% 54% 60% 40% / 52% 44% 56% 48%;
  pointer-events: none;
}

.page-hero h1 {
  font-size: clamp(2.6rem, 4.3vw, 4.2rem);
  line-height: 1.02;
}

/* readable copy where text sits directly on the blue canvas */
.story-copy p,
.story-copy blockquote {
  color: var(--ink);
}

/* =========================================================
   Motion & interaction — calm but alive (CSS + a little JS;
   transfers to a WordPress theme unchanged, reduced-motion safe)
   ========================================================= */

/* scroll reveal: JS adds .reveal (hidden) then .in (shown) when in view */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity 0.7s ease, transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.reveal.in {
  opacity: 1;
  transform: none;
}

/* gentle image zoom on card hover */
.class-card img,
.blog-card img,
.explore-card img {
  transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.class-card:hover img,
.blog-card:hover img,
.explore-card:hover img {
  transform: scale(1.06);
}

/* floating, slowly morphing hero blobs */
/* mobile menu entrance (drawer, its items, and the frosted scrim) */
@keyframes bella-drawer-in {
  from { opacity: 0; transform: translateY(-10px); }
  to { opacity: 1; transform: none; }
}

@keyframes bella-item-in {
  from { opacity: 0; transform: translateY(-7px); }
  to { opacity: 1; transform: none; }
}

@keyframes bella-scrim-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes floaty {
  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }
  50% {
    transform: translate(0, -16px) rotate(6deg);
  }
}

.home-hero .hero-blob-sun {
  animation: floaty 9s ease-in-out infinite;
}

.home-hero .hero-blob-coral {
  animation: floaty 12s ease-in-out infinite reverse;
}

.start-section .blob-sun {
  animation: floaty 10s ease-in-out infinite;
}

/* sticker gives a little wiggle when you hover the hero photo */
@keyframes wiggle {
  0%,
  100% {
    transform: rotate(-11deg);
  }
  30% {
    transform: rotate(-17deg);
  }
  70% {
    transform: rotate(-5deg);
  }
}

/* the "Beginners welcome" scallop badge eases into a subtle rotate + lift on hover */
.hero-badge {
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-badge:hover {
  transform: rotate(-4deg) scale(1.05);
}

/* the note is now a link too — give it the same subtle lift on hover */
.hero-note {
  transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-note:hover {
  transform: rotate(-3deg) scale(1.04);
}

/* slowly turning botanical mandalas */
@keyframes turn {
  to {
    transform: rotate(360deg);
  }
}

.footer-motif .mandala {
  transform-origin: 50% 50%;
  animation: turn 120s linear infinite;
}

.feature-motif .mandala {
  transform-origin: 50% 50%;
  animation: turn 150s linear infinite reverse;
}

/* ---- "take a breath": a breathing, self-drawing mandala ---- */
.breathe-section {
  position: relative;
  overflow: hidden;
  padding-top: clamp(1.6rem, 2.8vw, 2.4rem);
  padding-bottom: 270px;
  /* fully transparent: the body's fixed gradient flows straight through from the
     section above with no internal divide. The light wave layer matches it. */
  background: transparent;
  text-align: center;
}

/* layered wavy break into the deep-teal contact section */
.breathe-waves {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  height: 210px;
  pointer-events: none;
}

/* each layer is its own <svg> so the drop-shadow filter sits on the svg element
   (Safari fails to render filters on <path> children of a stretched svg) */
.wave-layer {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}

.wave-teal {
  fill: var(--teal-deep);
}

.wave-mid {
  fill: #a9d3e6;
  filter: drop-shadow(0 12px 9px rgba(13, 60, 74, 0.18));
}

.wave-light {
  /* fill is a transparent->opaque gradient (defined inline) so the top edge
     reveals the ambient and never seams against the fixed body gradient */
  filter: drop-shadow(0 12px 9px rgba(13, 60, 74, 0.2));
}

/* close the sub-pixel hairline where the teal meets the contact section */
.breathe-section + .contact-section {
  margin-top: -1px;
}

.breathe-inner {
  position: relative;
  z-index: 3;
  width: min(100%, 720px);
  margin: 0 auto;
}

/* mirrored arms sweeping in from the sides to cradle the mandala;
   the forearm/elbow runs off the left & right edges of the viewport */
.breathe-hand {
  position: absolute;
  top: calc(48% + 55px);
  z-index: 2;
  width: clamp(320px, 48vw, 1280px);
  color: var(--teal-deep);
  pointer-events: none;
}

.breathe-hand .hand-svg {
  display: block;
  width: 100%;
  height: auto;
}

.breathe-hand.left {
  left: 0;
  transform-origin: 50% 72%;
  transform: translate(-30%, -72%) scaleX(-1) rotate(25deg);
}

.breathe-hand.right {
  right: 0;
  transform-origin: 50% 72%;
  transform: translate(30%, -72%) rotate(25deg);
}

@media (max-width: 760px) {
  .breathe-hand {
    display: none;
  }
}

.breathe-stage {
  position: relative;
  width: min(300px, 70vw);
  height: min(300px, 70vw);
  margin: 0.5rem auto 0.2rem;
  display: grid;
  place-items: center;
}

.breathe-rings {
  position: absolute;
  width: 130px;
  height: 130px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(224, 122, 95, 0.2), rgba(224, 122, 95, 0));
  transform-origin: 50% 50%;
  animation: breathe 9s ease-in-out infinite;
}

.breathe-mandala {
  position: absolute;
  inset: 0;
  color: var(--sky-dark);
  transform-origin: 50% 50%;
  animation: breathe 9s ease-in-out infinite;
}

.breathe-mandala .mandala {
  width: 100%;
  height: 100%;
  opacity: 0.55;
}

.breathe-label {
  position: relative;
  height: 1.8em;
  margin: 0.6rem 0 0;
  font-family: var(--display);
  font-size: 1.4rem;
  color: var(--teal-deep);
}

.breathe-label span {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
}

.breathe-label .b-in {
  animation: bIn 9s ease-in-out infinite;
}

.breathe-label .b-out {
  animation: bOut 9s ease-in-out infinite;
}

.breathe-note {
  margin-top: 0.35rem;
  color: var(--muted);
  font-family: var(--display);
  font-style: italic;
  font-size: 1.15rem;
}

@keyframes breathe {
  0%,
  100% {
    transform: scale(0.82);
  }
  45%,
  55% {
    transform: scale(1.12);
  }
}

@keyframes bIn {
  0%,
  38% {
    opacity: 1;
  }
  50%,
  100% {
    opacity: 0;
  }
}

@keyframes bOut {
  0%,
  46% {
    opacity: 0;
  }
  58%,
  94% {
    opacity: 1;
  }
  100% {
    opacity: 0;
  }
}

/* draw the mandala strokes when scrolled into view */
.breathe-mandala .mandala path,
.breathe-mandala .mandala circle,
.site-footer .footer-motif .mandala path,
.site-footer .footer-motif .mandala circle {
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
}

.breathe-section.drawn .breathe-mandala .mandala path,
.breathe-section.drawn .breathe-mandala .mandala circle,
.site-footer.drawn .footer-motif .mandala path,
.site-footer.drawn .footer-motif .mandala circle {
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 2.6s ease;
}

/* smooth cross-page transitions (Chrome/Edge; degrades gracefully) */
@view-transition {
  navigation: auto;
}

.site-header {
  view-transition-name: site-header;
}

.site-footer {
  view-transition-name: site-footer;
}

/* responsive for new components */
@media (max-width: 1040px) {
  .value-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .schedule-grid {
    grid-template-columns: 1fr;
  }

  .feature-band {
    grid-template-columns: 1fr;
  }

  .footer-inner {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 560px) {
  .value-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 1140px) {
  /* row 1: brand + Book Now (flush right); row 2: the wrapped nav */
  .header-inner {
    grid-template-columns: 1fr auto;
  }

  .site-nav {
    grid-column: 1 / -1;
    order: 4;
    gap: clamp(0.9rem, 2.4vw, 1.4rem);
  }

  .header-cta {
    justify-self: end;
  }

  .hero-layout,
  .split,
  .owner-layout,
  .curriculum-layout,
  .story-layout {
    grid-template-columns: 1fr;
    /* stacked columns don't need the wide two-column gutter */
    gap: clamp(1.7rem, 4vw, 2.6rem);
  }

  /* Stacked: lead with the heading/text, then the form */
  .contact-split .contact-card {
    order: 1;
  }

  .contact-split .contact-form {
    order: 2;
  }

  .schedule-band {
    grid-template-columns: 1fr;
  }

  .step-grid,
  .class-panel.active,
  .price-panel.active,
  .feature-grid,
  .testimonial-grid,
  .event-grid,
  .blog-grid,
  .explore-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .stat-grid,
  .timeline-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .header-inner {
    grid-template-columns: 1fr auto auto;
    gap: 0.65rem;
    min-height: 56px;
  }

  .brand-mark {
    width: 48px;
  }

  .brand strong {
    font-size: 1.1rem;
  }

  /* keep Book Now reachable on phones — compact pill between brand and burger */
  .header-cta {
    order: 2;
    min-height: 38px;
    padding: 0.42rem 0.95rem;
    font-size: 0.88rem;
  }

  .menu-toggle {
    display: block;
    order: 3;
    justify-self: end;
  }

  /* drawer hangs off the sticky header itself (absolute + top:100%), so it is
     always flush beneath it — WP admin bar, wrapping, zoom all included.
     NOTE: never scroll-lock the body while it's open — overflow:hidden on
     body removes the scroll container, position:sticky collapses, and the
     header (drawer included) snaps back to the document top. */
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 45;
    display: none;
    grid-template-columns: 1fr;
    gap: 0;
    padding: 0.7rem clamp(1.3rem, 6vw, 2.2rem) 1.5rem;
    background: #fffcf8;
    border-bottom: 0;
    border-radius: 0 0 26px 26px;
    box-shadow: 0 32px 54px -24px rgba(12, 64, 78, 0.4);
  }

  .site-nav.open {
    display: grid;
    animation: bella-drawer-in 240ms ease-out both;
  }

  /* editorial type: display serif, generous rows, faint teal hairlines */
  .site-nav a {
    padding: 1.05rem 0.1rem;
    border-bottom: 1px solid rgba(18, 87, 106, 0.09);
    font-family: var(--display);
    font-size: 1.4rem;
    font-weight: 500;
    color: var(--teal-deep);
  }

  .site-nav a:last-child {
    border-bottom: 0;
  }

  /* the drawer items settle in one after another */
  .site-nav.open a { animation: bella-item-in 340ms ease-out both; }
  .site-nav.open a:nth-child(1) { animation-delay: 40ms; }
  .site-nav.open a:nth-child(2) { animation-delay: 75ms; }
  .site-nav.open a:nth-child(3) { animation-delay: 110ms; }
  .site-nav.open a:nth-child(4) { animation-delay: 145ms; }
  .site-nav.open a:nth-child(5) { animation-delay: 180ms; }
  .site-nav.open a:nth-child(n + 6) { animation-delay: 215ms; }

  /* in the drawer the desktop underline just doubles the separators —
     the current page gets coral and a little heart instead */
  .site-nav a:hover,
  .site-nav a:focus-visible,
  .site-nav a[aria-current="page"] {
    border-bottom-color: rgba(18, 87, 106, 0.09);
    color: var(--coral-dark);
  }

  .site-nav a[aria-current="page"]::after {
    content: "\2665";
    margin-left: 0.5rem;
    color: var(--coral);
    font-size: 0.72em;
  }

  .site-nav a:last-child:hover,
  .site-nav a:last-child:focus-visible,
  .site-nav a:last-child[aria-current="page"] {
    border-bottom-color: transparent;
  }

  /* frosted dim behind the open drawer so the menu state is unambiguous */
  body.menu-open::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: 40;
    background: rgba(13, 60, 74, 0.44);
    -webkit-backdrop-filter: blur(2.5px);
    backdrop-filter: blur(2.5px);
    animation: bella-scrim-in 220ms ease-out both;
  }

  /* the corner blob reads as an accidental wedge once the hero is this narrow */
  .page-hero::after {
    display: none;
  }

  h1 {
    font-size: clamp(3rem, 16vw, 4.7rem);
  }

  h2 {
    font-size: clamp(2.16rem, 11vw, 3.25rem);
  }

  .section {
    padding: 4rem 1rem;
  }

  .home-hero,
  .page-hero {
    min-height: 0;
    padding-top: 3.1rem;
    padding-bottom: 4.1rem;
  }

  .hero-single-image,
  .owner-portrait {
    min-height: 0;
    height: 310px;
  }

  .step-grid,
  .class-panel.active,
  .price-panel.active,
  .feature-grid,
  .testimonial-grid,
  .event-grid,
  .blog-grid,
  .explore-grid,
  .stat-grid,
  .timeline-grid,
  .schedule-list {
    grid-template-columns: 1fr;
  }

  .pricing-header {
    align-items: start;
    flex-direction: column;
  }

  .segmented-control.compact {
    width: 100%;
  }

  .event-card {
    grid-template-columns: 1fr;
  }

  .site-footer {
    display: grid;
  }
}

/* =========================================================
   Scrapbook layer — brush/pen type, washi tape, stickers,
   scalloped badges, hand-drawn doodles, wavy dividers, sage CTA.
   Builds on the Mood C primitives (.blob/.sticker/.doodle).
   Every decorative svg/span is aria-hidden + pointer-events:none;
   new motion reuses existing keyframes so the reduced-motion
   catch-all at the very bottom disables it with no extra guard.
   ========================================================= */

.brush { font-family: var(--script-brush); font-weight: 700; }
.pen { font-family: var(--script-pen); font-weight: 400; }
.heart { font-style: normal; line-height: 1; }

/* ---- hero headline: stacked My / Happy / Place with a brush accent ---- */
.home-hero h1 {
  white-space: normal;
  line-height: 0.9;
}

.home-hero h1 .hl-word {
  display: block;
}

.home-hero h1 .uline {
  display: block;
  margin: -0.02em 0 0.04em;
  font-family: var(--script-brush);
  font-weight: 700;
  font-size: 1.36em;
  line-height: 0.74;
  color: #fff;
  transform: rotate(-3deg);
  transform-origin: 12% center;
  text-shadow: 0 8px 20px rgba(12, 64, 78, 0.2);
}

.home-hero h1 .uline::after {
  display: none;
}

/* little white chip inside the primary CTA */
.btn-chip {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-right: 0.55rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.92);
}

.btn-chip svg {
  width: 12px;
  height: 12px;
  fill: none;
  stroke: var(--coral);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---- hero photo as a taped scrapbook print ---- */
.photo-card {
  position: relative;
  z-index: 2;
  padding: 12px 12px 16px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 30px 58px -28px rgba(8, 48, 62, 0.5);
  transform: rotate(1.4deg);
}

.photo-card img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 430px;
  object-fit: cover;
  border: 0;
  border-radius: 6px;
  box-shadow: none;
  transform: none;
}

/* washi tape strips pinning the print */
.washi {
  position: absolute;
  z-index: 5;
  width: 104px;
  height: 30px;
  opacity: 0.85;
  background:
    repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0 6px, rgba(255, 255, 255, 0) 6px 12px),
    var(--butter);
  box-shadow: 0 4px 10px -6px rgba(20, 40, 50, 0.5);
  -webkit-mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
  mask: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent);
}

/* centred on the card's top corners so each strip sits OVER the corner —
   half on the photo, half off — like a real piece of tape pinning it down */
.washi-tl { top: 5px; left: -36px; transform: rotate(-45deg); }
.washi-tr { top: 5px; right: -36px; transform: rotate(45deg); background-color: var(--blush); }

/* yellow post-it note */
.note {
  position: absolute;
  z-index: 6;
  max-width: 152px;
  padding: 0.5rem 0.95rem 0.65rem;
  background: var(--butter);
  color: #6a4a14;
  font-family: var(--script-pen);
  font-size: 1.4rem;
  line-height: 1.04;
  text-align: center;
  border-radius: 3px;
  box-shadow: 0 14px 24px -14px rgba(20, 40, 50, 0.5);
  transform: rotate(-5deg);
}

.note .heart { color: var(--coral); }

/* pink scalloped badge */
.scallop-badge {
  position: absolute;
  z-index: 6;
  display: grid;
  place-items: center;
  width: 130px;
  height: 130px;
  text-align: center;
  transform: rotate(7deg);
}

.scallop-badge .scallop-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  /* shadow lives INSIDE the svg (feDropShadow on the <g>) — a CSS drop-shadow here
     turns into a square on iOS Safari because the badge's transformed parent
     composites the svg as a rectangular layer */
  overflow: visible;
}

.scallop-badge .scallop-bg circle { fill: var(--blush); }

.scallop-badge .scallop-text {
  position: relative;
  z-index: 1;
  color: #2b3c47;
  font: 800 0.74rem/1.22 var(--body);
  letter-spacing: 0.03em;
}

.scallop-badge .heart {
  display: block;
  margin-top: 0.22rem;
  color: var(--coral);
  font-size: 0.95rem;
}

/* ---- doodle colour + fill variants (base .doodle defined in Mood C) ---- */
.doodle-navy { color: var(--teal-deep); }
.doodle-sun { color: var(--sun); }
.doodle-sage { color: var(--sage-mid); }
.doodle-blush { color: var(--blush); }
.doodle-white { color: #fff; }
.doodle.is-fill svg { fill: currentColor; stroke: none; }

/* confetti sprinkles */
.sprinkles {
  position: absolute;
  z-index: 3;
  width: 44px;
  height: 30px;
  pointer-events: none;
}

.sprinkles span {
  position: absolute;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--sun);
}

.sprinkles span:nth-child(1) { left: 0; top: 14px; }
.sprinkles span:nth-child(2) { left: 17px; top: 2px; background: var(--coral); }
.sprinkles span:nth-child(3) { left: 33px; top: 16px; background: var(--sage-mid); }
.sprinkles span:nth-child(4) { left: 6px; top: 30px; background: var(--sky-dark); }
.sprinkles span:nth-child(5) { left: 32px; top: 32px; background: var(--sun); }
.sprinkles span:nth-child(6) { left: 48px; top: 6px; background: var(--coral); }

/* ---- hero decoration placement (anchored to .hero-figure) ---- */
.hero-figure { overflow: visible; }
.hero-figure .hero-note { left: -7%; bottom: 7%; }
.hero-figure .hero-badge { right: -7%; bottom: -7%; }

/* =========================================================
   HOME HERO — MOBILE (≤900px).
   The desktop collage (copy beside a tall tilted polaroid with
   stickers over the print) cannot compress into a phone column —
   the photo scrunches and the stickers bury the subject. Instead:
   the copy reads first at full width, then the polaroid gets the
   whole row as a landscape print; washi tape stays on the top
   corners and the note + badge pin the BOTTOM frame edge, clear
   of the people in the photo.
   Must stay below the scrapbook layer: the two-column grid it
   re-declares would otherwise win the cascade (it once did,
   silently disabling the old stack rule).
   ========================================================= */
@media (max-width: 900px) {
  .home-hero .section-inner {
    grid-template-columns: 1fr;
    gap: 2.3rem;
  }

  .home-hero .hero-copy {
    max-width: 100%;
  }

  /* eyebrow on one line: slightly smaller + tighter tracking so the default
     copy fits 320px-up without wrapping (still wraps gracefully if the
     client writes something longer in wp-admin) */
  .home-hero .eyebrow {
    font-size: clamp(0.66rem, 3.1vw, 0.86rem);
    letter-spacing: 0.15em;
  }

  /* one line ("My Happy Place"), not the desktop word-stack — sized to fit
     a single line from 320px up. inline-block keeps the script word's tilt. */
  .home-hero h1 {
    white-space: normal;
    font-size: clamp(2.1rem, 10.5vw, 3.4rem);
  }

  /* breathing room under the headline — the script word's descenders were
     touching the subtitle */
  .home-hero .hero-subtitle {
    margin-top: 0.8rem;
  }

  .home-hero h1 .hl-word {
    display: inline-block;
  }

  .home-hero h1 .uline {
    display: inline-block;
    /* the -3deg tilt swings the script's tail toward "Place" — a bit more
       room on the right keeps the gaps looking even */
    margin: 0 0.2em 0 0.12em;
  }

  .home-hero .hero-blob-sun,
  .home-hero .hero-blob-coral {
    display: none;
  }

  .hero-figure {
    width: 100%;
    max-width: 540px;
    margin-inline: auto;
    /* the badge hangs off the frame's bottom edge into this space */
    padding-bottom: 2.9rem;
  }

  .photo-card {
    transform: rotate(1.2deg);
  }

  .photo-card img {
    height: auto;
    aspect-ratio: 3 / 2;
  }

  .hero-figure .hero-note {
    left: 2px;
    bottom: 1.6rem;
    font-size: 1.22rem;
  }

  .hero-figure .hero-badge {
    right: 2px;
    bottom: 0;
    width: 102px;
    height: 102px;
  }
}

@media (max-width: 560px) {
  /* corner tapes: keep them mostly on-canvas at phone width */
  .washi-tl { left: -20px; }
  .washi-tr { right: -20px; }

  /* CTAs become comfortable full-width pills */
  .home-hero .actions {
    flex-direction: column;
    align-items: stretch;
  }

  .home-hero .actions .button {
    width: 100%;
  }
}

/* ---- wavy white divider where a tinted band meets the cream paper ---- */
.wave-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  z-index: 3;
  line-height: 0;
  pointer-events: none;
}

.wave-divider svg {
  display: block;
  width: 100%;
  height: clamp(42px, 6vw, 86px);
}

.wave-divider path { fill: #ffffff; }

/* the "why" section starts near-white right under the wave, then settles into
   the pale-blue canvas — so the single white wave reads as one clean edge */
.start-section {
  background: linear-gradient(180deg, #ffffff 0%, rgba(255, 255, 255, 0) 16%);
}

/* ---- why section: split layout — heading text left, 4 cards right ---- */
.start-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(320px, 1fr);
  grid-template-areas:
    "cards intro"
    "cta   cta";
  align-items: center;
  gap: clamp(1.6rem, 3.5vw, 2.8rem) clamp(1.6rem, 4vw, 3.2rem);
}

.start-intro { grid-area: intro; }
.start-layout .value-grid { grid-area: cards; margin: 0; }
.start-layout .why-cta { grid-area: cta; justify-content: center; }

.start-section .section-heading {
  max-width: none;
  margin: 0;
  text-align: left;
}

.start-section .section-heading h2::after { display: none; }

@media (max-width: 1040px) {
  .start-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "intro" "cards" "cta";
    justify-items: center;
    text-align: center;
  }

  .start-section .section-heading { text-align: center; }
  .start-layout .why-cta { justify-content: center; }
}

/* wavy coral underline under ONE emphasised word (mirrors hero "Happy") */
.uline-coral {
  position: relative;
  white-space: nowrap;
  font-style: italic;
  color: var(--sky-dark);
}

.uline-coral::after {
  content: "";
  position: absolute;
  left: -5%;
  right: -5%;
  bottom: -0.22em;
  height: 0.44em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 140 26' fill='none' stroke='%23e07a5f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 15C34 7 64 21 96 12 116 6 128 17 134 11'/%3E%3Cpath d='M11 20C41 13 71 24 101 17 119 13 129 21 133 16'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

/* ---- value cards: circular pastel icons, centred, heart divider ---- */
.value-card {
  justify-items: center;
  text-align: center;
}

.value-icon {
  width: 74px;
  height: 74px;
  border-radius: 50%;
}

.value-card:nth-child(4) .value-icon {
  background: linear-gradient(140deg, var(--lilac-soft), var(--lilac));
  color: #5f4b87;
}

.card-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: auto;
  padding-top: 0.95rem;
  color: var(--coral);
  font-size: 1.55rem;
}

.card-divider::before,
.card-divider::after {
  content: "";
  width: 44px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}

.value-card:nth-child(2) .card-divider { color: #c7972a; }
.value-card:nth-child(3) .card-divider { color: var(--sky-dark); }
.value-card:nth-child(4) .card-divider { color: #6f5a96; }

/* ---- closing CTA strip: handwritten note + arrow + sage pill ---- */
.why-cta {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.4rem 1rem;
  margin-top: clamp(2.4rem, 4vw, 3.6rem);
}

.cta-btn-wrap {
  position: relative;
  display: inline-flex;
}

.cta-btn-wrap .cta-burst {
  position: absolute;
  z-index: 1;
  top: -21px;
  right: -20px;
  width: 48px;
  height: 48px;
  transform: rotate(42deg);
}

/* stair-step the value cards (desktop only) — 2nd & 4th sit higher */
@media (min-width: 1041px) {
  .start-layout .value-card:nth-child(even) {
    transform: translateY(-26px);
  }
}

.handnote {
  margin: 0;
  font-family: var(--script-pen);
  font-size: clamp(2rem, 3.8vw, 2.8rem);
  color: var(--teal-deep);
  transform: rotate(-3deg);
}

.handnote .heart { color: var(--coral); }

.arrow-doodle {
  width: 84px;
  height: 52px;
  color: var(--teal-deep);
}

.arrow-doodle svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.button-sage {
  border-color: transparent;
  background: #5cb6af;
  color: #093a44;
  box-shadow: 0 14px 26px -14px rgba(18, 87, 106, 0.6);
}

.button-sage:hover,
.button-sage:focus-visible {
  background: #4ba8a1;
}

.btn-ico {
  display: inline-grid;
  place-items: center;
  width: 18px;
  height: 18px;
  margin-right: 0.5rem;
}

.btn-ico svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* why-section decorations sit BEHIND the cards, in the negative space */
.start-section .why-heart,
.start-section .why-spark,
.start-section .why-bloom,
.start-section .why-sprinkles { z-index: 0; }

/* deliberate composition: warm blob anchors the bottom-left under the CTA,
   coral bloom + dot cluster anchor the bottom-right, two light accents up top */
.start-section .why-blob {
  left: -56px;
  bottom: -46px;
  width: 280px;
  height: 214px;
  background: var(--sun-soft);
  border-radius: 52% 48% 44% 56% / 60% 58% 42% 40%;
  opacity: 0.5;
}

.start-section .why-heart { left: 4.5%; top: 27%; width: 30px; height: 30px; }
.start-section .why-spark { right: 5%; top: 11%; width: 30px; height: 30px; }
.start-section .why-bloom { right: 2.5%; bottom: 7%; width: 92px; height: 92px; opacity: 0.9; }
.start-section .why-sprinkles { right: 10%; bottom: 26%; width: 56px; height: 40px; }

/* classes section: white cards on the blue canvas (so content pops),
   taped photos, chip tags, wavy underline, light doodles */
.classes-section { background: transparent; margin-top: -5.5rem; }
.classes-section .section-motif { color: #ffffff; opacity: 0.16; }
.classes-section .section-heading h2::after { display: none; }

.class-card { position: relative; }

/* category tags → little pastel chips; "best first class" goes solid coral
   so the recommended starting point reads first */
.class-card .tag {
  display: inline-block;
  margin-bottom: 0.85rem;
  padding: 0.34rem 0.74rem;
  border-radius: 999px;
  background: #fde8e0;
  color: var(--coral-dark);
  font-size: 0.68rem;
}

.class-panel .class-card:nth-child(1) .tag { background: var(--coral); color: #fff; }
.class-panel .class-card:nth-child(2) .tag { background: #fbe7c4; color: #9a6a18; }
.class-panel .class-card:nth-child(3) .tag { background: #d8eef4; color: var(--sky-dark); }

.class-card h3 { font-size: 1.4rem; }

.class-panel .class-card:first-child { box-shadow: 0 32px 60px -28px rgba(12, 64, 78, 0.6); }

.classes-section .cls-blob,
.classes-section .cls-spark,
.classes-section .cls-heart,
.classes-section .cls-sprinkles { z-index: 0; }

.classes-section .cls-blob {
  top: 16%;
  right: -50px;
  width: 240px;
  height: 200px;
  background: var(--mint);
  border-radius: 54% 46% 48% 52% / 58% 56% 44% 42%;
  opacity: 0.42;
}

.classes-section .cls-spark { right: 6%; top: 11%; width: 30px; height: 30px; }
.classes-section .cls-heart { left: 3%; top: 34%; width: 30px; height: 30px; }
.classes-section .cls-sprinkles { right: 7%; bottom: 16%; width: 58px; height: 42px; }

/* schedule section: consistent heading + calendar-tile days + light doodles */
.schedule-head {
  margin-bottom: 2.6rem;
}

.schedule-head h2 {
  font-size: clamp(2.1rem, 3.3vw, 3.05rem);
  line-height: 1.05;
}

.schedule-card:nth-child(2) .sc-day { background: var(--sky-dark); }
.schedule-card:nth-child(3) .sc-day { background: #8e76b8; }

.schedule-section { margin-top: -6rem; }

.schedule-section .sch-spark,
.schedule-section .sch-sprinkles { z-index: 0; }

.schedule-section .sch-spark { right: 5%; top: 16%; width: 30px; height: 30px; }
.schedule-section .sch-sprinkles { left: 4%; bottom: 16%; width: 56px; height: 40px; }

/* pricing section ("Mandala in the Margin"): blue canvas, with one large
   sky line-mandala bleeding off the bottom-right corner — masked so it
   dissolves toward the cards and never tucks under one — plus a single quiet
   hand-note in the bottom-left margin. The cards keep all the attention. */
.pricing-section { background: transparent; }

.pricing-section .section-motif.pricing-mandala {
  left: auto;
  right: -150px;
  bottom: -175px;
  width: 540px;
  height: 540px;
  color: var(--sky);
  opacity: 0.5;
  -webkit-mask-image: radial-gradient(82% 82% at 82% 82%, #000 46%, transparent 100%);
          mask-image: radial-gradient(82% 82% at 82% 82%, #000 46%, transparent 100%);
}

/* reuse the site's slow-turn motion so the corner motif quietly breathes,
   matching .footer-motif / .feature-motif. transform sits on the child svg,
   not the masked parent, so there is no filter/mask interaction. */
.pricing-section .section-motif.pricing-mandala .mandala {
  transform-origin: 50% 50%;
  animation: turn 200s linear infinite;
}

.pricing-note {
  position: absolute;
  z-index: 1;
  left: clamp(1.5rem, 4vw, 3.3rem);
  bottom: 2.1rem;
  margin: 0;
  font-size: clamp(1.3rem, 2.3vw, 1.65rem);
  line-height: 1.15;
  color: var(--sky-dark);
  transform: rotate(-4deg);
  pointer-events: none;
}
.pricing-note .heart { color: var(--coral); }

@media (max-width: 760px) {
  .pricing-section .section-motif.pricing-mandala {
    width: 360px;
    height: 360px;
    right: -120px;
    bottom: -120px;
  }
  .pricing-note { display: none; }
}

/* ---- slim footer: contact strip + socials, wavy crest, coral bloom ---- */
.site-footer.slim {
  padding: clamp(1rem, 1.8vw, 1.5rem) clamp(1.2rem, 4vw, 3.5rem) clamp(2.6rem, 4.2vw, 3.8rem);
  /* uniform teal-deep top so the breathe waves (home) flow straight in */
  background: linear-gradient(180deg, var(--teal-deep), var(--teal-deeper));
}

.footer-crest {
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  z-index: 1;
  line-height: 0;
  pointer-events: none;
}

.footer-crest svg {
  display: block;
  width: 100%;
  height: clamp(40px, 5vw, 72px);
  transform: rotate(180deg);
}

.footer-crest .wave-front { fill: var(--teal-deep); }

.footer-bloom {
  position: absolute;
  right: 4%;
  top: 8%;
  z-index: 1;
  width: 120px;
  height: 120px;
  color: var(--coral);
  opacity: 0.9;
  pointer-events: none;
}

.footer-bloom svg { width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }

.footer-slim {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  gap: 1.4rem;
  justify-items: center;
  text-align: center;
}

.footer-slim .footer-mark { width: 56px; color: #fff; }

.footer-slim .footer-name {
  font-family: var(--display);
  font-size: 1.7rem;
  font-weight: 500;
  color: #fff;
}

.footer-contact {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem 1.6rem;
  color: #d7edf2;
}

.footer-contact a,
.footer-contact span {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-width: 0;
  overflow-wrap: anywhere;
  color: #eaf6f9;
  font-weight: 600;
}

.footer-contact svg {
  width: 17px;
  height: 17px;
  fill: none;
  stroke: #94cdd9;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.footer-slim .footer-social { margin-top: 0.2rem; }

.footer-fine {
  margin: 0.4rem 0 0;
  color: #9fd0db;
  font-size: 0.82rem;
}

/* ---- combined footer: invitation (left) + studio details (right) ---- */
.footer-combined-inner {
  position: relative;
  z-index: 2;
  width: min(100%, var(--max));
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(280px, 1fr);
  align-items: stretch;
  gap: clamp(2.5rem, 5vw, 5rem);
}

/* left — invitation, left-aligned, button under the copy */
.footer-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

.footer-cta-eyebrow {
  margin: 0;
  color: #f4b69c;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-size: 0.8rem;
}

.footer-cta-eyebrow::before {
  content: "—  ";
  color: #e0815f;
}

.footer-cta-title {
  margin: 0.4rem 0 0.6rem;
  font-family: var(--display);
  font-weight: 500;
  color: #fff;
  font-size: clamp(1.95rem, 3.4vw, 2.75rem);
  line-height: 1.05;
}

.footer-cta-sub {
  margin: 0;
  max-width: 44ch;
  color: #cfe6ec;
  font-size: clamp(1rem, 1.4vw, 1.12rem);
  line-height: 1.5;
}

.footer-cta-btn {
  margin-top: 1.15rem;
  min-height: 50px;
  padding: 0.8rem 2.1rem;
  font-size: 1.02rem;
}

.footer-cta-note {
  margin: 0.6rem 0 0;
  color: #9fd0db;
  font-size: 0.85rem;
}

/* right — studio details, left-aligned, contact stacked, split by a rule */
.footer-details {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1.05rem;
  text-align: left;
  border-left: 1px solid rgba(255, 255, 255, 0.15);
  padding-left: clamp(2rem, 4vw, 4.5rem);
}

.footer-brand-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.footer-details .footer-mark {
  width: 46px;
  color: #fff;
  display: grid;
  place-items: center;
}

.footer-details .footer-mark svg {
  width: 100%;
  height: auto;
  fill: currentColor;
}

.footer-details .footer-name {
  font-family: var(--display);
  font-size: 1.5rem;
  font-weight: 500;
  color: #fff;
}

.footer-contact--stack {
  flex-direction: column;
  flex-wrap: nowrap;
  align-items: flex-start;
  justify-content: flex-start;
}

.footer-details .footer-fine {
  margin: 0;
}

@media (max-width: 820px) {
  .footer-combined-inner {
    grid-template-columns: 1fr;
    gap: 2.4rem;
  }

  .footer-details {
    border-left: 0;
    padding-left: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    padding-top: 2.4rem;
  }
}

/* mobile: thin the hero confetti so the photo + key badges stay legible */
@media (max-width: 760px) {
  .start-section .why-heart,
  .start-section .why-spark,
  .start-section .why-bloom,
  .start-section .why-sprinkles { display: none; }

  /* (hero note/badge mobile placement lives in "HOME HERO — MOBILE") */
  .why-cta { gap: 0.2rem 0.6rem; }
  .why-cta .arrow-doodle { display: none; }
}

/* =========================================================
   Training & Events (/programs/) — two-chapter redesign.
   Chapter one: the whole teacher-training cluster on ONE
   immersive deep-teal canvas (the home feature-band gradient,
   promoted to a full section) that pours, via a teal wave
   seam, into chapter two — a light "studio life" half where
   events + blog read as a calm editorial spread. All scoped
   under .pr-* (+ .pr-train-scoped overrides of .section-heading)
   so nothing leaks onto other pages.
   ========================================================= */

/* ---- chapter one: immersive teal teacher-training ---- */
.pr-train {
  position: relative;
  scroll-margin-top: 88px;
  color: #eaf6f9;
  padding-bottom: clamp(120px, 13vw, 168px);
  background:
    radial-gradient(120% 80% at 82% -6%, rgba(118, 204, 228, 0.26), rgba(118, 204, 228, 0) 58%),
    linear-gradient(178deg, #1f7d96 0%, #176276 46%, #12576a 72%, #0e4655 calc(100% - 92px), rgba(14, 70, 85, 0) calc(100% - 92px));
}
.pr-train-inner { position: relative; z-index: 1; }
.pr-train-motif { position: absolute; z-index: 0; top: 6%; right: -90px; width: 360px; height: 360px; color: #fff; opacity: 0.09; pointer-events: none; }
.pr-train-motif svg { width: 100%; height: 100%; animation: turn 200s linear infinite; }
.pr-train .pr-chapter-tag { margin: 0 0 0.4rem; color: #ffd5c6; font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1; }
.pr-train .section-heading { max-width: 760px; }
.pr-train .section-heading h2 { color: #fff; }
.pr-train .section-heading .eyebrow { color: #ffd5c6; }
.pr-train .section-heading p:last-child { color: #d2ebf1; }
.pr-train .pr-eyebrow { margin-bottom: 0.7rem; color: #ffd5c6; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.pr-train .pr-eyebrow::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 0.6rem; vertical-align: middle; background: currentColor; border-radius: 2px; }

.pr-glass { border-radius: var(--radius); background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); box-shadow: none; }

.pr-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem; margin-top: 0.5rem; }
.pr-pillar { padding: 1.5rem; }
.pr-pill-label { color: #ffd5c6; font-size: 0.82rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }
.pr-pillar h3 { margin: 0.6rem 0 0.45rem; font-family: var(--body); font-size: 1.28rem; font-weight: 700; color: #fff; }
.pr-pillar p { margin: 0; color: #d2ebf1; }

.pr-curric { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(280px, 1fr); align-items: start; gap: clamp(1.6rem, 4vw, 3rem); margin-top: 2.4rem; }
.pr-display-h3 { margin: 0 0 0.6rem; font-family: var(--display); font-weight: 480; font-size: clamp(1.7rem, 3vw, 2.4rem); line-height: 1.05; color: #fff; }
.pr-lede { color: #d2ebf1; }
.pr-checks { display: grid; gap: 0.7rem; padding: 0; margin: 1.2rem 0 0; list-style: none; }
.pr-checks li { position: relative; padding-left: 1.7rem; font-weight: 500; color: #eaf6f9; }
.pr-checks li::before { content: ""; position: absolute; left: 0; top: 0.5rem; width: 9px; height: 9px; border-radius: 50%; background: var(--sun); }
.pr-plaque { padding: 1.5rem 1.6rem; }
.pr-plaque-list { display: grid; gap: 0.95rem; margin: 1rem 0 0; }
.pr-plaque-list div { display: grid; gap: 0.15rem; }
.pr-plaque-list dt { color: #ffd5c6; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; }
.pr-plaque-list dd { margin: 0; font-size: 1.04rem; font-weight: 500; color: #fff; }

.pr-pathwrap { margin-top: 2.6rem; }
.pr-path-eyebrow { margin-bottom: 1.1rem; }
.pr-path { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.2rem; }
.pr-path::before { content: ""; position: absolute; top: 46px; left: 6%; right: 6%; border-top: 1px dashed rgba(255, 255, 255, 0.32); z-index: 0; }
.pr-step { position: relative; z-index: 1; padding: 1.35rem; }
.pr-step strong { display: block; font-family: var(--display); font-size: 1.7rem; color: #ffb89c; }
.pr-step h3 { margin: 0.5rem 0 0.4rem; font-family: var(--body); font-size: 1.12rem; font-weight: 700; color: #fff; }
.pr-step p { margin: 0; color: #d2ebf1; font-size: 0.96rem; }

.pr-seam { position: absolute; left: 0; right: 0; bottom: 0; line-height: 0; pointer-events: none; }
/* min height (96px) must exceed the gradient's transparent strip (92px) at
   every viewport, or a thin band of body canvas shows above the wave. */
.pr-seam svg { display: block; width: 100%; height: clamp(96px, 10vw, 116px); }
.pr-seam path { fill: #0e4655; }

/* ---- shared studio-life atoms ---- */
.pr-life { background: transparent; scroll-margin-top: 88px; }
.pr-chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.26rem 0.7rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.03em; }
.pr-chip::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; }
.pr-chip.is-coral { background: #fbe2da; color: var(--coral-dark); }
.pr-chip.is-sky { background: #d8eef4; color: var(--sky-dark); }
.pr-chip.is-sage { background: var(--sage-soft); color: #4f7a5f; }
.pr-kicker { display: inline-flex; align-self: start; padding: 0.26rem 0.66rem; border-radius: 999px; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; }
.pr-kicker.is-sky { background: #d8eef4; color: var(--sky-dark); }
.pr-kicker.is-sage { background: var(--sage-soft); color: #4f7a5f; }
.pr-kicker.is-coral { background: #fbe2da; color: var(--coral-dark); }
.pr-meta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.pr-meta-line { color: var(--muted); font-size: 0.84rem; font-weight: 700; letter-spacing: 0.02em; }
.pr-byline { margin: 0; color: var(--muted); font-size: 0.82rem; font-weight: 600; }
.pr-textlink { display: inline-flex; color: var(--sky-dark); font-weight: 700; transition: transform 160ms ease; }
.pr-textlink:hover { transform: translateX(3px); }
.pr-serif { font-family: var(--display); font-weight: 480; letter-spacing: -0.01em; }

/* ---- chapter two: editorial events + blog ---- */
.pr-mag-rule { display: flex; align-items: center; gap: 1.4rem; padding-bottom: 1.4rem; border-bottom: 2px solid var(--coral); margin-bottom: 2.4rem; }
.pr-mag-num { font-family: var(--display); font-size: clamp(3rem, 7vw, 5.4rem); font-weight: 480; line-height: 0.8; color: var(--coral); }
.pr-eyebrow-dark { margin-bottom: 0.7rem; color: var(--coral-dark); font-size: 0.82rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; }
.pr-eyebrow-dark::before { content: ""; display: inline-block; width: 22px; height: 2px; margin-right: 0.6rem; vertical-align: middle; background: currentColor; border-radius: 2px; }
.pr-mag-title { font-family: var(--display); font-weight: 480; font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.04; }
.pr-mag-events { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: clamp(1.6rem, 3.5vw, 3rem); align-items: start; }
.pr-mag-feature { border-radius: var(--radius); overflow: hidden; background: var(--white); box-shadow: var(--shadow-soft); }
.pr-mag-fmedia { position: relative; }
.pr-mag-fmedia img { width: 100%; height: 250px; object-fit: cover; }
.pr-fe-date { position: absolute; top: 16px; left: 16px; display: grid; justify-items: center; align-content: center; width: 70px; height: 80px; border-radius: 16px; background: var(--coral); color: #fff; box-shadow: 0 14px 24px -12px rgba(196, 80, 47, 0.6); }
.pr-fe-date span { font-size: 0.78rem; font-weight: 800; text-transform: uppercase; }
.pr-fe-date strong { font-size: 2rem; line-height: 1; }
.pr-mag-feature > div { padding: clamp(1.4rem, 2.4vw, 2rem); }
.pr-mag-feature h3 { margin: 0 0 0.4rem; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.08; }
.pr-mag-feature > div > p { margin: 0 0 1rem; }
.pr-agenda { list-style: none; margin: 0; padding: 0; }
.pr-agenda-row { display: grid; grid-template-columns: 58px 1fr auto; gap: 1rem; align-items: center; padding: 1.1rem 0; border-bottom: 1px solid var(--line); }
.pr-agenda-row:first-child { padding-top: 0; }
.pr-ag-date { display: grid; justify-items: center; align-content: center; width: 58px; height: 62px; border-radius: 12px; background: #eaf4f7; color: var(--teal-deep); }
.pr-ag-date span { font-size: 0.68rem; font-weight: 800; text-transform: uppercase; }
.pr-ag-date strong { font-size: 1.5rem; line-height: 1; }
.pr-ag-when { margin: 0 0 0.15rem; color: var(--muted); font-size: 0.8rem; font-weight: 700; letter-spacing: 0.02em; }
.pr-ag-main h4 { margin: 0; font-size: 1.16rem; font-weight: 700; }
.pr-ag-act { display: grid; justify-items: end; gap: 0.45rem; text-align: right; }
.pr-mag-blog { position: relative; margin-top: clamp(2.6rem, 5vw, 4rem); padding-top: clamp(2rem, 3.5vw, 3rem); border-top: 1px solid var(--line); }
.pr-mag-kicker { margin-bottom: 1.4rem; }
.pr-mag-lead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(1.4rem, 3vw, 2.6rem); align-items: center; }
.pr-mag-leadmedia { overflow: hidden; border-radius: var(--radius); }
.pr-mag-leadmedia img { width: 100%; height: 320px; object-fit: cover; transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1); }
.pr-mag-lead:hover .pr-mag-leadmedia img { transform: scale(1.05); }
.pr-mag-lead > div { display: grid; gap: 0.6rem; justify-items: start; }
.pr-lead-title { font-size: clamp(1.8rem, 3vw, 2.6rem); line-height: 1.05; }
.pr-mag-secondary { list-style: none; margin: 2rem 0 0; padding: 0; display: grid; gap: 1.2rem; }
.pr-mag-srow { display: grid; grid-template-columns: 96px 1fr auto; gap: 1.2rem; align-items: center; padding-top: 1.2rem; border-top: 1px solid var(--line); }
.pr-mag-srow img { width: 96px; height: 72px; object-fit: cover; border-radius: 10px; }
.pr-mag-srow h4 { margin: 0.3rem 0 0.2rem; font-size: 1.2rem; font-weight: 700; }
.pr-note { position: absolute; top: -0.2rem; right: 0; color: var(--coral-dark); font-size: 1.55rem; line-height: 1; transform: rotate(-4deg); }
.pr-note .heart { color: var(--coral); }

@media (max-width: 900px) {
  .pr-pillars, .pr-path { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .pr-path::before { display: none; }
  .pr-curric, .pr-mag-events, .pr-mag-lead { grid-template-columns: 1fr; }
}
@media (max-width: 760px) {
  .pr-pillars, .pr-path { grid-template-columns: 1fr; }
  .pr-mag-srow { grid-template-columns: 72px 1fr; }
  .pr-mag-srow .pr-textlink { grid-column: 2; }
  .pr-note { position: static; display: inline-block; margin-bottom: 0.6rem; }
}

/* very narrow phones: slim the brand so Book Now + burger still fit */
@media (max-width: 420px) {
  .brand small {
    display: none;
  }

  .brand-mark {
    width: 42px;
  }

  .header-inner {
    gap: 0.5rem;
  }

  .header-cta {
    padding: 0.38rem 0.8rem;
    font-size: 0.84rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }
}