:root{
--ink:#16233F;
--ink-2:#1F3357;
--ink-3:#2B4272;
--paper:#EEF0F0;
--paper-2:#F7F8F7;
--gold:#E3481F;
--gold-deep:#e3481f;
--muted:#000;
--line:#D8DCE2;
--white:#FFFFFF;

    --paper-card: #FFFFFF;
    --flame:      #E3481F;   /* primary accent — energy, urgency, CTA */
    --flame-dark: #B9350F;   /* pressed/deep state of flame */
    --flame-tint: #FDEAE4;   /* pale flame wash for backgrounds */
}
*{box-sizing:border-box;}
body{
font-family:'Montserrat', sans-serif;
color:var(--ink);
background:var(--paper);
-webkit-font-smoothing:antialiased;
}
h1,h2,h3,.serif{ font-family:'Montserrat', sans-serif; font-weight:700; }
.eyebrow{

letter-spacing:.14em;
text-transform:uppercase;
font-size:12px;
font-weight:600;
color:var(--gold-deep);
}

a{ color:inherit; }
img{ max-width:100%; }
.container-narrow{ max-width:1100px; margin:0 auto; padding:0 20px; }
.btn-gold{
background:var(--gold);
border:1px solid var(--gold-deep);
color:#fff;
font-weight:600;
padding:14px 30px;
border-radius:5px;
letter-spacing:.02em;
transition:transform .12s ease;
}
.btn-gold:hover, .btn-gold:focus{
color:#fff;
border:1px solid var(--gold-deep);
}
.btn-outline-ink{
background:transparent;
border:1px solid rgba(255,255,255,.4);
color:var(--white);
padding:12px 26px;
border-radius:2px;
font-weight:600;
}
.btn-outline-ink:hover, .btn-outline-ink:focus{ color:var(--white); background:rgba(255,255,255,.08); }
.section{ padding:80px 0; }
.section-tight{ padding:56px 0; }
.section-title{ font-size:30px;  margin:6px 0 14px; }
.section-lede{ color:var(--muted); font-size:16px; max-width:640px; }

/* ---------- NAV ---------- */
.navbar-cl{
background:var(--white);
border:0;
border-bottom:1px solid var(--line);
border-radius:0;
margin-bottom:0;
font-family:'Montserrat',sans-serif;
}
.navbar-cl .navbar-brand{
font-family:'Montserrat', sans-serif;
color:var(--ink)!important;
font-weight:600;
font-size:20px;
}
.navbar-cl .navbar-brand span{ color:var(--gold); }
.navbar-cl .navbar-nav>li>a{
color:var(--muted)!important;
font-weight:500;
font-size:14px;
}
.navbar-cl .navbar-nav>li>a:hover{ color:var(--gold-deep)!important; }

/* ---------- HERO ---------- */
.hero{
background:
radial-gradient(1100px 500px at 85% -10%, rgba(227,72,31,.12), transparent 60%),
linear-gradient(180deg, var(--paper-2) 0%, var(--paper) 100%);
color:var(--ink);
padding:40px 0;
position:relative;
overflow:hidden;
border-bottom:1px solid var(--line);
}
.hero:before{
content:"";
position:absolute; inset:0;
background-image:
repeating-linear-gradient(0deg, rgba(22,35,63,.045) 0 1px, transparent 1px 42px),
repeating-linear-gradient(90deg, rgba(22,35,63,.045) 0 1px, transparent 1px 42px);
pointer-events:none;
}
.hero-inner{ position:relative; z-index:1; }
.hero h1{
font-size:41px;
line-height:1.12;
margin:16px 0 18px;
color:var(--ink);
}
.hero h1 em{ font-style:italic; color:var(--gold); }
.hero-lede{ font-size:17px; color:var(--muted); max-width:560px; }
.check-list {
list-style: none;
padding: 0;
margin: 10px 0 20px;
}
.check-list li{
font-size:14px;
padding:7px 0;
color:var(--ink);
font-weight:400;
}
.check-list li:before{
content: "\f00c";
    font-family: FontAwesome;
display:inline-block;
width:22px; height:22px;
line-height:20px;
text-align:center;
border:1px solid var(--gold);
color:var(--gold);
border-radius:50%;
margin-right:10px;
font-size:12px;
font-weight:700;
}

/* ticket stub strip */
.stub-strip {
display: flex;
flex-wrap: wrap;
margin-top: 56px;
border-top: 1px dashed #bcbcbc;
}
.stub {
flex: 1 1 25%;
min-width: 200px;
padding: 26px 22px 32px;
border-right: 1px dashed var(--line);
position: relative;
text-align: center;
}
.stub:last-child{ border-right:0; }
.stub .num{

font-size:30px;
font-weight:600;
color:var(--gold);
}
.stub .lbl{
font-size:13px;
color:var(--muted);
margin-top:4px;
}
.stub:before {
content: "";
position: absolute;
top: -8px;
left: 50%;
width: 16px;
height: 16px;
margin-left: -8px;
background: #e3481f;
border: 1px solid #e3481f;
border-radius: 50%;
}

/* ---------- ENQUIRY FORM (hero) ---------- */
.tel-code {
    width: 100% !important;
}

.enquiry-card{
background:var(--white);
border:1px solid var(--line);
border-radius:4px;
padding:28px 22px 24px;
box-shadow:0 24px 50px rgba(22,35,63,.10);
position:relative;
}
.enquiry-card:before{
content:"";
position:absolute; top:0; left:0; right:0;
height:4px;
background:var(--gold);
}
.enquiry-card h3 {
    font-size: 19px;
    font-weight: 700;
    margin: 0 0 4px;
    color: var(--ink);
    text-align: center;
}
.enquiry-card .sub{
font-size:12px;
color:var(--muted);
margin-bottom:18px;
}
.enquiry-card img{display: none;}
.enquiry-card .form-group{ margin-bottom:12px; }
.enquiry-card .form-control{
height:40px;
border:1px solid var(--line);
border-radius:5px;
font-size:13.5px;
box-shadow:none;
color:var(--ink);
}
.enquiry-card .form-control:focus{
border-color:var(--gold);
box-shadow:0 0 0 3px rgba(227,72,31,.12);
}
.enquiry-card select.form-control{
-webkit-appearance:none;
-moz-appearance:none;
appearance:none;
background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6'><path d='M0 0l5 6 5-6z' fill='%235B6B8C'/></svg>");
background-repeat:no-repeat;
background-position:right 14px center;
}
.enquiry-card .otp-group{ display:flex; gap:8px; }
.enquiry-card .otp-group .form-control{ flex:1; }
.btnotp {
    height: 32px;
    right: 19px !important;
    border: 1px solid var(--gold-deep);
    background: var(--gold);
    color: var(--white);
    font-size: 12.5px !important;
    font-weight: 600;
    border-radius: 2px;
    white-space: nowrap;
}
.btnotp:hover, .btnotp:focus{ color:var(--white); background:var(--gold-deep); }
.enquiry-card .btn-warning{
width: 100% !important;
height:46px!important;
background:var(--gold)!important;
border:1px solid var(--gold-deep)!important;
color:var(--white)!important;
font-weight:700!important;
font-size:14px!important;
border-radius:5px!important;
margin-top:6px!important;

}
.enquiry-card .btn-submit:hover, .enquiry-card .btn-submit:focus{
color:var(--white);
transform:translateY(2px);
box-shadow:0 4px 0 var(--gold-deep);
}
.enquiry-card .disclaimer{
font-size:10.5px;
color:var(--muted);
text-align:center;
margin-top:10px;
}

/* ---------- TOP SCORERS ---------- */
.scorer-strip{ background:var(--white); border-bottom:1px solid var(--line); padding:44px 0; overflow:hidden; }
.scorer-track{
display:flex;
gap:16px;
animation:scrollx 32s linear infinite;
width:max-content;
}
.scorer-strip:hover .scorer-track{ animation-play-state:paused; }
@keyframes scrollx{
from{ transform:translateX(0); }
to{ transform:translateX(-50%); }
}
.scorer-card{
background:var(--paper-2);
border:1px solid var(--line);
border-radius:3px;
padding:14px 18px;
display:flex;
align-items:center;
gap:12px;
min-width:220px;
}
.avatar-ring{
width:80px;height:80px;border-radius:50%;
background:var(--ink);
border:2px solid var(--gold);
color:var(--gold);
font-family:'Montserrat',sans-serif;
font-weight:600;
display:flex;align-items:center;justify-content:center;
font-size:15px;
flex:0 0 auto;
overflow:hidden;
}
.avatar-ring img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.scorer-name{ color:var(--ink); font-size:18px; font-weight:600; }
.scorer-score{ color:var(--gold);  font-size:15px; font-weight: 600; }
/* ---------- PROGRAM CARDS (carousel) ---------- */
.prog-wrap{ position:relative; }
.prog-track{
display:flex;
gap:22px;
overflow-x:auto;
scroll-snap-type:x mandatory;
padding:8px 4px 24px;
-ms-overflow-style:none;
scrollbar-width:none;
}
.prog-track::-webkit-scrollbar{ display:none; }
.prog-card{
scroll-snap-align:start;
flex:0 0 335px;
background:var(--white);
border:1px solid var(--line);
border-radius:4px;
padding:0;
position:relative;
overflow:hidden;
}
.prog-card.popular{ border-color:var(--gold); box-shadow:0 10px 26px rgba(28,42,74,.1); }
.prog-tag{
position:absolute; top:16px; right:-34px;
background:var(--gold);
color:#fff;

font-size:11px;
font-weight:600;
padding:4px 40px;
transform:rotate(40deg);
}
.prog-head{ background:var(--paper-2); border-bottom:1px solid var(--line); color:var(--ink); padding:22px 22px 18px; }
.prog-head .eyebrow{ color:var(--gold); }
.prog-head h3 {
font-size: 17px;
margin: 4px 0 0;
}
.prog-body{ padding:22px; }
.prog-body ul{ list-style:none; padding:0; margin:0 0 18px; }
.prog-body ul li{
font-size:13.5px;
color:var(--muted);
padding:6px 0 6px 20px;
position:relative;
border-bottom:1px dotted var(--line);
}
.prog-body ul li:before{
content: "\f00c";
    font-family: FontAwesome;
position:absolute; left:0; color:var(--gold-deep);
}
.prog-price{

font-size:22px;
font-weight:600;
color:#e3481f;
padding-top:0px;
}
.prog-scroll-btn{
position:absolute; top:38%;
width:40px; height:40px;
border-radius:50%;
background:var(--white);
border:1px solid var(--line);
box-shadow:0 4px 10px rgba(0,0,0,.08);
display:flex; align-items:center; justify-content:center;
cursor:pointer;
font-size:18px;
z-index:5;
color:var(--ink);
}
.prog-scroll-btn.left{ left:-14px; }
.prog-scroll-btn.right{ right:-14px; }

table tr:last-child {
    background: #cfe3f9 !important;
    color: #000;
    font-size: 16px;
    font-weight: 500;
}

/* ---------- WHY CHOOSE ---------- */
.why-card {
    background: var(--white);
    border: 1px solid var(--line);
    border-left: 3px solid var(--gold);
    padding: 25px 20px;
    border-radius: 2px;
    min-height: 208px;
}
.why-icon {
width: 42px;
height: 42px;
border-radius: 50%;
background: #f5e7e2;
color: var(--gold);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: 14px;
font-size: 20px;
}
.why-card h4{ font-size:18px; margin:0 0 8px; }
.why-card p{ font-size:13.5px; color:var(--muted); margin:0; }

/* ---------- COMPARISON TABLE ---------- */
.cmp-wrap{ overflow-x:auto; background:var(--white); border:1px solid var(--line); }
table.cmp{ width:100%; border-collapse:collapse; min-width:760px; margin:0; }
table.cmp th, table.cmp td{
padding:14px 16px;
text-align:center;
border-bottom:1px solid var(--line);
border-right:1px solid var(--line);
font-size:13.5px;
}
table.cmp th:first-child, table.cmp td:first-child{ text-align:left; border-right:1px solid var(--line); }
table.cmp thead th{
background:var(--ink);
color:var(--white);

font-weight:600;
font-size:12.5px;
letter-spacing:.03em;
}
table.cmp thead th.hl{ background:var(--gold-deep); }
table.cmp tbody td.hl{ background:#FCEBE6; }
table.cmp tbody tr:nth-child(even){ background:var(--paper-2); }
table.cmp td:first-child{ font-weight:600; color:var(--ink); }
.tick{ color:#2F6F52; font-weight:700; }
.dash{ color:#B7BDC8; }

/* ---------- TESTIMONIAL SLIDER (Bootstrap 3 carousel, admit-ticket styling) ---------- */
.ticket-carousel{ max-width:820px; margin:0 auto; }
.ticket{
background:var(--white);
border:1px solid var(--line);
border-radius:4px;
position:relative;
display:flex;
min-height:300px;
box-shadow:0 18px 40px rgba(22,35,63,.08);
}
.ticket:before, .ticket:after{
content:"";
position:absolute;
width:24px; height:24px;
background:var(--paper);
border-radius:50%;
top:50%; margin-top:-12px;
}
.ticket:before{ left:-12px; }
.ticket:after{ right:-12px; }
.ticket-stub{
flex:0 0 180px;
background:var(--paper-2);
color:var(--ink);
border-right:2px dashed var(--line);
padding:28px 18px;
display:flex;
flex-direction:column;
align-items:center;
justify-content:center;
text-align:center;
}
.ticket-seal{
width:70px;height:70px;
border-radius:50%;
border:2px solid var(--gold);
color:var(--gold);
display:flex; flex-direction:column; align-items:center; justify-content:center;
overflow:hidden;
margin-bottom:10px;
}
.ticket-seal img{ width:100%; height:100%; object-fit:cover; border-radius:50%; }
.ticket-seal .score{ font-size:18px; font-weight:700; line-height:1; }
.ticket-seal .lbl{ font-size:8px; letter-spacing:.08em; margin-top:2px; }
.ticket-stub .name{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:15px; margin-top:6px; }
.ticket-stub .score-line{ font-family:'Montserrat',sans-serif; font-weight:600; font-size:12px; letter-spacing:.03em; color:var(--gold); margin-top:4px; }
.ticket-main{
flex:1;
padding:32px 34px;
display:flex;
flex-direction:column;
justify-content:center;
}
.ticket-main .quote-mark{ font-family:'Montserrat',sans-serif; font-size:44px; color:var(--gold); line-height:1; margin-bottom:6px; }
.ticket-main p{ font-size:15px; color:var(--ink-2); line-height:1.65; margin:0; }
#testimonialCarousel .carousel-indicators{ bottom:-46px; }
#testimonialCarousel .carousel-indicators li{ border-color:var(--gold-deep); }
#testimonialCarousel .carousel-indicators .active{ background:var(--gold-deep); }
.ticket-nav{
width:42px; height:42px;
border-radius:50%;
background:var(--white);
border:1px solid var(--line);
color:var(--ink);
display:flex; align-items:center; justify-content:center;
opacity:1;
font-size:16px;
box-shadow:0 4px 10px rgba(0,0,0,.1);
}
#testimonialCarousel .carousel-control{ background-image:none; width:auto; top:50%; margin-top:-21px; }
#testimonialCarousel .carousel-control.left{ left:-52px; }
#testimonialCarousel .carousel-control.right{ right:-52px; }

/* ---------- FACULTY ---------- */
.faculty-card {
    background: var(--white);
    border: 1px solid var(--line);
    padding: 18px;
    display: flex;
    gap: 18px;
    min-height: 316px;
}
.faculty-avatar{
flex:0 0 80px; width:80px; height:80px;
border-radius:50%;
background:#fff;
color:var(--gold);
font-family:'Montserrat',sans-serif;
font-weight:600;
font-size:22px;
display:flex;align-items:center;justify-content:center;
border:2px solid var(--gold);
overflow: hidden;
}
.faculty-card h4{ margin:0 0 2px; font-size:20px; }
.faculty-role{ color:var(--gold-deep);  font-size:13px; letter-spacing:.05em; text-transform:uppercase; margin-bottom:8px; }
.faculty-card p{ font-size:13.5px; color:var(--muted); margin:0; }

/* ---------- FAQ ---------- */
.panel-cl{ border:1px solid var(--line); border-radius:2px; box-shadow:none; margin-bottom:12px; }
.panel-cl .panel-heading{ background:var(--white); border-radius:0; padding:0; }
.panel-cl .panel-title a{
display:block;
padding:16px 20px;
font-weight:600;
font-size:14.5px;
color:var(--ink);
}
.panel-cl .panel-title a:after{
content:"+";
float:right;
color:var(--gold-deep);

font-size:18px;
}
.panel-cl .panel-title a.collapsed:after{ content:"+"; }
.panel-cl .panel-title a:not(.collapsed):after{ content:"-"; }
.panel-cl .panel-body{ font-size:13.5px; color:var(--muted); border-top:1px solid var(--line)!important; padding:16px 20px 20px; }

/* ---------- FINAL CTA ---------- */
.final-cta{
background:linear-gradient(135deg, var(--paper-2) 0%, #FBEAE4 100%);
color:var(--ink);
text-align:center;
padding:70px 0;
position:relative;
overflow:hidden;
border-top:1px solid var(--line);
border-bottom:1px solid var(--line);
}
.final-cta h2{ font-size:32px;  margin-bottom:10px; color:var(--ink); }
.final-cta p{ color:var(--muted); margin-bottom:26px; }

footer.cl-footer{ background:var(--white); border-top:1px solid var(--line); color:var(--muted); padding:26px 0; font-size:12.5px; text-align:center; }
footer.cl-footer strong{ color:var(--ink); }



.hiw-section{
    background: var(--paper);
    padding: 90px 0;
    position: relative;
  }
  @media (max-width: 767px){
    .hiw-section{ padding: 56px 0; }
  }
  @media (max-width: 480px){
    .hiw-section{ padding: 48px 0; }
  }

  .hiw-eyebrow{
    font-family: 'JetBrains Mono', monospace;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--flame-dark);
    display: inline-block;
  }
  .hiw-eyebrow:before{
    content: "";
    width: 22px;
    height: 2px;
    background: var(--flame);
    display: inline-block;
    margin-right: 9px;
    vertical-align: middle;
  }

  .hiw-heading{
    font-family: 'Fraunces', serif;
    font-weight: 600;
    font-size: 42px;
    color: var(--ink);
    letter-spacing: -0.4px;
    margin-top: 14px;
    margin-bottom: 14px;
  }
  @media (max-width: 767px){
    .hiw-heading{ font-size: 32px; }
  }

  .hiw-sub{
    font-family: 'Inter', sans-serif;
    color: var(--ink-soft);
    max-width: 560px;
    margin: 0 auto;
  }

  .hiw-header{
    margin-bottom: 56px;
  }
  @media (max-width: 767px){
    .hiw-header{ margin-bottom: 36px; }
  }

  /* Connecting track between steps — evokes an answer-sheet row.
     Column centers under a 3-col grid sit at 1/6, 1/2 and 5/6 of the
     row width regardless of gutter, since gutter padding is symmetric. */

  @media (max-width: 767px){
    .hiw-track:before{ display: none; }
  }

  /* Equal-height cards + flex column stacking (plain CSS, independent of
     Bootstrap 3's float-based grid) */
  @media (min-width: 768px){
    .hiw-track{ display: -webkit-flex; display: flex; flex-wrap: wrap; }
    .hiw-track > [class*="col-"]{ display: -webkit-flex; display: flex; float: none; }
    .hiw-step{ width: 100%; display: -webkit-flex; display: flex; flex-direction: column; }
    .hiw-card{ flex: 1 1 auto; }
  }

  .hiw-step{
    position: relative;
    z-index: 1;
    margin-bottom: 30px;
  }
  @media (min-width: 768px){
    .hiw-step{ margin-bottom: 0; }
  }

  /* Mobile: short vertical dashed connector rising from the gap into
     each subsequent bubble's exact center point */
  @media (max-width: 767px){
    .hiw-step:not(:first-child):before{
      content: "";
      position: absolute;
      top: -30px;                       /* reaches back into the stacked gap above */
      left: 50%;
      width: 3px;
      height: 64px;                     /* 30px gap + 34px = center of the 68px bubble */
      margin-left: -1.5px;
      background-image: linear-gradient(to bottom, var(--flame) 0, var(--flame) 10px, transparent 10px, transparent 18px);
      background-size: 3px 18px;
      background-repeat: repeat-y;
      opacity: 0.55;
      z-index: 0;
    }
  }

  /* Scantron-style bubble marker — filled answer bubble carrying the step number */
  .hiw-bubble{
    width: 68px;
    height: 68px;
    border-radius: 50%;
    border: 3px solid var(--flame);
    background: var(--paper-card);
    display: block;
    line-height: 62px;
    text-align: center;
    font-family: 'JetBrains Mono', monospace;
    font-weight: 700;
    font-size: 22px;
    color: var(--flame);
    margin: 0 auto 28px;
    box-shadow: 0 0 0 5px var(--flame-tint);
    -webkit-transition: background-color .25s ease, color .25s ease, -webkit-transform .25s ease, box-shadow .25s ease;
    transition: background-color .25s ease, color .25s ease, transform .25s ease, box-shadow .25s ease;
  }
  .hiw-step:hover .hiw-bubble{
    background: var(--flame);
    color: #fff;
    -webkit-transform: scale(1.08);
    transform: scale(1.08);
    box-shadow: 0 0 0 7px var(--flame-tint), 0 10px 22px rgba(227,72,31,0.35);
  }
  @media (max-width: 480px){
    .hiw-bubble{ width: 56px; height: 56px; line-height: 50px; font-size: 18px; margin-bottom: 20px; }
    .hiw-step:not(:first-child):before{ height: 58px; } /* 30px gap + 28px = center of the 56px bubble */
  }

  .hiw-card{
    background: var(--paper-card);
    border: 1px solid var(--line);
    border-top: 3px solid transparent;
    border-radius: 6px;
    padding: 32px 28px 36px;
    text-align: center;
    -webkit-transition: border-color .25s ease, box-shadow .25s ease, -webkit-transform .25s ease;
    transition: border-color .25s ease, box-shadow .25s ease, transform .25s ease;
  }
  .hiw-step:hover .hiw-card{
    border-color: var(--line);
    border-top-color: var(--flame);
    box-shadow: 0 16px 32px rgba(227,72,31,0.14);
    -webkit-transform: translateY(-4px);
    transform: translateY(-4px);
  }
  @media (max-width: 480px){
    .hiw-card{ padding: 24px 20px 28px; }
  }

  .hiw-step-title{
    font-size: 20px;
    color: var(--ink);
    margin: 0 0 12px;
  }
  @media (max-width: 480px){
    .hiw-step-title{ font-size: 18px; }
  }

  .hiw-step-text{
       line-height: 1.6;
    margin-bottom: 0;
  }
  @media (max-width: 480px){
    .hiw-step-text{ font-size: 14.5px; }
  }

  /* Timer chips — the signature data treatment for step 2 */
  .hiw-timers{
    margin-top: 18px;
  }
  .hiw-timer-chip{
    display: inline-block;
    font-family: 'JetBrains Mono', monospace;
    font-size: 12.5px;
    font-weight: 700;
    color: var(--flame-dark);
    background: var(--flame-tint);
    border: 1px solid rgba(227,72,31,0.35);
    border-radius: 3px;
    padding: 5px 10px;
    letter-spacing: 0.3px;
    margin: 4px 3px;
  }
  .hiw-timer-chip .unit{
    color: var(--ink-soft);
    font-weight: 500;
  }

  .hiw-icon{
    width: 26px;
    height: 26px;
    color: var(--flame);
    margin-bottom: 14px;
    display: inline-block;
  }

@media(max-width:767px){
.hero h1{ font-size:32px; }
.hero .col-sm-5{ margin-top:32px; }
.stub{ flex:1 1 50%; border-bottom:1px dashed var(--line); }
.ticket{ flex-direction:column; min-height:0; }
.ticket-stub{ flex-direction:row; border-right:0; border-bottom:2px dashed var(--line); padding:18px; }
.ticket-seal{ margin-bottom:0; margin-right:14px; }
#testimonialCarousel .carousel-control.left{ left:0; }
#testimonialCarousel .carousel-control.right{ right:0; }
.prog-scroll-btn{ display:none; }
}