/* ===========================================================================
   Harmonic Melodies — public website (landing). Brand tokens from theme.css.
   Elegant + musical + modern + welcoming. No external fonts (works offline).
   =========================================================================== */
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 80px; }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background: var(--white);
  line-height: 1.65;
  font-size: 16.5px;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Big display headings use the elegant serif; smaller ones use the clean sans
   (heavier weight) for a crisp, modern hierarchy. */
h1, h2 { font-family: var(--font-display); font-weight: 700; line-height: 1.12; letter-spacing: -.015em; color: var(--black); }
h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.25; color: var(--black); }
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
.muted { color: var(--muted); }
.accent { color: var(--red); }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--red); color: #fff; border: 2px solid var(--red);
  padding: 13px 26px; border-radius: 999px; font-weight: 700; font-size: 15px;
  cursor: pointer; transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
  box-shadow: 0 6px 18px rgba(157,28,32,.22);
}
.btn:hover { background: var(--red-dark); border-color: var(--red-dark); transform: translateY(-2px); }
.btn-lg { padding: 16px 32px; font-size: 16px; }
.btn-sm { padding: 9px 18px; font-size: 14px; box-shadow: none; }
.btn-ghost { background: transparent; color: var(--black); border-color: rgba(0,0,0,.18); box-shadow: none; }
.btn-ghost:hover { background: var(--black); color: #fff; border-color: var(--black); }

/* ---- Navbar ---- */
.nav {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 22px;
  padding: 12px 6vw; background: rgba(255,255,255,.86);
  backdrop-filter: blur(10px); border-bottom: 1px solid var(--line);
}
.nav-logo img { height: 40px; }
.nav-links { margin-left: auto; display: flex; align-items: center; gap: 24px; }
.nav-links a { font-weight: 600; font-size: 15px; color: var(--charcoal); }
.nav-links a:not(.btn):hover { color: var(--red); }
.nav-staff { color: var(--muted) !important; font-size: 14px !important; }
.nav-toggle { display: none; margin-left: auto; background: none; border: none; font-size: 26px; cursor: pointer; color: var(--black); }

/* ---- Hero ---- */
.hero {
  position: relative; overflow: hidden;
  background:
    radial-gradient(1200px 500px at 80% -10%, rgba(157,28,32,.10), transparent 60%),
    linear-gradient(180deg, #fff 0%, var(--blush) 100%);
  padding: clamp(56px, 11vw, 120px) 6vw clamp(70px, 12vw, 130px);
}
.hero-inner { max-width: 880px; margin: 0 auto; text-align: center; position: relative; z-index: 2; }
.eyebrow { text-transform: uppercase; letter-spacing: .22em; font-size: 13px; font-weight: 700; color: var(--red); margin-bottom: 18px; }
.hero h1 { font-size: clamp(40px, 7vw, 76px); font-weight: 700; letter-spacing: -.025em; }
.hero .lead { font-size: clamp(16px, 2.2vw, 20px); color: #3a3636; max-width: 640px; margin: 22px auto 32px; }
.hero-cta { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.hero-trust { margin-top: 38px; display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; color: var(--charcoal); font-weight: 600; font-size: 14px; opacity: .85; }

/* floating notes */
.hero-notes { position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.hero-notes::before, .hero-notes::after {
  content: "\266A"; position: absolute; color: rgba(157,28,32,.16);
  font-size: 90px; animation: float 9s ease-in-out infinite;
}
.hero-notes::before { left: 8%; top: 30%; }
.hero-notes::after { content: "\266B"; right: 9%; top: 22%; font-size: 120px; animation-delay: 2s; animation-duration: 11s; }
@keyframes float { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-26px) rotate(4deg); } }

/* ---- Sections ---- */
.section { padding: clamp(56px, 9vw, 100px) 6vw; max-width: 1180px; margin: 0 auto; }
.section-soft { background: var(--blush); max-width: none; }
.section-soft > * { max-width: 1180px; margin-left: auto; margin-right: auto; }
.section-head { text-align: center; margin-bottom: 48px; }
.kicker { text-transform: uppercase; letter-spacing: .2em; font-size: 12px; font-weight: 700; color: var(--red); margin-bottom: 12px; }
.section-head h2 { font-size: clamp(28px, 4.5vw, 44px); }
.section-sub { color: var(--muted); max-width: 560px; margin: 14px auto 0; }

/* ---- Wave divider ---- */
.wave { height: 26px; background:
  radial-gradient(circle at 10px -4px, transparent 10px, var(--red) 11px, transparent 12px) repeat-x;
  background-size: 22px 22px; opacity: .5; }

/* ---- Grids / cards ---- */
.grid { display: grid; gap: 22px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
.card {
  background: var(--card); border: 1px solid var(--line); border-radius: 18px;
  padding: 26px; box-shadow: var(--shadow); transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.why-card { text-align: center; }
.why-ico { width: 92px; height: 92px; object-fit: contain; display: block; margin: 0 auto 10px; }
.card .ico { font-size: 30px; display: inline-flex; width: 56px; height: 56px; align-items: center; justify-content: center; background: var(--blush); border-radius: 14px; margin-bottom: 14px; }
.card h3 { font-size: 19px; margin-bottom: 7px; }
.card p { color: var(--muted); font-size: 14.5px; }
.program-card .more { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 700; font-size: 14px; }

/* ---- Class cards (photo + description) ---- */
/* auto-fit keeps every row full whatever the number of classes, so the grid
   never strands a single stretched card on the last row. */
.grid-auto { grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); }
.class-card {
  padding: 0; overflow: hidden; display: flex; flex-direction: column; text-align: left;
}
/* The class art is a flat illustration on white, so the frame stays white and
   the tinted divider does the separating. */
.class-photo {
  aspect-ratio: 4 / 3; background: #fff;
  border-bottom: 1px solid var(--line); overflow: hidden;
}
.class-photo img {
  width: 100%; height: 100%; object-fit: contain; display: block;
  transition: transform .35s ease;
}
.class-card:hover .class-photo img { transform: scale(1.045); }
.class-body { padding: 20px 22px 22px; display: flex; flex-direction: column; flex: 1; }
.class-body h3 { font-size: 18px; margin-bottom: 7px; }
.class-body p { color: var(--muted); font-size: 14px; line-height: 1.55; }
.class-body .more {
  display: inline-block; margin-top: auto; padding-top: 14px;
  color: var(--red); font-weight: 700; font-size: 14px;
}
.class-body .more:hover { color: var(--red-dark); }

/* ---- Student journey ---- */
.journey { list-style: none; counter-reset: step; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; }
.journey li { position: relative; text-align: center; padding-top: 64px; }
.journey li::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 48px; height: 48px; border-radius: 50%; background: var(--red); color: #fff;
  font-weight: 800; font-size: 20px; display: flex; align-items: center; justify-content: center;
  font-family: var(--font-display); box-shadow: 0 6px 16px rgba(157,28,32,.3);
}
.journey li h3 { font-size: 17px; margin-bottom: 4px; }
.journey li p { font-size: 13.5px; color: var(--muted); }

/* ---- Quiz ---- */
.quiz-card { max-width: 680px; margin: 0 auto; background: var(--card); border: 1px solid var(--line);
  border-radius: 22px; padding: clamp(24px, 4vw, 40px); box-shadow: var(--shadow-lg); text-align: center; }
.quiz-q { font-family: var(--font-display); font-weight: 600; font-size: 24px; color: var(--black); margin-bottom: 22px; }
.quiz-options { display: grid; gap: 12px; }
.quiz-opt { padding: 15px 18px; border: 2px solid var(--line); border-radius: 12px; background: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer; transition: all .15s ease; }
.quiz-opt:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.quiz-progress { font-size: 13px; color: var(--muted); margin-bottom: 16px; letter-spacing: .1em; text-transform: uppercase; }
.quiz-result .res-ico { font-size: 60px; }
.quiz-result .res-photo { width: 150px; height: 150px; object-fit: contain;
  display: block; margin: 0 auto 4px; }
.quiz-result h3 { font-size: 28px; margin: 10px 0 6px; }
.quiz-result .res-name { color: var(--red); }
.quiz-restart { margin-top: 18px; background: none; border: none; color: var(--muted); text-decoration: underline; cursor: pointer; font-size: 14px; }

/* ---- Testimonials ---- */
.quote { background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 28px; box-shadow: var(--shadow); }
.quote .stars { color: var(--red); letter-spacing: 3px; margin-bottom: 10px; }
.quote p { font-family: var(--font-display); font-style: italic; font-size: 18.5px; line-height: 1.5; color: #2c2828; }
.quote .who { margin-top: 14px; font-weight: 700; font-style: normal; color: var(--black); font-size: 14px; }

/* ---- CTA ---- */
.cta { background: linear-gradient(135deg, var(--charcoal), var(--black)); color: #fff; padding: clamp(56px, 9vw, 100px) 6vw; text-align: center; }
.cta-inner { max-width: 680px; margin: 0 auto; }
.cta h2 { color: #fff; font-size: clamp(28px, 4.5vw, 44px); }
.cta p { color: rgba(255,255,255,.8); margin: 16px auto 30px; max-width: 520px; }
.cta .btn-ghost { color: #fff; border-color: rgba(255,255,255,.4); }
.cta .btn-ghost:hover { background: #fff; color: var(--black); border-color: #fff; }

/* ---- Footer ---- */
.footer { background: #0d0c0c; color: #cfc9c9; padding: 56px 6vw 26px; }
.footer-inner { max-width: 1180px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 32px; }
.footer-logo { height: 40px; margin-bottom: 12px; background: #fff; padding: 6px 10px; border-radius: 8px; }
.footer h4 { color: #fff; font-size: 15px; margin-bottom: 12px; }
.footer a { display: block; color: #cfc9c9; font-size: 14px; padding: 3px 0; }
.footer a:hover { color: #fff; }
.footer .muted { color: #8a8484; }
/* Instagram link: the inline mark takes the colour of whatever it sits in. */
.ig-mark { flex: none; }
.footer .ig-link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; }
.footer .ig-link:hover .ig-mark { color: #fff; }
.copyright { text-align: center; color: #6f6a6a; font-size: 13px; margin-top: 40px; border-top: 1px solid #221f1f; padding-top: 22px; }

/* ---- Sticky WhatsApp ---- */
.wa-float {
  position: fixed; right: 20px; bottom: 20px; z-index: 60;
  background: #25d366; color: #073; font-weight: 800; font-size: 15px;
  padding: 13px 20px; border-radius: 999px; box-shadow: 0 10px 28px rgba(0,0,0,.25);
  display: flex; align-items: center; gap: 8px; transition: transform .15s ease;
}
.wa-float:hover { transform: scale(1.05); }

/* ===========================================================================
   Programs page
   =========================================================================== */
.page-hero {
  position: relative; overflow: hidden; text-align: center;
  background: radial-gradient(900px 400px at 50% -20%, rgba(157,28,32,.10), transparent 60%),
    linear-gradient(180deg, #fff, var(--blush));
  padding: clamp(48px, 9vw, 96px) 6vw clamp(40px, 7vw, 72px);
}
.page-hero-inner { max-width: 760px; margin: 0 auto; position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(36px, 6vw, 62px); }
.page-hero .lead { color: #3a3636; font-size: clamp(16px, 2vw, 19px); margin: 18px auto 26px; max-width: 600px; }

/* Filter chips */
.filters { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; margin-bottom: 40px; }
.chip {
  border: 1.5px solid var(--line); background: #fff; color: var(--charcoal);
  padding: 9px 18px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: all .15s ease;
}
.chip:hover { border-color: var(--red); color: var(--red); }
.chip.on { background: var(--red); border-color: var(--red); color: #fff; box-shadow: 0 6px 16px rgba(157,28,32,.22); }

/* Program detail cards */
.program-detail { display: flex; flex-direction: column; }
.program-detail.class-card { padding: 0; }
.program-detail .prog-meta { margin-top: 14px; }
.prog-actions { margin-top: auto; }
.prog-modal-photo {
  width: 140px; height: 140px; object-fit: contain;
  display: block; margin: 0 auto 6px;
}
.prog-tag { color: var(--red); font-weight: 700; font-size: 13.5px; margin-bottom: 8px; }
.prog-meta { display: flex; gap: 14px; flex-wrap: wrap; margin: 14px 0 16px; color: var(--muted); font-size: 13px; }
.prog-meta span { background: var(--blush); padding: 3px 10px; border-radius: 999px; }
.prog-actions { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.link-btn { background: none; border: none; color: var(--red); font-weight: 700; font-size: 14px; cursor: pointer; padding: 0; }
.link-btn:hover { text-decoration: underline; }

/* Program detail modal */
.prog-backdrop {
  position: fixed; inset: 0; z-index: 80; background: rgba(15,8,8,.55);
  display: flex; align-items: flex-start; justify-content: center; padding: 6vh 16px; overflow-y: auto;
  backdrop-filter: blur(3px);
}
.prog-dialog {
  position: relative; background: #fff; border-radius: 22px; width: 540px; max-width: 100%;
  padding: clamp(26px, 4vw, 40px); box-shadow: var(--shadow-lg); text-align: center;
}
.prog-close { position: absolute; top: 14px; right: 18px; background: none; border: none; font-size: 30px; line-height: 1; color: var(--muted); cursor: pointer; }
.prog-close:hover { color: var(--black); }
.ico-lg { width: 76px; height: 76px; font-size: 42px; margin: 0 auto 6px; }
.prog-dialog h2 { font-size: 30px; }
.prog-desc { color: #3a3636; margin: 8px 0 20px; }
.prog-dialog h4 { text-align: left; font-family: -apple-system,"Segoe UI",sans-serif; font-size: 13px; text-transform: uppercase; letter-spacing: .12em; color: var(--muted); margin-bottom: 8px; }
.prog-learn { text-align: left; list-style: none; margin-bottom: 18px; }
.prog-learn li { padding: 7px 0 7px 28px; position: relative; border-bottom: 1px solid var(--line); }
.prog-learn li::before { content: "♪"; position: absolute; left: 4px; color: var(--red); font-weight: 700; }
.prog-meta-row { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 20px; }
.prog-meta-row span { background: var(--blush); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }

/* Levels */
.levels { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 16px; }
.level { display: flex; gap: 18px; align-items: flex-start; background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 22px 24px; box-shadow: var(--shadow); }
.level-badge { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--blush); color: var(--red); font-weight: 800; font-family: Georgia, serif; font-size: 20px; display: flex; align-items: center; justify-content: center; }
.level h3 { font-size: 18px; margin-bottom: 3px; }
.level p { color: var(--muted); font-size: 14.5px; }

/* FAQ accordion */
.faq { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.faq-q { width: 100%; text-align: left; background: none; border: none; cursor: pointer;
  padding: 18px 22px; font-size: 16px; font-weight: 700; color: var(--black);
  display: flex; justify-content: space-between; align-items: center; gap: 16px; font-family: inherit; }
.faq-mark { color: var(--red); font-size: 24px; font-weight: 400; transition: transform .2s ease; flex: none; }
.faq-item.open .faq-mark { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.faq-item.open .faq-a { max-height: 240px; }
.faq-a p { padding: 0 22px 18px; color: var(--muted); }

/* ---- Scroll reveal ---- */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.reveal.in { opacity: 1; transform: none; }

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-auto { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: 1fr 1fr; }
  .journey { grid-template-columns: 1fr 1fr; }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 620px) {
  .nav-toggle { display: block; }
  .nav-links {
    position: absolute; top: 100%; left: 0; right: 0; flex-direction: column;
    align-items: stretch; gap: 0; background: #fff; border-bottom: 1px solid var(--line);
    padding: 10px 6vw 18px; display: none;
  }
  .nav-links.open { display: flex; }
  .nav-links a { padding: 12px 0; }
  .nav-links .btn { margin-top: 8px; }
  .grid-3, .grid-4, .grid-auto, .journey, .footer-inner { grid-template-columns: 1fr; }
  .hero-trust { gap: 14px; }
}

/* --- Keyboard focus --------------------------------------------------------
   Same reasoning as the portal: :focus-visible only paints during keyboard
   navigation, so mouse users see the site exactly as before. On the dark hero
   and footer the ring is drawn in white so it stays visible. */
:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

.hero :focus-visible,
.footer :focus-visible,
.cta :focus-visible,
.navbar :focus-visible {
  outline-color: #fff;
}

/* The floating WhatsApp button sits on its own green; white reads best on it. */
.wa-float:focus-visible { outline-color: #fff; outline-offset: 4px; }

/* Let people who prefer less motion skip the scroll-reveal animation. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1 !important; transform: none !important; }
}

/* Skip link: lets a keyboard user jump past the navigation instead of tabbing
   through every menu item on every page. Off-screen until focused, so it is
   invisible to everyone else and changes nothing about the design. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 400;
  padding: 10px 16px;
  background: var(--brand);
  color: #fff;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 6px 0;
}
.skip-link:focus {
  left: 0;
}
/* The jump target itself must not draw a ring - focus lands there only to move
   the reading position, and a box around the whole page would look like a bug. */
#app:focus, .hero:focus, .page-hero:focus { outline: none; }

/* A program whose photo hasn't been supplied yet: hide the broken-image icon
   and leave the tinted panel, so the card still reads as finished. */
.img-missing { visibility: hidden; }