/* ============================================================
   Mojo's Music Academy - shared stylesheet (v27)
   Tokens from the Mojo's brand guide v1.0 and the Claude Design
   system. One blue (#015299), Sign Yellow, Ink, Warm Off-White.
   Book a Lesson uses Mojo Blue. Coral is not used on rebuilt pages.
   ============================================================ */

:root {
 /* Mojo Blue ramp (500 and 600 only differ in use: 600 is THE blue) */
 --blue-50:#EEF5FC; --blue-100:#DBECFA; --blue-200:#B4D9F8; --blue-300:#82C1F8;
 --blue-400:#2A99F9; --blue-500:#0370CF; --blue-600:#015299; --blue-700:#003A6C;
 --blue-800:#012442; --blue-900:#011423;
 /* Sign Yellow */
 --yellow-50:#FCFAEE; --yellow-100:#FAF5DB; --yellow-200:#F8EDB4; --yellow-300:#F8E582;
 --yellow-400:#F8D72A; --yellow-500:#FCDD3B; --yellow-600:#FED501; --yellow-700:#D0AF01;
 --yellow-800:#A68C03; --yellow-900:#857005;
 /* Amp Coral */
 --coral-50:#FBF0EF; --coral-100:#F8E1DD; --coral-200:#F4C0B8; --coral-300:#F29688;
 --coral-400:#EF4D34; --coral-500:#F24F36; --coral-600:#E4290C; --coral-700:#B8210A;
 /* Practice Teal */
 --teal-50:#F2F8F7; --teal-100:#E4F1F0; --teal-200:#C5E7E4; --teal-300:#9EDCD6;
 --teal-400:#58CABF; --teal-500:#2E9E93; --teal-600:#20746C; --teal-700:#16504A;
 /* Chalkboard neutrals */
 --ink-0:#FFFFFF; --ink-50:#FAFAFA; --ink-100:#F3F3F1; --ink-200:#E8E6E3;
 --ink-300:#D7D3CC; --ink-400:#B7B1A4; --ink-500:#978C72; --ink-600:#756C57;
 --ink-700:#575142; --ink-800:#3A362C; --ink-900:#26231C; --ink-950:#181611;

 --surface-page: var(--ink-50);
 --surface-card: var(--ink-0);
 --text-primary: var(--ink-900);
 --text-secondary: var(--ink-600);
 --text-inverse: var(--ink-50);
 --text-on-yellow: var(--ink-900);
 --border-default: var(--ink-200);
 --success:#207941; --warning:#F59F0A; --error:#D3222E;

 --radius-sm:8px; --radius-md:16px; --radius-lg:24px; --radius-pill:999px;
 --shadow-card: 0 2px 8px rgba(38,35,28,0.08);
 --shadow-raise: 0 8px 24px rgba(38,35,28,0.14);

 --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-6:24px;
 --space-8:32px; --space-12:48px; --space-16:64px; --space-24:96px;

 --font-display: "Caveat", "Segoe Script", cursive;
 --font-heading: "Baloo 2", "Segoe UI Rounded", system-ui, sans-serif;
 --font-body: "Nunito Sans", -apple-system, "Segoe UI", sans-serif;
 --font-wordmark: "Bungee", var(--font-heading);

 /* Header logo heights: full size at the top of the page, condensed once scrolled */
 --logo-h:72px; --logo-h-sm:52px;
}
@media (min-width:1024px){ :root{ --logo-h:96px; --logo-h-sm:60px; } }
@media (min-width:1180px){ :root{ --logo-h:120px; --logo-h-sm:64px; } }

*{box-sizing:border-box;}
html{scroll-behavior:smooth; scroll-padding-top:calc(var(--logo-h-sm) + 40px);}
body{
 margin:0; background:var(--surface-page); color:var(--text-primary);
 font-family:var(--font-body); font-size:16px; line-height:1.6;
 -webkit-font-smoothing:antialiased;
 padding-top:calc(var(--logo-h) + 24px); /* room for the fixed header */
}
img{max-width:100%; display:block;}
a{color:var(--blue-600);}
h1,h2,h3{font-family:var(--font-heading); margin:0 0 var(--space-4);}
h2{font-size:clamp(28px, 2.4vw + 18px, 40px); font-weight:800; line-height:1.15;}
h3{font-size:22px; font-weight:800; line-height:1.25;}
p{margin:0 0 var(--space-4);}
.container{max-width:1120px; margin:0 auto; padding:0 var(--space-4);}
@media (min-width:768px){.container{padding:0 var(--space-6);}}

/* Display type (Caveat Bold): page titles and hero headlines only */
.h-display{
 font-family:var(--font-display); font-weight:700; letter-spacing:.3px;
 color:var(--text-primary); line-height:1.05;
}
h1.h-display{font-size:44px;}
@media (min-width:768px){h1.h-display{font-size:64px;}}
.h-display.page-h1{font-size:40px;}
@media (min-width:768px){.h-display.page-h1{font-size:56px;}}
/* Place line under a service H1: keeps the keyword inside the H1, keeps Caveat to one line */
.h1-place{
 display:block; font-family:var(--font-heading); font-weight:800; letter-spacing:0;
 font-size:clamp(19px, 1.2vw + 14px, 24px); line-height:1.25; color:var(--blue-600); margin-top:8px;
}
/* Home hero: two Caveat lines */
.h1-hero .h1-line{display:block; font-size:clamp(28px, 8.1vw, 54px);}
.h1-hero .h1-line + .h1-line{color:var(--blue-600);}
@media (min-width:1024px){.h1-hero .h1-line{font-size:clamp(40px, 3.5vw, 46px);}}

.eyebrow{
 font-family:var(--font-heading); font-weight:800; font-size:13px;
 letter-spacing:1px; text-transform:uppercase; color:var(--blue-600);
}
.lead{font-size:18px; line-height:1.6; color:var(--text-secondary);}
.hero .lead{color:var(--ink-900);}
.text-secondary{color:var(--text-secondary);}
.measure{max-width:68ch;}
.visually-hidden{
 position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap;
}
.skip-link{
 position:absolute; left:-9999px; top:0; background:var(--blue-600); color:#fff;
 padding:10px 16px; border-radius:0 0 var(--radius-sm) 0; z-index:300;
}
.skip-link:focus{left:0;}

/* Buttons */
.btn{
 display:inline-flex; align-items:center; justify-content:center; gap:8px;
 font-family:var(--font-heading); font-weight:700; font-size:17px;
 padding:14px 28px; border-radius:var(--radius-pill); text-decoration:none;
 border:2px solid transparent; cursor:pointer; min-height:48px; line-height:1.1;
 transition:transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn:focus-visible{outline:3px solid var(--blue-600); outline-offset:3px;}
/* The one conversion action: Book a Lesson (Mojo Blue, per Britt Oct 7) */
.btn-cta{background:var(--blue-600); color:#fff; border-color:var(--blue-600);}
.btn-cta:hover{background:var(--blue-700); border-color:var(--blue-700); transform:translateY(-1px);}
/* Blue fill: used by pages not yet rebuilt, and by form submit buttons */
.btn-primary{background:var(--blue-600); color:#fff;}
.btn-primary:hover{background:var(--blue-700); transform:translateY(-1px);}
.btn-secondary, .btn-outline{background:transparent; color:var(--blue-600); border-color:var(--blue-600);}
.btn-secondary:hover, .btn-outline:hover{background:var(--blue-50); transform:translateY(-1px);}
/* On a Mojo Blue or dark band: yellow fill with ink text */
.btn-yellow, .cta-band .btn-primary, .site-footer .btn-primary{background:var(--yellow-500); color:var(--ink-900); border-color:var(--yellow-500);}
.btn-yellow:hover, .cta-band .btn-primary:hover, .site-footer .btn-primary:hover{background:var(--yellow-600); border-color:var(--yellow-600);}
.site-footer .btn-cta{background:var(--yellow-500); color:var(--ink-900); border-color:var(--yellow-500);}
.site-footer .btn-cta:hover{background:var(--yellow-600); border-color:var(--yellow-600);}
.btn-sm{padding:10px 20px; font-size:15px; min-height:44px;}
.link-quiet{font-family:var(--font-heading); font-weight:700; color:var(--blue-600); text-underline-offset:3px;}

/* Header: fixed, full-size logo at the top of the page, condensed when scrolled */
.site-header{
 position:fixed; top:0; left:0; right:0; z-index:100; background:var(--ink-0);
 border-bottom:1px solid var(--border-default);
 --logo-now:var(--logo-h);
 transition:box-shadow .2s ease;
}
.site-header.is-scrolled{--logo-now:var(--logo-h-sm); box-shadow:var(--shadow-card);}
.header-inner{
 display:flex; align-items:center; justify-content:space-between;
 padding:12px var(--space-4); gap:var(--space-4);
}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none;}
/* !important overrides the inline logo heights still present on pages not yet rebuilt */
.site-header .brand img{height:var(--logo-now) !important; width:auto !important; transition:height .2s ease;}

.nav-desktop{display:none; align-items:center; gap:var(--space-6);}
.nav-desktop a{
 font-family:var(--font-heading); font-weight:700; font-size:15px;
 color:var(--text-primary); text-decoration:none; padding:8px 4px; border-bottom:3px solid transparent;
}
.nav-desktop a:hover, .nav-desktop a[aria-current="page"]{border-bottom-color:var(--blue-600); color:var(--blue-600);}
.header-cta{display:none; align-items:center; gap:var(--space-4);}
.header-contact{display:flex; flex-direction:column; gap:1px; line-height:1.3;}
.header-phone{
 font-family:var(--font-heading); font-weight:700; color:var(--blue-600); text-decoration:none; white-space:nowrap; font-size:14px;
}
.header-email{
 font-family:var(--font-heading); font-weight:700; color:var(--blue-600); text-decoration:none; white-space:nowrap; font-size:14px;
}
.header-email:hover{text-decoration:underline; text-underline-offset:3px;}
.header-address{color:var(--text-secondary); white-space:nowrap; font-size:13px;}
/* Pages rebuilt in v25 show phone only, and only when there is room */
.header-phone-only{display:none;}
@media (min-width:1024px){
 .nav-desktop{display:flex; gap:20px;}
 .header-cta{display:flex;}
}
@media (min-width:1280px){ .header-phone-only{display:block;} .nav-desktop{gap:var(--space-6);} }
/* v39: larger desktop navigation where there is room */
@media (min-width:1180px){ .nav-desktop a, .nav-dropdown-link{font-size:17px;} }
@media (min-width:1400px){ .nav-desktop a, .nav-dropdown-link{font-size:19px;} .nav-desktop{gap:28px;} }

.nav-toggle{
 background:none; border:2px solid var(--ink-900); border-radius:var(--radius-sm);
 width:44px; height:44px; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after{
 content:""; display:block; width:20px; height:2px; background:var(--ink-900); position:relative;
}
.nav-toggle span::before{position:absolute; top:-6px;}
.nav-toggle span::after{position:absolute; top:6px;}
@media (min-width:1024px){.nav-toggle{display:none;}}

.mobile-menu{
 display:none; flex-direction:column; gap:2px; background:var(--ink-0);
 border-top:1px solid var(--border-default); padding:var(--space-2) var(--space-4) var(--space-6);
 max-height:calc(100vh - 110px); max-height:calc(100dvh - 110px); overflow-y:auto;
 -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.mobile-menu.open{display:flex;}
.mobile-menu a{
 font-family:var(--font-heading); font-weight:700; color:var(--text-primary);
 text-decoration:none; padding:12px 4px; border-bottom:1px solid var(--border-default);
}
.mobile-menu .btn{margin-top:var(--space-3);}
.mobile-menu a.btn-cta, .mobile-menu a.btn-primary{color:#fff; border-bottom:2px solid transparent;}
.mobile-menu span.mobile-menu-address{
 display:block; font-family:var(--font-heading); font-weight:700; color:var(--text-secondary);
 padding:12px 4px; border-bottom:1px solid var(--border-default); font-size:14px;
}
@media (min-width:1024px){.mobile-menu{display:none !important;}}

/* Nav dropdown (desktop) */
.nav-dropdown{position:relative;}
.nav-dropdown-toggle{
 font-family:var(--font-heading); font-weight:700; font-size:15px;
 color:var(--text-primary); background:none; border:none; cursor:pointer;
 padding:8px 4px; border-bottom:3px solid transparent; display:inline-flex; align-items:center; gap:5px;
}
.nav-dropdown-toggle .caret{
 width:0; height:0; border-left:4px solid transparent; border-right:4px solid transparent;
 border-top:5px solid currentColor; display:inline-block; margin-top:3px;
}
.nav-dropdown-toggle:hover, .nav-dropdown-toggle.current{border-bottom-color:var(--blue-600); color:var(--blue-600);}

/* Split nav item: label is a direct link, caret opens the submenu */
.nav-dropdown-split{display:inline-flex; align-items:center; gap:0;}
.nav-dropdown-link{
 font-family:var(--font-heading); font-weight:700; font-size:15px;
 color:var(--text-primary); text-decoration:none;
 padding:8px 2px 8px 4px; border-bottom:3px solid transparent;
}
.nav-dropdown-link:hover, .nav-dropdown-link.current, .nav-dropdown-link[aria-current="page"]{border-bottom-color:var(--blue-600); color:var(--blue-600);}
.nav-dropdown-caret{padding:8px 4px 8px 0;}
.nav-dropdown-caret .caret{margin-top:0;}
.nav-dropdown-menu{
 display:none; flex-direction:column; position:absolute; top:100%; left:0; margin-top:8px;
 background:var(--ink-0); border:1px solid var(--border-default); border-radius:var(--radius-md);
 box-shadow:var(--shadow-raise); padding:8px; min-width:220px; z-index:200;
}
.nav-dropdown-menu a{
 font-family:var(--font-heading); font-weight:600; font-size:14px; color:var(--text-primary);
 text-decoration:none; padding:8px 12px; border-radius:var(--radius-sm); white-space:nowrap; border-bottom:none;
}
.nav-dropdown-menu a:hover, .nav-dropdown-menu a[aria-current="page"]{background:var(--yellow-100); color:var(--blue-600); border-bottom:none;}
.nav-dropdown-menu .dropdown-divider{height:1px; background:var(--border-default); margin:6px 8px;}
.nav-dropdown:hover .nav-dropdown-menu, .nav-dropdown.open .nav-dropdown-menu{display:flex;}

/* Nav dropdown (mobile): collapsible <details> */
.mobile-submenu{border-bottom:1px solid var(--border-default);}
.mobile-submenu summary{
 font-family:var(--font-heading); font-weight:700; color:var(--text-primary); cursor:pointer;
 padding:12px 4px; list-style:none; display:flex; align-items:center; justify-content:space-between;
}
.mobile-submenu summary::-webkit-details-marker{display:none;}
.mobile-submenu summary::after{content:"+"; font-weight:700; color:var(--text-secondary);}
.mobile-submenu[open] summary::after{content:"\2212";}
.mobile-submenu a{border-bottom:none !important; padding:10px 4px 10px 16px !important; font-weight:600; font-size:14px; display:block;}
.mobile-submenu .dropdown-divider{height:1px; background:var(--border-default); margin:4px 16px;}

/* Sticky mobile action bar: appears when the hero button is off screen */
.cta-bar{
 position:fixed; left:0; right:0; bottom:0; z-index:90; display:flex; gap:var(--space-3);
 padding:10px var(--space-4) calc(10px + env(safe-area-inset-bottom));
 background:var(--ink-0); border-top:1px solid var(--border-default);
 box-shadow:0 -4px 16px rgba(38,35,28,.08); transition:transform .25s ease;
}
.cta-bar .btn{flex:1; padding:12px 16px;}
.cta-bar .btn-cta{flex:2;}
.js .cta-bar:not(.is-visible){transform:translateY(115%);}
body.menu-open .cta-bar{transform:translateY(115%);}
@media (min-width:1024px){.cta-bar{display:none;}}

/* Sections */
section{padding:var(--space-12) 0;}
@media (min-width:900px){section{padding:var(--space-16) 0;}}
.section-yellow{background:var(--yellow-500); color:var(--text-on-yellow);}
.section-yellow h2, .section-yellow h3{color:var(--text-on-yellow);}
.section-blue{background:var(--blue-600); color:var(--text-inverse);}
.section-blue h2, .section-blue h3{color:#fff;}
.section-alt{background:var(--ink-100);}
.section-tight{padding-top:var(--space-8); padding-bottom:var(--space-8);}

/* Layout helpers: everything sits on the 1120px grid */
.split{display:grid; gap:var(--space-8); grid-template-columns:1fr; align-items:start;}
.split--center{align-items:center;}
@media (min-width:900px){
 .split{grid-template-columns:7fr 5fr; gap:var(--space-12);}
 .split--5-7{grid-template-columns:5fr 7fr;}
 .split--half{grid-template-columns:1fr 1fr;}
}

/* Breadcrumb */
.breadcrumb ol{
 display:flex; flex-wrap:wrap; gap:4px 8px; list-style:none; padding:0; margin:0 0 var(--space-3);
 font-family:var(--font-heading); font-weight:700; font-size:14px;
}
.breadcrumb li + li::before{content:"\203A"; margin-right:8px; color:var(--ink-700);}
.breadcrumb a{color:var(--blue-600);}
.breadcrumb [aria-current]{color:var(--ink-800);}

/* Hero */
.hero{
 background:var(--yellow-500);
 padding-top:var(--space-12); padding-bottom:var(--space-12);
}
@media (min-width:900px){.hero{padding-top:var(--space-16); padding-bottom:var(--space-16);}}
.hero .reveal{animation:none; opacity:1; transform:none;}
.hero-grid{display:grid; gap:var(--space-8); align-items:center;}
@media (min-width:900px){.hero-grid{grid-template-columns:1.1fr 1fr;}}
.hero-badge{
 display:inline-flex; flex-wrap:wrap; align-items:center; gap:2px 10px; background:var(--ink-900); color:#fff;
 font-family:var(--font-heading); font-weight:700; font-size:14px; line-height:1.35; padding:8px 16px;
 border-radius:18px; margin-bottom:var(--space-4);
}
.hero-badge .star{color:var(--yellow-500);}
.hero-badge .sep{opacity:.5;}
@media (max-width:480px){.hero-badge .sep{display:none;} .hero-badge{flex-direction:column; align-items:flex-start;}}
.hero-trust{font-family:var(--font-heading); font-weight:700; color:var(--text-on-yellow); margin-top:var(--space-3);}
.hero-actions{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-3); margin-top:var(--space-6);}
.hero-contact{margin:var(--space-3) 0 0; font-family:var(--font-heading); font-weight:700;}
.hero-contact .dot{margin:0 8px; color:var(--ink-700);}
.hero-photo{
 border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-raise);
 aspect-ratio:4/3; position:relative;
}
.hero-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%);}
.hero-photo--portrait{aspect-ratio:4/5;}

/* Cards */
.card{
 background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
 padding:var(--space-6);
}
.card-grid{display:grid; gap:var(--space-6); grid-template-columns:1fr;}
@media (min-width:640px){.card-grid.cols-2{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){
 .card-grid.cols-3{grid-template-columns:repeat(3,1fr);}
 .card-grid.cols-4{grid-template-columns:repeat(4,1fr);}
}
.card-with-photo{padding:0; overflow:hidden; display:flex; flex-direction:column;}
.card-photo{aspect-ratio:4/3; overflow:hidden; background:var(--ink-200);}
.card-photo img{width:100%; height:100%; object-fit:cover; display:block; object-position:var(--focus,50% 50%);}
.card-with-photo .card-body{padding:var(--space-6);}
.card-body h3{margin-bottom:var(--space-2);}
.card-body p:last-child{margin-bottom:0;}

/* People: Home uses person-card; instrument pages use teacher-card */
.people-grid{display:grid; gap:var(--space-6); grid-template-columns:1fr;}
@media (min-width:560px){.people-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.people-grid{grid-template-columns:repeat(3,1fr);}}
.person-card, .teacher-card{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); overflow:hidden;}
.person-photo{aspect-ratio:1/1; overflow:hidden; background:var(--ink-200);}
.person-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 30%);}
.person-body, .teacher-body{padding:var(--space-4) var(--space-6) var(--space-6);}
.person-body h3, .teacher-body h3{font-size:22px; margin-bottom:2px;}
.person-body p:last-child, .teacher-body p:last-child{margin-bottom:0;}
.person-instrument{
 display:inline-block; font-family:var(--font-heading); font-weight:700; font-size:13px;
 color:var(--teal-700); background:var(--teal-100); padding:3px 12px; border-radius:var(--radius-pill);
 margin-bottom:var(--space-3);
}
.teacher-photo{aspect-ratio:4/3; overflow:hidden; background:var(--ink-200);}
.teacher-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 30%);}
.teacher-grid{display:grid; gap:var(--space-6); grid-template-columns:1fr;}
@media (min-width:640px){.teacher-grid--2{grid-template-columns:repeat(2,1fr);}}
@media (min-width:900px){.teacher-grid--3{grid-template-columns:repeat(3,1fr);}}

/* Instrument cards */
.instrument-card{
 background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card);
 padding:var(--space-6); text-decoration:none; color:var(--text-primary); display:block;
 transition:transform .15s ease, box-shadow .15s ease;
}
.instrument-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-raise);}
.instrument-card:focus-visible{outline:3px solid var(--blue-600); outline-offset:3px;}
.instrument-card .icon-wrap{
 width:72px; height:72px; border-radius:var(--radius-md); background:var(--yellow-100);
 display:flex; align-items:center; justify-content:center; margin-bottom:var(--space-3);
 overflow:hidden;
}
.instrument-card .icon-wrap img{width:56px; height:56px; object-fit:contain;}
.instrument-card .icon-wrap.photo-wrap img{width:100%; height:100%; object-fit:cover;}
.instrument-card h3{font-size:20px; margin-bottom:6px; color:var(--blue-600);}
.instrument-card p{margin-bottom:0;}

/* Feature panel (Young Beginners) */
.panel-yellow{background:var(--yellow-100); border-radius:var(--radius-lg); padding:var(--space-6);}
@media (min-width:900px){.panel-yellow{padding:var(--space-12);}}
.panel-photo{border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; max-width:420px; box-shadow:var(--shadow-card);}
.panel-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 20%);}
.photo-pair{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);}
.photo-pair figure{margin:0; border-radius:var(--radius-md); overflow:hidden; aspect-ratio:3/4; box-shadow:var(--shadow-card);}
.photo-pair img{width:100%; height:100%; object-fit:cover;}

/* Age bands: old list (pages not yet rebuilt) and new 4-up grid */
.age-band{
 display:grid; grid-template-columns:auto 1fr; gap:var(--space-4); align-items:start;
 padding:var(--space-4) 0; border-bottom:1px solid var(--border-default);
}
.age-band:last-child{border-bottom:none;}
.age-pill{
 font-family:var(--font-heading); font-weight:800; font-size:14px; color:#fff; background:var(--blue-600);
 padding:6px 14px; border-radius:var(--radius-pill); white-space:nowrap;
}
.age-grid{display:grid; gap:var(--space-4); grid-template-columns:1fr; margin-top:var(--space-6);}
@media (min-width:640px){.age-grid{grid-template-columns:repeat(2,1fr);}}
@media (min-width:1024px){.age-grid{grid-template-columns:repeat(4,1fr);}}
.age-card{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:var(--space-6);}
.age-card .age-pill{display:inline-block; margin-bottom:var(--space-3);}
.age-card p{margin:0;}

ul.checklist{list-style:none; margin:0; padding:0;}
ul.checklist li{position:relative; padding:6px 0 6px 32px; font-size:17px;}
ul.checklist li::before{content:"\266A"; position:absolute; left:0; top:6px; color:var(--blue-600); font-size:20px; font-weight:700;}

/* Reviews */
.review{
 display:flex; flex-direction:column; background:var(--surface-card); border-radius:var(--radius-md);
 box-shadow:var(--shadow-card); padding:var(--space-6); margin:0;
}
.review-head{margin-bottom:var(--space-3);}
.chip{
 display:inline-flex; align-items:center; gap:6px; font-family:var(--font-heading); font-weight:800;
 font-size:13px; line-height:1; padding:7px 12px; border-radius:var(--radius-pill);
}
.chip-google{background:var(--blue-600); color:#fff;}
.chip-google .stars{color:var(--yellow-500); letter-spacing:1px;}
.chip-fb{background:var(--blue-50); color:var(--blue-600); border:1px solid var(--blue-200);}
.review-text{margin:0 0 var(--space-2); color:var(--ink-800);}
.js .review-text{display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;}
.js .review.is-open .review-text{display:block; -webkit-line-clamp:unset; overflow:visible;}
.review-more{
 align-self:flex-start; background:none; border:none; padding:0 0 0 0; margin:0 0 var(--space-2);
 font-family:var(--font-heading); font-weight:700; font-size:15px; color:var(--blue-600);
 text-decoration:underline; text-underline-offset:3px; cursor:pointer; min-height:32px;
}
.review-by{margin:auto 0 0; padding-top:var(--space-3); font-weight:700; color:var(--ink-900);}
.review--single{max-width:760px;}

/* Related links row */
.related{display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 24px; margin-top:var(--space-8); padding-top:var(--space-6); border-top:1px solid var(--border-default);}
.related strong{font-family:var(--font-heading); font-weight:800;}
.related a{font-family:var(--font-heading); font-weight:700;}

/* CTA band: Mojo Blue, flat */
.cta-band{background:var(--blue-600); color:#fff; text-align:center;}
.cta-band h2{color:#fff;}
.cta-band .cta-title{font-size:clamp(34px, 3vw + 18px, 48px); margin-bottom:var(--space-3);}
.cta-band p{color:var(--blue-100);}
.cta-band p a{color:#fff; font-weight:700;}
.cta-band .area-line{margin-top:var(--space-8); color:var(--blue-200); font-size:15px; margin-bottom:0;}

/* Footer */
.site-footer{background:var(--ink-900); color:var(--ink-200); padding:var(--space-12) 0 var(--space-8);}
.footer-grid{display:grid; gap:var(--space-8); grid-template-columns:1fr;}
@media (min-width:768px){.footer-grid{grid-template-columns:2fr 1fr 1fr;}}
.site-footer h3{color:#fff; font-size:16px;}
.site-footer a{color:var(--ink-200); text-decoration:none;}
.site-footer a:hover{color:#fff;}
.site-footer .brand img{height:80px !important; width:auto !important;}
@media (min-width:768px){.site-footer .brand img{height:95px !important;}}
.footer-tag{margin:16px 0; color:var(--ink-300); max-width:34ch;}
.footer-links{list-style:none; padding:0; margin:12px 0 0; display:flex; flex-direction:column; gap:8px;}
.footer-meta{color:var(--ink-300); margin:12px 0 0;}
.footer-hours{color:var(--ink-400); font-size:13px;}
.footer-bottom{
 border-top:1px solid var(--ink-800); margin-top:var(--space-8); padding-top:var(--space-6);
 font-size:13px; color:var(--ink-400); display:flex; flex-wrap:wrap; gap:var(--space-3); justify-content:space-between;
}
@media (max-width:1023px){.site-footer{padding-bottom:calc(var(--space-8) + 76px);}}

.map-embed{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:16/10;}
.map-embed iframe{width:100%; height:100%; border:0;}

.accent-note{font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--blue-600);}
.card > .accent-note{display:block; margin-bottom:var(--space-2);}

.reveal{opacity:0; transform:translateY(12px); animation:reveal .6s ease forwards;}
.reveal-1{animation-delay:.05s;} .reveal-2{animation-delay:.15s;} .reveal-3{animation-delay:.25s;} .reveal-4{animation-delay:.35s;}
@keyframes reveal{to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){
 .reveal{animation:none; opacity:1; transform:none;}
 html{scroll-behavior:auto;}
 .cta-bar, .site-header, .site-header .brand img{transition:none;}
}

.skip-link:focus, a:focus-visible, button:focus-visible{outline:3px solid var(--blue-600); outline-offset:2px;}

/* FAQ */
.faq{max-width:820px;}
.faq-item{border-bottom:1px solid var(--border-default); padding:var(--space-4) 0;}
.faq-item summary{
 font-family:var(--font-heading); font-weight:700; font-size:18px; cursor:pointer; list-style:none;
 display:flex; justify-content:space-between; align-items:center; gap:var(--space-4);
}
.faq-item summary::-webkit-details-marker{display:none;}
.faq-item summary::after{content:"+"; font-size:24px; color:var(--blue-600);}
.faq-item[open] summary::after{content:"\2013";}
.faq-item p{margin-top:var(--space-3); margin-bottom:0; color:var(--ink-800);}

/* Forms, Facebook link */
[hidden]{display:none !important;}
.form-grid{display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:start;}
@media (min-width:900px){.form-grid{grid-template-columns:1.6fr 1fr;}}
.mojo-form .field{margin-bottom:var(--space-4);}
.field-row{display:grid; gap:0 var(--space-4); grid-template-columns:1fr;}
@media (min-width:560px){.field-row{grid-template-columns:1fr 1fr;}}
.mojo-form label:not(.consent){display:block; font-family:var(--font-heading); font-weight:700; font-size:14px; color:var(--ink-900); margin-bottom:6px;}
.mojo-form input[type="text"], .mojo-form input[type="email"], .mojo-form input[type="tel"], .mojo-form textarea{
 width:100%; font-family:var(--font-body); font-size:16px; color:var(--ink-900); background:#fff;
 border:2px solid var(--ink-300); border-radius:var(--radius-sm); padding:12px 14px; min-height:48px;
}
.mojo-form textarea{min-height:140px; resize:vertical;}
.mojo-form input:focus, .mojo-form textarea:focus{outline:3px solid var(--blue-600); outline-offset:2px; border-color:var(--blue-600);}
.consent{display:flex; align-items:flex-start; gap:10px; margin:4px 0 var(--space-4); font-size:15px; color:var(--text-secondary); cursor:pointer;}
.consent input{width:22px; height:22px; margin:1px 0 0; flex:none; accent-color:var(--blue-600);}
.mojo-form .btn{margin-top:4px;}
.form-thanks{background:var(--teal-100); color:var(--teal-700); border-radius:var(--radius-sm); padding:14px 16px; font-family:var(--font-heading); font-weight:700; margin:0 0 var(--space-4);}
.social-link{
 display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; margin-top:4px;
 border-radius:50%; background:var(--blue-600); color:#fff; text-decoration:none;
 transition:transform .15s ease, background-color .15s ease;
}
.social-link:hover{background:var(--blue-700); color:#fff; transform:translateY(-2px);}
.social-link .fb-icon{width:26px; height:26px;}
.social-link + .social-link{margin-left:10px;}
.social-btn .fb-icon{width:20px; height:20px; flex:none;}
.site-footer .social-link{color:#fff;}
#get-in-touch{padding-top:0;}

/* Lightbox: click any content photo to view it larger */
img.lightbox-trigger{cursor:zoom-in;}
.lightbox{
 position:fixed; inset:0; background:rgba(15,14,11,.92); z-index:1000;
 display:none; align-items:center; justify-content:center; padding:var(--space-6);
}
.lightbox.open{display:flex;}
.lightbox-img{max-width:min(92vw,1100px); max-height:88vh; width:auto; height:auto; border-radius:var(--radius-sm); box-shadow:var(--shadow-raise); display:block;}
.lightbox-close{
 position:absolute; top:20px; right:24px; background:rgba(255,255,255,.14); color:#fff; border:none;
 width:44px; height:44px; border-radius:50%; font-size:28px; line-height:1; cursor:pointer;
 display:flex; align-items:center; justify-content:center;
}
.lightbox-close:hover{background:rgba(255,255,255,.26);}

/* Video placeholder (How to Book page): flat Mojo Blue */
.video-placeholder{
 position:relative; aspect-ratio:16/9; border-radius:var(--radius-lg); overflow:hidden;
 background:var(--blue-600); box-shadow:var(--shadow-raise);
 display:flex; align-items:center; justify-content:center; flex-direction:column; gap:var(--space-3);
 text-align:center; padding:var(--space-6);
}
.video-placeholder .play-circle{
 width:76px; height:76px; border-radius:50%; background:rgba(255,255,255,.95); color:var(--blue-600);
 display:flex; align-items:center; justify-content:center; box-shadow:var(--shadow-raise);
}
.video-placeholder .play-circle svg{width:28px; height:28px; margin-left:4px;}
.video-placeholder p{color:#fff; font-family:var(--font-heading); font-weight:700; font-size:18px; margin:0;}
.video-placeholder span{color:var(--blue-100); font-size:14px; font-family:var(--font-body); font-weight:400;}

/* Quote attributions on pages not yet rebuilt: ink-500 failed contrast */
blockquote footer{color:var(--ink-700) !important;}


/* v25 Home additions */
.panel-sky{background:var(--blue-100); border-radius:var(--radius-lg); padding:var(--space-6);}
@media (min-width:900px){.panel-sky{padding:var(--space-12);}}
.panel-quote{margin:var(--space-6) 0; padding-left:var(--space-4); border-left:4px solid var(--blue-500); font-style:italic; color:var(--ink-900); font-size:20px; line-height:1.5;}
.panel-quote cite{display:block; font-style:normal; font-size:15px; color:var(--text-secondary); margin-top:var(--space-2);}
.faq-item summary h3{font:inherit; margin:0;}
.visit-card p{margin-bottom:var(--space-3);}
.visit-card h3{margin-bottom:var(--space-3);}

/* v26 additions */
.photo-caption{font-size:14px; color:var(--text-secondary); margin-top:var(--space-2);}

/* v27 additions */
/* Instrument cards: compact, no icon background, icons stay Mojo Blue */
.instrument-card .icon-wrap{
 width:auto; height:52px; background:none; border-radius:0; margin-bottom:var(--space-3);
 justify-content:flex-start; overflow:visible;
}
.instrument-card .icon-wrap img{width:auto; height:48px; max-width:80px; object-fit:contain;}
.instrument-grid{display:grid; gap:var(--space-3); grid-template-columns:repeat(2,1fr);}
@media (min-width:1024px){.instrument-grid{grid-template-columns:repeat(5,1fr); gap:var(--space-4);}}
.instrument-grid .instrument-card{padding:var(--space-4);}
.instrument-grid .instrument-card h3{font-size:18px; margin-bottom:4px;}
.instrument-grid .instrument-card p{font-size:14px; line-height:1.45;}

/* Home: Young Beginners and Adult cards side by side on light gray */
.start-grid{display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:stretch;}
@media (min-width:900px){.start-grid{grid-template-columns:1fr 1fr;}}
.start-card{
 background:var(--ink-100); border:1px solid var(--ink-200); border-radius:var(--radius-lg);
 padding:var(--space-6); display:flex; gap:var(--space-4); align-items:center;
}
.start-photo{flex:none; width:140px;}
.start-photo .frame{border-radius:var(--radius-md); overflow:hidden; aspect-ratio:4/5; box-shadow:var(--shadow-card); background:var(--ink-200);}
.start-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 20%);}
.start-photo .photo-caption{margin:var(--space-2) 0 0; font-size:13px; line-height:1.35;}
.start-body{min-width:0;}
.start-body h2{font-size:clamp(22px, 1vw + 14px, 26px); margin-bottom:var(--space-3);}
.start-body .lead{font-size:16px; line-height:1.5; color:var(--ink-900); margin-bottom:var(--space-4);}
.start-body .panel-quote{font-size:16px; margin:var(--space-3) 0 var(--space-4);}
.start-body .panel-quote cite{font-size:14px;}
@media (max-width:560px){
 .start-card{flex-direction:column; align-items:flex-start;}
 .start-photo{width:180px;}
}

/* Home: instructor collage card. Square frame with a black strip so the bottom lines up with the Jessica and Paul photos */
.collage-frame{aspect-ratio:1/1; background:#000; overflow:hidden;}
.collage-frame img{width:100%; aspect-ratio:4/3; height:auto; object-fit:cover; display:block;}
.person-card--collage{display:flex; flex-direction:column;}
.person-card--collage .person-body{margin-top:auto; padding-top:var(--space-6);}

/* All Instruments: hero photo mosaic and Start Here cards with photos */
.hero-mosaic{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3);}
.hero-mosaic .tile{border-radius:var(--radius-md); overflow:hidden; aspect-ratio:1/1; box-shadow:var(--shadow-raise); background:var(--ink-200);}
.hero-mosaic img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 35%);}
.instrument-card.card-photo-row{display:flex; gap:var(--space-4); align-items:center;}
.card-photo-row .row-photo{flex:none; width:120px; aspect-ratio:4/5; border-radius:var(--radius-sm); overflow:hidden; background:var(--ink-200);}
.card-photo-row .row-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 20%);}
.card-photo-row h3{margin-top:0;}

/* v28 additions */
.photo-row{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:var(--space-4); margin-top:var(--space-6);}
@media (min-width:900px){.photo-row{grid-template-columns:repeat(4,minmax(0,1fr));}}
.photo-row figure{margin:0;}
.photo-row .frame{aspect-ratio:4/5; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); background:var(--ink-200);}
.photo-row img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 30%);}
.photo-row figcaption{font-size:14px; color:var(--text-secondary); margin-top:var(--space-2); font-family:var(--font-heading); font-weight:700;}
/* Events: Chuck Rainey photo strip, equal heights without cropping */
.collage-strip{display:flex; gap:var(--space-3); align-items:flex-start; margin:var(--space-4) 0 var(--space-6);}
.collage-strip figure{margin:0; flex:var(--ar) 1 0%; min-width:0;}
.collage-strip img{width:100%; height:auto; display:block; border-radius:var(--radius-sm);}
@media (max-width:700px){
 .collage-strip{flex-wrap:wrap;}
 .collage-strip figure:first-child{flex:1 1 100%;}
 .collage-strip figure:not(:first-child){flex:1 1 calc(50% - 6px);}
}
/* Bass: styles table */
.style-table-wrap{overflow-x:auto; margin:var(--space-6) 0; border-radius:var(--radius-md); box-shadow:var(--shadow-card);}
.style-table{width:100%; border-collapse:collapse; background:var(--surface-card); font-size:16px;}
.style-table th, .style-table td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--border-default); vertical-align:top;}
.style-table thead th{background:var(--blue-600); color:#fff; font-family:var(--font-heading); font-weight:800; font-size:15px;}
.style-table tbody th{font-family:var(--font-heading); font-weight:800; color:var(--blue-600); white-space:nowrap;}
.style-table tbody tr:last-child th, .style-table tbody tr:last-child td{border-bottom:none;}
.fundamentals{list-style:none; margin:var(--space-4) 0 var(--space-6); padding:0; display:grid; gap:var(--space-3);}
.fundamentals li{background:var(--surface-card); border-radius:var(--radius-md); box-shadow:var(--shadow-card); padding:var(--space-4) var(--space-6);}
.fundamentals strong{font-family:var(--font-heading); font-weight:800; color:var(--blue-600);}

/* v31 */
.style-sub{font-family:var(--font-heading); font-size:19px; font-weight:800; color:var(--blue-600); margin:var(--space-6) 0 var(--space-2);}

/* v32: style tables on phones */
@media (max-width:640px){
  .style-table th, .style-table td{padding:12px 14px;}
  .style-table tbody th{white-space:normal; width:38%;}
}

/* v33 additions */
/* Desktop nav: Instruments is now a plain link; "current" marks its section pages */
.nav-desktop a.current{border-bottom-color:var(--blue-600); color:var(--blue-600);}

/* Home: three start cards (Young Beginners, Older Children & Teens, Adults) */
@media (min-width:900px){
 .start-grid--3{grid-template-columns:repeat(3,1fr); gap:var(--space-4);}
 .start-grid--3 .start-card{flex-direction:column; align-items:stretch; padding:var(--space-4);}
 .start-grid--3 .start-photo{width:100%;}
 .start-grid--3 .start-photo .frame{aspect-ratio:4/3;}
 .start-grid--3 .start-body{display:flex; flex-direction:column; flex:1;}
 .start-grid--3 .start-body .btn{align-self:flex-start; margin-top:auto;}
}

/* Section heading with a logo or button on the right */
.section-head{display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:var(--space-4) var(--space-6);}
.section-head h2{margin-bottom:0;}
.section-head .lead{margin-bottom:0; margin-top:var(--space-2);}
.section-logo{width:200px; height:auto; flex:none; display:block;}
@media (max-width:640px){.section-logo{width:150px;}}

/* Visit card: larger logo beside the address block */
.visit-card{display:flex; flex-wrap:wrap; align-items:center; gap:var(--space-4) var(--space-6);}
.visit-card .section-logo{width:170px;}
.visit-card-text{flex:1 1 200px; min-width:0;}
@media (min-width:640px){.visit-card .section-logo{order:2;}}

/* Instruments page: three Start Here cards stack photo over text on desktop */
@media (min-width:900px){
 .start-here .instrument-card.card-photo-row{flex-direction:column; align-items:flex-start;}
 .start-here .card-photo-row .row-photo{width:100%; aspect-ratio:4/3;}
}

/* v34 additions */
.start-body h3{font-size:clamp(22px, 1vw + 14px, 26px); margin-bottom:var(--space-3); line-height:1.2;}
.start-photo-link{display:block; color:inherit; text-decoration:none;}
.start-photo-link:hover .frame{box-shadow:var(--shadow-raise);}
.teaser-photo{border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:1/1; max-width:360px; width:100%; justify-self:end;}
.teaser-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 30%);}
@media (max-width:899px){.teaser-photo{justify-self:start;}}
.page-subhead{font-family:var(--font-heading); font-weight:700; font-size:clamp(22px, 2vw + 12px, 30px); line-height:1.25; color:var(--blue-600); margin:var(--space-3) 0 var(--space-4);}
.how-video{width:100%; height:auto; aspect-ratio:1280/668; display:block; border-radius:var(--radius-lg); box-shadow:var(--shadow-raise); background:#000;}

/* v35 forms */
.mojo-form .req{color:var(--blue-600);}
.form-error{background:#fdecea; color:#8a1c12; border-radius:var(--radius-sm); padding:12px 16px; margin:0 0 var(--space-4); font-weight:600;}
.form-error[hidden], .form-thanks[hidden]{display:none;}
.mojo-form .btn[disabled]{opacity:.6; cursor:progress;}
.form-privacy{margin:var(--space-4) 0 0; text-align:center; font-size:15px;}

/* v35 privacy page */
.legal-body{max-width:760px;}
.legal-body h2{margin-top:var(--space-8);}
.legal-body h3{margin-top:var(--space-6); font-size:20px;}
.legal-body p, .legal-body li{line-height:1.7;}
.legal-body ul{padding-left:1.25em; margin:var(--space-3) 0;}
.legal-body li{margin-bottom:var(--space-3);}
.footer-bottom a{color:var(--ink-300); text-decoration:underline;}

/* v36 uniform grid photos */
.grid-photo{aspect-ratio:3/4; border-radius:var(--radius-sm); overflow:hidden; background:var(--ink-200); margin-bottom:var(--space-3);}
.grid-photo--wide{aspect-ratio:16/9; margin-bottom:0;}
.grid-photo img{width:100%; height:100%; object-fit:cover; object-position:var(--focus,50% 50%); display:block;}

/* v37 */
.how-video--16x9{aspect-ratio:16/9;}

/* Success stories: copy centered, Jasper photos left, Dakota photos right (uniform 4:3) */
.story-layout{display:grid; gap:var(--space-6); grid-template-columns:1fr; align-items:center;}
.story-side{display:grid; gap:var(--space-4); grid-template-columns:1fr 1fr;}
.story-photo{margin:0; aspect-ratio:4/3; border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-card);}
.story-photo img{width:100%; height:100%; object-fit:cover; display:block;}
.story-copy p{font-size:18px; line-height:1.65;}
.story-copy a{color:var(--blue-600); text-underline-offset:3px;}
@media (min-width:1000px){
 .story-layout{grid-template-columns:1fr 1.5fr 1fr; gap:var(--space-8);}
 .story-side{grid-template-columns:1fr;}
 .story-side--jasper{order:-1;}
}

/* v40: home success collage (2x2), contact card logo */
.teaser-collage{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); max-width:520px; width:100%; justify-self:end;}
.teaser-collage figure{margin:0; position:relative; border-radius:var(--radius-sm); overflow:hidden; box-shadow:var(--shadow-card); aspect-ratio:4/3;}
.teaser-collage img{width:100%; height:100%; object-fit:cover; display:block;}
.teaser-collage figcaption{position:absolute; left:0; right:0; bottom:0; padding:6px 10px; font-size:13px; font-weight:600; color:#fff; background:linear-gradient(transparent,rgba(0,0,0,.65));}
@media (max-width:899px){.teaser-collage{justify-self:start;}}
.card-logo{display:block; height:110px; width:auto; margin:0 0 var(--space-4);}

/* v41: review links, contact logo bottom right */
.review-links{margin:var(--space-4) 0 0; font-size:15px; color:var(--text-secondary);}
.review-links a{font-weight:700;}
.card-logo{position:absolute; right:var(--space-6); bottom:var(--space-6); margin:0;}
@media (max-width:600px){.card-logo{position:static; margin:var(--space-4) 0 0 auto;}}

/* v49: contact card social icons (icon-only), clear of the logo */
.card .social-link{margin-top:0;}
.card .social-link + .social-link{margin-left:0;}