:root{ --primary:#FF6F00; --primary-light:#FF8F3A; --primary-soft:#FFF3E6; --navy:#0B2239; --text:#1B2B41; --muted:#5A6B81; --bg:#FFFFFF; --panel:#F7F9FC; --border:#E6EAF0; --shadow:0 10px 30px rgba(16,24,40,.08); --radius:14px; --container:1200px }
*{box-sizing:border-box}
html,body{height:100%}
body{font-family:'Open Sans',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; color:var(--text); margin:0; background:var(--bg)}
a{color:inherit;text-decoration:none}
a:focus, button:focus{outline:3px solid #FDBA74; outline-offset:2px}
img,svg{display:block; max-width:100%; height:auto}
.muted{color:var(--muted)}
.hidden{position:absolute !important; left:-9999px}

.container{ width:min(var(--container), 94%); margin:0 auto }
.section{ padding:3rem 0 }
.section.alt{ background:#F6F8FB; border-top:1px solid var(--border); border-bottom:1px solid var(--border) }
.section-header{ text-align:center; margin-bottom:2rem }
.section-header h2{ margin:0 0 .5rem; color:var(--navy) }

/* Header (same as v3) */
.site-header{ position:sticky; top:0; z-index:1000; background:rgba(255,255,255,.85); backdrop-filter:saturate(160%) blur(14px); border-bottom:1px solid var(--border); transition:box-shadow .25s ease, background-color .25s ease, border-color .25s ease }
.site-header.is-scrolled{ box-shadow:0 2px 6px rgba(17,24,39,.04), 0 12px 28px rgba(17,24,39,.08); background:#fff }
.header-grid{ display:grid; grid-template-columns:1fr auto 1fr; align-items:center; gap:1rem; padding:.75rem 0 }
.brand{ display:inline-flex; align-items:center; gap:.65rem; font-weight:800; letter-spacing:.2px }
.brand-text{ display:inline-flex; gap:.25rem; align-items:baseline; font-size:1.2rem; color:var(--navy) }
.brand-strong{ font-weight:800 }
.brand-accent{ color:var(--primary); font-weight:800 }
.nav{ justify-self:center }
.nav-list{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem }
.nav-list>li>a, .nav-link-dropdown{ padding:.6rem .8rem; border-radius:10px; font-weight:600; color:var(--navy) }
.nav-list>li>a:hover, .nav-link-dropdown:hover{ background:var(--primary-soft); color:var(--primary) }
.nav-list a[aria-current="page"]{ color:var(--primary); background:var(--primary-soft); font-weight:700; box-shadow:inset 0 0 0 1px rgba(255,111,0,.25) }
.has-dropdown{ position:relative }
.nav-link-dropdown{ display:inline-flex; align-items:center; gap:.35rem; border:0; background:transparent; cursor:pointer }
.chev{ transition:transform .2s ease }
.has-dropdown[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.dropdown{ position:absolute; top:100%; left:0; min-width:280px; background:#fff; border:1px solid var(--border); border-radius:12px; padding:.5rem; box-shadow:var(--shadow); display:none }
.has-dropdown.open .dropdown{ display:block }
.dropdown-item{ display:block; padding:.6rem .7rem; border-radius:10px; color:var(--navy); font-weight:600 }
.dropdown-item:hover{ background:var(--primary-soft); color:var(--primary) }
.dropdown-sep{ border:0; height:1px; background:var(--border); margin:.35rem .25rem }
.dropdown-cta{ background:var(--primary); color:#fff; font-weight:800; text-align:center; margin-top:.25rem }
.dropdown-cta:hover{ background:var(--primary-light); color:#fff }
.header-actions{ justify-self:end; display:flex; gap:.5rem; align-items:center }
.btn{ display:inline-flex; align-items:center; gap:.5rem; padding:.55rem .85rem; border-radius:12px; border:1px solid transparent; font-weight:800; line-height:1; cursor:pointer }
.btn.block{ display:flex; justify-content:center; width:100% }
.btn-lg{ padding:.85rem 1.05rem }
.btn-primary{ background:var(--primary); color:#fff }
.btn-primary:hover{ background:var(--primary-light) }
.btn-ghost{ background:transparent; color:var(--primary); border:1px solid var(--primary) }
.btn-ghost:hover{ background:var(--primary-soft) }
.nav-toggle{ display:none; background:transparent; border:0; padding:.25rem .35rem; margin-left:.25rem; cursor:pointer }
.nav-toggle .bar{ width:22px; height:2px; background:var(--navy); margin:4px 0; border-radius:2px }
.mobile-panel{ position:fixed; inset:0 0 0 auto; width:min(88vw,380px); background:var(--panel); border-left:1px solid var(--border); transform:translateX(100%); transition:transform .25s ease; z-index:1200; display:flex; flex-direction:column; padding:1rem 1rem 1.25rem; box-shadow:var(--shadow); height:100dvh; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain }
.mobile-panel.open{ transform:translateX(0) }
.mobile-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem }
.panel-close{ background:transparent; border:0; cursor:pointer; padding:.4rem }
.mobile-nav{ display:grid; gap:.25rem }
.mobile-link{ padding:1rem .85rem; border-radius:12px; font-weight:700; color:var(--navy); display:flex; align-items:center; justify-content:space-between; min-height:48px }
.mobile-link:hover{ background:var(--primary-soft); color:var(--primary) }
.mobile-group[aria-expanded="true"] .mobile-toggle{ background:var(--primary-soft); color:var(--primary); box-shadow:inset 0 0 0 1px rgba(255,111,0,.25) }
.mobile-toggle{ width:100%; text-align:left }
.mobile-toggle .chev{ transition:transform .18s ease }
.mobile-group[aria-expanded="true"] .chev{ transform:rotate(180deg) }
.mobile-sub{ display:grid; gap:.2rem; padding:.2rem 0 .6rem .6rem }
.animate{ overflow:hidden }
.animate.open{ animation:expand .22s ease forwards }
.animate.close{ animation:collapse .22s ease forwards }
@keyframes expand{ from{height:0; opacity:.6} to{height:var(--target-h); opacity:1} }
@keyframes collapse{ from{height:var(--target-h); opacity:1} to{height:0; opacity:.6} }
.scrim{ position:fixed; inset:0; background:rgba(9,12,20,.35); backdrop-filter:blur(2px); opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease; z-index:1100 }
.scrim.open{ opacity:1; visibility:visible }

/* Hero */
.hero{ padding:4rem 0 2rem; background:linear-gradient(180deg,#FFFFFF 0%, #FFF6ED 100%) }
.hero-grid{ display:grid; grid-template-columns:1.05fr .95fr; gap:2rem; align-items:center }
.hero-copy h1{ font-size:clamp(2rem,4vw,3rem); line-height:1.1; margin:0 0 1rem; color:var(--navy) }
.hero-copy p{ font-size:1.1rem; color:var(--muted); margin:0 0 1rem }
.hero-bullets{ list-style:none; padding:0; margin:1rem 0 0; color:var(--navy) }
.hero-bullets li{ margin:.25rem 0; padding-left:1.4rem; position:relative }
.hero-bullets li::before{ content:"✓"; position:absolute; left:0; color:var(--primary); font-weight:700 }
.hero-media img{ border-radius:16px; box-shadow:var(--shadow) }

/* Trust strip */
.trust{ padding:.75rem 0; border-top:1px solid var(--border); border-bottom:1px solid var(--border); background:#fff }
.trust-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:.5rem; text-align:center; color:var(--navy); font-weight:700 }
.trust-item{ padding:.5rem; background:#FFFFFF; border:1px solid var(--border); border-radius:12px }

/* Courses grid */
.cards{ display:grid; gap:1rem }
.cards.six{ grid-template-columns:repeat(3,1fr) }
.card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow:var(--shadow) }
.card.course img{ border-radius:10px; margin-bottom:.6rem }
.card.course h3{ margin:.25rem 0 .25rem; color:var(--navy) }
.card.course .price{ font-weight:800; color:var(--primary); margin:.1rem 0 .4rem }
.card-actions{ display:flex; gap:.5rem }

/* Course pages */
.subhero{ background:#F9FBFF; border-bottom:1px solid var(--border); padding:2.2rem 0 }
.price-badge{ display:inline-block; font-weight:800; color:var(--primary); background:var(--primary-soft); padding:.35rem .6rem; border-radius:999px; border:1px solid #FFD7B0 }
.two-col{ display:grid; grid-template-columns:1.2fr .8fr; gap:2rem; align-items:start }
.sidecard{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow:var(--shadow) }
.plain{ list-style:none; padding:0; margin:0; display:grid; gap:.3rem }
.checklist{ list-style:none; margin:1rem 0 0; padding:0 }
.checklist li{ padding-left:1.2rem; position:relative; margin:.35rem 0 }
.checklist li::before{ content:"•"; position:absolute; left:0; color:var(--primary); font-weight:800 }

/* Booking form */
.book-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start }
.card{ background:#fff; border:1px solid var(--border); border-radius:12px; padding:1rem; box-shadow:var(--shadow) }
.grid{ display:grid; grid-template-columns:1fr 1fr; gap:1rem }
.grid .span2{ grid-column:1 / -1 }
label{ display:grid; gap:.35rem }
input,select,textarea{ padding:.7rem .8rem; border-radius:10px; border:1px solid var(--border); background:#fff; font:inherit; width:100% }
fieldset{ border:1px solid var(--border); border-radius:10px; padding:.6rem .8rem; display:grid; grid-template-columns:repeat(6,auto); gap:.35rem .8rem }
.check{ display:flex; align-items:center; gap:.5rem }

/* CTA */
.cta{ background:linear-gradient(180deg, #F6F8FB 0%, #FFFFFF 100%) }
.cta-inner{ display:flex; align-items:center; justify-content:space-between; gap:1rem; background:#fff; padding:1.2rem; border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow) }

/* Contact & Footer */
.contact-grid{ display:grid; grid-template-columns:1.1fr .9fr; gap:2rem; align-items:start }
.map{ border-radius:12px; border:1px solid var(--border); box-shadow:var(--shadow) }
.site-footer{ padding:2rem 0; border-top:1px solid var(--border); background:#FFFFFF }
.footer-grid{ display:grid; grid-template-columns:1.2fr .8fr 1fr; gap:1rem; align-items:start }
.footer-links{ list-style:none; padding:0; margin:0; display:grid; gap:.4rem }
.legal{ text-align:right }

/* Responsive */
@media (max-width:1040px){ .header-grid{ grid-template-columns:1fr auto auto } .nav{ display:none } .nav-toggle{ display:inline-flex } .hero-grid,.two-col,.book-grid,.contact-grid{ grid-template-columns:1fr } .cards.six{ grid-template-columns:1fr 1fr } .testimonials{ grid-template-columns:1fr } .cta-inner{ flex-direction:column; align-items:stretch; text-align:center } }
@media (max-width:760px){ .cards.six{ grid-template-columns:1fr } .footer-grid{ grid-template-columns:1fr; text-align:left } .legal{ text-align:left } }
@media (prefers-reduced-motion:reduce){ .site-header,.chev,.mobile-panel,.scrim,.animate{ transition:none; animation:none } }