
:root{
  --navy:#10243e; --blue:#1d5f91; --sky:#eaf5fb; --orange:#f39a4a;
  --cream:#fffaf4; --ink:#1e2a36; --muted:#617181; --white:#fff;
  --border:#dbe5ec; --shadow:0 18px 45px rgba(16,36,62,.10);
  --radius:18px; --max:1120px;
}
*{box-sizing:border-box} html{scroll-behavior:smooth}
body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink);background:#fff;line-height:1.65}
img{max-width:100%;display:block} a{color:inherit}
.container{width:min(100% - 40px,var(--max));margin:auto}
.site-header{position:sticky;top:0;z-index:20;background:rgba(255,255,255,.96);backdrop-filter:blur(10px);border-bottom:1px solid var(--border)}
.nav{min-height:76px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.logo{display:flex;align-items:center;gap:11px;text-decoration:none;font-weight:800;color:var(--navy);font-size:1.08rem}
.logo-mark{width:40px;height:40px;border-radius:12px;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:900}
.nav-links{display:flex;align-items:center;gap:7px;list-style:none;padding:0;margin:0}
.nav-links a{display:block;text-decoration:none;padding:10px 14px;border-radius:10px;font-weight:650;color:#435466}
.nav-links a:hover,.nav-links a.active{background:var(--sky);color:var(--blue)}
.menu-toggle{display:none;border:0;background:var(--sky);color:var(--navy);border-radius:10px;padding:9px 12px;font-size:1.2rem}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 20px;border-radius:12px;text-decoration:none;font-weight:750;border:2px solid transparent;cursor:pointer}
.btn-primary{background:var(--orange);color:#1f2933}.btn-primary:hover{filter:brightness(.96)}
.btn-secondary{background:#fff;border-color:var(--border);color:var(--navy)}
.hero{background:linear-gradient(135deg,#eef8fd 0%,#fffaf4 100%);padding:78px 0 72px}
.hero-grid{display:grid;grid-template-columns:1.03fr .97fr;gap:55px;align-items:center}
.eyebrow{text-transform:uppercase;letter-spacing:.12em;font-size:.78rem;font-weight:800;color:var(--blue);margin:0 0 10px}
h1{font-size:clamp(2.3rem,5vw,4.25rem);line-height:1.04;letter-spacing:-.045em;color:var(--navy);margin:0 0 20px}
h2{font-size:clamp(1.7rem,3vw,2.45rem);line-height:1.15;color:var(--navy);letter-spacing:-.025em;margin:0 0 15px}
h3{color:var(--navy);margin:0 0 8px}
.lead{font-size:1.12rem;color:var(--muted);max-width:640px}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}
.hero-art{border-radius:26px;overflow:hidden;box-shadow:var(--shadow);background:#dceef7}
.hero-art img{width:100%;height:auto}
.section{padding:76px 0}.section-soft{background:var(--cream)}
.section-head{max-width:680px;margin-bottom:34px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--border);border-radius:var(--radius);padding:26px;box-shadow:0 8px 28px rgba(16,36,62,.05)}
.icon{width:48px;height:48px;border-radius:14px;background:var(--sky);display:grid;place-items:center;color:var(--blue);font-size:1.35rem;margin-bottom:17px}
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:15px}
.step{padding:22px;border-radius:16px;background:#fff;border:1px solid var(--border)}
.step-num{font-weight:900;color:var(--orange);font-size:1.4rem}
.band{background:var(--navy);color:#fff;padding:54px 0}.band h2{color:#fff}.band p{color:#d6e2ed}
.band-grid{display:flex;align-items:center;justify-content:space-between;gap:30px}
.page-hero{background:linear-gradient(135deg,#eef8fd,#fffaf4);padding:55px 0}.page-hero p{max-width:720px;color:var(--muted)}
.price-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.price-card{border:1px solid var(--border);border-radius:20px;padding:30px;background:#fff;position:relative}
.price-card.featured{border:2px solid var(--orange);box-shadow:var(--shadow)}
.badge{position:absolute;top:18px;right:18px;background:#fff1e4;color:#a85b1c;padding:5px 10px;border-radius:999px;font-size:.75rem;font-weight:800}
.price{font-size:2.25rem;color:var(--navy);font-weight:850;line-height:1.1;margin:16px 0}
.price small{font-size:.9rem;color:var(--muted);font-weight:600}
.price-card ul{padding:0;margin:22px 0;list-style:none;color:#516170}.price-card li{padding:7px 0}.price-card li:before{content:"✓";color:#26815a;font-weight:900;margin-right:9px}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:45px;align-items:center}
.about-art{border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.about-art img{width:100%;height:auto}
.list{padding:0;list-style:none}.list li{margin:12px 0}.list li:before{content:"✓";color:#26815a;font-weight:900;margin-right:10px}
.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:35px}
.contact-box{padding:27px;border:1px solid var(--border);border-radius:18px;background:#fff;margin-bottom:16px}
.contact-box a{text-decoration:none;color:var(--blue);font-weight:700}
form{background:#fff;border:1px solid var(--border);border-radius:20px;padding:30px;box-shadow:var(--shadow)}
.field{margin-bottom:17px}.field label{display:block;font-weight:700;margin-bottom:7px;color:var(--navy)}
input,textarea,select{width:100%;font:inherit;border:1px solid #cbd8e1;border-radius:10px;padding:12px 13px;color:var(--ink);background:#fff}
textarea{min-height:145px;resize:vertical}input:focus,textarea:focus,select:focus{outline:3px solid #d9eef9;border-color:var(--blue)}
.form-message{display:none;margin-top:15px;padding:12px 14px;border-radius:10px;background:#e9f7ef;color:#23633e;font-weight:650}
.site-footer{background:#0b1b2e;color:#c9d6e2;padding:44px 0 20px}
.footer-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:30px}
.site-footer h3{color:#fff}.site-footer a{color:#c9d6e2;text-decoration:none}.site-footer a:hover{color:#fff}
.copyright{border-top:1px solid #284057;margin-top:28px;padding-top:18px;font-size:.9rem}
.notice{padding:15px 17px;background:#eef8fd;border-left:4px solid var(--blue);border-radius:10px;color:#38546c}
.logo small{display:block;font-size:.68rem;line-height:1.1;font-weight:650;letter-spacing:.05em;color:var(--muted)}
.logo{line-height:1.2;white-space:nowrap}.nav-links{gap:1px}.nav-links a{padding:9px 10px;font-size:.94rem}
.narrow{max-width:760px}.narrow p{max-width:70ch}.spaced{margin-top:20px}.section-note{margin-top:25px}
.card a{text-decoration:none}.card a:hover,.text-link:hover{text-decoration:underline}.text-link{color:var(--blue);font-weight:700}
.brand-image{width:190px;height:auto;max-height:96px;object-fit:contain}
.hero-actions .btn-primary{box-shadow:0 5px 0 #bd682a,0 9px 18px rgba(16,36,62,.16);transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.hero-actions .btn-primary:hover{transform:translateY(2px);box-shadow:0 3px 0 #bd682a,0 6px 12px rgba(16,36,62,.16)}
.hero-actions .btn-primary:active{transform:translateY(5px);box-shadow:0 0 0 #bd682a,0 2px 5px rgba(16,36,62,.12)}
.hero-actions .btn-primary:focus-visible{outline:3px solid var(--navy);outline-offset:5px}
.form-help{font-size:.92rem;color:var(--muted)}.message-fallback{margin-top:18px}.message-fallback label{display:block;font-weight:700;margin-bottom:8px}.message-fallback textarea{min-height:160px}
.form-message.error{background:#fff0ed;color:#9a3325}.btn:disabled{opacity:.65;cursor:wait}
[hidden]{display:none!important}.booking-column>form{margin-top:12px}
.home-cards{gap:14px}.home-cards .card{display:flex;flex-direction:column;min-height:190px;padding:24px 22px}.home-cards .card h3{min-height:2.5em}.home-cards .card p{margin:0;flex:1}
.card-link{text-decoration:none;color:inherit}.card-link:hover{border-color:var(--blue);box-shadow:var(--shadow);transform:translateY(-2px)}.card-link:focus-visible{outline:3px solid var(--blue);outline-offset:3px}
.home-feature-section .card-link{background:#ffd2ad;border:2px solid #f5b67f;border-radius:12px;box-shadow:0 5px 0 #d98542;transition:transform .12s ease,box-shadow .12s ease,background .12s ease}
.home-feature-section .card-link:hover{background:#ffca9b;transform:translateY(2px);box-shadow:0 3px 0 #d98542}
.home-feature-section .card-link:active{transform:translateY(5px);box-shadow:0 0 0 #d98542}
.home-cards .card{padding-left:18px;padding-right:18px}
.home-cards .card h3{font-size:1.25rem;min-height:0;white-space:nowrap}
.home-feature-section .home-cards .card h3{font-size:1.5rem}
@media(max-width:1050px){.home-cards{grid-template-columns:1fr}.home-cards .card h3{white-space:nowrap}}
@media(max-width:520px){.home-feature-section .home-cards .card h3{font-size:1.35rem}.home-cards .card h3{white-space:normal}}
.breadcrumbs{background:#f7fbfd;border-bottom:1px solid var(--border);font-size:.9rem}.breadcrumbs ol{display:flex;flex-wrap:wrap;gap:8px;list-style:none;margin:0;padding:10px 0}.breadcrumbs li+li:before{content:"/";color:var(--muted);margin-right:8px}.breadcrumbs a{color:var(--blue)}
@media(max-width:850px){.home-cards .card{min-height:0}.home-cards .card h3{min-height:0}}
.hero-art{position:relative}.hero-art .car-logo{position:absolute;left:32.4%;top:60%;width:31.5%;height:15%;object-fit:contain;background:transparent}
@media(max-width:520px){.brand-image{width:155px}}
@media(max-width:1050px){.nav-links{display:none;position:absolute;left:20px;right:20px;top:68px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.nav-links.open{display:flex}.menu-toggle{display:block}}
@media(max-width:850px){
 .nav-links{display:none;position:absolute;left:20px;right:20px;top:68px;background:#fff;border:1px solid var(--border);border-radius:14px;padding:10px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}
 .nav-links.open{display:flex}.menu-toggle{display:block}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}
 .cards,.price-grid{grid-template-columns:1fr}.steps{grid-template-columns:1fr 1fr}.band-grid{flex-direction:column;align-items:flex-start}.footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:520px){.container{width:min(100% - 28px,var(--max))}.hero{padding:52px 0}.section{padding:55px 0}.steps,.footer-grid{grid-template-columns:1fr}.nav{min-height:68px}h1{font-size:2.5rem}}

/* Area card headings use the same type size as the lesson cards below. */
.section-soft .home-cards .card h3{font-size:1.25rem;letter-spacing:normal;white-space:normal}
.hero-article-link{margin:22px 0 0;max-width:36rem;font-weight:750;line-height:1.4}
.hero-article-link a{color:var(--blue);text-decoration:underline;text-underline-offset:4px}
.hero-article-link a:hover{color:var(--navy)}
.hero-article-link a:focus-visible{outline:3px solid var(--orange);outline-offset:4px}
.article-content{max-width:760px;font-size:1.08rem}
.article-content p{margin:0 0 1.35em}
.article-content h2{font-size:clamp(1.45rem,2.5vw,1.9rem);margin:1.5em 0 .5em}
.article-content a{color:var(--blue);font-weight:700}
.theory-app-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.theory-app{display:flex;flex-direction:column}
.theory-app h2{font-size:1.42rem;line-height:1.3;margin-bottom:8px}
.theory-app>p{margin:0 0 18px}
.app-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:auto}
.app-links .btn{padding:9px 14px;color:var(--blue);font-size:.95rem}
.app-links .btn:hover{border-color:var(--blue);background:var(--sky)}
.app-links .btn:focus-visible{outline:3px solid var(--orange);outline-offset:3px}
.app-note{max-width:790px;margin:28px 0 0;color:var(--muted)}
.app-note a{color:var(--blue);font-weight:700}
@media(max-width:700px){.theory-app-grid{grid-template-columns:1fr}}
.booking-choice{border:1px solid var(--border);border-radius:12px;padding:14px 16px;margin:0 0 18px}
.booking-choice legend{font-weight:700;padding:0 5px;color:var(--navy)}
.booking-choice label{display:flex;align-items:center;gap:9px;margin:8px 0;cursor:pointer}
.booking-choice input[type="radio"]{width:20px;height:20px;margin:0;accent-color:var(--blue);flex-shrink:0}
.weekly-note{background:var(--sky);border-radius:10px;padding:12px 16px;margin:0 0 20px}
.lesson-option-heading{display:flex;align-items:center;gap:12px;line-height:1.3}
.lesson-heading-icon{width:42px;height:42px;flex:0 0 42px;color:var(--blue);background:var(--sky);border-radius:10px;padding:5px;box-sizing:content-box}
.lesson-heading-icon text{font-family:Arial,sans-serif;font-size:8px;font-weight:700;text-anchor:middle;fill:currentColor;stroke:none}

/* Match the home illustration dimensions and responsive proportions. */
.pricing-layout{grid-template-columns:1.03fr .97fr;gap:55px}
.contact-grid{grid-template-columns:.97fr 1.03fr;gap:55px}
.pricing-layout .about-art,.contact-grid .about-art{border-radius:26px}
@media(max-width:900px){.pricing-layout,.contact-grid{grid-template-columns:1fr}}

.skip-link{position:absolute;left:20px;top:-100px;z-index:1000;background:var(--navy);color:white;padding:12px 18px;border-radius:8px}
.skip-link:focus{top:12px}
:focus-visible{outline:3px solid var(--blue);outline-offset:4px}
.contact-box-title{font-size:1.17em;letter-spacing:normal;margin-bottom:8px}
