/* PerlaMusic — musical programme, pearl, silver and blue. See BRAND_IDENTITY.md. */
:root {
  --paper:#f5f3ed; --ink:#092a43; --blue:#063b66; --red:var(--blue); --red-dark:#032947;
  --silver:#c4d0d6; --muted:#526571; --line:#bdcbd1; --soft:#e7ecec; --white:#fff; --whatsapp:#176b4b;
  --sans:'Source Sans 3','Segoe UI',sans-serif; --display:'Barlow Condensed','Arial Narrow',sans-serif;
  --max:1280px; --ease:cubic-bezier(.22,.61,.36,1);
}
* { box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-padding-top:110px; }
body { margin:0; background:var(--paper); color:var(--ink); font:400 17px/1.65 var(--sans); -webkit-font-smoothing:antialiased; }
body:has(dialog[open]) { overflow:hidden; }
button,input,select,textarea { font:inherit; }
button,a,input,select,textarea { -webkit-tap-highlight-color:transparent; }
button,summary { cursor:pointer; }
button { color:inherit; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
.responsive-picture { display:block; min-width:0; }
.course-img .responsive-picture { height:100%; }
svg { display:inline-block; vertical-align:middle; flex-shrink:0; }
p { margin:0 0 1.2em; }
h1,h2,h3,h4 { margin:0; font-family:var(--display); font-weight:600; line-height:1.05; letter-spacing:.005em; }
h1 { font-size:clamp(60px,6.5vw,90px); } h2 { font-size:clamp(40px,4.3vw,58px); } h3 { font-size:30px; }
em { font:inherit; font-style:normal; color:var(--blue); }
::selection { background:var(--blue); color:white; }
:where(a,button,summary,input,select,textarea):focus-visible { outline:3px solid #3876a5; outline-offset:4px; }
.wrap { width:100%; max-width:var(--max); margin-inline:auto; padding-inline:48px; }
.icon { width:20px; height:20px; }
.muted { color:var(--muted); } .hidden { display:none!important; }
/* Explicit replacements for the former inline spacing attributes. */
.mt-25 { margin-top:25px!important; }
.mt-26 { margin-top:26px!important; }
.mt-0 { margin-top:0!important; }
.legal-note,.formnotice,.form-notice { color:var(--muted); font-size:14px; line-height:1.6; overflow-wrap:anywhere; }
.legal-note a,.formnotice a,.form-notice a { color:var(--blue); text-decoration:underline; text-underline-offset:3px; }
.eyebrow { display:flex; align-items:center; gap:12px; margin-bottom:18px; font-size:12px; font-weight:600; line-height:1.4; letter-spacing:.14em; text-transform:uppercase; color:var(--blue); }
.eyebrow::before { content:''; width:25px; height:5px; border-block:1px solid currentColor; flex-shrink:0; }
.eyebrow.light { color:var(--silver); }
.section { padding-block:92px; }
.section-head { display:flex; justify-content:space-between; align-items:flex-end; gap:40px; margin-bottom:38px; }
.section-head h2 { max-width:650px; }
.section-head p { max-width:340px; color:var(--muted); font-size:16px; margin:0 0 3px; }
.rule { border-bottom:1px solid var(--line); }
.actions { display:flex; align-items:center; gap:25px; flex-wrap:wrap; }
.btn { display:inline-flex; align-items:center; justify-content:center; gap:14px; min-height:50px; padding:13px 22px; background:var(--blue); border:1px solid var(--blue); border-radius:3px; color:white; font:600 16px/1.25 var(--sans); transition:background .2s,border-color .2s,transform .2s var(--ease); }
.btn:hover { background:var(--red-dark); border-color:var(--red-dark); transform:translateY(-2px); }
.btn:active { transform:translateY(0); }
.btn .icon { transition:transform .2s var(--ease); } .btn:hover .icon { transform:translate(2px,-1px); }
.btn.small { min-height:46px; padding:11px 18px; font-size:15px; }
.btn.outline { background:transparent; border-color:var(--blue); color:var(--blue); }
.btn.outline:hover { background:var(--soft); }
.btn.dark { background:var(--ink); border-color:var(--ink); }
.btn.cream { background:var(--paper); color:var(--blue); border-color:var(--paper); }
.btn.cream:hover { background:white; }
.btn.whatsapp,.btn[data-message-whatsapp],.btn[data-result-whatsapp] { background:var(--whatsapp); border-color:var(--whatsapp); color:white; }
.btn.whatsapp:hover,.btn[data-message-whatsapp]:hover,.btn[data-result-whatsapp]:hover { background:#10573c; border-color:#10573c; }
.whatsapp-icon { width:23px; height:23px; flex-shrink:0; object-fit:contain; }
.text-link { display:inline-flex; align-items:center; gap:14px; padding-block:5px; border-bottom:1px solid currentColor; font-size:16px; font-weight:600; line-height:1.4; transition:color .18s; }
.text-link .icon { transition:transform .2s var(--ease); } .text-link:hover { color:var(--blue); } .text-link:hover .icon { transform:translate(2px,-2px); }
.skip-link { position:fixed; left:12px; top:-80px; background:var(--ink); color:white; padding:12px; z-index:100; } .skip-link:focus { top:10px; }

/* The authentic round mark leads the masthead. */
.top-note { background:var(--blue); color:white; padding:5px 16px; text-align:center; font-size:11px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.top-note span { padding-inline:12px; color:var(--silver); } .mobile-top-note { display:none; }
.header { position:sticky; top:0; z-index:30; background:white; border-bottom:1px solid var(--line); }
.header-inner { height:94px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.wordmark { display:inline-flex; align-items:center; gap:13px; line-height:1; flex-shrink:0; }
.official-logo { width:74px; height:74px; object-fit:contain; background:transparent; padding:0; border-radius:0; }
.wordmark-name { font:700 33px/1 var(--display); letter-spacing:.015em; color:var(--blue); }
.wordmark-name b { font-weight:700; }
.wordmark-sub { display:block; margin-top:7px; font:600 9px/1.3 var(--sans); letter-spacing:.13em; text-transform:uppercase; }
.desktop-nav { display:flex; align-items:center; gap:27px; }
.desktop-nav a { position:relative; padding-block:12px; font-size:15px; font-weight:600; }
.desktop-nav a::after { content:''; position:absolute; bottom:7px; left:0; width:100%; height:1px; background:var(--blue); transform:scaleX(0); transform-origin:left; transition:transform .18s; }
.desktop-nav a:hover::after,.desktop-nav a[aria-current]::after { transform:scaleX(1); }
.header-actions { display:flex; align-items:center; gap:10px; } .header-phone { display:none; }
.menu-trigger { display:none; width:44px; height:44px; padding:10px; border:1px solid var(--blue); background:white; border-radius:50%; color:var(--blue); }

/* Home: a musical poster, real photographs and useful directions. */
.hero { overflow:clip; padding:45px 0 48px; }
.hero-grid { display:grid; grid-template-columns:.88fr 1.12fr; gap:70px; align-items:center; }
.hero-copy { position:relative; z-index:1; padding-block:18px; }
.hero h1 { font-size:clamp(60px,6.2vw,84px); line-height:.98; text-transform:uppercase; font-weight:700; margin-bottom:25px; letter-spacing:-.01em; }
.hero h1 em { display:block; color:var(--blue); }
.hero-lead { font-size:19px; line-height:1.55; color:var(--muted); margin-bottom:25px; }
.hero-lead strong { color:var(--ink); font-weight:600; }
.home-course-shortcuts { display:flex; gap:11px; margin-bottom:12px; }
.home-course-shortcut { display:inline-flex; align-items:center; justify-content:space-between; gap:13px; padding:13px 17px; min-height:51px; background:var(--blue); color:white; border:1px solid var(--blue); border-radius:3px; font-size:16px; font-weight:600; transition:background .2s,transform .2s var(--ease); }
.home-course-shortcut + .home-course-shortcut { background:transparent; color:var(--blue); }
.home-course-shortcut:hover { transform:translateY(-2px); background:var(--red-dark); color:white; }
.home-course-shortcut > .icon { width:17px; height:17px; }
.hero-practical { display:grid; gap:0; margin-top:8px; }
.hero-practical a { display:inline-flex; width:fit-content; align-items:center; gap:10px; min-height:40px; font-size:15px; color:var(--muted); }
.hero-practical .icon { width:18px; height:18px; color:var(--blue); }
.hero-practical a:hover { color:var(--blue); text-decoration:underline; text-underline-offset:4px; }
.hero-art { position:relative; isolation:isolate; margin:30px 0; }
.hero-orbit { position:absolute; width:460px; aspect-ratio:1; border:39px solid var(--silver); border-right-color:transparent; border-radius:50%; left:56%; top:50%; transform:translate(-50%,-50%) rotate(-28deg); z-index:-1; opacity:.78; }
.hero-orbit::before { content:''; position:absolute; inset:-53px; border:1px solid #9db3c0; border-right-color:transparent; border-radius:50%; }
.hero-orbit::after { content:''; position:absolute; inset:12px; border:1px solid #9db3c0; border-radius:50%; }
.hero-photo-frame { margin:0; background:white; padding:10px; border:1px solid var(--blue); box-shadow:8px 8px 0 #063b6612; transform:rotate(-2deg); }
.hero-photo { width:100%; height:auto; aspect-ratio:16/9; object-fit:cover; }
.hero-overlay { display:flex; justify-content:space-between; align-items:center; gap:18px; padding:13px 3px 3px; font-size:11px; font-weight:600; color:var(--blue); line-height:1.4; letter-spacing:.06em; text-transform:uppercase; }
.hero-overlay .icon { width:25px; height:25px; }
.hero-photo-label { display:flex; justify-content:space-between; gap:20px; margin:26px 0 0; font:600 16px/1 var(--display); text-transform:uppercase; letter-spacing:.13em; color:var(--blue); }
.hero-photo-label::before { content:''; width:46px; height:1px; align-self:center; background:var(--blue); }
.hero-photo-label span { flex:1; }
.hero-bottom { display:flex; align-items:center; justify-content:space-between; margin-top:34px; padding-top:19px; border-top:3px double var(--line); color:var(--muted); font-size:14px; }
.hero-bottom a { display:inline-flex; align-items:center; gap:10px; }
.manifesto { background:var(--blue); color:white; padding:24px 0; border-block:6px double #bccbd5; }
.manifesto .wrap { display:flex; align-items:center; justify-content:space-between; gap:25px; }
.manifesto p { margin:0; font:600 38px/1.15 var(--display); text-transform:uppercase; letter-spacing:.025em; }
.manifesto p em { color:white; } .manifesto .sparkle { width:34px; height:34px; }
.manifesto small { font-size:15px; color:#e0e8ed; }

/* Course panels borrow the proportions of printed programmes. */
.course-grid { display:grid; grid-template-columns:1fr 1fr; gap:28px; }
.course-card { display:block; position:relative; border:1px solid var(--line); border-top:4px solid var(--blue); background:white; border-radius:2px; overflow:hidden; transition:border-color .2s,box-shadow .2s; }
.course-card:hover { border-color:var(--blue); box-shadow:5px 5px 0 #063b660d; }
.course-img { overflow:hidden; position:relative; }
.course-img img { width:100%; height:255px; object-fit:cover; transition:transform .6s var(--ease); }
.course-card:hover .course-img img { transform:scale(1.025); }
.course-tag { position:absolute; top:17px; left:17px; background:var(--paper); padding:5px 12px; font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:.12em; color:var(--blue); }
.course-body { padding:25px 28px 28px; }
.course-body-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:12px; }
.course-body-head h3 { font-size:40px; color:var(--blue); }
.course-body p { color:var(--muted); margin:0; font-size:16px; max-width:400px; }
.circle-arrow { width:40px; height:40px; flex-shrink:0; display:grid; place-items:center; border:1px solid var(--blue); border-radius:50%; color:var(--blue); transition:color .2s,background .2s; }
.course-card:hover .circle-arrow { color:white; background:var(--blue); }
.course-bottom { display:flex; align-items:center; justify-content:space-between; gap:25px; margin-top:25px; padding-top:24px; border-top:1px solid var(--line); font-size:16px; color:var(--muted); }
.course-bottom button { flex-shrink:0; }
.activity-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px; margin-top:28px; }
.activity-card { display:flex; flex-direction:column; align-items:flex-start; min-width:0; padding:28px; border:1px solid var(--line); border-top:4px double var(--blue); background:var(--soft); }
.activity-card .eyebrow { margin-bottom:15px; font-size:10px; }
.activity-card h3 { font-size:34px; color:var(--blue); }
.activity-card p { color:var(--muted); margin:18px 0 20px; font-size:16px; }
.activity-card .text-link { margin-top:auto; }
.approach { background:var(--soft); border-block:1px solid var(--line); }
.approach-grid { display:grid; grid-template-columns:.85fr 1.15fr; gap:90px; align-items:center; }
.approach h2 { margin-bottom:24px; }
.approach-copy { color:var(--muted); max-width:550px; }
.approach-points { display:grid; grid-template-columns:1fr 1fr; gap:30px; margin:28px 0; }
.approach-points .point-no { display:block; font:600 32px/1 var(--display); color:var(--blue); margin-bottom:10px; }
.approach-points h3 { font-size:25px; margin-bottom:9px; }
.approach-points p { font-size:15px; color:var(--muted); margin:0; }
.school-photo { margin:0; padding:10px; background:white; border:1px solid var(--line); box-shadow:7px 7px 0 #063b6610; }
.school-photo img { width:100%; height:330px; object-fit:cover; }
.school-photo figcaption { padding:15px 10px 8px; }
.school-photo figcaption span { display:block; font:600 27px/1.2 var(--display); }
.school-photo figcaption small { font-size:10px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted); }
.stage-grid { display:grid; grid-template-columns:1.1fr .9fr; gap:65px; align-items:center; }
.stage-copy h2 { margin-bottom:23px; } .stage-copy > p { color:var(--muted); max-width:460px; }
.recordings { border-top:3px double var(--line); margin-top:30px; }
.recording-row { display:flex; align-items:center; gap:18px; padding:17px 0; border-bottom:1px solid var(--line); }
.recording-row[hidden] { display:none; }
.recording-play,.recording-external { width:46px; height:46px; display:grid; place-items:center; flex-shrink:0; color:var(--blue); }
.recording-play { border:1px solid var(--blue); background:transparent; border-radius:50%; transition:background .2s,color .2s; }
.recording-play:hover { background:var(--blue); color:white; } .recording-play .icon { width:17px; height:17px; }
.recording-name { flex:1; min-width:0; }
.recording-name strong { display:block; font-weight:600; font-size:17px; line-height:1.35; }
.recording-name span { display:block; font-size:14px; margin-top:3px; color:var(--muted); }
.recording-type { font-size:13px; color:var(--muted); } .stage-copy .recording-type { display:none; }
.listening-poster { position:relative; background:var(--blue); color:white; border:1px solid var(--blue); overflow:hidden; padding:9px; }
.listening-banner { display:none; }
.listening-poster-content { position:relative; border:1px solid #bdcbd57a; padding:32px; min-height:430px; overflow:hidden; }
.listening-poster h3 { position:relative; z-index:1; font-size:60px; text-transform:uppercase; max-width:320px; }
.listening-poster h3 em { color:var(--silver); }
.listening-poster .text-link { position:relative; z-index:1; color:white; margin-top:92px; }
.vinyl-small { position:absolute; width:250px; height:250px; right:-85px; bottom:40px; border-radius:50%; border:38px solid #8ca7b6; outline:1px solid #aac0cc; outline-offset:14px; display:grid; place-items:center; }
.vinyl-small span { display:grid; place-items:center; width:64px; height:64px; border:1px solid #aac0cc; border-radius:50%; }
.stage-poster { position:relative; display:flex; flex-direction:column; justify-content:space-between; min-height:460px; background:var(--blue); color:white; padding:32px; overflow:hidden; border:10px double var(--silver); }
.stage-poster::before { content:''; width:340px; height:340px; position:absolute; border:28px solid #c4d0d633; border-radius:50%; right:-120px; bottom:-35px; }
.poster-top,.poster-bottom { display:flex; align-items:center; justify-content:space-between; gap:15px; font-size:11px; letter-spacing:.12em; text-transform:uppercase; position:relative; }
.poster-title { font:600 62px/.98 var(--display); text-transform:uppercase; position:relative; }
.poster-title em { color:var(--silver); } .poster-bars { display:none; }

/* Socials, answers and the closing invitation. */
.social-section { background:var(--soft); border-block:1px solid var(--line); }
.social-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }
.social-card { display:flex; align-items:flex-start; gap:16px; border-top:3px double var(--line); padding-top:24px; }
.social-card .social-icon { width:29px; height:29px; flex-shrink:0; margin-top:3px; }
.social-card h3 { font-size:30px; margin-bottom:7px; }
.social-card span { font-size:14px; color:var(--blue); }
.social-card p { font-size:15px; color:var(--muted); margin:12px 0 0; }
.social-card > .icon { margin-left:auto; width:17px; height:17px; }
.social-card:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.faq-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:80px; }
.faq-intro p { margin-top:25px; color:var(--muted); font-size:16px; }
.faq-list { border-top:3px double var(--line); }
.faq-list details { border-bottom:1px solid var(--line); }
.faq-list summary { list-style:none; position:relative; padding:22px 35px 22px 0; font-size:17px; font-weight:600; line-height:1.5; }
.faq-list summary::-webkit-details-marker { display:none; }
.faq-list summary::after { content:'+'; position:absolute; right:3px; top:17px; font-size:28px; font-weight:400; color:var(--blue); }
.faq-list details[open] summary::after { content:'−'; }
.faq-list details p { color:var(--muted); font-size:16px; padding-right:25px; }
.faq-list details p a { text-decoration:underline; text-underline-offset:3px; }
.contact-banner { position:relative; background:var(--blue); color:white; padding-block:60px; border-top:6px double var(--silver); overflow:hidden; }
.contact-banner::before { content:''; width:320px; height:320px; border:36px solid #c4d0d61a; border-radius:50%; position:absolute; right:15%; top:-70px; pointer-events:none; }
.contact-banner .wrap { position:relative; display:flex; align-items:center; justify-content:space-between; gap:40px; }
.contact-banner h2 { font-size:clamp(42px,4.7vw,64px); } .contact-banner em { color:var(--silver); }
.contact-banner p { color:#dae3e8; margin:20px 0 0; font-size:17px; } .contact-banner .btn { flex-shrink:0; }
.footer { padding:54px 0 25px; background:var(--ink); color:white; }
.footer-top { display:grid; grid-template-columns:1.3fr 1fr 1fr; gap:48px; padding-bottom:42px; }
.footer .wordmark-name { color:white; } .footer .official-logo { border-radius:0; padding:0; background:transparent; }
.footer .legal-note { color:var(--silver); }
.footer .legal-note a { color:white; }
.footer .wordmark-sub { color:var(--silver); }
.footer-brand p { margin-top:22px; font-size:15px; color:#bdccd5; }
.footer h3 { font-family:var(--sans); font-weight:600; font-size:12px; line-height:1.5; letter-spacing:.1em; text-transform:uppercase; color:#bdccd5; margin:9px 0 19px; }
.footer-links { display:flex; flex-direction:column; gap:12px; font-size:15px; }
.footer-links a:hover { text-decoration:underline; text-underline-offset:4px; }
.footer-bottom { display:flex; align-items:center; justify-content:space-between; gap:20px; padding-top:22px; border-top:1px solid #547084; color:#bdccd5; font-size:12px; }
.footer-bottom-links { display:flex; flex-wrap:wrap; gap:10px 22px; font-size:13px; }
.footer-bottom-links a { display:inline-flex; align-items:center; min-height:44px; }
.mobile-cta { display:none; }

/* Dialogs retain native focus management and clear controls. */
.icon-btn { display:grid; place-items:center; width:44px; height:44px; flex-shrink:0; border:1px solid var(--blue); background:transparent; border-radius:50%; color:var(--blue); }
.menu-dialog { position:fixed; inset:0; margin:0; border:0; background:var(--paper); color:var(--ink); width:100%; max-width:100%; height:100dvh; max-height:100dvh; padding:24px; }
.dialog-top { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:30px; }
.menu-links { display:flex; flex-direction:column; font:600 38px/1.2 var(--display); }
.menu-links a { padding:15px 0; border-bottom:1px solid var(--line); }
.menu-dialog > .btn { margin-top:28px; } .menu-bottom { margin-top:28px; color:var(--muted); font-size:16px; }
.finder-dialog { padding:0; border:1px solid var(--blue); border-radius:3px; background:var(--paper); color:var(--ink); max-width:560px; width:calc(100% - 32px); max-height:calc(100dvh - 32px); overflow:auto; }
.finder-dialog::backdrop,.media-dialog::backdrop { background:#092a43c4; }
.finder-inner { padding:32px; }
.finder-top { display:flex; align-items:center; justify-content:space-between; gap:18px; margin-bottom:23px; }
.finder-top .eyebrow { font-size:11px; margin:0; }
.progress-dots { display:flex; gap:5px; } .progress-dots span { width:30px; height:3px; background:var(--silver); } .progress-dots .active { background:var(--blue); }
.finder-dialog h2 { font-size:44px; margin-bottom:16px; } .finder-dialog h2:focus { outline:none; }
.finder-dialog p { font-size:16px; color:var(--muted); }
.choice-list { display:grid; gap:10px; margin-block:24px; }
.choice { width:100%; padding:15px 17px; border:1px solid var(--line); background:white; border-radius:2px; display:flex; align-items:center; gap:14px; font-size:16px; text-align:left; line-height:1.4; transition:border-color .2s,background .2s; }
.choice .icon { color:var(--blue); } .choice .arrow-right { margin-left:auto; }
.choice:hover { border-color:var(--blue); background:var(--soft); }
.finder-footer { display:flex; justify-content:space-between; align-items:center; margin-top:22px; color:var(--muted); font-size:13px; }
.back-btn { display:flex; align-items:center; gap:8px; min-height:44px; border:0; background:transparent; padding:8px 0; font-size:15px; }
.finder-result { margin-block:24px; padding:20px; border-block:3px double var(--line); }
.finder-result p { margin:0; } .finder-result b { color:var(--ink); }
.finder-result .eyebrow { font-size:11px; margin-bottom:12px; }
.finder-dialog .actions { gap:16px; } .finder-dialog .actions .btn { flex:1; }
.finder-note { font-size:13px!important; margin-top:20px!important; }
.media-dialog { width:calc(100% - 32px); max-width:900px; max-height:calc(100dvh - 32px); overflow:auto; padding:0; border:1px solid var(--blue); border-radius:3px; background:var(--paper); color:var(--ink); }
.media-top { padding:22px 25px; display:flex; align-items:center; justify-content:space-between; gap:25px; }
.media-top h2 { font-size:32px; line-height:1.15; } .media-top .eyebrow { font-size:10px; margin-bottom:10px; }
.video-frame { position:relative; aspect-ratio:16/9; display:grid; place-items:center; background:var(--ink); color:var(--silver); }
.video-frame iframe { position:absolute; width:100%; height:100%; inset:0; border:0; } .video-frame p { font-size:15px; }
.media-bottom { display:flex; justify-content:space-between; align-items:center; gap:20px; padding:20px 25px; color:var(--muted); font-size:13px; }
.media-bottom .text-link { font-size:14px; flex-shrink:0; }

/* Brief, one-time motion. Useful information is never initially hidden by JS. */
.reveal { opacity:1; transform:none; }
.js .reveal { transition:opacity .55s var(--ease),transform .55s var(--ease); }
.js .reveal.waiting { opacity:0; transform:translateY(10px); }
@keyframes title-enter { from { transform:translateY(6px); opacity:.65; } to { transform:none; opacity:1; } }
@keyframes photo-enter { from { transform:rotate(-2deg) translateY(8px); opacity:.7; } to { transform:rotate(-2deg); opacity:1; } }
@media (prefers-reduced-motion:no-preference) {
  .hero h1 { animation:title-enter .5s var(--ease) both; }
  .hero-photo-frame { animation:photo-enter .65s var(--ease) both; }
  dialog[open] { animation:title-enter .22s var(--ease) both; }
}

@media (max-width:1100px) {
  .wrap { padding-inline:32px; } .header-inner { gap:20px; }
  .desktop-nav { gap:20px; } .desktop-nav a { font-size:14px; }
  .header-actions .btn { padding-inline:14px; font-size:14px; }
  .wordmark-name { font-size:29px; } .wordmark-sub { font-size:8px; } .official-logo { width:64px; height:64px; }
  .hero-grid { gap:45px; } .hero h1 { font-size:6.2vw; }
  .hero-orbit { width:370px; border-width:28px; } .hero-lead { font-size:17px; }
  .home-course-shortcut { font-size:15px; padding-inline:13px; gap:8px; }
  .approach-grid,.stage-grid,.faq-grid { gap:45px; }
  .listening-poster-content { padding:27px; } .listening-poster h3 { font-size:52px; } .footer-top { gap:35px; }
}
@media (max-width:940px) {
  .desktop-nav { display:none; } .menu-trigger { display:grid; place-items:center; } .header-actions { gap:18px; }
  .hero-grid { grid-template-columns:1fr 1fr; gap:30px; } .hero-orbit { width:300px; }
  .hero-photo-label { font-size:14px; } .hero-practical a { font-size:14px; }
  .home-course-shortcuts { gap:8px; } .home-course-shortcut { padding-inline:12px; } .home-course-shortcut .icon { display:none; }
  .manifesto p { font-size:33px; } .manifesto small { font-size:13px; }
  .social-grid { gap:20px; } .social-card { gap:10px; } .social-card h3 { font-size:26px; }
}
@media (max-width:700px) {
  html { scroll-padding-top:90px; scroll-padding-bottom:calc(90px + env(safe-area-inset-bottom)); }
  body { font-size:16px; } .wrap { padding-inline:22px; }
  h1 { font-size:clamp(46px,11.8vw,72px); line-height:1.04; }
  h2 { font-size:clamp(36px,9.2vw,48px); line-height:1.08; } h3 { font-size:28px; }
  .section { padding-block:54px; }
  .eyebrow { font-size:10px; letter-spacing:.12em; gap:10px; margin-bottom:15px; } .eyebrow::before { width:20px; }
  .section-head { display:block; margin-bottom:27px; }
  .section-head p { max-width:none; margin-top:19px; font-size:16px; }
  .btn { font-size:16px; min-height:48px; padding:13px 18px; } .btn.small { font-size:15px; min-height:46px; }
  .text-link { font-size:15px; }
  .top-note,.header-phone,.header-actions > .btn { display:none; }
  .header-inner { height:78px; gap:10px; padding-inline:18px; }
  .official-logo { width:62px; height:62px; } .wordmark { gap:10px; }
  .wordmark-name { font-size:28px; letter-spacing:.01em; }
  .wordmark-sub { display:block; font-size:7.5px; letter-spacing:.085em; margin-top:5px; } .header-actions { gap:0; }
  .hero { padding:20px 0 29px; } .hero-grid { display:grid; grid-template-columns:1fr; gap:19px; } .hero-copy { padding:0; }
  .hero .eyebrow { margin-bottom:10px; }
  .hero h1 { font-size:clamp(45px,12vw,72px); line-height:.98; margin-bottom:13px; }
  .hero-lead { font-size:16px; line-height:1.5; margin-bottom:17px; }
  .home-course-shortcuts { gap:10px; margin-bottom:3px; }
  .home-course-shortcut { flex:1; min-width:0; min-height:48px; font-size:16px; gap:10px; padding:12px 14px; }
  .home-course-shortcut .icon { display:block; width:16px; height:16px; }
  .hero-practical { margin:0; }
  .hero-practical a { min-height:44px; width:100%; font-size:14px; }
  .hero-practical a + a { display:none; } .hero-practical .icon { width:16px; height:16px; }
  .hero-art { margin:0; }
  .hero-orbit { width:260px; border-width:22px; left:73%; top:51%; opacity:.5; }
  .hero-orbit::before { inset:-33px; } .hero-orbit::after { inset:9px; }
  .hero-photo-frame { padding:6px; box-shadow:4px 4px 0 #063b6612; transform:none; }
  .hero-photo { aspect-ratio:16/9; height:auto; }
  .hero-overlay { padding:9px 3px 3px; font-size:8.5px; letter-spacing:.025em; gap:9px; }
  .hero-overlay .icon { width:18px; height:18px; }
  .hero-photo-label,.hero-bottom { display:none; }
  .manifesto { padding-block:18px; border-block-width:4px; }
  .manifesto .wrap { justify-content:center; gap:13px; }
  .manifesto p { font-size:clamp(24px,6.6vw,34px); letter-spacing:.01em; } .manifesto .sparkle { width:22px; height:22px; } .manifesto small { display:none; }
  .course-grid { grid-template-columns:1fr; gap:20px; }
  .activity-grid { grid-template-columns:1fr; gap:20px; margin-top:20px; }
  .activity-card { padding:23px; }
  .activity-card h3 { font-size:30px; }
  .activity-card p { font-size:15px; }
  .course-card { display:grid; grid-template-columns:105px minmax(0,1fr); border-top-width:1px; border-left:4px solid var(--blue); }
  .course-img img { height:100%; min-height:188px; } .course-tag { display:none; }
  .course-body { padding:20px 18px; } .course-body-head { margin-bottom:10px; gap:10px; }
  .course-body-head h3 { font-size:32px; line-height:1; } .course-body-head .circle-arrow { display:none; }
  .course-body p { font-size:15px; line-height:1.55; }
  .course-bottom { align-items:flex-start; flex-direction:column; gap:17px; margin-top:22px; padding-top:20px; font-size:15px; }
  .course-bottom .btn { min-height:46px; }
  .approach-grid,.stage-grid,.faq-grid { grid-template-columns:1fr; gap:35px; }
  .approach-grid > .school-photo { order:2; } .approach h2 { margin-bottom:22px; } .approach-copy { font-size:16px; }
  .approach-points { gap:22px; margin-block:24px; } .approach-points h3 { font-size:24px; }
  .approach-points p { font-size:14px; } .approach-points .point-no { font-size:29px; }
  .school-photo img { height:auto; aspect-ratio:16/10; } .school-photo figcaption span { font-size:26px; } .school-photo figcaption small { font-size:9px; }
  .stage-copy > p { font-size:16px; }
  .recordings { margin-top:24px; } .recording-row { gap:12px; padding-block:15px; }
  .recording-name strong { font-size:16px; } .recording-name span { font-size:13px; }
  .recording-play,.recording-external { width:44px; height:44px; } .recording-type { display:none; }
  .listening-poster-content { min-height:355px; padding:25px; } .listening-poster h3 { font-size:48px; }
  .listening-poster .text-link { margin-top:65px; }
  .vinyl-small { width:210px; height:210px; border-width:28px; right:-85px; bottom:20px; }
  .stage-poster { min-height:390px; padding:25px; } .poster-title { font-size:53px; } .poster-top,.poster-bottom { font-size:9px; }
  .social-grid { grid-template-columns:1fr; gap:25px; } .social-card { gap:18px; padding-top:22px; }
  .social-card h3 { font-size:29px; } .social-card span,.social-card p { font-size:14px; } .social-card p { margin-top:6px; }
  .faq-grid { gap:25px; } .faq-intro p { margin-top:18px; margin-bottom:0; }
  .faq-list summary { font-size:16px; padding-block:20px; } .faq-list details p { font-size:15px; padding-right:10px; }
  .contact-banner { padding-block:42px; } .contact-banner .wrap { display:block; }
  .contact-banner h2 { font-size:clamp(38px,10.3vw,49px); } .contact-banner p { font-size:16px; } .contact-banner .btn { margin-top:25px; }
  .footer { padding:40px 0 calc(105px + env(safe-area-inset-bottom)); }
  .footer-top { grid-template-columns:1fr 1fr; gap:30px 22px; padding-bottom:30px; } .footer-brand { grid-column:1/-1; }
  .footer-brand p { margin-top:18px; font-size:15px; } .footer h3 { font-size:10px; margin-bottom:15px; letter-spacing:.06em; }
  .footer-links { font-size:14px; gap:13px; } .footer-links .icon { width:15px; height:15px; }
  .footer-bottom { align-items:flex-start; flex-direction:column; gap:16px; font-size:11px; }
  .mobile-cta { position:fixed; inset:auto 0 0; z-index:25; display:flex; align-items:center; gap:10px; background:white; border-top:1px solid var(--line); padding:9px 16px calc(9px + env(safe-area-inset-bottom)); box-shadow:0 -3px 14px #092a4309; }
  .mobile-cta .btn { min-width:0; min-height:49px; padding:12px; font-size:16px; gap:9px; }
  .mobile-cta .btn:first-child { flex:.8; } .mobile-cta .btn:last-child { flex:1.2; }
  .mobile-cta .btn:hover { transform:none; }
  .mobile-cta .btn .icon { width:18px; height:18px; } .mobile-cta .whatsapp-icon { width:23px; height:23px; }
  .menu-dialog { padding:20px; } .menu-dialog .wordmark-sub { font-size:7px; } .menu-links { font-size:35px; }
  .finder-inner { padding:23px; } .finder-dialog h2 { font-size:38px; } .finder-dialog p { font-size:15px; }
  .finder-dialog .eyebrow { font-size:10px; }
  .finder-dialog .actions { align-items:stretch; flex-direction:column; } .finder-dialog .actions .text-link { align-self:center; }
  .choice { padding:14px; gap:11px; font-size:15px; }
  .media-dialog { width:calc(100% - 22px); } .media-top { padding:18px; gap:16px; } .media-top h2 { font-size:28px; }
  .media-bottom { display:block; padding:18px; } .media-bottom .text-link { margin-top:14px; }
  body:has(.message-form textarea:focus) .mobile-cta,body:has(.message-form select:focus) .mobile-cta { visibility:hidden; pointer-events:none; }
  @keyframes photo-enter { from { transform:translateY(7px); opacity:.7; } to { transform:none; opacity:1; } }
}
@media (max-width:360px) {
  .wrap { padding-inline:18px; } .header-inner { height:72px; padding-inline:15px; }
  .official-logo { width:55px; height:55px; } .wordmark { gap:8px; } .wordmark-name { font-size:26px; } .wordmark-sub { font-size:6.5px; }
  .hero { padding-top:18px; } .hero h1 { font-size:43px; margin-bottom:12px; }
  .hero-lead { font-size:15px; margin-bottom:14px; } .hero .eyebrow { font-size:9px; letter-spacing:.11em; } .hero-grid { gap:13px; }
  .home-course-shortcut { padding-inline:12px; font-size:15px; gap:7px; } .hero-practical a { font-size:13px; gap:8px; }
  .course-card { grid-template-columns:82px minmax(0,1fr); } .course-body { padding:18px 14px; }
  .course-body-head h3 { font-size:30px; } .course-body p { font-size:14px; } .course-img img { min-height:180px; }
  .listening-poster h3 { font-size:43px; } .listening-poster-content { padding:22px; }
  .mobile-cta { padding-inline:14px; } .mobile-cta .btn { font-size:15px; padding-inline:10px; }
  .menu-dialog .official-logo { width:48px; height:48px; } .menu-dialog .wordmark-name { font-size:24px; }
  .finder-inner { padding:20px; } .finder-dialog h2 { font-size:34px; } .finder-top .eyebrow { font-size:9px; }
}
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation:none!important; transition:none!important; }
  .js .reveal.waiting { opacity:1; transform:none; }
}


/* Browser clipping preserves the original PNG pixels and removes its outer canvas. */
.brand-crop-defs { position:absolute; width:0; height:0; overflow:hidden; pointer-events:none; }
.official-logo { clip-path:url(#perlamusic-logo-cutout); }