/* =====================================================================
   Humming Bird Education — PREMIUM LAYER (2026)
   Loaded AFTER hb2026.css + hbsite.css.  Purely ADDITIVE:
   - introduces NEW .hb-* component classes used by the redesigned
     after-login + examination pages, and
   - layers extra premium micro-interactions ONLY inside `.hb-scope`
     (and brand-new classes) so the legacy public pages are untouched.
   Uses ONLY the design tokens already declared on :root in hb2026.css.
   ===================================================================== */

/* ---------- keyframes ---------- */
@keyframes hbpFadeUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@keyframes hbpPop{0%{transform:scale(.94);opacity:0}100%{transform:scale(1);opacity:1}}
@keyframes hbpPulse{0%{box-shadow:0 0 0 0 rgba(242,84,27,.45)}70%{box-shadow:0 0 0 14px rgba(242,84,27,0)}100%{box-shadow:0 0 0 0 rgba(242,84,27,0)}}
@keyframes hbpSpin{to{transform:rotate(360deg)}}
@keyframes hbpFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-7px)}}
@keyframes hbpShine{0%{background-position:-160% 0}60%,100%{background-position:160% 0}}
@keyframes hbpRing{0%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}100%{transform:rotate(-8deg)}}
@keyframes hbpConfetti{0%{transform:translateY(-12vh) rotate(0);opacity:0}10%{opacity:1}100%{transform:translateY(112vh) rotate(720deg);opacity:0}}

/* =====================================================================
   1. GLOBAL PREMIUM MICRO-INTERACTIONS  (scoped to .hb-scope only)
   ===================================================================== */
.hb-scope .hb-btn-primary,
.hb-scope .boxed_btn_orange,
.hb-scope .button-contactForm,
.hb-scope .btn-primary{
  transition:transform .2s cubic-bezier(.34,1.56,.64,1),box-shadow .2s,filter .2s!important}
.hb-scope .hb-btn-primary:hover,
.hb-scope .boxed_btn_orange:hover,
.hb-scope .button-contactForm:hover,
.hb-scope .btn-primary:hover{transform:translate(-2px,-2px)!important;box-shadow:6px 6px 0 var(--ink)!important;filter:saturate(1.08)}
.hb-scope .hb-btn-primary:active,
.hb-scope .boxed_btn_orange:active{transform:translate(1px,1px)!important;box-shadow:1px 1px 0 var(--ink)!important}

/* premium panels lift + tables glow on rows */
.hb-scope .hb-panel{transition:transform .3s var(--ease),box-shadow .3s}
.hb-scope .table>tbody>tr{transition:background .18s}
.hb-scope .table>tbody>tr:hover>td{background:#fff3e0!important}
.hb-scope .form-control{transition:border-color .2s,box-shadow .2s!important}
.hb-scope .form-control:focus{box-shadow:0 0 0 4px rgba(242,84,27,.14)!important}

/* tasteful link underline grow */
.hb-scope .hb-ulink{color:var(--orange-d);font-weight:700;text-decoration:none;
  background-image:linear-gradient(var(--orange),var(--orange));background-size:0% 2px;
  background-position:0 100%;background-repeat:no-repeat;transition:background-size .3s,color .2s}
.hb-scope .hb-ulink:hover{background-size:100% 2px;color:var(--orange)}

/* respect reduced motion for the heavier decorative loops */
@media(prefers-reduced-motion:reduce){
  .hb-pagehead__ic,.hb-empty2 .ic,.hb-spin{animation:none!important}
}

/* =====================================================================
   2. PAGE-SUMMARY HEADER (every after-login page gets a "what this page
   does" strip on top — required by the brief)
   ===================================================================== */
.hb-pagehead{display:flex;align-items:flex-start;gap:18px;background:linear-gradient(135deg,#fff6ea,#fffdf8);
  border:2px solid var(--ink);border-radius:var(--radius);padding:clamp(18px,2.4vw,26px);
  box-shadow:var(--sh);margin:6px 0 26px;position:relative;overflow:hidden}
.hb-pagehead::after{content:"";position:absolute;top:-40px;right:-30px;width:170px;height:170px;border-radius:50%;
  background:radial-gradient(circle,rgba(242,84,27,.12),transparent 70%);pointer-events:none}
.hb-pagehead__ic{flex-shrink:0;width:54px;height:54px;border-radius:15px;background:var(--orange);color:#fff;
  display:flex;align-items:center;justify-content:center;box-shadow:3px 3px 0 var(--ink);animation:hbpFloat 4s ease-in-out infinite}
.hb-pagehead__ic svg{width:28px;height:28px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-pagehead__tx{position:relative;z-index:1}
.hb-pagehead__tx h3{font-family:var(--head);font-weight:800;font-size:clamp(1.1rem,2vw,1.4rem);color:var(--ink);margin:0 0 4px;letter-spacing:-.01em}
.hb-pagehead__tx p{color:var(--muted-2);margin:0;line-height:1.55;font-size:.96rem}
.hb-pagehead__tx a{color:var(--orange-d);font-weight:700}

/* =====================================================================
   3. PREMIUM CARDS / GRIDS / STAT TILES
   ===================================================================== */
.hb-grid{display:grid;gap:clamp(14px,1.8vw,20px)}
.hb-grid--2{grid-template-columns:repeat(2,1fr)}
.hb-grid--3{grid-template-columns:repeat(3,1fr)}
.hb-grid--auto{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

.hb-card2{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:22px;box-shadow:var(--sh);
  transition:transform .3s var(--ease),box-shadow .3s;position:relative;display:flex;flex-direction:column;gap:6px}
.hb-card2:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.hb-card2__ic{width:46px;height:46px;border-radius:13px;display:flex;align-items:center;justify-content:center;color:#fff;
  box-shadow:2px 2px 0 var(--ink);transition:transform .3s}
.hb-card2:hover .hb-card2__ic{transform:rotate(-6deg) scale(1.07)}
.hb-card2__ic svg{width:24px;height:24px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-card2 h4{font-family:var(--head);font-weight:800;font-size:1.06rem;color:var(--ink);margin:10px 0 0}
.hb-card2 p{color:var(--muted);font-size:.9rem;line-height:1.5;margin:0}

.hb-stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;margin:6px 0 4px}
.hb-stat-tile{border:2px solid var(--ink);border-radius:18px;padding:20px 18px;background:#fff;box-shadow:var(--sh);
  transition:transform .3s var(--ease),box-shadow .3s}
.hb-stat-tile:hover{transform:translateY(-5px);box-shadow:3px 8px 0 var(--ink)}
.hb-stat-tile b{display:block;font-family:var(--head);font-weight:800;font-size:clamp(1.6rem,3vw,2.2rem);color:var(--ink);line-height:1}
.hb-stat-tile span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);margin-top:7px;font-weight:700;text-transform:uppercase}

/* key/value detail rows (profiles) */
.hb-kv{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:0 30px}
.hb-kv .row{display:flex;gap:14px;padding:13px 2px;border-bottom:1px dashed #e7dcc8;align-items:baseline}
.hb-kv .k{font-family:var(--mono);font-size:.7rem;letter-spacing:.05em;text-transform:uppercase;color:var(--muted-3);font-weight:700;min-width:140px;flex-shrink:0}
.hb-kv .v{color:var(--ink);font-weight:600;word-break:break-word}

/* =====================================================================
   4. STATUS BADGES / CHIPS  (live / soon / locked / done / offline)
   ===================================================================== */
.hb-badge{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-weight:700;font-size:.72rem;
  letter-spacing:.04em;padding:6px 13px;border-radius:999px;border:2px solid var(--ink);white-space:nowrap;line-height:1}
.hb-badge .dot{width:8px;height:8px;border-radius:50%;background:currentColor;box-shadow:0 0 0 0 currentColor}
.hb-badge--live{background:#e4f4ef;color:var(--teal-d)}
.hb-badge--live .dot{animation:hbpPulse 1.6s infinite}
.hb-badge--soon{background:#eef4ff;color:var(--navy)}
.hb-badge--locked{background:#f2ece2;color:var(--muted-2)}
.hb-badge--done{background:#fff3d6;color:#9a6b00}
.hb-badge--offline{background:#fde7e9;color:#b03048}
.hb-badge--new{background:var(--orange);color:#fff}

/* a "locked / coming" pill that looks disabled but tidy */
.hb-locked{display:inline-flex;align-items:center;gap:7px;font-weight:700;font-size:.84rem;color:var(--muted-3);
  background:#f4efe6;border:2px dashed var(--line);border-radius:999px;padding:8px 15px;cursor:not-allowed}
.hb-locked svg{width:14px;height:14px;stroke:currentColor;stroke-width:2;fill:none}

/* a live action link styled like a button */
.hb-linkbtn{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.86rem;color:#fff;background:var(--orange);
  border:2px solid var(--ink);border-radius:999px;padding:9px 17px;box-shadow:3px 3px 0 var(--ink);
  transition:transform .2s,box-shadow .2s;text-decoration:none}
.hb-linkbtn:hover{transform:translate(-2px,-2px);box-shadow:5px 5px 0 var(--ink);color:#fff}
.hb-linkbtn--ghost{background:#fff;color:var(--ink)}
.hb-linkbtn--ghost:hover{color:var(--ink)}
.hb-linkbtn--teal{background:var(--teal)}
.hb-linkbtn--navy{background:var(--navy)}
.hb-linkbtn svg{width:16px;height:16px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   5. OLYMPIADS / RESULTS / CERTIFICATES — premium responsive table
   ===================================================================== */
.hb-rt{width:100%;border-collapse:separate;border-spacing:0;border:2px solid var(--ink);border-radius:16px;overflow:hidden;background:#fff}
.hb-rt thead th{background:var(--ink);color:#fff;font-family:var(--head);font-weight:700;font-size:.78rem;letter-spacing:.04em;
  text-transform:uppercase;padding:14px 16px;text-align:left;white-space:nowrap}
.hb-rt tbody td{padding:15px 16px;border-bottom:1px solid #ece0cc;font-size:.94rem;vertical-align:middle;color:var(--ink)}
.hb-rt tbody tr:last-child td{border-bottom:0}
.hb-rt tbody tr{transition:background .18s}
.hb-rt tbody tr:hover td{background:#fff6ec}
.hb-rt .oly{font-family:var(--head);font-weight:800;color:var(--ink)}
.hb-rt .oly small{display:block;font-family:var(--sans);font-weight:600;color:var(--muted);font-size:.8rem;margin-top:2px}
.hb-rt .resultrow td{background:#fbf4ea;padding:0;border-bottom:1px solid #ece0cc}
.hb-rt .resultbox{padding:18px 20px}
@media(max-width:820px){
  .hb-rt thead{display:none}
  .hb-rt,.hb-rt tbody,.hb-rt tr,.hb-rt td{display:block;width:100%}
  .hb-rt tbody tr{border-bottom:2px solid var(--ink);padding:6px 0}
  .hb-rt tbody tr:last-child{border-bottom:0}
  .hb-rt tbody td{border:0;padding:9px 16px;display:flex;justify-content:space-between;gap:14px;align-items:center}
  .hb-rt tbody td::before{content:attr(data-label);font-family:var(--mono);font-size:.66rem;letter-spacing:.05em;
    text-transform:uppercase;color:var(--muted-3);font-weight:700;flex-shrink:0}
  .hb-rt .resultrow td::before{display:none}
}

/* =====================================================================
   6. BUY MORE — product cards, cart, owned state
   ===================================================================== */
.hb-shop{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:18px}
.hb-prod{position:relative;background:#fff;border:2px solid var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:var(--sh);transition:transform .3s var(--ease),box-shadow .3s;display:flex;flex-direction:column}
.hb-prod:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.hb-prod__media{aspect-ratio:4/3;background:#f6efe3;display:flex;align-items:center;justify-content:center;overflow:hidden;border-bottom:2px solid var(--ink)}
.hb-prod__media img{width:100%;height:100%;object-fit:cover;transition:transform .5s var(--ease)}
.hb-prod:hover .hb-prod__media img{transform:scale(1.06)}
.hb-prod__badge{position:absolute;top:12px;left:12px;z-index:2}
.hb-prod__bd{padding:16px;display:flex;flex-direction:column;gap:8px;flex:1}
.hb-prod__bd h4{font-family:var(--head);font-weight:800;font-size:1.02rem;color:var(--ink);margin:0;line-height:1.25}
.hb-prod__bd p{color:var(--muted);font-size:.84rem;line-height:1.45;margin:0;flex:1}
.hb-prod__foot{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-top:6px}
.hb-prod__price{font-family:var(--head);font-weight:800;color:var(--ink);font-size:1.15rem}
.hb-prod__price s{color:var(--muted-3);font-weight:600;font-size:.85rem;margin-right:6px}
.hb-prod.is-owned{opacity:.66}
.hb-prod.is-owned .hb-prod__media{filter:grayscale(.4)}
.hb-prod.is-owned:hover{transform:none;box-shadow:var(--sh)}

/* selectable olympiad rows (reuse subscriptions backend) */
.hb-pick{display:flex;align-items:center;gap:14px;padding:14px 16px;border:2px solid var(--line);border-radius:14px;
  background:#fff;transition:border-color .2s,box-shadow .2s,transform .2s;cursor:pointer;margin-bottom:10px}
.hb-pick:hover{border-color:var(--orange);box-shadow:3px 3px 0 rgba(242,84,27,.18)}
.hb-pick input{width:20px;height:20px;accent-color:var(--orange);flex-shrink:0;cursor:pointer}
.hb-pick.is-checked{border-color:var(--orange);background:#fff6ec;box-shadow:3px 3px 0 var(--ink)}
.hb-pick__nm{font-weight:700;color:var(--ink)}
.hb-pick__nm small{display:block;color:var(--muted);font-weight:600;font-size:.8rem}
.hb-pick__amt{margin-left:auto;font-family:var(--head);font-weight:800;color:var(--orange-d)}
.hb-pick.is-owned{opacity:.6;cursor:not-allowed;border-style:dashed;background:#f7f2ea}
.hb-pick.is-owned input{display:none}

/* sticky checkout summary */
.hb-checkout{position:sticky;bottom:0;background:rgba(255,253,248,.97);backdrop-filter:blur(8px);
  border-top:2px solid var(--ink);margin-top:18px;padding:16px clamp(14px,3vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;border-radius:0 0 18px 18px}
.hb-checkout__total b{font-family:var(--head);font-weight:800;font-size:1.5rem;color:var(--ink)}
.hb-checkout__total span{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--muted);text-transform:uppercase}

/* =====================================================================
   7. SKILL TRAINING — segmented control, chapter accordion, media
   ===================================================================== */
.hb-seg{display:flex;flex-wrap:wrap;gap:8px}
.hb-seg button{font-family:var(--sans);font-weight:700;font-size:.86rem;color:var(--ink-2);background:#fff;border:2px solid var(--ink);
  border-radius:999px;padding:9px 16px;cursor:pointer;transition:transform .18s,background .18s,color .18s,box-shadow .18s}
.hb-seg button:hover{transform:translateY(-2px);box-shadow:2px 2px 0 var(--ink)}
.hb-seg button.active{background:var(--orange);color:#fff;box-shadow:3px 3px 0 var(--ink)}

.hb-pickrow{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;align-items:end}
.hb-pickrow label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;text-transform:uppercase;
  color:var(--muted-2);font-weight:700;margin:0 0 7px}

.hb-chap{border:2px solid var(--ink);border-radius:16px;overflow:hidden;margin-bottom:14px;background:#fff;box-shadow:var(--sh)}
.hb-chap__hd{width:100%;display:flex;align-items:center;gap:14px;padding:16px 18px;background:#fff;border:0;cursor:pointer;text-align:left}
.hb-chap__hd:hover{background:#fff6ec}
.hb-chap__n{width:34px;height:34px;flex-shrink:0;border-radius:10px;background:var(--ink);color:#fff;display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:.9rem}
.hb-chap__t{font-family:var(--head);font-weight:800;color:var(--ink);font-size:1.02rem;flex:1}
.hb-chap__cx{flex-shrink:0;font-size:1.5rem;color:var(--orange);transition:transform .3s;line-height:1}
.hb-chap.open .hb-chap__cx{transform:rotate(45deg)}
.hb-chap__bd{max-height:0;overflow:hidden;transition:max-height .4s ease}
.hb-chap__in{padding:6px 18px 20px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px}
.hb-actiontile{display:flex;flex-direction:column;gap:10px;border:2px solid var(--line);border-radius:14px;padding:16px;background:var(--cream);transition:border-color .2s,transform .2s,box-shadow .2s}
.hb-actiontile:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:3px 3px 0 rgba(35,26,18,.12)}
.hb-actiontile__hd{display:flex;align-items:center;gap:10px}
.hb-actiontile__ic{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0}
.hb-actiontile__ic svg{width:20px;height:20px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-actiontile h5{font-family:var(--head);font-weight:800;font-size:.94rem;color:var(--ink);margin:0}
.hb-actiontile p{color:var(--muted);font-size:.8rem;line-height:1.4;margin:0;flex:1}

/* responsive 16:9 youtube frame */
.hb-yt{position:relative;width:100%;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:2px solid var(--ink);background:#000;box-shadow:var(--sh)}
.hb-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.hb-yt__poster{position:absolute;inset:0;width:100%;height:100%;border:0;cursor:pointer;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,#241a12,#3a2e22)}
.hb-yt__play{width:64px;height:64px;border-radius:50%;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 8px 24px rgba(0,0,0,.45);transition:transform .25s}
.hb-yt__poster:hover .hb-yt__play{transform:scale(1.12)}

/* infographic image (zoom on click, no download) */
.hb-info-img{display:block;width:100%;border-radius:14px;border:2px solid var(--ink);box-shadow:var(--sh);cursor:zoom-in;
  transition:transform .3s var(--ease)}
.hb-info-img:hover{transform:scale(1.01)}

/* =====================================================================
   8. EXAMINATION SCREEN — premium, responsive, distraction-free
   ===================================================================== */
.hb-exam{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start}
.hb-exam__side{position:sticky;top:90px;background:#fff;border:2px solid var(--ink);border-radius:18px;padding:18px;box-shadow:var(--sh)}
.hb-exam__main{background:#fff;border:2px solid var(--ink);border-radius:18px;padding:clamp(18px,2.4vw,28px);box-shadow:var(--sh);min-height:60vh}
.hb-exam__topbar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:var(--ink);color:#fff;
  border-radius:16px;padding:12px 18px;margin-bottom:18px}
.hb-exam__who{display:flex;align-items:center;gap:11px;font-weight:700}
.hb-exam__who .av{width:40px;height:40px;border-radius:50%;background:var(--orange);display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;color:#fff;flex-shrink:0}
.hb-exam__timer{margin-left:auto;display:flex;align-items:center;gap:9px;font-family:var(--mono);font-weight:700;
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.25);padding:8px 15px;border-radius:999px}
.hb-exam__timer .lbl{font-size:.62rem;letter-spacing:.1em;opacity:.8;text-transform:uppercase}
.hb-exam__timer b{font-size:1.05rem;color:var(--yellow)}
.hb-exam__timer.low b{color:#ff7a7a}
.hb-exam__rec{display:inline-flex;align-items:center;gap:7px;font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;
  text-transform:uppercase;color:#ffd2cf}
.hb-exam__rec .dot{width:9px;height:9px;border-radius:50%;background:#ff5a5a;animation:hbpPulse 1.4s infinite}
.hb-cam{width:148px;height:112px;border-radius:12px;overflow:hidden;border:2px solid var(--ink);background:#000;margin:0 auto}
.hb-cam #my_camera{width:100%!important;height:100%!important}
.hb-cam #my_camera video,.hb-cam #my_camera img{width:100%!important;height:100%!important;object-fit:cover}

.hb-pal__t{font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--muted-2);font-weight:700;margin:0 0 12px}
.hb-pal{display:grid;grid-template-columns:repeat(auto-fill,minmax(40px,1fr));gap:8px}
.hb-qbox{width:40px;height:40px;border-radius:10px;border:2px solid var(--ink);background:#fff;color:var(--ink);
  display:flex;align-items:center;justify-content:center;font-family:var(--head);font-weight:800;font-size:.9rem;cursor:pointer;
  transition:transform .15s,box-shadow .15s}
.hb-qbox:hover{transform:translateY(-2px);box-shadow:2px 2px 0 var(--ink)}
.hb-qbox.is-ans{background:#1fae8f;color:#fff;border-color:#0e6b58}
.hb-qbox.is-nans{background:#ff5a5a;color:#fff;border-color:#c23030}
.hb-qbox.is-rev{background:#3c9bd6;color:#fff;border-color:#1f6fa3}
.hb-qbox.is-cur{outline:3px solid var(--orange);outline-offset:2px}
.hb-legend{display:flex;flex-direction:column;gap:9px;margin-top:16px}
.hb-legend div{display:flex;align-items:center;gap:9px;font-size:.82rem;font-weight:600;color:var(--ink-2)}
.hb-legend .sw{width:18px;height:18px;border-radius:6px;border:2px solid var(--ink);flex-shrink:0}
.hb-legend .green{background:#1fae8f}.hb-legend .red{background:#ff5a5a}.hb-legend .blue{background:#3c9bd6}.hb-legend .white{background:#fff}

.hb-q__no{display:inline-flex;align-items:center;justify-content:center;min-width:34px;height:34px;padding:0 10px;border-radius:10px;
  background:var(--orange);color:#fff;font-family:var(--head);font-weight:800;margin-right:10px}
.hb-q__name{font-family:var(--head);font-weight:700;font-size:clamp(1.05rem,2vw,1.3rem);color:var(--ink);line-height:1.4}
.hb-q__name img{max-width:100%;border-radius:10px;margin-top:10px}
.hb-opts{display:flex;flex-direction:column;gap:12px;margin-top:22px}
.hb-opt{display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:14px;padding:14px 18px;cursor:pointer;
  background:#fff;transition:border-color .18s,background .18s,transform .12s,box-shadow .18s}
.hb-opt:hover{border-color:var(--orange);background:#fff6ec;transform:translateX(3px)}
.hb-opt input{width:20px;height:20px;accent-color:var(--orange);flex-shrink:0;cursor:pointer}
.hb-opt .mk{width:30px;height:30px;border-radius:8px;background:var(--cream);border:2px solid var(--ink);display:flex;align-items:center;justify-content:center;
  font-family:var(--head);font-weight:800;font-size:.9rem;color:var(--ink);flex-shrink:0}
.hb-opt label,.hb-opt .lbl{font-size:1rem;color:var(--ink);cursor:pointer;margin:0;font-weight:600}
.hb-opt label img{max-width:100%;vertical-align:middle}
.hb-opt.is-sel{border-color:var(--orange);background:#fff1e3;box-shadow:3px 3px 0 var(--ink)}
.hb-opt.is-sel .mk{background:var(--orange);color:#fff}
/* CSS-only fallback so the chosen answer is visible even if JS doesn't run */
.hb-opt input:checked + .mk{background:var(--orange);color:#fff}
.hb-opt:has(input:checked){border-color:var(--orange);background:#fff1e3;box-shadow:3px 3px 0 var(--ink)}

.hb-exam__bar{position:sticky;bottom:0;z-index:5;display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center;
  background:rgba(255,253,248,.97);backdrop-filter:blur(8px);border-top:2px solid var(--ink);
  margin:24px -1px -1px;padding:14px;border-radius:0 0 16px 16px}
.hb-xbtn{display:inline-flex;align-items:center;gap:8px;font-family:var(--sans);font-weight:700;font-size:.92rem;cursor:pointer;
  border-radius:999px;padding:12px 22px;border:2px solid var(--ink);transition:transform .18s,box-shadow .18s;user-select:none}
.hb-xbtn svg{width:17px;height:17px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-xbtn--ghost{background:#fff;color:var(--ink)}
.hb-xbtn--mark{background:var(--yellow);color:var(--ink)}
.hb-xbtn--next{background:var(--ink);color:#fff}
.hb-xbtn--finish{background:var(--orange);color:#fff;box-shadow:3px 3px 0 var(--ink)}
.hb-xbtn:hover{transform:translate(-2px,-2px);box-shadow:4px 4px 0 var(--ink)}
@media(max-width:880px){
  .hb-exam{grid-template-columns:1fr}
  .hb-exam__side{position:static;order:2}
}

/* =====================================================================
   9. CONGRATULATIONS / COMPLETION
   ===================================================================== */
.hb-done{max-width:680px;margin:clamp(24px,5vw,56px) auto;background:#fff;border:2px solid var(--ink);border-radius:26px;
  box-shadow:var(--sh-lg);padding:clamp(28px,5vw,52px);text-align:center;position:relative;overflow:hidden}
.hb-done__seal{width:96px;height:96px;border-radius:50%;background:var(--teal);color:#fff;display:flex;align-items:center;justify-content:center;
  margin:0 auto 22px;box-shadow:4px 4px 0 var(--ink);animation:hbpPop .5s var(--ease) both}
.hb-done__seal svg{width:50px;height:50px;stroke:#fff;stroke-width:2.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-done h2{font-family:var(--head);font-weight:800;font-size:clamp(1.7rem,4vw,2.5rem);color:var(--ink);margin:0;letter-spacing:-.02em}
.hb-done p{color:var(--muted-2);font-size:1.05rem;line-height:1.6;margin:14px auto 0;max-width:48ch}
.hb-done__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.hb-done__note{font-family:var(--mono);font-size:.72rem;color:var(--muted-3);margin-top:18px}
.hb-confetti{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:9998;overflow:hidden}
.hb-confetti i{position:absolute;top:-12vh;width:10px;height:14px;border-radius:2px;animation:hbpConfetti linear forwards}

/* =====================================================================
   10. CONFIRM MODAL  (Save / Finish / Update password "Are you sure?")
   ===================================================================== */
.hb-modal{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,15,10,.5);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.hb-modal.open{display:flex;animation:hbpFadeUp .25s ease}
.hb-modal__card{background:#fff;border:2px solid var(--ink);border-radius:22px;box-shadow:var(--sh-lg);max-width:440px;width:100%;
  padding:clamp(24px,4vw,34px);text-align:center;animation:hbpPop .3s var(--ease) both}
.hb-modal__ic{width:62px;height:62px;border-radius:50%;background:#fff3e0;color:var(--orange);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;margin:0 auto 16px}
.hb-modal__ic svg{width:32px;height:32px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-modal__card h3{font-family:var(--head);font-weight:800;font-size:1.3rem;color:var(--ink);margin:0 0 8px}
.hb-modal__card p{color:var(--muted);margin:0 0 22px;line-height:1.5}
.hb-modal__btns{display:flex;gap:12px;justify-content:center;flex-wrap:wrap}

/* =====================================================================
   11. CAPTCHA ROW
   ===================================================================== */
.hb-captcha{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
.hb-captcha img{height:50px;width:150px;border:2px solid var(--ink);border-radius:10px;background:#fff;object-fit:cover}
.hb-captcha__refresh{width:44px;height:44px;border:2px solid var(--ink);border-radius:10px;background:#fff;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:transform .3s;flex-shrink:0}
.hb-captcha__refresh:hover{transform:rotate(180deg);background:var(--cream)}
.hb-captcha__refresh svg{width:20px;height:20px;stroke:var(--ink);stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}

/* =====================================================================
   12. EMPTY STATE + SECTION HEADINGS used on new pages
   ===================================================================== */
.hb-sech{display:flex;align-items:center;gap:12px;margin:26px 0 14px}
.hb-sech__ic{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0;box-shadow:2px 2px 0 var(--ink)}
.hb-sech__ic svg{width:22px;height:22px;stroke:#fff;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-sech h3{font-family:var(--head);font-weight:800;font-size:clamp(1.15rem,2.2vw,1.5rem);color:var(--ink);margin:0;letter-spacing:-.01em}
.hb-sech p{color:var(--muted);font-size:.86rem;margin:2px 0 0}
.hb-empty2{text-align:center;padding:clamp(26px,5vw,44px) 20px;border:2px dashed var(--line);border-radius:18px;background:#fffdf8;color:var(--muted)}
.hb-empty2 .ic{width:56px;height:56px;border-radius:50%;background:#fff3e0;color:var(--orange);border:2px solid var(--ink);
  display:flex;align-items:center;justify-content:center;margin:0 auto 14px;animation:hbpFloat 4s ease-in-out infinite}
.hb-empty2 .ic svg{width:28px;height:28px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.hb-empty2 h4{font-family:var(--head);font-weight:800;color:var(--ink);margin:0 0 5px;font-size:1.1rem}
.hb-empty2 p{margin:0 auto;max-width:46ch;line-height:1.55}

.hb-spin{display:inline-block;width:18px;height:18px;border:3px solid rgba(35,26,18,.2);border-top-color:var(--orange);border-radius:50%;animation:hbpSpin .7s linear infinite}

/* premium image tile (bordered link with zoom-on-hover) */
.hb-imgtile{display:block;border:2px solid var(--ink);border-radius:16px;overflow:hidden;box-shadow:var(--sh);
  transition:transform .3s var(--ease),box-shadow .3s}
.hb-imgtile:hover{transform:translate(-3px,-3px);box-shadow:7px 7px 0 var(--ink)}
.hb-imgtile img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)}
.hb-imgtile:hover img{transform:scale(1.04)}

/* =====================================================================
   TOP CONTACT BAR (phone + email)
   ===================================================================== */
.hb-topbar{background:var(--ink);border-bottom:1px solid rgba(255,255,255,.08)}
.hb-topbar__in{max-width:var(--maxw);margin:0 auto;padding:6px clamp(16px,4vw,40px);display:flex;gap:24px;justify-content:flex-end;flex-wrap:wrap;align-items:center}
.hb-topbar a{display:inline-flex;align-items:center;gap:7px;color:#e9dcc8;font-size:.78rem;font-weight:600;font-family:var(--sans);text-decoration:none;transition:color .2s}
.hb-topbar a:hover{color:var(--yellow)}
.hb-topbar svg{width:14px;height:14px;stroke:var(--orange);fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}
@media(max-width:600px){.hb-topbar__in{justify-content:center;gap:14px}.hb-topbar a{font-size:.72rem}}

/* =====================================================================
   SLIDE-2: trim excessive vertical whitespace between sections.
   (no !important, so any page that sets its own inline padding still wins)
   ===================================================================== */
.hb-section{padding:clamp(28px,3.6vw,48px) clamp(16px,4vw,40px)}
.hbref .pad{padding:clamp(30px,4.2vw,52px) 0}

/* =====================================================================
   AFTER-LOGIN / inner pages (PPT slides 3-11) — kill the empty band under the title bar.
   #mu-page-breadcrumb is float:left (legacy style.css) which hb2026 restyled as a block but
   never cleared; combined with .hb-section's top padding it left a tall empty gap between the
   title bar and the first content card. Drop the float and tighten the top gap so the content
   sits neatly under the title bar (consistent across every after-login page).
   ===================================================================== */
#mu-page-breadcrumb{float:none!important;display:block!important}
/* descendant (not >) so it also reaches pages where .hb-section is wrapped in section#mu-about-us
   (subscriptions, MockTests, OlyResult); :not([style*=padding-top]) + no !important so any view
   that deliberately zeroes its own top padding inline (schoolstudentregistration) still wins. */
.hb-scope .hb-section:not([style*="padding-top"]){padding-top:clamp(16px,2vw,26px)}

/* =====================================================================
   SCHOOL REGISTRATION (PPT slides 1-2) — the olympiad picker and the SUBMIT button sit in
   bootstrap .col-lg-12 (float:left) AFTER the field grid. Unclear, the olympiad card rides up
   over the last coordinator fields (slide 2) and the submit drifts off-centre (slide 1). Make
   those columns clean, cleared, full-width blocks so the olympiad card sits BELOW the fields and
   the submit centres beneath it with proper spacing.
   ===================================================================== */
.hb-scope .hbreg-form .col-lg-12{float:none!important;width:100%!important;max-width:100%!important;clear:both!important;padding-left:0!important;padding-right:0!important;display:block!important}
.hb-scope .hbreg-form .row:not(.hbreg-olygrid){clear:both!important}
/* submit: rock-solid centred in the form box */
.hb-scope .hbreg-actions{margin-top:26px!important;clear:both!important;display:flex!important;justify-content:center!important;align-items:center!important;width:100%!important;text-align:center!important}
.hb-scope .hbreg-actions .hb-btn-primary{margin-left:auto!important;margin-right:auto!important;float:none!important;justify-content:center!important;text-align:center!important}
/* FOOTER COLLISION (real cause): the legacy bootstrap .col-md-12 inside #mu-about-us is float:left
   and was never cleared, so the wrapping .hb-section COLLAPSED and the form panel overflowed down
   onto the footer (an earlier padding-bottom on a collapsed section did nothing). Clear that float
   so the section contains the panel, then give a clean gap below it. */
.hb-scope #mu-about-us .col-md-12{float:none!important;width:100%!important;max-width:100%!important;display:block!important}
.hb-scope #mu-about-us .hb-section{padding-bottom:clamp(40px,5vw,64px)!important}

/* =====================================================================
   REGISTER CHOOSER (creative two-option: Individual / School Student)
   ===================================================================== */
.hb-regchooser{position:fixed;inset:0;z-index:9999;display:none;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,15,10,.55);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.hb-regchooser.open{display:flex;animation:hbpFadeUp .25s ease}
.hb-regchooser__card{background:var(--cream);border:2px solid var(--ink);border-radius:26px;box-shadow:var(--sh-lg);
  max-width:760px;width:100%;padding:clamp(24px,4vw,40px);position:relative;animation:hbpPop .3s var(--ease) both}
.hb-regchooser__x{position:absolute;top:14px;right:16px;width:40px;height:40px;border-radius:50%;border:2px solid var(--ink);
  background:#fff;cursor:pointer;font-size:1.4rem;line-height:1;display:flex;align-items:center;justify-content:center}
.hb-regchooser__x:hover{background:var(--orange);color:#fff}
.hb-regchooser h3{font-family:var(--head);font-weight:800;font-size:clamp(1.4rem,3vw,2rem);color:var(--ink);text-align:center;margin:0;letter-spacing:-.02em}
.hb-regchooser p{text-align:center;color:var(--muted);margin:8px auto 0;max-width:48ch}
.hb-regchooser__opts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:24px}
.hb-regopt{display:flex;flex-direction:column;align-items:center;text-align:center;gap:10px;padding:26px 20px;border:2px solid var(--ink);
  border-radius:20px;background:#fff;box-shadow:var(--sh);text-decoration:none;transition:transform .25s var(--ease),box-shadow .25s,background .25s}
.hb-regopt:hover{transform:translate(-4px,-4px);box-shadow:8px 8px 0 var(--ink)}
.hb-regopt__ic{width:64px;height:64px;border-radius:18px;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:3px 3px 0 var(--ink);transition:transform .25s}
.hb-regopt:hover .hb-regopt__ic{transform:rotate(-6deg) scale(1.07)}
.hb-regopt__ic svg{width:32px;height:32px;stroke:#fff;fill:none;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.hb-regopt h4{font-family:var(--head);font-weight:800;font-size:1.15rem;color:var(--ink);margin:6px 0 0}
.hb-regopt p{color:var(--muted);font-size:.86rem;margin:0;line-height:1.45}
.hb-regopt .go{margin-top:6px;font-weight:800;color:var(--orange-d);font-family:var(--mono);font-size:.74rem;letter-spacing:.06em}
@media(max-width:560px){.hb-regchooser__opts{grid-template-columns:1fr}}

/* =====================================================================
   HOME GALLERY — 3 opposing animated sliders
   ===================================================================== */
.hb-mslider{display:flex;flex-direction:column;gap:18px;margin-top:30px}
.hb-mslider__row{position:relative;overflow:hidden;
  -webkit-mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);
          mask:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.hb-mslider__label{position:absolute;top:10px;left:14px;z-index:3;font-family:var(--mono);font-size:.64rem;letter-spacing:.1em;
  font-weight:700;text-transform:uppercase;color:#fff;background:var(--ink);border:2px solid var(--ink);padding:5px 12px;border-radius:999px;text-decoration:none}
.hb-mslider__label:hover{background:var(--orange);border-color:var(--orange);color:#fff}
.hb-mslider__track{display:inline-flex;gap:16px;width:max-content;padding:10px 0;animation:hbMarq 48s linear infinite}
.hb-mslider__row:nth-child(1) .hb-mslider__track{animation-duration:52s}
.hb-mslider__row:nth-child(2) .hb-mslider__track{animation-duration:38s}
.hb-mslider__row:nth-child(3) .hb-mslider__track{animation-duration:60s}
.hb-mslider__row--rev .hb-mslider__track{animation-direction:reverse}
.hb-mslider__row:hover .hb-mslider__track{animation-play-state:paused}
.hb-mslider__track a{flex:0 0 auto;display:block;border:2px solid var(--ink);border-radius:14px;overflow:hidden;
  box-shadow:3px 3px 0 rgba(35,26,18,.14);transition:transform .3s var(--ease),box-shadow .3s}
.hb-mslider__track a:hover{transform:translateY(-5px);box-shadow:5px 8px 0 rgba(35,26,18,.2)}
.hb-mslider__track img{height:170px;width:auto;max-width:none;display:block;object-fit:cover}
@media(max-width:600px){.hb-mslider__track img{height:120px}}
@media(prefers-reduced-motion:reduce){.hb-mslider__track{animation-duration:120s!important}}

/* =====================================================================
   OLYMPIAD PAGES — dignified brand-logo framing + tidy impact cards
   (applies to every .hbref olympiad page at once)
   ===================================================================== */
.hbref .phero .card{background:#fff!important;border:2px solid var(--ink)!important;box-shadow:5px 6px 0 rgba(35,26,18,.12)!important;
  padding:clamp(20px,3vw,34px)!important;display:flex;align-items:center;justify-content:center}
.hbref .phero .card img{max-height:300px;width:auto;max-width:100%;object-fit:contain;margin:0 auto;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.10));transition:transform .4s var(--ease)}
.hbref .phero .card:hover img{transform:scale(1.03)}
/* impact / award cards: comfortable spacing, never cramped, responsive */
.hbref .card.pad6{padding:clamp(20px,2.6vw,30px)}
/* Key-info & award k–v tables: the generic ".row" class is ALSO Bootstrap's grid row
   (negative margins + flex-wrap) and the legacy theme can leak float/order/text-align onto it,
   which shoves labels (.k) and values (.v) out of alignment. Pin the intended two-column
   layout so .k always sits left of .v and the dashed rows line up cleanly. */
.hbref .kv{display:flex;flex-direction:column;gap:0;width:100%}
.hbref .kv .row{display:flex!important;flex-flow:row nowrap!important;justify-content:flex-start!important;align-items:baseline;gap:16px!important;margin:0!important;text-align:left!important}
.hbref .kv .row>.k{order:0;flex:0 0 auto;float:none!important;text-align:left!important;margin:0!important}
.hbref .kv .row>.v{order:1;flex:1 1 auto;min-width:0;float:none!important;text-align:left!important;margin:0!important}
/* Bootstrap's `.row` clearfix (.row:before/:after{display:table;content:" "}) would otherwise
   inject two stray flex items into each key/value row and skew the columns — neutralize them. */
.hbref .kv .row::before,.hbref .kv .row::after{content:none!important;display:none!important}
/* FIX (broken impact boxes): the base `.tick`/`.prose` list items use display:flex,
   which turns each inline child — the plain text AND the <strong> phrase — into a
   SEPARATE flex column, splitting one sentence into two spread-apart blocks.
   Switch to normal block text flow with an absolutely-positioned bullet, so each
   bullet's text (incl. bold runs) stays together as a single readable line. */
.hbref ul.tick li,.hbref .prose ul li{display:block;position:relative;padding-left:22px;gap:0;line-height:1.55}
.hbref ul.tick li::before,.hbref .prose ul li::before{position:absolute;left:2px;top:0}
.hbref ul.tick li strong,.hbref .prose ul li strong{font-weight:700}
@media(max-width:760px){
  .hbref .phero .wrap{grid-template-columns:1fr!important}
  .hbref .kv .row{flex-direction:column;gap:2px}
  .hbref .kv .k{min-width:0!important}
}
/* very small phones — award k/v never overflows */
@media(max-width:480px){
  .hbref .award .kv .k{min-width:0!important;font-size:.88rem}
}

/* =====================================================================
   FINAL POLISH PASS — premium affordances + low-end-device performance
   ===================================================================== */
/* hero slider nav: clear hover affordance (brand yellow) */
.hb-slider__nav{transition:background .2s,color .2s,transform .2s}
.hb-slider__nav:hover{background:var(--yellow);border-color:var(--ink);color:var(--ink);transform:translateY(-50%) scale(1.06)}
/* impact stats: tidy 2-up on tiny phones instead of awkward wrapping */
@media(max-width:480px){.hb-impact{grid-template-columns:1fr 1fr;gap:10px}}
/* the expensive header blur is dropped when the OS asks for reduced motion / on perf-constrained setups */
@media(prefers-reduced-motion:reduce){.hb-header{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}}
/* confetti: GPU hint + honour reduced motion */
.hb-confetti i{will-change:transform}
@media(prefers-reduced-motion:reduce){.hb-confetti i{animation:none!important;display:none}}
/* reusable notice card (replaces inline-style injection on the profile) */
.hb-notice{border:2px solid var(--line);border-radius:12px;padding:13px 15px;background:var(--cream)}
/* premium video-list rows (Skill Training video pages) */
.hb-vrow{display:flex;align-items:center;gap:14px;border:2px solid var(--line);border-radius:14px;padding:14px 16px;background:#fff;
  text-decoration:none;transition:border-color .2s,transform .2s,box-shadow .2s;margin-bottom:12px}
.hb-vrow:hover{border-color:var(--orange);transform:translateY(-3px);box-shadow:3px 3px 0 rgba(35,26,18,.12)}
.hb-vrow__ic{width:44px;height:44px;flex-shrink:0;border-radius:12px;background:var(--orange);color:#fff;display:flex;align-items:center;justify-content:center;box-shadow:2px 2px 0 var(--ink)}
.hb-vrow__ic svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.hb-vrow__tx b{display:block;font-family:var(--head);font-weight:800;color:var(--ink);font-size:1rem;line-height:1.25}
.hb-vrow__tx span{font-size:.82rem;color:var(--muted)}
.hb-vrow__go{margin-left:auto;color:var(--orange-d);font-weight:800;flex-shrink:0}

/* =====================================================================
   BACK-TO-TOP BUTTON — crisp SVG arrow, branded, correctly positioned
   (overrides the base hb2026 rule which used a thin text glyph)
   ===================================================================== */
.hb-scrolltop{position:fixed;right:20px;bottom:24px;z-index:60;width:50px;height:50px;border-radius:50%;
  background:var(--orange);color:#fff;border:2px solid var(--ink);padding:0;line-height:0;overflow:hidden;box-sizing:border-box;
  display:none;align-items:center;justify-content:center;cursor:pointer;text-decoration:none;
  box-shadow:3px 3px 0 var(--ink);transition:transform .2s var(--ease),box-shadow .2s,background .2s}
.hb-scrolltop.show{display:flex!important}
.hb-scrolltop:hover{background:var(--ink);color:#fff;transform:translateY(-3px);box-shadow:3px 6px 0 var(--orange)}
.hb-scrolltop:active{transform:translateY(0);box-shadow:2px 2px 0 var(--ink)}
.hb-scrolltop svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;display:block}
/* sit clear of the sticky mobile CTA bar on small screens */
@media(max-width:880px){.hb-scrolltop{bottom:86px;right:14px;width:46px;height:46px}}

/* popup close / nav controls now use crisp SVGs — keep them perfectly centred,
   no inline-glyph baseline gap, nothing spilling outside the round button */
.hb-regchooser__x,.hb-lightbox__close,.hb-lightbox__nav{display:flex;align-items:center;justify-content:center;line-height:0;padding:0;overflow:hidden}
.hb-regchooser__x svg,.hb-lightbox__close svg,.hb-lightbox__nav svg{display:block;flex:none;margin:0}

/* utility */
.hb-mt0{margin-top:0!important}.hb-mt24{margin-top:24px}.hb-mb0{margin-bottom:0!important}
.hb-muted{color:var(--muted)}.hb-strong{font-weight:800;color:var(--ink)}
.hb-reveal{opacity:0}.hb-reveal.in{animation:hbpFadeUp .7s var(--ease) forwards}

/* active nav link highlight (set by Master.cshtml) */
.hb-nav__link.is-active{background:#ffe7c7;color:var(--ink)}
.hb-drawer a.is-active{background:#fff3e0}

/* =====================================================================
   PREMIUM MOTION PASS — animated nav underline, CTA arrow-slide,
   smooth branded focus rings. transform / width / opacity only.
   ===================================================================== */
/* public top-nav: a brand underline grows from the centre on hover/active
   (keeps the existing pill-bg highlight; these links carry no other ::after) */
.hb-nav__link{position:relative}
.hb-nav__link::after{content:"";position:absolute;left:50%;bottom:5px;width:0;height:2px;border-radius:2px;
  background:var(--orange);transform:translateX(-50%);transition:width .26s var(--ease);pointer-events:none}
.hb-nav__link:hover::after,.hb-nav__link.is-active::after{width:calc(100% - 26px)}
/* CTA arrow-slide: hb-premium.js wraps a trailing → / ↗ in <span class="hb-ar">;
   the glyph eases right on hover with zero layout shift */
.hb-ar{display:inline-block;transition:transform .25s var(--ease);will-change:transform}
a:hover>.hb-ar,button:hover>.hb-ar,.btn:hover .hb-ar,.hb-cta:hover .hb-ar,.hb-chip:hover .hb-ar,.dl:hover .hb-ar{transform:translateX(5px)}
/* smooth branded focus-visible ring for keyboard users (additive to the outline) */
/* form fields get a soft branded ring (they carry no hard shadow to flatten) */
input:focus-visible,select:focus-visible,textarea:focus-visible{box-shadow:0 0 0 4px rgba(242,84,27,.18);outline-offset:2px;transition:box-shadow .15s,outline-offset .15s}
/* buttons/links keep their neo-brutalist hard shadow — just nudge the focus outline out a touch */
a:focus-visible,button:focus-visible,.btn:focus-visible,.hb-cta:focus-visible{outline-offset:3px;transition:outline-offset .12s}
@media(prefers-reduced-motion:reduce){.hb-nav__link::after,.hb-ar{transition:none!important}}

/* =====================================================================
   OLYMPIAD LOGO SLIDER — premium infinite auto-scroll (replaces the
   deprecated <marquee> on the registration pages). hb-premium.js clones
   the track once so translateX(-50%) loops seamlessly; pauses on hover.
   ===================================================================== */
.hb-olyslider{display:block;position:relative;overflow:hidden;padding:14px 0;text-decoration:none;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hb-olyslider__track{display:flex!important;flex-wrap:nowrap!important;align-items:center;gap:clamp(26px,4vw,52px);
  width:max-content;animation:hbOlyScroll 20s linear infinite;will-change:transform}
/* STOP on mouseover (and keyboard focus). !important so it wins even under the reduced-motion
   override below — that override re-declares the animation shorthand, which resets play-state to
   running. Pausing here also fixes "a different logo pops up": while the strip kept moving, each
   logo that slid under a stationary cursor briefly matched img:hover and lifted. */
.hb-olyslider:hover .hb-olyslider__track,
.hb-olyslider:focus-within .hb-olyslider__track{animation-play-state:paused!important}
.hb-olyslider__track img{height:clamp(62px,8vw,100px)!important;width:auto!important;max-width:none!important;
  flex:0 0 auto!important;margin:0!important;display:block;object-fit:contain;filter:drop-shadow(0 6px 14px rgba(0,0,0,.10));
  transition:transform .3s var(--ease),filter .3s}
.hb-olyslider__track img:hover{transform:translateY(-7px) scale(1.06);filter:drop-shadow(0 12px 22px rgba(242,84,27,.22))}
@keyframes hbOlyScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* the olympiad logo strip is a continuous, non-jarring brand marquee — keep it sliding
   even when the OS requests reduced motion (matches the .hb-ticker/.hb-press policy) */
@media(prefers-reduced-motion:reduce){.hb-olyslider__track{animation:hbOlyScroll 20s linear infinite!important}}
/* the standalone Referral-code row sits above the 2-col field grid — make it a clean full-width field */
.hb-scope .studentform .row:has(.divHodeOnSchoolSelection){display:block;margin:0 0 15px}
.hb-scope .studentform .row:has(.divHodeOnSchoolSelection) > [class*="col-"]{width:100%!important;max-width:none!important;padding:0!important;margin:0!important;float:none!important}

/* registration pages — robust enforcement (defends against the legacy float layout) */
/* 1. cap the submit CTA so it never stretches edge-to-edge */
.hb-scope .hbsr-actions,.hb-scope .hbreg-actions{display:flex!important;justify-content:center;flex-wrap:wrap}
.hb-scope .hbsr-actions .button,.hb-scope .hbsr-actions .boxed-btn,.hb-scope .hbsr-actions .hb-btn-primary,
.hb-scope .hbreg-actions .hb-btn-primary{width:auto!important;max-width:340px!important;min-width:200px!important;flex:0 0 auto!important;padding:13px 30px!important;font-size:1rem!important;line-height:1.2!important}
/* 2. force the school olympiad picker into a clean responsive grid (kills the staggered float) */
.hb-scope .hbreg-olygrid{display:grid!important;grid-template-columns:repeat(auto-fill,minmax(330px,1fr))!important;gap:12px!important;align-items:stretch!important}
.hb-scope .hbreg-olygrid > [class*="col-"]{float:none!important;width:auto!important;max-width:none!important;margin:0!important;padding:0!important}
/* SCHOOL REGISTRATION grids: both .hbreg-form's field rows AND .hbreg-olygrid are bootstrap .row
   styled as CSS grid, so Bootstrap's clearfix ::before/::after become stray grid items (empty
   leading/trailing cells); the olympiad loop ALSO emits a hidden input x2 + an empty validation
   <span> per item, each eating a cell. That shoved "Name of the School" into column 2 and
   scattered the olympiad checkboxes into a zigzag. Strip every non-card child from the grids. */
.hb-scope .hbreg-form .row:not(.hbreg-olygrid)::before,.hb-scope .hbreg-form .row:not(.hbreg-olygrid)::after,
.hb-scope .hbreg-olygrid::before,.hb-scope .hbreg-olygrid::after{content:none!important;display:none!important}
.hb-scope .hbreg-olygrid > input,.hb-scope .hbreg-olygrid > span{display:none!important}
/* selected olympiad cards read clearly at a glance (orange border + warm tint) */
.hb-scope .hbreg-olyitem:has(input:checked){border-color:var(--orange,#f2541b)!important;background:linear-gradient(180deg,#fff6ec,#fffdf8)!important}
/* uniform single-line olympiad cards: 330px columns + .875rem labels keep each name+date on ONE
   line (no "2026-11-/18" mid-date break) and a shared min-height makes every row the same height
   — a clean, scannable checklist. The submit is a tidy, centred action with consistent spacing. */
.hb-scope .hbreg-olyitem{min-height:58px!important;padding:12px 16px!important;gap:11px!important;align-items:center!important}
.hb-scope .hbreg-olyitem label{font-size:.875rem!important;line-height:1.3!important;font-weight:600!important}
.hb-scope .hbreg-actions{margin-top:26px!important;justify-content:center!important}
.hb-scope .hbreg-actions .hb-btn-primary{min-width:240px!important;max-width:300px!important}
/* 3. keep the page-head visible (no invisible reveal gap / empty box above the form) */
.hb-scope .hb-pagehead{opacity:1!important;transform:none!important}
/* 3b. THE REAL "header hides behind the content" / empty-box fix: style.css sets
   .mu-title{display:inline;float:left} and on studentregistration the page-head intro lives
   INSIDE .mu-title — so the floated title is overlapped by the .contact-section panel that
   follows it, and only the uncovered cream sliver shows (the "empty box at the top"). Each
   page's <style> already clears .mu-about-us-left but NOT .mu-title. Force it to a normal
   full-width block so the intro stacks cleanly above the panel. (Indu/School are unaffected —
   their page-head sits outside .mu-title — but clearing the empty .mu-title is harmless.) */
.hb-scope .mu-title{float:none!important;width:100%!important;display:block!important;margin:0!important}
/* 4. FORM-FLOW GUARD (do not re-add a display override here): the panel's .studentform
   visibility is owned by page JS — StudentForm() (studentregistration*.cshtml) keeps it
   HIDDEN and only .show()s it once SchoolID>0 (i.e. after the user enters a school code and
   clicks NEXT). An "!important" display rule on .col-sm-12 / .studentform re-opens the form on
   first load — that was the "all fields show at once" regression. Leave display to the JS. */
/* 5. FIELD-GRID ALIGNMENT: #divShowHideOnStudentType_ is itself a bootstrap .row, so its
   clearfix ::before/::after pseudo-elements become GRID ITEMS — they take the first and last
   cells and shove every field one column to the right (empty cell before "Name of the Student",
   trailing empty cell after the last field). Remove them so the fields fill the 2-col grid from
   the first cell. (Applies to studentregistration AND studentregistrationIndu — both grids are .row.) */
.hb-scope #divShowHideOnStudentType_::before,
.hb-scope #divShowHideOnStudentType_::after{content:none!important;display:none!important}
/* 6. school-code entry row: once a valid school is set, the NEXT button is hidden, leaving an
   awkward empty half-row beside the code. Make the field (and the NEXT button when it IS shown)
   full-width so the row reads cleanly as a single header field above the 2-col grid.
   (Only studentregistration renders .divSchoolCode; Indu hides its GET form, School has none.) */
.hb-scope .contact-section .divSchoolCode,
.hb-scope .contact-section .divSchoolCode2{width:100%!important;max-width:100%!important;flex:0 0 100%!important;float:none!important}
.hb-scope .contact-section .divSchoolCode .form-control{max-width:100%!important;width:100%!important}
/* studentregistration olympiad/books picker — LESS SCROLLING + clearer grouping.
   The markup is a flat list (header, then Exam + 2 book checkbox rows, repeated per olympiad)
   with no per-group wrapper, and the ClassWise show/hide + checkbox ids + amount calc are
   critical, so this is CSS-only: each olympiad HEADER (the row carrying .lblamount) spans the
   full width as a group title; its Exam + 2 book checkboxes sit on ONE row in THREE columns
   beneath it (Exam sized to its short label, the two long book names share the rest), with the
   checkbox font trimmed so the long names stay single-line — about half the original height.
   Gated by @supports so browsers without :has() keep the safe single-column list. The
   #divShowHideOnStudentType_ ID ancestor lifts specificity above the page's inline <style>. */
@supports selector(:has(*)){
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid{display:grid!important;grid-template-columns:auto 1fr 1fr!important;column-gap:12px!important;row-gap:5px!important;align-items:stretch!important;padding:10px!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > div[class*="ClassWise"]:has(.lblamount){grid-column:1 / -1!important;margin:13px 0 3px!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > .col-lg-12[class*="ClassWise"]{display:none!important}
  /* OPTION CARDS — match the School Registration look: each Exam/book/date checkbox becomes a
     bordered card (the red olympiad name + price stays a full-width header above its cards),
     with the same hover + orange "selected" state as the school page's .hbreg-olyitem. */
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > .col-sm-2[class*="ClassWise"]{padding:11px 14px!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > .col-sm-2[class*="ClassWise"]:not(:has(.lblamount)){border:2px solid var(--line,#d9cdba)!important;border-radius:12px!important;background:var(--cream,#fffdf8)!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > .col-sm-2[class*="ClassWise"]:not(:has(.lblamount)):hover{border-color:rgba(242,84,27,.5)!important;background:#fff!important;box-shadow:3px 4px 0 rgba(242,84,27,.14)!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid > .col-sm-2[class*="ClassWise"]:has(input:checked){border-color:var(--orange,#f2541b)!important;background:linear-gradient(180deg,#fff6ec,#fffdf8)!important}
  /* trim only the checkbox labels (NOT the header's .lblamount price) so the long book names fit one line */
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid label:not(.lblamount){font-size:.8rem!important;line-height:1.3!important}
  /* Individual page (studentregistrationIndu): each olympiad has only TWO exam-date checkboxes
     (no books). The school's "auto 1fr 1fr" made date1's column narrow and date2's wide, so the
     per-cell underlines were uneven. Give this grid TWO EQUAL columns => equal underlines, no
     empty third column. Its date labels are short, so they get a slightly roomier font. */
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid--dates{grid-template-columns:1fr 1fr!important}
  .hb-scope #divShowHideOnStudentType_ .hbsr-olygrid--dates label:not(.lblamount){font-size:.9rem!important}
  @media(max-width:900px){.hb-scope #divShowHideOnStudentType_ .hbsr-olygrid{grid-template-columns:1fr 1fr!important}}
  @media(max-width:600px){.hb-scope #divShowHideOnStudentType_ .hbsr-olygrid{grid-template-columns:1fr!important}}
}
/* the promo heading band above the slider (.our_courses) — tighten + brand it */
.our_courses{padding:clamp(16px,2.6vw,28px) 0!important}
.our_courses .section_title{margin-bottom:clamp(12px,1.8vw,18px)!important}
.our_courses .section_title h3{font-family:var(--head,'Sora');font-weight:800;color:var(--ink);font-size:clamp(1.3rem,2.4vw,1.8rem);letter-spacing:-.01em;margin:0}
.our_courses .section_title p{color:var(--muted-2,#3a2e22);font-weight:600;letter-spacing:.08em;font-size:.8rem;margin-top:6px;text-transform:uppercase}

/* =====================================================================
   OLYMPIAD PAGES — the closing italic statement as a premium centred callout
   (the last italic .lead in each page's awards section; hero .lead is excluded
   because it is not a direct child of a non-.phero section)
   ===================================================================== */
.hbref section:not(.phero) > .lead[style*="italic"]{
  max-width:920px;margin:clamp(26px,4vw,40px) auto 0;padding:clamp(22px,3.2vw,32px) clamp(26px,4vw,42px);
  position:relative;text-align:center;font-style:italic;color:var(--ink);
  font-size:clamp(1.05rem,1.5vw,1.25rem);line-height:1.6;
  background:linear-gradient(180deg,#fff6ea,#fffdf8);border:2px solid var(--ink);
  border-radius:20px;box-shadow:5px 6px 0 rgba(35,26,18,.10)}
.hbref section:not(.phero) > .lead[style*="italic"]::before{
  content:"\201C";position:absolute;top:2px;left:20px;font-family:Georgia,'Times New Roman',serif;
  font-size:3.4rem;line-height:1;color:rgba(242,84,27,.28);pointer-events:none}
.hbref section:not(.phero) > .lead[style*="italic"] strong{color:var(--orange-d)}
@media(max-width:560px){.hbref section:not(.phero) > .lead[style*="italic"]{padding:20px 18px}}

/* =====================================================================
   FOOTER — embedded Google map of the head office (Pitampura, Delhi)
   ===================================================================== */
.hb-footer__map{width:100%;max-width:218px;height:87px;border:0;border-radius:10px;margin-top:14px;display:block;box-shadow:0 4px 12px rgba(0,0,0,.25)}
.hb-footer__maplink{display:inline-block;margin-top:10px;color:#ffd23f;font-weight:700;font-size:.85rem;text-decoration:none;transition:opacity .2s}
.hb-footer__maplink:hover{opacity:.82;text-decoration:underline}

/* =====================================================================
   PREMIUM GLOBAL MOTION — scroll-reveal (rise up) + page-load assemble
   (content slides in from the left & right and settles into place) +
   content-tile hover. hb-premium.js adds body.hb-anim2-on, so NO-JS users
   always see content; a 1.6s safety timer + try/catch guarantee nothing is
   ever left hidden; fully reduced-motion safe.
   ===================================================================== */
body.hb-anim2-on{overflow-x:clip}
body.hb-anim2-on .hb-a{opacity:0;will-change:transform,opacity}
body.hb-anim2-on .hb-a.hb-a--up{transform:translateY(26px)}
body.hb-anim2-on .hb-a.hb-a--left{transform:translateX(-40px)}
body.hb-anim2-on .hb-a.hb-a--right{transform:translateX(40px)}
body.hb-anim2-on .hb-a.hb-a-in{opacity:1;transform:none;
  transition:opacity .66s cubic-bezier(.22,1,.36,1),transform .66s cubic-bezier(.22,1,.36,1)}
@media(prefers-reduced-motion:reduce){body.hb-anim2-on .hb-a{opacity:1!important;transform:none!important;transition:none!important}}

/* premium hover lift for content tiles that didn't already define one */
.hb-callout,.hb-notice,.hb-regcard,.hb-book{transition:transform .22s var(--ease),box-shadow .22s var(--ease)}
.hb-callout:hover,.hb-notice:hover,.hb-regcard:hover,.hb-book:hover{transform:translateY(-4px)}
.hb-notice:hover,.hb-regcard:hover{box-shadow:4px 6px 0 rgba(35,26,18,.12)}

/* =====================================================================
   LINK TOOLTIPS — a small description pops up above any link on hover;
   hides on mouse-out, click or scroll. No tooltips on touch (hover:none).
   ===================================================================== */
.hb-tip{position:fixed;z-index:9999;left:0;top:0;pointer-events:none;
  background:var(--ink,#231a12);color:#fff;font-family:var(--head,'Sora');font-weight:700;
  font-size:.74rem;letter-spacing:.01em;line-height:1.2;padding:5px 10px;border-radius:8px;
  box-shadow:0 6px 18px rgba(0,0,0,.30);white-space:nowrap;max-width:260px;overflow:hidden;text-overflow:ellipsis;
  opacity:0;transition:opacity .13s ease;transform:translate(-50%,-100%);margin-top:-9px}
.hb-tip.show{opacity:1}
.hb-tip::after{content:"";position:absolute;left:50%;top:100%;transform:translateX(-50%);
  border:5px solid transparent;border-top-color:var(--ink,#231a12)}
.hb-tip.hb-tip--below{transform:translate(-50%,0);margin-top:9px}
.hb-tip.hb-tip--below::after{top:auto;bottom:100%;border-top-color:transparent;border-bottom-color:var(--ink,#231a12)}
@media(hover:none){.hb-tip{display:none!important}}

/* =====================================================================
   13. RESPONSIVE
   ===================================================================== */
@media(max-width:760px){
  .hb-grid--2,.hb-grid--3{grid-template-columns:1fr}
  .hb-kv{grid-template-columns:1fr}
  .hb-pagehead{flex-direction:column;gap:12px}
  .hb-pickrow{grid-template-columns:1fr}
}
/* very small phones — tighten spacing so nothing overflows */
@media(max-width:480px){
  .hb-pagehead{padding:16px}
  .hb-pagehead__ic{width:46px;height:46px}
  .hb-stat-row{grid-template-columns:1fr 1fr;gap:10px}
  .hb-checkout{flex-direction:column;align-items:stretch;gap:12px}
  .hb-checkout .hb-btn-primary{width:100%;justify-content:center}
  .hb-exam__bar{gap:8px}
  .hb-xbtn{flex:1 1 auto;justify-content:center;padding:11px 14px}
  .hb-done{padding:24px 18px}
}