/* =========================================================================
   So Cal Music Lessons — stylesheet
   Palette and forms are derived from the brand illustration set:
   deep navy rings, cream ground, teal palms/waves, sun gold, ember arc.
   ========================================================================= */

/* ---------- 1. Tokens ---------------------------------------------------- */

:root {
  /* Ink & ground */
  --navy-900: #0A2137;
  --navy-800: #0E2E4C;
  --navy-700: #143C61;
  --navy-600: #1D4E77;

  --cream-50:  #FDF8EC;
  --cream-100: #F8F0DC;
  --poster-bg: #FCFAF3;   /* matched to the banner artwork's own ground */
  --sand-200:  #EFE3C7;
  --sand-300:  #E0CFAB;

  --ink-900: #15242F;
  --ink-600: #4A5C69;

  /* Accents */
  --teal-700: #1F6C7F;   /* small text on cream — 5.6:1 */
  --teal-500: #2E8AA0;
  --teal-400: #4BA6BB;   /* on navy — 5.8:1 */

  --sun-500: #F2A03D;    /* CTA fill; navy text on it — 7.7:1 */
  --sun-400: #F8BE62;
  --ember-700: #B2521F;  /* small text on cream — 4.8:1 */
  --ember-600: #D2662E;

  /* Type */
  --display: "Bricolage Grotesque", "Trebuchet MS", system-ui, sans-serif;
  --body: "Figtree", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  /* Space */
  --shell: 1180px;
  --gutter: clamp(20px, 5vw, 48px);
  --section-y: clamp(72px, 9vw, 132px);

  /* Shape */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;

  /* Depth — soft, warm, never grey */
  --lift-1: 0 2px 6px rgba(10, 33, 55, .06), 0 10px 24px rgba(10, 33, 55, .07);
  --lift-2: 0 4px 10px rgba(10, 33, 55, .08), 0 18px 44px rgba(10, 33, 55, .12);

  --ease: cubic-bezier(.22, .61, .36, 1);
}

/* ---------- 2. Reset & base ---------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 88px;
}

body {
  margin: 0;
  background: var(--cream-50);
  color: var(--ink-900);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.06;
  letter-spacing: -0.022em;
  margin: 0;
  text-wrap: balance;
}

p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

a { color: inherit; }

ul, ol { margin: 0; padding: 0; list-style: none; }

button, input, select, textarea { font: inherit; color: inherit; }

:focus-visible {
  outline: 3px solid var(--sun-500);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: 16px;
  top: -80px;
  z-index: 200;
  background: var(--sun-500);
  color: var(--navy-900);
  font-weight: 700;
  padding: 12px 20px;
  border-radius: var(--r-sm);
  transition: top .2s var(--ease);
}
.skip-link:focus { top: 16px; }

/* ---------- 3. Layout primitives ----------------------------------------- */

.shell {
  width: 100%;
  max-width: var(--shell);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.shell-narrow { max-width: 800px; }

.section { padding-block: var(--section-y); position: relative; }

.section-cream { background: var(--cream-50); }
.section-sand  { background: var(--cream-100); }
.section-navy  { background: var(--navy-900); color: var(--cream-50); }
.section-form  { background: var(--navy-800); color: var(--cream-50); }

.section-head { max-width: 720px; margin-bottom: clamp(40px, 5vw, 68px); }

.section-title {
  font-size: clamp(2rem, 4.1vw, 3.25rem);
  font-variation-settings: "wdth" 96;
}

.section-lede {
  margin-top: 1.1em;
  font-size: clamp(1.02rem, 1.5vw, 1.2rem);
  line-height: 1.62;
  color: var(--ink-600);
  max-width: 62ch;
}
.section-navy .section-lede,
.section-form .section-lede { color: rgba(253, 248, 236, .78); }

/* Eyebrow: a small waveform rule + label, the page's recurring signal */
.eyebrow {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal-400);
}
.eyebrow::before {
  content: "";
  flex: none;
  width: 34px;
  height: 12px;
  background: currentColor;
  clip-path: polygon(0 40%, 12% 40%, 12% 0, 24% 0, 24% 100%, 36% 100%, 36% 25%, 48% 25%,
                     48% 70%, 60% 70%, 60% 8%, 72% 8%, 72% 92%, 84% 92%, 84% 45%, 100% 45%,
                     100% 60%, 84% 60%, 84% 55%, 72% 55%, 0 55%);
  opacity: .9;
}
.eyebrow-dark { color: var(--teal-700); }

/* ---------- 4. Buttons ---------------------------------------------------- */

.btn {
  --btn-py: 14px;
  --btn-px: 26px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: var(--btn-py) var(--btn-px);
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--display);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s var(--ease), background-color .18s var(--ease),
              border-color .18s var(--ease), box-shadow .18s var(--ease), color .18s var(--ease);
}

.btn-sun {
  background: var(--sun-500);
  color: var(--navy-900);
  box-shadow: 0 4px 0 0 var(--ember-600);
}
.btn-sun:hover { background: var(--sun-400); transform: translateY(-2px); box-shadow: 0 6px 0 0 var(--ember-600); }
.btn-sun:active { transform: translateY(2px); box-shadow: 0 1px 0 0 var(--ember-600); }

.btn-ghost {
  background: transparent;
  border-color: rgba(253, 248, 236, .34);
  color: var(--cream-50);
}
.btn-ghost:hover { border-color: var(--cream-50); background: rgba(253, 248, 236, .08); }

.btn-lg { --btn-py: 17px; --btn-px: 32px; min-height: 56px; font-size: 1.06rem; }
.btn-sm { --btn-py: 10px; --btn-px: 20px; min-height: 42px; font-size: .93rem; }
.btn-block { width: 100%; }

/* ---------- 5. Header ----------------------------------------------------- */

.site-header {
  position: fixed;
  inset: 0 0 auto;
  z-index: 100;
  transition: background-color .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header.is-stuck,
.site-header.is-solid {
  background: rgba(10, 33, 55, .93);
  backdrop-filter: blur(14px);
  border-bottom-color: rgba(253, 248, 236, .12);
  box-shadow: 0 8px 30px rgba(10, 33, 55, .3);
}

.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 78px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--cream-50);
  flex: none;
}
.brand-mark { width: 38px; height: 38px; color: var(--sun-500); flex: none; }
.brand-mark svg { width: 100%; height: 100%; }

.brand-words { display: flex; flex-direction: column; line-height: 1; }
.brand-so {
  font-family: var(--display);
  font-size: 1.42rem;
  font-weight: 800;
  font-variation-settings: "wdth" 82;
  letter-spacing: -0.03em;
}
.brand-ml {
  font-family: var(--mono);
  font-size: .62rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-top: 4px;
}

.nav { display: flex; align-items: center; gap: 6px; }
.nav a {
  padding: 10px 13px;
  border-radius: var(--r-sm);
  white-space: nowrap;
  font-size: .94rem;
  font-weight: 500;
  color: rgba(253, 248, 236, .84);
  text-decoration: none;
  transition: color .18s var(--ease), background-color .18s var(--ease);
}
.nav a:hover { color: var(--cream-50); background: rgba(253, 248, 236, .09); }
.nav .nav-cta { margin-left: 10px; color: var(--navy-900); }
.nav .nav-cta:hover { color: var(--navy-900); background: var(--sun-400); }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 12px;
  background: none;
  border: 1px solid rgba(253, 248, 236, .3);
  border-radius: var(--r-sm);
  cursor: pointer;
}
.nav-toggle span {
  display: block;
  height: 2px;
  background: var(--cream-50);
  border-radius: 2px;
  transition: transform .25s var(--ease), opacity .2s var(--ease);
}
.nav-toggle span + span { margin-top: 5px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- 5b. The poster --------------------------------------------------
   The banner artwork opens the page. It already carries the wordmark, the
   tagline and the four badges in its own lettering, so nothing is laid over it
   and nothing is cropped — `contain` on the artwork's own cream ground means
   every player in the illustration survives every viewport.
--------------------------------------------------------------------------- */

.poster {
  position: relative;
  display: block;
  /* navy strip the fixed header sits on, so the scene starts clear of the nav
     instead of losing its string lights behind it */
  padding-top: 79px;
  background: var(--navy-900);
  overflow: hidden;
  isolation: isolate;
}

/* Full-bleed. The banner is a scene rather than a bounded poster, so it runs
   edge to edge and crops cinematically rather than sitting on a mat. Height is
   capped so the headline below still breaks the fold line, and the crop is
   biased upward — the sign and the string lights sit high in the frame, the
   paving at the bottom is the part worth losing. */
.poster-art {
  display: block;
  width: 100%;
  height: min(68vh, 720px);
  object-fit: cover;
  object-position: 50% 42%;
  animation: poster-in 1s var(--ease) both;
}

/* Pause control. WCAG 2.2.2 requires a way to stop looping motion, and a 5s
   loop runs indefinitely. Revealed by JS only once the video actually plays. */
.poster-toggle {
  position: absolute;
  right: clamp(14px, 2.4vw, 26px);
  bottom: clamp(58px, 7vw, 86px);
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  padding: 0;
  border: 1px solid rgba(253, 248, 236, .38);
  border-radius: 50%;
  background: rgba(10, 33, 55, .55);
  backdrop-filter: blur(6px);
  color: var(--cream-50);
  cursor: pointer;
  transition: background-color .18s var(--ease), border-color .18s var(--ease), transform .18s var(--ease);
}
.poster-toggle:hover { background: rgba(10, 33, 55, .8); border-color: var(--sun-500); transform: scale(1.06); }
.poster-toggle[hidden] { display: none; }
.poster-toggle svg { width: 19px; height: 19px; fill: currentColor; }

/* pressed = playing, so the button offers the pause action */
.poster-toggle .icon-play { display: none; }
.poster-toggle[aria-pressed="false"] .icon-pause { display: none; }
.poster-toggle[aria-pressed="false"] .icon-play { display: block; margin-left: 2px; }

/* Navy swell rising out of the hero and into the scene above it. */
.poster-crest { position: absolute; inset: auto 0 -1px; pointer-events: none; }
.poster-crest svg {
  width: 100%;
  height: clamp(34px, 4.4vw, 62px);
  fill: var(--navy-900);
}

@keyframes poster-in {
  from { opacity: 0; transform: scale(1.03); }
  to   { opacity: 1; transform: none; }
}

/* Artwork not in place yet: the hero takes back the space the poster held. */
.no-poster .hero { padding-top: clamp(128px, 16vw, 176px); }

/* ---------- 6. Hero ------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy-900);
  background-image:
    radial-gradient(120% 90% at 78% 8%, rgba(242, 160, 61, .30) 0%, rgba(242, 160, 61, 0) 52%),
    radial-gradient(100% 80% at 8% 88%, rgba(46, 138, 160, .34) 0%, rgba(46, 138, 160, 0) 60%);
  color: var(--cream-50);
  padding-top: clamp(38px, 5vw, 58px);
  padding-bottom: clamp(150px, 17vw, 210px);
  overflow: hidden;
  isolation: isolate;
}

.hero-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none; }

.hero-sun {
  position: absolute;
  top: clamp(40px, 8vw, 96px);
  right: clamp(-40px, 4vw, 90px);
  width: clamp(200px, 26vw, 380px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, var(--sun-400) 0%, var(--sun-500) 56%, rgba(242, 160, 61, 0) 69%);
  opacity: .34;
  filter: blur(1px);
}

.hero-palm { position: absolute; bottom: 0; color: rgba(75, 166, 187, .17); }
.hero-palm-l { left: -34px; width: clamp(160px, 20vw, 280px); }
.hero-palm-r { right: 2%; width: clamp(120px, 15vw, 210px); transform: scaleX(-1); opacity: .7; }

.hero-gull {
  position: absolute;
  top: 22%;
  right: 30%;
  width: 92px;
  color: rgba(253, 248, 236, .3);
}

.hero-inner { position: relative; }

.hero-title {
  max-width: 17ch;
  font-size: clamp(2.6rem, 7.1vw, 5.4rem);
  font-weight: 800;
  font-variation-settings: "wdth" 88, "opsz" 96;
  letter-spacing: -0.035em;
  line-height: .98;
}
.hero-title em {
  font-style: normal;
  color: var(--sun-500);
  position: relative;
  white-space: nowrap;
}
/* underline is a single drawn swell — the coastline motif at word scale */
.hero-title em::after {
  content: "";
  position: absolute;
  left: -1%;
  right: -1%;
  bottom: -.13em;
  height: .17em;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 12' preserveAspectRatio='none'%3E%3Cpath d='M0 8C12.5 1 25 1 37.5 8S62.5 15 75 8s12.5-7 25 0' fill='none' stroke='%232E8AA0' stroke-width='4.5' stroke-linecap='round'/%3E%3C/svg%3E") center / 100% 100% no-repeat;
}

.hero-sub {
  margin-top: clamp(22px, 3vw, 30px);
  max-width: 58ch;
  font-size: clamp(1.06rem, 1.8vw, 1.28rem);
  line-height: 1.58;
  color: rgba(253, 248, 236, .8);
}
.hero-sub em { font-style: italic; color: var(--cream-50); }

/* --- Signature: the instrument chooser --- */

.chooser {
  margin-top: clamp(38px, 5vw, 56px);
  padding: clamp(20px, 3vw, 28px);
  border: 1px solid rgba(253, 248, 236, .16);
  border-radius: var(--r-lg);
  background: rgba(10, 33, 55, .42);
  backdrop-filter: blur(8px);
  max-width: 900px;
}

.chooser-label {
  margin: 0 0 16px;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(253, 248, 236, .58);
}

.chooser-row {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: clamp(6px, 1vw, 12px);
}

.chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 12px 4px 13px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color .2s var(--ease), border-color .2s var(--ease), transform .2s var(--ease);
}
.chip:hover { background: rgba(253, 248, 236, .07); transform: translateY(-3px); }
.chip[aria-pressed="true"] {
  background: rgba(242, 160, 61, .15);
  border-color: var(--sun-500);
}

.chip-art {
  display: grid;
  place-items: center;
  width: clamp(46px, 6.4vw, 68px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: var(--cream-50);
  border: 2px solid rgba(253, 248, 236, .25);
  overflow: hidden;
  transition: border-color .2s var(--ease), box-shadow .2s var(--ease);
}
.chip-art img { width: 100%; height: 100%; object-fit: cover; }
.chip[aria-pressed="true"] .chip-art {
  border-color: var(--sun-500);
  box-shadow: 0 0 0 4px rgba(242, 160, 61, .22);
}

/* Icons are inset absolutely: percentage padding would resolve against the
   parent card, and a viewBox-only svg has no intrinsic size to stretch from. */
.chip-art-icon { position: relative; color: var(--navy-700); }
.chip-art-icon svg { position: absolute; inset: 25%; width: auto; height: auto; }

.chip-name {
  font-family: var(--display);
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: rgba(253, 248, 236, .82);
  text-align: center;
}
.chip[aria-pressed="true"] .chip-name { color: var(--sun-400); }

.chooser-line {
  margin: 18px 0 0;
  min-height: 1.6em;
  font-size: 1.02rem;
  color: var(--teal-400);
  transition: opacity .2s var(--ease);
}
.chooser-line.is-swapping { opacity: 0; }

.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin-top: clamp(30px, 4vw, 42px);
}

.trust {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 28px;
  margin-top: clamp(28px, 3.6vw, 40px);
  font-family: var(--mono);
  font-size: .8rem;
  color: rgba(253, 248, 236, .62);
}
.trust li { display: flex; align-items: center; gap: 9px; }
.trust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--sun-500);
  flex: none;
}

/* --- Signature: coastline waveform --- */

.waveform {
  position: absolute;
  inset: auto 0 0;
  pointer-events: none;
  z-index: 1;
}

.waveform-bars {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: clamp(3px, .6vw, 6px);
  height: clamp(48px, 7vw, 84px);
  padding-inline: var(--gutter);
  margin-bottom: -2px;
}
.waveform-bars span {
  flex: 1 1 0;
  max-width: 14px;
  border-radius: 99px 99px 0 0;
  background: linear-gradient(to top, var(--teal-500), var(--teal-400));
  transform-origin: bottom;
  animation: swell 3.6s var(--ease) infinite alternate;
}

@keyframes swell {
  from { transform: scaleY(.42); }
  to   { transform: scaleY(1); }
}

.waveform-shore { width: 100%; height: clamp(40px, 5.4vw, 74px); fill: var(--cream-50); }

/* ---------- 6b. Sub-page hero ----------------------------------------------
   Shares the hero's ground and shore, but drops the animated waveform — that
   stays exclusive to the homepage so it reads as a signature, not a pattern.
--------------------------------------------------------------------------- */

.subhero {
  position: relative;
  background: var(--navy-900);
  background-image:
    radial-gradient(120% 90% at 82% 0%, rgba(242, 160, 61, .26) 0%, rgba(242, 160, 61, 0) 52%),
    radial-gradient(100% 80% at 4% 96%, rgba(46, 138, 160, .28) 0%, rgba(46, 138, 160, 0) 60%);
  color: var(--cream-50);
  padding-top: clamp(120px, 13vw, 158px);
  padding-bottom: clamp(96px, 12vw, 148px);
  overflow: hidden;
  isolation: isolate;
}

.subhero-inner { position: relative; max-width: 860px; }

.crumbs { margin-bottom: 26px; }
.crumbs ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .06em;
  color: rgba(253, 248, 236, .5);
}
.crumbs li { display: flex; align-items: center; gap: 8px; }
.crumbs li + li::before { content: "/"; color: rgba(253, 248, 236, .3); }
.crumbs a { color: var(--teal-400); text-decoration: none; }
.crumbs a:hover { color: var(--sun-500); }
.crumbs [aria-current] { color: rgba(253, 248, 236, .72); }

.subhero-title {
  font-size: clamp(2.2rem, 5.4vw, 4.1rem);
  font-weight: 800;
  font-variation-settings: "wdth" 88, "opsz" 96;
  letter-spacing: -0.035em;
  line-height: 1.02;
  max-width: 20ch;
}

.subhero-lede {
  margin-top: clamp(20px, 2.6vw, 28px);
  max-width: 62ch;
  font-size: clamp(1.02rem, 1.6vw, 1.2rem);
  line-height: 1.62;
  color: rgba(253, 248, 236, .8);
}

.subhero .hero-cta { margin-top: clamp(28px, 3.4vw, 38px); }
.subhero .trust { margin-top: clamp(26px, 3.2vw, 34px); }

.subhero-shore { position: absolute; inset: auto 0 -1px; pointer-events: none; }
.subhero-shore svg { width: 100%; height: clamp(38px, 5vw, 70px); fill: var(--cream-50); }

/* ---------- 6c. Long-form prose --------------------------------------------- */

.prose { display: grid; gap: clamp(34px, 4vw, 52px); }

.prose-block h2 {
  font-size: clamp(1.45rem, 2.6vw, 2rem);
  font-variation-settings: "wdth" 94;
  margin-bottom: .55em;
}
.prose-block p {
  font-size: clamp(1rem, 1.4vw, 1.09rem);
  line-height: 1.72;
  color: var(--ink-600);
  max-width: 68ch;
}

/* Card titles become links on pages that have somewhere to send you. */
.card-link { color: inherit; text-decoration: none; }
.card-link:hover { color: var(--ember-700); }
.card-alt .card-link:hover,
.format .card-link:hover { color: var(--sun-500); }

/* Wide scene on the pages that have one. Bordered like a framed print so it
   reads as artwork rather than a stock photo dropped into the flow. */
.feature-band { padding-top: 0; }

.feature { margin: 0; }
.feature img {
  width: 100%;
  height: auto;
  border-radius: var(--r-lg);
  border: 1px solid var(--sand-200);
  box-shadow: var(--lift-2);
}
.feature figcaption {
  margin-top: 18px;
  font-family: var(--mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: var(--teal-700);
  max-width: 56ch;
}

.areas-note {
  margin-top: clamp(26px, 3vw, 36px);
  font-size: .95rem;
  color: var(--ink-600);
}
.areas-note a { color: var(--teal-700); text-underline-offset: 3px; }
.areas-note-light { color: rgba(253, 248, 236, .68); }
.areas-note-light a { color: var(--teal-400); }

/* ---------- 7. Steps ------------------------------------------------------ */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 3vw, 36px);
  counter-reset: step;
}

.step {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(26px, 3vw, 34px);
  background: var(--cream-100);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
}

.step-num {
  display: grid;
  place-items: center;
  width: 46px; height: 46px;
  margin-bottom: 20px;
  border-radius: 50%;
  background: var(--navy-900);
  color: var(--sun-500);
  font-family: var(--mono);
  font-size: 1.02rem;
  font-weight: 500;
}

.step-title { font-size: 1.3rem; margin-bottom: .6em; }
.step p { color: var(--ink-600); font-size: .98rem; }

.step-meta {
  margin-top: auto;
  padding-top: 1.4em;
  border-top: 1px solid var(--sand-200);
  font-family: var(--mono);
  font-size: .76rem;
  letter-spacing: .04em;
  color: var(--ember-700);
  text-transform: uppercase;
}

/* ---------- 8. Instrument cards ------------------------------------------- */

.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 26px);
}

.card {
  display: flex;
  flex-direction: column;
  padding: clamp(20px, 2.4vw, 28px);
  background: var(--cream-50);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), border-color .25s var(--ease);
}
.card:hover { transform: translateY(-5px); box-shadow: var(--lift-2); border-color: var(--sand-300); }

.card-art {
  width: 100%;
  max-width: 208px;
  aspect-ratio: 1;
  margin-bottom: 20px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--cream-100);
  border: 2px solid var(--sand-200);
}
.card-art img { width: 100%; height: 100%; object-fit: cover; }

.card-title { font-size: 1.24rem; margin-bottom: .55em; }
.card p { color: var(--ink-600); font-size: .95rem; }

.card-meta {
  margin-top: auto;
  padding-top: 1.2em;
  font-family: var(--mono);
  font-size: .72rem;
  letter-spacing: .03em;
  color: var(--teal-700);
}

/* Cards we don't have illustrations for yet carry a line icon in the same circle,
   so the grid stays one system instead of two. */
.card-art-icon { position: relative; color: var(--teal-500); }
.card-art-icon svg { position: absolute; inset: 27%; width: auto; height: auto; }

.card-alt { background: var(--navy-900); border-color: var(--navy-700); color: var(--cream-50); }
.card-alt .card-art { background: rgba(253, 248, 236, .06); border-color: rgba(75, 166, 187, .35); }
.card-alt .card-art-icon { color: var(--sun-500); }
.card-alt p { color: rgba(253, 248, 236, .72); }
.card-alt .card-meta { color: var(--teal-400); }

/* Artwork that hasn't been dropped in yet: a tinted initial, never a broken frame. */
.art-missing {
  display: grid;
  place-items: center;
  background: linear-gradient(150deg, var(--teal-500), var(--navy-700));
}
.art-missing::after {
  content: attr(data-initial);
  font-family: var(--display);
  font-size: 1.6em;
  font-weight: 800;
  color: var(--cream-50);
}

/* ---------- 9. Formats ---------------------------------------------------- */

.formats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 30px);
}

.format {
  padding: clamp(26px, 3vw, 36px);
  background: rgba(253, 248, 236, .05);
  border: 1px solid rgba(253, 248, 236, .14);
  border-radius: var(--r-lg);
  transition: background-color .25s var(--ease), border-color .25s var(--ease), transform .25s var(--ease);
}
.format:hover {
  background: rgba(253, 248, 236, .09);
  border-color: rgba(75, 166, 187, .5);
  transform: translateY(-4px);
}

.format-icon { display: block; width: 44px; height: 44px; margin-bottom: 22px; color: var(--sun-500); }
.format-icon svg { width: 44px; height: 44px; }

.format-title { font-size: 1.42rem; margin-bottom: .55em; }
.format p { color: rgba(253, 248, 236, .76); font-size: .98rem; }

.format-meta {
  margin-top: 1.3em;
  padding-top: 1.1em;
  border-top: 1px solid rgba(253, 248, 236, .14);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: var(--teal-400);
}

/* ---------- 10. Why / split ----------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
  gap: clamp(36px, 6vw, 84px);
  align-items: start;
}
.split-copy { position: sticky; top: 120px; }
.split-copy .btn { margin-top: 28px; }

.values { display: grid; gap: 2px; border-radius: var(--r-lg); overflow: hidden; }
.value {
  padding: clamp(22px, 2.6vw, 30px);
  background: var(--cream-100);
  border-left: 3px solid var(--sand-300);
  transition: border-color .25s var(--ease), background-color .25s var(--ease);
}
.value:hover { border-left-color: var(--sun-500); background: var(--sand-200); }
.value h3 { font-size: 1.14rem; margin-bottom: .5em; }
.value p { color: var(--ink-600); font-size: .96rem; }

/* ---------- 11. Lesson lengths -------------------------------------------- */

.lengths {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
  align-items: stretch;
}

.length {
  position: relative;
  padding: clamp(26px, 3vw, 36px);
  background: var(--cream-50);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
  box-shadow: var(--lift-1);
}

.length-time {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 0 .5em;
  font-family: var(--display);
  font-size: clamp(2.6rem, 4.6vw, 3.6rem);
  font-weight: 800;
  font-variation-settings: "wdth" 80;
  line-height: 1;
  color: var(--navy-900);
  letter-spacing: -0.04em;
}
.length-time span {
  font-family: var(--mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  color: var(--teal-700);
  text-transform: uppercase;
}

.length-title { font-size: 1.16rem; margin-bottom: .55em; }
.length p { color: var(--ink-600); font-size: .95rem; }

.length-featured { background: var(--navy-900); border-color: var(--navy-700); color: var(--cream-50); }
.length-featured .length-time { color: var(--sun-500); }
.length-featured .length-time span { color: var(--teal-400); }
.length-featured p { color: rgba(253, 248, 236, .78); }

.length-tag {
  position: absolute;
  top: -13px;
  left: clamp(26px, 3vw, 36px);
  padding: 5px 13px;
  border-radius: 999px;
  background: var(--sun-500);
  color: var(--navy-900);
  font-family: var(--mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.lengths-note {
  max-width: 62ch;
  margin-top: clamp(28px, 3.4vw, 40px);
  font-size: .98rem;
  color: var(--ink-600);
}

/* ---------- 12. Reviews ---------------------------------------------------- */

.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(18px, 2.4vw, 28px); }

.quote {
  display: flex;
  flex-direction: column;
  gap: 22px;
  margin: 0;
  padding: clamp(26px, 3vw, 34px);
  background: var(--cream-100);
  border: 1px solid var(--sand-200);
  border-radius: var(--r-lg);
}
.quote blockquote {
  margin: 0;
  flex: 1;
  font-family: var(--display);
  font-size: clamp(1.02rem, 1.5vw, 1.16rem);
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -0.012em;
}
.quote blockquote::before { content: "\201C"; color: var(--sun-500); }
.quote blockquote::after  { content: "\201D"; color: var(--sun-500); }

.quote figcaption { display: flex; flex-direction: column; gap: 3px; }
.quote-name { font-weight: 700; font-size: .95rem; }
.quote-city { font-family: var(--mono); font-size: .74rem; color: var(--teal-700); }

/* ---------- 13. Service area ---------------------------------------------- */

.areas { display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 36px); }

.area {
  padding: clamp(24px, 3vw, 32px);
  border-radius: var(--r-lg);
  background: rgba(253, 248, 236, .05);
  border: 1px solid rgba(253, 248, 236, .13);
}
.area h3 {
  font-size: 1.2rem;
  margin-bottom: .7em;
  color: var(--sun-500);
}
.area p {
  color: rgba(253, 248, 236, .78);
  font-size: .96rem;
  line-height: 1.9;
}

/* ---------- 14. FAQ -------------------------------------------------------- */

.faq { border-top: 1px solid var(--sand-300); }

.faq-item { border-bottom: 1px solid var(--sand-300); }

.faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 0;
  cursor: pointer;
  list-style: none;
  font-family: var(--display);
  font-size: clamp(1.04rem, 1.6vw, 1.2rem);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color .18s var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--ember-700); }

.faq-item summary::after {
  content: "";
  flex: none;
  width: 15px;
  height: 15px;
  border-right: 2.5px solid var(--teal-700);
  border-bottom: 2.5px solid var(--teal-700);
  transform: rotate(45deg) translate(-3px, -3px);
  transition: transform .25s var(--ease);
}
.faq-item[open] summary::after { transform: rotate(-135deg) translate(-3px, -3px); }

.faq-body { padding: 0 0 24px; max-width: 68ch; }
.faq-body p { color: var(--ink-600); font-size: .99rem; }

/* ---------- 15. Form ------------------------------------------------------- */

.section-form { position: relative; }

.form-wrap {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(36px, 5vw, 72px);
  align-items: start;
}

.form-intro { position: sticky; top: 118px; }

.form-points { margin-top: 30px; display: grid; gap: 13px; }
.form-points li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: .97rem;
  color: rgba(253, 248, 236, .82);
}
.form-points li::before {
  content: "";
  flex: none;
  width: 19px; height: 19px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--sun-500);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / 100% no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%23000' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round' d='m5 12.5 4.6 4.6L19 7.4'/%3E%3C/svg%3E") center / 100% no-repeat;
}

.form-call {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid rgba(253, 248, 236, .18);
  font-size: .97rem;
  color: rgba(253, 248, 236, .7);
}
.form-call a {
  display: inline-block;
  margin-left: 6px;
  padding: 6px 0;   /* clears the 44px tap target for mobile click-to-call */
  font-family: var(--display);
  font-size: 1.28rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--sun-500);
  text-decoration: none;
  border-bottom: 2px solid transparent;
  transition: border-color .18s var(--ease);
}
.form-call a:hover { border-bottom-color: var(--sun-500); }

.form {
  padding: clamp(26px, 3.4vw, 42px);
  background: var(--cream-50);
  border-radius: var(--r-lg);
  color: var(--ink-900);
  box-shadow: 0 24px 70px rgba(4, 16, 28, .38);
}

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

.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 18px; }

.field { display: flex; flex-direction: column; gap: 7px; margin: 0 0 18px; }

.field label {
  font-size: .86rem;
  font-weight: 600;
  letter-spacing: .01em;
  color: var(--navy-800);
}
.field .req { color: var(--ember-700); }
.field .opt {
  font-family: var(--mono);
  font-size: .7rem;
  font-weight: 400;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-600);
}

.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  background: #fff;
  border: 1.5px solid var(--sand-300);
  border-radius: var(--r-sm);
  font-size: 1rem;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
.field textarea { resize: vertical; min-height: 104px; line-height: 1.55; }

.field input::placeholder,
.field textarea::placeholder { color: #93A0A9; }

.field input:hover,
.field select:hover,
.field textarea:hover { border-color: var(--teal-500); }

.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--teal-700);
  box-shadow: 0 0 0 4px rgba(46, 138, 160, .18);
}

.field select {
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='none' stroke='%231F6C7F' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round' d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 18px;
  cursor: pointer;
}

.err { font-size: .82rem; font-weight: 600; color: #B3261E; min-height: 0; }
.err:empty { display: none; }

.field.is-invalid input,
.field.is-invalid select { border-color: #B3261E; }
.field.is-invalid input:focus,
.field.is-invalid select:focus { box-shadow: 0 0 0 4px rgba(179, 38, 30, .16); }

.form .btn { margin-top: 8px; }
#submitBtn[aria-busy="true"] { opacity: .72; pointer-events: none; }

.form-status {
  margin: 16px 0 0;
  padding: 0;
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
}
.form-status.is-ok    { color: #16653C; }
.form-status.is-error { color: #B3261E; }

.form-legal {
  margin: 18px 0 0;
  font-size: .82rem;
  line-height: 1.55;
  color: var(--ink-600);
  text-align: center;
}

/* ---------- 16. Footer ----------------------------------------------------- */

.site-footer {
  background: var(--navy-900);
  color: rgba(253, 248, 236, .74);
  padding-top: clamp(56px, 7vw, 84px);
  border-top: 1px solid rgba(253, 248, 236, .1);
}

.footer-inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2.1fr);
  gap: clamp(36px, 5vw, 72px);
  padding-bottom: clamp(44px, 5vw, 64px);
}

.brand-footer { margin-bottom: 20px; }

.footer-tag {
  font-family: var(--display);
  font-size: 1.16rem;
  font-weight: 600;
  color: var(--sun-500);
  letter-spacing: -0.015em;
  margin-bottom: .6em;
}
.footer-alt {
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 1.4em;
}
.footer-note { font-size: .93rem; max-width: 42ch; }

.footer-cols { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.footer-col h3 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 16px;
}
.footer-col ul { display: grid; gap: 10px; }
.footer-col a {
  font-size: .94rem;
  text-decoration: none;
  color: rgba(253, 248, 236, .74);
  transition: color .18s var(--ease);
}
.footer-col a:hover { color: var(--sun-500); }

.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px 24px;
  padding-block: 22px;
  border-top: 1px solid rgba(253, 248, 236, .1);
  font-family: var(--mono);
  font-size: .74rem;
  letter-spacing: .04em;
  color: rgba(253, 248, 236, .5);
}
.footer-base p { margin: 0; }

/* ---------- 16b. Thank-you page ---------------------------------------------- */

.page-thanks { background: var(--navy-900); color: var(--cream-50); }

.thanks {
  display: grid;
  place-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-block: 140px 72px;
  background-image:
    radial-gradient(110% 80% at 80% 4%, rgba(242, 160, 61, .26) 0%, rgba(242, 160, 61, 0) 55%),
    radial-gradient(100% 80% at 4% 96%, rgba(46, 138, 160, .3) 0%, rgba(46, 138, 160, 0) 60%);
}

.thanks-inner { text-align: left; }

.brand-thanks { margin-bottom: 48px; }

.thanks-title {
  font-size: clamp(2.4rem, 6vw, 4rem);
  font-variation-settings: "wdth" 88;
  letter-spacing: -0.035em;
  margin-bottom: .5em;
}

.thanks .section-lede { color: rgba(253, 248, 236, .82); }
.thanks .section-lede strong { color: var(--sun-500); font-weight: 600; }

.thanks-note {
  margin-top: 1.6em;
  font-size: .95rem;
  color: rgba(253, 248, 236, .62);
}
.thanks-note a { color: var(--teal-400); }

.thanks .btn { margin-top: 36px; }

.notfound-links {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(22px, 3vw, 40px);
  margin-top: 44px;
  padding-top: 34px;
  border-top: 1px solid rgba(253, 248, 236, .16);
}
.notfound-links h2 {
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--teal-400);
  margin-bottom: 14px;
}
.notfound-links ul { display: grid; gap: 9px; }
.notfound-links a {
  font-size: .94rem;
  color: rgba(253, 248, 236, .78);
  text-decoration: none;
}
.notfound-links a:hover { color: var(--sun-500); }

/* ---------- 17. Motion ------------------------------------------------------ */

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

/* hero load choreography — one orchestrated sequence, not scattered effects */
.hero [data-reveal] { animation: rise .8s var(--ease) both; }
.hero [data-reveal="1"] { animation-delay: .05s; }
.hero [data-reveal="2"] { animation-delay: .13s; }
.hero [data-reveal="3"] { animation-delay: .24s; }
.hero [data-reveal="4"] { animation-delay: .34s; }
.hero [data-reveal="5"] { animation-delay: .44s; }
.hero [data-reveal="6"] { animation-delay: .52s; }

@keyframes rise {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* ---------- 18. Responsive -------------------------------------------------- */

@media (max-width: 1040px) {
  .cards  { grid-template-columns: repeat(2, 1fr); }
  .split  { grid-template-columns: 1fr; }
  .split-copy { position: static; }
  .form-wrap { grid-template-columns: 1fr; }
  .form-intro { position: static; }
}

@media (max-width: 880px) {
  html { scroll-padding-top: 78px; }

  .nav-toggle { display: block; }

  .nav {
    position: fixed;
    inset: 79px 0 auto;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    max-height: calc(100vh - 79px);
    max-height: calc(100svh - 79px);
    overflow-y: auto;
    padding: 18px var(--gutter) 28px;
    background: var(--navy-900);
    border-bottom: 1px solid rgba(253, 248, 236, .14);
    box-shadow: 0 20px 40px rgba(4, 16, 28, .45);
    transform: translateY(-12px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .22s var(--ease), transform .22s var(--ease), visibility .22s;
  }
  .nav.is-open { opacity: 1; transform: none; visibility: visible; }
  .nav a { padding: 14px 12px; font-size: 1.02rem; }
  .nav .nav-cta { margin: 10px 0 0; justify-content: center; }

  .chooser-row { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .steps, .formats, .lengths, .quotes { grid-template-columns: 1fr; }
  .areas { grid-template-columns: 1fr; }
  .length-featured { order: -1; }

  .footer-inner { grid-template-columns: 1fr; }
  .footer-cols { grid-template-columns: repeat(2, 1fr); }
  .subhero .hero-cta { flex-direction: column; align-items: stretch; }
  .subhero .hero-cta .btn { width: 100%; }
}

@media (max-width: 620px) {
  body { font-size: 16px; }

  /* On a phone the frame is far narrower than 16:9, so cropping to a height
     cap would blow the scene up and lose most of it. Show it whole instead. */
  .poster-art { height: auto; aspect-ratio: 16 / 9; }

  .hero { padding-bottom: clamp(120px, 26vw, 170px); }
  .hero-title { max-width: none; }
  .hero-gull { display: none; }

  .chooser { padding: 16px 14px 18px; }
  .chooser-row { gap: 4px; }
  .chip { padding: 10px 2px; }
  .chip-name { font-size: .7rem; }

  .cards { grid-template-columns: 1fr; }
  .field-row { grid-template-columns: 1fr; }
  .notfound-links { grid-template-columns: 1fr; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn { width: 100%; }

  .trust { gap: 8px 20px; font-size: .74rem; }
  .footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ---------- 19. Reduced motion & print -------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }

  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }

  .reveal { opacity: 1; transform: none; }
  .waveform-bars span { transform: scaleY(.7); }
}

@media print {
  .site-header, .waveform, .hero-sky, .nav-toggle { display: none; }
  body { background: #fff; color: #000; }
  .section { padding-block: 24px; }
}