/* =========================================================
   HEADER TOKENS (KEEP GLOBAL TOKENS IN MAIN STYLESHEET)
   If you already have :root in global styles.css, remove this block.
========================================================= */
:root{
  --brand:#f15e37;
  --ink:#111317;
  --muted:#60646c;
  --bg:#f6f8fb;
  --line:#e7edf4;
  --glass:rgba(255,255,255,.14);
  --radius:14px;
  --radius-lg:18px;
  --shadow-s:0 6px 14px rgba(16,24,40,.08);
  --shadow-m:0 12px 24px rgba(16,24,40,.10);
  --shadow-l:0 24px 64px rgba(16,24,40,.18);
}

/* =========================================================
   BASE (Only what header depends on)
========================================================= */
*{box-sizing:border-box}
html,body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Inter,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}
a{color:var(--brand); text-decoration:none}
.container{width:min(1180px,92%); margin:auto}
img{max-width:100%; display:block}

.fw-600{font-weight:600}
.fw-700{font-weight:700}

a:focus, button:focus, input:focus, select:focus{
  outline:2px solid #9ec5ff;
  outline-offset:2px;
  border-radius:8px;
}

/* =========================================================
   BUTTONS USED IN HEADER
========================================================= */
.btn{display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; border:0}
.btn-cta{
  background:linear-gradient(180deg,#ff834f 0%, var(--brand) 100%);
  color:#fff;
  padding:.68rem 1rem;
  border-radius:999px;
  box-shadow:0 10px 18px rgba(241,94,55,.22);
}

/* =========================================================
   TOPBAR + NAV + MEGA
========================================================= */
.topbar{
  position:fixed; inset:0 0 auto 0; z-index:120;
  background:linear-gradient(180deg,rgba(8,12,20,.05),rgba(8,12,20,.02));
  color:#fff;
  border-bottom:1px solid rgba(255,255,255,.06);
  backdrop-filter:saturate(120%) blur(2px);
}
.nav{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
  padding:10px 0;
}
.nav-left{display:flex; align-items:center; gap:14px}
.logo{height:38px; filter:drop-shadow(0 1px 2px rgba(0,0,0,.35))}

.explore-wrap{position:relative; display:flex; justify-content:center}
.explore-btn{
  width:min(560px,48vw);
  padding:.72rem 1.2rem;
  border-radius:999px;
  background:rgba(255,255,255,.18);
  border:1px solid rgba(255,255,255,.35);
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  backdrop-filter:blur(8px);
  box-shadow:inset 0 6px 16px rgba(0,0,0,.12), 0 4px 10px rgba(0,0,0,.10);
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease;
}
.explore-btn:hover{
  transform:translateY(-1px);
  background:rgba(255,255,255,.22);
  border-color:rgba(255,255,255,.5);
}
.explore-btn .grid,.explore-btn .chev{width:18px; height:18px}

.mega{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  top:54px;
  width:min(1020px,96vw);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius);
  box-shadow:var(--shadow-l);
  display:none;
  z-index:140;
  color:#1f2630;
}
.mega.open{display:grid}
.mega-grid{display:grid; grid-template-columns:220px 1fr}
.mega-side{
  padding:10px;
  background:#f7f9fd;
  border-right:1px solid var(--line);
  border-top-left-radius:var(--radius);
  border-bottom-left-radius:var(--radius);
}
.mega-side a{
  display:block;
  padding:.5rem .7rem;
  border-radius:8px;
  color:#243142;
  font-weight:600;
}
.mega-side a:hover,.mega-side a.active{background:#eaf1ff}
.mega-main{padding:14px 16px}
.mega-cols{display:grid; grid-template-columns:repeat(5,1fr); gap:18px}
.mega-main h5{
  margin:.2rem 0 .5rem;
  font-size:.94rem;
  font-weight:600;
  color:#2a3342;
}
.mega-main a{
  display:block;
  margin:.28rem 0;
  color:#364254;
  font-size:.86rem;
  line-height:1.25rem;
}
.mega-main a:hover{color:var(--brand)}
@media (max-width:900px){.mega-cols{grid-template-columns:repeat(2,1fr)}}

/* Hamburger */
.hamburger{
  display:none;
  width:42px;
  height:42px;
  border-radius:10px;
  border:1px solid rgba(255,255,255,.35);
  background:var(--glass);
  backdrop-filter:blur(6px);
  cursor:pointer;
  place-items:center;
}
.hamburger svg{width:22px; height:22px; color:#fff}
@media (max-width:768px){
  .explore-btn{display:none}
  .hamburger{display:grid}
}

/* Scrolled state */
.topbar.scrolled{
  background:rgba(8,12,20,.82);
  border-bottom:1px solid rgba(0,0,0,.25);
  backdrop-filter:blur(8px) saturate(140%);
}
.topbar.scrolled .explore-btn{
  background:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.28);
}
.topbar.scrolled .btn-cta{box-shadow:none}

/* =========================================================
   DRAWER (MOBILE MENU)
========================================================= */
.drawer-wrap{position:fixed; inset:0; z-index:300; display:none}
.drawer-wrap.open{display:block}
.drawer-backdrop{position:absolute; inset:0; background:rgba(0,0,0,.48)}
.drawer{
  position:absolute;
  top:0; left:0;
  height:100vh;
  width:min(92vw,760px);
  background:#fff;
  box-shadow:24px 0 64px rgba(0,0,0,.32);
  transform:translateX(-100%);
  transition:transform .22s ease;
  display:flex;
  flex-direction:column;
}
.drawer-wrap.open .drawer{transform:translateX(0)}
.drawer-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:12px 14px;
  border-bottom:1px solid #eef2f8;
}
.drawer-logo{height:26px}
.drawer-close{background:transparent; border:0; font-size:22px; cursor:pointer}
.drawer-body{height:100%; display:grid; grid-template-columns:160px 1fr}
.drawer-side{
  background:#f5f7fb;
  border-right:1px solid #e6ecf3;
  overflow:auto;
  padding:8px 0;
}
.drawer-side a{
  display:block;
  padding:.7rem .9rem;
  border-left:3px solid transparent;
  color:#2c3a4a;
  font-weight:600;
}
.drawer-side a.active{
  background:#eaf1ff;
  border-left-color:#5b8def;
}
.drawer-main{overflow:auto; padding:10px 14px}

/* Accordion */
.acc{border-bottom:1px solid #eef2f8; padding:10px 0}
.acc-head{display:flex; align-items:center; justify-content:space-between; gap:8px; cursor:pointer}
.acc-head h5{margin:0; font-size:.96rem}
.chev{width:18px; height:18px; flex:none; transition:transform .18s ease; color:#384457}
.acc.open .chev{transform:rotate(180deg)}
.acc-panel{overflow:hidden; max-height:0; transition:max-height .22s ease}
.acc.open .acc-panel{max-height:520px}
.acc-panel a{display:block; padding:.38rem 0; color:#2f3b4e}
.acc-panel a:hover{color:var(--brand)}

/* =========================================================
   COUNSELLING MODAL
========================================================= */
.modal{
  position:fixed;
  inset:0;
  background:rgba(2,6,12,.55);
  display:none;
  align-items:center;
  justify-content:center;
  z-index:200;
}
.modal.open{display:flex}
.dialog{
  width:min(1080px,94vw);
  border-radius:16px;
  overflow:hidden;
  background:#fff;
  box-shadow:var(--shadow-l);
}
.dialog-head--cd{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  padding:10px 12px;
  border-bottom:1px solid #eef2f8;
}
.btn-x{border:0; background:transparent; font-size:22px; cursor:pointer}

.dialog-body--cd{display:grid; grid-template-columns:320px 1fr}
@media (max-width:900px){.dialog-body--cd{grid-template-columns:1fr}}

.cd-left{
  background:#fafbff;
  border-right:1px solid #eef2f8;
  padding:16px;
}
.cd-left h4{margin:4px 0 10px; font-size:1rem}

.cd-feats{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.cd-tile{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:12px;
  padding:12px 10px;
  gap:10px;
}
.cd-ico{
  width:24px; height:24px;
  border-radius:7px;
  background:#f6f9ff;
  border:1px solid #e6eeff;
  display:grid;
  place-items:center;
  font-size:13px;
}
.cd-txt{font-weight:600; font-size:.9rem}
.cd-sep{height:1px; background:#eef2f8; margin:14px 0}

.cd-quote{
  display:flex;
  gap:10px;
  align-items:flex-start;
  background:#fff;
  border:1px solid #e9eef6;
  border-radius:12px;
  padding:12px;
}
.cd-ava{
  width:34px; height:34px;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#ffeadd;
  color:#ff6c37;
  font-weight:800;
}
.cd-qtext{font-size:.9rem; line-height:1.35}
.cd-qname{margin-top:6px; font-size:.82rem; color:#7b8593}

.cd-right{padding:18px}
.cd-form{display:grid; grid-template-columns:1fr 1fr; gap:12px}
@media (max-width:720px){.cd-form{grid-template-columns:1fr}}

.fl{position:relative; border:1px solid #dfe6ef; border-radius:10px; background:#fff}
.fl input,.fl select{
  width:100%;
  border:0;
  outline:0;
  background:transparent;
  font:inherit;
  color:#1f2630;
  padding:16px 12px 10px;
}
.fl label{
  position:absolute;
  left:12px;
  top:12px;
  color:#6b7380;
  pointer-events:none;
  transition:all .16s ease;
  background:#fff;
  padding:0 4px;
  transform-origin:left center;
}
.fl:focus-within label,.fl.filled label{
  transform:translateY(-10px) scale(.86);
  color:#42526d;
}
.fl.span-2{grid-column:1/-1}

.cd-terms{
  display:flex;
  gap:8px;
  align-items:flex-start;
  font-size:.9rem;
  color:#566077;
  margin-top:6px;
}
.cd-terms input{margin-top:3px}

.help-row{
  display:flex;
  gap:6px;
  align-items:center;
  color:#8a94a6;
  font-size:.86rem;
  margin-top:4px;
}
.help-row .dot{width:6px; height:6px; border-radius:50%; background:#8a94a6}

.cd-actions{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin-top:8px;
  flex-wrap:wrap;
}
.cd-login{color:#e56a3e; font-weight:700; font-size:.94rem}
.btn-submit{
  background:linear-gradient(180deg,#ff8a5c 0%, var(--brand) 100%);
  color:#fff;
  border:0;
  border-radius:12px;
  padding:.84rem 1.2rem;
  font-weight:800;
  cursor:pointer;
  box-shadow:0 12px 22px rgba(241,94,55,.24);
}