:root{
--blue:#0bb8ee;
--royal:#1165ef;
--purple:#8a16d6;
--red:#df0606;
--navy:#03123d;
--ink:#111827;
--muted:#667085;
--soft:#f5f8ff;
--white:#fff;
--shadow:0 24px 70px rgba(3,18,61,.15)}
*{
box-sizing:border-box}
html{
scroll-behavior:smooth;
overflow-x:hidden;
max-width:100%}
body{
margin:0;
font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
color:var(--ink);
background:linear-gradient(180deg,#fff 0%,#f8fbff 55%,#fff 100%);
overflow-x:hidden;
max-width:100%}
a{
color:inherit;
text-decoration:none}
img{
max-width:100%;
display:block}
.container{
width:min(1180px,92%);
margin:auto}
.site-header{
position:sticky;
top:0;
z-index:10;
background:rgba(255,255,255,.86);
backdrop-filter:blur(18px);
border-bottom:1px solid rgba(17,101,239,.09)}
.nav{
height:82px;
display:flex;
align-items:center;
justify-content:space-between}
.brand{
display:flex;
align-items:center;
gap:.8rem;
font-weight:800;
color:var(--navy)}
.brand small{
display:block;
color:var(--purple);
letter-spacing:.2em;
text-transform:uppercase}
.brand-mark{
display:flex;
align-items:center;
height:56px}
.brand-mark img{
height:100%;
width:auto;
object-fit:contain}
.nav-links{
display:flex;
align-items:center;
gap:1.6rem;
font-weight:700;
color:#26314f;
flex:1}
.nav-toggle{
display:none}
/* The nav links used to all bunch up tight against the right edge, leaving
   an odd empty gap right after the logo. Letting .nav-links fill the
   remaining width and pushing the CTA+account group to the far right with
   auto margin spreads things out evenly instead. Scoped to desktop widths
   only -- in the mobile dropdown (see the 1200px breakpoint) everything
   stacks in one column and should stay left-aligned. */
@media(min-width:1201px){
.nav-links .btn{
margin-left:auto}
}
.btn{
display:inline-flex;
align-items:center;
justify-content:center;
border:0;
border-radius:999px;
padding:1rem 1.45rem;
background:linear-gradient(135deg,var(--royal),var(--purple));
color:white;
font-weight:800;
box-shadow:0 14px 30px rgba(17,101,239,.26);
cursor:pointer}
.btn-small{
padding:.72rem 1rem}
.btn-ghost{
background:white;
color:var(--royal);
box-shadow:inset 0 0 0 1px rgba(17,101,239,.18)}
.hero{
position:relative;
overflow:hidden;
padding:92px 0 70px}
.hero:before{
content:"";
position:absolute;
inset:-20% -10% auto auto;
width:58vw;
height:58vw;
background:radial-gradient(circle,var(--blue),transparent 62%);
opacity:.18}
.hero-grid{
display:grid;
grid-template-columns:1.02fr .98fr;
align-items:center;
gap:4rem}
.eyebrow{
text-transform:uppercase;
letter-spacing:.16em;
color:var(--red);
font-weight:900;
font-size:.78rem}
.hero h1,.section h2{
margin:.2rem 0 1rem;
color:var(--navy);
line-height:1.02;
letter-spacing:-.05em}
.hero h1{
font-size:clamp(3rem,7vw,6.6rem)}
.section h2{
font-size:clamp(2.1rem,4vw,3.8rem)}
.hero-text{
font-size:1.25rem;
line-height:1.75;
color:var(--muted);
max-width:660px}
.search-card{
display:flex;
margin:2rem 0 1.2rem;
padding:.5rem;
background:white;
border-radius:999px;
box-shadow:var(--shadow);
border:1px solid rgba(17,101,239,.08)}
.search-card input{
flex:1;
border:0;
outline:0;
padding:0 1rem;
font-size:1rem}
.search-card button{
border:0;
border-radius:999px;
background:var(--red);
color:white;
padding:1rem 1.5rem;
font-weight:900}
.hero-actions{
display:flex;
gap:1rem;
flex-wrap:wrap}
.stats{
display:flex;
gap:1rem;
flex-wrap:wrap;
margin-top:1.8rem}
.stats span{
padding:1rem;
background:#fff;
border-radius:18px;
box-shadow:0 10px 30px rgba(3,18,61,.08);
color:var(--muted)}
.stats strong{
display:block;
color:var(--navy);
font-size:1.35rem}
.hero-media{
position:relative}
.hero-media img{
height:620px;
width:100%;
object-fit:cover;
border-radius:44px;
box-shadow:var(--shadow)}
.hero-media:after{
content:"";
position:absolute;
inset:22px;
border:2px solid rgba(255,255,255,.65);
border-radius:34px}
.floating-card{
position:absolute;
z-index:2;
background:rgba(255,255,255,.92);
backdrop-filter:blur(16px);
border-radius:22px;
padding:1rem 1.2rem;
box-shadow:0 18px 50px rgba(3,18,61,.18);
font-weight:800;
color:var(--navy)}
.floating-card.top{
top:34px;
left:-24px}
.floating-card.bottom{
right:-20px;
bottom:44px;
color:var(--purple)}
.program-strip{
padding:22px 0;
background:var(--navy);
color:white}
.strip-grid{
display:grid;
grid-template-columns:repeat(4,1fr);
gap:1rem}
.strip-grid a{
text-align:center;
padding:1rem;
border-radius:16px;
background:rgba(255,255,255,.08);
font-weight:800}
.section{
padding:90px 0}
.section-heading{
max-width:760px;
margin-bottom:2.4rem}
.cards{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1.4rem}
.card{
background:white;
border-radius:30px;
padding:1.15rem;
box-shadow:0 18px 60px rgba(3,18,61,.09);
border:1px solid rgba(17,101,239,.08)}
.feature-card img{
height:230px;
width:100%;
object-fit:cover;
border-radius:22px}
.card h3{
font-size:1.45rem;
color:var(--navy)}
.card p,.split p,.cta-panel p,.contact-card p,.footer p{
color:var(--muted);
line-height:1.7}
.card ul{
padding-left:1.1rem;
color:#3b4666;
line-height:1.9}
.alt-section{
background:linear-gradient(135deg,var(--navy),#17205a);
color:white}
.alt-section h2,.alt-section .mentor-grid strong{
color:white}
.alt-section>.container>p,
.alt-section .split p{
color:#cfd7ff}
.alt-section .eyebrow{
color:#ff9d9d}
.split{
display:grid;
grid-template-columns:1fr .9fr;
gap:3rem;
align-items:center}
.mentor-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:1rem;
margin-top:2rem}
.mentor-grid div{
background:rgba(255,255,255,.1);
padding:1.2rem;
border-radius:20px}
.mentor-grid strong{
font-size:2rem;
display:block}
.mentor-grid span{
color:#cfd7ff}
.mentor-stack{
display:grid;
gap:1rem}
.mentor-stack article{
display:grid;
grid-template-columns:auto 1fr;
gap:.3rem 1rem;
align-items:center;
background:white;
color:var(--navy);
padding:1.3rem;
border-radius:24px;
box-shadow:var(--shadow)}
.mentor-stack span{
grid-row:span 2;
font-size:2rem}
.mentor-stack small{
color:var(--muted)}
.cta-panel,.contact-card{
display:grid;
grid-template-columns:1fr auto;
gap:2rem;
align-items:center;
background:linear-gradient(135deg,#eef8ff,#f7efff);
border-radius:36px;
padding:3rem;
box-shadow:0 18px 60px rgba(3,18,61,.08)}
.contact-card{
grid-template-columns:.8fr 1fr;
background:white}
.lead-form{
display:grid;
grid-template-columns:repeat(2,1fr);
gap:1rem}
.lead-form input,.lead-form select{
width:100%;
border:1px solid #dbe4ff;
border-radius:16px;
padding:1rem;
font:inherit}
.lead-form button{
grid-column:1/-1}
.footer{
background:#020a24;
color:white;
padding:46px 0}
.footer-grid{
display:grid;
grid-template-columns:2fr 1fr 1fr;
gap:2rem}
.footer a{
display:block;
color:#cfd7ff;
margin-top:.65rem}
/* Nav collapses to the hamburger menu earlier than the general mobile
   breakpoint below: with 6 nav items + CTA + user-menu, the header overflows
   the container on common laptop widths (roughly 900-1300px) if it stays
   inline that long, which is what made the header look broken/cramped. */
@media(max-width:1200px){
.nav-toggle{
display:block;
border:0;
background:var(--navy);
color:white;
border-radius:12px;
padding:.7rem}
.nav-links{
position:absolute;
left:4%;
right:4%;
top:82px;
display:none;
flex-direction:column;
align-items:flex-start;
background:white;
padding:1.2rem;
border-radius:20px;
box-shadow:var(--shadow);
z-index:20}
.nav-links.open{
display:flex}
}
@media(max-width:860px){
.hero-grid,.split,.cta-panel,.contact-card,.footer-grid{
grid-template-columns:1fr}
.hero{
padding-top:54px}
.hero-media img{
height:420px}
.cards,.strip-grid,.mentor-grid,.lead-form{
grid-template-columns:1fr}
.search-card{
border-radius:24px;
display:grid}
.search-card button{
margin-top:.5rem}
.floating-card{
position:static;
margin-top:1rem}
.hero-media:after{
display:none}
}
.tag{
  display:inline-flex;
  margin-top:1rem;
  padding:.35rem .7rem;
  border-radius:999px;
  background:rgba(17,101,239,.1);
  color:var(--royal);
  font-weight:800;
  font-size:.8rem;
}
.testimonial-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1.3rem;
}
.testimonial{
  background:white;
  border-radius:28px;
  padding:1.4rem;
  box-shadow:0 18px 60px rgba(3,18,61,.09);
}
.testimonial img{
  width:70px;
  height:70px;
  object-fit:cover;
  border-radius:50%;
}
.testimonial p{
  color:var(--muted);
  line-height:1.7;
}
.testimonial small{
  display:block;
  color:var(--purple);
  font-weight:800;
  margin-top:.3rem;
}
.notice{
  border-radius:16px;
  padding:1rem;
  font-weight:800;
}
.notice.success{
  background:#e9fbf0;
  color:#087a38;
}
.notice.error{
  background:#fff0f0;
  color:#b00020;
}
.lead-form textarea,
.admin-form textarea{
  min-height:110px;
  resize:vertical;
}
.lead-form textarea{
  grid-column:1/-1;
  width:100%;
  border:1px solid #dbe4ff;
  border-radius:16px;
  padding:1rem;
  font:inherit;
}
.admin-body{
  background:#f4f6fb;
  min-height:100vh;
  font-family:Inter,ui-sans-serif,system-ui,-apple-system,Segoe UI,sans-serif;
}
.admin-login{
  min-height:100vh;
  display:grid;
  place-items:center;
  padding:2rem;
  background:radial-gradient(circle at top left,#eef3ff,#f4f6fb 60%);
}
.admin-card,
.admin-panel{
  background:white;
  border-radius:18px;
  padding:1.75rem;
  border:1px solid #e9edf6;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
}
.admin-card{
  width:min(440px,100%);
  display:grid;
  gap:1rem;
  border-radius:22px;
  box-shadow:0 18px 60px rgba(3,18,61,.1);
}
.admin-card input,
.admin-form input,
.admin-form textarea,
.admin-form select,
.admin-panel select,
.filter-bar input,
.filter-bar select{
  width:100%;
  border:1px solid #dbe1ee;
  border-radius:10px;
  padding:.7rem .85rem;
  font:inherit;
  color:var(--ink);
  background:#fff;
  transition:border-color .15s,box-shadow .15s;
}
.admin-card input:focus,
.admin-form input:focus,
.admin-form textarea:focus,
.admin-form select:focus,
.filter-bar input:focus,
.filter-bar select:focus{
  outline:none;
  border-color:var(--royal);
  box-shadow:0 0 0 3px rgba(17,101,239,.14);
}
.admin-shell{
  display:grid;
  grid-template-columns:264px 1fr;
  min-height:100vh;
}
.admin-sidebar{
  background:var(--navy);
  color:white;
  padding:1.5rem 1.1rem;
  display:flex;
  flex-direction:column;
  gap:1.4rem;
  position:sticky;
  top:0;
  height:100vh;
  overflow-y:auto;
}
.admin-sidebar-foot{
  flex-shrink:0;
}
.admin-nav{
  display:flex;
  flex-direction:column;
  gap:.25rem;
  flex:1;
}
.admin-sidebar a{
  color:#c3cef0;
  padding:.7rem .9rem;
  border-radius:11px;
  font-weight:600;
  font-size:.94rem;
  display:flex;
  align-items:center;
  gap:.7rem;
  transition:background .15s,color .15s;
}
.nav-icon{
  font-size:1.05rem;
  width:1.4rem;
  text-align:center;
}
.admin-sidebar a.active,
.admin-sidebar a:hover{
  background:rgba(255,255,255,.1);
  color:white;
}
.admin-sidebar a.active{
  background:linear-gradient(135deg,var(--royal),var(--purple));
  box-shadow:0 8px 20px rgba(17,101,239,.35);
}
.admin-sidebar-foot{
  border-top:1px solid rgba(255,255,255,.12);
  padding-top:1rem;
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.admin-user{
  display:flex;
  align-items:center;
  gap:.7rem;
  padding:.4rem .3rem;
}
.admin-user .avatar{
  width:36px;
  height:36px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  display:grid;
  place-items:center;
  font-weight:800;
  color:#fff;
  flex-shrink:0;
}
.admin-user strong{
  display:block;
  color:#fff;
  font-size:.86rem;
}
.admin-user small{
  color:#9fadd9;
  font-size:.76rem;
}
.admin-logout{
  color:#ffc9c9 !important;
  font-weight:700;
}
.admin-logout:hover{
  background:rgba(223,6,6,.16) !important;
  color:#ffdede !important;
}
.admin-main{
  padding:2rem 2.2rem 3rem;
  overflow:auto;
}
.admin-topbar{
  margin-bottom:1.5rem;
}
.admin-topbar h1{
  margin:0;
  font-size:1.65rem;
  color:var(--navy);
}
.admin-topbar p{
  margin:.3rem 0 0;
  color:var(--muted);
}
.admin-stats{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
  margin:1.5rem 0;
}
.admin-stats article{
  background:white;
  border-radius:16px;
  padding:1.4rem 1.5rem;
  border:1px solid #e9edf6;
  display:flex;
  align-items:center;
  justify-content:space-between;
}
.admin-stats strong{
  display:block;
  color:var(--navy);
  font-size:2.2rem;
  line-height:1;
}
.admin-stats span{
  color:var(--muted);
  font-weight:600;
  font-size:.9rem;
}
.admin-panel{
  margin-bottom:1.5rem;
}
.admin-panel-head{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:.4rem 1rem;
  margin-bottom:1.2rem;
}
.admin-panel-head h2{
  margin:0;
  font-size:1.15rem;
  color:var(--navy);
}
.admin-panel-head small{
  color:var(--muted);
}
.master-add-btn{
  display:inline-flex;
  align-items:center;
  gap:.4rem;
  background:linear-gradient(135deg,var(--navy),var(--royal) 65%,var(--purple));
  border:0;
  box-shadow:0 12px 24px rgba(17,101,239,.22);
  transition:transform .12s ease,box-shadow .12s ease;
}
.master-add-btn:hover{
  transform:translateY(-1px);
  box-shadow:0 16px 30px rgba(17,101,239,.28);
}
.master-add-btn span{
  font-size:1.05rem;
  line-height:1;
}
.admin-form{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:1rem 1.2rem;
}
.admin-form[hidden]{
  display:none;
}
.admin-form .field-wide,
.admin-form .field-actions{
  grid-column:1/-1;
}
.admin-form label.field{
  display:flex;
  flex-direction:column;
  gap:.35rem;
  font-size:.82rem;
  font-weight:700;
  color:#3a4a6b;
}
.admin-form label.field-checkbox{
  flex-direction:row;
  align-items:center;
  gap:.55rem;
  font-weight:700;
  color:var(--navy);
}
.admin-form .field-checkbox input{
  width:auto;
}
.admin-form fieldset{
  grid-column:1/-1;
  border:0;
  padding:0;
  margin:0;
}
.admin-form legend{
  font-size:.78rem;
  font-weight:800;
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--royal);
  margin:.4rem 0 .8rem;
  padding:0;
}
.field-actions{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:.6rem .9rem;
  border-top:1px solid #eef1f8;
  padding-top:1.1rem;
  margin-top:.2rem;
}
.btn-ghost-link{
  color:var(--royal);
  font-weight:700;
  font-size:.88rem;
}
.btn-ghost-link:hover{
  text-decoration:underline;
}
.field-actions .btn-ghost-link{
  color:var(--muted);
  font-weight:700;
}
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:.7rem;
  align-items:center;
  margin-bottom:1.2rem;
  padding:.9rem;
  background:#f7f9fd;
  border:1px solid #eef1f8;
  border-radius:12px;
}
.filter-bar input,
.filter-bar select{
  width:auto;
  min-width:160px;
}
.filter-bar input[type="search"],
.filter-bar .filter-search{
  flex:1 1 220px;
  min-width:200px;
}
.filter-bar .btn-filter{
  background:var(--royal);
  color:#fff;
  border:0;
  border-radius:10px;
  padding:.7rem 1.1rem;
  font-weight:700;
  cursor:pointer;
}
.filter-bar .btn-reset{
  color:var(--muted);
  font-weight:700;
  padding:.7rem .4rem;
}
.table-wrap{
  overflow-x:auto;
  border:1px solid #eef1f8;
  border-radius:12px;
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:.92rem;
}
thead th{
  text-align:left;
  background:#f7f9fd;
  color:#5a6685;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  padding:.8rem .9rem;
  border-bottom:1px solid #eef1f8;
  white-space:nowrap;
}
td{
  text-align:left;
  border-bottom:1px solid #f1f3fa;
  padding:.75rem .9rem;
  vertical-align:middle;
  color:#33405f;
}
tbody tr:hover{
  background:#fafbff;
}
tbody tr:last-child td{
  border-bottom:0;
}
.thumb{
  width:52px;
  height:52px;
  object-fit:cover;
  border-radius:10px;
  border:1px solid #eef1f8;
}
.badge{
  display:inline-flex;
  align-items:center;
  padding:.28rem .7rem;
  border-radius:999px;
  font-size:.74rem;
  font-weight:800;
}
select.badge{
  border:0;
  cursor:pointer;
  width:auto;
  padding:.3rem 1.6rem .3rem .7rem;
}
.badge-active{
  background:#e7fbee;
  color:#0a8a3c;
}
.badge-inactive{
  background:#f1f3f9;
  color:#68738f;
}
.row-actions{
  display:flex;
  align-items:center;
  gap:.4rem;
  white-space:nowrap;
}
.row-actions a{
  font-weight:700;
  color:var(--royal);
}
.row-action-btn{
  display:inline-flex;
  align-items:center;
  gap:.3rem;
  padding:.35rem .7rem;
  border-radius:999px;
  font-size:.8rem;
  font-weight:700;
  border:1px solid transparent;
  transition:transform .12s ease,box-shadow .12s ease;
}
.row-action-btn:hover{
  transform:translateY(-1px);
}
.row-action-edit{
  background:#eef3ff;
  color:var(--royal);
  border-color:#dbe6ff;
}
.row-action-edit:hover{
  background:#e2ebff;
  box-shadow:0 6px 14px rgba(17,101,239,.16);
}
.row-action-delete{
  background:#fff0f0;
  color:#c0392b;
  border-color:#ffdcdc;
}
.row-action-delete:hover{
  background:#ffe3e3;
  box-shadow:0 6px 14px rgba(192,57,43,.16);
}
.inline-form{
  display:inline-block;
}
.inline-form button{
  border:0;
  background:#fff0f0;
  color:#b00020;
  border-radius:8px;
  padding:.4rem .65rem;
  font-weight:700;
  font-size:.82rem;
  cursor:pointer;
}
.inline-form button:hover{
  background:#ffdede;
}
.table-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
  margin-top:1rem;
}
.result-summary{
  color:var(--muted);
  font-size:.86rem;
}
.pagination{
  display:flex;
  align-items:center;
  gap:.3rem;
  flex-wrap:wrap;
}
.page-btn{
  min-width:34px;
  height:34px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:0 .6rem;
  border-radius:8px;
  border:1px solid #e2e7f3;
  color:#3a4a6b;
  font-weight:700;
  font-size:.84rem;
}
.page-btn:hover{
  border-color:var(--royal);
  color:var(--royal);
}
.page-btn.active{
  background:var(--royal);
  border-color:var(--royal);
  color:#fff;
}
.page-btn.disabled{
  opacity:.4;
  pointer-events:none;
}
.page-ellipsis{
  color:var(--muted);
  padding:0 .2rem;
}
.footer span{
  display:block;
  color:#cfd7ff;
  margin-top:.65rem;
}
.footer-logo{
  height:36px;
  width:auto;
  display:block;
}
.footer-logo-badge{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border-radius:14px;
  padding:.6rem .9rem;
  margin-bottom:1rem;
}
.footer-social{
  display:flex;
  gap:.6rem;
  margin-top:1.1rem;
}
.footer-social a{
  display:grid;
  place-items:center;
  width:36px;
  height:36px;
  border-radius:50%;
  background:rgba(255,255,255,.1);
  color:#cfd7ff;
  transition:background .15s ease,color .15s ease;
}
.footer-social a:hover{
  background:var(--royal);
  color:#fff;
}
.admin-brand{
  display:inline-flex;
  align-items:center;
  background:#fff;
  border-radius:12px;
  padding:.5rem .8rem;
  margin-bottom:.4rem;
}
.admin-brand img{
  height:30px;
  width:auto;
  display:block;
}
.admin-login-logo{
  height:52px;
  width:auto;
  margin:0 auto;
}

/* ===== Unified auth pages (login / register) ===== */
.auth-page{
  min-height:100vh;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  background:#fff;
}
.auth-brand{
  position:relative;
  overflow:hidden;
  background:linear-gradient(155deg,var(--navy) 0%,#0d2a7a 45%,var(--royal) 78%,var(--purple) 100%);
  color:#fff;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  padding:3rem 3.2rem;
}
.auth-brand::before{
  content:"";
  position:absolute;
  width:420px;height:420px;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  top:-160px; right:-140px;
}
.auth-brand::after{
  content:"";
  position:absolute;
  width:260px;height:260px;
  border-radius:50%;
  background:rgba(11,184,238,.2);
  bottom:-100px; left:-70px;
}
.auth-logo-badge{
  position:relative;
  z-index:1;
  display:inline-flex;
  align-items:center;
  background:#fff;
  border-radius:14px;
  padding:.6rem 1rem;
  width:fit-content;
}
.auth-logo-badge img{ height:34px; width:auto; display:block; }
.auth-brand-copy{ position:relative; z-index:1; margin:2.2rem 0; }
.auth-brand-copy h2{ font-size:1.9rem; line-height:1.28; margin:0 0 .8rem; font-weight:800; }
.auth-brand-copy p{ color:#d7deff; font-size:1rem; line-height:1.6; max-width:380px; }
.auth-brand-stats{ position:relative; z-index:1; display:flex; gap:1.8rem; }
.auth-brand-stats div strong{ display:block; font-size:1.5rem; font-weight:900; }
.auth-brand-stats div span{ color:#c3cef0; font-size:.8rem; font-weight:600; }
.auth-brand-roles{ position:relative; z-index:1; display:flex; flex-wrap:wrap; gap:.5rem; margin-top:1.6rem; }
.auth-brand-roles span{
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.22);
  border-radius:999px;
  padding:.35rem .8rem;
  font-size:.78rem;
  font-weight:700;
}
.auth-form-side{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:2.5rem 1.5rem;
  background:radial-gradient(circle at top right,#f3f6ff,#fff 55%);
}
.auth-card{
  width:min(430px,100%);
  display:grid;
  gap:1.05rem;
}
.auth-card[hidden]{ display:none; }
.auth-card h1{ margin:0; font-size:1.7rem; color:var(--navy); font-weight:900; }
.auth-card .auth-lead{ margin:-.5rem 0 .2rem; color:var(--muted); font-size:.94rem; }
.auth-mobile-logo{ display:none; }
.auth-field{ display:grid; gap:.35rem; }
.auth-field label{
  font-size:.72rem; font-weight:800; letter-spacing:.04em; text-transform:uppercase; color:#4b5570;
}
.auth-input-wrap{ position:relative; }
.auth-input-wrap span{
  position:absolute; left:.9rem; top:50%; transform:translateY(-50%);
  font-size:1rem; opacity:.7;
}
.auth-input-wrap input,
.auth-input-wrap select{
  width:100%;
  border:1.5px solid #e3e7f3;
  border-radius:12px;
  padding:.85rem 1rem .85rem 2.5rem;
  font:inherit; font-size:.95rem;
  color:var(--ink);
  background:#fbfcff;
  transition:border-color .15s,box-shadow .15s,background .15s;
}
.auth-input-wrap input:focus,
.auth-input-wrap select:focus{
  outline:none;
  border-color:var(--royal);
  background:#fff;
  box-shadow:0 0 0 4px rgba(17,101,239,.12);
}
.auth-role-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:.5rem; }
.auth-role-pill{
  border:1.5px solid #e3e7f3;
  border-radius:12px;
  padding:.65rem .4rem;
  background:#fff;
  font-size:.78rem;
  font-weight:700;
  color:var(--ink);
  cursor:pointer;
  text-align:center;
  transition:border-color .15s,background .15s,color .15s,transform .15s;
}
.auth-role-pill:hover{ transform:translateY(-1px); }
.auth-role-pill.active{
  border-color:var(--royal);
  background:linear-gradient(135deg,#eef3ff,#f7f0ff);
  color:var(--royal);
}
.auth-submit{
  width:100%;
  border:0; border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--royal) 55%,var(--purple));
  color:#fff; font-weight:800; font-size:.98rem;
  padding:.95rem;
  cursor:pointer;
  box-shadow:0 16px 34px rgba(17,101,239,.28);
  transition:transform .15s ease, box-shadow .15s ease;
}
.auth-submit:hover{ transform:translateY(-1px); box-shadow:0 20px 40px rgba(17,101,239,.32); }
.auth-links{ display:flex; flex-direction:column; gap:.5rem; text-align:center; margin-top:.2rem; }
.auth-links a{ color:var(--royal); font-weight:700; font-size:.9rem; }
.auth-links a.auth-link-muted{ color:var(--muted); font-weight:600; }
@media(max-width:860px){
  .auth-page{ grid-template-columns:1fr; }
  .auth-brand{ display:none; }
  .auth-form-side{ padding:2.4rem 1.2rem; }
  .auth-mobile-logo{ display:flex; justify-content:center; margin-bottom:.4rem; }
  .auth-mobile-logo img{ height:40px; }
}
@media(max-width:420px){
  .auth-form-side{ padding:1.6rem .9rem; }
  .auth-role-grid{ grid-template-columns:repeat(2,1fr); }
}

@media(max-width:860px){
  .testimonial-grid,
  .admin-shell,
  .admin-stats{
    grid-template-columns:1fr;
  }
  .admin-sidebar{
    position:static;
    height:auto;
    flex-direction:row;
    flex-wrap:wrap;
    align-items:center;
  }
  .admin-nav{
    flex-direction:row;
    flex-wrap:wrap;
  }
  .admin-sidebar-foot{
    border-top:0;
    flex-direction:row;
    margin-left:auto;
  }
  .admin-main{
    padding:1rem;
  }
  .admin-form{
    grid-template-columns:1fr;
  }
  table{
    font-size:.88rem;
  }
}

/* Edumilestones-inspired home page */
.edumi-header .nav{
  height:78px;
}
.edumi-header .brand strong{
  color:#24407f;
  font-size:1.25rem;
}
.login-pill{
  padding:.78rem 1.4rem;
  border:1px solid #dce3f2;
  border-radius:999px;
  color:#25314a;
  background:#fff;
}
.user-menu{
  position:relative;
}
.user-menu-trigger{
  display:flex;
  align-items:center;
  gap:.55rem;
  padding:.45rem 1rem .45rem .45rem;
  border:1px solid #dce3f2;
  border-radius:999px;
  background:#fff;
  cursor:pointer;
  font:inherit;
  color:#25314a;
  max-width:220px;
}
.user-menu-avatar{
  width:34px;
  height:34px;
  border-radius:50%;
  object-fit:cover;
  flex:0 0 auto;
}
.user-menu-avatar-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  color:#fff;
  font-weight:800;
  font-size:.95rem;
}
.user-menu-name{
  font-weight:600;
  font-size:.9rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  max-width:120px;
}
.user-menu-caret{
  font-size:.75rem;
  color:var(--muted);
}
.user-menu-dropdown{
  display:none;
  position:absolute;
  top:calc(100% + .6rem);
  right:0;
  min-width:190px;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  box-shadow:0 18px 40px rgba(16,24,40,.14);
  padding:.5rem;
  z-index:60;
}
.user-menu.open .user-menu-dropdown{
  display:block;
}
.user-menu-dropdown a{
  display:block;
  padding:.6rem .7rem;
  border-radius:9px;
  color:#25314a;
  font-size:.9rem;
  text-decoration:none;
}
.user-menu-dropdown a:hover{
  background:#f3f5fb;
}
@media (max-width:640px){
  .user-menu-name{
    display:none;
  }
  .user-menu-trigger{
    padding:.4rem;
  }
}
.edumi-hero{
  position:relative;
  overflow:hidden;
  padding:34px 0 46px;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 68%);
  text-align:center;
}
.edumi-hero:before{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(circle at 18% 10%,rgba(36,64,127,.1),transparent 24%),radial-gradient(circle at 78% 20%,rgba(17,101,239,.12),transparent 28%);
  pointer-events:none;
}
.edumi-hero .container,
.counsellor-rail,
.home-tabs,
.home-card-panels{
  position:relative;
  z-index:1;
}
.edumi-hero h1{
  margin:0;
  color:#101828;
  font-size:clamp(2.5rem,5vw,4.6rem);
  line-height:1.05;
  font-weight:900;
  letter-spacing:-.05em;
}
.edumi-hero h1 span{
  color:#3155a6;
  border-right:7px solid #3155a6;
  padding-right:.25rem;
}
.edumi-subtitle{
  margin:.8rem 0 1.4rem;
  color:#667085;
  font-size:1.22rem;
  font-weight:600;
}
.location-search{
  width:min(770px,92%);
  margin:0 auto 1.6rem;
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:.9rem;
  background:#fff;
  border-radius:999px;
  padding:.42rem .55rem .42rem 1.35rem;
  box-shadow:0 18px 44px rgba(36,64,127,.22);
  border:1px solid rgba(49,85,166,.08);
}
.location-search span{
  color:#98a2b3;
  font-size:1.4rem;
}
.location-search input{
  border:0;
  outline:0;
  font:inherit;
  font-size:1.12rem;
  min-width:0;
}
.location-search button{
  border:0;
  border-radius:999px;
  padding:1rem 1.65rem;
  color:#fff;
  background:#254b9b;
  font-weight:900;
  cursor:pointer;
}
.popular-cities{
  display:flex;
  justify-content:center;
  align-items:center;
  flex-wrap:wrap;
  gap:.65rem;
  color:#8a94a6;
  font-size:.9rem;
}
.popular-cities strong{
  color:#98a2b3;
  letter-spacing:.03em;
}
.popular-cities a{
  min-width:110px;
  padding:.48rem .9rem;
  border:1px solid #e2e8f0;
  border-radius:999px;
  background:#fff;
  color:#526073;
  box-shadow:0 6px 16px rgba(16,24,40,.06);
}
.edumi-hero-grid{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  align-items:center;
  gap:2.5rem;
  text-align:left;
}
.edumi-hero-text .location-search{
  width:100%;
  margin:0 0 1.6rem;
}
.edumi-hero-text .popular-cities{
  justify-content:flex-start;
}
.edumi-hero-media{
  display:flex;
  justify-content:center;
}
.edumi-hero-media img{
  width:100%;
  max-width:480px;
  height:auto;
  display:block;
}
.counsellor-rail-wrap{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:.6rem;
  margin:3.4rem 0 2rem;
  padding:.1rem 1rem;
}
.counsellor-rail{
  width:100%;
  display:flex;
  gap:2.6rem;
  padding:.1rem 1.6rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.counsellor-rail::-webkit-scrollbar{
  display:none;
}
.rail-nav{
  flex:0 0 auto;
  width:38px;
  height:38px;
  border-radius:50%;
  border:1px solid #e2e8f0;
  background:#fff;
  color:#254b9b;
  font-size:1.4rem;
  line-height:1;
  cursor:pointer;
  box-shadow:0 6px 16px rgba(16,24,40,.08);
}
.rail-nav:hover{
  background:#254b9b;
  color:#fff;
}
.program-rail-wrap{
  display:flex;
  align-items:center;
  gap:.8rem;
}
.program-rail{
  width:100%;
  display:flex;
  gap:1.4rem;
  padding:.3rem .1rem 1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.program-rail::-webkit-scrollbar{
  display:none;
}
.program-rail .feature-card{
  flex:0 0 min(340px,85vw);
  scroll-snap-align:start;
}

/* Auto-scrolling ticker of university-partner-contributed programs -- unlike
   .program-rail this has no prev/next buttons and never stops (except on
   hover), by design: it's a passive highlight strip, not something to browse. */
.marquee-wrap{
  overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.marquee-track{
  display:flex;
  gap:1.4rem;
  width:max-content;
  animation:marquee-scroll 38s linear infinite;
}
.marquee-wrap:hover .marquee-track{
  animation-play-state:paused;
}
@keyframes marquee-scroll{
  from{ transform:translateX(0); }
  to{ transform:translateX(-50%); }
}
.marquee-card{
  flex:0 0 280px;
  display:flex;
  align-items:center;
  gap:.9rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:.75rem;
}
.marquee-card img{
  width:64px;
  height:64px;
  border-radius:10px;
  object-fit:cover;
  flex-shrink:0;
}
.marquee-card h3{
  font-size:.95rem;
  margin:.15rem 0;
}
.marquee-card .tag{
  font-size:.7rem;
}
.marquee-card small{
  color:var(--muted);
}
@media (max-width:640px){
  .marquee-card{
    flex:0 0 220px;
  }
}
.testimonial-marquee-card{
  flex:0 0 360px;
  display:flex;
  align-items:flex-start;
  gap:1rem;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:20px;
  padding:1.3rem;
  box-shadow:0 18px 60px rgba(3,18,61,.09);
}
.testimonial-marquee-card img{
  width:60px;
  height:60px;
  border-radius:50%;
  object-fit:cover;
  flex-shrink:0;
}
.testimonial-marquee-card p{
  color:var(--muted);
  line-height:1.6;
  margin:0 0 .5rem;
}
.testimonial-marquee-card strong{
  display:block;
}
.testimonial-marquee-card small{
  display:block;
  color:var(--purple);
  font-weight:800;
  margin-top:.2rem;
}
@media (max-width:640px){
  .testimonial-marquee-card{
    flex:0 0 280px;
  }
}
.institution-rail-wrap{
  display:flex;
  align-items:center;
  gap:.8rem;
}
.institution-rail{
  width:100%;
  display:flex;
  gap:1.4rem;
  padding:.3rem .1rem 1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.institution-rail::-webkit-scrollbar{
  display:none;
}
.institution-card{
  flex:0 0 220px;
  scroll-snap-align:start;
  background:#fff;
  border:1px solid #e5e7eb;
  border-radius:18px;
  padding:1.3rem 1.1rem;
  text-align:center;
  box-shadow:0 12px 30px rgba(16,24,40,.06);
}
.institution-card img,
.institution-card .institution-avatar-fallback{
  width:64px;
  height:64px;
  border-radius:50%;
  object-fit:cover;
  margin:0 auto .7rem;
}
.institution-avatar-fallback{
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  color:#fff;
  font-weight:800;
  font-size:1.3rem;
}
.institution-card h3{
  font-size:1rem;
  margin:0 0 .2rem;
}
.institution-card small{
  display:block;
  color:var(--muted);
  margin-bottom:.9rem;
}
.institution-card .btn{
  width:100%;
}
@media (max-width:640px){
  .institution-card{
    flex:0 0 190px;
  }
}

.mini-counsellor{
  min-width:220px;
  flex:0 0 auto;
  scroll-snap-align:start;
  display:grid;
  grid-template-columns:58px 1fr;
  gap:.8rem;
  align-items:center;
  text-align:left;
  position:relative;
}
.mini-counsellor img{
  width:58px;
  height:58px;
  border-radius:50%;
  object-fit:cover;
  box-shadow:0 8px 24px rgba(16,24,40,.12);
}
.online-dot{
  position:absolute;
  left:45px;
  bottom:6px;
  width:13px;
  height:13px;
  background:#20c86f;
  border:2px solid #fff;
  border-radius:50%;
}
.mini-counsellor strong{
  color:#202939;
  font-size:.98rem;
}
.mini-counsellor small{
  display:flex;
  gap:.45rem;
  align-items:center;
  margin-top:.3rem;
  color:#344054;
}
.mini-counsellor b{
  padding:.18rem .45rem;
  border-radius:6px;
  border:1px solid #e5e7eb;
  background:#fff;
  color:#3155a6;
  font-size:.78rem;
}
.home-tabs{
  width:min(920px,92%);
  margin:0 auto 1.5rem;
  display:grid;
  grid-template-columns:repeat(6,1fr);
  gap:.2rem;
  padding:.45rem;
  background:#fff;
  border-radius:999px;
  box-shadow:0 16px 36px rgba(16,24,40,.12);
  border:1px solid #edf1f7;
}
.home-tabs button{
  border:0;
  border-radius:999px;
  padding:.95rem 1rem;
  background:transparent;
  color:#202939;
  font-weight:900;
  letter-spacing:.04em;
  text-transform:uppercase;
  cursor:pointer;
}
.home-tabs button.active{
  background:linear-gradient(135deg,#1f91d2,#315eea);
  color:#fff;
  box-shadow:0 10px 22px rgba(49,94,234,.24);
}
.home-card-grid{
  display:none;
  grid-template-columns:repeat(6,1fr);
  gap:1rem;
}
.home-card-grid.active{
  display:grid;
}
.home-program-card{
  position:relative;
  min-height:128px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  gap:.55rem;
  padding:1.1rem .8rem;
  background:#fff;
  border:1px solid #e7ebf2;
  border-radius:16px;
  box-shadow:0 12px 28px rgba(16,24,40,.06);
  text-decoration:none;
  color:inherit;
  transition:transform .15s ease, box-shadow .15s ease;
}
.home-program-card:hover{
  transform:translateY(-3px);
  box-shadow:0 16px 34px rgba(16,24,40,.1);
}
.home-program-card small{
  position:absolute;
  top:.55rem;
  right:.6rem;
  padding:.2rem .48rem;
  color:#6677a0;
  background:#f8fbff;
  border:1px solid #edf1f7;
  border-radius:999px;
  font-size:.72rem;
  font-weight:800;
}
.home-program-card span{
  display:grid;
  place-items:center;
  width:42px;
  height:42px;
  border-radius:50%;
  background:linear-gradient(135deg,#e8f5ff,#fff0f9);
  box-shadow:0 8px 20px rgba(49,85,166,.14);
  font-size:1.35rem;
}
.home-program-card h3{
  margin:0;
  color:#25314a;
  font-size:1rem;
  line-height:1.35;
}
@media(max-width:1060px){
  .home-card-grid{
    grid-template-columns:repeat(3,1fr);
  }
  .counsellor-rail{
    justify-content:flex-start;
    overflow-x:auto;
    gap:1.4rem;
  }
}
@media(max-width:600px){
  .rail-nav{
    display:none;
  }
  .counsellor-rail-wrap{
    padding:.1rem 0;
  }
}
@media(max-width:960px){
  .edumi-hero-grid{
    grid-template-columns:1fr;
    text-align:center;
    gap:1.5rem;
  }
  .edumi-hero-text .popular-cities{
    justify-content:center;
  }
  .edumi-hero-media{
    order:-1;
  }
  .edumi-hero-media img{
    max-width:320px;
  }
}
@media(max-width:720px){
  .location-search{
    grid-template-columns:1fr;
    border-radius:24px;
    padding:1rem;
  }
  .location-search span{
    display:none;
  }
  .home-tabs,
  .home-card-grid{
    grid-template-columns:repeat(2,1fr);
  }
  .home-tabs{
    border-radius:20px;
  }
  .home-tabs button{
    padding:.75rem .4rem;
    font-size:.78rem;
  }
  .edumi-hero h1 span{
    border-right:0;
  }
  .popular-cities a{
    min-width:auto;
  }
}
/* Career counsellor listing page */
.active-link{
  color:var(--royal);
}
.list-hero{
  padding:38px 0 30px;
  background:linear-gradient(180deg,#f8fbff 0%,#fff 68%);
  text-align:left;
}
.breadcrumb{
  color:#8a94a6;
  font-size:.85rem;
  margin:0 0 .8rem;
}
.breadcrumb a{
  color:#667085;
}
.list-hero h1{
  margin:.1rem 0 .6rem;
  color:#101828;
  font-size:clamp(2rem,4vw,3.1rem);
  letter-spacing:-.03em;
  line-height:1.1;
}
.list-hero h1 span{
  color:var(--royal);
}
.list-hero .popular-cities{
  justify-content:flex-start;
  margin-top:1.4rem;
}
/* .list-hero's own bottom padding plus the next .section's 90px top padding
   stacked into a large empty gap right after the "FIND COUNSELLOR IN:" row. */
.list-hero + .list-layout{
  padding-top:20px;
}
.popular-cities a.is-active{
  background:linear-gradient(135deg,var(--royal),var(--purple));
  color:#fff;
  border-color:transparent;
}
.list-layout{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:2.4rem;
  align-items:start;
}
.filter-bar{
  display:flex;
  flex-wrap:wrap;
  gap:1.6rem;
  background:#fff;
  border:1px solid rgba(17,101,239,.08);
  border-radius:24px;
  padding:1.3rem 1.5rem;
  box-shadow:0 14px 40px rgba(3,18,61,.06);
  margin-bottom:1.4rem;
}
.filter-group{
  display:flex;
  flex-direction:column;
  gap:.55rem;
}
.filter-label{
  font-size:.72rem;
  font-weight:800;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:#98a2b3;
}
.filter-pills{
  display:flex;
  gap:.5rem;
  flex-wrap:wrap;
}
.filter-pills button{
  border:1px solid #e2e8f0;
  background:#fff;
  color:#475467;
  border-radius:999px;
  padding:.5rem 1rem;
  font-weight:700;
  font-size:.85rem;
  cursor:pointer;
}
.filter-pills button.active{
  background:linear-gradient(135deg,var(--royal),var(--purple));
  border-color:transparent;
  color:#fff;
}
.results-count{
  font-weight:800;
  color:var(--navy);
  margin:0 0 1.2rem;
}
.empty-state{
  background:#f5f8ff;
  border-radius:24px;
  padding:2rem;
  margin-bottom:1.4rem;
  display:grid;
  gap:1rem;
  justify-items:start;
}
.counsellor-grid{
  display:grid;
  gap:1.3rem;
}
.counsellor-card{
  display:grid;
  grid-template-columns:180px 1fr;
  gap:1.4rem;
  background:#fff;
  border-radius:26px;
  padding:1.4rem;
  border:1px solid rgba(17,101,239,.08);
  box-shadow:0 16px 50px rgba(3,18,61,.08);
}
.counsellor-card-media img{
  width:100%;
  height:180px;
  object-fit:cover;
  border-radius:18px;
}
.counsellor-card-heading{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:.6rem;
  flex-wrap:wrap;
}
.counsellor-card-heading h3{
  margin:0;
  color:var(--navy);
  font-size:1.3rem;
}
.reviews-pill{
  background:#fff7e6;
  color:#a66a00;
  border-radius:999px;
  padding:.3rem .7rem;
  font-weight:800;
  font-size:.78rem;
}
.qualification{
  color:var(--muted);
  margin:.3rem 0;
}
.availability-status{
  display:flex;
  align-items:center;
  gap:.4rem;
  margin:.2rem 0 .5rem;
  font-size:.82rem;
  font-weight:700;
  color:var(--ink);
}
.status-dot{
  width:9px;
  height:9px;
  border-radius:50%;
  display:inline-block;
}
.status-available{
  background:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,.16);
}
.status-unavailable{
  background:#9aa4c2;
}
.localities{
  margin:.2rem 0;
  font-size:.88rem;
}
.localities a{
  color:var(--royal);
  font-weight:700;
}
.category-tags{
  display:flex;
  gap:.4rem;
  margin:.5rem 0;
}
.category-tags span{
  border:1px solid #e2e8f0;
  border-radius:999px;
  padding:.25rem .6rem;
  font-size:.72rem;
  font-weight:800;
  color:#667085;
}
.category-tags span.active{
  border-color:var(--royal);
  color:var(--royal);
  background:rgba(17,101,239,.08);
}
.stat-row{
  margin:.25rem 0;
  color:#344054;
  font-size:.92rem;
}
.highlight-list{
  margin:.7rem 0;
  padding-left:1.1rem;
  color:#3b4666;
  font-size:.9rem;
  line-height:1.7;
}
.counsellor-actions{
  display:flex;
  gap:.7rem;
  flex-wrap:wrap;
  margin-top:.4rem;
}
.no-fee{
  margin:.6rem 0 0;
  color:#20c86f;
  font-weight:800;
  font-size:.8rem;
}
.home-counsellor-rail{
  width:100%;
  display:flex;
  gap:1.4rem;
  padding:.3rem .1rem 1rem;
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  scroll-behavior:smooth;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;
}
.home-counsellor-rail::-webkit-scrollbar{
  display:none;
}
.home-counsellor-card{
  flex:0 0 260px;
  scroll-snap-align:start;
  background:#fff;
  border-radius:22px;
  padding:1.2rem;
  border:1px solid rgba(17,101,239,.08);
  box-shadow:0 16px 45px rgba(3,18,61,.08);
  text-align:left;
}
.home-counsellor-card img{
  width:100%;
  height:150px;
  object-fit:cover;
  border-radius:16px;
  margin-bottom:.8rem;
}
.home-counsellor-card .counsellor-card-heading h3{
  font-size:1.05rem;
}
.home-counsellor-card .qualification{
  font-size:.85rem;
  min-height:2.6em;
  overflow:hidden;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
}
.home-counsellor-card .counsellor-actions{
  flex-direction:column;
}
.home-counsellor-card .counsellor-actions .btn{
  width:100%;
}
.home-view-all{
  text-align:center;
  margin:1.6rem 0 0;
}
@media (max-width:640px){
  .home-counsellor-card{
    flex:0 0 220px;
  }
}
.list-sidebar{
  position:sticky;
  top:100px;
}
.sidebar-card{
  background:linear-gradient(135deg,#eef8ff,#f7efff);
  border-radius:26px;
  padding:1.8rem;
  text-align:center;
  box-shadow:0 16px 50px rgba(3,18,61,.08);
}
.sidebar-card h3{
  color:var(--navy);
  font-size:1.15rem;
  margin:.4rem 0 1.2rem;
}
.sidebar-actions{
  display:grid;
  gap:.7rem;
}
.sidebar-note{
  margin-top:1.1rem;
  color:var(--muted);
  font-size:.82rem;
}
.how-it-works .steps-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:1.2rem;
  margin-top:2rem;
}
.how-it-works article{
  background:rgba(255,255,255,.08);
  border-radius:22px;
  padding:1.6rem;
}
.how-it-works span{
  display:grid;
  place-items:center;
  width:44px;
  height:44px;
  border-radius:50%;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  font-weight:900;
  margin-bottom:1rem;
}
.how-it-works p{
  color:#dfe4ff;
  line-height:1.6;
  margin:0;
}
.faq-list{
  display:grid;
  gap:.9rem;
}
.faq-item{
  background:#fff;
  border:1px solid rgba(17,101,239,.08);
  border-radius:18px;
  padding:1.1rem 1.4rem;
  box-shadow:0 10px 30px rgba(3,18,61,.05);
}
.faq-item summary{
  cursor:pointer;
  font-weight:800;
  color:var(--navy);
  list-style:none;
}
.faq-item summary::-webkit-details-marker{
  display:none;
}
.faq-item summary:before{
  content:"+";
  display:inline-block;
  width:1.2em;
  color:var(--royal);
  font-weight:900;
}
.faq-item[open] summary:before{
  content:"–";
}
.faq-item p{
  margin:.8rem 0 0 1.2em;
  color:var(--muted);
  line-height:1.7;
}
@media(max-width:960px){
  .list-layout{
    grid-template-columns:1fr;
  }
  .list-sidebar{
    position:static;
  }
  .counsellor-card{
    grid-template-columns:1fr;
  }
  .counsellor-card-media img{
    height:200px;
  }
  .how-it-works .steps-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:640px){
  .how-it-works .steps-grid{
    grid-template-columns:1fr;
  }
}

/* ---------------------------------------------------------------------- */
/* Master CRUD: modal + DataTables theming                                */
/* ---------------------------------------------------------------------- */
.modal-backdrop{
  position:fixed;
  inset:0;
  background:rgba(3,18,61,.45);
  display:flex;
  align-items:center;
  justify-content:center;
  padding:1.5rem;
  z-index:100;
}
.modal-backdrop[hidden]{
  display:none;
}
.modal-card{
  background:#fff;
  border-radius:20px;
  width:min(680px,100%);
  max-height:90vh;
  overflow:auto;
  box-shadow:0 30px 80px rgba(3,18,61,.28);
}
.modal-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:1.25rem 1.5rem;
  border-bottom:1px solid #eef1f8;
  position:sticky;
  top:0;
  background:#fff;
  z-index:1;
}
.modal-head h3{
  margin:0;
  font-size:1.1rem;
}
.modal-close{
  border:0;
  background:#f4f6fb;
  width:32px;
  height:32px;
  border-radius:50%;
  font-size:1.2rem;
  line-height:1;
  cursor:pointer;
  color:var(--muted);
}
.modal-close:hover{
  background:#e9edf6;
  color:var(--ink);
}
.modal-card form.admin-form{
  padding:1.5rem;
}
.field-hint{
  display:block;
  color:var(--muted);
  font-size:.8rem;
  margin:-.6rem 0 .4rem;
}
.image-upload-wrap{
  display:flex;
  align-items:center;
  gap:.9rem;
  border:1px dashed #d0d5dd;
  border-radius:10px;
  padding:.6rem .8rem;
}
.image-preview{
  width:56px;
  height:56px;
  border-radius:8px;
  object-fit:cover;
  flex-shrink:0;
  background:#f2f4f7;
}
.image-upload-controls{
  display:flex;
  flex-direction:column;
  gap:.3rem;
}
.image-upload-status{
  color:var(--muted);
  font-size:.78rem;
  min-height:1em;
}

/* DataTables.net overrides to match brand */
table.master-datatable{
  width:100%;
}
.dt-container{
  padding:0;
}
.dt-layout-row{
  align-items:center;
}
.dt-search input,
.dt-length select{
  border:1px solid #dbe1ee;
  border-radius:10px;
  padding:.55rem .8rem;
  font:inherit;
}
.dt-search input:focus,
.dt-length select:focus{
  outline:none;
  border-color:var(--royal);
  box-shadow:0 0 0 3px rgba(17,101,239,.14);
}
.dt-filter-row th{
  padding:.45rem .5rem;
  background:#f8fafc;
}
.dt-col-filter{
  width:100%;
  border:1px solid #dbe1ee;
  border-radius:8px;
  padding:.4rem .55rem;
  font:inherit;
  font-size:.82rem;
  font-weight:500;
  color:var(--ink);
  background:#fff;
}
.dt-col-filter:focus{
  outline:none;
  border-color:var(--royal);
  box-shadow:0 0 0 3px rgba(17,101,239,.14);
}
.dt-paging .dt-paging-button{
  border-radius:8px !important;
  border:1px solid #e3e8f4 !important;
  margin-left:.25rem;
  padding:.35rem .7rem !important;
  color:var(--ink) !important;
  background:#fff !important;
}
.dt-paging .dt-paging-button.current{
  background:linear-gradient(135deg,var(--royal),var(--purple)) !important;
  border-color:transparent !important;
  color:#fff !important;
}
.dt-paging .dt-paging-button:hover:not(.disabled){
  background:#eef3ff !important;
  color:var(--royal) !important;
}
table.dataTable thead th{
  position:relative;
}

/* ---------------------------------------------------------------------- */
/* Portal shell (student / school / partner / college / university)      */
/* ---------------------------------------------------------------------- */
.portal-sidebar[data-role="student"] a.active,
.portal-topbar[data-role="student"]{ --role-color:var(--royal); }
.portal-sidebar[data-role="school"] a.active,
.portal-topbar[data-role="school"]{ --role-color:#0bb8ee; }
.portal-sidebar[data-role="partner"] a.active,
.portal-topbar[data-role="partner"]{ --role-color:#8a16d6; }
.portal-sidebar[data-role="college"] a.active,
.portal-topbar[data-role="college"]{ --role-color:#f59e0b; }
.portal-sidebar[data-role="university"] a.active,
.portal-topbar[data-role="university"]{ --role-color:#df0606; }
.admin-sidebar a.active[data-role-accent]{
  background:var(--role-color,linear-gradient(135deg,var(--royal),var(--purple)));
}
.portal-welcome{
  background:linear-gradient(135deg,var(--royal),var(--purple));
  border-radius:20px;
  padding:2rem;
  color:#fff;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1.5rem;
  flex-wrap:wrap;
}
.portal-welcome h2{
  margin:0 0 .4rem;
}
.portal-welcome p{
  margin:0;
  opacity:.9;
}
.role-pill{
  background:rgba(255,255,255,.18);
  border-radius:999px;
  padding:.5rem 1rem;
  font-weight:800;
  font-size:.85rem;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.portal-empty{
  text-align:center;
  color:var(--muted);
  padding:2.5rem 1rem;
}
.session-report-list{
  display:flex;
  flex-direction:column;
  gap:1rem;
}
.session-report-card{
  border:1px solid #e5e7eb;
  border-radius:14px;
  padding:1.1rem 1.3rem;
  background:#fff;
}
.session-report-card-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:1rem;
  flex-wrap:wrap;
}
.session-report-card-head strong{
  display:block;
  font-size:1rem;
}
.session-report-card-head small{
  color:var(--muted);
}
.session-report-summary p{
  margin:.25rem 0;
  color:#374151;
  line-height:1.6;
}
.session-report-card details summary{
  font-size:.85rem;
  color:var(--muted);
  font-weight:600;
}

/* ---------------------------------------------------------------------- */
/* Public marketing pages: prose, comparison table, role-signup funnel    */
/* ---------------------------------------------------------------------- */
.prose{
  max-width:780px;
  margin:0 auto;
  line-height:1.8;
  color:#374151;
}
.prose h2{
  margin-top:2.2rem;
  color:var(--navy);
}
.prose h3{
  margin-top:1.6rem;
  color:var(--navy);
}
.prose ul{
  padding-left:1.3em;
}
.prose li{
  margin:.4rem 0;
}
.prose p{
  margin:.9rem 0;
}
.updated-note{
  color:var(--muted);
  font-size:.9rem;
  margin-bottom:1.5rem;
}

.compare-table-wrap{
  overflow-x:auto;
  border-radius:18px;
  border:1px solid #e9edf6;
  box-shadow:var(--shadow);
}
.compare-table{
  width:100%;
  border-collapse:collapse;
  min-width:640px;
  background:#fff;
}
.compare-table th,
.compare-table td{
  padding:1rem 1.2rem;
  text-align:left;
  border-bottom:1px solid #eef1f8;
}
.compare-table thead th{
  background:var(--navy);
  color:#fff;
  font-weight:800;
}
.compare-table thead th:nth-child(2){
  background:linear-gradient(135deg,var(--royal),var(--purple));
}
.compare-table tbody tr:nth-child(even){
  background:#f8fafe;
}
.compare-table td:nth-child(2){
  font-weight:800;
  color:var(--royal);
}

.funnel-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
  gap:1.2rem;
}
.funnel-card{
  background:#fff;
  border-radius:18px;
  padding:1.6rem;
  border:1px solid #e9edf6;
  box-shadow:0 1px 2px rgba(16,24,40,.04);
  display:flex;
  flex-direction:column;
  gap:.6rem;
}
.funnel-card span{
  font-size:2rem;
}
.funnel-card h3{
  margin:0;
  color:var(--navy);
}
.funnel-card p{
  margin:0;
  color:var(--muted);
  flex:1;
}
@media(max-width:640px){
  .compare-table{
    min-width:560px;
  }
}

/* ---------------------------------------------------------------------- */
/* General small-phone tightening (applies across every page)             */
/* ---------------------------------------------------------------------- */
@media(max-width:640px){
  .section{
    padding:52px 0;
  }
  .section-heading{
    margin-bottom:1.6rem;
  }
  .edumi-hero{
    padding:22px 0 32px;
  }
  .list-hero{
    padding:26px 0 20px;
  }
  .cta-panel,
  .contact-card{
    padding:1.8rem 1.4rem;
    border-radius:26px;
  }
  .modal-backdrop{
    padding:0;
    align-items:flex-end;
  }
  .modal-card{
    width:100%;
    max-height:92vh;
    border-radius:20px 20px 0 0;
  }
}
@media(max-width:600px){
  .admin-sidebar a{
    padding:.55rem .7rem;
    font-size:.86rem;
  }
  .admin-brand{
    padding:.4rem .6rem;
  }
  .admin-user strong{
    font-size:.8rem;
  }
  .admin-topbar h1{
    font-size:1.35rem;
  }
}

/* ------------------------------------------------------------------------ */
/* Psychometric assessment: stage cards + plan pricing cards                */
/* ------------------------------------------------------------------------ */
.stage-card{
  display:flex;
  flex-direction:column;
  text-align:left;
}
.stage-icon{
  display:flex;
  align-items:center;
  justify-content:center;
  width:60px;
  height:60px;
  border-radius:18px;
  background:rgba(17,101,239,.1);
  font-size:1.8rem;
  margin-top:0;
}
.stage-card h3{
  margin-top:1rem;
}
.stage-card p{
  flex:1;
}
.stage-card .btn-small{
  align-self:flex-start;
  margin-top:.4rem;
}

.plans-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:1.6rem;
  max-width:1180px;
  margin:0 auto;
}
.section-heading.centered{
  max-width:640px;
  margin-left:auto;
  margin-right:auto;
  text-align:center;
}
.section-heading-lead{
  color:var(--muted);
  font-size:1.05rem;
  line-height:1.6;
  margin-top:.5rem;
}
.plan-card-image-placeholder{
  height:170px;
  width:100%;
  border-radius:18px;
  margin-bottom:.9rem;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  font-size:2.6rem;
}
.plan-card{
  display:flex;
  flex-direction:column;
  position:relative;
  padding-top:1.6rem;
  transition:transform .2s ease,box-shadow .2s ease;
}
.plan-card:hover{
  transform:translateY(-6px);
  box-shadow:0 26px 70px rgba(3,18,61,.16);
}
.plan-card img{
  height:170px;
  width:100%;
  object-fit:cover;
  border-radius:18px;
  margin-bottom:.9rem;
}
.plan-card-badge{
  display:inline-flex;
  padding:.3rem .75rem;
  border-radius:999px;
  background:rgba(17,101,239,.1);
  color:var(--royal);
  font-weight:800;
  font-size:.74rem;
  text-transform:uppercase;
  letter-spacing:.05em;
  width:fit-content;
}
.plan-card h3{
  margin:.85rem 0 .35rem;
}
.plan-card-desc{
  color:var(--muted);
  line-height:1.65;
  flex:1;
}
.plan-card-price-row{
  display:flex;
  align-items:baseline;
  gap:.4rem;
  margin:1rem 0 .3rem;
}
.plan-card-price{
  font-size:1.9rem;
  font-weight:900;
  color:var(--navy);
}
.plan-card-price-label{
  color:var(--muted);
  font-size:.82rem;
  font-weight:700;
}
.plan-card-checklist{
  list-style:none;
  margin:.6rem 0 1.1rem;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:.4rem .6rem;
}
.plan-card-checklist li{
  display:flex;
  align-items:center;
  gap:.4rem;
  font-size:.82rem;
  font-weight:700;
  color:#3b4666;
}
.plan-card-checklist li:before{
  content:"✓";
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:18px;
  height:18px;
  border-radius:50%;
  background:rgba(8,122,56,.12);
  color:#087a38;
  font-size:.72rem;
  font-weight:900;
  flex-shrink:0;
}
.plan-card-cta{
  margin-top:auto;
}
.plan-card-cta .btn{
  width:100%;
  text-align:center;
  justify-content:center;
}

.assessment-detail-image{
  width:100%;
  height:260px;
  object-fit:cover;
  border-radius:26px;
  box-shadow:var(--shadow);
  margin-bottom:1.2rem;
}
.assessment-detail-image-placeholder{
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg,var(--royal),var(--purple));
  font-size:4rem;
}
.assessment-detail-panel{
  background:white;
  border-radius:28px;
  padding:2rem;
  box-shadow:0 18px 60px rgba(3,18,61,.09);
  border:1px solid rgba(17,101,239,.08);
}
.assessment-feature-grid{
  list-style:none;
  margin:1.2rem 0 0;
  padding:0;
  display:grid;
  gap:.7rem;
}
.assessment-feature-grid li{
  display:flex;
  align-items:flex-start;
  gap:.65rem;
  background:#f6f8ff;
  border-radius:14px;
  padding:.75rem .9rem;
  color:#2c3554;
  font-weight:600;
  line-height:1.5;
}
.assessment-feature-grid li:before{
  content:"✓";
  display:flex;
  align-items:center;
  justify-content:center;
  width:22px;
  height:22px;
  border-radius:50%;
  background:rgba(8,122,56,.12);
  color:#087a38;
  font-size:.8rem;
  font-weight:900;
  flex-shrink:0;
  margin-top:.1rem;
}
@media(max-width:600px){
  .plan-card-checklist{
    grid-template-columns:1fr;
  }
}

/* Detail page: top-align the two split columns (image/stats can be shorter
   than the description panel -- centering them made the boxes look
   misaligned) and tighten the gap under the hero banner. */
.split.split-top{
  align-items:flex-start;
}
.section.section-tight-top{
  padding-top:36px;
}

/* Detail page price/dimension/session stats -- these sit directly on the
   plain white section background here (not inside a dark .alt-section like
   .mentor-grid was designed for), so they need light-background colors
   instead of the frosted-glass-on-navy look, otherwise the labels are
   nearly invisible. */
.assessment-stat-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:.85rem;
}
.assessment-stat-grid div{
  background:#f6f8ff;
  border:1px solid rgba(17,101,239,.1);
  padding:1.1rem .7rem;
  border-radius:18px;
  text-align:center;
}
.assessment-stat-grid strong{
  display:block;
  font-size:1.5rem;
  color:var(--navy);
}
.assessment-stat-grid span{
  display:block;
  margin-top:.25rem;
  color:var(--muted);
  font-size:.78rem;
  font-weight:700;
  line-height:1.3;
}
@media(max-width:600px){
  .assessment-stat-grid{
    grid-template-columns:1fr;
  }
}