/* ================= ACADEMIC HUB ================= */
.hhero{position:relative;min-height:100svh;display:flex;align-items:center;padding:140px 0 90px;overflow:hidden;isolation:isolate;color:#fff;background:#050b1a}
.hhero .bg{position:absolute;inset:0;z-index:-3}
.hhero .bg img{width:100%;height:100%;opacity:.55}
.hhero::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(900px 600px at 75% 50%,rgba(27,51,104,.5),transparent 60%),linear-gradient(90deg,rgba(5,11,26,.97) 0%,rgba(5,11,26,.8) 50%,rgba(5,11,26,.55))}
.hhero .gridl{position:absolute;inset:0;z-index:-1;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);background-size:70px 70px;mask-image:radial-gradient(ellipse at 70% 50%,#000 10%,transparent 70%);animation:gridMove 20s linear infinite}
@keyframes gridMove{to{background-position:70px 70px}}
.hhero .wrap-wide{display:grid;grid-template-columns:1.3fr .9fr;gap:70px;align-items:center}
/* "bro.. texsts are so big... can we little reduce the size" (client,
   20 Oct 2026). The headline went from 38 characters to 63 when the
   centre's name was put into it, and at 128px it ran to five lines and
   pushed the standfirst off the first screen.

   This is the rule that actually sizes the hero. hub.css loads after
   site.vN.css and carries the same specificity, so it wins on order -
   which is why editing the h1 in the main stylesheet changed nothing. */
.hhero h1{font-size:clamp(32px,5.4vw,84px);letter-spacing:-.035em;line-height:.98;margin:20px 0}
.hhero .lead{color:rgba(255,255,255,.75)}
.hfeats{display:flex;flex-wrap:wrap;gap:8px;margin-top:30px}
.hfeats span{display:inline-flex;align-items:center;gap:8px;padding:9px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);font-size:13px;font-weight:600}
.hfeats svg{width:16px;height:16px;color:var(--gold-300)}
.hhero .login-wrap{position:relative}
.chipf{position:absolute;display:flex;align-items:center;gap:10px;padding:11px 15px;border-radius:15px;font-size:12.5px;font-weight:600;white-space:nowrap;animation:bob 6s ease-in-out infinite;color:#fff}
.chipf i{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;font-style:normal}
.chipf small{display:block;font-size:11px;color:rgba(255,255,255,.55);font-weight:500}
.chipf.a{top:-30px;inset-inline-end:-20px}.chipf.b{bottom:-30px;inset-inline-start:-30px;animation-delay:-3s}
@keyframes bob{50%{transform:translateY(-10px)}}
@media(max-width:1000px){.hhero .wrap-wide{grid-template-columns:1fr}.chipf{display:none}}

.strip{display:grid;grid-template-columns:repeat(4,1fr);border-block:1px solid var(--line)}
.strip div{padding:34px 28px;border-inline-end:1px solid var(--line)}
.strip div:last-child{border:0}
.strip b{display:block;font-family:var(--f-head);font-size:clamp(30px,3vw,46px);font-weight:600;letter-spacing:-.03em;line-height:1}
.strip span{font-size:14px;color:var(--muted)}
@media(max-width:800px){.strip{grid-template-columns:1fr 1fr}.strip div:nth-child(2){border-inline-end:0}.strip div{border-bottom:1px solid var(--line)}}

/* sticky story */
.story{display:grid;grid-template-columns:1.55fr .6fr;gap:50px;align-items:start}
.story .stage{position:sticky;top:96px}
.rtabs{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:16px}
.rtabs button{display:flex;align-items:center;gap:8px;padding:9px 15px;border-radius:999px;border:1px solid var(--line);font-size:13px;font-weight:600;color:var(--muted);transition:.3s var(--ease)}
.rtabs button i{width:8px;height:8px;border-radius:50%;background:var(--rc)}
.rtabs button.on{background:var(--tx);color:var(--bg0);border-color:var(--tx)}
.chapters{display:grid}
.chap{min-height:86vh;display:flex;flex-direction:column;justify-content:center;padding:40px 0;opacity:.28;transition:opacity .6s}
.chap.on{opacity:1}
.chap .no{font-family:var(--f-head);font-size:14px;letter-spacing:.2em;color:var(--acc);font-weight:700}
.chap h3{font-size:clamp(34px,3.6vw,56px);margin:14px 0 14px;letter-spacing:-.04em}
.chap h3 em{font-family:var(--f-serif);font-weight:400}
.chap p{color:var(--muted);font-size:16.5px}
.chap ul{list-style:none;display:grid;gap:10px;margin-top:22px}
.chap li{display:flex;gap:12px;font-size:15px;font-weight:500}
.chap li::before{content:"";flex:none;width:20px;height:20px;margin-top:2px;border-radius:50%;background:rgba(240,196,107,.18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23d6a443' stroke-width='3'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center/12px no-repeat}
.chap .try{display:inline-flex;align-items:center;gap:8px;margin-top:22px;font-size:13px;font-weight:700;color:var(--acc);padding:8px 14px;border-radius:999px;border:1px dashed rgba(240,196,107,.5)}
@media(max-width:1000px){.story{grid-template-columns:1fr}.story .stage{position:relative;top:0}.chap{min-height:auto;opacity:1;padding:30px 0}}

/* compliance */
/* Three across, two rows. The section carried four feature cards and now
   carries the client's six reasons to train here (20 Oct 2026), which
   at four columns would set as 4 + 2 with two gaps hanging. */
.comp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.comp{padding:30px 26px;border-radius:24px;border:1px solid var(--line);background:var(--card);position:relative;overflow:hidden;transition:.5s var(--ease)}
.comp:hover{transform:translateY(-8px);border-color:rgba(240,196,107,.4)}
.comp::after{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(240,196,107,.2),transparent 70%);opacity:0;transition:.5s}
.comp:hover::after{opacity:1}
.comp .ic{margin-bottom:26px}
.comp h4{font-size:21px;margin-bottom:8px}
.comp p{font-size:14.5px;color:var(--muted)}
@media(max-width:1000px){.comp-grid{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.comp-grid{grid-template-columns:1fr}}
.bundle{display:grid;grid-template-columns:auto 1fr;gap:50px;align-items:center;margin-top:60px;padding:40px;border-radius:30px;border:1px solid var(--line);background:linear-gradient(135deg,rgba(240,196,107,.1),transparent 60%)}
.bundle .files{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.bundle .f{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:14px;background:var(--card);border:1px solid var(--line);font-size:14px;font-weight:600}
.bundle .f svg{width:20px;height:20px;color:var(--acc);flex:none}
.bundle .f small{display:block;font-size:11.5px;color:var(--muted-2);font-weight:500}
@media(max-width:800px){.bundle{grid-template-columns:1fr;padding:26px}}

/* security */
.secu{position:relative;overflow:hidden;isolation:isolate;color:#fff;background:#050b1a}
.secu .bg{position:absolute;inset:-10% 0;z-index:-2}
.secu .bg img{width:100%;height:100%;opacity:.4}
.secu::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#050b1a 35%,rgba(5,11,26,.6))}
.secu .wrap-wide{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.sgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:36px}
.sgrid div{padding:22px;border-radius:20px}
.sgrid h4{font-size:18px;margin:14px 0 6px}
.sgrid p{font-size:14px;color:rgba(255,255,255,.7)}
.sgrid .ic{background:rgba(240,196,107,.18);color:var(--gold-300)}
.otp{border-radius:26px;padding:30px}
.otp h4{font-size:22px}
.otp p{color:rgba(255,255,255,.7);font-size:14px;margin:6px 0 20px}
.otp-boxes{display:flex;gap:10px}
.otp-boxes input{width:52px;height:62px;border-radius:14px;border:1px solid rgba(255,255,255,.2);background:rgba(5,11,26,.5);text-align:center;font-family:var(--f-head);font-size:26px;font-weight:600;color:#fff}
.otp-boxes input:focus{outline:none;border-color:var(--gold-400);box-shadow:0 0 0 4px rgba(240,196,107,.2)}
.otp .ok{display:none;margin-top:16px;color:#6ee7b7;font-weight:600;font-size:14px}
.otp .ok.on{display:block;animation:viewIn .5s var(--ease)}
.auditlive{margin-top:22px;padding-top:20px;border-top:1px solid rgba(255,255,255,.12)}
.auditlive .ev{border-color:#0b1733}
@media(max-width:900px){.secu .wrap-wide{grid-template-columns:1fr}.sgrid{grid-template-columns:1fr}}

/* bilingual */
.bil{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.bil .pic{position:relative;border-radius:30px;overflow:hidden;aspect-ratio:4/5}
.bil .pic img{width:100%;height:100%}
.bil .ar-card{position:absolute;inset-inline-end:-30px;bottom:40px;width:300px;border-radius:22px;padding:22px;direction:rtl;font-family:'IBM Plex Sans Arabic',sans-serif}
.bil .ar-card b{font-size:20px;display:block}
.bil .ar-card small{color:var(--muted);font-size:13px}
.bil .ar-card .row{margin-top:10px}
.langdemo{display:flex;gap:6px;margin-top:28px}
.langdemo button{padding:12px 20px;border-radius:999px;border:1px solid var(--line);font-weight:700}
.langdemo button.on{background:var(--inv);color:var(--inv-tx);border-color:var(--inv)}
@media(max-width:900px){.bil{grid-template-columns:1fr}.bil .ar-card{inset-inline-end:16px}}
.faq-grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px}
@media(max-width:860px){.faq-grid{grid-template-columns:1fr;gap:10px}}