:root {
  --night: #15566a;
  --night-2: #216f82;
  --ocean: #168fb5;
  --sky: #9ce2f4;
  --sky-soft: #dff5fa;
  --sun: #ffd75b;
  --sand: #f6d6a4;
  --coral: #ef8658;
  --cream: #fff9ed;
  --ink: #10313b;
  --muted: #53727b;
  --white-line: rgba(255,255,255,.3);
  --shell: min(1500px, calc(100vw - (var(--gutter) * 2)));
  --gutter: clamp(12px, 2.3vw, 36px);
  --radius-xl: 42px;
  --radius-lg: 30px;
  --radius-md: 20px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background-color: #fbfaf5;
  background-image:
    radial-gradient(circle at 1px 1px, rgba(22, 143, 181, .075) 1px, transparent 1.2px),
    linear-gradient(180deg, rgba(156, 226, 244, .075), transparent 420px);
  background-size: 30px 30px, 100% 100%;
  color: var(--ink);
  font-family: "DM Sans", Arial, sans-serif;
  font-size: 16px;
  line-height: 1.4;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
img, video { display: block; max-width: 100%; }
button, input { font: inherit; }
button { color: inherit; }
.shell { width: var(--shell); margin-inline: auto; }
.framed { border: 4px solid var(--cream); }
.skip-link { position: fixed; left: 10px; top: -70px; z-index: 100; padding: 11px 16px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.skip-link:focus { top: 10px; }

.section-label {
  margin: 0 0 14px;
  font-size: 11px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: var(--ocean);
}
.section-label-light { color: #e9fbff; text-shadow: 0 2px 10px rgba(4,43,54,.35); }
.hand {
  margin: 0 0 8px;
  font-family: "Schoolbell", cursive;
  font-size: clamp(19px, 1.8vw, 28px);
  line-height: 1;
  color: var(--sun);
  text-shadow: 0 2px 10px rgba(3,27,35,.32);
}
.hand-ocean { color: var(--ocean); }

.topbar {
  position: absolute;
  color: var(--ink);
  z-index: 20;
  top: 16px;
  left: 50%;
  transform: translateX(-50%);
  min-height: 62px;
  padding: 8px 10px 8px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 1px solid rgba(16,49,59,.10);
  border-radius: 999px;
  background: #fffdf7;
  box-shadow: 0 12px 30px rgba(30,86,104,.14);
}
.brand { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; }
.brand-mark {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: var(--ink);
  font-size: 17px;
  font-weight: 700;
}
.brand-text {
  font-family: "Schoolbell", cursive;
  font-size: 20px;
  line-height: 1;
}
.desktop-nav { display: flex; align-items: center; gap: clamp(18px, 2vw, 34px); font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; }
.desktop-nav > a:not(.nav-cta) { opacity: .84; }
.desktop-nav > a:not(.nav-cta):hover { opacity: 1; }
.nav-cta { padding: 12px 24px; border-radius: 999px; background: var(--sun); color: var(--ink); }
.menu-btn { display: none; border: 0; border-radius: 999px; padding: 11px 16px; background: var(--sun); color: var(--ink); font-weight: 700; }
.mobile-nav { position: fixed; inset: 0; z-index: 60; padding: 86px 24px 28px; background: #fffdf7; color: var(--ink); }
.mobile-nav nav { display: grid; gap: 4px; }
.mobile-nav nav a { font-family: "Bebas Neue", sans-serif; font-size: clamp(42px, 13vw, 68px); line-height: .96; letter-spacing: .01em; }
.mobile-close { position: absolute; top: 18px; right: 18px; border: 0; border-radius: 999px; padding: 10px 14px; background: var(--sun); color: var(--ink); font-weight: 700; }
.mobile-meta { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(16,49,59,.14); display: grid; gap: 10px; color: var(--muted); }

.hero {
  position: relative;
  height: min(790px, 94svh);
  min-height: 650px;
  overflow: hidden;
  border-radius: 0 0 var(--radius-xl) var(--radius-xl);
  background: #d8eef3;
  color: #fff;
}
.hero-image { width: 100%; height: 100%; object-fit: cover; object-position: center 43%; }
.hero-wash {
  position: absolute;
  inset: 0;
  background: transparent;
}
.hero-copy { position: absolute; z-index: 2; left: 4.5%; top: 44%; transform: translateY(-50%); max-width: 760px; }
.hero-copy h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(86px, 9.2vw, 154px);
  line-height: .79;
  letter-spacing: .005em;
  text-transform: uppercase;
  -webkit-text-stroke: 1.5px rgba(4, 35, 45, .72);
  paint-order: stroke fill;
  text-shadow: 0 2px 1px rgba(3, 27, 35, .38), 0 8px 22px rgba(3, 27, 35, .28);
}
.hero-kicker { margin: 18px 0 0; max-width: 640px; font-size: clamp(15px, 1.25vw, 21px); font-weight: 700; -webkit-text-stroke: .35px rgba(4,35,45,.46); paint-order: stroke fill; text-shadow: 0 2px 8px rgba(3,27,35,.38); }
.hero-side { position: absolute; z-index: 2; right: 4.5%; bottom: 7%; width: min(500px, 36vw); padding: 18px 20px; border: 1px solid rgba(16,49,59,.12); border-radius: 20px; background: #fffdf7; box-shadow: 0 18px 42px rgba(20,82,101,.16); }
.hero-side > p { margin: 0 0 18px; font-size: 15px; color: var(--ink); text-shadow: none; }
.hero-actions { display: flex; gap: 10px; flex-wrap: wrap; }

.button {
  min-height: 46px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 22px;
  border: 0;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .01em;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-cream { background: var(--cream); color: var(--ink); }
.button-sun { background: var(--sun); color: var(--ink); }
.button-outline { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(15,40,49,.32); }

.about {
  margin-top: 38px;
  min-height: 530px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--cream);
  color: var(--ink);
}
.about-copy { position: relative; overflow: hidden; min-height: 530px; padding: 54px 52px; background: var(--cream); }
.about-copy > div { position: relative; z-index: 2; max-width: 600px; }
.about-copy h2 { margin: 0 0 22px; font-size: clamp(42px, 4.6vw, 76px); line-height: .95; letter-spacing: -.045em; font-weight: 500; }
.about-copy p:last-child { max-width: 500px; margin: 0; font-size: 15px; }
.beach-shapes::before,
.beach-shapes::after { content: ""; position: absolute; border-radius: 50%; }
.beach-shapes::before { width: 57%; aspect-ratio: 1; top: -39%; left: -13%; background: var(--sun); }
.beach-shapes::after { width: 62%; aspect-ratio: .88; right: -25%; bottom: -51%; background: var(--sky); transform: rotate(-18deg); }
.about-photo { position: relative; min-height: 530px; overflow: hidden; background: var(--night); }
.about-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 44%; }
.about-photo::after { content: none; }
.photo-caption { position: absolute; z-index: 2; left: 28px; right: 28px; bottom: 28px; display: grid; grid-template-columns: 1fr auto; gap: 24px; align-items: end; padding: 18px 18px 18px 20px; border-radius: 18px; background: #fffdf7; box-shadow: 0 18px 42px rgba(20,82,101,.15); }
.photo-caption p { margin: 0; max-width: 460px; font-size: 14px; color: var(--ink); }

.lessons {
  position: relative;
  margin-top: 40px;
  padding: 86px 7.3% 92px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #eaf7fa;
  color: var(--ink);
  isolation: isolate;
}
.lesson-backdrop {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(135deg, #d9f3fb 0%, #eefaff 36%, #fff2b9 76%, #fffaf0 100%);
}
.lesson-heading { display: grid; grid-template-columns: 1fr 1fr; gap: 8%; align-items: end; }
.lesson-heading h2 { margin: 0; font-size: clamp(50px, 5.3vw, 88px); font-weight: 400; letter-spacing: -.055em; line-height: .96; }
.lesson-heading > p { margin: 0; justify-self: end; max-width: 570px; font-size: 15px; color: #43626c; }
.instrument-cloud { margin: 46px 0 44px; display: flex; flex-wrap: wrap; gap: 10px; }
.instrument-cloud span { padding: 9px 16px; border-radius: 999px; border: 1px solid rgba(16,49,59,.16); background: #fffdf8; color: var(--ink); font-family: "Bebas Neue", sans-serif; font-size: clamp(24px, 2.1vw, 34px); line-height: 1; letter-spacing: .02em; }
.instrument-cloud .instrument-more { background: var(--sun); color: var(--ink); border-color: var(--sun); }
.lesson-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.lesson-card { overflow: hidden; border: 5px solid var(--cream); border-radius: 28px; background: var(--cream); color: var(--ink); }
.lesson-photo { position: relative; aspect-ratio: 1.18; overflow: hidden; border-radius: 22px; background: #d6e9ef; }
.lesson-photo img { width: 100%; height: 100%; object-fit: cover; }
.lesson-card:nth-child(1) img { object-position: center 34%; }
.lesson-card:nth-child(2) img { object-position: center 44%; }
.lesson-card:nth-child(3) img { object-position: center 45%; }
.mini-pill { position: absolute; left: 14px; top: 14px; padding: 7px 11px; border-radius: 999px; background: var(--cream); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em; }
.lesson-card-copy { min-height: 210px; padding: 18px 18px 14px; display: flex; flex-direction: column; }
.lesson-card-copy h3 { margin: 0 0 8px; font-size: 24px; line-height: 1.05; font-weight: 700; letter-spacing: -.03em; color: #0b2933; }
.lesson-card-copy p { margin: 0 0 18px; color: #425861; font-size: 13px; }
.lesson-card-copy a { margin-top: auto; padding: 11px 15px; border-radius: 999px; background: var(--sun); text-align: center; font-size: 11px; font-weight: 800; }

.method {
  margin-top: 40px;
  min-height: 580px;
  display: grid;
  grid-template-columns: 1fr 1.18fr;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--cream);
  color: var(--ink);
}
.method-art { position: relative; overflow: hidden; min-height: 580px; background: var(--ocean); }
.orb { position: absolute; display: block; border-radius: 50%; }
.orb-sun { width: 54%; aspect-ratio: 1; top: -30%; left: 18%; background: var(--sun); }
.orb-cream { width: 43%; aspect-ratio: 1; left: -11%; bottom: -27%; background: var(--cream); }
.wave-cut { position: absolute; right: -18%; top: -11%; width: 50%; height: 123%; border-radius: 58% 0 0 46%; background: var(--cream); transform: rotate(9deg); }
.wave-cut::after { content: ""; position: absolute; width: 52%; aspect-ratio: 1; left: -24%; bottom: 6%; border-radius: 50%; background: var(--ocean); }
.music-mark { position: absolute; left: 48%; top: 48%; transform: translate(-50%,-50%); font-family: "Schoolbell", cursive; font-size: 124px; color: var(--night); }
.method-copy { padding: 68px 7%; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.method-copy h2 { margin: 0 0 24px; font-size: clamp(50px, 5vw, 84px); font-weight: 400; letter-spacing: -.055em; line-height: .94; }
.method-copy > p:not(.section-label) { max-width: 650px; margin: 0 0 28px; color: #425861; }
.hand-circle { position: relative; z-index: 0; display: inline-block; font-family: "Schoolbell", cursive; font-size: .84em; font-weight: 400; color: var(--ocean); letter-spacing: 0; }
.hand-circle::after { content: ""; position: absolute; z-index: -1; inset: -14px -26px -11px; border: 3px solid var(--sun); border-radius: 50%; transform: rotate(3deg) scale(1.03, 1.08); }

.start {
  margin-top: 40px;
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: var(--cream);
  color: var(--ink);
}
.start-intro { position: relative; padding: 72px 54px; background: linear-gradient(145deg, #d8f3fb 0%, #f6fbfd 44%, #fff0b9 100%); }
.start-intro h2 { margin: 0 0 22px; font-size: clamp(48px, 4.8vw, 80px); line-height: .94; font-weight: 500; letter-spacing: -.055em; }
.start-intro > p:not(.hand):not(.section-label) { max-width: 500px; color: #425861; }
.start-note { margin-top: 38px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; align-items: start; padding-top: 22px; border-top: 1px solid rgba(15,40,49,.18); }
.start-note span { width: 38px; height: 38px; display: grid; place-items: center; border-radius: 50%; background: var(--sun); font-family: "Bebas Neue", sans-serif; font-size: 22px; }
.start-note p { margin: 5px 0 0; max-width: 410px; font-size: 13px; color: #536a72; }
.starter { padding: 60px 54px; background: #ffffff; }
.starter-progress { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-bottom: 30px; }
.starter-progress span { height: 5px; border-radius: 999px; background: #e4e9e9; }
.starter-progress span.is-on { background: var(--ocean); }
.starter-step { margin: 0 0 28px; padding: 0; border: 0; }
.starter-step[disabled] { opacity: .38; pointer-events: none; }
.starter-step legend { width: 100%; margin: 0 0 13px; display: flex; align-items: baseline; gap: 10px; font-size: 19px; font-weight: 650; letter-spacing: -.02em; }
.starter-step legend span { font-family: "Bebas Neue", sans-serif; font-size: 22px; color: var(--ocean); }
.choice-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.choice-grid-3 { grid-template-columns: repeat(3, 1fr); }
.choice-grid-2 { grid-template-columns: repeat(2, 1fr); }
.choice-grid button { min-height: 48px; padding: 9px 12px; border: 1px solid #d8e1e2; border-radius: 14px; background: #f7fbfb; color: var(--ink); font-size: 12px; font-weight: 700; cursor: pointer; }
.choice-grid button:hover, .choice-grid button.is-selected { border-color: var(--ocean); background: var(--sky-soft); }
.starter-result { margin-top: 34px; padding: 24px; border: 1px solid rgba(16,49,59,.10); border-radius: 20px; background: linear-gradient(135deg, #e0f5fb 0%, #fff4c8 100%); color: var(--ink); }
.result-label { margin: 0 0 8px; color: var(--ocean); font-size: 10px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.result-copy { margin: 0 0 20px; font-size: 18px; line-height: 1.35; }
.result-actions { display: flex; gap: 9px; flex-wrap: wrap; }
.starter-result .button-outline { color: var(--ink); background: #fffdf8; box-shadow: inset 0 0 0 1px rgba(16,49,59,.18); }
.copy-status { min-height: 18px; margin: 9px 0 0; color: var(--muted); font-size: 11px; }

.life {
  margin-top: 40px;
  padding: 68px 6.2% 54px;
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #f8fbfb;
  color: var(--ink);
  border: 1px solid rgba(22,143,181,.10);
}
.life-heading { max-width: 820px; margin: 0 auto 42px; text-align: center; }
.life-heading h2 { margin: 0 0 14px; font-size: clamp(48px, 4.9vw, 80px); line-height: .96; font-weight: 400; letter-spacing: -.055em; }
.life-heading > p:last-child { margin: 0 auto; max-width: 650px; color: var(--muted); }
.photo-mosaic { max-width: 1190px; margin-inline: auto; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; gap: 10px; }
.mosaic-item { margin: 0; overflow: hidden; border-radius: 16px; background: #e8f6fa; }
.mosaic-item img, .mosaic-item video { width: 100%; height: 100%; object-fit: cover; }
.mosaic-wide { grid-column: span 2; }
.mosaic-tall { grid-row: span 2; }
.press-tile img { object-fit: contain; background: white; }
.video-tile video { background: #dceff5; }

.community {
  margin-top: 40px;
  padding: 72px 5% 48px;
  border-radius: var(--radius-xl) var(--radius-xl) 0 0;
  background: var(--cream);
  color: var(--ink);
}
.community-copy { max-width: 780px; margin-inline: auto; text-align: center; }
.community-copy h2 { margin: 0 0 13px; font-size: clamp(44px, 4.6vw, 76px); font-weight: 400; line-height: .96; letter-spacing: -.055em; }
.community-copy p:last-child { margin: 0 auto; max-width: 620px; color: var(--muted); }
.school-row { margin-top: 48px; padding: 32px 2% 20px; border-top: 1px solid rgba(15,40,49,.14); display: flex; gap: 22px 42px; justify-content: space-between; flex-wrap: wrap; }
.school-row span { font-family: "Bebas Neue", sans-serif; font-size: clamp(24px, 2.1vw, 34px); letter-spacing: .02em; }

.footer {
  margin-bottom: 20px;
  color: var(--cream);
  padding: 38px 36px 28px;
  border-radius: 30px;
  background: #176c84;
}
.footer-top { display: flex; justify-content: space-between; gap: 32px; align-items: end; padding-bottom: 30px; border-bottom: 1px solid rgba(255,255,255,.14); }
.footer-top > div:first-child > p { margin: 9px 0 0; color: var(--sky-soft); font-size: 13px; }
.footer-cta { text-align: right; }
.footer-cta .hand { margin-bottom: 11px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1.4fr; gap: 16px; padding-top: 28px; }
.footer-grid > div { padding: 18px; border-radius: 16px; background: #247c93; display: grid; gap: 7px; }
.footer-grid span { color: var(--sun); font-size: 9px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; }
.footer-grid strong, .footer-grid a { font-size: 12px; font-weight: 500; }

@media (max-width: 1050px) {
  .desktop-nav { display: none; }
  .menu-btn { display: inline-flex; }
  .hero-copy { top: 39%; }
  .hero-side { left: 4.5%; right: auto; width: min(560px, 75%); }
  .about, .method, .start { grid-template-columns: 1fr; }
  .about-copy, .about-photo, .method-art { min-height: 480px; }
  .lesson-heading { grid-template-columns: 1fr; gap: 18px; }
  .lesson-heading > p { justify-self: start; }
  .lesson-grid { grid-template-columns: 1fr; max-width: 720px; }
  .lesson-photo { aspect-ratio: 1.7; }
  .choice-grid { grid-template-columns: repeat(2, 1fr); }
  .photo-mosaic { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 720px) {
  :root { --gutter: 10px; --radius-xl: 28px; }
  .framed { border-width: 3px; }
  .topbar { top: 10px; min-height: 56px; width: calc(100vw - 20px); padding-left: 13px; }
  .brand-text { font-size: 17px; }
  .brand-mark { width: 24px; height: 24px; }
  .hero { height: 740px; min-height: 0; border-radius: 0 0 28px 28px; }
  .hero-image { object-position: 53% 43%; }
  .hero-copy { left: 20px; right: 20px; top: 38%; transform: none; }
  .hero-copy h1 { font-size: clamp(76px, 24vw, 110px); line-height: .8; }
  .hero-kicker { max-width: 290px; }
  .hero-side { left: 20px; right: 20px; bottom: 30px; width: auto; }
  .hero-side > p { max-width: 520px; font-size: 14px; }
  .hero-actions { gap: 8px; }
  .button { min-height: 44px; padding-inline: 18px; }

  .about, .lessons, .method, .start, .life, .community { margin-top: 18px; }
  .about-copy { min-height: 430px; padding: 38px 27px; }
  .about-copy h2 { font-size: 48px; }
  .about-photo { min-height: 450px; }
  .about-photo img { object-position: 51% 45%; }
  .photo-caption { left: 24px; right: 24px; bottom: 24px; grid-template-columns: 1fr; }
  .photo-caption .button { width: max-content; }

  .lessons { padding: 58px 20px 62px; }
  .lesson-heading h2 { font-size: 52px; }
  .instrument-cloud { margin: 30px 0; gap: 7px; }
  .instrument-cloud span { font-size: 25px; padding: 7px 12px; }
  .lesson-grid { gap: 14px; }
  .lesson-photo { aspect-ratio: 1.35; }

  .method-art { min-height: 355px; }
  .method-copy { padding: 46px 28px 52px; }
  .method-copy h2 { font-size: 52px; }

  .start-intro { padding: 48px 28px; }
  .start-intro h2 { font-size: 52px; }
  .starter { padding: 42px 22px 46px; }
  .choice-grid, .choice-grid-3, .choice-grid-2 { grid-template-columns: 1fr 1fr; }
  .starter-step legend { font-size: 17px; }
  .result-actions { display: grid; }

  .life { padding: 50px 18px 28px; }
  .life-heading h2 { font-size: 50px; }
  .photo-mosaic { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 170px; gap: 7px; }
  .mosaic-wide { grid-column: span 2; }

  .community { padding: 50px 24px 34px; }
  .community-copy h2 { font-size: 48px; }
  .school-row { justify-content: center; }

  .footer { width: calc(100vw - 20px); padding: 28px 22px 24px; }
  .footer-top { display: grid; align-items: start; }
  .footer-cta { text-align: left; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 430px) {
  .hero-copy h1 { font-size: 78px; }
  .hero-side > p { font-size: 13px; }
  .hero-actions .button { width: 100%; }
  .about-copy h2, .lesson-heading h2, .method-copy h2, .start-intro h2, .life-heading h2, .community-copy h2 { font-size: 44px; }
  .choice-grid, .choice-grid-3, .choice-grid-2 { grid-template-columns: 1fr; }
  .photo-mosaic { grid-auto-rows: 150px; }
  .footer-grid { grid-template-columns: 1fr; }
}

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


/* V4.2 — quieter Redondo canvas */
@media (min-width: 721px) {
  main > .shell { box-shadow: 0 0 0 0 transparent; }
}

.lessons .section-label-light,
.life .section-label-light {
  color: var(--ocean);
  text-shadow: none;
}
.life .hand { color: var(--ocean); text-shadow: none; }

/* V4.4 — continuous coastal canvas, no hard gradient seams */
body {
  background-color: #f7fbfd;
  background-image:
    radial-gradient(ellipse 72% 28% at 8% 8%, rgba(126, 218, 244, .48) 0%, rgba(126, 218, 244, .20) 48%, rgba(126, 218, 244, 0) 76%),
    radial-gradient(ellipse 68% 26% at 92% 34%, rgba(255, 213, 87, .44) 0%, rgba(255, 226, 135, .18) 48%, rgba(255, 226, 135, 0) 76%),
    radial-gradient(ellipse 70% 28% at 10% 67%, rgba(122, 207, 237, .38) 0%, rgba(122, 207, 237, .16) 50%, rgba(122, 207, 237, 0) 78%),
    radial-gradient(ellipse 64% 24% at 90% 90%, rgba(255, 205, 76, .34) 0%, rgba(255, 225, 137, .13) 52%, rgba(255, 225, 137, 0) 80%),
    linear-gradient(160deg, #dff5fb 0%, #f7fcfd 20%, #fff5c9 42%, #fffdf7 58%, #e7f6fb 78%, #fff1b8 100%);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* Light-mode surfaces over photography */
.hero-side .button-cream { background: var(--ocean); color: #fff; }
.hero-side .button-outline { background: #fffdf7; color: var(--ink); box-shadow: inset 0 0 0 1px rgba(16,49,59,.18); }
.photo-caption .button { background: var(--sun); color: var(--ink); }


/* V5 — just-in-time registration system */
.register {
  margin-top: 40px;
  display: grid;
  grid-template-columns: minmax(340px, .82fr) minmax(0, 1.18fr);
  overflow: hidden;
  border-radius: var(--radius-xl);
  background: #fffdf7;
  color: var(--ink);
}
.register-intro {
  position: relative;
  overflow: hidden;
  padding: 72px 54px;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,215,91,.82) 0 15%, transparent 15.4%),
    radial-gradient(circle at 104% 88%, rgba(156,226,244,.82) 0 27%, transparent 27.4%),
    linear-gradient(145deg, #e0f6fc 0%, #f9fcfc 46%, #fff0b5 100%);
}
.register-intro::after {
  content: "";
  position: absolute;
  width: 260px;
  height: 64px;
  right: -70px;
  top: 120px;
  border: 2px solid rgba(22,143,181,.32);
  border-radius: 50%;
  transform: rotate(-18deg);
}
.register-intro > * { position: relative; z-index: 1; }
.register-intro h2 {
  margin: 0 0 22px;
  max-width: 620px;
  font-size: clamp(52px, 5.2vw, 86px);
  line-height: .92;
  font-weight: 500;
  letter-spacing: -.058em;
}
.register-intro > p:not(.hand):not(.section-label) {
  max-width: 520px;
  color: #405e68;
}
.register-proof {
  margin-top: 44px;
  display: grid;
  gap: 0;
  border-top: 1px solid rgba(16,49,59,.15);
}
.register-proof > div {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 14px;
  padding: 17px 0;
  border-bottom: 1px solid rgba(16,49,59,.12);
}
.register-proof p { margin: 2px 0 0; max-width: 410px; font-size: 13px; }
.proof-number {
  font-family: "Bebas Neue", sans-serif;
  font-size: 26px;
  line-height: 1;
  color: var(--ocean);
}
.save-note {
  margin-top: 28px;
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 12px;
  align-items: start;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(16,49,59,.10);
}
.save-note > span {
  width: 30px;
  height: 30px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  font-weight: 900;
}
.save-note p { margin: 1px 0 0; font-size: 12px; color: #45616a; }

.registration-app {
  min-width: 0;
  min-height: 760px;
  padding: 34px 38px 32px;
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  background: #fff;
}
.registration-head {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  align-items: start;
}
.registration-kicker {
  margin: 0 0 4px;
  color: var(--ocean);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}
.registration-title {
  margin: 0;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.text-button {
  border: 0;
  background: none;
  color: #6f858c;
  padding: 4px 0;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}
.registration-progress {
  position: relative;
  height: 5px;
  margin: 20px 0 34px;
  overflow: hidden;
  border-radius: 999px;
  background: #e8eff1;
}
.registration-progress span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 12.5%;
  border-radius: inherit;
  background: linear-gradient(90deg, var(--ocean), #5bc7e2, var(--sun));
  transition: width .24s ease;
}
.registration-screens {
  min-width: 0;
  min-height: 540px;
}
.registration-screen[hidden] { display: none !important; }
.registration-screen {
  animation: registration-in .22s ease both;
}
@keyframes registration-in {
  from { opacity: 0; transform: translateY(7px); }
  to { opacity: 1; transform: none; }
}
.screen-copy {
  max-width: 730px;
  margin-bottom: 26px;
}
.screen-eyebrow {
  margin: 0 0 9px;
  color: var(--ocean);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.screen-copy h3,
.registration-success h3 {
  margin: 0 0 10px;
  font-size: clamp(34px, 3.2vw, 54px);
  line-height: .98;
  letter-spacing: -.048em;
  font-weight: 500;
}
.screen-copy > p:last-child,
.registration-success > p {
  margin: 0;
  max-width: 650px;
  color: #577078;
  font-size: 13px;
}
.big-choice-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.choice-card,
.instrument-choice-grid button,
.stack-choice-grid button,
.path-option,
.price-option {
  position: relative;
  min-width: 0;
  border: 1px solid #dce7e9;
  background: #fbfdfd;
  color: var(--ink);
  cursor: pointer;
  transition: border-color .16s ease, background-color .16s ease, transform .16s ease, box-shadow .16s ease;
}
.choice-card:hover,
.instrument-choice-grid button:hover,
.stack-choice-grid button:hover,
.path-option:hover,
.price-option:hover {
  transform: translateY(-2px);
  border-color: rgba(22,143,181,.55);
}
.choice-card.is-selected,
.instrument-choice-grid button.is-selected,
.stack-choice-grid button.is-selected,
.path-option.is-selected,
.price-option.is-selected {
  border-color: var(--ocean);
  background: #e8f8fc;
  box-shadow: inset 0 0 0 1px rgba(22,143,181,.25);
}
.choice-card {
  min-height: 154px;
  padding: 22px 18px;
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: end;
  text-align: left;
}
.choice-card strong { font-size: 20px; }
.choice-card small { margin-top: 3px; color: #698089; }
.choice-icon {
  width: 46px;
  height: 46px;
  margin-bottom: auto;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  font-size: 20px;
}
.conditional-block {
  margin-top: 20px;
  padding: 20px;
  border-radius: 20px;
  background: linear-gradient(135deg, #eefaff, #fff8d9);
  border: 1px solid rgba(22,143,181,.12);
}
.field-label,
.field-stack > span,
.contact-pref legend,
.schedule-grid legend {
  display: block;
  margin-bottom: 8px;
  font-size: 12px;
  font-weight: 800;
  color: var(--ink);
}
.age-row {
  display: grid;
  grid-template-columns: 100px 1fr;
  gap: 16px;
  align-items: center;
}
.age-row input,
.field-stack input,
.field-stack textarea {
  width: 100%;
  border: 1px solid #cfdee1;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  outline: none;
}
.age-row input { height: 50px; padding: 0 13px; font-weight: 700; }
.age-row p { margin: 0; max-width: 520px; color: #60777f; font-size: 12px; }
.age-row input:focus,
.field-stack input:focus,
.field-stack textarea:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(22,143,181,.10); }

.instrument-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
}
.instrument-choice-grid button {
  min-height: 112px;
  padding: 16px;
  border-radius: 18px;
  display: grid;
  align-content: end;
  text-align: left;
}
.instrument-choice-grid strong { font-size: 16px; }
.instrument-choice-grid small { margin-top: 4px; color: #71858b; font-size: 10px; }

.stack-choice-grid {
  display: grid;
  gap: 9px;
}
.stack-choice-grid button {
  min-height: 70px;
  padding: 15px 18px;
  border-radius: 17px;
  display: grid;
  grid-template-columns: 170px 1fr;
  gap: 16px;
  align-items: center;
  text-align: left;
}
.stack-choice-grid span { font-weight: 800; }
.stack-choice-grid small { color: #657d85; font-size: 11px; }

.recommendation-note {
  margin-bottom: 15px;
  padding: 14px 16px;
  border-radius: 16px;
  background: linear-gradient(135deg, #e2f6fb, #fff6cd);
  color: #395862;
  font-size: 12px;
}
.recommendation-note strong { color: var(--ink); }

.path-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.path-option {
  min-height: 154px;
  padding: 18px;
  border-radius: 20px;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.path-option .path-badge {
  width: max-content;
  margin-bottom: 18px;
  padding: 5px 9px;
  border-radius: 999px;
  background: var(--sun);
  color: var(--ink);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
}
.path-option strong { font-size: 18px; line-height: 1.1; }
.path-option p { margin: 6px 0 0; color: #647a81; font-size: 11px; }
.path-option .path-price { margin-top: auto; padding-top: 18px; color: var(--ocean); font-size: 12px; font-weight: 800; }

.all-programs {
  margin-top: 16px;
  border-top: 1px solid #e0e9ea;
  padding-top: 15px;
}
.all-programs summary {
  cursor: pointer;
  color: var(--ocean);
  font-size: 12px;
  font-weight: 800;
}
.program-list {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
}
.program-list article {
  padding: 14px;
  border-radius: 15px;
  background: #f7fbfb;
  border: 1px solid #e2eaec;
}
.program-list strong { font-size: 12px; }
.program-list p { margin: 5px 0 0; color: #687f87; font-size: 10px; }

.price-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.price-option {
  min-height: 120px;
  padding: 18px;
  border-radius: 20px;
  text-align: left;
}
.price-option span { display: block; color: #627981; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; }
.price-option strong { display: block; margin-top: 7px; font-size: 22px; }
.price-option small { display: block; margin-top: 4px; color: #6c8188; }
.jit-info {
  margin-top: 18px;
  padding: 17px 18px;
  border-radius: 17px;
  background: #fff8d9;
  border: 1px solid rgba(231,184,38,.26);
  color: #526970;
  font-size: 11px;
}
.jit-info strong { color: var(--ink); }

.schedule-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.schedule-grid fieldset,
.contact-pref {
  margin: 0;
  padding: 0;
  border: 0;
}
.check-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}
.check-grid label,
.inline-choice-grid label {
  min-height: 44px;
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 10px 12px;
  border: 1px solid #dce6e8;
  border-radius: 13px;
  background: #fbfdfd;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.check-grid label:has(input:checked),
.inline-choice-grid label:has(input:checked) {
  border-color: var(--ocean);
  background: #e8f8fc;
}
input[type="checkbox"],
input[type="radio"] { accent-color: var(--ocean); }
.field-stack { display: grid; margin-top: 18px; }
.field-stack textarea { min-height: 90px; padding: 12px 13px; resize: vertical; }
.field-stack input { height: 50px; padding: 0 13px; }

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.contact-grid .field-stack { margin-top: 0; }
.field-stack > span small { font-weight: 500; color: #82949a; }
.contact-pref { margin-top: 22px; }
.inline-choice-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
}

.review-summary {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 9px;
  margin-bottom: 18px;
}
.review-chip {
  padding: 14px 15px;
  border-radius: 16px;
  background: #f4fafb;
  border: 1px solid #dfeaec;
}
.review-chip span {
  display: block;
  margin-bottom: 5px;
  color: #729099;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-chip strong { font-size: 12px; }

.policy-stack {
  display: grid;
  gap: 8px;
}
.policy-card {
  padding: 14px 15px;
  border-radius: 15px;
  background: #fffaf0;
  border: 1px solid #eee4ce;
}
.policy-card strong { display: block; margin-bottom: 4px; font-size: 12px; }
.policy-card p { margin: 0; color: #61757c; font-size: 10.5px; }
.policy-card.policy-highlight { background: linear-gradient(135deg, #e8f8fc, #fff6cd); border-color: rgba(22,143,181,.14); }

.understand-check {
  margin-top: 18px;
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 15px;
  border-radius: 15px;
  background: #f6fafb;
  border: 1px solid #e0eaec;
  font-size: 11px;
  font-weight: 700;
  cursor: pointer;
}
.understand-check input { margin-top: 2px; }

.submit-panel {
  margin-top: 18px;
  display: flex;
  justify-content: space-between;
  gap: 18px;
  align-items: center;
  padding: 18px;
  border-radius: 18px;
  background: var(--ink);
  color: #fff;
}
.submit-panel p { margin: 0; }
.submit-panel strong { display: block; margin: 3px 0 4px; }
.submit-panel [data-submit-note] { color: #c7dade; font-size: 10px; }
.submit-request:disabled { opacity: .42; cursor: not-allowed; transform: none; }
.submission-status { min-height: 18px; margin: 9px 0 0; color: #637a82; font-size: 11px; }

.registration-nav {
  padding-top: 22px;
  display: flex;
  justify-content: space-between;
  gap: 10px;
  border-top: 1px solid #e6edef;
}
.registration-nav .button { min-width: 110px; }
.registration-nav .button:disabled { opacity: .35; cursor: not-allowed; transform: none; }

.registration-success {
  min-height: 500px;
  display: grid;
  align-content: center;
  justify-items: start;
  max-width: 680px;
}
.success-mark {
  width: 70px;
  height: 70px;
  margin-bottom: 20px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  font-size: 30px;
}
.success-actions { margin-top: 24px; display: flex; gap: 9px; flex-wrap: wrap; }
.request-id { margin-top: 17px !important; color: #789097 !important; font-size: 10px !important; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 1050px) {
  .register { grid-template-columns: 1fr; }
  .register-intro { padding: 58px 44px; }
  .register-proof { grid-template-columns: repeat(3, 1fr); gap: 10px; border: 0; }
  .register-proof > div { grid-template-columns: 36px 1fr; border: 1px solid rgba(16,49,59,.10); border-radius: 16px; padding: 14px; background: rgba(255,255,255,.55); }
  .registration-app { min-height: 0; }
}

@media (max-width: 720px) {
  .register { margin-top: 18px; }
  .register-intro { padding: 48px 26px; }
  .register-intro h2 { font-size: 50px; }
  .register-proof { grid-template-columns: 1fr; }
  .registration-app { padding: 26px 20px 22px; }
  .registration-screens { min-height: 580px; }
  .big-choice-grid,
  .instrument-choice-grid,
  .path-grid,
  .price-choice-grid,
  .schedule-grid,
  .contact-grid,
  .review-summary { grid-template-columns: 1fr; }
  .choice-card { min-height: 110px; }
  .instrument-choice-grid button { min-height: 90px; }
  .stack-choice-grid button { grid-template-columns: 1fr; gap: 4px; min-height: 82px; }
  .program-list { grid-template-columns: 1fr; }
  .inline-choice-grid { grid-template-columns: 1fr 1fr; }
  .age-row { grid-template-columns: 90px 1fr; }
  .submit-panel { align-items: stretch; flex-direction: column; }
  .submit-panel .button { width: 100%; }
  .registration-nav .button { flex: 1; }
}

@media (max-width: 430px) {
  .registration-head { align-items: center; }
  .registration-title { font-size: 15px; }
  .registration-screens { min-height: 620px; }
  .check-grid,
  .inline-choice-grid { grid-template-columns: 1fr; }
  .age-row { grid-template-columns: 1fr; }
  .success-actions { display: grid; width: 100%; }
  .success-actions .button { width: 100%; }
}


/* V5.1 — bright hero readability wash
   Keep the photo visibly bright while giving white/yellow hero type
   a colorful coastal surface to sit on. */
.hero-wash {
  background:
    linear-gradient(
      90deg,
      rgba(8, 101, 137, .56) 0%,
      rgba(16, 132, 169, .43) 24%,
      rgba(57, 172, 204, .24) 49%,
      rgba(159, 226, 240, .10) 70%,
      rgba(255, 239, 178, .04) 100%
    );
}

/* A tiny amount of separation without making the typography look outlined. */
.hero-copy h1 {
  -webkit-text-stroke: .85px rgba(4, 62, 82, .48);
  text-shadow:
    0 2px 2px rgba(4, 62, 82, .24),
    0 7px 20px rgba(4, 62, 82, .18);
}

.hero-copy .hand {
  text-shadow:
    0 1px 2px rgba(4, 62, 82, .48),
    0 5px 16px rgba(4, 62, 82, .24);
}

.hero-kicker {
  -webkit-text-stroke: .2px rgba(4, 62, 82, .35);
  text-shadow:
    0 1px 2px rgba(4, 62, 82, .42),
    0 5px 16px rgba(4, 62, 82, .22);
}

/* On phones the text spans more of the image, so extend the same light-blue wash
   downward instead of introducing a dark mobile overlay. */
@media (max-width: 720px) {
  .hero-wash {
    background:
      linear-gradient(
        180deg,
        rgba(10, 112, 148, .18) 0%,
        rgba(12, 119, 158, .46) 24%,
        rgba(25, 146, 181, .42) 52%,
        rgba(83, 188, 211, .20) 72%,
        rgba(255, 238, 174, .05) 100%
      );
  }
}

/* V6 — sales-funnel registration views */
.registration-app { min-height: 820px; }
.registration-screens { min-height: 600px; }
.field-error { margin: 9px 0 0; color: #a8462d; font-size: 11px; font-weight: 700; }
.dob-row { display: grid; grid-template-columns: minmax(180px, 230px) 1fr; gap: 18px; align-items: center; }
.dob-row input,
.compact-field-row input,
.inline-text-input {
  min-height: 50px; padding: 0 14px; border: 1px solid #cfdee1; border-radius: 14px; background: #fff; color: var(--ink); font: inherit; outline: none;
}
.dob-row input:focus,.compact-field-row input:focus,.inline-text-input:focus { border-color: var(--ocean); box-shadow: 0 0 0 3px rgba(22,143,181,.10); }
.dob-row p { margin: 0; color: #60777f; font-size: 12px; line-height: 1.45; }

.instrument-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.instrument-choice-grid { grid-template-columns: repeat(4, minmax(0,1fr)); }
.instrument-choice-grid button { min-height: 148px; align-content: start; gap: 0; overflow: hidden; }
.instrument-icon { width: 58px; height: 58px; display: grid; place-items: center; margin-bottom: 18px; border-radius: 17px; background: linear-gradient(145deg,#e4f7fc,#fff2b7); color: var(--ink); }
.instrument-icon svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.instrument-icon svg .fill { fill: currentColor; stroke: none; }
.instrument-choice-grid button.is-selected .instrument-icon { background: var(--sun); }
.more-instruments { margin-top: 14px; border-top: 1px solid #e3ebec; padding-top: 14px; }
.more-instruments summary { color: var(--ocean); cursor: pointer; font-size: 12px; font-weight: 800; }
.more-instrument-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.more-instrument-grid button { min-height: 54px; padding: 10px 12px; display: flex; align-items: center; gap: 10px; border: 1px solid #dce7e9; border-radius: 14px; background: #fbfdfd; color: var(--ink); font: inherit; font-size: 11px; font-weight: 800; cursor: pointer; }
.more-instrument-grid button svg { width: 25px; height: 25px; fill: none; stroke: currentColor; stroke-width: 2.3; stroke-linecap: round; stroke-linejoin: round; }
.more-instrument-grid button.is-selected { border-color: var(--ocean); background: #e8f8fc; }
.no-pressure-inline { width: 100%; margin-top: 13px; padding: 13px 15px; display: grid; grid-template-columns: 32px auto 1fr; gap: 10px; align-items: center; border: 1px dashed #b8c8cc; border-radius: 15px; background: #f8faf9; color: #587077; text-align: left; cursor: pointer; }
.no-pressure-inline > span:first-child { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: #e9efef; font-weight: 900; }
.no-pressure-inline strong { color: var(--ink); font-size: 12px; }
.no-pressure-inline small { font-size: 10px; }
.no-pressure-inline.is-selected { border-color: var(--ocean); background: #eef9fc; }
.primary-interest { margin-top: 14px; padding: 15px; border-radius: 16px; background: #fff8dc; border: 1px solid #f0df9e; }
.primary-interest p { margin: 0 0 10px; color: #5e7075; font-size: 11px; }
.primary-interest-options { display: flex; flex-wrap: wrap; gap: 7px; }
.primary-interest-options button { padding: 8px 11px; border: 1px solid #d8d0ab; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.primary-interest-options button.is-selected { background: var(--sun); border-color: #e7bf38; }

.conditional-block.compact { padding: 16px 18px; }
.compact-field-row { display: flex; align-items: center; gap: 8px; }
.compact-field-row input { width: 120px; }
.compact-field-row span { color: #687d84; font-size: 12px; font-weight: 700; }
.tandem-question { margin-top: 14px; padding: 16px 18px; display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; border: 1px solid #dfe8e9; border-radius: 18px; background: #fbfdfd; }
.tandem-question strong { font-size: 12px; }
.tandem-question p { margin: 4px 0 0; color: #657b82; font-size: 10px; }
.mini-segmented { display: flex; gap: 5px; }
.mini-segmented button { min-height: 36px; padding: 7px 10px; border: 1px solid #d5e1e3; border-radius: 11px; background: #fff; color: var(--ink); font: inherit; font-size: 10px; font-weight: 800; cursor: pointer; }
.mini-segmented button.is-selected { background: #e8f8fc; border-color: var(--ocean); }

/* Recommendation screen: one dominant choice, two secondary choices, then a distinct escape hatch. */
.fit-primary-card { width: 100%; min-height: 260px; padding: 26px; border: 2px solid var(--ocean); border-radius: 26px; background: linear-gradient(135deg,#e2f7fd 0%,#fffdf6 55%,#fff0b1 100%); color: var(--ink); text-align: left; cursor: pointer; box-shadow: 0 14px 34px rgba(26,98,121,.10); transition: transform .16s ease, box-shadow .16s ease; }
.fit-primary-card:hover { transform: translateY(-2px); box-shadow: 0 18px 38px rgba(26,98,121,.15); }
.fit-primary-card.is-selected { box-shadow: inset 0 0 0 2px rgba(22,143,181,.20),0 18px 38px rgba(26,98,121,.15); }
.fit-topline { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 24px; padding: 6px 10px; border-radius: 999px; background: var(--sun); font-size: 9px; font-weight: 900; letter-spacing: .06em; text-transform: uppercase; }
.fit-star { font-size: 12px; }
.fit-primary-body { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.fit-primary-body strong { font-size: clamp(34px,4vw,54px); line-height: .96; letter-spacing: -.045em; font-weight: 600; }
.fit-badge { padding: 7px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(16,49,59,.12); color: var(--ocean); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fit-primary-card > p { max-width: 650px; margin: 14px 0 22px; color: #395f6b; font-size: 13px; line-height: 1.45; }
.fit-primary-footer { padding-top: 17px; border-top: 1px solid rgba(16,49,59,.13); display: grid; grid-template-columns: 1fr auto; gap: 18px; align-items: end; }
.fit-primary-footer span { max-width: 520px; color: #62777d; font-size: 11px; }
.fit-primary-footer b { color: var(--ocean); font-size: 12px; text-align: right; }
.fit-select-label { display: inline-block; margin-top: 18px; color: var(--ink); font-size: 10px; font-weight: 900; text-transform: uppercase; letter-spacing: .04em; }
.fit-secondary-wrap { margin-top: 18px; }
.fit-secondary-label { margin: 0 0 9px; color: #698087; font-size: 10px; font-weight: 900; letter-spacing: .07em; text-transform: uppercase; }
.fit-secondary-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 10px; }
.fit-secondary-card { min-height: 150px; padding: 17px; display: flex; flex-direction: column; border: 1px solid #dce6e8; border-radius: 18px; background: #fbfdfd; color: var(--ink); text-align: left; cursor: pointer; }
.fit-secondary-card > span { color: var(--ocean); font-size: 9px; font-weight: 900; text-transform: uppercase; }
.fit-secondary-card strong { margin-top: 10px; font-size: 17px; }
.fit-secondary-card p { margin: 5px 0 12px; color: #657b82; font-size: 10px; line-height: 1.4; }
.fit-secondary-card small { margin-top: auto; color: #5c747b; font-size: 9px; font-weight: 700; }
.fit-secondary-card.is-selected { border-color: var(--ocean); background: #eaf8fc; box-shadow: inset 0 0 0 1px rgba(22,143,181,.22); }
.no-pressure-card { width: 100%; margin-top: 17px; padding: 17px 18px; display: grid; grid-template-columns: 36px 1fr auto; gap: 13px; align-items: center; border: 1px dashed #b9c7ca; border-radius: 18px; background: #f5f7f6; color: #60757b; text-align: left; cursor: pointer; }
.no-pressure-mark { width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #e7eded; color: #597078; font-weight: 900; }
.no-pressure-card strong { display: block; color: var(--ink); font-size: 12px; }
.no-pressure-card small { display: block; margin-top: 3px; font-size: 10px; line-height: 1.35; }
.no-pressure-action { padding: 7px 9px; border-radius: 999px; background: #e7eded; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.no-pressure-card.is-selected { border-color: #7c989f; background: #eef2f1; }

.subquestion-row { margin: 4px 0 10px; display: flex; justify-content: space-between; gap: 16px; align-items: end; }
.subquestion-row > div { display: grid; gap: 2px; }
.subquestion-kicker { color: var(--ocean); font-size: 8px; font-weight: 900; text-transform: uppercase; letter-spacing: .08em; }
.subquestion-row strong { font-size: 13px; }
.subquestion-row > small { max-width: 280px; color: #6a7e84; font-size: 9px; text-align: right; }
.delivery-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 9px; }
.delivery-card { min-height: 112px; padding: 15px; display: flex; flex-direction: column; border: 1px solid #dce6e8; border-radius: 17px; background: #fbfdfd; color: var(--ink); text-align: left; cursor: pointer; }
.delivery-card > span { color: #668088; font-size: 8px; font-weight: 900; text-transform: uppercase; }
.delivery-card strong { margin-top: 9px; font-size: 17px; }
.delivery-card small { margin-top: 5px; color: #677d84; font-size: 9px; line-height: 1.35; }
.delivery-card.is-recommended { border-color: rgba(22,143,181,.45); }
.delivery-card.is-selected { border-color: var(--ocean); background: #e8f8fc; box-shadow: inset 0 0 0 1px rgba(22,143,181,.20); }
.no-pressure-small { margin-top: 8px; padding: 8px 0; border: 0; background: transparent; color: #698087; font: inherit; font-size: 9px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.no-pressure-small.is-selected { color: var(--ocean); }
.session-section { margin-top: 24px; }
.price-option.is-recommended { border-color: rgba(231,184,38,.65); }
.price-option.is-recommended::after { content:"Best fit"; position:absolute; top:10px; right:10px; padding:4px 7px; border-radius:999px; background:var(--sun); font-size:7px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; }

.student-grid { margin-bottom: 14px; }
.field-wide { grid-column: 1 / -1; }
.minor-details { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e8ea; }
.charter-question { margin-top: 15px; }
.charter-chip-grid { display: flex; flex-wrap: wrap; gap: 7px; }
.charter-chip-grid button { padding: 8px 10px; border: 1px solid #d3dfe1; border-radius: 999px; background: #fff; color: var(--ink); font: inherit; font-size: 9px; font-weight: 800; cursor: pointer; }
.charter-chip-grid button.is-selected { background: #e8f8fc; border-color: var(--ocean); }
.inline-text-input { width: 100%; margin-top: 10px; }
.teacher-personalize { margin-top: 20px; padding: 18px; border: 1px solid #dfe8e9; border-radius: 20px; background: linear-gradient(135deg,#f7fcfd,#fff9e5); }
.music-style-field { margin: 0 0 12px; padding: 0; border: 0; }
.music-style-field legend { margin-bottom: 8px; font-size: 11px; font-weight: 800; }
.music-style-grid { grid-template-columns: repeat(3,1fr); }
.teacher-personalize .field-stack { margin-top: 10px; }

.guardian-panel { margin-top: 20px; padding: 18px; border-radius: 20px; background: #f7faf9; border: 1px solid #dfe8e9; }
.same-contact-toggle { display: flex; align-items: flex-start; gap: 11px; cursor: pointer; }
.same-contact-toggle input { margin-top: 3px; }
.same-contact-toggle span { display: grid; gap: 3px; }
.same-contact-toggle strong { font-size: 12px; }
.same-contact-toggle small { color: #667c83; font-size: 10px; }
.guardian-fields { margin-top: 16px; padding-top: 16px; border-top: 1px solid #e0e7e8; }

.review-summary { grid-template-columns: repeat(2,minmax(0,1fr)); }
.review-details { margin-top: 15px; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 8px; }
.review-details article { padding: 14px; border: 1px solid #e0e7e9; border-radius: 15px; background: #fbfdfd; }
.review-details strong { font-size: 10px; }
.review-details p { margin: 4px 0 0; color: #687d84; font-size: 9px; line-height: 1.45; }

@media (max-width: 900px) {
  .instrument-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .more-instrument-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .fit-primary-footer { grid-template-columns: 1fr; }
  .fit-primary-footer b { text-align: left; }
  .delivery-grid { grid-template-columns: 1fr; }
  .music-style-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 680px) {
  .registration-app { min-height: 0; }
  .registration-screens { min-height: 0; }
  .dob-row { grid-template-columns: 1fr; }
  .instrument-choice-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
  .instrument-choice-grid button { min-height: 132px; }
  .more-instrument-grid { grid-template-columns: 1fr 1fr; }
  .no-pressure-inline { grid-template-columns: 30px 1fr; }
  .no-pressure-inline small { grid-column: 2; }
  .tandem-question { grid-template-columns: 1fr; }
  .fit-primary-card { min-height: 0; padding: 20px; }
  .fit-primary-body strong { font-size: 38px; }
  .fit-secondary-grid { grid-template-columns: 1fr; }
  .no-pressure-card { grid-template-columns: 32px 1fr; }
  .no-pressure-action { grid-column: 2; width: max-content; }
  .subquestion-row { align-items: start; flex-direction: column; gap: 4px; }
  .subquestion-row > small { text-align: left; }
  .music-style-grid { grid-template-columns: 1fr 1fr; }
  .review-details { grid-template-columns: 1fr; }
}
.seasonal-interest { margin-top: 15px; padding-top: 15px; border-top: 1px solid #e1e9ea; }
.seasonal-interest > p { margin: 0 0 10px; color: #61767d; font-size: 10px; line-height: 1.4; }
.seasonal-interest > p strong { color: var(--ink); font-size: 11px; }
.seasonal-interest-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 6px; }
.seasonal-interest-grid button { padding: 9px 10px; border: 1px solid #dce5e7; border-radius: 11px; background: #fff; color: #536c74; font: inherit; font-size: 9px; font-weight: 700; text-align: left; cursor: pointer; }
.seasonal-interest-grid button.is-selected { border-color: var(--ocean); background: #e8f8fc; color: var(--ink); }
@media (max-width:680px){ .seasonal-interest-grid{grid-template-columns:1fr;} }


/* V6.1 HERO REDESIGN
   Center the school name in the open sky area, keep the students visible,
   and use a light top wash for readability rather than darkening the whole image. */

.hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(760px, 88vh, 980px);
  display: grid;
  align-items: stretch;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(19, 121, 164, 0.50) 0%,
      rgba(37, 154, 193, 0.34) 16%,
      rgba(104, 199, 225, 0.16) 31%,
      rgba(232, 247, 252, 0.04) 49%,
      rgba(255, 255, 255, 0.00) 64%
    );
  pointer-events: none;
  z-index: 1;
}

.hero-wash {
  background: transparent !important;
}

.hero-inner,
.hero-grid,
.hero-content,
.hero-copy {
  position: relative;
  z-index: 2;
}

.hero-copy {
  max-width: 820px;
  margin: 0 auto;
  text-align: center;
  padding: clamp(64px, 10vh, 108px) clamp(20px, 3vw, 40px) clamp(160px, 20vh, 230px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
}

.hero-kicker {
  color: #f5cf4f;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: none;
  font-size: clamp(1rem, 1.35vw, 1.25rem);
  margin: 0;
  text-shadow: 0 1px 1px rgba(4, 62, 82, 0.18), 0 8px 26px rgba(4, 62, 82, 0.16);
}

.hero-copy h1 {
  margin: 0;
  line-height: 0.92;
  font-size: clamp(4rem, 11vw, 8.4rem);
  letter-spacing: -0.045em;
  text-align: center;
  color: #fffdfa;
  -webkit-text-stroke: 1px rgba(5, 57, 73, 0.15);
  text-shadow:
    0 3px 3px rgba(5, 57, 73, 0.10),
    0 16px 34px rgba(5, 57, 73, 0.14);
}

.hero-copy .hand {
  margin: 0;
  color: #ffffff;
  font-size: clamp(1.3rem, 2vw, 2rem);
  line-height: 1.15;
  text-shadow:
    0 2px 2px rgba(5, 57, 73, 0.10),
    0 10px 24px rgba(5, 57, 73, 0.10);
}

.hero-lead {
  max-width: 760px;
  margin: 4px auto 0;
  color: rgba(255, 255, 255, 0.96);
  font-size: clamp(1rem, 1.28vw, 1.24rem);
  line-height: 1.45;
  text-align: center;
  text-shadow:
    0 1px 1px rgba(5, 57, 73, 0.10),
    0 10px 24px rgba(5, 57, 73, 0.10);
}

.hero-actions {
  justify-content: center !important;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: 10px;
}

.hero-actions .button,
.hero-actions a.button,
.hero-actions a,
.hero-actions button {
  box-shadow: 0 10px 24px rgba(8, 94, 123, 0.10);
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 22px;
  transform: translateX(-50%);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #11485d;
  background: rgba(255, 249, 235, 0.96);
  border: 1px solid rgba(15, 88, 112, 0.12);
  box-shadow: 0 12px 24px rgba(10, 90, 118, 0.12);
  backdrop-filter: blur(6px);
}

.hero-scroll-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.hero-scroll-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5cf4f;
  color: #174d60;
  font-weight: 900;
  line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(23, 77, 96, 0.08);
}

html {
  scroll-behavior: smooth;
}

@media (max-width: 900px) {
  .hero {
    min-height: clamp(680px, 86vh, 900px);
  }

  .hero-copy {
    padding-top: clamp(84px, 12vh, 120px);
    padding-bottom: 140px;
  }

  .hero-copy h1 {
    font-size: clamp(3.35rem, 14vw, 6.2rem);
  }

  .hero-lead {
    max-width: 36rem;
  }
}

@media (max-width: 640px) {
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 123, 165, 0.56) 0%,
        rgba(58, 167, 205, 0.30) 24%,
        rgba(129, 207, 228, 0.10) 46%,
        rgba(255, 255, 255, 0.00) 66%
      );
  }

  .hero-copy {
    gap: 12px;
    padding-left: 18px;
    padding-right: 18px;
    padding-bottom: 132px;
  }

  .hero-kicker {
    font-size: 0.98rem;
  }

  .hero-copy .hand {
    font-size: 1.18rem;
  }

  .hero-lead {
    font-size: 0.98rem;
  }

  .hero-scroll {
    bottom: 16px;
    padding: 10px 15px;
  }

  .hero-scroll-label {
    font-size: 0.9rem;
  }
}


/* V6.2 — Hero redesign:
   Put the school name in the sky area, keep students visible below,
   use a light-theme top gradient, and add a subtle mirrored-sky extension
   so there is more compositional room for the title.
*/

.hero {
  position: relative;
  min-height: clamp(760px, 92vh, 980px);
  height: auto;
  isolation: isolate;
  background: #dff2f7;
}

.hero-image {
  position: relative;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 48%;
  display: block;
}

/* Create a soft mirrored extension from the top of the same photo,
   then fade it into the real image so the sky area feels taller. */
.hero::after {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 40%;
  background-image: url("assets/student-concert.webp");
  background-size: cover;
  background-position: center top;
  transform: scaleY(-1);
  transform-origin: top center;
  opacity: 0.20;
  mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 46%, rgba(0,0,0,0) 100%);
  pointer-events: none;
  z-index: 1;
}

/* Light-themed readability wash concentrated at the top. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(16, 125, 163, 0.62) 0%,
      rgba(50, 166, 202, 0.44) 14%,
      rgba(123, 208, 230, 0.20) 29%,
      rgba(239, 248, 250, 0.08) 44%,
      rgba(255,255,255,0.00) 62%
    );
  pointer-events: none;
  z-index: 2;
}

.hero-wash {
  display: none !important;
}

.hero-copy {
  position: absolute;
  z-index: 4;
  left: 50%;
  top: clamp(104px, 13vh, 138px);
  transform: translateX(-50%);
  width: min(100% - 40px, 950px);
  max-width: 950px;
  text-align: center;
  color: #fffefa;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.hero-copy h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(82px, 11vw, 168px);
  line-height: 0.84;
  letter-spacing: 0.01em;
  color: #fffefa;
  -webkit-text-stroke: 1.25px rgba(7, 60, 78, 0.22);
  text-shadow:
    0 2px 3px rgba(6, 66, 88, 0.10),
    0 18px 34px rgba(6, 66, 88, 0.16);
}

.hero-kicker {
  order: -1;
  margin: 0;
  color: #f4d04f;
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-shadow:
    0 1px 2px rgba(8, 57, 74, 0.18),
    0 8px 20px rgba(8, 57, 74, 0.16);
}

.hero-copy .hand {
  margin: 0;
  color: #fffefa;
  font-size: clamp(24px, 2.2vw, 38px);
  line-height: 1.1;
  text-shadow:
    0 1px 2px rgba(8, 57, 74, 0.12),
    0 8px 20px rgba(8, 57, 74, 0.12);
}

.hero-lead {
  max-width: 780px;
  margin: 2px auto 0;
  color: rgba(255,255,255,0.97);
  font-size: clamp(16px, 1.35vw, 21px);
  line-height: 1.42;
  text-shadow:
    0 1px 2px rgba(8, 57, 74, 0.12),
    0 8px 20px rgba(8, 57, 74, 0.12);
}

/* Keep the utility card lower-right so it doesn't compete with the title. */
.hero-side {
  position: absolute;
  z-index: 4;
  right: clamp(20px, 4.5%, 64px);
  bottom: clamp(62px, 7.5%, 78px);
  width: min(500px, 34vw);
  padding: 18px 20px;
  border: 1px solid rgba(16,49,59,.12);
  border-radius: 20px;
  background: rgba(255, 253, 247, 0.98);
  box-shadow: 0 18px 42px rgba(20,82,101,.16);
}

.hero-side > p {
  margin: 0 0 18px;
  font-size: 16px;
  color: var(--ink);
  text-shadow: none;
}

.hero-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.hero-scroll {
  position: absolute;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  z-index: 5;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 18px;
  border-radius: 999px;
  text-decoration: none;
  color: #14485c;
  background: rgba(255, 250, 236, 0.96);
  border: 1px solid rgba(15, 88, 112, 0.12);
  box-shadow: 0 12px 24px rgba(10, 90, 118, 0.12);
}

.hero-scroll-label {
  font-weight: 700;
  font-size: 0.95rem;
}

.hero-scroll-icon {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #f5cf4f;
  color: #174d60;
  font-weight: 900;
  line-height: 1;
}

@media (max-width: 1080px) {
  .hero-copy {
    top: clamp(96px, 11vh, 126px);
    width: min(100% - 36px, 820px);
  }

  .hero-copy h1 {
    font-size: clamp(70px, 10vw, 132px);
  }

  .hero-side {
    width: min(460px, 42vw);
  }
}

@media (max-width: 840px) {
  .hero {
    min-height: 820px;
  }

  .hero::after {
    height: 35%;
    opacity: 0.16;
  }

  .hero-copy {
    top: 92px;
    width: min(100% - 30px, 700px);
  }

  .hero-copy h1 {
    font-size: clamp(64px, 11vw, 108px);
  }

  .hero-copy .hand {
    font-size: clamp(21px, 2.8vw, 30px);
  }

  .hero-lead {
    max-width: 620px;
    font-size: 16px;
  }

  .hero-side {
    right: 20px;
    left: 20px;
    bottom: 74px;
    width: auto;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 760px;
  }

  .hero-image {
    object-position: center 52%;
  }

  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(17, 125, 165, 0.68) 0%,
        rgba(63, 174, 208, 0.38) 21%,
        rgba(170, 227, 241, 0.10) 40%,
        rgba(255,255,255,0.00) 60%
      );
  }

  .hero-copy {
    top: 84px;
    width: calc(100% - 26px);
    gap: 8px;
  }

  .hero-kicker {
    font-size: 16px;
  }

  .hero-copy h1 {
    font-size: clamp(56px, 15vw, 88px);
    line-height: 0.87;
  }

  .hero-copy .hand {
    font-size: 19px;
  }

  .hero-lead {
    font-size: 15px;
    max-width: 92%;
  }

  .hero-side {
    left: 16px;
    right: 16px;
    bottom: 72px;
    padding: 16px 16px 18px;
  }

  .hero-side > p {
    font-size: 15px;
  }

  .hero-scroll {
    bottom: 14px;
    padding: 11px 15px;
  }
}


/* V6.3 — simplified hero
   Clearer at the top, more breathing room, single-line title on desktop,
   and less clutter overall. */

.hero {
  min-height: clamp(820px, 96vh, 1040px);
}

.hero::after {
  height: 48%;
  opacity: 0.24;
}

.hero::before {
  background:
    linear-gradient(
      180deg,
      rgba(16, 125, 163, 0.68) 0%,
      rgba(55, 170, 205, 0.48) 16%,
      rgba(141, 215, 234, 0.22) 31%,
      rgba(244, 250, 252, 0.08) 47%,
      rgba(255,255,255,0.00) 64%
    );
}

.hero-image {
  object-position: center 54%;
}

.hero-copy {
  top: clamp(140px, 16vh, 180px);
  width: min(100% - 44px, 1240px);
  gap: 12px;
}

.hero-kicker {
  margin: 0 0 2px;
  color: #f4d04f;
  font-size: clamp(17px, 1.35vw, 22px);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
}

.hero-copy h1 {
  margin: 0;
  font-family: "Bebas Neue", sans-serif;
  font-size: clamp(66px, 7.5vw, 116px);
  line-height: 0.92;
  letter-spacing: 0.012em;
  white-space: nowrap;
  color: #fffefa;
  -webkit-text-stroke: 1.1px rgba(8, 56, 73, 0.18);
  text-shadow:
    0 2px 3px rgba(7, 67, 88, 0.10),
    0 14px 30px rgba(7, 67, 88, 0.14);
}

/* The explanatory subtext under the title is intentionally removed. */
.hero-copy .hand,
.hero-copy .hero-lead {
  display: none !important;
}

/* Push the utility card lower so the sky/title area stays clean. */
.hero-side {
  right: clamp(18px, 4.5%, 62px);
  bottom: clamp(76px, 8.5%, 92px);
  width: min(470px, 33vw);
}

.hero-side > p {
  margin: 0 0 16px;
  font-size: 15px;
  line-height: 1.45;
}

.hero-scroll {
  bottom: 20px;
}

@media (max-width: 1180px) {
  .hero-copy {
    width: min(100% - 36px, 980px);
  }

  .hero-copy h1 {
    font-size: clamp(60px, 8.1vw, 96px);
  }
}

@media (max-width: 900px) {
  .hero {
    min-height: 820px;
  }

  .hero::after {
    height: 42%;
    opacity: 0.20;
  }

  .hero-copy {
    top: 124px;
    width: calc(100% - 30px);
  }

  .hero-copy h1 {
    font-size: clamp(52px, 9vw, 82px);
    white-space: normal;
    max-width: 11ch;
    margin-inline: auto;
  }

  .hero-kicker {
    font-size: 16px;
  }

  .hero-side {
    width: min(520px, calc(100% - 36px));
    right: 18px;
    left: 18px;
    bottom: 78px;
  }
}

@media (max-width: 640px) {
  .hero {
    min-height: 760px;
  }

  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 128, 167, 0.72) 0%,
        rgba(78, 183, 215, 0.42) 20%,
        rgba(187, 232, 242, 0.12) 38%,
        rgba(255,255,255,0.00) 58%
      );
  }

  .hero-copy {
    top: 108px;
    width: calc(100% - 24px);
    gap: 8px;
  }

  .hero-kicker {
    font-size: 15px;
  }

  .hero-copy h1 {
    font-size: clamp(48px, 13vw, 70px);
    line-height: 0.95;
    max-width: 10ch;
  }

  .hero-side {
    left: 14px;
    right: 14px;
    bottom: 72px;
    width: auto;
  }

  .hero-side > p {
    font-size: 14px;
  }
}


/* V6.4 — simpler readability gradient for the hero
   Replace the more complex feel with one clean top-down gradient that
   makes the title readable without muddying the whole photo. */

.hero::after {
  opacity: 0.12;
  height: 42%;
}

.hero::before {
  background:
    linear-gradient(
      180deg,
      rgba(19, 120, 157, 0.82) 0%,
      rgba(49, 162, 197, 0.56) 14%,
      rgba(112, 201, 224, 0.28) 28%,
      rgba(201, 236, 245, 0.10) 40%,
      rgba(255, 255, 255, 0.00) 52%
    );
}

.hero-copy {
  top: clamp(136px, 15vh, 172px);
}

.hero-kicker {
  color: #f5d04f;
  text-shadow:
    0 1px 2px rgba(7, 58, 74, 0.22),
    0 8px 18px rgba(7, 58, 74, 0.18);
}

.hero-copy h1 {
  text-shadow:
    0 2px 3px rgba(7, 67, 88, 0.12),
    0 14px 28px rgba(7, 67, 88, 0.16);
}

@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 123, 160, 0.84) 0%,
        rgba(56, 170, 203, 0.58) 16%,
        rgba(129, 208, 227, 0.28) 31%,
        rgba(220, 242, 247, 0.10) 43%,
        rgba(255, 255, 255, 0.00) 56%
      );
  }
}

@media (max-width: 640px) {
  .hero::after {
    opacity: 0.10;
    height: 36%;
  }

  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(20, 127, 165, 0.86) 0%,
        rgba(68, 180, 211, 0.58) 19%,
        rgba(154, 220, 235, 0.26) 35%,
        rgba(255, 255, 255, 0.00) 54%
      );
  }

  .hero-copy {
    top: 104px;
  }
}


/* V6.5 — extend the hero gradient farther down */

.hero::before {
  background:
    linear-gradient(
      180deg,
      rgba(19, 120, 157, 0.84) 0%,
      rgba(49, 162, 197, 0.62) 18%,
      rgba(112, 201, 224, 0.36) 36%,
      rgba(192, 232, 242, 0.16) 52%,
      rgba(255, 255, 255, 0.04) 62%,
      rgba(255, 255, 255, 0.00) 72%
    );
}

@media (max-width: 900px) {
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 123, 160, 0.86) 0%,
        rgba(56, 170, 203, 0.64) 20%,
        rgba(129, 208, 227, 0.38) 40%,
        rgba(210, 240, 246, 0.16) 56%,
        rgba(255, 255, 255, 0.04) 66%,
        rgba(255, 255, 255, 0.00) 76%
      );
  }
}

@media (max-width: 640px) {
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(20, 127, 165, 0.88) 0%,
        rgba(68, 180, 211, 0.64) 22%,
        rgba(154, 220, 235, 0.34) 42%,
        rgba(230, 246, 249, 0.14) 58%,
        rgba(255, 255, 255, 0.03) 68%,
        rgba(255, 255, 255, 0.00) 78%
      );
  }
}


/* V7.1 STABLE HERO
   Rebuilt from the last known-good V6.5.
   One-time entrance motion only: no scroll parallax, no section overlap,
   no competing lower-right card. */

.hero {
  --hero-radius: 34px;
  position: relative;
  min-height: clamp(820px, 94svh, 980px);
  height: auto;
  overflow: hidden;
  border-radius: 0 0 var(--hero-radius) var(--hero-radius);
  isolation: isolate;
  background: #dff3f8;
}

.hero-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 52%;
  z-index: 0;
  animation: heroStableImageIn 950ms cubic-bezier(.2,.72,.16,1) both;
  will-change: transform;
}

/* One clean, light-themed readability gradient. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(
      180deg,
      rgba(18, 119, 157, .86) 0%,
      rgba(48, 162, 198, .66) 20%,
      rgba(107, 199, 223, .42) 38%,
      rgba(187, 231, 242, .18) 55%,
      rgba(255,255,255,.04) 66%,
      rgba(255,255,255,0) 76%
    );
}

/* Neutralize legacy mirrored/extra hero pseudo layer if present. */
.hero::after {
  content: none !important;
}

.hero-wash {
  display: none !important;
}

.hero-copy {
  position: absolute !important;
  z-index: 3;
  top: clamp(130px, 15vh, 170px) !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  width: min(calc(100% - 48px), 1240px) !important;
  max-width: none !important;
  padding: 0 !important;
  margin: 0 !important;
  display: block !important;
  text-align: center;
}

.hero-kicker {
  margin: 0 0 14px !important;
  color: #f5d04f !important;
  font: 700 clamp(17px, 1.35vw, 22px)/1.2 "DM Sans", sans-serif !important;
  letter-spacing: .02em;
  text-shadow: 0 2px 14px rgba(8,60,78,.18);
  animation: heroStableKickerIn 560ms 100ms ease both;
}

.hero-copy h1 {
  margin: 0 !important;
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif !important;
  font-size: clamp(68px, 7.5vw, 118px) !important;
  line-height: .92 !important;
  letter-spacing: .008em !important;
  color: #fffefa !important;
  white-space: nowrap !important;
  text-transform: uppercase;
  -webkit-text-stroke: 1px rgba(8,56,73,.16);
  text-shadow: 0 3px 4px rgba(7,67,88,.10), 0 16px 32px rgba(7,67,88,.14);
}

.hero-title-mask {
  display: inline-block;
  overflow: hidden;
  padding: .08em .03em .02em;
}

.hero-title-text {
  display: inline-block;
  animation: heroStableTitleIn 720ms 120ms cubic-bezier(.18,.78,.16,1) both;
}

.hero-scroll {
  position: absolute !important;
  z-index: 4;
  left: 50% !important;
  bottom: 22px !important;
  transform: translateX(-50%) !important;
  display: inline-flex !important;
  align-items: center;
  gap: 11px;
  padding: 12px 14px 12px 19px !important;
  border-radius: 999px;
  background: rgba(255,249,237,.97) !important;
  color: #12485a !important;
  border: 1px solid rgba(16,49,59,.09);
  box-shadow: 0 14px 34px rgba(18,83,101,.14);
  text-decoration: none;
  animation: heroStableCtaIn 620ms 420ms ease both;
}

.hero-scroll:hover {
  transform: translateX(-50%) translateY(-2px) !important;
}

.hero-scroll-icon {
  width: 31px;
  height: 31px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--sun);
  color: #12485a;
  font-weight: 900;
}

.hero-scroll-label {
  font-size: 13px;
  font-weight: 800;
}

/* Explicitly undo the V7 overlap concept. */
.lessons {
  margin-top: 40px !important;
  box-shadow: none !important;
}

@keyframes heroStableImageIn {
  from { transform: scale(1.018); }
  to { transform: scale(1); }
}
@keyframes heroStableKickerIn {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroStableTitleIn {
  from { opacity: .2; transform: translateY(108%); }
  to { opacity: 1; transform: translateY(0); }
}
@keyframes heroStableCtaIn {
  from { opacity: 0; transform: translateX(-50%) translateY(10px); }
  to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

@media (max-width: 980px) {
  .hero {
    min-height: 840px;
  }

  .hero-copy {
    top: 120px !important;
    width: calc(100% - 34px) !important;
  }

  .hero-copy h1 {
    font-size: clamp(58px, 9vw, 92px) !important;
  }
}

@media (max-width: 720px) {
  .hero {
    min-height: 780px;
  }

  .hero-image {
    object-position: center 54%;
  }

  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18,122,160,.88) 0%,
        rgba(60,174,207,.66) 22%,
        rgba(132,210,229,.39) 42%,
        rgba(218,242,248,.14) 58%,
        rgba(255,255,255,0) 72%
      );
  }

  .hero-copy {
    top: 104px !important;
    width: calc(100% - 26px) !important;
  }

  .hero-kicker {
    max-width: 92%;
    margin-inline: auto !important;
    margin-bottom: 10px !important;
    font-size: 15px !important;
  }

  .hero-copy h1 {
    white-space: normal !important;
    font-size: clamp(52px, 13vw, 76px) !important;
    line-height: .92 !important;
    max-width: 10ch;
    margin-inline: auto !important;
  }

  .hero-scroll {
    bottom: 16px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-image,
  .hero-kicker,
  .hero-title-text,
  .hero-scroll {
    animation: none !important;
    transition: none !important;
  }
}


/* V7.2 — hero polish + charter-school ribbon */

/* Keep the descriptor precisely centered above the title. */
.hero-kicker {
  width: 100%;
  text-align: center !important;
  margin-inline: auto !important;
}

/* Subtle, professional image zoom on pointer hover.
   Uses the independent scale property so it does not fight the load animation. */
.hero-image {
  scale: 1;
  transition: scale 700ms cubic-bezier(.2,.72,.16,1);
}

@media (hover: hover) and (pointer: fine) {
  .hero:hover .hero-image {
    scale: 1.018;
  }
}

/* The lessons intro is now intentionally concise. */
.lesson-heading {
  grid-template-columns: 1fr !important;
  gap: 0 !important;
}

.lesson-heading > div {
  max-width: 760px;
}

/* Continuous charter-school ribbon between the hero and lessons. */
.school-ribbon {
  position: relative;
  margin-top: 18px;
  overflow: hidden;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      rgba(255, 247, 220, .98) 0%,
      rgba(231, 247, 252, .98) 48%,
      rgba(255, 240, 166, .98) 100%
    );
  border: 1px solid rgba(20, 88, 108, .10);
  box-shadow: 0 12px 28px rgba(18, 88, 108, .08);
}

.school-ribbon-viewport {
  overflow: hidden;
  width: 100%;
}

.school-ribbon-track {
  display: flex;
  width: max-content;
  align-items: center;
  animation: jomaSchoolRibbon 28s linear infinite;
  will-change: transform;
}

.school-ribbon-group {
  display: flex;
  align-items: center;
  flex: none;
  padding: 20px 0;
}

.school-ribbon-school {
  flex: none;
  padding: 0 clamp(28px, 3vw, 54px);
  font-family: "Bebas Neue", Impact, "Arial Narrow", sans-serif;
  font-size: clamp(28px, 2.2vw, 38px);
  line-height: 1;
  letter-spacing: .035em;
  color: #103746;
  white-space: nowrap;
}

.school-ribbon-dot {
  flex: none;
  color: #efc93f;
  font-size: 18px;
  line-height: 1;
}

@keyframes jomaSchoolRibbon {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* Keep the spacing intentional after adding the ribbon. */
.school-ribbon + .lessons {
  margin-top: 22px !important;
}

@media (max-width: 720px) {
  .school-ribbon {
    margin-top: 12px;
    border-radius: 22px;
  }

  .school-ribbon-group {
    padding: 16px 0;
  }

  .school-ribbon-school {
    padding: 0 24px;
    font-size: 27px;
  }

  .school-ribbon-track {
    animation-duration: 24s;
  }
}

@media (prefers-reduced-motion: reduce) {
  .school-ribbon-track {
    animation: none !important;
    transform: none !important;
  }

  .hero-image {
    transition: none !important;
    scale: 1 !important;
  }
}


/* V7.3 — use the same handwritten brand face in the hero.
   Schoolbell only ships as a regular weight, so the larger hero treatment
   gets a subtle synthetic bold via stroke + tight shadow rather than
   introducing a different typeface. */

.hero-copy h1 {
  font-family: "Schoolbell", cursive !important;
  font-size: clamp(64px, 7.2vw, 112px) !important;
  line-height: .94 !important;
  letter-spacing: -.025em !important;
  text-transform: none !important;
  white-space: nowrap !important;
  font-weight: 900 !important;
  color: #fffefa !important;
  -webkit-text-stroke: 1.35px rgba(255, 254, 250, .92) !important;
  paint-order: stroke fill;
  text-shadow:
    .7px 0 0 #fffefa,
    -.7px 0 0 #fffefa,
    0 .7px 0 #fffefa,
    0 -.7px 0 #fffefa,
    0 10px 26px rgba(7, 67, 88, .16) !important;
}

@media (max-width: 1120px) {
  .hero-copy h1 {
    font-size: clamp(58px, 7.1vw, 88px) !important;
  }
}

@media (max-width: 720px) {
  .hero-copy h1 {
    white-space: normal !important;
    max-width: 10.5ch !important;
    margin-inline: auto !important;
    font-size: clamp(52px, 13vw, 72px) !important;
    line-height: .9 !important;
  }
}


/* V7.4 — mobile hero cleanup
   The previous mobile layout was wrapping accidentally and placing the descriptor
   underneath the title. This makes the hierarchy intentional. */

.hero-title-line {
  display: inline;
}

@media (max-width: 720px) {
  .hero {
    min-height: 760px !important;
  }

  .hero-copy {
    top: 156px !important;
    width: calc(100% - 34px) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
  }

  /* Descriptor first, then brand. */
  .hero-kicker {
    order: -1 !important;
    width: auto !important;
    max-width: 330px !important;
    margin: 0 auto 4px !important;
    padding: 7px 12px !important;
    border-radius: 999px;
    background: rgba(20, 105, 137, .22);
    color: #f6d24f !important;
    font-size: 14px !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-align: center !important;
    text-shadow: 0 1px 8px rgba(4, 57, 76, .24) !important;
  }

  .hero-copy h1 {
    order: 0 !important;
    margin: 0 !important;
    max-width: none !important;
    width: 100% !important;
    font-size: clamp(49px, 13vw, 62px) !important;
    line-height: .86 !important;
    letter-spacing: -.035em !important;
    white-space: normal !important;
  }

  .hero-title-mask {
    display: block !important;
    overflow: visible !important;
    padding: .04em .02em .06em !important;
  }

  .hero-title-text {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 0 !important;
  }

  .hero-title-line {
    display: block !important;
    white-space: nowrap !important;
  }

  .hero-title-arts {
    margin-top: .02em;
  }

  /* Give the upper text a little more clean sky while leaving students clear below. */
  .hero::before {
    background:
      linear-gradient(
        180deg,
        rgba(18, 122, 160, .90) 0%,
        rgba(58, 174, 207, .70) 24%,
        rgba(126, 208, 228, .42) 43%,
        rgba(210, 240, 247, .15) 59%,
        rgba(255,255,255,0) 72%
      ) !important;
  }

  .hero-image {
    object-position: center 56% !important;
  }
}

@media (max-width: 420px) {
  .hero-copy {
    top: 148px !important;
    width: calc(100% - 28px) !important;
  }

  .hero-kicker {
    max-width: 300px !important;
    font-size: 13px !important;
  }

  .hero-copy h1 {
    font-size: clamp(46px, 13.5vw, 58px) !important;
  }
}


/* V7.5 — simplify registration intro.
   The numbered 01/02/03 explanation already does the work, so the redundant
   handwritten intro and explanatory paragraph have been removed. */
.register-intro h2 {
  margin-bottom: 10px;
}
.register-proof {
  margin-top: 30px;
}


/* V7.6 — mobile crop for the Makinto + Garth photo.
   On narrow screens, favor the right side of the source image so Garth's
   face stays visible near the middle instead of getting clipped. */
@media (max-width: 720px) {
  .about-photo img {
    object-position: right center !important;
  }
}


/* V7.7 — new hero photograph
   The new source is substantially wider and has useful open sky above the group.
   Center the group deliberately on desktop and mobile rather than inheriting
   previous crop offsets from the old photo. */

.hero-image {
  object-position: 50% 50% !important;
}

/* The title belongs in the open sky, so keep the photo centered rather than
   pushing it downward. The central group remains the crop priority. */
@media (max-width: 980px) {
  .hero-image {
    object-position: 50% 50% !important;
  }
}

@media (max-width: 720px) {
  .hero-image {
    object-position: 50% 48% !important;
  }
}

@media (max-width: 420px) {
  .hero-image {
    object-position: 50% 47% !important;
  }
}


/* V7.8 — mobile About photo caption
   Move the Makinto/Garth text card to the top of the photo and make it
   more compact so it doesn't cover Garth's face. */
@media (max-width: 720px) {
  .about-photo .photo-caption {
    top: 16px !important;
    bottom: auto !important;
    left: 16px !important;
    right: 16px !important;
    padding: 15px 16px !important;
    gap: 12px !important;
    border-radius: 18px !important;
    align-items: start !important;
  }

  .about-photo .photo-caption p {
    font-size: 13.5px !important;
    line-height: 1.42 !important;
    max-width: none !important;
  }

  .about-photo .photo-caption .button {
    min-height: 40px !important;
    padding: 0 16px !important;
    font-size: 11px !important;
  }

  /* Keep Garth as the focal point beneath the now-smaller top caption. */
  .about-photo img {
    object-position: right center !important;
  }
}

@media (max-width: 420px) {
  .about-photo .photo-caption {
    top: 12px !important;
    left: 12px !important;
    right: 12px !important;
    padding: 13px 14px !important;
  }

  .about-photo .photo-caption p {
    font-size: 13px !important;
  }
}