@import url('https://api.fontshare.com/v2/css?f[]=wise-sans@700,800&display=swap');

/* ── Site Protection ── */
*, *::before, *::after {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
img, video, canvas {
  pointer-events: none;
  -webkit-user-drag: none;
  user-drag: none;
  -webkit-touch-callout: none;
}
@media print {
  html, body { display: none !important; visibility: hidden !important; }
}

/* ── TOKENS ──────────────────────────────────────── */
:root {
  --bg:    #ffffff;
  --dark:  #0e0f0c;

  /* BITS brand */
  --red:   #C8102E;
  --blue:  #003087;

  /* Wise-inspired palette */
  --forest:   #163300;
  --lime:     #9fe870;
  --lime-hv:  #80e142;
  --yellow:   #ffeb69;
  --orange:   #ffc091;
  --purple:   #260a2f;
  --teal:     #a0e1e1;
  --pink:     #ffd7ef;

  /* Ink scale */
  --ink:    #0e0f0c;
  --ink-60: rgba(14,15,12,.60);
  --ink-35: rgba(14,15,12,.35);
  --ink-15: rgba(14,15,12,.15);
  --ink-08: rgba(14,15,12,.08);
  --ink-04: rgba(14,15,12,.04);

  /* White scale */
  --w:     #ffffff;
  --w-80:  rgba(255,255,255,.80);
  --w-60:  rgba(255,255,255,.60);
  --w-35:  rgba(255,255,255,.35);
  --w-15:  rgba(255,255,255,.15);
  --w-08:  rgba(255,255,255,.08);

  /* Radii */
  --r-pill: 9999px;
  --r-lg:   24px;
  --r-md:   16px;
  --r-sm:   10px;
  --r-xs:    6px;

  /* Easing */
  --ease:   cubic-bezier(.215,.61,.355,1);
  --spring: cubic-bezier(.19,1,.22,1);
}

/* ── RESET ───────────────────────────────────────── */
*,*::before,*::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body {
  background:var(--bg); color:var(--ink);
  font-family:'Space Grotesk',system-ui,sans-serif;
  font-weight:400; -webkit-font-smoothing:antialiased;
  animation:pageIn .4s var(--ease) both;
  overflow-x:hidden;
  max-width:100vw;
}
.page { overflow-x:hidden; }
@keyframes pageIn { from{opacity:0} to{opacity:1} }
::-webkit-scrollbar{width:3px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--ink-15);border-radius:2px;}
a{text-decoration:none;color:inherit;}
button{font-family:inherit;cursor:pointer;}
h1,h2,h3,h4,h5,h6{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:700;}
textarea{resize:none;}
select{-webkit-appearance:none;appearance:none;cursor:pointer;}
*:focus-visible{outline:2px solid var(--lime);outline-offset:3px;}

/* ── LAYOUT ──────────────────────────────────────── */
.page{min-height:100vh;display:flex;flex-direction:column;padding-top:56px;}
.wrap    {max-width:1000px;margin:0 auto;padding:0 24px;width:100%;}
.wrap-lg {max-width:1100px;margin:0 auto;padding:0 24px;width:100%;}
.wrap-sm {max-width:680px; margin:0 auto;padding:0 24px;width:100%;}

/* ── NAV ─────────────────────────────────────────── */
.sticky-nav{position:fixed;top:0;left:0;right:0;width:100%;z-index:50;background:#fff;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-bottom:1px solid rgba(0,0,0,.08);}
.nav-inner{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:56px;gap:16px;}
.nav-logo{justify-self:start;}
.nav-links{justify-self:center;}
.nav-inner>:last-child{justify-self:end;}
.nav-logo{display:flex;align-items:center;gap:12px;background:none;color:inherit;white-space:nowrap;flex-shrink:0;}
.nav-links{display:flex;align-items:center;gap:4px;}
.nav-link{
  font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;
  color:var(--ink-35);padding:5px 12px;border-radius:var(--r-pill);
  transition:color .15s var(--ease),background .15s var(--ease);
}
.nav-link:hover,.nav-link.active{color:var(--ink);}
.nav-link-emp{color:var(--ink-35);}
.nav-link-emp:hover,.nav-link-emp.active{color:var(--ink);}
.logo-ph{width:32px;height:32px;border-radius:50%;font-size:.6rem;}
@media(max-width:640px){
  .nav-links{display:none;}
  .nav-inner>:last-child{grid-column:3;}
  .nav-logo .t-nav{display:none;}
  .nav-logo>div{display:none;}
  .emp-nav-cta{display:none !important;}
  .emp-stats-grid{grid-template-columns:repeat(2,1fr) !important;}
  .talent-why-grid{grid-template-columns:1fr !important;}
  #globe-wrap{justify-self:center !important;align-items:center !important;}
}

/* ── MOBILE SIDEBAR ──────────────────────────────── */
#mob-hamburger { display: none !important; }

#mob-overlay {
  display: none;
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(0,0,0,.45);
  opacity: 0; transition: opacity .25s;
}
#mob-overlay.open { display: block; opacity: 1; }

#mob-sidebar {
  position: fixed; top: 0; left: 0; bottom: 0;
  width: 280px; max-width: 80vw;
  z-index: 9991;
  background: #fff;
  box-shadow: 4px 0 32px rgba(0,0,0,.15);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4,0,.2,1);
  padding: 0;
}
#mob-sidebar.open { transform: translateX(0); }

#mob-sidebar-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(0,0,0,.08);
  flex-shrink: 0;
}
#mob-sidebar-header span {
  font-size: 11px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(0,0,0,.4);
}
#mob-close {
  width: 32px; height: 32px; border-radius: 50%;
  border: none; background: rgba(0,0,0,.06);
  cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background .15s;
}
#mob-close:hover { background: rgba(0,0,0,.12); }

#mob-nav-links {
  flex: 1; overflow-y: auto;
  display: flex; flex-direction: column;
  padding: 12px 0;
}
.mob-link {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 24px;
  font-size: 14px; font-weight: 500; color: #0e0f0c;
  text-decoration: none;
  border-left: 3px solid transparent;
  transition: background .15s, border-color .15s, color .15s;
}
/* Blue scheme (student portal) */
#mob-sidebar[data-scheme="blue"] .mob-link:hover  { background: rgba(0,48,135,.05); border-left-color: #003087; color: #003087; }
#mob-sidebar[data-scheme="blue"] .mob-link.active { background: rgba(0,48,135,.07); border-left-color: #003087; color: #003087; font-weight: 600; }
/* Red scheme (employer portal) */
#mob-sidebar[data-scheme="red"] .mob-link:hover  { background: rgba(200,16,46,.05); border-left-color: #C8102E; color: #C8102E; }
#mob-sidebar[data-scheme="red"] .mob-link.active { background: rgba(200,16,46,.07); border-left-color: #C8102E; color: #C8102E; font-weight: 600; }
/* Yellow scheme (about page) */
#mob-sidebar[data-scheme="yellow"] .mob-link:hover  { background: rgba(217,119,6,.07); border-left-color: #d97706; color: #d97706; }
#mob-sidebar[data-scheme="yellow"] .mob-link.active { background: rgba(217,119,6,.09); border-left-color: #d97706; color: #d97706; font-weight: 600; }
.mob-link-icon { width: 16px; height: 16px; opacity: .45; flex-shrink: 0; }

#mob-sidebar-footer {
  padding: 16px 20px;
  border-top: 1px solid rgba(0,0,0,.08);
  flex-shrink: 0;
}
#mob-sidebar-footer a {
  display: block; text-align: center;
  padding: 11px; border-radius: 9999px;
  color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: .06em;
  text-decoration: none; text-transform: uppercase;
  transition: background .15s;
}
#mob-sidebar[data-scheme="blue"]   #mob-sidebar-footer a { background: #003087; }
#mob-sidebar[data-scheme="blue"]   #mob-sidebar-footer a:hover { background: #001f52; }
#mob-sidebar[data-scheme="red"]    #mob-sidebar-footer a { background: #C8102E; }
#mob-sidebar[data-scheme="red"]    #mob-sidebar-footer a:hover { background: #a00d25; }
#mob-sidebar[data-scheme="yellow"] #mob-sidebar-footer a { background: #d97706; }
#mob-sidebar[data-scheme="yellow"] #mob-sidebar-footer a:hover { background: #b45309; }

/* ── BUTTONS ─────────────────────────────────────── */
.g-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  padding:10px 22px 8px;
  font-size:11px;letter-spacing:.07em;text-transform:uppercase;font-weight:600;
  background:transparent;border:1.5px solid var(--ink-15);color:var(--ink);
  border-radius:var(--r-pill);cursor:pointer;white-space:nowrap;
  transition:background .15s var(--ease),border-color .15s var(--ease),
             color .15s var(--ease),transform .15s var(--spring);
}
.g-btn:hover{transform:translateY(-1px);border-color:var(--ink-35);background:var(--ink-04);}
.g-btn:active{transform:none;}

.g-btn-lime  {background:var(--lime);border-color:var(--lime);color:var(--forest);}
.g-btn-lime:hover{background:var(--lime-hv);border-color:var(--lime-hv);color:var(--forest);transform:translateY(-1px);}

.g-btn-forest{background:var(--forest);border-color:var(--forest);color:var(--lime);}
.g-btn-forest:hover{background:#0d1f00;border-color:#0d1f00;color:var(--lime);transform:translateY(-1px);}

.g-btn-blue  {background:var(--blue);border-color:var(--blue);color:var(--w);}
.g-btn-blue:hover{background:#00216e;border-color:#00216e;color:var(--w);transform:translateY(-1px);}

.g-btn-red   {background:var(--red);border-color:var(--red);color:var(--w);}
.g-btn-red:hover{background:#a30e24;border-color:#a30e24;color:var(--w);transform:translateY(-1px);}

.g-btn-lred  {border-color:rgba(200,16,46,.35);color:#ff8fa3;}
.g-btn-lred:hover{background:var(--red);border-color:var(--red);color:var(--w);transform:translateY(-1px);}

.g-btn-light {border-color:var(--w-15);color:var(--w-60);}
.g-btn-light:hover{border-color:var(--w);background:var(--w);color:var(--dark);transform:translateY(-1px);}

.g-btn-yellow{background:var(--yellow);border-color:var(--yellow);color:var(--forest);font-weight:700;}
.g-btn-yellow:hover{background:#f5df50;border-color:#f5df50;transform:translateY(-1px);}

.g-btn-sm  {padding:5px 14px 4px;font-size:10px;}
.g-btn-lg  {padding:18px 36px 16px;font-size:12px;min-height:56px;}
.g-btn-full{width:100%;justify-content:center;}

/* ── TYPOGRAPHY ──────────────────────────────────── */
.t-display {font-size:clamp(40px,8vw,96px);font-weight:700;line-height:.88;letter-spacing:-.04em;}
.t-title   {font-size:clamp(28px,4.5vw,52px);font-weight:600;line-height:1.05;letter-spacing:-.03em;}
.t-heading {font-size:clamp(18px,2vw,24px);font-weight:600;line-height:1.15;letter-spacing:-.02em;}
.t-body    {font-size:13px;line-height:1.7;color:var(--ink-60);}
.t-sm      {font-size:11px;line-height:1.6;color:var(--ink-35);}
.t-nav     {font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:500;}
.t-label       {font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--ink-35);}
.t-label-light {font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--w-35);}

/* ── SECTION MARKS ───────────────────────────────── */
.section-mark{display:flex;align-items:flex-start;gap:14px;margin-bottom:36px;}
.section-mark-bar{width:2px;height:36px;background:var(--red);border-radius:2px;flex-shrink:0;margin-top:3px;}
.red-line  {display:block;width:40px;height:2px;background:var(--red);margin:16px 0 20px;}
.lime-line {display:block;width:40px;height:2px;background:var(--lime);margin:16px 0 20px;}

/* ── MARQUEE ─────────────────────────────────────── */
.marquee-bar{
  overflow:hidden;white-space:nowrap;
  background:var(--forest);color:var(--lime);
  padding:10px 0;
  font-size:10px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
}
.marquee-track{display:inline-block;animation:marquee 32s linear infinite;}
.marquee-track span{padding:0 28px;}
.marquee-track .mq-dot{padding:0;opacity:.35;}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ── SECTION PANELS (full-bleed) ─────────────────── */
.section-panel{display:block;text-decoration:none;transition:filter .15s;}
.section-panel:hover{filter:brightness(.93);}
.section-panel-inner{
  max-width:1100px;margin:0 auto;
  padding:clamp(40px,5.5vw,80px) 24px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
.sp-num{
  font-size:10px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  padding:4px 14px;border-radius:var(--r-pill);display:inline-block;margin-bottom:14px;
}
.sp-title{
  font-size:clamp(2rem,5vw,4rem);
  font-weight:700;line-height:.88;letter-spacing:-.04em;margin-bottom:10px;
}
.sp-body{font-size:13px;line-height:1.65;max-width:400px;}
.sp-arrow{
  font-size:clamp(2rem,4vw,3.5rem);font-weight:300;flex-shrink:0;
  transition:transform .2s var(--ease);line-height:1;
}
.section-panel:hover .sp-arrow{transform:translateX(10px);}

/* ── PORTAL ROWS ─────────────────────────────────── */
.portal-row{
  display:flex;align-items:center;justify-content:space-between;
  padding:20px 24px;border:1.5px solid var(--ink-08);border-radius:var(--r-md);
  background:var(--bg);cursor:pointer;color:var(--ink);
  transition:border-color .2s var(--ease),transform .3s var(--spring),background .2s var(--ease);
}
.portal-row+.portal-row{margin-top:10px;}
.portal-row:hover{border-color:var(--ink-15);transform:translateX(4px);}
.portal-row:hover .p-arrow{opacity:.7;transform:translateX(4px);}
.p-arrow{opacity:.2;transition:opacity .2s var(--ease),transform .3s var(--spring);flex-shrink:0;}
.p-badge{
  font-size:9px;letter-spacing:.09em;text-transform:uppercase;font-weight:600;
  color:var(--ink-35);background:var(--ink-04);border:1px solid var(--ink-08);
  border-radius:var(--r-pill);padding:3px 10px;flex-shrink:0;
}
.p-badge-red  {color:var(--red);border-color:rgba(200,16,46,.2);background:rgba(200,16,46,.04);}
.p-badge-lime {color:var(--forest);border-color:rgba(159,232,112,.4);background:rgba(159,232,112,.12);}

/* ── GHOST INPUTS ────────────────────────────────── */
.g-input{
  width:100%;background:transparent;border:none;border-bottom:1.5px solid var(--ink-15);
  padding:10px 0;font-size:13px;color:var(--ink);font-family:inherit;font-weight:400;
  outline:none;transition:border-color .2s var(--ease);border-radius:0;
}
.g-input:focus{border-bottom-color:var(--ink-60);}
.g-input::placeholder{color:var(--ink-35);}
.g-input-light{color:var(--w);border-bottom-color:rgba(255,255,255,.2);}
.g-input-light:focus{border-bottom-color:rgba(255,255,255,.6);}
.g-input-light::placeholder{color:var(--w-35);}
.g-input-label{display:block;font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;color:var(--ink-35);margin-bottom:6px;}
.g-input-label-light{color:var(--w-35);}

/* ── CHOICE LABELS ───────────────────────────────── */
.choice-label{
  display:flex;align-items:center;gap:10px;padding:8px 16px;
  border:1.5px solid var(--ink-08);border-radius:var(--r-pill);cursor:pointer;
  font-size:11px;font-weight:500;letter-spacing:.04em;color:var(--ink-60);
  transition:border-color .15s,background .15s,color .15s;
}
.choice-label:hover{border-color:var(--ink-15);background:var(--ink-04);color:var(--ink);}
.choice-label input{accent-color:var(--lime);width:14px;height:14px;flex-shrink:0;}

/* ── ACCORDION ───────────────────────────────────── */
.accordion-body{max-height:0;overflow:hidden;transition:max-height .35s var(--ease);}
.accordion-body.open{max-height:400px;}
.accordion-icon{transition:transform .25s var(--ease);display:inline-block;}
.accordion-icon.open{transform:rotate(45deg);}

/* ── Q&A TABS ────────────────────────────────────── */
.qa-tab{
  flex:1;padding:14px;font-size:11px;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  color:var(--ink-35);background:transparent;border:none;border-bottom:2px solid var(--ink-08);
  cursor:pointer;transition:color .15s,border-color .15s;
}
.qa-tab.tab-active{color:var(--ink);border-bottom-color:var(--forest);}

/* ── SERVICE CARDS ───────────────────────────────── */
.svc-card{
  padding:36px;border:1.5px solid #C8102E;border-radius:var(--r-lg);
  background:#C8102E;transition:background .2s var(--ease),transform .2s var(--spring);
}
.svc-card:hover{background:#a30e24;border-color:#a30e24;transform:translateY(-2px);}

/* ── TABLE ───────────────────────────────────────── */
.g-table{width:100%;border-collapse:collapse;}
.g-table th{
  font-size:9px;letter-spacing:.1em;text-transform:uppercase;font-weight:600;
  color:var(--ink-35);padding:14px 16px;border-bottom:1px solid var(--ink-08);text-align:left;
}
.g-table td{font-size:12px;padding:16px 16px;border-bottom:1px solid var(--ink-08);color:var(--ink-60);}
.g-table tbody tr:hover td{background:var(--ink-04);}
.g-table tbody tr:last-child td{border-bottom:none;}

/* ── BADGES ──────────────────────────────────────── */
.badge{
  display:inline-flex;padding:3px 10px;font-size:9px;letter-spacing:.08em;
  text-transform:uppercase;font-weight:600;border-radius:var(--r-pill);border:1.5px solid currentColor;
}
.badge-green {color:var(--forest);border-color:rgba(22,51,0,.25);background:rgba(22,51,0,.06);}
.badge-amber {color:#92400e;border-color:rgba(217,119,6,.3);background:rgba(217,119,6,.06);}
.badge-blue  {color:var(--blue);border-color:rgba(0,48,135,.3);background:rgba(0,48,135,.06);}
.badge-muted {color:var(--ink-35);border-color:var(--ink-15);background:var(--ink-04);}
.badge-red   {color:var(--red);border-color:rgba(200,16,46,.3);background:rgba(200,16,46,.06);}

/* ── MISC ────────────────────────────────────────── */
.img-ph{
  background:var(--ink-04);display:flex;align-items:center;justify-content:center;
  color:var(--ink-35);font-size:.65rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;
  border-radius:var(--r-md);
}
.divider{height:1px;background:var(--ink-08);}
.quiz-num{
  display:inline-flex;align-items:center;justify-content:center;
  width:22px;height:22px;border-radius:50%;
  border:1.5px solid var(--forest);color:var(--forest);
  font-size:10px;font-weight:600;flex-shrink:0;margin-right:8px;
}

/* ── PAGE HEADER ─────────────────────────────────── */
.page-header{padding:64px 0 48px;}
.page-header .t-label{margin-bottom:14px;}

/* ── FOOTER ──────────────────────────────────────── */
.site-footer{border-top:1px solid var(--ink-08);padding:20px 24px;text-align:center;margin-top:auto;}
.site-footer-dark{background:var(--dark);border-top:1px solid var(--w-08);padding:16px 24px;text-align:center;margin-top:auto;}

/* ── EVENTS NAV BADGE (gradient text, works on any bg) ── */
.nav-events-badge,
.sticky-nav .nav-events-badge,
.sticky-nav a.nav-events-badge,
.sticky-nav .nav-link.nav-events-badge,
.sticky-nav .nav-link-emp.nav-events-badge {
  background:linear-gradient(135deg,#0047cc,#00b4d8)!important;
  -webkit-background-clip:text!important;
  -webkit-text-fill-color:transparent!important;
  background-clip:text!important;
  color:transparent!important;
  font-weight:700!important;
}
.sticky-nav .nav-events-badge:hover,
.sticky-nav a.nav-events-badge:hover { opacity:.7; }