/* =========================================================
   Cokonet - animated floating-cluster library (site-wide)
   Brand tokens: --navy --orange --ease --sh2 (from main.css)
   Everything keys off .fcl.in (added by the reveal observer).
   ========================================================= */
.fcl{--card:#fff;--cardln:#eceff5;--ctext:#0b1f4d;--csub:#5a6a8c;
  position:relative;isolation:isolate;padding:26px 6px}
html.dark .fcl{--card:#0F2143;--cardln:#243657;--ctext:#EAF0FF;--csub:#9DB4E8}
.fcl:not(.fx-row){display:flex;flex-direction:column;gap:16px;align-items:flex-start;width:100%;max-width:400px;margin-inline:auto}
.fcl:not(.fx-row)>*:nth-child(3){align-self:flex-end}
.fcl:not(.fx-row) .fc-stat,.fcl:not(.fx-row) .fc-prog,.fcl:not(.fx-row) .fc-list,.fcl:not(.fx-row) .fc-cand,.fcl:not(.fx-row) .fc-toast{align-self:stretch}

/* ---- accent shapes ---- */
.fx-blob,.fx-sq,.fx-bit,.fx-ring{position:absolute;z-index:-1;pointer-events:none}
.fx-blob{inset:4% 0 6% 8%;background:linear-gradient(150deg,var(--navy-solid),var(--navy-deep));opacity:.08;border-radius:28% 14% 30% 12%/18% 30% 14% 30%;transform:rotate(-3deg)}
html.dark .fx-blob{opacity:.45;background:linear-gradient(150deg,#1D3E8F,#0A1730)}
.fx-sq{width:30px;height:30px;border-radius:8px;background:var(--orange);opacity:.9;top:8%;right:4%}
.fx-bit{width:18px;height:18px;border-radius:5px;background:var(--navy-solid);opacity:.5;top:15%;right:1%}
.fx-ring{width:210px;height:210px;border-radius:50%;border:26px solid var(--mist-soft);opacity:.5;bottom:-30px;right:-24px}

/* ---- base card ---- */
.fc-card{background:var(--card);border:1px solid var(--cardln);border-radius:16px;box-shadow:var(--sh2);color:var(--ctext)}

/* ---- badge pill (dot + label + optional status tag) ---- */
.fc-badge{display:inline-flex;align-items:center;gap:10px;font-weight:700;font-size:.9rem;padding:12px 16px;color:var(--ctext)}
.fc-dot{width:9px;height:9px;border-radius:50%;background:#22C58B;box-shadow:0 0 0 3px rgba(34,197,139,.22);flex:0 0 auto}
.fc-tag{margin-left:auto;font-size:.72rem;font-weight:800;letter-spacing:.04em;padding:4px 9px;border-radius:7px;background:rgba(34,197,139,.14);color:#159a68}
html.dark .fc-tag{background:rgba(34,197,139,.2);color:#4fd6a0}
.fc-tag.o{background:rgba(255,95,0,.14);color:var(--orange)}

/* ---- secure / confirmation (ring check + label) ---- */
.fc-secure{display:flex;align-items:center;gap:14px;padding:16px 20px}
.fc-secure b{font-size:1rem;color:var(--ctext)}
.fc-ring{width:42px;height:42px;border-radius:50%;border:3px solid #22C58B;display:grid;place-items:center;flex:0 0 auto}
.fc-ring svg{width:20px;height:20px;stroke:#22C58B;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fc-ring svg path{stroke-dasharray:24;stroke-dashoffset:24}
.fcl.in .fc-ring svg path{animation:fcDraw .5s var(--d,.9s) var(--ease) forwards}

/* ---- progress card ---- */
.fc-prog{padding:18px 20px;min-width:250px}
.fc-prog-top{display:flex;align-items:center;gap:9px;font-weight:800;color:var(--ctext);font-size:.98rem;margin-bottom:12px}
.fc-prog-top .ic{color:var(--orange);font-size:1.05rem}
.fc-track{height:9px;border-radius:99px;background:var(--mist-soft);overflow:hidden}
.fc-fill{display:block;height:100%;width:0;border-radius:99px;background:linear-gradient(90deg,var(--navy-solid),var(--orange))}
.fcl.in .fc-fill{animation:fcFill 1.2s var(--d,.4s) var(--ease) forwards}
.fc-prog-sub{display:block;margin-top:10px;font-size:.8rem;color:var(--csub);font-weight:600}

/* ---- stat card + sparkline ---- */
.fc-stat{padding:18px 20px;min-width:260px}
.fc-stat-head{display:flex;align-items:center;justify-content:space-between;font-size:.82rem;font-weight:700;color:var(--csub)}
.fc-delta{color:#159a68;font-weight:800}
html.dark .fc-delta{color:#4fd6a0}
.fc-num{display:block;font-size:2rem;font-weight:800;color:var(--ctext);line-height:1.1;margin:2px 0 8px;letter-spacing:-.02em}
.fc-spark{width:100%;height:52px;display:block;overflow:visible}
.fc-spark .line{fill:none;stroke:var(--navy-solid);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
html.dark .fc-spark .line{stroke:#7CA0FF}
.fc-spark .area{fill:rgba(29,62,143,.09);stroke:none}
html.dark .fc-spark .area{fill:rgba(124,160,255,.12)}
.fc-spark .line{stroke-dasharray:260;stroke-dashoffset:260}
.fcl.in .fc-spark .line{animation:fcDraw 1.5s var(--d,.5s) var(--ease) forwards}
.fc-spark .dot{fill:var(--orange);opacity:0}
.fcl.in .fc-spark .dot{animation:fcFade .4s calc(var(--d,.5s) + 1.2s) forwards}
.fc-spark-x{display:flex;justify-content:space-between;font-size:.68rem;color:var(--csub);margin-top:4px;font-weight:600}

/* ---- checklist card ---- */
.fc-list{padding:16px 18px;min-width:236px}
.fc-list-head{font-weight:800;color:var(--ctext);font-size:1rem;margin-bottom:12px}
.fc-li{display:flex;align-items:center;gap:11px;padding:7px 0;font-weight:600;color:var(--ctext);font-size:.94rem}
.fc-box{width:24px;height:24px;border-radius:7px;border:2px solid var(--mist);display:grid;place-items:center;flex:0 0 auto;transition:none}
.fc-box svg{width:14px;height:14px;stroke:#fff;stroke-width:3;fill:none;stroke-linecap:round;stroke-linejoin:round}
.fc-box svg path{stroke-dasharray:18;stroke-dashoffset:18}
.fcl.in .fc-li:not(.off) .fc-box{animation:fcBox .35s var(--d,.4s) var(--ease) forwards}
.fcl.in .fc-li:not(.off) .fc-box svg path{animation:fcDraw .4s calc(var(--d,.4s) + .12s) forwards}

/* ---- notification toast ---- */
.fc-toast{display:flex;align-items:center;gap:12px;padding:12px 16px;min-width:264px}
.fc-toast>div{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.fc-toast b{font-size:.94rem;color:var(--ctext)}
.fc-toast span{font-size:.8rem;color:var(--csub)}
.fc-ava{width:44px;height:44px;border-radius:50%;overflow:hidden;flex:0 0 auto;box-shadow:var(--sh2);border:2px solid var(--card)}
.fc-ava img{width:100%;height:100%;object-fit:cover;display:block}
.fc-ok{width:24px;height:24px;border-radius:50%;background:#22C58B;color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:900;flex:0 0 auto}

/* ---- stepper ---- */
.fc-step{display:flex;align-items:center;gap:0;padding:16px 18px}
.fc-node{position:relative;font-size:.8rem;font-weight:700;color:var(--csub);padding:0 16px 0 22px;white-space:nowrap}
.fc-node::before{content:"";position:absolute;left:0;top:50%;transform:translateY(-50%);width:13px;height:13px;border-radius:50%;background:var(--mist);border:2px solid var(--card)}
.fc-node.on{color:var(--ctext)}
.fcl.in .fc-node.on::before{animation:fcPopDot .4s var(--d,.5s) var(--ease) both;background:var(--orange)}

/* ---- floating icon tile ---- */
.fc-tile{width:64px;height:64px;border-radius:18px;background:linear-gradient(150deg,var(--navy-solid),var(--navy-deep));display:grid;place-items:center;box-shadow:var(--sh2)}
.fc-tile svg{width:30px;height:30px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fc-tile.o{background:linear-gradient(150deg,var(--orange),#ff8c44)}
.fc-tile.sm{width:44px;height:44px;border-radius:13px;font-size:1.1rem;font-weight:800;color:#fff}

/* ---- candidate card tags ---- */
.fc-cand{padding:16px 18px;min-width:270px}
.fc-cand-top{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.fc-cand-top>div{display:flex;flex-direction:column;line-height:1.3;margin-right:auto}
.fc-cand-top b{font-size:.96rem;color:var(--ctext)}
.fc-cand-top span{font-size:.8rem;color:var(--csub)}
.fc-tags{display:flex;flex-wrap:wrap;gap:8px}
.fc-tags span{font-size:.76rem;font-weight:700;padding:6px 11px;border-radius:99px;background:var(--mist-soft);color:var(--navy)}

/* ---- cursor pointer ---- */
.fc-cursor{width:34px;height:34px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.25))}
.fc-cursor svg{width:100%;height:100%}

/* ---- entrance helpers (opacity 0 until .in) ---- */
.fcl .fa{opacity:0}
.fcl.in .fa-drop{animation:fcDrop .6s var(--d,0s) var(--ease) both}
.fcl.in .fa-pop{animation:fcPop .55s var(--d,0s) var(--ease) both}
.fcl.in .fa-l{animation:fcInL .55s var(--d,0s) var(--ease) both}
.fcl.in .fa-r{animation:fcInR .55s var(--d,0s) var(--ease) both}

/* ---- continuous floats (accents + tiles + avatars) ---- */
.fcl.in .fx-blob{animation:fcFloatA 7s 1s ease-in-out infinite alternate}
.fcl.in .fx-sq{animation:fcBob 5.5s ease-in-out infinite alternate}
.fcl.in .fx-bit{animation:fcBob 6.5s .5s ease-in-out infinite alternate-reverse}
.fcl.in .float{animation:fcBob 4.6s 4.6s ease-in-out infinite alternate}

@keyframes fcDrop{from{opacity:0;transform:translateY(-16px)}to{opacity:1;transform:none}}
@keyframes fcPop{0%{opacity:0;transform:translateY(12px) scale(.92)}70%{transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes fcInL{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes fcInR{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
@keyframes fcFill{from{width:0}to{width:var(--w,60%)}}
@keyframes fcDraw{to{stroke-dashoffset:0}}
@keyframes fcFade{to{opacity:1}}
@keyframes fcBox{to{background:var(--orange);border-color:var(--orange)}}
@keyframes fcPopDot{0%{transform:translateY(-50%) scale(0)}70%{transform:translateY(-50%) scale(1.18)}100%{transform:translateY(-50%) scale(1)}}
@keyframes fcFloatA{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(-2deg) translateY(-12px)}}
@keyframes fcBob{from{transform:translateY(0)}to{transform:translateY(-7px)}}

/* two-column hero helper (single-col heroes opt in) */
.a-hero .inner.fx-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:52px;align-items:center;text-align:left}
.a-hero .inner.fx-grid>.fcl{display:flex}
.fcl .fc-card{max-width:100%;min-width:0}
@media (max-width:480px){
  .fc-step{flex-wrap:wrap;row-gap:8px}
  .fc-node{padding:0 12px 0 20px;font-size:.76rem}
  .fc-toast,.fc-stat,.fc-prog,.fc-list,.fc-cand{min-width:0}
}

/* theme toggle relocated to footer (navy background) */
footer .theme-toggle{border-color:rgba(255,255,255,.28);color:#fff;width:34px;height:34px;margin:0 0 0 12px;vertical-align:middle}
footer .theme-toggle:hover{border-color:var(--orange);color:var(--orange)}
.foot-bottom{align-items:center}
@media (max-width:1080px){
  .a-hero .inner.fx-grid{grid-template-columns:1fr;gap:30px}
  .fcl{max-width:520px}
}

/* horizontal cluster (refer hero) */
.fcl.fx-row{display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center;padding-top:34px}

@media (prefers-reduced-motion:reduce){
  .fcl .fa,.fcl .fc-fill,.fcl .fc-box,.fc-spark .line,.fc-ring svg path,.fc-box svg path{opacity:1!important;animation:none!important}
  .fc-fill{width:var(--w,60%)}
  .fc-spark .line,.fc-ring svg path,.fc-box svg path{stroke-dashoffset:0}
  .fcl.in .fc-li:not(.off) .fc-box{background:var(--orange);border-color:var(--orange)}
  .fcl.in .fx-blob,.fcl.in .fx-sq,.fcl.in .fx-bit,.fcl.in .float{animation:none!important}
  .fc-spark .dot{opacity:1}
}

/* ---- animated enterprise chat mock ---- */
.a-hero .inner.ent-grid{grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr);gap:56px}
.chatmock{position:relative;padding:34px 8px 8px;min-height:400px;isolation:isolate}
.chatmock .cm-shape{position:absolute;inset:6% -4% 4% 10%;z-index:-1;background:linear-gradient(150deg,var(--navy-solid),var(--navy-deep));opacity:.09;border-radius:26% 14% 30% 12%/18% 28% 14% 30%;transform:rotate(-3deg)}
html.dark .chatmock .cm-shape{opacity:.5;background:linear-gradient(150deg,#1D3E8F,#0A1730)}
.cm-bit{position:absolute;width:26px;height:26px;border-radius:7px;background:var(--orange);opacity:.85;z-index:-1}
.cm-bit1{top:16%;right:2%}
.cm-bit2{top:23%;right:-2%;width:18px;height:18px;background:var(--navy-solid);opacity:.55}
.cm-pill{display:flex;align-items:center;gap:10px;max-width:340px;background:linear-gradient(120deg,var(--navy-deep),#1D3E8F);color:#EAF0FF;font-weight:700;font-size:.92rem;padding:13px 16px;border-radius:14px;box-shadow:var(--sh2)}
.cm-pill i{width:9px;height:9px;border-radius:50%;background:#35C98D;box-shadow:0 0 0 3px rgba(53,201,141,.25)}
.cm-pill b{margin-left:auto;font-weight:600;opacity:.7}
.cm-row{display:flex;align-items:flex-end;gap:12px;margin-top:26px}
.cm-right{justify-content:flex-end}
.cm-ava{flex:0 0 58px;width:58px;height:58px;border-radius:50%;overflow:hidden;box-shadow:var(--sh2);border:3px solid var(--paper)}
.cm-ava img{width:100%;height:100%;object-fit:cover;display:block}
.cm-bubble{position:relative;max-width:78%;padding:16px 18px;border-radius:16px;box-shadow:var(--sh2);font-size:.98rem;line-height:1.55}
.cm-light{background:var(--mist-soft);border-bottom-left-radius:5px}
.cm-navy{background:linear-gradient(135deg,var(--navy-deep),#173a86);border-bottom-right-radius:5px}
.a-hero .cm-light p{margin:0;opacity:0;color:var(--navy);font-size:.98rem;max-width:none}
.a-hero .cm-navy p{margin:0;opacity:0;color:#EAF0FF;font-size:.98rem;max-width:none}
.cm-dots{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:5px;opacity:0}
.cm-dots i{width:7px;height:7px;border-radius:50%;background:currentColor;opacity:.55}
.cm-chips{display:flex;gap:10px;margin:22px 0 0 70px;flex-wrap:wrap}
.cm-chips span{background:var(--paper);border:1px solid var(--mist);color:var(--navy);font-weight:700;font-size:.82rem;padding:8px 14px;border-radius:999px;box-shadow:var(--sh2);opacity:0}
@keyframes cmDrop{from{opacity:0;transform:translateY(-14px)}to{opacity:1;transform:none}}
@keyframes cmPop{0%{opacity:0;transform:translateY(12px) scale(.92)}70%{transform:translateY(-2px) scale(1.015)}100%{opacity:1;transform:none}}
@keyframes cmFade{to{opacity:1}}
@keyframes cmHide{to{opacity:0;visibility:hidden}}
@keyframes cmBlink{0%,80%,100%{transform:translateY(0);opacity:.35}40%{transform:translateY(-3px);opacity:1}}
@keyframes cmFloat{from{transform:rotate(-3deg) translateY(0)}to{transform:rotate(-2deg) translateY(-12px)}}
@keyframes cmBob{from{transform:translateY(0)}to{transform:translateY(-6px)}}
.chatmock .cm-pill,.chatmock .cm-row{opacity:0}
.chatmock.in .cm-pill{animation:cmDrop .55s .15s var(--ease) both}
.chatmock.in .cm-left{animation:cmPop .5s .55s var(--ease) both}
.chatmock.in .cm-left .cm-dots{animation:cmFade .2s .7s both,cmHide .25s 1.75s both}
.chatmock.in .cm-left .cm-dots i{animation:cmBlink 1s .7s infinite}
.chatmock.in .cm-left p{animation:cmFade .45s 1.85s both}
.chatmock.in .cm-right{animation:cmPop .5s 2.15s var(--ease) both}
.chatmock.in .cm-right .cm-dots{animation:cmFade .2s 2.3s both,cmHide .25s 3.55s both}
.chatmock.in .cm-right .cm-dots i{animation:cmBlink 1s 2.3s infinite}
.chatmock.in .cm-right p{animation:cmFade .45s 3.65s both}
.chatmock.in .cm-chips span{animation:cmPop .45s var(--ease) both}
.chatmock.in .cm-chips span:nth-child(1){animation-delay:4.05s}
.chatmock.in .cm-chips span:nth-child(2){animation-delay:4.2s}
.chatmock.in .cm-chips span:nth-child(3){animation-delay:4.35s}
.chatmock.in .cm-shape{animation:cmFloat 7s 1s ease-in-out infinite alternate}
.chatmock.in .cm-ava{animation:cmBob 4.5s 4.6s ease-in-out infinite alternate}
.chatmock.in .cm-bit1{animation:cmBob 5.5s ease-in-out infinite alternate}
.chatmock.in .cm-bit2{animation:cmBob 6.5s .6s ease-in-out infinite alternate-reverse}
@media (max-width:1080px){
.a-hero .inner.ent-grid{grid-template-columns:1fr}
.chatmock{min-height:0;max-width:520px;margin-top:6px}
}
@media (prefers-reduced-motion:reduce){
.chatmock .cm-pill,.chatmock .cm-row,.chatmock .cm-bubble p,.chatmock .cm-chips span{opacity:1;animation:none!important}
.chatmock .cm-dots{display:none}
.chatmock.in .cm-shape,.chatmock.in .cm-ava,.chatmock.in .cm-bit1,.chatmock.in .cm-bit2{animation:none!important}
}


/* =========================================================
   footer: global styles (were stranded in per-page css) +
   phone-width grid fix (the 1100px 3-col rule used !important
   and defeated the 960/560 breakpoints)
   ========================================================= */
.f-badges{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.f-badges span{border:1px solid rgba(197,212,226,.28);color:var(--tis);font-size:.7rem;font-weight:700;padding:7px 14px;border-radius:var(--pill);white-space:nowrap}
.f-news{display:flex;justify-content:space-between;align-items:center;gap:22px;flex-wrap:wrap;border:1px solid rgba(197,212,226,.18);border-radius:var(--r-lg);padding:22px 28px;margin:36px 0 8px}
.f-news b{color:#fff;font-size:1rem;font-weight:800;display:block}
.f-news span{font-size:.78rem;color:var(--tis)}
.f-news form{display:flex;gap:10px;flex:1;max-width:420px;min-width:260px}
.f-news input{flex:1;min-width:0;background:rgba(255,255,255,.08);border:1px solid rgba(197,212,226,.3);border-radius:var(--pill);padding:12px 20px;color:#fff;font-family:var(--sans);font-size:.9rem}
.f-news input::placeholder{color:rgba(197,212,226,.6)}
.f-news input:focus{outline:none;border-color:var(--orange)}
@media (max-width:960px){.foot-grid{grid-template-columns:1fr 1fr!important}}
@media (max-width:560px){
  .foot-grid{grid-template-columns:1fr!important;row-gap:28px!important}
  .f-news{padding:18px;margin-top:28px}
  .foot-bottom{flex-direction:column;align-items:flex-start;gap:10px}
}
/* newsletter form: never let the input collapse; stack cleanly on small screens */
.f-news input{min-width:180px}
@media (max-width:640px){
  .f-news{flex-direction:column;align-items:stretch}
  .f-news form{max-width:none;width:100%;flex-direction:column;gap:10px}
  .f-news input{width:100%;flex:none;min-width:0}
  .f-news form .btn{width:100%!important;max-width:none!important;flex:none!important}
}

/* brand row: logo + 16 yrs badge */
.brand-row{display:flex;align-items:center;gap:10px}
.logo-svg{height:31.5px}
.yrs-badge{display:inline-flex;align-items:baseline;gap:3px;white-space:nowrap;
  font-family:var(--sans,inherit);font-weight:600;font-size:.72rem;letter-spacing:.02em;
  color:var(--navy,#002169);background:rgba(255,95,0,.10);border:1px solid rgba(255,95,0,.30);
  border-radius:999px;padding:3px 9px;line-height:1;position:relative;top:1px}
.yrs-badge b{font-weight:800;font-size:.82rem;color:var(--orange,#FF5F00)}
html.dark .yrs-badge{color:#EAF0FF;background:rgba(255,95,0,.14);border-color:rgba(255,95,0,.4)}
@media(max-width:520px){.yrs-badge{display:none}}
/* layout-audit fixes: cert cards must not exceed viewport; newsletter phone row
   buttons keep natural width beside a flexible input (global mobile .btn width:100%
   was collapsing the input and pushing Get OTP out of the card). */
@media(max-width:520px){.cert{padding:20px;max-width:100%;box-sizing:border-box}.cert-grid{grid-template-columns:1fr}.cert-visual{max-width:100%}}
.f-news-row{display:flex;gap:8px}
.f-news-row input{flex:1;min-width:0}
.f-news-row .btn,.f-news-row button{flex:0 0 auto;width:auto;max-width:none}
/* mobile top strip: one line only, room for the dismiss X */
@media(max-width:640px){
.top-strip .inner{padding-right:44px;flex-wrap:nowrap}
.top-strip .inner>span:last-child a{display:none}
.top-strip .inner>span:last-child{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
}
/* newsletter OTP form (footer) */
.f-news-otp{display:flex;flex-direction:column;gap:8px}
.f-news-otp .f-news-row{display:flex;gap:8px}
.f-news-otp .f-news-row input{flex:1;min-width:0}
.f-news-otp input{border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:#fff;border-radius:10px;padding:11px 13px;font-size:.9rem}
.f-news-otp input::placeholder{color:#9fb0d0}
.f-news-otp input:focus{outline:none;border-color:var(--orange)}
.f-news-otp .ck-otp-timer{align-self:center;font-size:.72rem;color:#c9d6ef;white-space:nowrap}
/* mega menu: 6-hub grid (overrides the 5-col default) + tall-content safety */
/* canonical header stickiness: lived only in course.css + page css, so generated
   pages (hubs, syllabus, salary guides, enroll) had a static header and the mega
   menu positioned against the viewport instead of the header = invisible. */
.site-header{background:#fff;box-shadow:0 1px 0 var(--mist-soft);position:sticky;top:0;z-index:120}
html.dark .site-header{background:#0B1830;box-shadow:0 1px 0 #243657}
.mega-grid-6{display:grid;grid-template-columns:repeat(6,1fr)}
.nav-item.has-mega.mega-open .mega{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega{max-height:min(78vh,720px);display:flex;flex-direction:column}
.mega .mega-grid{overflow-y:auto}
@media(max-width:1180px){.mega-grid-6{grid-template-columns:repeat(3,1fr)}}
@media(max-width:820px){.mega-grid-6{grid-template-columns:repeat(2,1fr)}}

/* ===== home blend layer: category colours on a navy/orange base ===== */
.bx-cat{margin-bottom:8px}
.ccard .bd h4{color:var(--navy)}
/* filter pills: coloured dot per category, navy active pill */
.cat-pills .cat{display:inline-flex;align-items:center;gap:7px}
.cat-pills .cat::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--mist)}
.cat-pills .cat:nth-of-type(2)::before{background:var(--orange)}
.cat-pills .cat:nth-of-type(3)::before{background:var(--v-blue)}
.cat-pills .cat:nth-of-type(4)::before{background:var(--v-purple)}
.cat-pills .cat:nth-of-type(5)::before{background:var(--v-green)}
.cat-pills .cat:nth-of-type(6)::before{background:var(--v-teal)}
.cat-pills .cat:nth-of-type(7)::before{background:var(--v-pink)}
/* structured-path steps: a coloured walk, soft tint circles */
.steps .step:nth-child(1) .n{background:var(--v-blue-soft);color:var(--v-blue)}
.steps .step:nth-child(2) .n{background:var(--v-green-soft);color:var(--v-green)}
.steps .step:nth-child(3) .n{background:var(--v-purple-soft);color:var(--v-purple)}
.steps .step:nth-child(4) .n{background:var(--v-amber-soft);color:#b57000}
.steps .step:nth-child(5) .n{background:var(--v-pink-soft);color:var(--v-pink)}
.steps .step .n{font-weight:800}
/* ===== reference-style hero testimonial carousel ===== */
.hero-testi{position:relative;width:100%;max-width:520px}
.ht-track{position:relative;overflow:hidden;border-radius:20px}
.ht-slide{display:none}
.ht-slide.on{display:block;animation:htFade .4s var(--ease)}
@keyframes htFade{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.ht-photo{position:relative;aspect-ratio:4/5;border-radius:20px;overflow:hidden;background:linear-gradient(150deg,#26417f,#5b7bb5);display:flex;align-items:center;justify-content:center}
.ht-ph{color:rgba(255,255,255,.7);font-size:.82rem;font-weight:600}
.ht-stat{position:absolute;top:14px;left:14px;box-shadow:var(--sh1)}
.ht-quote{position:absolute;right:-8px;bottom:34px;width:66%;max-width:280px;border-radius:16px;padding:20px 18px 14px;box-shadow:var(--sh3)}
.ht-mark{font-family:var(--serif);font-size:2.4rem;line-height:0;position:absolute;top:22px;left:12px;opacity:.55}
.ht-quote p{font-size:.82rem;line-height:1.45;font-weight:600;margin:4px 0 12px}
.ht-who b{display:block;font-size:.86rem}
.ht-who span{font-size:.74rem;opacity:.8}
.ht-nav{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:16px}
.ht-name{color:#fff;font-size:1.15rem;font-weight:800;display:flex;align-items:center;gap:6px}
.ht-name .arr{color:var(--orange)}
.ht-arrows{display:flex;gap:10px}
.ht-arrows button{width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:transparent;color:#fff;font-size:1.1rem;cursor:pointer;transition:background .15s,border-color .15s}
.ht-arrows button:hover{background:rgba(255,255,255,.12);border-color:#fff}
.ht-dots{display:flex;gap:7px;margin-top:14px}
.ht-dot{width:8px;height:8px;border-radius:50%;border:none;background:rgba(255,255,255,.3);cursor:pointer;padding:0;transition:background .2s,width .2s}
.ht-dot.on{background:var(--orange);width:22px;border-radius:4px}
@media(max-width:820px){.hero-testi{max-width:none;margin-top:8px}.ht-quote{width:70%;bottom:24px}}
/* mobile header: Courses pill instead of Free counselling */
.hdr-courses{display:none}
@media(max-width:820px){
  .hdr-counsel{display:none}
  .hdr-courses{display:inline-flex}
}
/* trust bar as the hero opener: full width, even rhythm, hairline divider */
.hero .inner>.hero-trust-top{grid-column:1/-1;width:100%;display:flex;flex-wrap:wrap;align-items:center;
  gap:12px 40px;margin:0 0 26px;padding:0 0 18px;border-top:none;border-bottom:1px solid rgba(255,255,255,.16)}
.hero .inner>.hero-trust-top span{display:inline-flex;align-items:baseline;gap:8px;font-size:.92rem;color:#C7D2E8}
.hero .inner>.hero-trust-top b{color:#fff;font-size:1.2rem;font-weight:800}
.hero .inner>.hero-trust-top .stars{color:var(--orange);letter-spacing:1px}
@media(max-width:820px){
  /* reference composition: centred drama, texture, stats LAST as big coloured numbers */
  .hero{background-image:radial-gradient(rgba(255,255,255,.06) 1.1px,transparent 1.5px),linear-gradient(160deg,var(--navy-deep),var(--navy) 55%,#0A3A9E);background-size:22px 22px,auto}
  .hero .inner>.reveal>span.eyebrow{display:block;text-align:center;margin:4px auto 14px}
  .hero h1{text-align:center;font-size:clamp(2.05rem,9vw,2.6rem);line-height:1.12;letter-spacing:-.01em}
  .hero h1 .serif{position:relative;display:inline-block}
  .hero h1 .serif::after{content:"";position:absolute;left:2%;right:2%;bottom:-9px;height:10px;
    background:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20120%2012'%3E%3Cpath%20d='M2%208%20C%2030%202,%2060%2010,%20118%204'%20fill='none'%20stroke='%23FF5F00'%20stroke-width='3'%20stroke-linecap='round'/%3E%3Cpath%20d='M8%2011%20C%2040%206,%2070%2012,%20112%208'%20fill='none'%20stroke='%23FF5F00'%20stroke-width='2'%20stroke-linecap='round'%20opacity='.65'/%3E%3C/svg%3E") no-repeat center/100% 100%}
  .hero .inner>.reveal>p{text-align:center;font-size:.98rem;line-height:1.6;max-width:36ch;margin:16px auto 0}
  .hero .inner>.reveal>div:not(.goalbar):not(.trust){justify-content:center;margin-top:24px}
  .hero .hero-cta-b{padding:16px 28px;font-size:1.02rem;border-radius:999px;box-shadow:0 10px 26px rgba(255,95,0,.35)}
  /* stats: bottom of hero, two-up grid, big coloured numbers like the reference */
  .hero .inner>.hero-trust-top{order:7;display:grid;grid-template-columns:1fr 1fr;gap:20px 14px;
    border-bottom:none;border-top:1px solid rgba(255,255,255,.15);margin:28px 0 4px;padding:22px 0 0}
  .hero .inner>.hero-trust-top span{display:flex;flex-direction:column;align-items:flex-start;gap:3px;font-size:.8rem;color:#B9C7E8}
  .hero .inner>.hero-trust-top b{font-size:1.6rem;line-height:1;font-weight:800}
  .hero .inner>.hero-trust-top span:nth-child(1) b{color:#fff}
  .hero .inner>.hero-trust-top span:nth-child(2) b{color:#F5C26B}
  .hero .inner>.hero-trust-top span:nth-child(3) b{color:#7FB5FF}
  .hero .inner>.hero-trust-top .stars{font-size:.9rem}
  .hero .goalbar{order:8;margin-top:22px}
}
/* mobile hero: photo slider greets first; goal pills + stats move to the bottom */
@media(max-width:820px){
  .hero .inner{display:flex;flex-direction:column}
  .hero .inner>.reveal:not(#heroTesti){display:contents}
  .hero .inner>.reveal>div:not(.goalbar):not(.trust){order:4}
  #heroTesti{order:5;margin-top:14px;display:block;width:100%}
  
  
  
  .hero .goalbar{order:8;margin-top:22px}
}
/* mobile hero: one strong CTA only (reference pattern) */
@media(max-width:820px){
  .hero .hero-cta-a{display:none}
  .hero .hero-cta-b{background:var(--orange);border-color:var(--orange);color:#fff;width:100%;max-width:420px;justify-content:center;font-weight:800}
}
/* hero stat chips: gentle tints so the hero stays navy-led but alive */
.hero-chip:nth-of-type(1){background:var(--v-blue-soft)}
.hero-chip:nth-of-type(2){background:var(--v-green-soft)}
.hero-chip:nth-of-type(3){background:var(--v-amber-soft)}

/* audit fix: footer newsletter phone row. The legacy mobile block uses !important
   (.f-news form .btn{width:100%!important}) written for the old email-only form, so
   countering it here requires !important too (documented, unavoidable). */
.f-news .f-news-row{display:flex;flex-direction:row;gap:8px}
.f-news .f-news-row input{flex:1 1 auto;min-width:0}
.f-news .f-news-row .btn,.f-news .f-news-row button{flex:0 0 auto;width:auto;max-width:none;min-width:0}
@media (max-width:640px){
  .f-news .f-news-row{flex-direction:row}
  .f-news .f-news-row input{width:auto!important;flex:1 1 auto!important;min-width:0!important}
  .f-news form .f-news-row .btn{width:auto!important;max-width:none!important;flex:0 0 auto!important}
}