/* Story Melody · colorful sounds, generous space, a storybook rhythm. */
:root {
  --red: #ff6b6b;
  --orange: #ffa94d;
  --yellow: #ffd93d;
  --green: #6bcb77;
  --blue: #4d96ff;
  --purple: #9b5de5;
  --action: #7240b5;
  --cream: #fff9f1;
  --pale-blue: #eef7ff;
  --pale-pink: #fff1f5;
  --ink: #292b43;
  --muted: #646575;
  --line: #e8e4de;
  --font: "Pretendard", "Noto Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 112px; }
body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.85; word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased; }
body.modal-open { overflow: hidden; }
h1,h2,h3,p,figure,dl,dd { margin: 0; }
h1,h2,h3 { line-height: 1.42; letter-spacing: -.055em; }
a { color: inherit; text-decoration: none; }
button,input,textarea { font: inherit; }
button { color: inherit; cursor: pointer; }
button,a,input,textarea,summary { -webkit-tap-highlight-color: transparent; }
button,a,summary { touch-action: manipulation; }
button { border: 0; }
button:disabled { cursor: not-allowed; }
img { display: block; max-width: 100%; height: auto; }
::selection { color: var(--ink); background: #ffe99a; }
:focus-visible { outline: 3px solid var(--action); outline-offset: 5px; }
[hidden] { display: none !important; }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.container { width: min(1200px, calc(100% - 80px)); margin-inline: auto; }
.section-space { padding-block: 108px; }
.section-heading h2,h2 { font-size: clamp(30px, 3vw, 42px); font-weight: 800; }
.section-heading > p:last-child:not(.section-kicker) { margin-top: 22px; color: var(--muted); }
.section-kicker { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; color: #666179; font: 700 11px/1.5 Arial, sans-serif; letter-spacing: .16em; }
.section-kicker > span { display: inline-grid; place-items: center; width: 29px; height: 29px; border: 1px solid #dcd6e0; border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.centered { max-width: 800px; margin: 0 auto 54px; text-align: center; }
.centered .section-kicker { justify-content: center; }
.heading-row { display: grid; grid-template-columns: 1.3fr 1fr; align-items: end; gap: 90px; margin-bottom: 50px; }
.heading-row > p { max-width: 400px; padding-bottom: 5px; color: var(--muted); }
.split-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 85px; align-items: center; }
.purple-text { color: var(--action); }
.underline-yellow { background: linear-gradient(transparent 76%, #ffe58c 76%, #ffe58c 94%, transparent 94%); box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.fine-print { color: #71717d; font-size: 13px; line-height: 1.8; margin-top: 24px; }
.lead { font-size: 19px; font-weight: 700; }
.mini-label { display: inline-block; color: var(--action); font-size: 12px; font-weight: 700; letter-spacing: .03em; margin-bottom: 15px; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 16px; min-height: 55px; padding: 14px 24px; border-radius: 100px; font-size: 14px; font-weight: 700; line-height: 1.5; transition: transform .2s, background .2s, box-shadow .2s; }
.button .icon { width: 20px; height: 20px; }
.button:hover { transform: translateY(-3px); }
.button:active { transform: translateY(1px); }
.primary { background: var(--action); color: white; box-shadow: 0 5px 0 #57328718; }
.primary:hover { background: #62349f; box-shadow: 0 7px 16px #59328321; }
.text-button { padding-inline: 8px; background: transparent; }
.text-button span { font-size: 21px; }
.skip-link { position: fixed; top: -100px; left: 20px; z-index: 200; background: var(--ink); color: white; padding: 12px 20px; border-radius: 0 0 12px 12px; }
.skip-link:focus { top: 0; }

/* Header and the supplied transparent xylophone logo */
.site-header { position: sticky; z-index: 50; top: 0; background: #fffdf9f5; border-bottom: 1px solid #eee9e2; transition: box-shadow .2s; }
.site-header.scrolled { box-shadow: 0 5px 24px #2b254308; }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 88px; }
.brand { display: inline-flex; align-items: center; gap: 11px; flex-shrink: 0; }
.brand-type { font-size: 23px; font-weight: 900; line-height: 1.25; letter-spacing: -.055em; }
.brand-type small { display: block; font: 700 9px/1.6 Arial, sans-serif; letter-spacing: .25em; margin-top: 4px; }
/* Frame out only the PNG's transparent outer margin; retain the supplied artwork. */
.brand-mark { position: relative; display: block; width: 58px; height: 42px; overflow: hidden; flex-shrink: 0; }
.brand-mark img { position: absolute; width: 65px; height: 65px; max-width: none; left: -4.8px; top: -12px; }
.brand-image { max-height: 52px; width: auto; max-width: 220px; }
#main-nav { display: flex; align-items: center; gap: 28px; }
#main-nav a { font-size: 13px; font-weight: 600; white-space: nowrap; padding-block: 12px; transition: color .2s; }
#main-nav a:hover,#main-nav a[aria-current] { color: var(--action); }
#main-nav .nav-cta { border: 1px solid #d5c5e5; border-radius: 100px; padding: 9px 18px; color: var(--action); }
.nav-cta span { margin-left: 10px; }
.menu-toggle { display: none; width: 46px; height: 46px; background: transparent; border-radius: 50%; }

/* 01 · Hero */
.hero { padding: 0 0 28px; overflow: clip; }
.hero-scene { position: relative; isolation: isolate; background: var(--cream); }
.hero-layout { position: relative; z-index: 1; display: flex; align-items: center; min-height: 700px; pointer-events: none; }
.hero-copy { position: relative; width: 555px; max-width: 50%; padding-block: 58px; pointer-events: auto; }
.hero-tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid #e3dccf; border-radius: 100px; background: #fffaf2e6; font-size: 11px; font-weight: 700; }
.hero-tag > span { width: 7px; height: 7px; background: var(--green); border-radius: 50%; }
.hero-overline { margin: 26px 0 10px; color: #8b7051; font-size: 14px; font-weight: 600; }
h1 { position: relative; font-size: clamp(38px, 3.8vw, 55px); font-weight: 900; line-height: 1.42; letter-spacing: -.065em; }
.melody-title { color: var(--action); white-space: nowrap; position: relative; background: linear-gradient(transparent 88%, #ffda6975 88%); }
.title-spark { position: absolute; right: 16px; top: -14px; color: #c58928; width: 30px; height: 30px; transform: rotate(12deg); }
.hero-lead { margin-top: 26px; font-size: 20px; font-weight: 700; letter-spacing: -.04em; }
.hero-description { color: var(--muted); font-size: 14px; margin-top: 14px; }
.hero-buttons { display: flex; align-items: center; gap: 20px; margin-top: 30px; }
.hero-signature { display: flex; align-items: center; gap: 11px; margin-top: 32px; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .12em; color: var(--action); }
.hero-signature span { font: 11px/1.5 var(--font); letter-spacing: -.02em; color: #77727d; border-left: 1px solid #d7cddc; padding-left: 11px; }
.hero-visual { position: absolute; inset: 0; min-width: 0; }
.hero-visual::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #fff9f1 0%, #fff9f1fa 18%, #fff9f1e8 31%, #fff9f1b3 42%, #fff9f13b 55%, #fff9f100 67%); }
.hero-photo { position: absolute; inset: 0; overflow: hidden; }
.hero-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center 48%; }
.hero-sticker { z-index: 1; display: flex; align-items: center; gap: 14px; position: absolute; right: max(32px, calc((100vw - 1240px) / 2)); bottom: 44px; border: 2px solid white; border-radius: 18px; background: #eaf5e1ed; padding: 15px 20px; box-shadow: 0 6px 20px #29392e10; transform: rotate(3deg); font-size: 12px; line-height: 1.7; }
.hero-sticker .icon { width: 34px; height: 34px; color: #478250; }
.hero-sticker strong { font-size: 16px; }
.hero-ai-label { position: absolute; z-index: 1; bottom: 12px; right: 22px; padding: 2px 8px; border-radius: 5px; background: #fff9f1de; color: #5d5368; font-size: 10px; }
.tiny-rainbow i:nth-child(1),.ticket-rainbow i:nth-child(1),.footer-color-line i:nth-child(1),.xylophone i:nth-child(1) { background: var(--red); }
.tiny-rainbow i:nth-child(2),.ticket-rainbow i:nth-child(2),.footer-color-line i:nth-child(2),.xylophone i:nth-child(2) { background: var(--orange); }
.tiny-rainbow i:nth-child(3),.ticket-rainbow i:nth-child(3),.footer-color-line i:nth-child(3),.xylophone i:nth-child(3) { background: var(--yellow); }
.tiny-rainbow i:nth-child(4),.ticket-rainbow i:nth-child(4),.footer-color-line i:nth-child(4),.xylophone i:nth-child(4) { background: var(--green); }
.tiny-rainbow i:nth-child(5),.ticket-rainbow i:nth-child(5),.footer-color-line i:nth-child(5),.xylophone i:nth-child(5) { background: var(--blue); }
.tiny-rainbow i:nth-child(6),.ticket-rainbow i:nth-child(6),.footer-color-line i:nth-child(6),.xylophone i:nth-child(6) { background: var(--purple); }
.hero-bottom { display: flex; justify-content: space-between; align-items: center; gap: 20px; padding-top: 24px; }
.hero-bottom p { color: var(--muted); font-size: 12px; }
.hero-bottom strong { color: var(--ink); font-weight: 600; }
.scroll-cue { display: inline-flex; align-items: center; gap: 14px; font-size: 11px; }
.scroll-cue span { width: 36px; height: 36px; border: 1px solid #dcd4cb; border-radius: 50%; display: grid; place-items: center; font-size: 18px; }

/* 02 · The story behind the program */
.about { background: white; }
.about-visual .section-kicker { margin-bottom: 35px; }
.story-photo { position: relative; }
.story-photo img { border-radius: 100px 28px 28px 28px; width: 100%; }
.story-photo figcaption { display: flex; align-items: center; gap: 12px; margin: -27px 24px 0; padding: 19px 20px; background: var(--cream); position: relative; border-radius: 14px; box-shadow: 0 6px 20px #322a3d08; font-size: 13px; font-weight: 600; }
.story-photo .icon { color: #bc615d; }
.about-copy > p { color: var(--muted); margin-top: 18px; font-size: 15px; }
.about-copy > .lead { color: var(--ink); margin-top: 25px; font-size: 18px; }
.about-copy strong { color: var(--ink); }
.quote-line { border-left: 3px solid var(--purple); padding-left: 19px; margin-top: 29px; font-size: 17px; }
.quote-line strong { color: var(--action); }
.quote-line span { display: block; font-size: 13px; color: var(--muted); margin-top: 10px; }
.philosophy { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 22px; margin-top: 60px; padding: 25px 22px; border-block: 1px solid #eae5ed; font-weight: 700; font-size: 16px; }
.philosophy b { color: #c0b5c8; font-weight: 400; }
.philosophy span:nth-of-type(1) { color: #b54c52; }
.philosophy span:nth-of-type(2) { color: #a56720; }
.philosophy span:nth-of-type(3) { color: #458050; }
.philosophy span:nth-of-type(4) { color: #3476b8; }
.philosophy span:nth-of-type(5) { color: var(--action); }
.philosophy-note { text-align: center; margin-top: 14px; }

/* 03 · Strength cards */
.features { background: var(--cream); }
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; }
.coral { --accent: var(--red); --tint: #fff1ef; --accent-ink: #b84c54; }
.orange { --accent: var(--orange); --tint: #fff4e7; --accent-ink: #9b611f; }
.gold { --accent: var(--yellow); --tint: #fff9df; --accent-ink: #8b691a; }
.green { --accent: var(--green); --tint: #eff9ed; --accent-ink: #427749; }
.blue { --accent: var(--blue); --tint: #edf5ff; --accent-ink: #356dae; }
.violet { --accent: var(--purple); --tint: #f4eefa; --accent-ink: #794cb0; }
.feature-card { padding: 28px 25px; background: white; border: 1px solid #ede7df; border-radius: 22px; transition: transform .2s, box-shadow .2s; }
.feature-card:hover { transform: translateY(-6px); box-shadow: 0 12px 25px #392f4c08; }
.feature-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24px; }
.feature-top .icon { width: 46px; height: 46px; padding: 10px; box-sizing: content-box; background: var(--tint); color: var(--accent-ink); border-radius: 20px; }
.feature-top > span { align-self: flex-start; color: #a9a4ae; font: 11px/1 Arial,sans-serif; }
.feature-card h3 { font-size: 22px; margin-bottom: 18px; }
.feature-card p { color: var(--muted); font-size: 14px; }
.feature-word { display: inline-block; margin-top: 24px; color: var(--accent-ink); font-size: 13px; font-weight: 700; background: var(--tint); border-radius: 100px; padding: 3px 11px; }
.feature-card small { display: block; margin-top: 14px; color: #73707d; font-size: 11px; line-height: 1.7; }

/* 04 · Learning accordion cards */
.learning { background: var(--pale-blue); }
.learning-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; align-items: start; }
.learning-card { overflow: hidden; padding: 26px 28px 0; border-radius: 22px; background: white; border-top: 5px solid var(--accent); }
.learning-top { display: flex; align-items: center; justify-content: space-between; height: 48px; margin-bottom: 18px; color: var(--accent-ink); }
.area-number { display: grid; place-items: center; width: 40px; height: 40px; background: var(--tint); border-radius: 50%; font: 700 12px/1 Arial,sans-serif; }
.learning-card h3 { font-size: 23px; }
.learning-card .learning-hook { color: var(--accent-ink); font-size: 14px; font-weight: 700; margin: 12px 0; }
.learning-card > p:not(.learning-hook) { color: var(--muted); font-size: 14px; min-height: 105px; }
.learning-card details { border-top: 1px solid #ebeaf0; margin-top: 24px; }
.learning-card summary { min-height: 60px; padding-block: 17px; display: flex; align-items: center; justify-content: space-between; gap: 8px; cursor: pointer; font-size: 13px; font-weight: 600; list-style: none; }
summary::-webkit-details-marker { display: none; }
.learning-card summary .icon { width: 18px; height: 18px; color: var(--accent-ink); transition: transform .2s; }
.learning-card details[open] summary .icon { transform: rotate(45deg); }
.learning-card ul { margin: 0 0 22px; padding-left: 20px; color: var(--muted); font-size: 14px; }
.learning-card li::marker { color: var(--accent-ink); }
.rhythm-glyph { font-size: 16px; letter-spacing: 5px; }
.length-glyph { display: flex; align-items: center; gap: 7px; }
.length-glyph i { display: block; width: 42px; height: 9px; background: currentColor; border-radius: 6px; }
.length-glyph i:nth-child(2) { width: 16px; }
.length-glyph i:nth-child(3) { width: 9px; }
.solfege-glyph { display: flex; align-items: flex-end; gap: 3px; height: 46px; }
.solfege-glyph i { font-style: normal; font-size: 12px; background: var(--tint); border-bottom: 3px solid var(--accent); width: 25px; text-align: center; }
.solfege-glyph i:nth-child(2) { margin-bottom: 8px; }
.solfege-glyph i:nth-child(3) { margin-bottom: 16px; }
.staff-glyph { width: 94px; height: 47px; }
.expression-glyph { font: italic bold 32px/1 Georgia,serif; }
.expression-glyph span { font-size: 20px; font-style: normal; padding-inline: 6px; }
.ensemble-glyph { width: 46px; height: 40px; }
.learning-photos { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 50px; }
.learning-photos figure { position: relative; border-radius: 22px; overflow: hidden; background: white; }
.learning-photos img { width: 100%; aspect-ratio: 1.7; object-fit: cover; object-position: center 40%; }
.learning-photos figcaption { padding: 18px 22px; font-size: 14px; font-weight: 600; }
.learning-photos figcaption span { display: inline-block; margin-right: 13px; font-size: 11px; font-weight: 400; color: var(--muted); }

/* 05 · Narrative flow */
.class-flow { background: white; }
.flow-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; padding: 0; margin: 0; list-style: none; }
.flow-steps li { position: relative; }
.flow-steps li:not(:last-child)::after { content: ""; position: absolute; z-index: 0; top: 27px; left: 72px; width: calc(100% - 40px); border-top: 2px dashed #dfd8e9; }
.step-dot { position: relative; z-index: 1; display: grid; place-items: center; width: 56px; height: 56px; border-radius: 20px; background: var(--tint); color: var(--accent-ink); border: 1px solid var(--accent); font: 700 17px/1 Arial,sans-serif; transform: rotate(-5deg); margin-bottom: 27px; }
.step-label { font-size: 11px; color: var(--action); }
.flow-steps h3 { font-size: 18px; margin: 9px 0 15px; }
.flow-steps p { font-size: 14px; color: var(--muted); }
.flow-note { margin-top: 30px; }
.story-example { position: relative; display: grid; grid-template-columns: .8fr 1.3fr; gap: 55px; padding: 35px 44px; border-radius: 24px; background: var(--cream); margin-top: 40px; overflow: hidden; }
.example-title { border-right: 1px dashed #d7c6aa; }
.example-title .mini-label { color: #9b6d35; }
.example-title h3 { font-size: 25px; }
.example-title > p { color: var(--muted); font-size: 11px; margin-top: 14px; }
.example-content { position: relative; z-index: 1; font-size: 14px; }
.example-content > p:first-child { color: var(--muted); }
.example-content dl { display: flex; flex-wrap: wrap; gap: 12px 22px; margin-top: 19px; }
.example-content dl > div { display: flex; align-items: center; gap: 9px; }
.example-content dt { background: #ffe7d1; border-radius: 100px; padding: 2px 10px; font-size: 12px; font-weight: 700; }
.example-content dl > div:nth-child(2) dt { background: #e4f0d3; }
.example-content dd { font-size: 12px; }
.example-finish { margin-top: 18px; font-size: 13px; font-weight: 700; }
.example-spark { position: absolute; right: 15px; bottom: -10px; width: 110px; height: 110px; color: #f5e7c9; stroke-width: .6; transform: rotate(15deg); }

/* 06 · Age progression */
.ages { background: #f6f2fb; }
.age-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: start; padding-top: 28px; }
.age-card { display: flex; flex-direction: column; position: relative; border-radius: 24px; padding: 28px 28px 24px; background: white; border-bottom: 5px solid var(--age-color); }
.age-three { --age-color: var(--green); --age-tint: #eff9ed; --age-ink: #45804d; margin-top: 52px; }
.age-four { --age-color: var(--blue); --age-tint: #edf5ff; --age-ink: #3472bb; margin-top: 26px; }
.age-five { --age-color: var(--purple); --age-tint: #f4eefa; --age-ink: var(--action); }
.age-top { display: flex; justify-content: space-between; align-items: center; gap: 6px; margin-bottom: 23px; color: var(--age-ink); }
.age-top > span:first-child { font-size: 14px; white-space: nowrap; }
.age-top b { font: 700 49px/1 Arial,sans-serif; margin-inline: 3px; }
.age-stage { font-size: 10px; background: var(--age-tint); padding: 4px 9px; border-radius: 100px; }
.age-card h3 { font-size: 26px; }
.age-card .age-hook { color: var(--age-ink); font-size: 13px; font-weight: 700; margin-block: 17px 12px; }
.age-card > p:not(.age-hook) { color: var(--muted); font-size: 14px; }
.age-card ul { padding: 19px 0 0; margin: 22px 0 28px; border-top: 1px solid #eee9f2; list-style: none; font-size: 13px; }
.age-card li { padding: 3px 0 3px 17px; position: relative; }
.age-card li::before { content: ""; position: absolute; left: 0; top: 13px; width: 5px; height: 5px; border-radius: 50%; background: var(--age-color); }
.age-card li small { font-size: 10px; color: var(--muted); }
.age-progress { display: flex; gap: 5px; margin-top: auto; }
.age-progress i { width: 32px; height: 5px; background: #eeeaf2; border-radius: 4px; }
.age-three .age-progress i:first-child,.age-four .age-progress i:not(:last-child),.age-five .age-progress i { background: var(--age-color); }

/* 07 · Ensemble takes center stage */
.ensemble { background: var(--cream); }
.ensemble-main { display: grid; grid-template-columns: 1.2fr 1fr; background: white; border-radius: 28px; overflow: hidden; }
.ensemble-photo { position: relative; min-height: 100%; }
.ensemble-photo img { height: 100%; width: 100%; object-fit: cover; object-position: center; }
.ensemble-photo figcaption { position: absolute; bottom: 24px; left: 24px; right: 24px; width: fit-content; border-radius: 100px; background: #fffdf5ed; padding: 10px 18px; font-size: 12px; font-weight: 600; }
.ensemble-copy { padding: 42px 37px; }
.ensemble-copy h3 { font-size: 26px; }
.ensemble-copy > p { margin-top: 19px; font-size: 14px; color: var(--muted); }
.ensemble-types { margin-top: 24px; }
.ensemble-types > div { padding: 14px 0; border-top: 1px solid #ece7f0; }
.ensemble-types dt { font-size: 14px; font-weight: 700; color: var(--action); margin-bottom: 3px; }
.ensemble-types dd { color: var(--muted); font-size: 13px; }
.performance-row { margin-top: 28px; display: grid; grid-template-columns: 1.2fr 1fr; gap: 45px; align-items: center; }
.performance-copy { padding: 24px 26px; }
.performance-copy h3 { font-size: 27px; margin-bottom: 17px; }
.performance-copy > p:not(.performance-notice) { color: var(--muted); font-size: 15px; }
.performance-row > img { width: 100%; border-radius: 26px; }
.performance-notice { display: flex; align-items: center; gap: 14px; background: #f0e7fb; color: #664194; padding: 18px; border-radius: 14px; font-size: 13px; margin-top: 24px; }
.ensemble-ending { text-align: center; font-size: 23px; padding-top: 50px; }
.ensemble-ending strong { color: var(--action); }
.ensemble-ending span { display: block; color: var(--muted); font-size: 14px; margin-top: 10px; }

/* 08 · Instruments */
.instruments { background: white; }
.instrument-visual { position: relative; }
.instrument-visual figure { background: var(--pale-blue); border-radius: 26px; overflow: hidden; }
.instrument-visual figcaption { padding: 16px 24px; font-size: 13px; color: #496982; }
.instrument-visual img { width: 100%; }
.xylophone { position: absolute; right: -15px; bottom: -35px; display: flex; align-items: center; gap: 6px; transform: rotate(12deg); padding: 9px; }
.xylophone i { display: block; width: 18px; height: 75px; border-radius: 7px; border: 2px solid white; box-shadow: 0 3px 5px #2b254320; }
.xylophone i:nth-child(2) { height: 67px; }.xylophone i:nth-child(3) { height: 59px; }.xylophone i:nth-child(4) { height: 51px; }.xylophone i:nth-child(5) { height: 43px; }.xylophone i:nth-child(6) { height: 35px; }
.instrument-copy > p:not(.fine-print) { color: var(--muted); margin-top: 22px; font-size: 15px; }
.instrument-list { margin-top: 22px; }
.instrument-list > div { padding-block: 15px; border-bottom: 1px solid #ede9ee; }
.instrument-list dt { display: flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 700; }
.instrument-dot { width: 10px; height: 10px; background: var(--accent); border-radius: 3px; transform: rotate(-10deg); }
.instrument-list dd { padding-left: 20px; font-size: 14px; color: var(--muted); margin-top: 4px; }

/* 09 · Gallery */
.gallery { background: var(--pale-pink); }
.gallery-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 30px 20px; }
.gallery-card { background: transparent; text-align: left; padding: 0; width: 100%; border-radius: 18px; }
.gallery-image { display: block; position: relative; border-radius: 18px; overflow: hidden; }
.gallery-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform .45s; }
.gallery-card:hover .gallery-image img { transform: scale(1.045); }
.gallery-expand { position: absolute; bottom: 12px; right: 12px; width: 32px; height: 32px; display: grid; place-items: center; border-radius: 50%; background: #fffdf5f5; color: var(--ink); font-size: 19px; transition: background .2s; }
.gallery-card:hover .gallery-expand { background: var(--yellow); }
.gallery-caption { display: block; padding: 16px 3px 0; }
.gallery-caption small { display: block; font: 700 9px/1.5 Arial,sans-serif; letter-spacing: .12em; color: #877c89; margin-bottom: 6px; }
.gallery-caption strong { font-size: 14px; font-weight: 600; }
.ai-notice { font-size: 12px; color: #786e79; border-top: 1px solid #eadfe5; margin-top: 35px; padding-top: 22px; }

/* 10 · Program invitation */
.adoption { background: #fff3cf; overflow: clip; }
.adoption-layout { display: grid; grid-template-columns: 1.2fr 1fr; align-items: center; gap: 90px; }
.adoption h2 > span { color: var(--action); }
.adoption-copy > p:not(.section-kicker) { font-size: 15px; max-width: 490px; color: #696454; margin-top: 20px; }
.adoption .button { margin-top: 30px; }
.program-ticket { padding: 32px 35px 26px; position: relative; border-radius: 24px; background: #fffefa; box-shadow: 10px 12px 0 #ead9a24d; transform: rotate(2deg); }
.ticket-label { font: 700 9px/1.6 Arial,sans-serif; letter-spacing: .17em; color: #91836b; }
.ticket-heading { display: flex; gap: 19px; align-items: center; margin: 25px 0; font-size: 25px; line-height: 1.5; letter-spacing: -.045em; }
.ticket-heading .icon { width: 44px; height: 44px; color: var(--action); }
.program-ticket dl { padding-top: 20px; border-top: 1px dashed #d5c9ae; }
.program-ticket dl > div { display: grid; grid-template-columns: 75px 1fr; gap: 16px; margin-top: 13px; font-size: 13px; }
.program-ticket dt { color: #847866; }
.program-ticket dd { font-weight: 600; }
.ticket-rainbow { display: flex; gap: 7px; margin-top: 30px; }
.ticket-rainbow i { display: block; height: 8px; flex: 1; border-radius: 5px; }

/* 11 · Inquiry */
.inquiry { background: var(--pale-blue); }
.inquiry-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 80px; align-items: start; }
.inquiry-copy { padding-top: 18px; }
.inquiry-copy > p:not(.section-kicker) { margin-top: 23px; color: var(--muted); font-size: 15px; }
.inquiry-note { display: flex; align-items: start; gap: 12px; margin-top: 32px; padding: 20px; border: 1px solid #cddae6; border-radius: 16px; }
.inquiry-note strong { font-size: 13px; font-weight: 700; }
.inquiry-note p { font-size: 12px; color: #6c7884; margin-top: 7px; }
.status-dot { flex-shrink: 0; width: 8px; height: 8px; border-radius: 50%; background: #bb8426; margin-top: 9px; }
.contact-illustration { display: flex; align-items: center; gap: 20px; margin: 50px 0 22px; }
.contact-illustration .icon { width: 46px; height: 46px; stroke-width: 1.3; color: #b6515a; }
.contact-illustration .icon:nth-of-type(2) { color: #468451; transform: rotate(10deg); }
.contact-illustration .icon:nth-of-type(3) { color: var(--action); transform: rotate(-10deg); }
.contact-illustration span { font-size: 20px; color: #9ca7b3; }
.inquiry-copy > .inquiry-tagline { color: #6d6481; font-size: 17px; }
.inquiry-tagline strong { color: var(--ink); }
.inquiry-form { background: white; padding: 34px 36px; border-radius: 26px; border: 1px solid #e3ebf2; }
.form-heading { display: flex; align-items: center; justify-content: space-between; margin-bottom: 25px; }
.form-heading h3 { font-size: 21px; }
.form-heading > span { color: #817986; font-size: 11px; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { min-width: 0; margin-bottom: 16px; }
.field > label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 7px; }
.field > label span { color: #a15c49; }
.field input,.field textarea { width: 100%; min-width: 0; padding: 13px 14px; background: #fcfbfe; border: 1px solid #e1dce8; border-radius: 9px; color: var(--ink); font-size: 14px; line-height: 1.6; outline-offset: 2px; transition: border-color .2s; }
.field input { min-height: 50px; }
.field textarea { resize: vertical; min-height: 145px; max-height: 450px; }
.field input::placeholder,.field textarea::placeholder { color: #8b8791; }
.field [aria-invalid="true"] { border-color: #b4484e; }
.field-error { color: #ae3d45; font-size: 12px; line-height: 1.6; margin-top: 5px; min-height: 0; }
.field-error:empty { display: none; }
.message-meta { display: flex; justify-content: space-between; gap: 10px; margin-top: 5px; }
#message-count { margin-left: auto; white-space: nowrap; color: #827c89; font-size: 11px; }
.privacy-area { border-top: 1px solid #ece7f0; padding-top: 20px; margin-bottom: 20px; }
.consent-label { display: flex; align-items: center; gap: 10px; min-height: 30px; font-size: 13px; }
.consent-label input { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--action); }
.consent-label small { color: var(--muted); font-size: 11px; }
#privacy-notice { margin-top: 8px; font-size: 11px; color: #807985; }
#privacy-form-link { display: inline-block; font-size: 12px; color: var(--action); text-decoration: underline; margin-top: 8px; }
.inquiry-submit { width: 100%; border-radius: 12px; }
.inquiry-submit:disabled { background: #ebe5f2; color: #77638e; box-shadow: none; transform: none; }
#form-status,.form-noscript { text-align: center; font-size: 11px; color: #82778d; margin-top: 13px; line-height: 1.8; }

/* Footer */
.site-footer { background: #fffdf9; }
.footer-color-line { display: flex; height: 5px; }
.footer-color-line i { flex: 1; }
.footer-top { display: grid; grid-template-columns: 1.1fr 1fr .7fr; gap: 60px; padding-block: 50px; }
.footer-tagline { color: var(--muted); font-size: 13px; margin-top: 20px; }
.footer-company { padding-top: 5px; }
.footer-company strong { font-size: 15px; }
.footer-company p { color: var(--muted); font-size: 12px; margin-top: 12px; }
#privacy-footer-link { font-size: 12px; text-decoration: underline; }
.footer-nav { display: flex; flex-direction: column; align-items: flex-start; padding-top: 1px; }
.footer-nav a { display: inline-flex; align-items: center; min-height: 36px; font-size: 12px; }
.footer-nav a:hover { color: var(--action); }
.footer-bottom { border-top: 1px solid #eae5df; padding-block: 22px 28px; display: flex; justify-content: space-between; gap: 24px; color: #85818a; font-size: 10px; }

/* Native, keyboard-accessible gallery dialog */
.lightbox { border: 0; padding: 18px 22px 22px; border-radius: 20px; background: #fffdfa; color: var(--ink); width: min(1050px, calc(100% - 40px)); max-height: calc(100dvh - 40px); overflow: auto; }
.lightbox::backdrop { background: #17152cdb; backdrop-filter: blur(6px); }
.lightbox-top { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-bottom: 10px; font-size: 11px; letter-spacing: .04em; }
.lightbox-close { width: 44px; height: 44px; border-radius: 50%; background: #f0eafa; font-size: 28px; line-height: 1; }
.lightbox-stage { position: relative; background: #eee9e2; border-radius: 12px; overflow: hidden; min-height: 80px; }
#lightbox-image { display: block; width: 100%; height: min(61vh, 650px); object-fit: contain; touch-action: pan-y; user-select: none; }
.lightbox-error { padding: 20px; }
.lightbox-controls { display: flex; align-items: center; justify-content: center; gap: 24px; margin-top: 14px; }
.lightbox-controls button { width: 44px; height: 44px; background: #f0eafa; border-radius: 50%; font-size: 22px; }
#lightbox-counter { font: 12px/1.5 Arial,sans-serif; color: #80758e; min-width: 40px; text-align: center; }
#lightbox-caption { font-size: 14px; font-weight: 600; text-align: center; margin: 10px auto 0; max-width: 760px; }
#lightbox-ai { font-size: 11px; text-align: center; color: #80778b; margin-top: 7px; }

/* Progressive motion. Only initialized by a working IntersectionObserver. */
.motion-ready .reveal { opacity: 0; transform: translateY(18px); transition: opacity .65s, transform .65s; }
.motion-ready .reveal.is-visible { opacity: 1; transform: translateY(0); }
.motion-ready .program-ticket { transform: rotate(2deg); }

@media (min-width: 901px) and (max-width: 1190px) {
  .container { width: calc(100% - 56px); }
  #main-nav { gap: 17px; }
  #main-nav a { font-size: 11px; }
  .brand-type { font-size: 21px; }
  .hero-layout { min-height: 650px; }
  .hero-copy { width: 490px; max-width: 54%; padding-block: 48px; }
  h1 { font-size: 43px; }
  .hero-lead { font-size: 18px; }
  .hero-buttons { gap: 14px; }
  .button { padding-inline: 19px; font-size: 13px; }
  .title-spark { right: 8px; width: 24px; }
  .split-layout,.inquiry-layout { gap: 45px; }
  .feature-card { padding: 24px 20px; }
  .feature-card h3 { font-size: 20px; }
  .heading-row { gap: 50px; }
  .learning-card { padding: 24px 22px 0; }
  .learning-card > p:not(.learning-hook) { min-height: 130px; }
  .learning-card .learning-hook { min-height: 50px; }
  .age-card { padding-inline: 22px; }
  .age-stage { font-size: 9px; padding-inline: 6px; }
  .age-card h3 { font-size: 23px; }
  .ensemble-copy { padding: 32px 28px; }
  .adoption-layout { gap: 55px; }
  .program-ticket { padding-inline: 27px; }
}
@media (max-width: 900px) {
  html { scroll-padding-top: 92px; }
  .container { width: calc(100% - 56px); }
  .section-space { padding-block: 78px; }
  .header-inner { height: 76px; }
  .menu-toggle { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 7px; border: 1px solid #e8deec; }
  .menu-toggle span { width: 20px; height: 2px; background: var(--ink); border-radius: 2px; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }
  #main-nav { display: none; position: absolute; top: 76px; left: 0; right: 0; padding: 14px 28px 22px; background: #fffdf9; border-bottom: 1px solid #e8e0ec; box-shadow: 0 10px 20px #33254d0d; max-height: calc(100dvh - 76px); overflow-y: auto; }
  #main-nav.is-open { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  #main-nav a { padding: 14px 8px; font-size: 14px; }
  #main-nav .nav-cta { padding: 13px 18px; margin-top: 9px; text-align: center; }
  .hero-scene { display: flex; flex-direction: column; }
  .hero-layout { order: 0; min-height: 0; padding-block: 42px; }
  .hero-copy { width: 630px; max-width: 100%; padding: 0; }
  h1 { font-size: 54px; }
  .title-spark { right: 90px; }
  .hero-overline { margin-top: 24px; }
  .hero-lead br { display: none; }
  .hero-description br { display: none; }
  .hero-buttons { margin-top: 24px; }
  .hero-signature { margin-top: 25px; }
  .hero-visual { order: 1; position: relative; inset: auto; width: 100%; }
  .hero-visual::after { display: none; }
  .hero-photo { position: relative; inset: auto; }
  .hero-photo img { height: auto; aspect-ratio: 1672 / 941; object-fit: contain; }
  .hero-sticker { display: none; }
  .split-layout { grid-template-columns: 1fr; gap: 45px; }
  .about-visual { max-width: 620px; width: 100%; margin-inline: auto; }
  .about-visual .section-kicker { margin-bottom: 22px; }
  .story-photo img { aspect-ratio: 1.4; object-fit: cover; }
  .about-copy h2 br { display: none; }
  .about-copy h2 { max-width: 530px; }
  .philosophy { gap: 15px; font-size: 14px; margin-top: 44px; }
  .feature-grid { grid-template-columns: repeat(2, 1fr); gap: 22px; }
  .feature-card { padding: 28px; }
  .feature-card h3 br { display: none; }
  .feature-card p { font-size: 15px; }
  .heading-row { gap: 30px; grid-template-columns: 1fr 1fr; }
  .heading-row > p { font-size: 14px; }
  .learning-grid { grid-template-columns: repeat(2, 1fr); }
  .learning-card { padding: 24px 24px 0; }
  .learning-card > p:not(.learning-hook) { min-height: 104px; }
  .learning-photos img { aspect-ratio: 4/3; }
  .learning-photos figcaption span { display: block; margin-bottom: 4px; }
  .flow-steps { grid-template-columns: repeat(2, 1fr); gap: 34px 38px; }
  .flow-steps li:nth-child(2)::after { display: none; }
  .story-example { grid-template-columns: .8fr 1.2fr; gap: 28px; padding: 28px; }
  .example-content dl { flex-direction: column; }
  .age-grid { gap: 14px; }
  .age-card { padding: 24px 18px; }
  .age-top { flex-direction: column; align-items: start; gap: 14px; }
  .age-stage { font-size: 10px; }
  .age-card h3 { font-size: 21px; }
  .age-card > p:not(.age-hook) { font-size: 13px; }
  .age-card .age-hook { font-size: 12px; min-height: 46px; }
  .age-card ul { font-size: 12px; }
  .ensemble-main { grid-template-columns: 1fr; }
  .ensemble-photo img { aspect-ratio: 1.6; height: auto; }
  .ensemble-copy { padding: 32px; }
  .ensemble-copy h3 br { display: none; }
  .ensemble-types { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
  .performance-row { gap: 22px; grid-template-columns: 1.1fr 1fr; }
  .performance-copy { padding: 10px 0; }
  .performance-copy h3 { font-size: 24px; }
  .performance-copy > p:not(.performance-notice) { font-size: 14px; }
  .performance-notice { padding: 14px; font-size: 12px; }
  .desktop-break { display: none; }
  .instrument-visual { max-width: 620px; width: 100%; margin-inline: auto; }
  .instrument-copy { margin-top: 10px; }
  .instrument-copy h2 br { display: none; }
  .instrument-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 28px; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .gallery-caption strong { font-size: 16px; }
  .adoption-layout { gap: 28px; grid-template-columns: 1.1fr 1fr; }
  .adoption h2 { font-size: 31px; }
  .adoption-copy > p:not(.section-kicker) { font-size: 14px; }
  .adoption .section-kicker { letter-spacing: .08em; font-size: 9px; }
  .program-ticket { padding: 28px 22px; }
  .ticket-heading { gap: 12px; font-size: 22px; }
  .ticket-heading .icon { width: 30px; }
  .program-ticket dl > div { grid-template-columns: 60px 1fr; gap: 8px; font-size: 11px; }
  .inquiry-layout { grid-template-columns: 1fr; gap: 36px; }
  .inquiry-copy { max-width: 620px; }
  .inquiry-copy > p br { display: none; }
  .inquiry-copy h2 br { display: none; }
  .inquiry-note { max-width: 480px; }
  .contact-illustration,.inquiry-copy > .inquiry-tagline { display: none; }
  .inquiry-form { padding: 34px; }
  .footer-top { gap: 28px; grid-template-columns: 1fr 1fr; }
  .footer-nav { grid-column: 1/-1; flex-direction: row; gap: 28px; }
  .footer-bottom { flex-direction: column; gap: 8px; }
}
@media (max-width: 600px) {
  .container { width: calc(100% - 40px); }
  .section-space { padding-block: 62px; }
  h2,.section-heading h2 { font-size: 29px; line-height: 1.48; }
  .section-kicker { font-size: 9px; letter-spacing: .12em; gap: 8px; margin-bottom: 18px; }
  .section-kicker > span { width: 25px; height: 25px; }
  .centered { margin-bottom: 34px; text-align: left; }
  .centered .section-kicker { justify-content: flex-start; }
  .section-heading > p:last-child:not(.section-kicker) { font-size: 14px; margin-top: 18px; }
  .section-heading > p br { display: none; }
  .heading-row { grid-template-columns: 1fr; gap: 18px; margin-bottom: 32px; }
  .heading-row > p { max-width: none; font-size: 14px; }
  .header-inner { height: 70px; }
  .brand { gap: 10px; }
  .brand-type { font-size: 21px; }
  .brand-type small { font-size: 8px; letter-spacing: .2em; }
  .brand-mark { width: 52px; height: 38px; }
  .brand-mark img { width: 59px; height: 59px; left: -4.4px; top: -10.8px; }
  #main-nav { top: 70px; padding-inline: 20px; max-height: calc(100dvh - 70px); }
  .menu-toggle { width: 42px; height: 42px; }
  .hero { padding-bottom: 23px; }
  .hero-layout { padding-block: 30px; }
  .hero-tag { font-size: 10px; padding: 5px 10px; }
  .hero-overline { font-size: 12px; margin: 24px 0 9px; }
  h1 { font-size: clamp(31px, 8.9vw, 47px); line-height: 1.43; letter-spacing: -.067em; }
  .title-spark { width: 22px; height: 22px; top: -20px; right: 5px; }
  .hero-lead { font-size: 17px; margin-top: 22px; }
  .hero-lead br { display: inline; }
  .hero-description { font-size: 13px; max-width: 330px; margin-top: 12px; }
  .hero-description br { display: inline; }
  .hero-buttons { gap: 16px; margin-top: 23px; }
  .hero-buttons .button { font-size: 12px; min-height: 49px; gap: 10px; }
  .hero-buttons .primary { padding-inline: 18px; }
  .hero-buttons .text-button { padding-inline: 0; }
  .hero-signature { font-size: 8px; gap: 8px; margin-top: 23px; }
  .hero-signature span { font-size: 10px; padding-left: 8px; }
  .hero-ai-label { font-size: 9px; right: 10px; bottom: 8px; }
  .hero-bottom { padding-top: 19px; }
  .hero-bottom p { font-size: 11px; }
  .scroll-cue { font-size: 0; gap: 0; }
  .scroll-cue span { width: 31px; height: 31px; }
  .split-layout { gap: 35px; }
  .story-photo img { border-radius: 60px 22px 22px 22px; aspect-ratio: 4/3; }
  .story-photo figcaption { margin: -18px 12px 0; padding: 14px; font-size: 11px; gap: 9px; }
  .about-copy > p { font-size: 14px; }
  .about-copy > .lead { font-size: 16px; }
  .quote-line { font-size: 16px; }
  .quote-line span { font-size: 12px; }
  .philosophy { gap: 10px 12px; font-size: 12px; padding: 20px 0; margin-top: 34px; }
  .philosophy span { flex-shrink: 0; }
  .philosophy-note { font-size: 11px; text-align: left; }
  .feature-grid { grid-template-columns: 1fr; gap: 16px; }
  .feature-card { padding: 25px; }
  .feature-top { margin-bottom: 16px; }
  .feature-top .icon { width: 30px; height: 30px; padding: 11px; border-radius: 16px; }
  .feature-card h3 { font-size: 21px; margin-bottom: 14px; }
  .feature-card p { font-size: 14px; }
  .feature-word { margin-top: 20px; }
  .learning-grid { grid-template-columns: 1fr; gap: 18px; }
  .learning-card { padding: 22px 24px 0; }
  .learning-card > p:not(.learning-hook) { min-height: 0; }
  .learning-card h3 { font-size: 23px; }
  .learning-card .learning-hook { font-size: 13px; }
  .learning-top { margin-bottom: 13px; }
  .learning-photos { grid-template-columns: 1fr; gap: 20px; margin-top: 30px; }
  .learning-photos img { aspect-ratio: 4/3; }
  .learning-photos figcaption { font-size: 13px; padding: 16px 20px; }
  .learning-photos figcaption span { display: inline-block; margin-right: 10px; }
  .fine-print { font-size: 12px; }
  .flow-steps { grid-template-columns: 1fr; gap: 27px; }
  .flow-steps li { padding-left: 75px; min-height: 115px; }
  .step-dot { position: absolute; left: 0; top: 4px; width: 50px; height: 50px; border-radius: 16px; }
  .flow-steps li:not(:last-child)::after { display: block; width: 0; height: calc(100% - 30px); border-top: 0; border-left: 2px dashed #dfd8e9; top: 68px; left: 25px; }
  .flow-steps h3 { font-size: 18px; margin-block: 5px 10px; }
  .flow-steps p { font-size: 14px; }
  .story-example { grid-template-columns: 1fr; gap: 21px; padding: 26px; margin-top: 27px; }
  .example-title { border-right: 0; border-bottom: 1px dashed #d7c6aa; padding-bottom: 21px; }
  .example-title h3 br { display: none; }
  .example-title h3 { font-size: 23px; }
  .example-title > p { margin-top: 10px; }
  .example-content > p:first-child { font-size: 13px; }
  .example-content dl { gap: 10px; }
  .age-grid { grid-template-columns: 1fr; padding-top: 0; gap: 20px; }
  .age-card { margin-top: 0; padding: 27px; }
  .age-top { flex-direction: row; align-items: center; }
  .age-card h3 { font-size: 24px; }
  .age-card h3 br { display: none; }
  .age-card .age-hook { min-height: 0; font-size: 13px; }
  .age-card > p:not(.age-hook) { font-size: 14px; }
  .age-card ul { font-size: 13px; margin-block: 20px; }
  .age-card li small { font-size: 11px; }
  .ensemble-main { border-radius: 22px; }
  .ensemble-photo img { aspect-ratio: 4/3; }
  .ensemble-photo figcaption { bottom: 14px; left: 14px; right: 14px; padding: 8px 12px; font-size: 10px; }
  .ensemble-copy { padding: 26px 24px; }
  .ensemble-copy h3 { font-size: 24px; }
  .ensemble-copy h3 br { display: inline; }
  .ensemble-types { grid-template-columns: 1fr; gap: 0; }
  .ensemble-types dd { font-size: 14px; }
  .performance-row { display: flex; flex-direction: column-reverse; gap: 19px; margin-top: 28px; }
  .performance-row > img { border-radius: 22px; }
  .performance-copy { padding: 8px 4px; }
  .performance-copy h3 { font-size: 25px; }
  .performance-notice { font-size: 12px; padding: 16px; }
  .ensemble-ending { font-size: 19px; padding-top: 30px; }
  .ensemble-ending strong { display: block; }
  .ensemble-ending span { font-size: 13px; }
  .instrument-visual figure { border-radius: 22px; }
  .instrument-visual figcaption { font-size: 12px; padding: 14px 20px; }
  .xylophone { right: -4px; bottom: -33px; gap: 4px; transform: rotate(12deg) scale(.8); transform-origin: right center; }
  .instrument-copy { margin-top: 14px; }
  .instrument-list { grid-template-columns: 1fr; }
  .instrument-copy > p:not(.fine-print) { font-size: 14px; }
  .gallery-grid { grid-template-columns: 1fr; gap: 26px; }
  .gallery-image { border-radius: 20px; }
  .gallery-caption { padding: 13px 3px 0; }
  .gallery-caption small { font-size: 9px; margin-bottom: 5px; }
  .gallery-caption strong { font-size: 16px; }
  .gallery-expand { width: 38px; height: 38px; bottom: 14px; right: 14px; }
  .ai-notice { font-size: 11px; }
  .adoption-layout { grid-template-columns: 1fr; gap: 44px; }
  .adoption h2 { font-size: 29px; }
  .adoption .section-kicker { font-size: 8px; }
  .program-ticket { margin-inline: 4px; padding: 28px; }
  .ticket-heading { font-size: 25px; gap: 18px; }
  .ticket-heading .icon { width: 38px; }
  .program-ticket dl > div { font-size: 12px; grid-template-columns: 63px 1fr; gap: 12px; }
  .inquiry-copy { padding-top: 0; }
  .inquiry-copy h2 br { display: inline; }
  .inquiry-copy > p:not(.section-kicker) { font-size: 14px; }
  .inquiry-note { padding: 17px; margin-top: 24px; gap: 9px; }
  .inquiry-note strong { font-size: 12px; }
  .inquiry-note p { font-size: 11px; }
  .inquiry-form { padding: 26px 20px; border-radius: 22px; }
  .form-row { grid-template-columns: 1fr; gap: 0; }
  .field input,.field textarea { font-size: 16px; }
  .field input::placeholder,.field textarea::placeholder { font-size: 13px; }
  .consent-label { gap: 7px; font-size: 11px; }
  .consent-label input { margin-left: 0; width: 17px; height: 17px; }
  .consent-label small { font-size: 10px; }
  #privacy-notice,#form-status { font-size: 10px; }
  .footer-top { grid-template-columns: 1fr; gap: 29px; padding-block: 37px; }
  .footer-nav { flex-direction: column; gap: 4px; }
  .footer-bottom { font-size: 10px; padding-block: 20px 28px; }
  .lightbox { width: calc(100% - 20px); padding: 10px 12px 18px; border-radius: 16px; max-height: calc(100dvh - 20px); }
  .lightbox-top { font-size: 9px; }
  #lightbox-image { height: auto; max-height: 57dvh; min-height: 150px; }
  #lightbox-caption { font-size: 12px; }
  #lightbox-ai { font-size: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *,*::before,*::after { animation: none !important; transition: none !important; }
  .motion-ready .reveal { opacity: 1; transform: none; }
}
@media print {
  .site-header,.hero-buttons,.scroll-cue,.menu-toggle,.inquiry-form,.lightbox,.footer-nav { display: none !important; }
  .container { width: 100%; }
  .section-space { padding-block: 30px; }
  .reveal { opacity: 1 !important; transform: none !important; }
  .hero { padding-top: 0; }
  .age-card,.learning-card,.feature-card { break-inside: avoid; }
}

/* Compact horizontal hero: copy left, artwork right. */
@media screen and (max-width:900px){.hero-scene{display:block}.hero-layout{min-height:clamp(370px,78vw,650px);padding-block:6vw;width:92%}.hero-copy{width:62%;max-width:62%;padding:0}.hero-visual{position:absolute;inset:0;width:100%;height:100%}.hero-photo{position:absolute;inset:0}.hero-photo img{width:100%;height:100%;aspect-ratio:auto;object-fit:cover;object-position:65% center}.hero-visual::after{display:block}.hero h1{font-size:clamp(20px,4.6vw,42px);white-space:nowrap;line-height:1.42}.hero-tag{font-size:clamp(7px,1.2vw,10px);padding:4px 6px;gap:4px}.hero-overline{font-size:clamp(9px,1.6vw,14px);margin:3vw 0 1.5vw}.hero-lead{font-size:clamp(11px,2vw,18px);margin-top:3vw}.hero-description{font-size:clamp(9px,1.55vw,14px);margin-top:2vw}.hero-lead br,.hero-description br{display:initial}.hero-buttons{gap:8px;margin-top:3vw;white-space:nowrap}.hero-buttons .button{font-size:clamp(9px,1.4vw,12px);min-height:38px;padding:9px 8px;gap:5px}.hero-buttons .primary{padding-inline:8px}.hero-buttons .icon{width:12px;height:12px}.hero-signature{font-size:7px;margin-top:3vw;gap:5px;flex-wrap:wrap}.hero-signature span{font-size:8px}.hero .title-spark{width:18px;height:18px}.hero-sticker{display:none}}