:root{
      --bg:#080d1c;
      --bg2:#0c1428;
      --panel:#171f39;
      --panel2:#202945;
      --gold:#f3b63f;
      --gold2:#d99a27;
      --cream:#f7f3e9;
      --white:#ffffff;
      --muted:#b6bfd0;
      --line:rgba(255,255,255,.10);
      --blue:#6da9ff;
      --green:#58d68d;
      --shadow:0 25px 70px rgba(0,0,0,.28);
      --serif:"Playfair Display",Georgia,serif;
      --sans:"DM Sans",Arial,sans-serif;
      --head:"Manrope",Arial,sans-serif;
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      background:var(--bg);
      color:var(--white);
      font-family:var(--sans);
      line-height:1.65;
      overflow-x:hidden;
    }
    a{text-decoration:none;color:inherit}
    button,input,select,textarea{font:inherit}
    .container{width:min(1180px,92%);margin:auto}

    /* TOP CONTACT BAR */
    /* SECONDARY STRIP */
    
    /* HERO CARD */
    

    /* COMMON */
    .section{padding:92px 0}
    .eyebrow{
      color:var(--gold);
      font-family:var(--head);
      font-weight:800;
      font-size:13px;
      letter-spacing:.14em;
      text-transform:uppercase;
      margin-bottom:13px;
    }
    .section-title{
      font-family:var(--serif);
      font-weight:600;
      font-size:clamp(38px,4.8vw,60px);
      line-height:1.08;
      letter-spacing:-.035em;
    }
    .section-intro{
      color:var(--muted);
      max-width:700px;
      margin-top:15px;
      font-size:17px;
    }

    /* SERVICES */
    .services{
      background:#0b1223;
    }
    .service-grid{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:20px;
      margin-top:45px;
    }
    .service-card{
      padding:33px;
      background:linear-gradient(145deg,#171f39,#11182d);
      border:1px solid var(--line);
      border-radius:19px;
      transition:.25s ease;
    }
    .service-card:hover{
      transform:translateY(-5px);
      border-color:rgba(243,182,63,.35);
      box-shadow:var(--shadow);
    }
    .service-icon{
      width:55px;
      height:55px;
      display:grid;
      place-items:center;
      border-radius:14px;
      background:rgba(243,182,63,.10);
      border:1px solid rgba(243,182,63,.20);
      font-size:25px;
      margin-bottom:22px;
    }
    .service-card h3{
      font-family:var(--head);
      font-size:24px;
      margin-bottom:9px;
    }
    .service-card p{color:var(--muted);font-size:15px}
    .service-list{
      list-style:none;
      margin-top:20px;
      display:grid;
      gap:10px;
    }
    .service-list li{
      color:#d2d8e2;
      font-size:14px;
    }
    .service-list li::before{
      content:"✓";
      color:var(--gold);
      font-weight:900;
      margin-right:10px;
    }

    /* DIFFERENCE */
    .difference{
      background:#f5f2eb;
      color:#111a2c;
    }
    .difference .section-intro{color:#697284}
    .difference-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:17px;
      margin-top:45px;
    }
    .difference-card{
      background:#fff;
      border:1px solid #e3ded4;
      border-radius:17px;
      padding:28px;
    }
    .difference-card .num{
      color:#b27b22;
      font-family:var(--head);
      font-weight:900;
      font-size:13px;
    }
    .difference-card h3{
      font-family:var(--head);
      font-size:19px;
      margin:13px 0 7px;
    }
    .difference-card p{color:#687386;font-size:14px}

    /* CLASSES */
    .classes{background:#0d1428}
    .class-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:13px;
      margin-top:38px;
    }
    .class-card{
      text-align:center;
      padding:24px 14px;
      border:1px solid var(--line);
      border-radius:13px;
      background:rgba(255,255,255,.025);
    }
    .class-card strong{
      font-family:var(--serif);
      font-size:27px;
      color:var(--gold);
    }
    .class-card span{display:block;color:#aeb8ca;font-size:13px;margin-top:3px}

    /* PROCESS */
    .process{background:#080d1c}
    .process-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
      margin-top:45px;
    }
    .process-step{
      position:relative;
      padding:27px;
      border-top:1px solid rgba(243,182,63,.45);
      background:linear-gradient(180deg,rgba(255,255,255,.025),transparent);
    }
    .process-step .number{
      font-family:var(--serif);
      color:var(--gold);
      font-size:38px;
    }
    .process-step h3{
      font-family:var(--head);
      font-size:17px;
      margin:9px 0 7px;
    }
    .process-step p{color:var(--muted);font-size:14px}

    /* PARENT MESSAGE */
    .parent{
      background:#f5f2eb;
      color:#101a2c;
    }
    .parent-grid{
      display:grid;
      grid-template-columns:.85fr 1.15fr;
      gap:60px;
      align-items:center;
    }
    .parent-list{display:grid;gap:17px;margin-top:26px}
    .parent-list article{display:flex;gap:12px}
    .check{
      width:27px;height:27px;min-width:27px;
      display:grid;place-items:center;
      border-radius:50%;
      background:#ead8ae;color:#8b6016;font-weight:900;
    }
    .parent-list h3{font-family:var(--head);font-size:17px}
    .parent-list p{color:#697386;font-size:14px;margin-top:2px}
    .parent-quote{
      background:#fff;
      border:1px solid #e1dbcf;
      border-left:5px solid var(--gold);
      border-radius:0 20px 20px 0;
      padding:42px;
      box-shadow:0 20px 55px rgba(31,37,48,.08);
    }
    .parent-quote p{
      font-family:var(--serif);
      font-size:30px;
      line-height:1.35;
      color:#17213a;
    }
    .parent-quote small{display:block;color:#7a8391;margin-top:17px}

    /* ENQUIRY */
    .enquiry{background:#10172c}
    .enquiry-grid{
      display:grid;
      grid-template-columns:.75fr 1.25fr;
      gap:25px;
      margin-top:40px;
    }
    .contact-card{
      background:linear-gradient(145deg,#1d2745,#131b31);
      border:1px solid var(--line);
      border-radius:20px;
      padding:33px;
    }
    .contact-card h3{
      font-family:var(--serif);
      font-size:36px;
      line-height:1.15;
    }
    .contact-card > p{color:var(--muted);margin:13px 0 27px}
    .contact-info{display:grid;gap:17px}
    .contact-info a{
      display:flex;
      align-items:flex-start;
      gap:13px;
    }
    .contact-info a:hover .contact-text strong{color:var(--gold)}
    .contact-icon{
      width:42px;height:42px;min-width:42px;
      display:grid;place-items:center;
      border-radius:10px;
      background:rgba(243,182,63,.09);
      border:1px solid rgba(243,182,63,.18);
    }
    .contact-text strong{display:block;font-family:var(--head);transition:.2s}
    .contact-text span{display:block;color:#aeb8ca;font-size:13px}

    .form-card{
      background:#fff;
      color:#172033;
      border-radius:20px;
      padding:32px;
    }
    .form-card h3{font-family:var(--head);font-size:24px}
    .form-card > p{color:#717b8b;font-size:14px;margin:4px 0 22px}
    .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .field{display:grid;gap:6px}
    .field.full{grid-column:1/-1}
    label{font-size:13px;font-weight:800;color:#3f4b5d}
    input,select,textarea{
      width:100%;
      padding:12px 13px;
      border:1px solid #dce2e8;
      border-radius:9px;
      outline:none;
      background:#fff;
      color:#172033;
    }
    input:focus,select:focus,textarea:focus{
      border-color:#c79739;
      box-shadow:0 0 0 3px rgba(243,182,63,.13);
    }
    textarea{min-height:105px;resize:vertical}
    .form-submit{margin-top:17px}
    .form-submit .btn{width:100%}
    .form-note{font-size:11px;color:#7c8795;margin-top:10px;text-align:center}
    /* =========================================
   WHATSAPP ENQUIRY BUTTON
   ========================================= */

.form-submit .btn.btn-gold {
  width: 100%;
  min-height: 54px;
  padding: 14px 24px;

  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  border: none;
  border-radius: 12px;

  background: linear-gradient(135deg, #25D366, #128C7E);
  color: #ffffff;

  font-family: var(--head);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: .01em;

  cursor: pointer;

  box-shadow:
    0 8px 20px rgba(37, 211, 102, .20),
    0 2px 5px rgba(0, 0, 0, .12);

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;
}

/* Hover */
.form-submit .btn.btn-gold:hover {
  background: linear-gradient(135deg, #20c863, #0f8175);

  transform: translateY(-3px);

  box-shadow:
    0 14px 30px rgba(37, 211, 102, .30),
    0 5px 10px rgba(0, 0, 0, .12);
}

/* Click */
.form-submit .btn.btn-gold:active {
  transform: translateY(-1px);
  box-shadow:
    0 6px 15px rgba(37, 211, 102, .20);
}

/* Keyboard accessibility */
.form-submit .btn.btn-gold:focus-visible {
  outline: 3px solid rgba(37, 211, 102, .35);
  outline-offset: 3px;
}

/* Arrow animation */
.form-submit .btn.btn-gold::after {
  content: "→";
  font-size: 19px;
  line-height: 1;
  transition: transform .25s ease;
}

.form-submit .btn.btn-gold:hover::after {
  transform: translateX(5px);
}

/* Mobile */
@media (max-width: 560px) {
  .form-submit .btn.btn-gold {
    min-height: 52px;
    padding: 13px 18px;
    font-size: 14px;
  }
}

    /* FAQ ACCORDION */
    .faq{background:#0b1223}
    .faq-wrap{max-width:850px;margin:42px auto 0}
    .faq-item{
      border:1px solid var(--line);
      border-radius:14px;
      margin-bottom:12px;
      overflow:hidden;
      background:rgba(255,255,255,.025);
    }
    .faq-q{
      width:100%;
      background:transparent;
      color:#fff;
      border:0;
      padding:21px 20px;
      text-align:left;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:20px;
      font-weight:800;
      cursor:pointer;
      appearance:none;
      -webkit-appearance:none;
      text-decoration:none;
    }
    .faq-q:hover{background:rgba(255,255,255,.035)}
    .faq-question{flex:1}
    .faq-plus{
      width:32px;
      height:32px;
      min-width:32px;
      display:grid;
      place-items:center;
      color:var(--gold);
      font-size:28px;
      font-weight:400;
      line-height:1;
      transition:transform .25s ease;
    }
    .faq-a{
      display:none;
      color:var(--muted);
      font-size:14px;
      line-height:1.7;
      padding:0 58px 21px 20px;
    }
    .faq-item.open .faq-a{display:block}
    .faq-item.open .faq-plus{transform:rotate(45deg)}
    .faq-q:focus-visible{
      outline:2px solid var(--gold);
      outline-offset:-2px;
    }

    /* FINAL CTA */
    .final{
      padding:70px 0;
      background:linear-gradient(120deg,#ffffec,#fffee8);
    }
    .final-box{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:30px;
    }
    .final h2 { 
  color: #000;
  font-family: var(--serif); 
  font-size: clamp(35px, 4vw, 52px); 
  line-height: 1.08; 
}

    .final p{color:#000307;margin-top:9px}

    /* FOOTER */
    
    /* FLOAT */
    
    /* RESPONSIVE */
    @media(max-width:1000px){
      .nav-links{gap:18px;font-size:14px}
      .hero-inner{gap:35px}
      .brand{min-width:auto}
      .difference-grid{grid-template-columns:1fr 1fr}
      .process-grid{grid-template-columns:1fr 1fr}
    }
    @media(max-width:800px){
      .topbar-inner{gap:8px 18px}
      .navbar{min-height:78px}
      .brand-logo{width:53px;height:53px}
      .brand-text strong{font-size:21px}
      .brand-text small{font-size:9px}
      .menu{display:block}
      .nav-links{
        display:none;
        position:absolute;
        top:78px;
        left:4%;
        right:4%;
        background:#fff;
        padding:12px;
        border-radius:12px;
        box-shadow:0 20px 50px rgba(0,0,0,.16);
        flex-direction:column;
        align-items:stretch;
        gap:0;
      }
      .nav-links.active{display:flex}
      .nav-links a{padding:12px}
      .nav-links .nav-button{text-align:center;margin-top:5px}
      .quick-strip{display:none}
      .hero-inner,.parent-grid,.enquiry-grid{grid-template-columns:1fr}
      .hero{min-height:auto}
      .hero-inner{min-height:auto;padding:58px 0}
      .hero h1{font-size:54px}
      .hero-card{max-width:650px}
      .service-grid{grid-template-columns:1fr}
      .class-grid{grid-template-columns:1fr 1fr}
      .difference-grid{grid-template-columns:1fr}
      .process-grid{grid-template-columns:1fr 1fr}
      .parent-grid{gap:35px}
      .final-box{align-items:flex-start;flex-direction:column}
    }
    @media(max-width:560px){
      .topbar{font-size:12px}
      .topbar-inner{display:block;padding:7px 0}
      .topbar-inner span{display:block}
      .hero h1{font-size:45px}
      .hero-description{font-size:16px}
      .hero-card{padding:23px}
      .learning-grid,.form-grid,.process-grid{grid-template-columns:1fr}
      .field.full{grid-column:auto}
      .section{padding:70px 0}
      .section-title{font-size:40px}
      .parent-quote{padding:28px}
      .parent-quote p{font-size:25px}
      .contact-card,.form-card{padding:25px}
      .final .btn{width:100%}
    }