:root { --bg:#0f0f10; --card:#161618; --text:#f6f6f7; --muted:#c9c9cf; --accent:#eab308; --accent-2:#f97316; --max:1100px; --radius:18px; }
*{ box-sizing:border-box } html,body{ margin:0; height:100% }
body{ font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; background: radial-gradient(1200px 800px at 80% -10%, #1e1e22 10%, var(--bg) 60%), var(--bg); color:var(--text); line-height:1.6 }
a{ color:var(--text); text-decoration:none } .container{ max-width:var(--max); margin:0 auto; padding:0 20px }

header{ position:sticky; top:0; backdrop-filter: blur(8px); background: rgba(15,15,16,.6); border-bottom:1px solid #242428; z-index:50 }
.nav{ display:flex; align-items:center; justify-content:space-between; padding:14px 0 }
.brand{ display:flex; align-items:center; gap:12px; font-weight:700 }
.brand-logo{ width:36px; height:36px; border-radius:50%; background:linear-gradient(135deg,var(--accent),var(--accent-2)); display:grid; place-items:center; color:#111; font-weight:800 }
.brand-name .short-name { display:none; }
.nav-links{ display:flex; gap:18px; font-size:14px }

.sr-only { position:absolute!important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }

/* Contact form */
#contact .card form label { display:block; font-weight:600; margin:10px 0 6px; }
#contact .card form input, #contact .card form textarea{
  width:100%; display:block; background:#111115; color:var(--text);
  border:1px solid #2a2a30; border-radius:10px; padding:10px 12px; font:inherit; outline:none;
}
#contact .card form textarea { resize:vertical; min-height:120px; }
#contact .card form > div { margin-bottom:10px; }
#contact .card ::placeholder { color: var(--muted); }
#contact .card { background: var(--card); border: 1px solid #26262c; border-radius: var(--radius); }
#contact .card form button { margin-top: 6px; }
#schedule-badges { display:none; } /* hidden */

@media (min-width:800px){
  #contact .card form .row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
  #contact .card form .row > div{ margin-bottom:0; }
}

/* Nav alignment */
header .nav-links a{ display:inline-flex; align-items:center; height:40px; line-height:1; padding:0 10px; border-radius:10px; }
header .nav-links a.btn{ height:40px; padding:0 14px; }
header .nav-links{ gap:16px; }

.btn{ display:inline-flex; align-items:center; gap:10px; padding:12px 16px; border-radius:999px; border:1px solid #2a2a30; background:#1b1b1f; color:var(--text); font-weight:600 }
.btn.primary{ background:linear-gradient(135deg,var(--accent),var(--accent-2)); color:#111; border:none }

.hero{ padding:64px 0 40px }
.hero-grid{ display:grid; grid-template-columns: 1.4fr 1fr; gap:28px; align-items:start; }
.hero-grid > div:first-child{ max-width:680px; }
.hero-card{ max-width:520px; margin-left:auto; }

.hero h1{ font-size:clamp(32px,6vw,58px); line-height:1.05; margin:0 0 12px }
.hero p{ color:var(--muted); margin:0 0 22px; font-size:clamp(15px,2vw,18px) }
.meta{ display:flex; flex-wrap:wrap; gap:10px; margin:16px 0 26px }
.chip{ background:#202026; border:1px solid #2a2a30; padding:8px 12px; border-radius:999px; font-size:12px; color:var(--muted) }

.hero-card{ position:relative; background:linear-gradient(180deg,#1c1c22,#121215); border:1px solid #26262c; border-radius:var(--radius); padding:12px; box-shadow:0 10px 30px rgba(0,0,0,.35) }
.hero-img{ aspect-ratio:4/5; width:100%; border-radius:calc(var(--radius) - 6px); background:center/cover no-repeat; transition:opacity .45s ease-in-out; opacity:1; }

/* carousel UI */
.dots{ display:flex; gap:6px; margin-top:10px; justify-content:center }
.dot{ width:8px; height:8px; border-radius:999px; background:#2a2a30; cursor:pointer; }
.dot.active{ background:var(--accent) }
.carousel-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:36px; height:36px; border-radius:999px; border:1px solid #2a2a30;
  background:#1b1b1f; color:var(--text); display:none; place-items:center; cursor:pointer; opacity:.85;
}
.carousel-arrow.prev{ left:8px } .carousel-arrow.next{ right:8px }

section{ padding:52px 0 }
.section-title{ font-size:28px; margin:0 0 10px } .section-sub{ color:var(--muted); margin-top:0 }
.about{ display:grid; grid-template-columns:1fr 1fr; gap:24px }
.card{ background:var(--card); border:1px solid #26262c; border-radius:var(--radius); padding:20px }
.achievements{ display:grid; grid-template-columns:repeat(3,1fr); gap:16px }
.badge{ font-size:13px; color:var(--muted) }

/* === Students carousel (snap + one-card advance) === */
.students-wrap{ overflow:hidden; position:relative; border-radius:var(--radius); }
.students-track{
  display:flex; gap:16px; padding-bottom:6px;
  overflow-x:auto; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.students-track::-webkit-scrollbar{ display:none; }
.student{
  flex:0 0 clamp(280px, 32vw, 420px);
  background:var(--card); border:1px solid #26262c; border-radius:var(--radius); padding:18px;
  scroll-snap-align:start;
}
.student .top{ display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.avatar{ width:56px; height:56px; border-radius:50%; border:1px solid #2a2a30; background:#26262c; overflow:hidden; flex:0 0 56px; }
.avatar img{ width:100%; height:100%; display:block; object-fit:cover; border-radius:50%; }
.student strong{ font-size:18px; line-height:1.2 }
.student p{ margin:6px 0 0; color:var(--muted) }
@media (min-width:1100px){ .student{ flex-basis:480px } }

/* === Gallery carousel === */
.gallery-wrap{ overflow:hidden; position:relative; border-radius:var(--radius); }
.gallery-track{
  display:flex; gap:16px; padding:6px 0;
  overflow-x:auto; scroll-behavior:smooth;
  -ms-overflow-style:none; scrollbar-width:none;
  scroll-snap-type:x mandatory;
}
.gallery-track::-webkit-scrollbar{ display:none; }
.gitem{
  flex:0 0 clamp(220px, 28vw, 320px);
  aspect-ratio:1;
  border-radius:12px; border:1px solid #2a2a30;
  background:#24242a center/cover no-repeat;
  scroll-snap-align:start;
}
@media (min-width:1100px){ .gitem{ flex-basis:360px } }

.cta{ display:grid; grid-template-columns:1.2fr 1fr; gap:18px; align-items:center }

/* Enquire button placement */
.weekly-schedule-card{ position:relative; padding-right:180px; }
.weekly-schedule-card .btn.primary{
  position:absolute; right:24px; top:50%; transform:translateY(-50%); margin-top:0;
}
@media (max-width:700px){
  .weekly-schedule-card{ padding-right:20px; }
  .weekly-schedule-card .btn.primary{ position:static; transform:none; width:100%; margin-top:12px; }
}

/* Social buttons (local image icons) */
.social{ display:flex; gap:12px; margin-top:12px; flex-wrap:wrap }
.social a{ display:inline-block; line-height:0; }
.social .social-icon{
  width:44px; height:44px; border-radius:50%;
  object-fit:cover; display:block;
  box-shadow:0 6px 16px rgba(0,0,0,.25);
  transition: transform .2s ease, box-shadow .2s ease;
}
.social a:hover .social-icon{
  transform: translateY(-2px) scale(1.04);
  box-shadow:0 8px 20px rgba(0,0,0,.35);
}

footer{ border-top:1px solid #242428; color:var(--muted); padding:22px 0 40px }

@media (max-width:1100px){ .hero-grid{ grid-template-columns:1.2fr .9fr } }
@media (max-width:900px){ .hero-grid{ grid-template-columns:1fr } .hero-card{ max-width:none } }
@media (max-width:600px){ .brand-name .full-name{ display:none } .brand-name .short-name{ display:inline } }
@media (max-width:560px){
  .carousel-arrow{ width:44px; height:44px; }
  header .nav-links a{ padding:0 8px; }
}