/* ============================================================================
   NARELLAN MUSIC CENTRE — Design Language
   Faithful reproduction of the live Webflow ("Serenade") look, distilled into a
   clean, fast, self-hosted static system. Look LOCKED per Daniel (18 Jun 2026);
   structure/content rebuilt for conversion + AEO.

   Source of truth: tokens extracted from the live site CSS + getComputedStyle.
   Fonts: Epilogue (headings) · Rethink Sans (body) · Gochi Hand (handwritten accent)
   ========================================================================== */

/* ---------- Fonts (self-hosted, variable) ---------------------------------- */
@font-face {
  font-family: "Epilogue";
  src: url("../fonts/Epilogue-Variable.woff2") format("woff2"),
       url("../fonts/Epilogue-Variable.ttf") format("truetype-variations");
  font-weight: 100 900; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Rethink Sans";
  src: url("../fonts/RethinkSans-Variable.woff2") format("woff2"),
       url("../fonts/RethinkSans-Variable.ttf") format("truetype-variations");
  font-weight: 400 800; font-display: swap; font-style: normal;
}
@font-face {
  font-family: "Gochi Hand";
  src: url("../fonts/GochiHand-Regular.woff2") format("woff2"),
       url("../fonts/GochiHand-Regular.ttf") format("truetype");
  font-weight: 400; font-display: swap; font-style: normal;
}

/* ---------- Tokens --------------------------------------------------------- */
:root {
  /* Ink + neutrals */
  --ink:        #101010;   /* soft-black — body text, primary buttons */
  --ink-soft:   #303030;
  --muted:      #626262;   /* gray-700 — secondary text */
  --line:       #eaeaea;   /* gray-200 — borders/hairlines */
  --line-soft:  #f0f0f0;
  --surface:    #ffffff;
  --surface-2:  #f7f7f7;   /* gray-100 — alt section band */

  /* Brand blues (sky → navy) */
  --blue-50:    #f2f9ff;
  --blue-100:   #e8f5ff;
  --blue-200:   #d1ebff;
  --blue:       #4aa3e8;   /* blue-600 — primary brand */
  --blue-deep:  #4393d1;   /* blue-700 — links / hover */
  --navy:       #004c87;   /* blue-900 — depth / footer */

  /* Warm pastel accents (the template's playful side) */
  --peach:      #fff4ee;
  --peach-200:  #ffe3e3;
  --amber:      #ffb951;
  --coral:      #ff5151;
  --cream:      #f0e9e4;
  --mint:       #e8f7ef;

  /* Typography */
  --font-head:  "Epilogue", "Arial", sans-serif;
  --font-body:  "Rethink Sans", "Arial", sans-serif;
  --font-hand:  "Gochi Hand", "Comic Sans MS", cursive;
  --w-head:     560;       /* Epilogue medium-ish, matches live w500 */
  --w-body:     400;
  --w-bold:     650;

  /* Fluid type scale (clamp: mobile → desktop). Desktop anchors match live. */
  --fs-display: clamp(2.6rem, 1.6rem + 4.4vw, 4.5rem);   /* hero h1 → ~72px */
  --fs-h1:      clamp(2.2rem, 1.5rem + 3.1vw, 3.5rem);   /* → 56px */
  --fs-h2:      clamp(1.9rem, 1.4rem + 2.1vw, 2.5rem);   /* → 40px */
  --fs-h3:      clamp(1.5rem, 1.2rem + 1.2vw, 2rem);     /* → 32px */
  --fs-h4:      clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);  /* → 24px */
  --fs-lead:    clamp(1.125rem, 1.05rem + 0.4vw, 1.25rem);/* 18→20px */
  --fs-body:    clamp(1rem, 0.97rem + 0.15vw, 1.125rem); /* 16→18px */
  --fs-sm:      0.9375rem;
  --fs-eyebrow: 0.8125rem;

  /* Spacing scale */
  --space-section: clamp(48px, 5.5vw, 76px); /* matched to live Webflow section rhythm (Daniel 19 Jun: match original, no shrink) */
  --space-3xl: 96px; --space-2xl: 64px; --space-xl: 48px;
  --space-lg: 32px;  --space-md: 24px;  --space-sm: 16px; --space-xs: 8px;

  /* Radii + shadow + container */
  --radius-card: 32px;     /* live card radius */
  --radius-md:   20px;
  --radius-sm:   12px;
  --radius-pill: 999px;
  --shadow-sm:  0 2px 4px rgba(130,130,130,.12);
  --shadow-md:  0 10px 30px rgba(16,32,64,.08);
  --shadow-lg:  0 24px 60px rgba(0,76,135,.14);
  --container:  1360px;
  --container-narrow: 820px;
  --ease:       cubic-bezier(.22,.61,.36,1);
  --ease-out:   cubic-bezier(.16,1,.3,1);
}

/* ---------- Reset / base --------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-tap-highlight-color: rgba(74,163,232,.2); }
body {
  font-family: var(--font-body);
  font-weight: var(--w-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  text-rendering: optimizeLegibility;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; }
button { font: inherit; cursor: pointer; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; border-radius: 4px; }
/* Focus ring needs a contrasting colour on dark/coloured bands (navy-on-navy would be invisible). */
.footer :focus-visible, .band-navy :focus-visible, .skip-link:focus-visible { outline-color: #fff; }
.announce :focus-visible { outline-color: var(--ink); }

/* ---------- Typography ----------------------------------------------------- */
h1, h2, h3, h4, h5 { font-family: var(--font-head); font-weight: var(--w-head); line-height: 1.12; letter-spacing: -0.02em; color: var(--ink); }
h1 { font-size: var(--fs-h1); letter-spacing: -0.03em; line-height: 1.08; }
h2 { font-size: var(--fs-h2); line-height: 1.14; }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }
p  { font-size: var(--fs-body); line-height: 1.6; color: var(--ink-soft); }
.lead { font-size: var(--fs-lead); line-height: 1.55; color: var(--muted); }
.display { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.03em; }
strong { font-weight: var(--w-bold); }
a.link { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; }
a.link:hover { color: var(--blue-deep); }

/* Eyebrow / kicker — small pill label above section titles */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-weight: var(--w-bold);
  font-size: var(--fs-eyebrow); letter-spacing: .12em; text-transform: uppercase;
  color: var(--navy); background: var(--blue-100);
  padding: 7px 14px; border-radius: var(--radius-pill);
}
/* Handwritten accent — a signature motif of the brand */
.hand { font-family: var(--font-hand); font-weight: 400; line-height: 1.1; letter-spacing: 0; }

/* ---------- Layout --------------------------------------------------------- */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: clamp(20px, 4vw, 40px); }
.container.narrow { max-width: var(--container-narrow); }
.section { padding-block: var(--space-section); position: relative; }
.section.tight { padding-block: clamp(56px, 7vw, 96px); }
.band-blue  { background: var(--blue-100); }
.band-soft  { background: var(--surface-2); }
.band-peach { background: var(--peach); }
.band-cream { background: var(--cream); }
.band-navy  { background: var(--navy); color: #fff; }
.band-navy h1, .band-navy h2, .band-navy h3 { color: #fff; }
.band-navy p { color: rgba(255,255,255,.82); }

.grid { display: grid; gap: var(--space-lg); }
.grid > * { min-width: 0; } /* allow items to shrink below content size — prevents mobile overflow */
.grid.cols-4 { grid-template-columns: 1fr; }
@media (min-width: 560px)  { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 700px)  { .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } }
.section-head { max-width: 760px; margin-bottom: var(--space-2xl); }
.section-head .lead { margin-top: var(--space-md); }
.center { text-align: center; margin-inline: auto; }

/* ---------- Buttons -------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  font-family: var(--font-body); font-weight: var(--w-bold); font-size: var(--fs-body);
  padding: 16px 32px; border-radius: var(--radius-pill); border: 1.5px solid transparent;
  transition: transform .25s var(--ease), box-shadow .25s var(--ease), background-color .25s var(--ease), color .25s var(--ease);
  cursor: pointer; line-height: 1; text-align: center;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--ink); color: #fff; border-color: var(--ink); box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: #000; box-shadow: var(--shadow-md); }
.btn-blue { background: #1a72c4; color: #fff; border-color: #1a72c4; box-shadow: 0 8px 20px rgba(20,90,156,.30); }
.btn-blue:hover { background: #145a9c; box-shadow: 0 12px 28px rgba(20,90,156,.45); }
.btn-outline { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-outline:hover { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-ghost-light { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); backdrop-filter: blur(4px); }
.btn-ghost-light:hover { background: #fff; color: var(--ink); }
.btn-lg { padding: 20px 40px; font-size: var(--fs-lead); }
.btn-arrow::after { content: "→"; font-size: 1.1em; transition: transform .25s var(--ease); }
.btn:hover .btn-arrow::after, .btn-arrow:hover::after { transform: translateX(4px); }

/* ---------- Cards ---------------------------------------------------------- */
.card {
  background: var(--surface); border-radius: var(--radius-card); padding: var(--space-lg);
  border: 1px solid var(--line); transition: transform .3s var(--ease), box-shadow .3s var(--ease);
}
.card.pad-lg { padding: 40px; }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card.peach { background: var(--peach); border-color: transparent; }
.card.blue  { background: var(--blue-100); border-color: transparent; }
.card.cream { background: var(--cream); border-color: transparent; }
.card.mint  { background: var(--mint); border-color: transparent; }
.card .icon-badge {
  width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center;
  background: #fff; box-shadow: var(--shadow-sm); margin-bottom: var(--space-md);
}
.card h3, .card h4 { margin-bottom: var(--space-sm); }
.card h3 { font-size: var(--fs-h4); }

/* Image-led class card (rounded photo tile with label overlay) */
.tile { position: relative; border-radius: var(--radius-card); overflow: hidden; aspect-ratio: 4/5; }
.tile img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s var(--ease-out); }
.tile:hover img { transform: scale(1.05); }
.tile .tile-body { position: absolute; inset: auto 0 0 0; padding: 26px; color: #fff;
  background: linear-gradient(to top, rgba(8,16,30,.95) 0%, rgba(8,16,30,.88) 42%, rgba(8,16,30,.32) 82%, transparent 100%); }
.tile .tile-body p { font-size: var(--fs-sm); line-height: 1.45; margin-top: 6px; }
.tile-icon { display: none; } /* original class cards carry no icon (Daniel 19 Jun fidelity fix) */
.tile .tile-tag { position: absolute; top: 16px; left: 16px; background: rgba(255,255,255,.92);
  color: var(--ink); font-size: 13px; font-weight: 650; padding: 6px 12px; border-radius: var(--radius-pill); z-index: 2; }
.tile-link { position: absolute; inset: 0; z-index: 6; border-radius: var(--radius-card); }
/* class cards carry longer copy — give them height to breathe */
.tile.class-card { aspect-ratio: auto; min-height: 480px; }

/* ---------- Hero stat overlay + handwritten note (hero motifs) ------------- */
.hero-stat { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 12px; color: #fff;
  text-shadow: 0 1px 16px rgba(0,0,0,.55), 0 1px 3px rgba(0,0,0,.45); }
.hero-stat-num { font-family: var(--font-head); font-weight: 700; font-size: clamp(2rem, 3.4vw, 2.9rem); line-height: 1; letter-spacing: -.01em; }
.hero-stat-num .plus { font-size: .58em; font-weight: 600; vertical-align: super; margin-left: 1px; }
.hero-stat-lbl { font-family: var(--font-head); font-weight: 500; font-size: clamp(1.05rem, 1.7vw, 1.45rem); line-height: 1.1; }
.note-hand { display: inline-block; background: #fff; border-radius: 18px 18px 18px 4px;
  padding: 16px 22px; box-shadow: var(--shadow-md); transform: rotate(-3deg);
  font-family: var(--font-hand); font-size: 1.35rem; color: var(--ink); line-height: 1.15; max-width: 22ch; }

/* ---------- Announcement bar ---------------------------------------------- */
.announce { background: var(--blue); color: var(--ink); text-align: center; font-size: var(--fs-sm);
  font-weight: 500; padding: 10px 16px; }
.announce a { color: var(--ink); text-decoration: underline; font-weight: 650; }

/* ---------- Navbar --------------------------------------------------------- */
/* Solid near-white nav. A backdrop-filter blur here forced the browser to re-blur
   the whole strip over the scrolling content every frame -> scroll jitter on
   Retina/large displays. The page sits on a white background so the frost was
   visually imperceptible anyway; .97 solid reads identically, with zero per-frame cost. */
.nav { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,.97);
  border-bottom: 1px solid var(--line-soft); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px;
  padding-block: 14px; }
.nav .brand img { height: 46px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a { font-size: var(--fs-body); color: var(--navy); font-weight: 500; transition: color .2s; }
.nav-links a:hover, .nav-links a[aria-current="page"] { color: var(--navy); }
.nav-cta { display: flex; align-items: center; gap: 12px; }
.nav-toggle { display: none; background: none; border: 0; padding: 10px; }
.nav-toggle span { display: block; width: 24px; height: 2px; background: var(--ink); margin: 5px 0; transition: .3s; }
@media (max-width: 900px) {
  .nav-links, .nav-cta .btn-outline { display: none; }
  .nav-toggle { display: block; }
  .nav.open .nav-links { display: flex; position: absolute; inset: 100% 0 auto 0; flex-direction: column;
    align-items: flex-start; gap: 4px; background: #fff; padding: 16px 24px 24px;
    border-bottom: 1px solid var(--line); box-shadow: var(--shadow-md); }
  .nav.open .nav-links > a:not(.btn) { padding: 10px 0; font-size: 1.125rem; }
}

/* ---------- Hero (text block above, full-bleed rounded image below) -------- */
.hero { position: relative; }
.hero-label { max-width: 820px; }
.hero-label h1 { line-height: 1.1; }
.hero-label .lead { margin-top: var(--space-md); max-width: 58ch; color: var(--muted); }
.hero-image { position: relative; border-radius: var(--radius-card); overflow: hidden; margin-top: var(--space-xl); margin-inline: calc(clamp(20px, 4vw, 40px) * -1); aspect-ratio: 1360 / 600; }
.hero-image > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero-image::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(158deg, rgba(18,20,27,.62) 0%, rgba(18,20,27,.30) 30%, rgba(18,20,27,0) 58%); }
.hero-image .hero-stat { position: absolute; top: clamp(20px, 3vw, 34px); left: clamp(22px, 3vw, 36px); right: clamp(22px, 3vw, 36px); z-index: 2; }
.hero-note { position: absolute; right: 28px; bottom: 28px; z-index: 2; display: flex; align-items: flex-end; }
.hero-note .note-avatar { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; box-shadow: var(--shadow-md); border: 3px solid #fff; margin-right: -18px; position: relative; z-index: 3; }
@media (max-width: 700px) { .hero-image { aspect-ratio: 3 / 4; } .hero-note { display: none; } }

/* ---------- FAQ accordion -------------------------------------------------- */
.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { display: flex; justify-content: space-between; align-items: center; gap: 24px;
  padding: 24px 4px; font-family: var(--font-head); font-weight: var(--w-head); font-size: var(--fs-h4);
  cursor: pointer; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-body); font-size: 1.6rem; color: var(--blue-deep);
  transition: transform .3s var(--ease); }
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p { padding: 0 4px 24px; max-width: 70ch; }

/* ---------- Forms ---------------------------------------------------------- */
label { display: block; font-weight: 650; font-size: var(--fs-sm); margin-bottom: 6px; color: var(--ink); }
input[type=text], input[type=email], input[type=tel], input[type=number], select, textarea {
  width: 100%; font: inherit; font-size: var(--fs-body); color: var(--ink);
  padding: 13px 16px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: #fff; transition: border-color .2s, box-shadow .2s;
}
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(0,76,135,.22); }
input::placeholder, textarea::placeholder { color: #6b6b6b; }
select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234393d1' stroke-width='2' fill='none'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
input[type=checkbox] { width: 18px; height: 18px; accent-color: var(--blue); flex-shrink: 0; }

/* ---------- Footer --------------------------------------------------------- */
.footer { background: var(--navy); color: #fff; padding-block: var(--space-3xl) var(--space-xl); }
.footer a { color: rgba(255,255,255,.8); transition: color .2s; }
.footer a:hover { color: #fff; }
.footer .brand img { height: 56px; filter: brightness(0) invert(1); }
.footer h3, .footer h5 { color: #fff; font-family: var(--font-body); font-weight: 650; font-size: var(--fs-sm);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: 16px; }
.footer .cols { display: grid; gap: var(--space-2xl); grid-template-columns: 1fr; }
@media (min-width: 860px) { .footer .cols { grid-template-columns: 1.6fr 1fr 1fr; } }
.footer .legal { border-top: 1px solid rgba(255,255,255,.15); margin-top: var(--space-2xl);
  padding-top: var(--space-lg); display: flex; flex-wrap: wrap; gap: 16px; justify-content: space-between;
  font-size: var(--fs-sm); color: rgba(255,255,255,.82); }

/* ---------- Motif: staff-line / musical divider --------------------------- */
.divider-notes { height: 2px; background: repeating-linear-gradient(90deg, var(--line) 0 28px, transparent 28px 34px); }
.dot-grid { background-image: radial-gradient(var(--blue-200) 1.4px, transparent 1.4px); background-size: 22px 22px; }

/* ---------- Scroll reveal motion ------------------------------------------ */
/* Gated on .js so content is visible by default if JS is disabled or fails to load
   (progressive enhancement — the <head> swaps no-js -> js synchronously). */
.js [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); }
[data-reveal].in { opacity: 1; transform: none; }
[data-reveal-delay="1"] { transition-delay: .08s; }
[data-reveal-delay="2"] { transition-delay: .16s; }
[data-reveal-delay="3"] { transition-delay: .24s; }

/* ---------- Utilities ------------------------------------------------------ */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.mt-sm{margin-top:var(--space-sm)} .mt-md{margin-top:var(--space-md)} .mt-lg{margin-top:var(--space-lg)} .mt-xl{margin-top:var(--space-xl)}
.flex{display:flex} .items-center{align-items:center} .gap-sm{gap:var(--space-sm)} .gap-md{gap:var(--space-md)} .wrap{flex-wrap:wrap}
.maxw{max-width:62ch} .text-blue{color:var(--blue-deep)} .text-muted{color:var(--muted)}

/* ==========================================================================
   POLISH PASS — NMC-BRF-005 (19 Jun 2026)
   Publishing-ready design polish WITHIN the locked Serenade look.
   Adds: Lessons mega-menu/accordion, redesigned footer, sticky mobile CTA,
   trust strip, hero load sequence, and the "last 10%" micro-details.
   No existing tokens overwritten; light theme preserved.
   ========================================================================== */

/* ---------- Micro-detail: branded selection + scrollbar ------------------- */
::selection { background: var(--blue); color: #fff; }
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: var(--blue-50); }
::-webkit-scrollbar-thumb { background: rgba(0,76,135,.26); border-radius: 8px; border: 2px solid var(--blue-50); }
::-webkit-scrollbar-thumb:hover { background: rgba(0,76,135,.45); }
html { scrollbar-width: thin; scrollbar-color: rgba(0,76,135,.32) var(--blue-50); }

/* ---------- Skip link (a11y) ---------------------------------------------- */
.skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: var(--navy);
  color: #fff; font-weight: 650; padding: 12px 18px; border-radius: 0 0 10px 0; }
.skip-link:focus { left: 0; }

/* ---------- Heading polish: balance to kill orphans ----------------------- */
h1, h2, h3 { text-wrap: balance; }
p { text-wrap: pretty; }

/* ---------- Gradient divider (clean break, never a solid hr) -------------- */
.divider-fade { height: 1px; border: 0; background: linear-gradient(90deg, transparent, rgba(0,76,135,.18), transparent); }

/* ---------- Card hover (layered: lift + deepened shadow + border) --------- */
.card { transition: transform .35s var(--ease), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--blue-200); }
a.card:focus-visible { transform: translateY(-4px); box-shadow: var(--shadow-md); }

/* ---------- Button micro-interactions (press + shine sweep) --------------- */
.btn:active { transform: translateY(0) scale(.985); transition-duration: .1s; }
.btn-primary, .btn-blue { position: relative; overflow: hidden; isolation: isolate; }
.btn-primary::after, .btn-blue::after { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.20) 47%, rgba(255,255,255,.20) 53%, transparent 58%);
  transform: translateX(-120%); transition: transform .6s var(--ease); }
.btn-primary:hover::after, .btn-blue:hover::after { transform: translateX(120%); }

/* ---------- Navbar: scrolled elevation + animated link underline ---------- */
.nav.scrolled { background: rgba(255,255,255,.97); box-shadow: 0 2px 18px rgba(16,32,64,.07); }
.nav-links > a:not(.btn), .nav-dd-toggle { position: relative; }
.nav-links > a:not(.btn)::after, .nav-dd-toggle::after { content: ""; position: absolute; left: 0; right: 0;
  bottom: -4px; height: 2px; border-radius: 2px; background: var(--blue); transform: scaleX(0);
  transform-origin: right; transition: transform .3s var(--ease); }
.nav-links > a:not(.btn):hover::after, .nav-links > a[aria-current="page"]::after,
.nav-dd-toggle:hover::after, .nav-dd-toggle.is-active::after,
.nav-dd[data-open="true"] .nav-dd-toggle::after { transform: scaleX(1); transform-origin: left; }

/* ---------- Lessons dropdown (desktop mega-menu) -------------------------- */
.nav-dd { position: relative; display: inline-flex; }
.nav-dd-toggle { display: inline-flex; align-items: center; gap: 7px; background: none; border: 0;
  font-family: var(--font-body); font-size: var(--fs-body); font-weight: 500; color: var(--navy); }
.nav-dd-caret { width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px); transition: transform .3s var(--ease); }
.nav-dd[data-open="true"] .nav-dd-caret { transform: rotate(-135deg) translateY(1px); }
.nav-dd-panel { position: absolute; top: calc(100% + 16px); left: -18px; width: min(660px, 86vw);
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-lg);
  padding: 26px; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility .25s; z-index: 60; }
.nav-dd[data-open="true"] .nav-dd-panel { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dd-panel::before { content: ""; position: absolute; bottom: 100%; left: 0; right: 0; height: 18px; }
.nav-dd-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px 26px; }
.nav-dd-h { font-family: var(--font-body); font-size: var(--fs-eyebrow); text-transform: uppercase;
  letter-spacing: .1em; color: var(--muted); font-weight: 650; margin-bottom: 10px; }
.nav-dd-col a { display: block; padding: 8px; margin-inline: -8px; border-radius: 8px; color: var(--ink);
  font-weight: 500; transition: background-color .2s, color .2s; }
.nav-dd-col a:hover, .nav-dd-col a[aria-current="page"] { background: var(--blue-50); color: var(--navy); }
.nav-dd-foot { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; padding-top: 18px; border-top: 1px solid var(--line); }
.nav-dd-all { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; color: var(--navy);
  background: var(--blue-100); padding: 11px 22px; border-radius: var(--radius-pill); transition: background-color .2s; }
.nav-dd-all:hover, .nav-dd-all[aria-current="page"] { background: var(--blue-200); }
.nav-cta-mobile { display: none; }

/* ---------- Sticky mobile CTA bar ----------------------------------------- */
.sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: none; gap: 10px;
  align-items: center; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
  background: rgba(255,255,255,.98); /* was .96 + backdrop blur(10px) — removed for scroll perf, see .nav */
  border-top: 1px solid var(--line); box-shadow: 0 -8px 28px rgba(16,32,64,.12);
  transform: translateY(115%); visibility: hidden; transition: transform .4s var(--ease), visibility .4s var(--ease); }
.sticky-cta.show { transform: translateY(0); visibility: visible; }
.sticky-cta .btn { flex: 1; padding: 14px 20px; min-height: 50px; }
.sticky-cta .sc-call { flex: 0 0 auto; width: 54px; height: 50px; padding: 0; }
/* Rating stars: brand amber is too light for text contrast; use a readable deep amber + an accessible name. */
.stars { color: #a85f00; font-size: 1.3rem; line-height: 1; letter-spacing: 2px; }
.sticky-cta .sc-call svg { width: 20px; height: 20px; }

/* ---------- Trust strip (real proof markers) ------------------------------ */
.trust-strip { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 30px; padding: 20px 22px; }
.trust-band { background: var(--blue-50); border: 1px solid var(--blue-100); border-radius: var(--radius-md); }
.ts-item { display: inline-flex; align-items: center; gap: 9px; font-size: var(--fs-sm); font-weight: 650; color: var(--ink); }
.ts-item svg { width: 19px; height: 19px; color: var(--blue-deep); flex: 0 0 auto; }

/* ---------- Footer redesign (labelled columns + CTA band + socials) ------- */
.foot-cta { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding-bottom: var(--space-2xl); margin-bottom: var(--space-2xl); border-bottom: 1px solid rgba(255,255,255,.15); }
.foot-cta h2 { color: #fff; font-size: var(--fs-h3); max-width: 22ch; }
.foot-cta p { color: rgba(255,255,255,.8); margin-top: 8px; max-width: 48ch; }
.footer .cols { grid-template-columns: 1fr; }
@media (min-width: 560px) { .footer .cols { grid-template-columns: 1fr 1fr; } }
@media (min-width: 980px) { .footer .cols { grid-template-columns: 1.7fr 1fr 1.1fr 1.1fr 1.2fr; gap: var(--space-xl); } }
.foot-blurb { color: rgba(255,255,255,.8); margin-top: var(--space-md); max-width: 42ch; font-size: var(--fs-sm); }
.foot-trust { color: rgba(255,255,255,.92); margin-top: var(--space-md); font-size: var(--fs-sm); font-weight: 650;
  display: inline-flex; align-items: center; gap: 8px; }
.foot-trust svg { width: 18px; height: 18px; flex: 0 0 auto; color: #9cd0ff; }
.fcol ul { display: grid; gap: 11px; }
.fcol a { position: relative; display: inline-block; padding-block: 9px; }
.fcol a::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1.5px;
  background: #9cd0ff; transform: scaleX(0); transform-origin: right; transition: transform .3s var(--ease); }
.fcol a:hover::after { transform: scaleX(1); transform-origin: left; }
.fsocial { display: flex; gap: 12px; margin-top: var(--space-md); }
.fsocial a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.10); display: grid;
  place-items: center; transition: background-color .2s, transform .2s; }
.fsocial a:hover { background: rgba(255,255,255,.20); transform: translateY(-2px); }
.fsocial svg { width: 18px; height: 18px; }

/* ---------- Hero load sequence (choreographed entrance) ------------------- */
@keyframes nmcFadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }
.hero .eyebrow { animation: nmcFadeUp .5s var(--ease-out) .04s both; }
.hero-label h1 { animation: nmcFadeUp .6s var(--ease-out) .12s both; }
.hero-label .lead { animation: nmcFadeUp .55s var(--ease-out) .24s both; }
.hero-label .flex, .hero-label .hero-actions { animation: nmcFadeUp .5s var(--ease-out) .34s both; }
/* NOTE: the hero IMAGE is the LCP element — never fade it (opacity animation delays LCP). It paints immediately. */

/* ---------- Mobile: dropdown accordion + CTA inside the menu -------------- */
@media (max-width: 900px) {
  /* Menu open: hide the non-sticky announce so the absolute menu always starts at the sticky nav's bottom (~75px), making its height deterministic regardless of scroll position. */
  html.menu-open .announce { display: none; }
  .nav.open .nav-links { gap: 2px; padding-bottom: 20px; max-height: calc(100vh - 76px); max-height: calc(100dvh - 76px - env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; }
  .nav.open .nav-links > a:not(.btn) { width: 100%; border-bottom: 1px solid var(--line-soft); }
  .nav.open .nav-links > a:not(.btn)::after { display: none; }
  .nav-dd { display: block; width: 100%; }
  .nav-dd-toggle { width: 100%; justify-content: space-between; padding: 12px 0; font-size: 1.125rem;
    border-bottom: 1px solid var(--line-soft); }
  .nav-dd-toggle::after { display: none; }
  .nav-dd-panel { position: static; width: auto; opacity: 1; visibility: visible; transform: none;
    box-shadow: none; border: 0; border-radius: 0; padding: 6px 0 12px; display: none; }
  .nav-dd[data-open="true"] .nav-dd-panel { display: block; }
  .nav-dd-panel::before { display: none; }
  .nav-dd-grid { grid-template-columns: 1fr; gap: 14px; }
  .nav.open .nav-links .nav-dd-col a { padding: 9px 10px; margin-inline: 0; font-size: 1.0625rem; }
  .nav-dd-foot { margin-top: 12px; padding-top: 14px; }
  .nav.open .nav-links .nav-cta-mobile { display: inline-flex; width: 100%; justify-content: center;
    padding: 15px 28px; margin-top: 16px; }
  .sticky-cta { display: flex; }
  body { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px) + 8px); }
}
/* Small phones: shrink the header CTA so it never wraps next to the logo + hamburger. */
@media (max-width: 430px) {
  .nav-cta .btn { padding: 11px 16px; min-height: 42px; font-size: var(--fs-sm); }
}

/* ============================================================================
   EXPERIENTIAL POLISH — Daniel feedback 19 Jun (lift 6 -> 10)
   Spring/bounce motion, floating hero motifs, condensing logo, popping badge,
   warm final-CTA band. Playful "Serenade" energy, still light + fast + a11y-safe.
   ========================================================================== */
:root { --ease-spring: cubic-bezier(.34, 1.56, .64, 1); }

/* Bouncier scroll reveals (spring settle) + extended stagger */
.js [data-reveal] { transition: opacity .55s var(--ease-out), transform .75s var(--ease-spring); }
[data-reveal-delay="4"] { transition-delay: .30s; }
[data-reveal-delay="5"] { transition-delay: .38s; }

/* Logo larger by default; condenses back on scroll (sticky-nav shrink) */
.nav-inner { transition: padding-block .3s var(--ease); }
.nav .brand img { height: 60px; transition: height .3s var(--ease); }
.nav.scrolled .nav-inner { padding-block: 9px; }
.nav.scrolled .brand img { height: 46px; }
@media (max-width: 900px) { .nav .brand img, .nav.scrolled .brand img { height: 44px; } }

/* Card + tile hover: springy lift (bouncy, not flat) */
.card { transition: transform .4s var(--ease-spring), box-shadow .35s var(--ease), border-color .35s var(--ease); }
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--blue-200); }
.tile { transition: transform .45s var(--ease-spring), box-shadow .4s var(--ease); }
.tile:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }

/* Hero motifs float gently for life */
@keyframes nmcFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
.hero .hero-note { animation: nmcFloat 5.6s var(--ease) 1.3s infinite; }

/* Warm, joyful final-CTA band — visually distinct from the navy footer */
.band-warm { background: linear-gradient(135deg, #ffd98f 0%, #ff9e8a 100%); color: var(--ink); }
.band-warm h1, .band-warm h2, .band-warm h3 { color: var(--ink); }
.band-warm p { color: var(--ink-soft); }

/* Inline feature icons (why-families) inside the white icon-badge */
.icon-badge svg { width: 28px; height: 28px; color: var(--blue-deep); }

/* ---------- Reduced motion (extended for the polish pass) ----------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .hero .eyebrow, .hero-label h1, .hero-label .lead, .hero-label .flex, .hero-label .hero-actions, .hero-image, .hero .hero-note { animation: none; }
  .sticky-cta { transition: none; }
}