/* ==========================================================================
   Brightpath Early Learning Academy — main stylesheet
   1 Tokens · 2 Base · 3 Layout · 4 Buttons · 5 Header · 6 Hero
   7 Components · 8 Inner pages · 9 Footer · 10 Responsive
   ========================================================================== */

/* 1. Tokens ---------------------------------------------------------------- */
:root {
  --teal: #12b48a;
  --teal-dark: #0d8f6e;
  --teal-soft: #e2f6ef;
  --orange: #ff8a5b;
  --orange-soft: #fff0e8;
  --yellow: #ffc93c;
  --yellow-soft: #fff6dd;
  --sky: #3aa8e0;
  --sky-soft: #e4f3fc;
  --plum: #7c5cf5;
  --plum-soft: #eee9ff;

  --ink: #0f2f28;
  --ink-2: #1c4a40;
  --body: #55706a;
  --muted: #86a09a;
  --line: #e3ede9;
  --bg: #f7fbf9;
  --white: #ffffff;

  --r-sm: 10px;
  --r-md: 16px;
  --r-lg: 22px;
  --r-xl: 34px;

  --shadow-sm: 0 4px 16px rgba(15, 47, 40, .05);
  --shadow-md: 0 12px 34px rgba(15, 47, 40, .08);
  --shadow-lg: 0 24px 54px rgba(15, 47, 40, .12);

  --head: "Fredoka", "Trebuchet MS", system-ui, sans-serif;
  --text: "Plus Jakarta Sans", "Segoe UI", system-ui, sans-serif;

  --container: 1656px;
  --gutter: clamp(18px, 2.5vw, 40px);
  --section-y: 110px;
}

/* 2. Base ------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  font-family: var(--text);
  font-size: 16.5px;
  line-height: 1.78;
  color: var(--body);
  background: var(--bg);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; height: auto; display: block; }
/* Sprite icons carry no viewBox of their own — safe default size, zero
   specificity so any component rule still wins. */
svg:where(:not([viewBox])) { width: 18px; height: 18px; flex: none; }

h1, h2, h3, h4, h5 { font-family: var(--head); color: var(--ink); line-height: 1.22; margin: 0 0 .5em; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 1.35rem + 3.4vw, 3.8rem); letter-spacing: -.02em; }
h2 { font-size: clamp(1.8rem, 1.2rem + 2.2vw, 2.7rem); letter-spacing: -.015em; }
h3 { font-size: clamp(1.26rem, 1.05rem + .8vw, 1.55rem); }
h4 { font-size: 1.16rem; }
p { margin: 0 0 1.1rem; }
p:last-child { margin-bottom: 0; }

a { color: var(--teal); text-decoration: none; transition: color .2s ease; }
a:hover { color: var(--orange); }
ul, ol { margin: 0 0 1.1rem; padding-left: 1.15rem; }
li { margin-bottom: .4rem; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 6px; }
::selection { background: var(--teal); color: #fff; }

.skip-link { position: absolute; left: 12px; top: -60px; z-index: 999; background: var(--ink); color: #fff; padding: 10px 18px; border-radius: 0 0 8px 8px; transition: top .2s ease; }
.skip-link:focus { top: 0; color: #fff; }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* 3. Layout ---------------------------------------------------------------- */
/* Main content container: 1656px wide, centred. Section backgrounds stay
   full-bleed behind it, so the design reads full-screen on desktop while the
   content itself is locked to a 1656px column. Never wider than the window,
   so there is no horizontal scrolling. */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); position: relative; }
.section--tight { padding-block: 70px; }
.section--mint { background: var(--teal-soft); }
.section--peach { background: var(--orange-soft); }
.section--white { background: var(--white); }
.section--dark { background: var(--ink); color: #b7cdc7; }
.section--dark h2, .section--dark h3, .section--dark h4 { color: #fff; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.text-center { text-align: center; }
.mb-0 { margin-bottom: 0; }
.mt-4 { margin-top: 2rem; }

/* Dotted decoration */
.dots {
  position: absolute; width: 150px; height: 120px; pointer-events: none; z-index: 0; opacity: .5;
  background-image: radial-gradient(var(--teal) 2px, transparent 2px);
  background-size: 18px 18px;
}
.dots--tl { top: 40px; left: 10px; }
.dots--br { bottom: 40px; right: 10px; }
.section > .container { position: relative; z-index: 1; }

/* Section heading */
.sec-head { max-width: 640px; margin-bottom: 52px; }
.sec-head.text-center { margin-inline: auto; }
.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--head); font-weight: 500; font-size: .92rem; letter-spacing: .12em;
  text-transform: uppercase; color: var(--teal); margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--orange); }
.sec-head.text-center .eyebrow::after { content: ""; width: 26px; height: 3px; border-radius: 2px; background: var(--orange); }
.sec-title { margin-bottom: .4em; }
.sec-title span { color: var(--teal); }
.sec-head p { margin-bottom: 0; }

/* 4. Buttons --------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--head); font-weight: 500; font-size: 1rem;
  padding: 14px 28px; border-radius: var(--r-md); border: 2px solid transparent;
  cursor: pointer; text-align: center; line-height: 1.35;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }
.btn--primary { background: var(--teal); color: #fff; box-shadow: 0 10px 22px rgba(18, 180, 138, .28); }
.btn--primary:hover { background: var(--teal-dark); color: #fff; }
.btn--orange { background: var(--orange); color: #fff; box-shadow: 0 10px 22px rgba(255, 138, 91, .3); }
.btn--orange:hover { background: #f9754a; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { border-color: var(--teal); color: var(--teal); background: var(--white); }
.btn--light { background: #fff; color: var(--ink); }
.btn--light:hover { background: var(--yellow); color: var(--ink); }
.btn--sm { padding: 10px 20px; font-size: .94rem; }
.btn--block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

.link-arrow { font-family: var(--head); font-weight: 500; display: inline-flex; align-items: center; gap: 8px; }
.link-arrow svg { width: 16px; height: 16px; transition: transform .2s ease; }
.link-arrow:hover svg { transform: translateX(4px); }

/* 5. Header ---------------------------------------------------------------- */
:root { --bar: var(--teal-soft); --pill: #12b48a; }

.topbar { background: var(--bar); color: var(--ink); font-size: .95rem; }
.topbar__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 6px 24px; min-height: 58px; padding-block: 8px;
}
.topbar__info { display: flex; flex-wrap: wrap; align-items: center; list-style: none; margin: 0; padding: 0; }
.topbar__info li { position: relative; display: inline-flex; align-items: center; gap: 9px; margin: 0; padding-inline: 20px; }
.topbar__info li:first-child { padding-left: 0; }
.topbar__info li + li::before {
  content: ""; position: absolute; left: 0; top: 50%; width: 1px; height: 18px;
  background: rgba(15, 47, 40, .22); transform: translateY(-50%) rotate(20deg);
}
.topbar a { color: var(--ink); font-weight: 600; }
.topbar a:hover { color: var(--pill); }
.topbar svg { width: 16px; height: 16px; color: var(--pill); }
.topbar__follow { display: flex; align-items: center; gap: 12px; }
.topbar__follow > span { font-family: var(--head); font-weight: 500; color: var(--ink); white-space: nowrap; }

.socials { display: flex; gap: 8px; list-style: none; margin: 0; padding: 0; }
.socials li { margin: 0; }
.socials a {
  width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: var(--white); color: var(--ink); box-shadow: var(--shadow-sm);
  transition: background-color .2s, color .2s, transform .2s;
}
.socials a:hover { background: var(--pill); color: #fff; transform: translateY(-2px); }
.socials svg { width: 15px; height: 15px; color: currentColor; }
.site-footer .socials a { background: rgba(255, 255, 255, .1); color: #fff; box-shadow: none; }
.site-footer .socials a:hover { background: var(--yellow); color: var(--ink); }

/* Floating pill navigation */
.site-header { position: sticky; top: 0; z-index: 60; background: var(--bar); padding-block: 14px 16px; transition: background-color .3s ease, box-shadow .3s ease; }
.nav {
  display: flex; align-items: center; gap: 18px; min-height: 84px;
  background: var(--pill); border-radius: 999px; padding: 9px 12px 9px 34px;
  box-shadow: 0 14px 34px rgba(18, 180, 138, .28);
}

.brand { display: inline-flex; align-items: center; gap: 12px; font-family: var(--head); font-weight: 600; font-size: 1.42rem; color: #fff; flex: none; }
.brand:hover { color: #fff; }
.brand__mark { width: 44px; height: 44px; flex: none; }
.brand__text { line-height: 1.05; }
.brand small { display: block; font-family: var(--text); font-size: .7rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .72); line-height: 1; }

.menu { display: flex; align-items: center; gap: 2px; list-style: none; margin: 0 auto 0 0; padding: 0; }
.menu > li { position: relative; margin: 0; display: flex; align-items: center; flex-wrap: wrap; }
.menu > li > a {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--head); font-weight: 500; font-size: 1.02rem; color: #fff;
  padding: 10px 14px; border-radius: 999px; white-space: nowrap;
  transition: color .2s ease, background-color .2s ease;
}
.menu > li:hover > a, .menu > li.is-open > a { background: rgba(255, 255, 255, .16); color: #fff; }
.menu > li.current > a { color: var(--yellow); }
.has-sub > a { padding-right: 6px; }
.sub-toggle {
  display: inline-flex; align-items: center; justify-content: center; flex: none;
  background: none; border: 0; padding: 8px 12px 8px 2px; color: #fff; cursor: pointer;
}
.sub-toggle:hover { color: var(--yellow); }
.caret { width: 12px; height: 12px; transition: transform .25s ease; }
.has-sub.is-open > .sub-toggle .caret { transform: rotate(180deg); }

.submenu {
  position: absolute; top: 100%; left: 0; margin-top: 18px; min-width: 232px;
  background: var(--white); border-radius: var(--r-md); box-shadow: var(--shadow-lg);
  list-style: none; padding: 10px; z-index: 20;
  opacity: 0; visibility: hidden; transform: translateY(10px);
  transition: opacity .22s ease, transform .22s ease, visibility .22s;
}
.submenu::before { content: ""; position: absolute; left: 0; right: 0; top: -18px; height: 18px; }
.has-sub:hover > .submenu, .has-sub.is-open > .submenu { opacity: 1; visibility: visible; transform: translateY(0); }
.submenu li { margin: 0; }
.submenu a { display: block; padding: 9px 14px; border-radius: 10px; color: var(--ink); font-weight: 600; font-size: .98rem; transition: background-color .2s, color .2s, padding-left .2s; }
.submenu a:hover { background: var(--teal-soft); color: var(--teal); padding-left: 20px; }

.nav__actions { display: flex; align-items: center; gap: 10px; flex: none; }
.icon-btn {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .18); color: #fff; border: 0; cursor: pointer; padding: 0;
  transition: background-color .2s ease, color .2s ease, transform .2s ease;
}
.icon-btn:hover { background: #fff; color: var(--ink); transform: translateY(-2px); }
.icon-btn svg { width: 19px; height: 19px; }
.icon-btn--solid { background: #fff; color: var(--ink); }
.icon-btn--solid:hover { background: var(--yellow); color: var(--ink); }

.nav-toggle { display: none; width: 52px; height: 52px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .18); cursor: pointer; padding: 0; place-items: center; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: #fff; border-radius: 2px; position: relative; transition: background-color .2s; }
.nav-toggle span::before, .nav-toggle span::after { content: ""; position: absolute; left: 0; width: 20px; height: 2px; background: #fff; border-radius: 2px; transition: transform .25s ease, top .25s ease; }
.nav-toggle span::before { top: -6px; }
.nav-toggle span::after { top: 6px; }
.nav-toggle[aria-expanded="true"] span { background: transparent; }
.nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); }

/* Search drop-panel */
.search-panel { margin-top: 16px; }
.search-panel[hidden] { display: none; }
.search-panel .container { animation: dropIn .26s ease; }
.search-panel .search-form { max-width: 620px; margin-inline: auto; background: var(--white); padding: 12px; border-radius: 999px; box-shadow: var(--shadow-md); }
.search-panel input { border-color: transparent; background: transparent; }
.search-panel input:focus { box-shadow: none; }
@keyframes dropIn { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }

.nav-backdrop { position: fixed; inset: 0; background: rgba(15, 47, 40, .5); z-index: 55; opacity: 0; visibility: hidden; transition: opacity .3s ease, visibility .3s; }
body.nav-open .nav-backdrop { opacity: 1; visibility: visible; }
body.nav-open { overflow: hidden; }

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

/* 6. Hero ------------------------------------------------------------------ */
/* Centred hero: a cut-out child either side, copy in the middle, doodles
   behind, and the white scalloped cloud edge along the bottom.
   Background must stay #fff0e8 (--orange-soft): heros_thumb3.png is not
   transparent and has that exact colour baked in. */
.hero {
  position: relative; overflow: hidden; text-align: center;
  background: var(--orange-soft);
  padding-block: 46px 116px;
}
.hero::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 50px; z-index: 3;
  background: url("../assets/img/rounded-shape-hero.png") repeat-x center bottom;
  pointer-events: none;
}
.hero .container { position: relative; z-index: 1; }

/* Doodles */
.hero__doodles { position: absolute; inset: 0; z-index: 2; pointer-events: none; overflow: visible; }
.hero__doodle { position: absolute; height: auto; max-width: none; object-fit: contain; }
.hero__doodle--balloon { top: 8px; left: 1.5%; width: 220px; animation: heroFloat 7s ease-in-out infinite; }
.hero__doodle--rocket { top: 10px; right: 6%; width: 197px; }
.hero__doodle--rainbow { top: 44px; left: 22%; width: 108px; }
.hero__doodle--cloud { bottom: 92px; left: 40%; width: 116px; }
.hero__doodle--star1 { top: 96px; left: 33%; width: 20px; }
.hero__doodle--star2 { bottom: 150px; right: 4%; width: 22px; }
@keyframes heroFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } }

/* Stage: kid — copy — kid */
.hero__stage {
  display: grid;
  grid-template-columns: minmax(0, 464px) minmax(0, 1fr) minmax(0, 578px);
  align-items: center; gap: 12px;
}
.hero__kid { width: 100%; height: auto; }
.hero__kid--left { margin-bottom: -10px; }

.hero__center { max-width: 720px; margin-inline: auto; padding-inline: 8px; }
.hero__eyebrow {
  display: block; font-family: var(--head); font-weight: 500; font-size: 1.06rem;
  color: var(--orange); margin-bottom: 8px;
}
.hero__title {
  font-size: clamp(2.1rem, 1.1rem + 3.2vw, 4rem);
  line-height: 1.14; letter-spacing: -.02em; margin-bottom: .5em; color: var(--ink);
}
.hero__title em { font-style: normal; color: var(--teal); position: relative; white-space: nowrap; }
.hero__title em::after {
  content: ""; position: absolute; left: -2%; right: -6%; bottom: -.2em; height: .22em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 20' preserveAspectRatio='none'%3E%3Cpath d='M5 13c22-11 40 3 62-2s40-9 66 3 42-1 62-6' fill='none' stroke='%23ff8a5b' stroke-width='7' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}
.hero__lead { margin: 0 auto 30px; max-width: 34rem; }

/* Pill buttons with a circular arrow badge */
.hero__btns { display: flex; flex-wrap: nowrap; gap: 14px; justify-content: center; }
.btn-hero {
  display: inline-flex; align-items: center; gap: 14px;
  padding: 7px 7px 7px 24px; border-radius: 999px;
  font-family: var(--head); font-weight: 500; font-size: .84rem;
  text-transform: uppercase; letter-spacing: .03em; line-height: 1.2;
  border: 2px solid transparent;
  transition: transform .2s ease, background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.btn-hero:hover { transform: translateY(-3px); }
.btn-hero > span { width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.btn-hero svg { width: 18px; height: 18px; }
.btn-hero--solid { background: var(--orange); color: #fff; box-shadow: 0 10px 24px rgba(255, 138, 91, .34); }
.btn-hero--solid > span { background: #fff; color: var(--ink); }
.btn-hero--solid:hover { background: #f9754a; color: #fff; }
.btn-hero--outline { background: #fff; color: var(--ink); border-color: #ecdcd2; }
.btn-hero--outline > span { background: var(--plum); color: #fff; }
.btn-hero--outline:hover { border-color: var(--plum); color: var(--plum); }

/* 7. Components ------------------------------------------------------------ */
.card {
  background: var(--white); border-radius: var(--r-lg); padding: 32px;
  border: 1px solid var(--line); box-shadow: var(--shadow-sm);
  height: 100%; display: flex; flex-direction: column;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.card p:last-of-type { margin-bottom: 16px; }
.card .link-arrow { margin-top: auto; }

.icon-box { width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center; margin-bottom: 20px; }
.icon-box svg { width: 28px; height: 28px; }
.bg-teal { background: var(--teal-soft); color: var(--teal); }
.bg-orange { background: var(--orange-soft); color: var(--orange); }
.bg-yellow { background: var(--yellow-soft); color: #d99b00; }
.bg-sky { background: var(--sky-soft); color: var(--sky); }
.bg-plum { background: var(--plum-soft); color: var(--plum); }

/* Service card — accent bar on the left */
.service {
  position: relative; background: var(--white); border-radius: var(--r-lg); padding: 30px 30px 30px 34px;
  border: 1px solid var(--line); overflow: hidden; height: 100%;
  transition: transform .28s ease, box-shadow .28s ease;
}
.service::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: var(--teal); transform: scaleY(.3); transform-origin: top; transition: transform .3s ease; }
.service:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.service:hover::before { transform: scaleY(1); }
.service h3 { display: flex; align-items: center; gap: 12px; }
.service h3 svg { width: 24px; height: 24px; color: var(--teal); }

/* Program card */
.program { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); display: flex; flex-direction: column; height: 100%; transition: transform .28s ease, box-shadow .28s ease; }
.program:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.program__media { position: relative; aspect-ratio: 16 / 11; overflow: hidden; background: var(--teal-soft); }
.program__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.program:hover .program__media img { transform: scale(1.06); }
.tag { position: absolute; top: 14px; left: 14px; background: var(--white); color: var(--ink); font-family: var(--head); font-weight: 500; font-size: .84rem; padding: 5px 14px; border-radius: 8px; box-shadow: var(--shadow-sm); }
.tag--teal { background: var(--teal); color: #fff; }
.program__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.program__body h3 a { color: inherit; }
.program__body h3 a:hover { color: var(--teal); }
.meta { display: flex; flex-wrap: wrap; gap: 8px 18px; list-style: none; margin: 0 0 14px; padding: 0; font-size: .89rem; color: var(--muted); }
.meta li { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.meta svg { width: 15px; height: 15px; color: var(--teal); }
.program__foot { margin-top: auto; padding-top: 18px; border-top: 1px solid var(--line); display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.price { font-family: var(--head); font-weight: 500; color: var(--orange); font-size: 1.16rem; }
.price small { color: var(--muted); font-size: .8rem; }

.ticks { list-style: none; padding: 0; margin: 0 0 26px; }
.ticks li { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.ticks svg { width: 22px; height: 22px; color: var(--teal); margin-top: 3px; }

.progress + .progress { margin-top: 20px; }
.progress__top { display: flex; justify-content: space-between; font-family: var(--head); font-weight: 500; color: var(--ink); margin-bottom: 8px; }
.progress__track { height: 10px; border-radius: 6px; background: var(--line); overflow: hidden; }
.progress__bar { height: 100%; border-radius: 6px; width: 0; background: var(--teal); transition: width 1.4s cubic-bezier(.2, .8, .3, 1); }
.progress:nth-child(even) .progress__bar { background: var(--orange); }

/* Stats */
.stat { text-align: center; padding: 10px; }
.stat strong { font-family: var(--head); font-weight: 600; font-size: clamp(2.1rem, 1.4rem + 2.2vw, 3rem); display: block; line-height: 1.1; color: #fff; }
.stat span { font-size: .96rem; opacity: .85; }
.stat + .stat { border-left: 1px solid rgba(255,255,255,.14); }

/* Pricing */
.plan {
  background: var(--white); border: 2px solid var(--line); border-radius: var(--r-xl); padding: 36px 32px;
  height: 100%; display: flex; flex-direction: column; position: relative;
  transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--teal); }
.plan--featured { border-color: var(--teal); box-shadow: var(--shadow-md); }
.plan__badge { position: absolute; top: -15px; left: 50%; transform: translateX(-50%); background: var(--orange); color: #fff; font-family: var(--head); font-size: .84rem; padding: 5px 18px; border-radius: 999px; white-space: nowrap; }
.plan h3 { margin-bottom: .2em; }
.plan__price { font-family: var(--head); font-weight: 600; font-size: 3rem; color: var(--teal); line-height: 1.1; margin: 12px 0 4px; }
.plan__price small { font-size: 1rem; color: var(--muted); font-weight: 500; }
.plan .ticks { margin-block: 22px; }
.plan .ticks li { margin-bottom: 10px; }
.plan .btn { margin-top: auto; }

/* Teacher */
.teacher { text-align: center; }
.teacher__media { border-radius: var(--r-xl); overflow: hidden; background: var(--teal-soft); aspect-ratio: 1; position: relative; margin-bottom: 18px; }
.teacher__media img { width: 100%; height: 100%; object-fit: cover; }
.teacher__socials { position: absolute; left: 50%; bottom: 14px; transform: translate(-50%, 16px); display: flex; gap: 8px; background: var(--white); padding: 8px 12px; border-radius: 12px; box-shadow: var(--shadow-md); opacity: 0; transition: all .28s ease; }
.teacher:hover .teacher__socials, .teacher:focus-within .teacher__socials { opacity: 1; transform: translate(-50%, 0); }
.teacher__socials a { width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--teal-soft); color: var(--teal); }
.teacher__socials a:hover { background: var(--teal); color: #fff; }
.teacher__socials svg { width: 14px; height: 14px; }
.teacher h3 { margin-bottom: .1em; }
.teacher span { color: var(--orange); font-weight: 700; font-size: .93rem; }

/* Events list */
.event-row { display: grid; grid-template-columns: 110px minmax(0, 1fr) auto; gap: 26px; align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; margin-bottom: 18px; transition: transform .25s ease, box-shadow .25s ease; }
.event-row:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.event-date { background: var(--teal); color: #fff; border-radius: var(--r-md); text-align: center; padding: 14px 6px; }
.event-date strong { display: block; font-family: var(--head); font-weight: 600; font-size: 1.9rem; line-height: 1; }
.event-date span { font-size: .84rem; text-transform: uppercase; letter-spacing: .1em; }
.event-row h3 { margin-bottom: .3em; }

/* Carousel + quotes */
.carousel { position: relative; }
.carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 52px) / 3); gap: 26px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 10px 4px 26px; margin: -10px -4px 0; scrollbar-width: none; -ms-overflow-style: none; }
.carousel__track::-webkit-scrollbar { display: none; }
.carousel__track > * { scroll-snap-align: start; }
.quote { background: var(--white); border-radius: var(--r-lg); padding: 34px; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 100%; position: relative; }
.quote__mark { position: absolute; top: 26px; right: 28px; width: 38px; height: 38px; color: var(--teal-soft); }
.quote__stars { display: flex; gap: 3px; color: var(--yellow); margin-bottom: 14px; }
.quote__stars svg { width: 18px; height: 18px; }
.quote p { color: var(--body); position: relative; z-index: 1; }
.quote__by { display: flex; align-items: center; gap: 14px; margin-top: 22px; padding-top: 20px; border-top: 1px solid var(--line); }
.quote__by img { width: 54px; height: 54px; border-radius: 14px; flex: none; object-fit: cover; }
.quote__by strong { display: block; font-family: var(--head); font-weight: 500; color: var(--ink); font-size: 1.05rem; }
.quote__by span { font-size: .88rem; color: var(--muted); }
.carousel__nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 8px; }
.carousel__btn { width: 46px; height: 46px; border-radius: 13px; border: 2px solid var(--line); background: var(--white); color: var(--ink); display: grid; place-items: center; cursor: pointer; transition: all .2s ease; }
.carousel__btn:hover:not(:disabled) { background: var(--teal); border-color: var(--teal); color: #fff; }
.carousel__btn:disabled { opacity: .4; cursor: not-allowed; }
.carousel__btn svg { width: 18px; height: 18px; }
.carousel__dots { display: flex; gap: 8px; }
.carousel__dots button { width: 10px; height: 10px; padding: 0; border-radius: 3px; border: 0; background: var(--line); cursor: pointer; transition: all .2s ease; }
.carousel__dots button.is-active { background: var(--teal); width: 26px; }

/* Blog */
.post { background: var(--white); border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--line); box-shadow: var(--shadow-sm); height: 100%; display: flex; flex-direction: column; transition: transform .28s ease, box-shadow .28s ease; }
.post:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.post__media { aspect-ratio: 16 / 10; overflow: hidden; background: var(--sky-soft); }
.post__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.post:hover .post__media img { transform: scale(1.06); }
.post__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post__body h3 { font-size: 1.22rem; }
.post__body h3 a { color: inherit; }
.post__body h3 a:hover { color: var(--teal); }

/* CTA */
.cta { background: var(--ink); border-radius: var(--r-xl); padding: 60px 48px; color: #b7cdc7; text-align: center; position: relative; overflow: hidden; }
.cta h2 { color: #fff; }
.cta p { max-width: 620px; margin: 0 auto 26px; }
.cta::before { content: ""; position: absolute; width: 320px; height: 320px; border-radius: 50%; background: rgba(18,180,138,.22); top: -140px; right: -80px; }
.cta::after { content: ""; position: absolute; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,138,91,.18); bottom: -110px; left: -50px; }
.cta > * { position: relative; z-index: 1; }
.subscribe { display: flex; gap: 12px; max-width: 520px; margin-inline: auto; flex-wrap: wrap; }
.subscribe input { flex: 1 1 240px; }

/* Forms */
.field { margin-bottom: 18px; }
.field label { display: block; font-family: var(--head); font-weight: 500; color: var(--ink); margin-bottom: 7px; }
.field label .req { color: var(--orange); }
input[type="text"], input[type="email"], input[type="tel"], input[type="date"], input[type="number"], select, textarea {
  width: 100%; font-family: var(--text); font-size: 1rem; color: var(--ink); background: var(--white);
  border: 2px solid var(--line); border-radius: var(--r-md); padding: 13px 16px;
  transition: border-color .2s ease, box-shadow .2s ease;
}
textarea { min-height: 150px; resize: vertical; }
input::placeholder, textarea::placeholder { color: #a7bcb6; }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(18,180,138,.14); }
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: #e5643f; }
.error-msg { display: block; color: #e5643f; font-size: .85rem; font-weight: 700; margin-top: 6px; }
.form-note { font-size: .89rem; color: var(--muted); }
.form-alert { display: none; align-items: center; gap: 10px; background: var(--teal-soft); color: var(--teal-dark); border-radius: var(--r-md); padding: 14px 18px; font-weight: 700; margin-bottom: 20px; }
.form-alert.is-visible { display: flex; }
.form-alert svg { width: 20px; height: 20px; }

/* Accordion */
.acc { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-md); margin-bottom: 14px; overflow: hidden; }
.acc.is-open { border-color: var(--teal); }
.acc__btn { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--head); font-weight: 500; font-size: 1.06rem; color: var(--ink); padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.acc__btn i { width: 30px; height: 30px; border-radius: 9px; background: var(--teal-soft); color: var(--teal); display: grid; place-items: center; flex: none; transition: all .3s ease; }
.acc__btn i svg { width: 14px; height: 14px; }
.acc.is-open .acc__btn i { transform: rotate(45deg); background: var(--teal); color: #fff; }
.acc__panel { max-height: 0; overflow: hidden; transition: max-height .35s ease; }
.acc__panel > div { padding: 0 24px 22px; }

/* Gallery */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 36px; }
.filters button { font-family: var(--head); font-weight: 500; font-size: .97rem; padding: 9px 22px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--white); color: var(--ink); cursor: pointer; transition: all .2s ease; }
.filters button:hover { border-color: var(--teal); color: var(--teal); }
.filters button.is-active { background: var(--teal); border-color: var(--teal); color: #fff; }
.gallery-item { border-radius: var(--r-lg); overflow: hidden; position: relative; aspect-ratio: 4 / 3; background: var(--teal-soft); }
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.gallery-item figcaption { position: absolute; inset: auto 0 0 0; padding: 40px 20px 18px; color: #fff; font-family: var(--head); background: linear-gradient(to top, rgba(15,47,40,.85), transparent); transform: translateY(6px); opacity: 0; transition: all .3s ease; }
.gallery-item:hover img { transform: scale(1.07); }
.gallery-item:hover figcaption { opacity: 1; transform: translateY(0); }
.is-hidden { display: none !important; }

/* 8. Inner pages ----------------------------------------------------------- */
.page-hero { background: var(--teal-soft); padding-block: 76px 84px; position: relative; overflow: hidden; }
.page-hero::before { content: ""; position: absolute; top: -160px; right: -120px; width: 420px; height: 420px; border-radius: 46% 54% 58% 42% / 48% 42% 58% 52%; background: rgba(255,255,255,.5); }
.page-hero::after { content: ""; position: absolute; bottom: -90px; left: -60px; width: 220px; height: 220px; border-radius: 50%; background: rgba(255,201,60,.24); }
.page-hero .container { position: relative; z-index: 1; }
.page-hero h1 { margin-bottom: .25em; }
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; font-weight: 700; font-size: .95rem; }
.crumbs li { margin: 0; color: var(--muted); }
.crumbs li + li::before { content: "/"; margin-right: 8px; }

.layout-sidebar { display: grid; grid-template-columns: minmax(0, 1fr) 336px; gap: 40px; align-items: start; }
.sidebar { position: sticky; top: 100px; }
.widget { background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 28px; margin-bottom: 24px; }
.widget:last-child { margin-bottom: 0; }
.widget h4 { margin-bottom: 18px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget ul li { margin-bottom: 10px; }
.widget ul li:last-child { margin-bottom: 0; }
.widget ul a { display: flex; justify-content: space-between; gap: 10px; color: var(--body); font-weight: 600; }
.widget ul a:hover { color: var(--teal); }
.spec-list li { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); }
.spec-list li:last-child { border-bottom: 0; padding-bottom: 0; }
.spec-list strong { font-family: var(--head); font-weight: 500; color: var(--ink); text-align: right; }
.mini-post { display: flex; gap: 14px; align-items: center; margin-bottom: 16px; }
.mini-post:last-child { margin-bottom: 0; }
.mini-post img { width: 74px; height: 68px; border-radius: 12px; object-fit: cover; flex: none; }
.mini-post strong { font-family: var(--head); font-weight: 500; font-size: 1rem; line-height: 1.35; display: block; }
.mini-post a { color: var(--ink); }
.mini-post a:hover { color: var(--teal); }
.mini-post span { font-size: .83rem; color: var(--muted); }
.tags { display: flex; flex-wrap: wrap; gap: 8px; }
.tags a { background: var(--teal-soft); color: var(--teal); font-weight: 700; font-size: .85rem; padding: 6px 14px; border-radius: 8px; }
.tags a:hover { background: var(--teal); color: #fff; }
.search-form { display: flex; gap: 8px; }
.search-form button { flex: none; width: 50px; border-radius: var(--r-md); border: 0; background: var(--teal); color: #fff; cursor: pointer; display: grid; place-items: center; }
.search-form button svg { width: 18px; height: 18px; }

.article-body h2 { margin-top: 1.8rem; }
.article-body h3 { margin-top: 1.5rem; }
.article-body img { border-radius: var(--r-lg); margin-block: 1.6rem; }
.pull-quote { background: var(--teal-soft); border-left: 5px solid var(--teal); border-radius: 0 var(--r-md) var(--r-md) 0; padding: 26px 30px; margin: 28px 0; font-family: var(--head); font-size: 1.14rem; color: var(--ink); }
.pagination { display: flex; justify-content: center; gap: 10px; margin-top: 50px; flex-wrap: wrap; }
.pagination a, .pagination span { min-width: 46px; height: 46px; display: grid; place-items: center; padding-inline: 12px; border-radius: var(--r-md); border: 2px solid var(--line); background: var(--white); font-family: var(--head); font-weight: 500; color: var(--ink); }
.pagination a:hover { border-color: var(--teal); color: var(--teal); }
.pagination .is-current { background: var(--teal); border-color: var(--teal); color: #fff; }

.info-card { display: flex; gap: 16px; align-items: flex-start; background: var(--white); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 26px; height: 100%; }
.info-card i { width: 54px; height: 54px; border-radius: 16px; display: grid; place-items: center; flex: none; }
.info-card svg { width: 24px; height: 24px; }
.info-card strong { display: block; font-family: var(--head); font-weight: 500; font-size: 1.1rem; color: var(--ink); margin-bottom: 4px; }
.info-card a { color: var(--body); }
.info-card a:hover { color: var(--teal); }

.map-embed { border-radius: var(--r-xl); overflow: hidden; border: 6px solid var(--white); box-shadow: var(--shadow-md); line-height: 0; }
.map-embed iframe { width: 100%; height: 420px; border: 0; display: block; }

.table-wrap { overflow-x: auto; border-radius: var(--r-lg); border: 1px solid var(--line); background: var(--white); }
table { width: 100%; border-collapse: collapse; min-width: 520px; }
th, td { padding: 15px 20px; text-align: left; border-bottom: 1px solid var(--line); }
th { font-family: var(--head); font-weight: 500; color: var(--ink); background: var(--teal-soft); }
tr:last-child td { border-bottom: 0; }

.to-top { position: fixed; right: 20px; bottom: 20px; z-index: 50; width: 48px; height: 48px; border-radius: 14px; border: 0; background: var(--teal); color: #fff; cursor: pointer; display: grid; place-items: center; box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(14px); transition: all .3s ease; }
.to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }
.to-top:hover { background: var(--ink); }
.to-top svg { width: 20px; height: 20px; }

.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-in { opacity: 1; transform: none; }

/* 9. Footer ---------------------------------------------------------------- */

.site-footer { background: var(--ink); color: #a8c2bb; padding-top: 74px; }
.site-footer h4 { color: #fff; margin-bottom: 20px; }
.site-footer a { color: #a8c2bb; }
.site-footer a:hover { color: var(--yellow); }
.site-footer .brand { color: #fff; }
.site-footer .brand small { color: #7f9d96; }
.footer-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 40px; padding-bottom: 54px; }
.footer-list { list-style: none; padding: 0; margin: 0; }
.footer-list li { margin-bottom: 11px; }
.footer-list a { display: inline-flex; align-items: center; gap: 9px; }
.footer-list a svg { width: 14px; height: 14px; color: var(--teal); }
.footer-contact { list-style: none; padding: 0; margin: 0; }
.footer-contact li { display: flex; gap: 12px; margin-bottom: 16px; }
.footer-contact svg { width: 18px; height: 18px; color: var(--teal); margin-top: 5px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.09); padding-block: 22px; display: flex; flex-wrap: wrap; gap: 10px 24px; align-items: center; justify-content: space-between; font-size: .92rem; }
.footer-bottom ul { display: flex; flex-wrap: wrap; gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.footer-bottom li { margin: 0; }

/* 10. Responsive ----------------------------------------------------------- */
@media (max-width: 1200px) {
  .nav { gap: 12px; }
  .nav__phone { display: none; }
}

@media (max-width: 1100px) {
  :root { --section-y: 80px; }
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 34px; }
  .carousel__track { grid-auto-columns: calc((100% - 26px) / 2); }
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 300px; gap: 30px; }
  .stat + .stat { border-left: 0; }
}

@media (max-width: 991px) {
  .nav-toggle { display: grid; }
  .nav { justify-content: space-between; }
  .nav__cta .btn { display: none; }
  .nav__phone { display: flex; }

  .menu {
    position: fixed; top: 0; right: 0; bottom: 0; width: min(340px, 86vw);
    background: var(--white); box-shadow: -10px 0 40px rgba(15,47,40,.2);
    display: block; margin: 0; padding: 90px 18px 40px; overflow-y: auto; z-index: 58;
    transform: translateX(105%); transition: transform .32s cubic-bezier(.4, 0, .2, 1);
  }
  body.nav-open .menu { transform: translateX(0); }
  .menu > li { border-bottom: 1px solid var(--line); }
  .menu > li:last-child { border-bottom: 0; }
  .menu > li > a { flex: 1; padding: 14px 12px; font-size: 1.06rem; }
  .menu > li > a::after { display: none; }
  .sub-toggle { width: 46px; height: 46px; padding: 0; }
  .submenu {
    position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none; border-top: 0;
    background: var(--teal-soft); border-radius: 10px; padding: 6px; margin: 0; flex-basis: 100%;
    max-height: 0; overflow: hidden; padding-block: 0;
    transition: max-height .3s ease, padding .3s ease, margin .3s ease;
  }
  .has-sub:hover > .submenu { max-height: 0; }
  .has-sub.is-open > .submenu { max-height: 460px; padding-block: 6px; margin-bottom: 12px; }
  .submenu a:hover { padding-left: 14px; background: var(--white); }


  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .layout-sidebar { grid-template-columns: minmax(0, 1fr); }
  .sidebar { position: static; }
  .event-row { grid-template-columns: 96px minmax(0, 1fr); }
  .event-row .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 767px) {
  body { font-size: 16px; }
  :root { --section-y: 64px; --gutter: 18px; }
  .topbar__inner { justify-content: center; text-align: center; }
  .topbar ul { justify-content: center; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .grid { gap: 20px; }
  .stat-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 24px !important; }
  .carousel__track { grid-auto-columns: 88%; }
  .cta { padding: 44px 24px; border-radius: var(--r-lg); }
  .sec-head { margin-bottom: 36px; }
  .card, .quote, .plan { padding: 26px; }
  .footer-grid { grid-template-columns: minmax(0, 1fr); }
  .footer-bottom { justify-content: center; text-align: center; }
  .map-embed iframe { height: 320px; }
  .page-hero { padding-block: 54px 60px; }
  .dots { display: none; }
}

@media (max-width: 480px) {
  .topbar__hide { display: none; }
  .nav__phone { display: none; }
  .brand { font-size: 1.22rem; }
  .brand__mark { width: 40px; height: 40px; }
  .btn { width: 100%; }
  .btn-row { flex-direction: column; align-items: stretch; }
  .subscribe input { flex-basis: 100%; }
  .event-row { grid-template-columns: minmax(0, 1fr); }
  .event-date { max-width: 110px; }
}

@media print {
  .site-header, .topbar, .site-footer, .to-top, .nav-backdrop { display: none !important; }
  body { color: #000; background: #fff; }
}

/* 12. Pill header — responsive overrides ----------------------------------- */
@media (max-width: 1200px) {
  .nav { padding-left: 24px; gap: 12px; }
  .menu > li > a { padding: 10px 11px; font-size: 1rem; }
  .icon-btn, .nav-toggle { width: 48px; height: 48px; }
}
@media (max-width: 991px) {
  .site-header { padding-block: 10px 12px; }
  .nav { min-height: 72px; padding: 8px 10px 8px 20px; gap: 12px; }
  .brand { order: -1; margin-right: auto; font-size: 1.3rem; }
  .menu { margin: 0; }
  .menu > li > a { color: var(--ink); }
  .menu > li:hover > a, .menu > li.is-open > a { background: var(--teal-soft); color: var(--teal); }
  .menu > li.current > a { color: var(--teal); background: var(--teal-soft); }
  .sub-toggle { color: var(--ink); }
  .sub-toggle:hover { color: var(--teal); }
  .submenu { margin-top: 0; }
  .submenu::before { display: none; }
  .icon-btn, .nav-toggle { width: 46px; height: 46px; }
  .search-panel { margin-top: 12px; }
}
@media (max-width: 767px) {
  .topbar__inner { justify-content: center; }
  .topbar__info { justify-content: center; }
  .topbar__info li { padding-inline: 14px; }
  .search-panel .search-form { border-radius: var(--r-lg); }
}
@media (max-width: 560px) {
  .icon-btn:not(.icon-btn--solid) { display: none; }
  .topbar__follow > span { display: none; }
  .nav { padding-left: 16px; gap: 8px; }
  .brand small { display: none; }
  .brand { font-size: 1.2rem; }
}

/* 13. Wide-screen tuning (1656px container) -------------------------------- */
@media (min-width: 1280px) {
  .grid { gap: 32px; }
  .sec-head { max-width: 720px; }
  .hero__lead { font-size: 1.16rem; max-width: 36rem; }
  /* keep reading measure sane even though the column is now very wide */
  .layout-sidebar { grid-template-columns: minmax(0, 1fr) 380px; gap: 56px; }
  .article-body { max-width: 940px; }
  .cta { padding: 74px 60px; }
  .event-row { grid-template-columns: 120px minmax(0, 1fr) auto; padding: 26px 30px; }
  .card, .plan, .quote { padding: 36px; }
  .service { padding: 34px 34px 34px 38px; }
  .program__body, .post__body { padding: 30px; }
  .nav { padding-left: 40px; }
  .menu > li > a { padding: 12px 16px; }
}
@media (min-width: 1560px) {
  .grid { gap: 36px; }
  :root { --section-y: 120px; }
}

/* 15. Very wide monitors — keep reading columns balanced -------------------- */
@media (min-width: 1500px) {
  /* wide-monitor balance: sections stay full width, but blog/detail pages
     centre their two-column layout so the text is not stranded on the left */
  .layout-sidebar { max-width: 1560px; margin-inline: auto; }
  .article-body { max-width: 1040px; }
}

/* 16. Centred brand in the pill navbar ------------------------------------- */
/* Menu and actions each take an equal flex track, so the logo between them
   sits dead centre of the pill. Only above 1300px, where the menu comfortably
   fits its half — below that the logo returns to the right-hand side. */
@media (min-width: 1300px) {
  .nav { gap: 16px; }
  .menu { flex: 1 1 0; min-width: 0; margin: 0; }
  .brand { flex: 0 0 auto; }
  .nav__actions { flex: 1 1 0; justify-content: flex-end; }
}

/* 17. Hero responsive ------------------------------------------------------- */
@media (max-width: 1300px) {
  .hero__stage { grid-template-columns: minmax(0, 340px) minmax(0, 1fr) minmax(0, 400px); }
  .hero__doodle--rocket { width: 170px; right: 3%; }
  .hero__doodle--rainbow { left: 18%; width: 88px; }
}
@media (max-width: 991px) {
  .hero { padding-block: 40px 96px; }
  .hero__stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 16px; align-items: end; }
  .hero__center { grid-column: 1 / -1; grid-row: 1; margin-bottom: 34px; }
  .hero__kid--left { grid-column: 1; grid-row: 2; max-width: 300px; justify-self: end; }
  .hero__kid--right { grid-column: 2; grid-row: 2; max-width: 340px; justify-self: start; }
  .hero__doodle--cloud, .hero__doodle--star1, .hero__doodle--star2 { display: none; }
  .hero__doodle--balloon { width: 120px; }
  .hero__doodle--rocket { width: 130px; top: 12px; }
}
@media (max-width: 767px) {
  .hero__doodles { display: none; }
  .hero { padding-block: 34px 84px; }
  .hero__title br { display: none; }
  .hero__btns { gap: 10px; }
  .btn-hero { font-size: .76rem; padding-left: 18px; gap: 10px; }
  .btn-hero > span { width: 38px; height: 38px; }
}
@media (max-width: 480px) {
  .hero__stage { gap: 0 8px; }
  .hero__kid--left, .hero__kid--right { max-width: 100%; }
  .hero__title em::after { height: .18em; }
}

/* 18. Header blends into the hero ------------------------------------------ */
/* No separate bar colour: the topbar + header take the same tint as whatever
   hero sits below them, so there is no band across the top of the page.
   Home = hero peach (#fff0e8), inner pages = page-hero mint. */
body.home .topbar,
body.home .site-header { background: var(--orange-soft); }
body.home
/* 19. Hero buttons stay side by side on small screens ----------------------- */
@media (max-width: 480px) {
  .hero__btns { gap: 8px; }
  .btn-hero {
    font-size: .68rem; letter-spacing: 0; padding: 6px 6px 6px 14px; gap: 8px;
    white-space: normal; text-align: left;
  }
  .btn-hero > span { width: 32px; height: 32px; }
  .btn-hero svg { width: 15px; height: 15px; }
}
@media (max-width: 370px) {
  .btn-hero { padding: 10px 14px; justify-content: center; text-align: center; }
  .btn-hero > span { display: none; }
}

/* 20. Sticky state: bar colour and shadow removed --------------------------- */
/* Once the page scrolls, the header band goes fully transparent and loses its
   shadow, so only the pill itself floats over the content. The pill keeps its
   own fill (white menu text needs it) and its drop shadow to lift it clear. */
.site-header.is-stuck,
body.home .site-header.is-stuck {
  background: transparent;
  box-shadow: none;
}

/* 22. "What We Offer" — orange classes band --------------------------------- */
.section--orange {
  background: #ee5a24;
  color: rgba(255, 255, 255, .9);
  position: relative;
  overflow: hidden;
  padding-top: calc(var(--section-y) + 34px);
}
/* Scalloped edge: the same cloud shape as the hero, flipped so the white
   bumps hang down from the section above into the orange. */
.section--orange::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 1;
  background: url("../assets/img/rounded-shape-hero.png") repeat-x center top;
  transform: scaleY(-1);
  pointer-events: none;
}
/* Faint doodle wallpaper */
.section--orange::after {
  content: ""; position: absolute; inset: 0; z-index: 0; opacity: .13; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260' viewBox='0 0 260 260' fill='none' stroke='%23ffffff' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M30 42c6-10 20-6 20 4s-14 18-20 24c-6-6-20-14-20-24s14-14 20-4z'/%3E%3Cpath d='M120 26v18M111 35h18M114 28l12 14M126 28l-12 14'/%3E%3Cpath d='M196 60a16 16 0 0 1 32 0'/%3E%3Cpath d='M204 60a8 8 0 0 1 16 0'/%3E%3Cpath d='M56 150a12 12 0 0 1 2-24 17 17 0 0 1 32-4 13 13 0 0 1 15 28z'/%3E%3Cpath d='M72 140h.01M88 140h.01M76 146a7 7 0 0 0 9 0'/%3E%3Cpath d='M170 140l52 16-24 10-6 18z'/%3E%3Cpath d='M198 166l-6 18'/%3E%3Cpath d='M40 226v14M33 233h14M35 228l10 10M45 228l-10 10'/%3E%3Cpath d='M150 232c6-10 20-6 20 4s-14 16-20 22c-6-6-20-12-20-22s14-14 20-4z'/%3E%3C/svg%3E");
  background-size: 260px 260px;
}
.section--orange > .container { position: relative; z-index: 2; }

/* Heading row with the arrows on the right */
.sec-head-row {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 28px; margin-bottom: 44px;
}
.sec-head-row .sec-head { margin-bottom: 0; }
.section--orange .eyebrow { color: #fff; }
.section--orange .eyebrow::before,
.section--orange .eyebrow::after { display: none; }
.section--orange .sec-title { color: #fff; margin-bottom: 0; }
.section--orange .sec-title em { font-style: normal; color: var(--ink); position: relative; white-space: nowrap; }
.section--orange .sec-title em::after {
  content: ""; position: absolute; left: -2%; right: -4%; bottom: -.24em; height: .2em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 18' preserveAspectRatio='none'%3E%3Cpath d='M4 12l14-7 14 8 14-8 14 8 14-8 14 8 14-8 14 8 14-8 14 8 14-8 14 7' fill='none' stroke='%23ffc93c' stroke-width='5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / 100% 100%;
}

.carousel__arrows { display: flex; gap: 12px; flex: none; }
.section--orange .carousel__btn {
  width: 54px; height: 54px; border-radius: 50%; border: 0;
  background: rgba(255, 255, 255, .24); color: #fff;
}
.section--orange .carousel__btn:hover:not(:disabled) { background: var(--yellow); color: var(--ink); }
.section--orange .carousel__btn--next { background: #fff; color: var(--ink); }
.section--orange .carousel__btn--next:hover:not(:disabled) { background: var(--yellow); color: var(--ink); }
.section--orange .carousel__btn:disabled { opacity: .45; }
.section--orange .carousel__track { padding-bottom: 6px; }

/* Class card */
.class-card {
  background: #fff; padding: 14px; height: 100%;
  display: flex; flex-direction: column;
  border-radius: 34px 28px 34px 28px / 28px 34px 28px 34px;
  transition: transform .28s ease;
}
.class-card:hover { transform: translateY(-6px); }
.class-card__media {
  border-radius: 24px 20px 24px 20px / 20px 24px 20px 24px;
  overflow: hidden; aspect-ratio: 16 / 11; background: var(--teal-soft);
}
.class-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.class-card:hover .class-card__media img { transform: scale(1.06); }
.class-card__body { padding: 20px 10px 6px; display: flex; flex-direction: column; flex: 1; }
.class-card__body h3 { font-size: 1.3rem; margin-bottom: .35em; }
.class-card__body h3 a { color: var(--ink); }
.class-card__body h3 a:hover { color: var(--teal); }
.class-card__body p {
  color: var(--body); font-size: .97rem; margin-bottom: 18px;
  padding-bottom: 18px; border-bottom: 1px dashed var(--line);
}

.chips { list-style: none; margin: auto 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.chip { margin: 0; border-radius: 14px; padding: 12px 6px; text-align: center; }
.chip strong { display: block; font-family: var(--head); font-weight: 500; color: var(--orange); font-size: .98rem; line-height: 1.2; }
.chip span { display: block; font-size: .84rem; color: var(--body); }
.chip--mint { background: var(--teal-soft); }
.chip--lilac { background: var(--plum-soft); }
.chip--leaf { background: #e9f6e3; }

/* 23. Classes band — responsive --------------------------------------------- */
@media (max-width: 991px) {
  .sec-head-row { gap: 20px; }
  .section--orange .carousel__btn { width: 48px; height: 48px; }
}
@media (max-width: 767px) {
  .section--orange { padding-top: calc(var(--section-y) + 22px); }
  .sec-head-row { flex-direction: column; align-items: flex-start; gap: 18px; margin-bottom: 30px; }
  .class-card { padding: 12px; }
  .class-card__body { padding: 18px 8px 4px; }
  .chips { gap: 8px; }
  .chip { padding: 10px 4px; border-radius: 12px; }
  .chip strong { font-size: .9rem; }
  .chip span { font-size: .78rem; }
}

/* 24. Upcoming events band -------------------------------------------------- */
.section--events { background: var(--orange-soft); position: relative; overflow: hidden; }
.events__doodles { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.events__pencil { position: absolute; top: 34px; right: 2%; width: 240px; }
.section--events > .container { position: relative; z-index: 1; }

.section--events .eyebrow { color: var(--plum); }
.section--events .eyebrow::before,
.section--events .eyebrow::after { display: none; }
.section--events .sec-title { color: var(--ink); margin-bottom: 0; }
.section--events .sec-head-row { align-items: center; }

/* Card: image left, details right, organic corners */
.event-card {
  display: grid; grid-template-columns: minmax(0, 210px) minmax(0, 1fr);
  gap: 22px; align-items: center; height: 100%;
  background: #fff; padding: 18px;
  border-radius: 44px 34px 44px 34px / 34px 44px 34px 44px;
  transition: transform .28s ease;
}
.event-card:hover { transform: translateY(-6px); }
.event-card__media {
  overflow: hidden; aspect-ratio: 1; background: var(--teal-soft);
  border-radius: 40px 30px 40px 30px / 30px 40px 30px 40px;
}
.event-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.event-card:hover .event-card__media img { transform: scale(1.06); }

.event-card__body { display: flex; flex-direction: column; padding-right: 6px; }
.event-card__date {
  display: flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: .95rem; color: var(--ink); margin-bottom: 6px;
}
.event-card__date svg { width: 17px; height: 17px; color: var(--plum); }
.event-card__body h3 { font-size: 1.34rem; margin-bottom: .3em; }
.event-card__body h3 a { color: var(--ink); }
.event-card__body h3 a:hover { color: var(--orange); }
.event-card__body p:last-of-type {
  color: var(--body); font-size: .97rem;
  margin-bottom: 18px; padding-bottom: 18px;
  border-bottom: 1px dashed #dfd6cf;
}
.event-card .btn-hero { margin-top: auto; align-self: flex-start; }

/* Outlined "Attend Event" pill with an orange arrow badge */
.btn-hero--event { background: #fff; color: var(--ink); border-color: var(--orange); }
.btn-hero--event > span { background: var(--orange); color: #fff; }
.btn-hero--event:hover { background: var(--orange); color: #fff; border-color: var(--orange); }
.btn-hero--event:hover > span { background: #fff; color: var(--orange); }

/* 25. Events band — responsive ---------------------------------------------- */
@media (max-width: 1200px) { .events__pencil { width: 180px; top: 20px; } }
@media (max-width: 991px)  { .events__pencil { display: none; } }
@media (max-width: 560px) {
  .event-card { grid-template-columns: minmax(0, 1fr); gap: 16px; padding: 14px; }
  .event-card__media { aspect-ratio: 16 / 10; }
  .event-card__body { padding-right: 0; }
}

/* 26. Plan cards on the cloud shape ----------------------------------------- */
/* price-item-shape3.png is a white cloud with a peach scalloped edge. It is
   stretched to the card box, so all three cards must be equal height (the
   grid stretches them) for the scallops to line up. Padding keeps content
   clear of the ~5% inset where the scalloped border sits. */
.plan {
  background: url("../assets/img/price-item-shape3.png") no-repeat center / 100% 100%;
  border: 0; border-radius: 0; box-shadow: none;
  padding: 52px 46px 48px;
  text-align: center;
  transition: transform .28s ease;
}
.plan:hover { transform: translateY(-6px); box-shadow: none; border-color: transparent; }
.plan--featured { border: 0; box-shadow: none; }
.plan__badge { top: 6px; }

.plan h3 { margin-bottom: .1em; font-size: 1.5rem; }
.plan__price {
  font-family: var(--head); font-weight: 600; font-size: 2.6rem;
  color: var(--teal); line-height: 1.1; margin: 4px 0 0;
}
.plan__price small { font-size: 1rem; color: var(--muted); font-weight: 500; }

.plan .ticks {
  text-align: left; margin: 26px 0 28px;
  padding-top: 26px; border-top: 1px solid #ece3dc;
}
.plan .ticks li { margin-bottom: 14px; align-items: center; }
.plan .ticks li:last-child { margin-bottom: 0; }
.plan .ticks svg {
  width: 22px; height: 22px; margin-top: 0; padding: 4px;
  color: #fff; background: var(--teal); border-radius: 50%;
}
.plan .btn-hero { margin-top: auto; align-self: center; }

/* the scalloped edges need breathing room between cards */
.section--peach .grid-3 { gap: 34px; }

@media (max-width: 767px) {
  .plan { padding: 46px 38px 42px; }
  .plan__price { font-size: 2.3rem; }
}

/* giraffe beside the events grid */
.events__animal { position: absolute; left: 0; bottom: 90px; width: 190px; }
@media (max-width: 1400px) { .events__animal { width: 140px; left: -20px; } }
@media (max-width: 1100px) { .events__animal { display: none; } }

/* 27. Full-width CTA band --------------------------------------------------- */
.cta-band {
  position: relative; overflow: hidden;
  background: var(--plum);
  padding-block: calc(var(--section-y) + 20px) var(--section-y);
  text-align: center;
}
/* white scalloped edge, same cloud shape flipped */
.cta-band::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 50px; z-index: 3;
  background: url("../assets/img/rounded-shape-hero.png") repeat-x center top;
  transform: scaleY(-1); pointer-events: none;
}
.cta-band > .container { position: relative; z-index: 2; }

.cta-band__doodles { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.cta-doodle { position: absolute; }
.cta-doodle--spiral { top: 22%; left: 15%; width: 44px; }
.cta-doodle--leaf { bottom: 16%; left: 33%; width: 110px; }
.cta-doodle--flower { top: 16%; right: 32%; width: 66px; }
.cta-doodle--branch { bottom: -10px; right: 1%; width: 130px; }

.cta-band__grid {
  display: grid; grid-template-columns: minmax(0, 300px) minmax(0, 1fr) minmax(0, 340px);
  align-items: center; gap: 30px;
}

/* Photo masked into a blob, with a coloured blob peeking out behind it */
.cta-kid { position: relative; margin: 0; }
.cta-kid::before {
  content: ""; position: absolute; inset: -16px -22px -10px -26px; z-index: 0;
  border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%;
}
.cta-kid--left::before { background: var(--yellow); }
.cta-kid--right::before { background: #f2652b; }
.cta-kid img {
  position: relative; z-index: 1; width: 100%;
  aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 54% 46% 44% 56% / 46% 54% 46% 54%;
}
.cta-kid--right img { border-radius: 46% 54% 56% 44% / 52% 46% 54% 48%; }

.cta-band__eyebrow {
  display: block; font-family: var(--head); font-weight: 500; font-size: 1.06rem;
  color: var(--yellow); margin-bottom: 10px;
}
.cta-band h2 {
  color: #fff; font-size: clamp(1.9rem, 1.1rem + 2.6vw, 3.1rem);
  line-height: 1.16; margin: 0 auto 30px;
}
.cta-band .btn-hero { box-shadow: none; }

@media (max-width: 1100px) {
  .cta-band__grid { grid-template-columns: minmax(0, 230px) minmax(0, 1fr) minmax(0, 250px); gap: 20px; }
  .cta-doodle--leaf, .cta-doodle--flower { display: none; }
}
@media (max-width: 767px) {
  .cta-band__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
  .cta-band__center { grid-column: 1 / -1; grid-row: 1; margin-bottom: 26px; }
  .cta-kid--left { grid-column: 1; grid-row: 2; }
  .cta-kid--right { grid-column: 2; grid-row: 2; }
  .cta-band__doodles { display: none; }
}

/* 28. CTA band — polish pass ------------------------------------------------ */
/* Depth instead of a flat fill: a diagonal gradient plus a soft light bloom
   behind the copy, so the centre reads brighter than the edges. */
.cta-band {
  background: linear-gradient(135deg, #8168f7 0%, #7150f2 48%, #5c3ce9 100%);
  padding-block: calc(var(--section-y) + 26px) calc(var(--section-y) + 6px);
}
.cta-band::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(58% 62% at 50% 42%, rgba(255, 255, 255, .16), rgba(255, 255, 255, 0) 70%);
}

/* Blobs breathe slowly rather than sitting static */
@keyframes blobMorph {
  0%, 100% { border-radius: 58% 42% 50% 50% / 46% 54% 46% 54%; }
  50%      { border-radius: 46% 54% 58% 42% / 54% 44% 56% 46%; }
}
@keyframes blobMorphAlt {
  0%, 100% { border-radius: 54% 46% 44% 56% / 46% 54% 46% 54%; }
  50%      { border-radius: 44% 56% 54% 46% / 56% 44% 56% 44%; }
}
.cta-kid::before { animation: blobMorph 11s ease-in-out infinite; }
.cta-kid--right::before { animation-duration: 13s; animation-delay: -3s; }
.cta-kid img {
  animation: blobMorphAlt 12s ease-in-out infinite;
  box-shadow: 0 0 0 7px rgba(255, 255, 255, .14), 0 22px 44px rgba(28, 12, 84, .28);
  transition: transform .45s cubic-bezier(.2, .8, .3, 1);
}
.cta-kid--right img { animation-duration: 14s; animation-delay: -4s; }
.cta-kid:hover img { transform: translateY(-8px) scale(1.02); }

/* Typography */
.cta-band__eyebrow {
  letter-spacing: .16em; text-transform: uppercase; font-size: .92rem;
  opacity: .95; margin-bottom: 14px;
}
.cta-band h2 {
  letter-spacing: -.025em; margin-bottom: 34px;
  text-shadow: 0 2px 18px rgba(28, 12, 84, .22);
}

/* Button: lifts and the arrow slides */
.cta-band .btn-hero--solid {
  box-shadow: 0 14px 30px rgba(28, 12, 84, .34);
  padding-right: 8px;
}
.cta-band .btn-hero--solid > span { transition: transform .3s cubic-bezier(.2, .8, .3, 1); }
.cta-band .btn-hero--solid:hover { box-shadow: 0 20px 40px rgba(28, 12, 84, .42); }
.cta-band .btn-hero--solid:hover > span { transform: translateX(5px); }

/* Doodles drift gently, at slightly different rates */
@keyframes ctaDrift { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(4deg); } }
.cta-doodle { opacity: .92; animation: ctaDrift 9s ease-in-out infinite; }
.cta-doodle--leaf { animation-duration: 11s; animation-delay: -2s; }
.cta-doodle--flower { animation-duration: 8s; animation-delay: -4s; }
.cta-doodle--branch { animation: none; }

/* 29. CTA band — tightened height ------------------------------------------- */
/* Height was driven by the tall 3:4 photos as much as by the padding, so both
   come down. Top padding stays above 56px so the copy clears the 50px scallop. */
.cta-band { padding-block: 62px 54px; }
.cta-band__grid {
  grid-template-columns: minmax(0, 240px) minmax(0, 1fr) minmax(0, 258px);
  gap: 26px;
}
.cta-kid img { aspect-ratio: 4 / 5; }
.cta-kid::before { inset: -12px -16px -8px -18px; }
.cta-band__eyebrow { margin-bottom: 10px; }
.cta-band h2 { margin-bottom: 24px; }
.cta-doodle--branch { width: 104px; }
.cta-doodle--leaf { width: 88px; bottom: 12%; }

@media (max-width: 1100px) {
  .cta-band { padding-block: 56px 48px; }
  .cta-band__grid { grid-template-columns: minmax(0, 190px) minmax(0, 1fr) minmax(0, 200px); }
}
@media (max-width: 767px) {
  .cta-band { padding-block: 50px 44px; }
  .cta-band__center { margin-bottom: 20px; }
}

/* 30. CTA band — orange ----------------------------------------------------- */
.cta-band { background: linear-gradient(135deg, #ff8340 0%, #f2652b 48%, #dd4a12 100%); }

/* Accents that vanished against orange, re-tuned */
.cta-band__eyebrow { color: #fff; }                 /* yellow on orange is unreadable */
.cta-kid--right::before { background: var(--plum); } /* was orange on orange */
.cta-doodle--spiral path { stroke: #fff; }           /* was orange on orange */

/* The Apply Now pill was orange too - invert it to white with an orange arrow */
.cta-band .btn-hero--solid { background: #fff; color: var(--ink); }
.cta-band .btn-hero--solid > span { background: #f2652b; color: #fff; }
.cta-band .btn-hero--solid:hover { background: var(--yellow); color: var(--ink); }
.cta-band .btn-hero--solid:hover > span { background: var(--ink); color: #fff; }
/* 31. Top bar hidden on mobile ---------------------------------------------- */
@media (max-width: 767px) {
  .topbar { display: none; }
}

/* 32. CTA kids — equal size, side by side ----------------------------------- */
/* Desktop: both columns the same width so the two blobs match. */
.cta-band__grid { grid-template-columns: minmax(0, 250px) minmax(0, 1fr) minmax(0, 250px); }

/* Tablet and below: copy on top, the two kids side by side and equal, meeting
   in the middle. Comes after the earlier 1100/767 blocks so it wins. */
@media (max-width: 991px) {
  .cta-band__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start; gap: 22px;
  }
  .cta-band__center { grid-column: 1 / -1; grid-row: 1; margin-bottom: 26px; }
  .cta-kid { grid-row: 2; width: 100%; max-width: 260px; }
  .cta-kid--left { grid-column: 1; justify-self: end; }
  .cta-kid--right { grid-column: 2; justify-self: start; }
  .cta-kid img { aspect-ratio: 4 / 5; }
}
@media (max-width: 480px) {
  .cta-band__grid { gap: 14px; }
  .cta-kid { max-width: 100%; }
  .cta-kid::before { inset: -8px -10px -6px -12px; }
}

/* 33. Footer on mobile: Services + Quick Links side by side ----------------- */
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 20px; }
  .footer-grid > div:first-child,          /* brand + blurb + socials */
  .footer-grid > div:last-child { grid-column: 1 / -1; }  /* Get in Touch */
}

/* 34. Mobile sub-menu: bigger, clearer tap target --------------------------- */
@media (max-width: 991px) {
  /* whole row reacts, and the caret sits at the far right of the row */
  .menu > li.has-sub { cursor: pointer; }
  .has-sub > a { padding-right: 4px; }
  .sub-toggle { width: 52px; height: 52px; margin-left: auto; border-radius: 12px; }
  .has-sub.is-open > a,
  .has-sub.is-open > .sub-toggle { color: var(--teal); background: var(--teal-soft); }
  /* deep enough for the longest sub-menu, so nothing is clipped when open */
  .has-sub.is-open > .submenu { max-height: 60vh; }
}