/* ============================================
   Dr. Anton Yertesky Method / Nova Youth Chamber Orchestra
   Global stylesheet
   ============================================ */

:root {
  --color-dark: #271b1e;
  --color-text: #3d2e30;
  --color-text-light: #7d6b6c;
  --color-accent: #8c3b47;
  --color-accent-light: #c67d89;
  --color-border: #e6dcd9;
  --color-bg-light: #f6f0ec;
  --color-white: #fffbfa;

  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --max-width: 1180px;
  --transition: 0.3s ease;
}

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  color: var(--color-text);
  line-height: 1.65;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

img {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

.container {
  width: 100%;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 24px;
}

.section-label {
  display: inline-block;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.4vw, 2.7rem);
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 18px;
  letter-spacing: -0.01em;
}

.section-intro {
  color: var(--color-text-light);
  font-size: 1.05rem;
  max-width: 640px;
}

.center {
  text-align: center;
  margin-left: auto;
  margin-right: auto;
}

.btn {
  display: inline-block;
  padding: 15px 34px;
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-radius: 2px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn-primary:hover {
  background: #6f2c35;
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.6);
  color: var(--color-white);
}
.btn-outline:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: var(--color-white);
}

.btn-dark {
  background: var(--color-dark);
  color: var(--color-white);
}
.btn-dark:hover {
  background: #1a1214;
}

.text-link {
  display: inline-block;
  margin-top: 28px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-accent);
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.text-link:hover {
  border-bottom-color: var(--color-accent);
}

/* ---------- Header ---------- */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000;
  background: rgba(39, 27, 30, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  transition: background var(--transition);
}

.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 78px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--color-white);
}

.header-logo-mark {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}

.brand-mark {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.brand-mark strong {
  color: var(--color-accent-light);
  font-weight: 600;
}

.brand-sub {
  display: block;
  font-size: 0.62rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 2px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 34px;
}

.nav-links a {
  color: rgba(255, 255, 255, 0.85);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  position: relative;
  padding: 6px 0;
  transition: color var(--transition);
}

.nav-links a:hover,
.nav-links a.active {
  color: var(--color-accent-light);
}

.nav-links a.nav-cta {
  border: 1px solid var(--color-accent);
  padding: 9px 20px;
  border-radius: 2px;
  color: var(--color-white);
}
.nav-links a.nav-cta:hover {
  background: var(--color-accent);
}

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  width: 24px;
  height: 2px;
  background: var(--color-white);
  transition: all var(--transition);
}

/* ---------- Hero ---------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  padding: 78px 0 56px;
  color: var(--color-white);
  background-size: cover;
  background-position: center 20%;
  isolation: isolate;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(39, 27, 30, 0.86) 0%, rgba(46, 32, 35, 0.58) 48%, rgba(46, 32, 35, 0.3) 100%);
  z-index: -1;
}

/* Split hero: full-width photo band on top, content on a light band below —
   deliberately not a side-by-side dark panel, to stay clear of GLP's hero pattern */
.hero-split {
  display: block;
  min-height: 0;
  padding: 0;
  background: var(--color-white);
}

.hero-split::before {
  content: none;
}

.hero-media {
  position: relative;
  width: 100%;
  height: 64vh;
  min-height: 460px;
  max-height: 720px;
  overflow: hidden;
}

.hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 18%;
  display: block;
}

.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(39, 27, 30, 0.02) 0%, rgba(39, 27, 30, 0.05) 70%, var(--color-white) 100%);
}

.hero-split .container {
  max-width: var(--max-width);
  padding: 56px 24px 90px;
}

.hero-split .hero-content {
  max-width: 720px;
  color: var(--color-text);
}

.hero-split .hero-eyebrow {
  color: var(--color-accent);
}

.hero-split h1 {
  color: var(--color-dark);
}

.hero-split h1 em {
  color: var(--color-accent);
}

.hero-split p {
  color: var(--color-text-light);
}

.hero-split .hero-cta-note {
  color: var(--color-text-light);
}

.hero-split .hero-stat strong {
  color: var(--color-accent);
}

.hero-split .hero-stat span {
  color: var(--color-text-light);
}

.hero-split .btn-outline {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.hero-split .btn-outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.hero-content {
  max-width: 640px;
}

.hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent-light);
  margin-bottom: 22px;
  font-weight: 600;
}

.hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.4rem, 5.2vw, 4rem);
  font-weight: 600;
  line-height: 1.12;
  margin-bottom: 22px;
  letter-spacing: -0.01em;
}

.hero h1 em {
  font-style: normal;
  color: var(--color-accent-light);
}

.hero p {
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.85);
  margin-bottom: 36px;
  max-width: 520px;
}

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

.hero-cta-note {
  margin-top: 14px;
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.6);
}

.hero-stats {
  display: flex;
  gap: 48px;
  margin-top: 64px;
}

.hero-stat strong {
  display: block;
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--color-accent-light);
}

.hero-stat span {
  font-size: 0.82rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
}

/* ---------- About ---------- */
.about {
  padding: 120px 0;
  background: var(--color-white);
}

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 72px;
  align-items: center;
}

.about-photo {
  position: relative;
}

.about-photo img {
  width: 100%;
  border-radius: 2px;
}

.about-photo::after {
  content: "";
  position: absolute;
  top: 24px;
  left: -24px;
  right: 24px;
  bottom: -24px;
  border: 1px solid var(--color-accent);
  z-index: -1;
}

blockquote.philosophy {
  margin: 28px 0 0;
  padding: 26px 0 0;
  border-top: 1px solid var(--color-border);
  font-family: var(--font-heading);
  font-size: 1.18rem;
  line-height: 1.7;
  color: var(--color-dark);
  font-style: italic;
}

blockquote.philosophy footer {
  margin-top: 18px;
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.85rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 600;
}

/* ---------- Programs ---------- */
.programs {
  padding: 120px 0;
  background: var(--color-bg-light);
}

.programs-header {
  max-width: 640px;
  margin-bottom: 60px;
}

.programs-list {
  margin-top: 56px;
  border-top: 1px solid var(--color-border);
}

.program-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 48px;
  padding: 44px 0;
  border-bottom: 1px solid var(--color-border);
}

.program-level {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 10px;
}

.program-row h3 {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  color: var(--color-dark);
}

.program-row p {
  color: var(--color-text-light);
  font-size: 1.02rem;
  line-height: 1.75;
  max-width: 640px;
}

/* ---------- Orchestra teaser (index page) ---------- */
.orchestra-teaser {
  position: relative;
  padding: 140px 0;
  color: var(--color-white);
  background-size: cover;
  background-position: center;
  isolation: isolate;
}

.orchestra-teaser::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(39, 27, 30, 0.5) 0%, rgba(39, 27, 30, 0.82) 100%);
  z-index: -1;
}

.orchestra-teaser-inner {
  max-width: 620px;
}

.orchestra-teaser .section-label {
  color: var(--color-accent-light);
}

.orchestra-teaser h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.9rem, 3.6vw, 2.8rem);
  margin-bottom: 20px;
}

.orchestra-teaser p {
  color: rgba(255, 255, 255, 0.85);
  font-size: 1.05rem;
  margin-bottom: 32px;
}

/* ---------- Contact ---------- */
.contact {
  padding: 120px 0;
  background: var(--color-white);
}

.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: 64px;
}

.contact-info h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  color: var(--color-dark);
  margin-bottom: 18px;
}

.contact-info p {
  color: var(--color-text-light);
  margin-bottom: 34px;
}

.contact-list {
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.contact-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
}

.contact-icon {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border: 1px solid var(--color-accent);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
  font-size: 1.05rem;
}

.contact-list strong {
  display: block;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin-bottom: 3px;
}

.contact-list a,
.contact-list span {
  font-size: 1rem;
  color: var(--color-dark);
  font-weight: 500;
}

.form-card {
  background: var(--color-bg-light);
  border: 1px solid var(--color-border);
  padding: 40px;
}

.form-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-dark);
  margin-bottom: 6px;
}

.form-card > p {
  color: var(--color-text-light);
  font-size: 0.92rem;
  margin-bottom: 26px;
}

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

.form-group {
  margin-bottom: 18px;
}

.form-group label {
  display: block;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--color-dark);
  margin-bottom: 7px;
}

.form-group label .req {
  color: var(--color-accent);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 12px 14px;
  font-size: 0.95rem;
  font-family: var(--font-body);
  border: 1px solid var(--color-border);
  border-radius: 2px;
  background: var(--color-white);
  color: var(--color-text);
  transition: border-color var(--transition);
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--color-accent);
}

.form-group textarea {
  resize: vertical;
  min-height: 100px;
}

.form-submit {
  width: 100%;
  margin-top: 6px;
}

.form-note {
  font-size: 0.78rem;
  color: var(--color-text-light);
  margin-top: 14px;
  text-align: center;
}

.form-success {
  display: none;
  padding: 16px 18px;
  background: #eefaf0;
  border: 1px solid #bfe6c7;
  color: #256d33;
  font-size: 0.92rem;
  margin-bottom: 20px;
}
.form-success.visible {
  display: block;
}

/* ---------- Footer ---------- */
.site-footer {
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.65);
  padding: 60px 0 28px;
}

.footer-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 48px;
  padding-bottom: 40px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}

.footer-brand .brand-mark {
  font-size: 1.3rem;
}

.footer-brand p {
  margin-top: 16px;
  font-size: 0.9rem;
  max-width: 320px;
  color: rgba(255, 255, 255, 0.55);
}

.footer-col h4 {
  color: var(--color-white);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 18px;
}

.footer-col ul li {
  margin-bottom: 11px;
}

.footer-col a {
  font-size: 0.92rem;
  color: rgba(255, 255, 255, 0.65);
  transition: color var(--transition);
}
.footer-col a:hover {
  color: var(--color-accent-light);
}

.footer-bottom {
  padding-top: 24px;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.4);
}

/* ---------- Orchestra page specific ---------- */
.orchestra-hero {
  background-image: linear-gradient(115deg, rgba(39, 27, 30, 0.82) 0%, rgba(46, 32, 35, 0.5) 55%, rgba(46, 32, 35, 0.3) 100%), url("../images/orchestra-hero.jpg");
  background-size: cover;
  background-position: center 30%;
}

.features {
  padding: 120px 0;
  background: var(--color-white);
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.feature-card {
  padding: 8px 4px;
}

.feature-num {
  font-family: var(--font-heading);
  font-size: 2.6rem;
  color: var(--color-accent);
  opacity: 0.35;
  margin-bottom: 14px;
}

.feature-card h3 {
  font-family: var(--font-heading);
  font-size: 1.3rem;
  line-height: 1.3;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.feature-card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
}

.repertoire {
  padding: 120px 0;
  background: var(--color-bg-light);
}

.repertoire-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 56px;
}

.repertoire-date {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: var(--color-text-light);
}

.repertoire-card {
  background: var(--color-white);
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.repertoire-card img {
  width: 100%;
  height: 280px;
  object-fit: cover;
}

.repertoire-card-body {
  padding: 30px 32px;
}

.repertoire-tag {
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-accent);
  font-weight: 700;
  margin-bottom: 10px;
  display: block;
}

.repertoire-card h3 {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--color-dark);
  margin-bottom: 10px;
}

.repertoire-card p {
  color: var(--color-text-light);
  font-size: 0.94rem;
}

.repertoire-card p a {
  color: var(--color-accent);
  font-weight: 600;
  border-bottom: 1px solid transparent;
  transition: border-color var(--transition);
}
.repertoire-card p a:hover {
  border-bottom-color: var(--color-accent);
}

.audition {
  padding: 120px 0;
  background: var(--color-white);
}

.audition-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
}

.audition-steps {
  counter-reset: step;
  margin-top: 30px;
}

.audition-step {
  display: flex;
  gap: 20px;
  padding: 22px 0;
  border-top: 1px solid var(--color-border);
}
.audition-step:first-child {
  border-top: none;
}

.audition-step-num {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-dark);
  color: var(--color-accent-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-weight: 600;
}

.audition-step h4 {
  font-size: 1.02rem;
  color: var(--color-dark);
  margin-bottom: 4px;
}

.audition-step p {
  font-size: 0.9rem;
  color: var(--color-text-light);
}

.requirements-box {
  margin-top: 34px;
  background: var(--color-dark);
  color: var(--color-white);
  padding: 32px;
}

.requirements-box h4 {
  color: var(--color-accent-light);
  font-family: var(--font-heading);
  font-size: 1.1rem;
  margin-bottom: 16px;
}

.requirements-box ul li {
  font-size: 0.92rem;
  padding: 8px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.85);
}
.requirements-box ul li:first-child {
  border-top: none;
}

/* ---------- Method page ---------- */
/* The source photo is a tall portrait; a plain full-width cover background
   would zoom in further (cropping the face) as the viewport gets wider,
   since cover always scales to fill width first. .page-hero-bg caps how
   wide that photo layer ever grows, so the crop stays the same past that
   point — any extra width just shows solid color on either side instead
   of zooming the face more. */
.page-hero {
  position: relative;
  isolation: isolate;
  background: #f6f5f3;
  color: var(--color-dark);
  padding: 280px 0 60px;
  /* Must fit: fixed header (78px) + top clearance (32px) + photo panel at
     its capped width (550 * 1280/854 ≈ 825px), with no extra margin
     below — the section's height is exactly the photo's, so its bottom
     edge lines up with the photo's bottom edge. */
  min-height: 935px;
  overflow: hidden;
}

/* aspect-ratio locked to the FULL source photo (800:1200, uncropped) so
   the whole picture always shows — nothing trimmed off the sides or top,
   just scaled up or down as a whole. Anchored a fixed distance below the
   header (not vertically centered) so it can never be covered by it. */
.page-hero-bg {
  position: absolute;
  top: 110px;
  right: 0;
  width: 100%;
  max-width: 550px;
  aspect-ratio: 854 / 1280;
  /* Soft light fade at the seam (matching the section's own background)
     instead of a dark overlay — the photo's own backdrop is already
     light, so this just melts the gutter into the photo rather than
     leaving a hard edge. */
  background-image: linear-gradient(115deg, rgba(246, 245, 243, 0.9) 0%, rgba(246, 245, 243, 0.35) 15%, rgba(246, 245, 243, 0) 32%), url("../images/anton-method.jpg?v=2");
  background-size: cover;
  background-position: center center;
  z-index: -1;
}

.page-hero .hero-eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 22px;
  font-weight: 600;
}

.page-hero h1 {
  font-family: var(--font-heading);
  font-size: clamp(2.2rem, 4.2vw, 3.2rem);
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 22px;
  /* Deliberately narrower than the h1 max-width used elsewhere — this
     text sits beside a right-anchored photo with a capped width, and a
     wide heading can reach far enough right to land on the photo. A
     tighter cap keeps a reliable margin instead of a knife's-edge
     threshold that depends on exact line-wrapping at a given width. */
  max-width: 430px;
  color: var(--color-dark);
}

.page-hero p {
  font-size: 1.15rem;
  color: var(--color-text-light);
  max-width: 430px;
}

.method-copy {
  max-width: 760px;
  margin: 0 auto;
}

.achievement-list {
  margin-top: 44px;
  display: flex;
  flex-direction: column;
  gap: 18px;
  max-width: 640px;
}

.achievement-list li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.6;
}

.achievement-list .check {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--color-accent);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  margin-top: 2px;
}

blockquote.philosophy.large {
  font-size: 1.4rem;
  max-width: 760px;
  margin: 64px auto 0;
  padding-top: 44px;
}

blockquote.philosophy.center {
  text-align: center;
}

.book-panel {
  max-width: 760px;
  margin: 0 auto;
  background: var(--color-dark);
  color: rgba(255, 255, 255, 0.85);
  padding: 56px;
}

.book-panel .book-label {
  color: var(--color-accent-light);
}

.book-panel h2 {
  font-family: var(--font-heading);
  font-size: clamp(1.6rem, 3vw, 2.1rem);
  color: var(--color-white);
  margin-bottom: 8px;
}

.book-panel .book-subtitle {
  font-style: italic;
  color: rgba(255, 255, 255, 0.6);
  margin-bottom: 24px;
}

.book-panel p {
  margin-bottom: 20px;
  line-height: 1.75;
}

.book-panel ul {
  margin-bottom: 24px;
}

.book-panel ul li {
  padding: 10px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.book-panel ul li:first-child {
  border-top: none;
}

/* ---------- Rehearsals ---------- */
.rehearsals {
  padding: 120px 0;
  background: var(--color-white);
}

.rehearsals-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.rehearsals .contact-list {
  margin-top: 36px;
}

.rehearsals .contact-list a {
  line-height: 1.5;
}

.note-card {
  background: var(--color-bg-light);
  border-left: 3px solid var(--color-accent);
  padding: 32px 34px;
  margin-top: 8px;
}

.note-card h4 {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  color: var(--color-dark);
  margin-bottom: 12px;
}

.note-card p {
  color: var(--color-text-light);
  font-size: 0.95rem;
  line-height: 1.7;
}

/* ---------- FAQ ---------- */
.faq {
  padding: 120px 0;
  background: var(--color-bg-light);
}

.faq-header {
  max-width: 640px;
  margin-bottom: 48px;
}

.faq-list {
  max-width: 820px;
  border-top: 1px solid var(--color-border);
}

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

.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: 24px 40px 24px 0;
  position: relative;
  font-family: var(--font-heading);
  font-size: 1.08rem;
  font-weight: 600;
  color: var(--color-dark);
  transition: color var(--transition);
}

.faq-item summary::-webkit-details-marker {
  display: none;
}

.faq-item summary:hover {
  color: var(--color-accent);
}

.faq-item summary::after {
  content: "+";
  position: absolute;
  right: 4px;
  top: 22px;
  font-family: var(--font-body);
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--color-accent);
  transition: transform var(--transition);
}

.faq-item[open] summary::after {
  content: "\2212";
}

.faq-answer {
  padding: 0 40px 28px 0;
  color: var(--color-text-light);
  font-size: 0.98rem;
  line-height: 1.75;
}

.faq-answer p {
  margin-bottom: 14px;
}
.faq-answer p:last-child {
  margin-bottom: 0;
}

.faq-answer ul {
  margin: 10px 0 14px;
}

.faq-answer ul li {
  padding: 6px 0 6px 20px;
  position: relative;
}

.faq-answer ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 15px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-accent);
}

.faq-note {
  margin-top: 10px;
  padding: 14px 18px;
  background: var(--color-white);
  border-left: 3px solid var(--color-accent);
  font-size: 0.9rem;
  color: var(--color-text-light);
}

/* ---------- Parent Partnership ---------- */
.partnership {
  padding: 120px 0;
  background: var(--color-white);
}

.partnership-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.partnership-intro p {
  color: var(--color-text-light);
  margin-top: 16px;
  line-height: 1.75;
}

.partnership-intro p:first-of-type {
  color: var(--color-text);
  font-size: 1.05rem;
}

.partnership-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.partnership-col {
  background: var(--color-bg-light);
  padding: 30px 28px;
  border-top: 3px solid var(--color-accent);
}

.partnership-col h4 {
  font-family: var(--font-heading);
  font-size: 1.05rem;
  color: var(--color-dark);
  margin-bottom: 16px;
}

.partnership-col ul li {
  font-size: 0.92rem;
  color: var(--color-text-light);
  padding: 9px 0;
  border-top: 1px solid var(--color-border);
  line-height: 1.5;
}
.partnership-col ul li:first-child {
  border-top: none;
}

/* ---------- Pricing line ---------- */
.pricing-strip {
  padding: 48px 0;
  background: var(--color-dark);
  text-align: center;
}

.pricing-strip p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 1.1rem;
}

.pricing-strip strong {
  font-family: var(--font-heading);
  color: var(--color-accent-light);
  font-size: 1.3rem;
  font-weight: 600;
}

/* ---------- Responsive ---------- */
/* Below this width, the right-anchored photo (capped at 550px) doesn't
   leave enough gutter for the heading/paragraph to clear it — text ends
   up sitting partly on the photo. Below ~1024px, fall back to white text
   on a dark overlay (safe against either the photo or the gutter);
   above it, the light background/dark-text scheme applies cleanly. */
@media (max-width: 1024px) {
  .page-hero {
    background: var(--color-dark);
    color: var(--color-white);
  }

  .page-hero .hero-eyebrow {
    color: var(--color-accent-light);
  }

  .page-hero h1 {
    color: var(--color-white);
  }

  .page-hero p {
    color: rgba(255, 255, 255, 0.85);
  }

  .page-hero-bg {
    background-image: linear-gradient(115deg, rgba(20, 14, 15, 0.82) 0%, rgba(20, 14, 15, 0.62) 45%, rgba(20, 14, 15, 0.42) 100%), url("../images/anton-method.jpg?v=2");
  }
}

@media (max-width: 900px) {
  .about-grid,
  .contact-grid,
  .audition-grid,
  .rehearsals-grid,
  .partnership-grid {
    grid-template-columns: 1fr;
  }

  .about-photo {
    max-width: 380px;
    margin: 0 auto;
  }

  .features-grid,
  .repertoire-grid {
    grid-template-columns: 1fr 1fr;
  }

  .program-row {
    grid-template-columns: 200px 1fr;
    gap: 28px;
  }

  .footer-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 768px) {
  .brand {
    gap: 6px;
  }

  .header-logo-mark {
    width: 30px;
    height: 30px;
    border-radius: 7px;
  }

  .nav-links {
    position: fixed;
    top: 78px;
    left: 0;
    right: 0;
    z-index: 1001;
    background: #1f1517;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    padding: 10px 24px 26px;
    transform: translateY(-8px);
    opacity: 0;
    pointer-events: none;
    transition: all var(--transition);
  }

  .nav-links.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }

  .nav-links a {
    width: 100%;
    padding: 14px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }

  .nav-links a.nav-cta {
    margin-top: 12px;
    text-align: center;
  }

  .nav-toggle {
    display: flex;
  }

  .hero-stats {
    flex-wrap: wrap;
    row-gap: 24px;
    column-gap: 30px;
  }

  .hero-media {
    height: 48vh;
    min-height: 340px;
  }

  .hero-split .container {
    padding: 36px 20px 56px;
  }

  .form-row {
    grid-template-columns: 1fr;
  }

  .features-grid,
  .repertoire-grid {
    grid-template-columns: 1fr;
  }

  .program-row {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 32px 0;
  }

  .footer-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .about,
  .programs,
  .contact,
  .features,
  .repertoire,
  .audition,
  .orchestra-teaser,
  .faq,
  .partnership {
    padding: 80px 0;
  }

  .pricing-strip {
    padding: 34px 0;
  }

  .faq-item summary,
  .faq-answer {
    padding-right: 30px;
  }

  /* Mobile: stack the photo above the text instead of overlapping them —
     there's no gutter narrow screens can spare, so any overlap either
     hides text behind the header or sits on the dark shirt. Stacking
     avoids the problem entirely, and lets mobile use the same light
     background / dark text as desktop instead of the dark-overlay
     fallback the 769–1024px range still needs. */
  .page-hero {
    padding: 0 0 40px;
    min-height: 0;
    background: #f6f5f3;
    color: var(--color-dark);
  }

  .page-hero .hero-eyebrow {
    color: var(--color-accent);
  }

  .page-hero h1 {
    color: var(--color-dark);
  }

  .page-hero p {
    color: var(--color-text-light);
  }

  .page-hero-bg {
    position: relative;
    top: auto;
    right: auto;
    width: 100%;
    max-width: none;
    margin-top: 78px;
    z-index: auto;
    background-image: url("../images/anton-method.jpg?v=2");
  }

  .page-hero .container {
    padding-top: 32px;
  }

  .book-panel {
    padding: 36px 26px;
  }

  blockquote.philosophy.large {
    font-size: 1.2rem;
    margin-top: 48px;
    padding-top: 32px;
  }
}

@media (max-width: 480px) {
  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn {
    text-align: center;
  }

  .form-card {
    padding: 26px 22px;
  }

  .partnership-columns {
    grid-template-columns: 1fr;
  }
}

/* ---------- Orchestra page color theme ----------
   Scoped to .orchestra-page so the studio pages keep their burgundy identity.
   Pulled from the Nova logo: royal blue + gold, on a navy dark tone instead of maroon. */
.orchestra-page {
  --color-dark: #16233a;
  --color-text: #232f3d;
  --color-text-light: #64727c;
  --color-accent: #2c5490;
  --color-accent-light: #eab54a;
  --color-border: #dde3e9;
  --color-bg-light: #f2f4f7;
  --color-white: #fbfcfe;
}

/* Header matches the logo's own cream background, so the badge reads as
   part of the header rather than a box sitting on top of it. */
.orchestra-page .site-header {
  background: rgba(250, 241, 214, 0.95);
}

.orchestra-page .site-header .brand {
  color: var(--color-dark);
}

.orchestra-page .site-header .brand-mark strong {
  color: var(--color-accent);
}

.orchestra-page .site-header .brand-sub {
  color: rgba(22, 35, 58, 0.55);
}

.orchestra-page .site-header .nav-links a {
  color: rgba(22, 35, 58, 0.8);
}

.orchestra-page .site-header .nav-links a:hover,
.orchestra-page .site-header .nav-links a.active {
  color: var(--color-accent);
}

.orchestra-page .site-header .nav-links a.nav-cta {
  color: var(--color-accent);
}
.orchestra-page .site-header .nav-links a.nav-cta:hover {
  color: var(--color-white);
}

.orchestra-page .site-header .nav-toggle span {
  background: var(--color-dark);
}

/* Pull the brand + nav links into a tighter group on the left instead of
   the site-wide space-between spread, and anchor just the CTA button to
   the far right so the header doesn't end with a big empty gap. */
.orchestra-page .site-header .container {
  justify-content: flex-start;
  gap: 40px;
}

.orchestra-page .site-header .nav-links a.nav-cta {
  margin-left: auto;
}

/* On mobile, .nav-links is fixed/out of flow, so it's just .brand and
   .nav-toggle in the flex row — the button needs its own auto-margin to
   stay pinned right now that the container isn't space-between. */
.orchestra-page .site-header .nav-toggle {
  margin-left: auto;
}

.orchestra-page .site-header .brand {
  gap: 10px;
}

/* min-width guard so this doesn't outrank the narrower mobile sizing
   below (which has lower specificity but needs to win on small screens). */
@media (min-width: 769px) {
  .orchestra-page .header-logo-mark {
    width: 56px;
    height: 56px;
  }
}

/* Left: solid cream matching the logo's own background (so the badge and
   header blend into the hero too), fading smoothly to fully transparent
   by the right edge so the photo shows completely uncovered there.
   Text switches from white to dark to stay readable on the light left
   side (see the .orchestra-page .hero text-color overrides below). */
.orchestra-page .hero::before {
  background: linear-gradient(115deg, rgba(250, 241, 214, 0.95) 0%, rgba(250, 241, 214, 0.55) 45%, rgba(250, 241, 214, 0) 100%);
}

.orchestra-page .orchestra-hero {
  background-image: linear-gradient(115deg, rgba(250, 241, 214, 0.95) 0%, rgba(250, 241, 214, 0.55) 45%, rgba(250, 241, 214, 0) 100%), url("../images/orchestra-hero.jpg");
}

.orchestra-page .hero {
  color: var(--color-dark);
}

.orchestra-page .hero .hero-eyebrow {
  color: var(--color-accent);
}

.orchestra-page .hero h1 {
  color: var(--color-dark);
}

.orchestra-page .hero h1 em {
  color: var(--color-accent);
}

.orchestra-page .hero p {
  color: var(--color-text-light);
}

.orchestra-page .hero-cta-note {
  color: var(--color-text-light);
}

.orchestra-page .hero-stat strong {
  color: var(--color-accent);
}

.orchestra-page .hero-stat span {
  color: rgba(35, 47, 61, 0.65);
}

.orchestra-page .hero .btn-outline {
  border-color: var(--color-dark);
  color: var(--color-dark);
}
.orchestra-page .hero .btn-outline:hover {
  background: var(--color-dark);
  color: var(--color-white);
  border-color: var(--color-dark);
}

.orchestra-page .btn-primary:hover {
  background: #1f3f6e;
}

.orchestra-page .btn-dark:hover {
  background: #0d1826;
}

@media (max-width: 768px) {
  .orchestra-page .nav-links {
    background: #faf1d6;
  }

  .orchestra-page .nav-links a {
    border-bottom-color: rgba(22, 35, 58, 0.1);
  }
}