/* ============================================================
   AGATHISHA INSTITUTE — stylesheet
   Animations use transform/opacity only (GPU-composited).
   ============================================================ */

/* ---------- tokens ---------- */
:root{
  --teal-950:#031821; --teal-900:#062a35; --teal-850:#07333e; --teal-800:#0a3a47;
  --teal-700:#0e5560; --teal-600:#136773; --teal-500:#17879a; --teal-400:#1f9fb2;
  --cyan-300:#5fd6e0; --cyan-200:#9fe9ef;
  --navy-950:#02163f; --navy-900:#041a33; --navy-800:#0b2145; --navy-700:#132046;
  --ink-950:#0b0b22; --ink-900:#12122e; --ink-800:#1d264f;
  --violet-800:#3a1f7a; --purple-700:#49289c; --purple-600:#5b2fc4; --purple-500:#7153cd;
  --magenta:#cd50c3; --pink:#e8599a; --orange:#f9a165;
  --rose-950:#5c2140; --rose-900:#6a2646; --rose-800:#863148;
  --page:#eef3fa; --page-2:#f8fbfe; --card:#fff;
  --ink:#12263a; --muted:#5d7186; --line:#e2eaf3;
  --grad-stats:linear-gradient(90deg,#1f9fb2 0%,#2b86b8 14%,#7153cd 34%,#cd50c3 54%,#e8599a 74%,#f9a165 100%);
  --shadow-1:0 2px 10px rgba(11,44,66,.06);
  --shadow-2:0 10px 34px rgba(11,44,66,.10);
  --shadow-3:0 22px 60px rgba(11,44,66,.16);
  --f-serif:'Marcellus',Georgia,'Times New Roman',serif;
  --f-sans:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1340px;
  --ease:cubic-bezier(.22,.9,.28,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
}

/* ---------- reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:76px}
body{margin:0;background:var(--page);color:var(--ink);
  font-family:var(--f-sans);font-size:15px;line-height:1.6;
  -webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block;height:auto}
h1,h2,h3{margin:0;font-family:var(--f-serif);font-weight:400;line-height:1.16;letter-spacing:.1px}
p{margin:0}
ul,ol{margin:0;padding:0;list-style:none}
a{color:inherit;text-decoration:none}
button,input,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer}
.sprite{position:absolute;width:0;height:0;overflow:hidden}
.sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:#fff;padding:10px 16px;border-radius:0 0 8px 0}
.skip:focus{left:0}
:focus-visible{outline:2px solid var(--teal-400);outline-offset:3px;border-radius:4px}
.wrap{width:min(100% - 40px,var(--wrap));margin-inline:auto}
.sect{padding:74px 0}

/* icons */
.ic{width:18px;height:18px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;
  stroke-linecap:round;stroke-linejoin:round}
.ic--sm{width:15px;height:15px}
.ic--lg{width:30px;height:30px;stroke-width:1.35}

/* ============================================================
   DNA LOADER
   ============================================================ */
.dnaload{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;
  background:radial-gradient(circle at 50% 44%,#0d4553 0%,#072b38 46%,#03181f 100%);
  transition:opacity .75s var(--ease),visibility .75s}
.dnaload.done{opacity:0;visibility:hidden}
.dnaload__in{display:grid;justify-items:center}
.dnaload__helix{position:relative;width:120px;height:150px;margin-bottom:26px;
  will-change:transform;animation:helixSpin 3.4s ease-in-out infinite}
/* scaleX rather than rotateY: same twisting read, no 3D layer cost */
@keyframes helixSpin{0%,100%{transform:scaleX(1)}50%{transform:scaleX(-1)}}
.dnaload__helix i{position:absolute;left:0;right:0;height:2px;border-radius:2px;
  background:linear-gradient(90deg,var(--cyan-300),var(--purple-500));
  transform-origin:center;opacity:0;
  animation:rungIn .5s var(--out) forwards,rungPulse 2.2s ease-in-out infinite}
.dnaload__helix i::before,.dnaload__helix i::after{content:"";position:absolute;top:50%;
  width:9px;height:9px;border-radius:50%;translate:0 -50%}
.dnaload__helix i::before{left:-4px;background:var(--cyan-300);box-shadow:0 0 10px rgba(95,214,224,.85)}
.dnaload__helix i::after{right:-4px;background:var(--purple-500);box-shadow:0 0 10px rgba(113,83,205,.85)}
@keyframes rungIn{to{opacity:1}}
@keyframes rungPulse{0%,100%{filter:brightness(1)}50%{filter:brightness(1.5)}}
.dnaload__brand{font-family:var(--f-serif);font-size:23px;letter-spacing:6px;color:#fff;margin-bottom:6px;
  background:linear-gradient(100deg,#cfe9ee 38%,#7fffe6 50%,#cfe9ee 62%);
  background-size:250% 100%;-webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;animation:dnaShine 2.4s linear infinite}
@keyframes dnaShine{from{background-position:130% 0}to{background-position:-30% 0}}
.dnaload__sub{font-size:9.4px;letter-spacing:3px;color:#6f9aa6;text-transform:uppercase;margin-bottom:22px}
.dnaload__bar{width:180px;height:2px;border-radius:99px;background:rgba(255,255,255,.14);overflow:hidden}
.dnaload__bar i{display:block;height:100%;width:38%;border-radius:99px;
  background:linear-gradient(90deg,var(--cyan-300),var(--purple-500));
  animation:dnaBar 1.4s var(--ease) infinite}
@keyframes dnaBar{0%{transform:translateX(-110%)}100%{transform:translateX(370%)}}
body.preload{overflow:hidden}

/* ============================================================
   BUTTONS
   ============================================================ */
.btn{display:inline-flex;align-items:center;gap:9px;border-radius:999px;
  padding:13px 26px;font-size:13.5px;font-weight:600;letter-spacing:.2px;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .35s var(--ease),box-shadow .35s var(--ease),background-color .3s,color .3s,border-color .3s;
  will-change:transform}
.btn::after{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;opacity:0;
  background:linear-gradient(100deg,rgba(255,255,255,.32),rgba(255,255,255,0) 55%);
  transform:translateX(-100%);transition:opacity .2s}
.btn:hover{transform:translateY(-2px)}
.btn:hover::after{opacity:1;animation:sheen .7s var(--ease-out)}
.btn:active{transform:translateY(0) scale(.985)}
.btn .ic{transition:transform .35s var(--ease)}
.btn:hover .ic{transform:translateX(4px)}
@keyframes sheen{to{transform:translateX(120%)}}

.btn--teal{background:linear-gradient(100deg,var(--teal-500),var(--teal-400));color:#fff;
  box-shadow:0 8px 22px rgba(23,135,154,.32)}
.btn--teal:hover{box-shadow:0 14px 32px rgba(23,135,154,.42)}
.btn--purple{background:linear-gradient(100deg,var(--purple-700),var(--purple-600));color:#fff;
  box-shadow:0 8px 22px rgba(73,40,156,.32)}
.btn--purple:hover{box-shadow:0 14px 32px rgba(73,40,156,.45)}
.btn--ghost{background:rgba(255,255,255,.06);color:#fff;border:1px solid rgba(255,255,255,.5);
  backdrop-filter:blur(4px)}
.btn--ghost:hover{background:#fff;color:var(--teal-900);border-color:#fff}
.btn--outline{background:#fff;color:var(--teal-700);border:1px solid var(--line);box-shadow:var(--shadow-1)}
.btn--outline:hover{border-color:var(--teal-400);color:var(--teal-500);box-shadow:var(--shadow-2)}
.btn--sm{padding:10px 20px;font-size:12.5px}
.btn--xs{padding:8px 17px;font-size:11.5px}
.btn--reg{background:#fff;color:var(--navy-800);padding:7px 15px;font-size:11px;font-weight:600;white-space:nowrap}
.btn--reg:hover{background:var(--cyan-200)}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar{background:linear-gradient(90deg,#0f5f6c,#146571 45%,#12707c);color:#dff1f3;
  font-size:11.6px;position:relative;z-index:60;
  overflow-x:auto;overflow-y:hidden;overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none}
.topbar::-webkit-scrollbar{display:none}
.topbar__in{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:38px}
.topbar__facts{display:flex;align-items:center;gap:26px}
.topbar__facts li{display:flex;align-items:center;gap:7px;white-space:nowrap;
  animation:fadeDown .55s var(--ease-out) both}
.topbar__facts li:nth-child(2){animation-delay:.06s}
.topbar__facts li:nth-child(3){animation-delay:.12s}
.topbar__facts li:nth-child(4){animation-delay:.18s}
.topbar__facts b{font-weight:600;color:#fff}
.topbar__facts .ic{width:14px;height:14px;opacity:.85}
.topbar__right{display:flex;align-items:center;gap:20px;animation:fadeDown .55s .1s var(--ease-out) both}
.topbar__lnk{display:flex;align-items:center;gap:7px;white-space:nowrap;transition:color .25s,transform .25s}
.topbar__lnk:hover{color:#fff;transform:translateY(-1px)}
.topbar__lnk .ic{width:14px;height:14px;opacity:.85}
.socials{display:flex;gap:7px}
.soc{width:21px;height:21px;border-radius:50%;display:grid;place-items:center;color:#fff;
  position:relative;transition:transform .3s var(--ease),filter .3s}
.soc::after{content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;
  transform:translate(-50%,-50%)}
.soc .ic{width:11px;height:11px}
.soc--in{background:#0a66c2}.soc--tw{background:#1d9bf0}.soc--yt{background:#ff0000}
.soc--ig{background:linear-gradient(45deg,#f9ce34,#ee2a7b 50%,#6228d7)}
.soc:hover{transform:translateY(-2px) scale(1.12);filter:brightness(1.12)}

/* ============================================================
   BRAND BAR + LOGO
   ============================================================ */
.brandbar{background:linear-gradient(180deg,#f4f9fd,#eaf2f8);padding:14px 0 12px;
  display:grid;place-items:center;position:relative;z-index:55}
.logo{display:inline-flex;align-items:center;gap:13px;
  animation:logoIn .95s var(--ease-out) both}
.logo__mark{position:relative;display:grid;place-items:center;width:46px;height:46px}
.logo__svg{width:46px;height:46px;overflow:visible}
.lg-ring{fill:none;stroke:var(--teal-600);stroke-width:2;opacity:.9;
  stroke-dasharray:183;stroke-dashoffset:183;
  animation:draw 1.25s .15s var(--ease-out) forwards}
.lg-ring2{fill:none;stroke:var(--cyan-300);stroke-width:1.4;opacity:.55;
  stroke-dasharray:20 34;transform-origin:32px 32px;animation:spin 14s linear infinite}
.lg-stem{fill:none;stroke:#2f7d4f;stroke-width:2;stroke-linecap:round;
  stroke-dasharray:36;stroke-dashoffset:36;animation:draw .7s .5s var(--ease-out) forwards}
.lg-l{fill:#57ac6f;opacity:0;transform-origin:32px 33px;
  animation:leafPop .55s var(--ease-out) forwards}
.lg-leaves .lg-l:nth-child(1){animation-delay:.72s}
.lg-leaves .lg-l:nth-child(2){animation-delay:.79s}
.lg-leaves .lg-l:nth-child(3){animation-delay:.86s}
.lg-leaves .lg-l:nth-child(4){animation-delay:.93s}
.lg-leaves .lg-l:nth-child(5){animation-delay:1s}
.lg-leaves .lg-l:nth-child(6){animation-delay:1.07s}
.lg-seed{fill:#7fd6a8;opacity:0;animation:leafPop .5s 1.15s var(--ease-out) forwards}
.logo__txt{display:flex;flex-direction:column;gap:1px}
.logo__name{font-family:var(--f-serif);font-size:25px;letter-spacing:1.6px;color:var(--teal-700);line-height:1;
  background:linear-gradient(100deg,var(--teal-700) 42%,#43cfc4 50%,var(--teal-700) 58%);
  background-size:240% 100%;background-position:120% 0;
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  animation:brandShine 2.2s 1s var(--ease) both}
@keyframes brandShine{from{background-position:120% 0}to{background-position:-40% 0}}
.logo__sub{font-size:8.4px;letter-spacing:1.15px;font-weight:600;color:var(--teal-600);line-height:1.34;opacity:.92}
.logo:hover .lg-leaves{animation:leafSway 1.4s var(--ease) }
@keyframes leafSway{25%{transform:rotate(-4deg)}60%{transform:rotate(3deg)}100%{transform:rotate(0)}}
.lg-leaves{transform-origin:32px 33px}

@keyframes logoIn{
  0%{opacity:0;transform:translateY(-14px) scale(.9)}
  100%{opacity:1;transform:none}
}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes leafPop{0%{opacity:0;transform:scale(.4)}70%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* ============================================================
   NAV
   ============================================================ */
.navwrap{position:sticky;top:0;z-index:70;padding:0 0 12px;
  background:linear-gradient(180deg,#eaf2f8 0%,#eaf2f8 62%,rgba(234,242,248,0) 100%);
  transition:background .35s var(--ease),padding .35s var(--ease)}
.navwrap.stuck{background:rgba(234,242,248,.95);backdrop-filter:blur(12px) saturate(1.3);
  box-shadow:0 6px 26px rgba(6,42,53,.14)}
.nav{background:linear-gradient(100deg,var(--teal-950),#072335 60%,#08243a);
  border-radius:999px;display:flex;align-items:center;gap:4px;padding:7px 8px 7px 7px;
  box-shadow:0 12px 34px rgba(3,24,33,.24);position:relative;
  width:min(100%,1180px);margin-inline:auto;
  animation:navIn .8s .12s var(--ease-out) both}
@keyframes navIn{from{opacity:0;transform:translateY(-22px) scale(.94);filter:blur(8px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes navItem{from{opacity:0;transform:translateY(-18px) rotateX(58deg);filter:blur(4px)}
  to{opacity:1;transform:none;filter:blur(0)}}
@keyframes homeSpin{from{opacity:0;transform:rotate(-200deg) scale(.3)}
  60%{opacity:1;transform:rotate(12deg) scale(1.08)}to{opacity:1;transform:none}}
@keyframes ctaPop{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:scale(1)}}
@keyframes searchIn{from{opacity:0;transform:rotate(-120deg) scale(.4)}to{opacity:1;transform:none}}
.navwrap.stuck .nav{box-shadow:0 10px 26px rgba(3,24,33,.3)}
.nav__home{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(140deg,var(--teal-500),var(--teal-400));color:#fff;flex:none;
  animation:homeSpin .85s .2s var(--ease-out) both;
  transition:transform .35s var(--ease),box-shadow .35s}
.nav__home:hover{transform:rotate(-8deg) scale(1.08);box-shadow:0 6px 16px rgba(31,159,178,.5)}
.nav__list{display:flex;align-items:center;flex:1;justify-content:center;gap:2px;perspective:900px}
.nav__list>li{position:relative}
.nav__list>li>a{display:flex;align-items:center;gap:5px;color:#cfe2e8;font-size:12.8px;font-weight:500;
  padding:11px 15px;border-radius:999px;white-space:nowrap;position:relative;
  transform-origin:top center;
  animation:navItem .65s var(--ease-out) both;
  transition:color .28s,background-color .28s}
.nav__list>li:nth-child(1)>a{animation-delay:.28s}
.nav__list>li:nth-child(2)>a{animation-delay:.34s}
.nav__list>li:nth-child(3)>a{animation-delay:.4s}
.nav__list>li:nth-child(4)>a{animation-delay:.46s}
.nav__list>li:nth-child(5)>a{animation-delay:.52s}
.nav__list>li:nth-child(6)>a{animation-delay:.58s}
.nav__list>li:nth-child(7)>a{animation-delay:.64s}
.nav__list>li>a::before{content:"";position:absolute;left:15px;right:15px;bottom:6px;height:1.5px;
  background:var(--cyan-300);transform:scaleX(0);transform-origin:left;border-radius:2px;
  transition:transform .38s var(--ease)}
.nav__list>li>a:hover{color:#fff}
.nav__list>li>a:hover::before{transform:scaleX(1)}
.nav__list>li>a .ic{opacity:.7;transition:transform .3s}
.nav__list>li.has-sub:hover>a .ic{transform:rotate(180deg)}
.nav__cta{margin-left:2px;animation:ctaPop .6s .74s cubic-bezier(.34,1.56,.64,1) both}
.nav__search{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#cfe2e8;
  transition:background-color .3s,color .3s,transform .3s;animation:searchIn .6s .84s var(--ease-out) both}
.nav__search:hover{background:rgba(255,255,255,.12);color:#fff;transform:scale(1.08)}
.nav__burger{display:none;width:38px;height:38px;border-radius:50%;place-items:center;color:#fff}

/* dropdown */
.sub{position:absolute;top:calc(100% + 12px);left:50%;translate:-50% 0;min-width:270px;
  background:#fff;border-radius:14px;padding:9px;box-shadow:var(--shadow-3);
  display:grid;gap:1px;opacity:0;visibility:hidden;transform:translateY(10px) scale(.98);
  transform-origin:top center;transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s}
.sub::before{content:"";position:absolute;top:-8px;left:0;right:0;height:12px}
.has-sub:hover .sub,.has-sub:focus-within .sub{opacity:1;visibility:visible;transform:none}
.sub a{font-size:12.6px;color:var(--ink);padding:9px 13px;border-radius:9px;
  transition:background-color .22s,color .22s,transform .22s}
.sub a:hover{background:#f0f7fb;color:var(--teal-600);transform:translateX(3px)}

/* mobile drawer */
.drawer{position:fixed;inset:0;z-index:200;background:rgba(3,24,33,.55);backdrop-filter:blur(3px);
  opacity:0;transition:opacity .3s var(--ease)}
.drawer.open{opacity:1}
.drawer__panel{position:absolute;right:0;top:0;bottom:0;width:min(86vw,320px);background:var(--teal-950);
  padding:0 20px 22px;display:flex;flex-direction:column;overflow-y:auto;overscroll-behavior:contain;
  transform:translateX(100%);transition:transform .42s var(--ease-out);
  box-shadow:-18px 0 50px rgba(0,0,0,.35)}
.drawer.open .drawer__panel{transform:none}
.drawer__head{display:flex;align-items:center;justify-content:space-between;
  padding:16px 2px 12px;margin-bottom:8px;border-bottom:1px solid rgba(255,255,255,.12)}
.drawer__brand{font-family:var(--f-serif);font-size:17px;letter-spacing:2px;color:var(--cyan-300)}
.drawer__x{color:#fff;width:36px;height:36px;display:grid;place-items:center;border-radius:50%;
  background:rgba(255,255,255,.08);transition:background-color .3s,transform .3s var(--ease)}
.drawer__x:hover{background:rgba(255,255,255,.18);transform:rotate(90deg)}

/* drawer items stagger in when opened */
.dnav{display:grid;margin-bottom:16px}
.dnav>*{opacity:0;transform:translateX(26px);
  transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.drawer.open .dnav>*{opacity:1;transform:none}
.drawer.open .dnav>*:nth-child(1){transition-delay:.06s}
.drawer.open .dnav>*:nth-child(2){transition-delay:.1s}
.drawer.open .dnav>*:nth-child(3){transition-delay:.14s}
.drawer.open .dnav>*:nth-child(4){transition-delay:.18s}
.drawer.open .dnav>*:nth-child(5){transition-delay:.22s}
.drawer.open .dnav>*:nth-child(6){transition-delay:.26s}
.drawer.open .dnav>*:nth-child(7){transition-delay:.3s}
.drawer.open .dnav>*:nth-child(8){transition-delay:.34s}
.drawer__cta{opacity:0;transform:translateY(14px);
  transition:opacity .4s .4s var(--ease-out),transform .4s .4s var(--ease-out)}
.drawer.open .drawer__cta{opacity:1;transform:none}

.dnav__lnk,.dnav__tog{display:flex;align-items:center;gap:10px;width:100%;text-align:left;
  color:#cfe2e8;padding:11px 4px;font-size:13.6px;font-weight:500;
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:color .25s,padding-left .25s}
.dnav__lnk:hover,.dnav__tog:hover{color:#fff;padding-left:10px}
.dnav__lnk .ic{color:var(--cyan-300)}
.dnav__tog{justify-content:space-between}
.dnav__tog .ic{transition:transform .35s var(--ease);opacity:.7}
.dnav__grp.open .dnav__tog{color:var(--cyan-300)}
.dnav__grp.open .dnav__tog .ic{transform:rotate(180deg);opacity:1}
/* animated accordion (grid-rows trick) */
.dnav__sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .42s var(--ease)}
.dnav__grp.open .dnav__sub{grid-template-rows:1fr}
.dnav__subin{overflow:hidden;display:grid}
.dnav__subin a{color:#9dc0c9;font-size:12.4px;padding:8px 4px 8px 20px;position:relative;
  border-left:1.5px solid rgba(95,214,224,.28);margin-left:7px;
  opacity:0;transform:translateY(-6px);
  transition:color .25s,padding-left .25s,opacity .3s,transform .3s}
.dnav__grp.open .dnav__subin a{opacity:1;transform:none}
.dnav__grp.open .dnav__subin a:nth-child(1){transition-delay:.08s}
.dnav__grp.open .dnav__subin a:nth-child(2){transition-delay:.13s}
.dnav__grp.open .dnav__subin a:nth-child(3){transition-delay:.18s}
.dnav__grp.open .dnav__subin a:nth-child(4){transition-delay:.23s}
.dnav__grp.open .dnav__subin a:nth-child(5){transition-delay:.28s}
.dnav__grp.open .dnav__subin a:nth-child(6){transition-delay:.33s}
.dnav__subin a::before{content:"";position:absolute;left:-1.5px;top:0;bottom:0;width:1.5px;
  background:var(--cyan-300);transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.dnav__subin a:hover{color:#fff;padding-left:26px}
.dnav__subin a:hover::before{transform:scaleY(1)}

/* ============================================================
   HERO
   ============================================================ */
.hero{position:relative;isolation:isolate;overflow:hidden;margin-top:-12px;
  background:linear-gradient(105deg,var(--teal-950) 0%,var(--teal-900) 26%,var(--teal-850) 44%,#0c4d5e 62%,#12707f 100%);
  min-height:472px;display:flex;align-items:center}
.hero__bg{position:absolute;inset:0;z-index:-2;pointer-events:none}
.orb{position:absolute;border-radius:50%;filter:blur(52px);opacity:.5;will-change:transform}
.orb--1{width:420px;height:420px;left:-120px;top:-80px;background:#0d7b8e;animation:drift1 22s ease-in-out infinite}
.orb--2{width:340px;height:340px;left:26%;bottom:-140px;background:#7153cd;opacity:.32;animation:drift2 26s ease-in-out infinite}
.orb--3{width:300px;height:300px;right:32%;top:-70px;background:#1fa5b8;opacity:.35;animation:drift3 19s ease-in-out infinite}
@keyframes drift1{0%,100%{transform:none}50%{transform:translate3d(60px,50px,0) scale(1.12)}}
@keyframes drift2{0%,100%{transform:none}50%{transform:translate3d(-70px,-60px,0) scale(1.15)}}
@keyframes drift3{0%,100%{transform:none}50%{transform:translate3d(40px,70px,0) scale(.9)}}
.grid-dots{position:absolute;inset:0;opacity:.16;
  background-image:radial-gradient(rgba(159,233,239,.55) 1px,transparent 1px);
  background-size:26px 26px;
  -webkit-mask-image:linear-gradient(100deg,#000 8%,transparent 42%);
  mask-image:linear-gradient(100deg,#000 8%,transparent 42%)}

.hero__slides{position:absolute;right:0;top:0;height:100%;width:84%;z-index:-1;will-change:transform}
.hero__art{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:right center;
  opacity:0;transition:opacity 1.15s var(--ease);will-change:transform,opacity}
.hero__art.is-on{opacity:1;animation:kenburns 9s var(--ease-out) both}
@keyframes kenburns{from{transform:scale(1.12) translateX(2.5%);filter:brightness(1.24) saturate(1.15)}
  to{transform:scale(1) translateX(0);filter:brightness(1) saturate(1)}}
body:not(.js) .hero__art:first-child{opacity:1}
/* soft cinematic blend from the dark panel into the artwork */
.hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
  background:linear-gradient(96deg,
    var(--teal-950) 0%,
    rgba(6,42,53,.97) 18%,
    rgba(7,51,62,.82) 29%,
    rgba(9,62,74,.45) 38%,
    rgba(12,77,94,.16) 46%,
    transparent 55%)}
@keyframes floaty{0%,100%{transform:translate3d(0,0,0)}50%{transform:translate3d(0,-14px,0)}}

/* glowing cell orbs drifting through the hero */
.corb{position:absolute;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle at 34% 32%,rgba(255,255,255,.55),rgba(159,233,239,.28) 38%,rgba(31,159,178,.12) 62%,transparent 74%);
  box-shadow:0 0 24px rgba(95,214,224,.35),inset 0 0 12px rgba(255,255,255,.22);
  animation:corb var(--t,16s) ease-in-out infinite;animation-delay:var(--dl,0s);opacity:0}
.corb::after{content:"";position:absolute;inset:26%;border-radius:50%;
  background:radial-gradient(circle at 40% 38%,rgba(255,255,255,.5),rgba(95,214,224,.35) 60%,transparent 75%)}
.corb--1{width:56px;height:56px;left:6%;top:64%;--t:17s}
.corb--2{width:30px;height:30px;left:30%;top:22%;--t:14s;--dl:2.2s}
.corb--3{width:20px;height:20px;left:44%;top:70%;--t:12s;--dl:1s}
.corb--4{width:42px;height:42px;left:56%;top:16%;--t:19s;--dl:3.4s}
.corb--5{width:16px;height:16px;left:73%;top:60%;--t:11s;--dl:.6s}
.corb--6{width:26px;height:26px;left:88%;top:30%;--t:15s;--dl:2.8s}
@keyframes corb{
  0%{transform:translate3d(0,18px,0) scale(.92);opacity:0}
  12%{opacity:.85}
  50%{transform:translate3d(14px,-26px,0) scale(1.06);opacity:.65}
  88%{opacity:.85}
  100%{transform:translate3d(0,18px,0) scale(.92);opacity:0}
}

.hero__in{position:relative;padding:52px 0 56px}
.hero__copy{max-width:560px}
.eyebrow{display:flex;align-items:center;gap:9px;font-size:10.8px;letter-spacing:2.6px;font-weight:600;
  color:var(--cyan-200);margin-bottom:18px}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--cyan-300);
  box-shadow:0 0 0 0 rgba(95,214,224,.7);animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(95,214,224,.6)}70%{box-shadow:0 0 0 12px rgba(95,214,224,0)}100%{box-shadow:0 0 0 0 rgba(95,214,224,0)}}
.hero__h1{font-size:clamp(30px,3.25vw,46px);color:#fff;line-height:1.18;margin-bottom:18px}
.hero__h1 .line{display:block;overflow:hidden;padding-bottom:.08em;margin-bottom:-.08em}
.lin{display:block;transform:translateY(116%) rotate(2.4deg);transform-origin:left bottom;
  transition:transform .9s var(--ease-out);transition-delay:var(--d,0ms)}
.hslide.is-on .lin{transform:none}
body:not(.js) .lin{transform:none}
/* eyebrow tracks in from wide letter-spacing */
.hslide .eyebrow{letter-spacing:6.5px}
.hslide.is-on .eyebrow{letter-spacing:2.6px}
/* buttons spring-pop after the copy lands */
.hslide.is-on .hero__btns .btn{animation:btnPop .7s cubic-bezier(.34,1.56,.64,1) backwards;
  animation-delay:calc(var(--d,0ms) + 120ms)}
.hslide.is-on .hero__btns .btn:nth-child(2){animation-delay:calc(var(--d,0ms) + 240ms)}
@keyframes btnPop{from{opacity:0;transform:scale(.66) translateY(10px)}to{opacity:1;transform:none}}
.hero__h1 em{font-style:normal;color:var(--cyan-300)}
.hero__p{color:#bcd7de;font-size:13.4px;line-height:1.7;margin-bottom:24px}
.hero__btns{display:flex;gap:13px;flex-wrap:wrap;margin-bottom:26px}
.trust{display:flex;align-items:center;gap:13px}
.trust__pics{width:74px;height:26px;object-fit:cover;border-radius:999px;flex:none}
.trust p{font-size:11.4px;color:#a9c8d0;line-height:1.5}
.trust b{color:#fff;font-weight:600;font-size:12px}

/* hero slide stack + per-slide text reveal */
.hero__stage{position:relative;min-height:368px}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .6s var(--ease),visibility .6s}
.hslide.is-on{opacity:1;visibility:visible;pointer-events:auto}
.rv{opacity:0;transform:translateY(26px);filter:blur(7px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out),filter .65s var(--ease-out);
  transition-delay:0ms}
.hslide.is-on .rv{opacity:1;transform:none;filter:blur(0);transition-delay:var(--d,0ms)}
body:not(.js) .hslide:first-child{opacity:1;visibility:visible;pointer-events:auto}
body:not(.js) .hslide:first-child .rv{opacity:1;transform:none}

/* hero slider controls */
.hero__nav{position:absolute;right:22px;bottom:24px;display:flex;align-items:center;gap:13px;z-index:2;
  background:rgba(3,24,33,.42);border:1px solid rgba(255,255,255,.16);border-radius:999px;
  padding:8px 14px 8px 16px;backdrop-filter:blur(8px);
  animation:fadeDown 1s .8s var(--ease-out) both}
.hnav__count{color:#dff1f3;font-size:12px;letter-spacing:1px;display:flex;align-items:baseline;gap:4px}
.hnav__count b{font-size:16px;font-weight:700;color:#fff}
.hnav__count i{font-style:normal;font-size:10.5px;color:#9fc4cc}
.hnav__arr{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.4);
  transition:background-color .3s,transform .3s var(--ease),border-color .3s,color .3s}
.hnav__arr:hover{background:var(--cyan-300);color:var(--teal-950);transform:scale(1.12);border-color:var(--cyan-300)}
.dots--hero button{background:rgba(255,255,255,.4);position:relative;overflow:hidden}
.dots--hero button.is-on{background:rgba(255,255,255,.3)}
.dots--hero button.is-on::after{content:"";position:absolute;inset:0;border-radius:inherit;
  background:var(--cyan-300);transform-origin:left;animation:dotfill 7s linear forwards}
@keyframes dotfill{from{transform:scaleX(0)}to{transform:scaleX(1)}}

/* ============================================================
   STATS BAR
   ============================================================ */
.statsbar{position:relative;margin-top:-1px}
.statsbar__in{background:var(--grad-stats);border-radius:0 26px 26px 0;
  width:min(100%,calc(50% + var(--wrap)/2 - 46px));
  display:grid;grid-template-columns:repeat(6,1fr);
  padding:32px 30px 34px;box-shadow:0 16px 44px rgba(80,60,150,.24)}
/* icon sits beside the figure; the label spans beneath both */
.statsbar__in li{display:grid;grid-template-columns:auto auto;
  grid-template-areas:"ic num" "lbl lbl";
  justify-content:center;align-items:center;column-gap:12px;row-gap:7px;
  color:#fff;text-align:center;position:relative;padding:0 10px}
.statsbar__in li+li::before{content:"";position:absolute;left:0;top:12%;bottom:12%;width:1px;
  background:rgba(255,255,255,.28)}
.statsbar__in .ic{grid-area:ic;width:40px;height:40px;stroke-width:1.25;margin:0;
  filter:drop-shadow(0 3px 8px rgba(0,0,0,.18));
  transition:transform .4s var(--ease)}
.statsbar__in li:hover .ic{transform:translateY(-4px) scale(1.14)}
/* heading typeface, forced to lining figures so digits share one height */
/* Marcellus ships only a 400 weight, so 700 is browser-synthesised. A small
   text-stroke thickens the strokes evenly instead of relying on that smear. */
.statsbar__in b{grid-area:num;font-family:var(--f-serif);font-size:34px;font-weight:400;
  line-height:1;letter-spacing:.2px;text-shadow:0 2px 10px rgba(0,0,0,.18);
  font-variant-numeric:lining-nums;font-feature-settings:"lnum" 1,"onum" 0;
  display:inline-flex;align-items:flex-start;justify-self:start}
/* the + / K+ reads as a raised suffix, not part of the figure */
.statsbar__in b i{font-style:normal;font-size:.44em;letter-spacing:0;
  line-height:1;margin-left:3px;margin-top:.1em;opacity:.9}
/* direct child only — otherwise this also shrinks <span class="num"> inside <b>,
   leaving the figure tiny while the + suffix stayed large */
.statsbar__in li>span{grid-area:lbl;font-size:13px;font-weight:500;letter-spacing:.2px;
  opacity:.96;line-height:1.4}
/* subtle pulse while the figure is counting up */
.statsbar__in b.counting .num{display:inline-block;animation:numTick .42s ease-in-out infinite}
@keyframes numTick{0%,100%{transform:scale(1)}50%{transform:scale(1.06)}}

/* ============================================================
   PROGRAMS
   ============================================================ */
.programs{background:linear-gradient(180deg,var(--page) 0%,#e9f0f8 100%);padding:72px 0 78px}
.programs__in{display:grid;grid-template-columns:210px 1fr;gap:38px;align-items:start}
.programs__head h2{font-size:31px;color:var(--teal-900);line-height:1.2}
.marker{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.marker i{width:11px;height:11px;border-radius:50%;border:2.5px solid var(--purple-600);flex:none;
  position:relative}
.marker i::after{content:"";position:absolute;left:12px;top:50%;translate:0 -50%;width:44px;height:1.5px;
  background:linear-gradient(90deg,var(--purple-600),transparent);
  transform-origin:left;transform:scaleX(0);transition:transform .7s .2s var(--ease-out)}
[data-reveal].in .marker i::after,.programs__head.in .marker i::after{transform:scaleX(1)}
/* ---------- living stem cell (pure CSS) ---------- */
.cellviz{margin-top:34px;user-select:none}
.cellviz__field{position:relative;width:172px;height:172px}
.cv-cell{position:absolute;inset:14px;border-radius:46% 54% 52% 48%/47% 46% 54% 53%;
  background:radial-gradient(circle at 36% 32%,rgba(190,244,248,.95),rgba(126,214,228,.55) 42%,rgba(31,159,178,.3) 68%,rgba(31,159,178,.12) 82%);
  border:1.5px solid rgba(31,159,178,.4);
  box-shadow:0 10px 30px rgba(23,135,154,.25),inset 0 0 26px rgba(255,255,255,.5);
  animation:cvblob 9s ease-in-out infinite,cvdivideA 12s var(--ease) infinite}
.cv-cell--twin{animation:cvblob 9s .4s ease-in-out infinite,cvdivideB 12s var(--ease) infinite;
  filter:saturate(1.25) hue-rotate(36deg)}
@keyframes cvblob{
  0%,100%{border-radius:46% 54% 52% 48%/47% 46% 54% 53%}
  25%{border-radius:56% 44% 47% 53%/44% 57% 43% 56%}
  50%{border-radius:48% 52% 56% 44%/53% 46% 54% 47%}
  75%{border-radius:53% 47% 44% 56%/48% 55% 45% 52%}
}
@keyframes cvdivideA{
  0%,54%{transform:translateX(0) scale(1)}
  64%{transform:translateX(-8%) scale(.94,1.05)}
  74%,88%{transform:translateX(-17%) scale(.85)}
  100%{transform:translateX(0) scale(1)}
}
@keyframes cvdivideB{
  0%,54%{transform:translateX(0) scale(.96);opacity:0}
  64%{transform:translateX(10%) scale(.9,1.04);opacity:.65}
  74%,88%{transform:translateX(22%) scale(.8);opacity:.95}
  100%{transform:translateX(0) scale(.96);opacity:0}
}
.cv-nucleus{position:absolute;left:50%;top:50%;width:34%;height:34%;translate:-50% -50%;border-radius:50%;
  background:radial-gradient(circle at 38% 34%,#b9f0ee,#3aa8b8 58%,#176d80);
  box-shadow:0 0 18px rgba(31,159,178,.55),inset 0 2px 6px rgba(255,255,255,.5);
  animation:cvpulse 3.4s ease-in-out infinite}
@keyframes cvpulse{0%,100%{scale:1;filter:brightness(1)}50%{scale:1.14;filter:brightness(1.18)}}
.cv-orbit{position:absolute;inset:-4px;animation:spin 17s linear infinite}
.cv-orbit i{position:absolute;width:9px;height:9px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff,#5fd6e0 70%);
  box-shadow:0 0 10px rgba(95,214,224,.8)}
.cv-orbit i:nth-child(1){left:50%;top:-4px}
.cv-orbit i:nth-child(2){left:6%;bottom:16%;width:7px;height:7px}
.cv-orbit i:nth-child(3){right:3%;top:38%;width:6px;height:6px}
.cv-vesicle{position:absolute;border-radius:50%;background:rgba(255,255,255,.65);
  animation:cvves 5.5s ease-in-out infinite}
.cv-vesicle--1{width:10px;height:10px;left:24%;top:28%}
.cv-vesicle--2{width:7px;height:7px;right:26%;bottom:24%;animation-delay:2.2s}
@keyframes cvves{0%,100%{transform:translate(0,0);opacity:.65}50%{transform:translate(6px,-8px);opacity:1}}
.cv-spark{position:absolute;border-radius:50%;background:#8fdbe6;opacity:0;
  animation:cvspark 6s ease-in-out infinite;animation-delay:var(--dl,0s)}
.cv-spark--1{width:5px;height:5px;left:-4px;top:34%;--dl:.4s}
.cv-spark--2{width:4px;height:4px;right:-6px;top:22%;--dl:1.8s}
.cv-spark--3{width:6px;height:6px;left:16%;bottom:-4px;--dl:3s}
.cv-spark--4{width:4px;height:4px;right:10%;bottom:6%;--dl:4.2s}
.cv-spark--5{width:5px;height:5px;left:44%;top:-8px;--dl:2.4s}
@keyframes cvspark{
  0%,100%{transform:translateY(6px) scale(.6);opacity:0}
  40%{transform:translateY(-8px) scale(1);opacity:.9}
  70%{transform:translateY(-16px) scale(.8);opacity:.3}
}
.cellviz__cap{margin-top:16px;font-size:11.6px;font-weight:700;color:var(--teal-700);line-height:1.5}
.cellviz__cap span{font-weight:400;font-size:10.6px;color:var(--muted)}

.progrid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.pcard{background:var(--card);border-radius:14px;padding:16px 15px 18px;border:1px solid #e8eff7;
  box-shadow:var(--shadow-1);display:flex;flex-direction:column;
  position:relative;overflow:hidden;isolation:isolate;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s;
  will-change:transform}
.pcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;
  background:linear-gradient(180deg,var(--tint,#eef7f9),#fff 62%);
  transition:opacity .45s var(--ease)}
.pcard::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:var(--accent,var(--teal-500));
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease)}
.pcard:hover{transform:translateY(-9px);box-shadow:var(--shadow-3);border-color:transparent}
.pcard:hover::before{opacity:1}
.pcard:hover::after{transform:scaleX(1)}
.pcard__img{border-radius:11px;overflow:hidden;margin-bottom:14px;background:#f6fafc;aspect-ratio:1/1}
.pcard__img img{width:100%;height:100%;object-fit:cover;
  transition:transform .6s var(--ease);will-change:transform}
.pcard:hover .pcard__img img{transform:scale(1.08) rotate(-1.5deg)}
.pcard h3{font-size:14.5px;line-height:1.32;margin-bottom:9px;color:var(--accent,var(--teal-600))}
.pcard p{font-size:11.6px;color:var(--muted);line-height:1.6;flex:1;margin-bottom:14px}
.more{display:inline-flex;align-items:center;gap:6px;font-size:11.4px;font-weight:600;
  color:var(--accent,var(--teal-600));transition:gap .3s var(--ease)}
.more:hover{gap:11px}
.c-teal{--accent:#1a7f96;--tint:#e8f6f8}
.c-red{--accent:#c53f5c;--tint:#fdeef1}
.c-blue{--accent:#2563b0;--tint:#eaf2fc}
.c-amber{--accent:#c98a2b;--tint:#fdf5e6}
.c-violet{--accent:#6d40b8;--tint:#f2ecfc}
.c-pink{--accent:#d13f7e;--tint:#fdecf3}

/* ============================================================
   ABOUT
   ============================================================ */
.about{position:relative;display:grid;grid-template-columns:36% 1fr;background:var(--teal-850);
  overflow:hidden}
.about__photo{position:relative;min-height:330px;overflow:hidden}
.about__photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  transform:scale(1.12);transition:transform 1.3s var(--ease-out),opacity 1s;opacity:0;will-change:transform}
.about__photo.in img{transform:none;opacity:1}
.about__photo::after{content:"";position:absolute;inset:0;
  background:linear-gradient(90deg,transparent 60%,rgba(7,51,62,.85) 100%)}
.about__panel{background:linear-gradient(115deg,var(--teal-850),#0a3d4b 55%,#0d4a58);
  padding:56px 0 56px 52px;position:relative;overflow:hidden}
.about__panel::before{content:"";position:absolute;right:-90px;top:-90px;width:320px;height:320px;
  border-radius:50%;background:radial-gradient(circle,rgba(95,214,224,.16),transparent 68%);
  animation:floaty 14s ease-in-out infinite}
.about__grid{display:grid;grid-template-columns:1fr 300px;gap:44px;align-items:center;
  width:min(100%,calc(var(--wrap) * .78));padding-right:24px}
.eyebrow--light{color:var(--cyan-200)}
.about__copy h2{font-size:clamp(28px,3vw,40px);color:#fff;margin-bottom:18px}
.about__copy h2 em{font-style:normal;color:var(--cyan-300)}
.about__lead{color:#a8c9d2;font-size:13px;line-height:1.75;margin-bottom:20px;max-width:430px}
.ticks{display:grid;gap:9px;margin-bottom:24px}
.ticks li{display:flex;align-items:center;gap:10px;color:#d5e9ee;font-size:12.6px}
.tick{width:17px;height:17px;border-radius:4px;background:var(--teal-400);display:grid;place-items:center;
  flex:none;color:#fff;transition:transform .35s var(--ease)}
.tick .ic{width:11px;height:11px;stroke-width:2.8}
.ticks li:hover .tick{transform:rotate(-8deg) scale(1.15)}
.mvv{display:grid;gap:11px}
.mvv__card{background:rgba(255,255,255,.97);border-radius:11px;padding:14px 15px;display:flex;gap:12px;
  box-shadow:0 8px 26px rgba(0,0,0,.18);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.mvv__card:hover{transform:translateX(-7px);box-shadow:0 14px 36px rgba(0,0,0,.26)}
.mvv__ic{width:32px;height:32px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#e8f6f8,#dff0f4);color:var(--teal-600);
  transition:transform .4s var(--ease)}
.mvv__card:hover .mvv__ic{transform:rotate(-8deg) scale(1.08)}
.mvv__card h3{font-size:13.5px;color:var(--teal-700);margin-bottom:3px}
.mvv__card p{font-size:10.8px;color:var(--muted);line-height:1.55}

/* ============================================================
   RESEARCH
   ============================================================ */
.research{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,var(--ink-950) 0%,var(--ink-900) 34%,#1b1748 62%,#2a1f63 100%);
  padding:58px 0}
.research__art{position:absolute;right:0;top:50%;translate:0 -50%;width:38%;height:118%;object-fit:cover;
  z-index:-1;opacity:.9;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 42%);
  mask-image:linear-gradient(90deg,transparent,#000 42%);
  animation:floaty 13s ease-in-out infinite;will-change:transform}
.research__glow{position:absolute;right:6%;top:50%;translate:0 -50%;width:420px;height:420px;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(151,88,214,.4),transparent 66%);
  animation:breathe 7s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:translate(0,-50%) scale(1);opacity:.75}50%{transform:translate(0,-50%) scale(1.16);opacity:1}}
.research__in{display:grid;grid-template-columns:minmax(0,330px) 1fr;gap:32px;align-items:center;position:relative}
.kicker{font-size:11.4px;color:#b4a8e6;letter-spacing:.7px;margin-bottom:9px}
.research__copy h2{font-size:clamp(24px,2.5vw,32px);color:#fff;margin-bottom:13px;line-height:1.24}
.research__copy>p{font-size:12.4px;color:#a9a3c9;line-height:1.7;margin-bottom:20px;max-width:330px}
.rtiles{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;max-width:640px}
.rtiles li{background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.1);border-radius:13px;
  padding:20px 12px;display:flex;flex-direction:column;align-items:center;gap:5px;color:#fff;
  text-align:center;backdrop-filter:blur(6px);
  transition:transform .42s var(--ease),background-color .42s,border-color .42s}
.rtiles li:hover{transform:translateY(-7px);background:rgba(255,255,255,.1);border-color:rgba(180,168,230,.5)}
.rtiles .ic{color:#cfc4f5;margin-bottom:4px;transition:transform .42s var(--ease)}
.rtiles li:hover .ic{transform:scale(1.14) rotate(-6deg)}
.rtiles b{font-family:var(--f-sans);font-size:24px;font-weight:700;line-height:1.15;letter-spacing:-.4px}
.rtiles span{font-size:10.4px;color:#b6b0d4;line-height:1.4}

/* ============================================================
   CAPABILITIES
   ============================================================ */
.caps{background:var(--page-2);padding:56px 0}
.caps__in{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center}
.caps__title{font-size:22px;color:var(--teal-900);line-height:1.3}
.caps__list{display:grid;grid-template-columns:repeat(7,1fr);gap:11px}
.caps__list li{background:#fff;border:1px solid #e6eef6;border-radius:12px;padding:16px 11px;
  display:flex;flex-direction:column;align-items:center;gap:9px;text-align:center;
  font-size:10.6px;color:var(--ink);line-height:1.42;box-shadow:var(--shadow-1);
  transition:transform .42s var(--ease),box-shadow .42s var(--ease),border-color .42s}
.caps__list li:hover{transform:translateY(-7px);box-shadow:var(--shadow-2);border-color:var(--teal-400)}
.caps__list .ic{color:var(--teal-500);transition:transform .45s var(--ease),color .3s}
.caps__list li:hover .ic{transform:scale(1.16) rotate(-7deg);color:var(--teal-400)}

/* ============================================================
   MID BLOCKS — Innovating / Journey / News+Patients
   ============================================================ */
.midblocks{background:var(--page-2);padding:26px 0 64px;display:grid;gap:26px}
.midblocks .wrap{display:grid;gap:26px}

/* --- Innovating Today card --- */
.inno{position:relative;overflow:hidden;isolation:isolate;border-radius:22px;
  background:#191743;padding:38px 36px;
  display:grid;grid-template-columns:250px 1fr;gap:34px;align-items:center;
  box-shadow:0 24px 60px rgba(25,23,67,.35)}
.inno::before{content:"";position:absolute;left:-140px;top:-160px;width:460px;height:460px;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(122,92,230,.55),transparent 66%);
  animation:breathe 9s ease-in-out infinite}
.inno::after{content:"";position:absolute;right:-120px;bottom:-180px;width:420px;height:420px;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(64,56,160,.5),transparent 66%)}
.inno__copy h2{font-size:clamp(22px,2.2vw,28px);color:#fff;margin-bottom:14px;line-height:1.3;
  font-weight:600;font-family:var(--f-serif)}
.inno__copy p{font-size:12.4px;color:#b9b4dd;line-height:1.7;margin-bottom:22px;max-width:250px}
.btn--grad{background:linear-gradient(90deg,#9b3fd8,#6a52d8 45%,#2fc0ae);color:#fff;
  padding:9px 9px 9px 22px;box-shadow:0 10px 28px rgba(105,66,200,.45)}
.btn--grad:hover{box-shadow:0 16px 36px rgba(105,66,200,.6)}
.btn__cir{width:26px;height:26px;border-radius:50%;background:#fff;color:#1c8f80;
  display:grid;place-items:center;flex:none;transition:transform .35s var(--ease)}
.btn--grad:hover .btn__cir{transform:translateX(3px)}
.btn--grad:hover .ic{transform:none}
.inno__cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.inno__card{border-radius:16px;overflow:hidden;background:#071d29;border:1px solid rgba(255,255,255,.1);
  transition:transform .45s var(--ease),box-shadow .45s var(--ease);will-change:transform}
.inno__card:hover{transform:translateY(-8px);box-shadow:0 18px 44px rgba(0,0,0,.45)}
.inno__card img{width:100%;aspect-ratio:163/100;object-fit:cover;display:block;
  transition:transform .65s var(--ease)}
.inno__card:hover img{transform:scale(1.07)}
.inno__stat{padding:14px 16px 16px;color:#fff;position:relative;
  background:linear-gradient(180deg,rgba(7,29,41,0) 0%,#071d29 26%)}
.inno__stat::before{content:"";position:absolute;left:0;right:0;top:-34px;height:34px;
  background:linear-gradient(180deg,rgba(7,29,41,0),rgba(7,29,41,.85));pointer-events:none}
.inno__stat b{display:block;font-size:23px;font-weight:700;letter-spacing:-.4px;margin-bottom:3px}
.inno__stat span{font-size:11.4px;color:#cfe0e8;line-height:1.45}

/* --- Your Journey with Us --- */
.path{border-radius:22px;padding:30px 34px 34px;
  background:linear-gradient(90deg,#fbe3f0 0%,#e7edfb 46%,#cff1f1 100%);
  box-shadow:var(--shadow-2)}
.path__title{text-align:center;font-size:21px;color:#2a2550;margin-bottom:26px;
  display:flex;align-items:center;justify-content:center;gap:16px}
.path__title::before,.path__title::after{content:"";height:1px;width:88px;flex:none;
  background:linear-gradient(90deg,transparent,#9a90c0)}
.path__title::after{background:linear-gradient(90deg,#9a90c0,transparent)}
.path__steps{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;counter-reset:step}
.path__steps li{text-align:center;position:relative;padding:0 6px}
.path__steps li:not(:last-child)::after{content:"";position:absolute;top:26px;left:calc(50% + 40px);
  width:calc(100% - 80px);height:10px;pointer-events:none;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 10' preserveAspectRatio='none'%3E%3Cpath d='M0 5h112m0 0-6-4m6 4-6 4' stroke='%237a7396' stroke-width='1.3' fill='none'/%3E%3C/svg%3E") center/100% 100% no-repeat}
.path__ic{width:54px;height:54px;border-radius:50%;display:grid;place-items:center;margin:0 auto 12px;
  background:#fff;box-shadow:0 6px 18px rgba(60,50,110,.16);position:relative;
  transition:transform .4s var(--ease),box-shadow .4s var(--ease)}
.path__ic::after{content:"";position:absolute;inset:-5px;border-radius:50%;
  border:1.5px dashed rgba(122,115,150,.4);opacity:0;transition:opacity .35s;
  animation:spin 16s linear infinite}
.path__steps li:hover .path__ic{transform:translateY(-6px) scale(1.07);box-shadow:0 12px 26px rgba(60,50,110,.24)}
.path__steps li:hover .path__ic::after{opacity:1}
.path__ic .ic{width:22px;height:22px}
.pc-1{color:#e8734d}.pc-2{color:#e0559d}.pc-3{color:#4f7ed8}.pc-4{color:#3d9e72}.pc-5{color:#7d5bd0}
.path__steps h3{font-size:13px;color:#241f45;font-family:var(--f-sans);font-weight:700;margin-bottom:5px}
.path__steps p{font-size:10.8px;color:#6d6890;line-height:1.5;max-width:150px;margin-inline:auto}

/* --- News + Patients row --- */
.newsrow{display:grid;grid-template-columns:1fr 1.55fr;gap:26px;align-items:stretch}
.newscard{background:#fff;border-radius:18px;padding:22px 22px 24px;box-shadow:var(--shadow-2);
  border:1px solid #e8eff7}
.newscard__head{display:flex;align-items:center;justify-content:space-between;gap:14px;margin-bottom:16px}
.newscard__head h2{font-size:17.5px;color:#22204c}
.newslist{display:grid}
.newslist li{display:flex;gap:13px;align-items:center;padding:11px 6px;border-radius:12px;
  transition:background-color .3s,transform .35s var(--ease)}
.newslist li+li{border-top:1px solid #eef2f8}
.newslist li:hover{background:#f4f8fc;transform:translateX(5px)}
.newslist img{width:52px;height:52px;border-radius:10px;object-fit:cover;flex:none;
  transition:transform .38s var(--ease)}
.newslist li:hover img{transform:scale(1.08) rotate(-2deg)}
.newslist h3{font-size:12.4px;font-family:var(--f-sans);font-weight:600;color:#1e2c48;
  line-height:1.42;margin-bottom:3px}
.newslist p{font-size:10.6px;color:#66748a}

.patcard{position:relative;overflow:hidden;isolation:isolate;border-radius:18px;
  background:linear-gradient(115deg,#5ea9c4 0%,#76c0d4 48%,#9bd1e6 100%);
  box-shadow:var(--shadow-2);min-height:330px;display:flex}
.patcard::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.35;
  background:radial-gradient(circle at 20% 90%,rgba(255,255,255,.5),transparent 45%)}
.patcard__pic{position:absolute;right:0;bottom:0;height:100%;width:auto;max-width:46%;
  object-fit:cover;object-position:top center;z-index:0;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 26%);
  mask-image:linear-gradient(90deg,transparent,#000 26%)}
.patcard__body{position:relative;z-index:1;padding:30px 34px;max-width:60%;
  display:flex;flex-direction:column}
.patcard__body h2{font-size:19px;color:#fff;margin-bottom:16px;display:flex;align-items:flex-start;gap:14px;
  text-shadow:0 1px 8px rgba(20,60,80,.25)}
.patcard__q{width:34px;height:34px;color:rgba(255,255,255,.55);flex:none;margin-left:6px}
.patcard__stage{position:relative;flex:1;min-height:150px}
.patcard__item{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none;
  display:flex;flex-direction:column}
.patcard__item.is-on{opacity:1;transform:none;pointer-events:auto}
.patcard__item p{font-size:13.2px;color:#fff;line-height:1.8;margin-bottom:18px;max-width:400px;
  text-shadow:0 1px 6px rgba(20,60,80,.22)}
.patcard__item footer{display:flex;align-items:center;gap:11px;margin-top:auto}
.patcard__item footer img{width:38px;height:38px;border-radius:50%;object-fit:cover;
  border:2px solid rgba(255,255,255,.75)}
.patcard__item cite{font-style:normal;font-size:12.6px;color:#fff;font-weight:700;line-height:1.4}
.patcard__item cite span{display:block;font-weight:400;font-size:10.8px;color:#e3f2f8}
.patcard__nav{display:flex;align-items:center;gap:14px;margin-top:16px}
.patcard__arr{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;color:#fff;
  background:rgba(255,255,255,.22);backdrop-filter:blur(3px);
  transition:background-color .3s,transform .3s var(--ease)}
.patcard__arr:hover{background:rgba(255,255,255,.4);transform:scale(1.1)}
.dots--pat button{background:rgba(255,255,255,.45)}
.dots--pat button.is-on{background:#fff}

/* ============================================================
   FACULTY
   ============================================================ */
.faculty{background:var(--page-2);padding:12px 0 66px}
.faculty__head{display:flex;align-items:center;justify-content:space-between;gap:20px;
  padding-bottom:16px;margin-bottom:22px;border-bottom:1px solid var(--line)}
.faculty__head h2{font-size:25px;color:var(--teal-900)}
.facgrid{display:grid;grid-template-columns:repeat(6,1fr);gap:13px}
.fcard{background:#fff;border:1px solid #e8eff7;border-radius:13px;padding:0 0 16px;overflow:hidden;
  text-align:center;box-shadow:var(--shadow-1);position:relative;
  transition:transform .45s var(--ease),box-shadow .45s var(--ease)}
.fcard::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--teal-500),var(--cyan-300));
  transform:scaleX(0);transition:transform .45s var(--ease)}
.fcard:hover{transform:translateY(-9px);box-shadow:var(--shadow-3)}
.fcard:hover::after,.fcard.is-active::after{transform:scaleX(1)}
.fcard__img{overflow:hidden;background:#f4f9fc;aspect-ratio:1/1}
.fcard__img img{width:100%;height:100%;object-fit:cover;object-position:center 32%;
  transition:transform .6s var(--ease);will-change:transform}
.fcard:hover .fcard__img img{transform:scale(1.09)}
.fcard h3{font-size:13.5px;color:var(--teal-800);margin:14px 0 4px}
.fcard p{font-size:10.4px;color:var(--muted);line-height:1.5;margin-bottom:11px;padding:0 8px}
.fcard__soc{display:flex;justify-content:center;gap:7px;margin-bottom:13px}
.fcard__soc a{width:24px;height:24px;border-radius:6px;display:grid;place-items:center;
  background:#f1f7fb;color:var(--teal-600);
  transition:transform .3s var(--ease),background-color .3s,color .3s}
.fcard__soc .ic{width:12px;height:12px}
.fcard__soc a:hover{background:var(--teal-500);color:#fff;transform:translateY(-3px)}

/* ============================================================
   PANELS
   ============================================================ */
.panels{display:grid;grid-template-columns:1fr 1.1fr 1fr}
.panel{padding:30px 34px 34px;position:relative;overflow:hidden}
.panel h2{font-size:19px;color:#fff;margin-bottom:20px}
.panel--pubs{background:linear-gradient(160deg,var(--navy-950),#0d2149)}
.panel--events{background:linear-gradient(160deg,#0f1d43,var(--navy-700));
  border-left:1px solid rgba(255,255,255,.09);border-right:1px solid rgba(255,255,255,.09)}
.panel--testi{background:linear-gradient(140deg,var(--rose-950),var(--rose-800) 70%,#9a3a4e);
  display:flex;flex-direction:column}
.panel__btn{margin-top:20px}

.publist{display:grid;gap:11px}
.publist li{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;
  transition:transform .38s var(--ease),background-color .38s}
.publist li:hover{transform:translateX(6px);background:rgba(255,255,255,.1)}
.thumb{width:40px;height:40px;border-radius:8px;flex:none;display:grid;place-items:center;
  background:linear-gradient(140deg,#1c4b8c,#2b7fb5);color:#cfe9f7;
  transition:transform .38s var(--ease)}
.publist li:hover .thumb{transform:rotate(-7deg) scale(1.07)}
.publist h3{font-size:12px;color:#fff;line-height:1.38;margin-bottom:3px;font-family:var(--f-sans);font-weight:600}
.publist p{font-size:10px;color:#8fa8ca}

.evlist{display:grid;gap:11px}
.evlist li{display:flex;gap:12px;align-items:center;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.07);border-radius:10px;padding:10px 12px;
  transition:transform .38s var(--ease),background-color .38s}
.evlist li:hover{transform:translateX(6px);background:rgba(255,255,255,.1)}
.evlist li>div{flex:1;min-width:0}
.date{width:40px;flex:none;text-align:center;color:#fff;line-height:1;
  transition:transform .38s var(--ease)}
.evlist li:hover .date{transform:scale(1.1)}
.date b{display:block;font-family:var(--f-sans);font-size:19px;font-weight:700;letter-spacing:-.3px}
.date i{display:block;font-style:normal;font-size:8.6px;letter-spacing:1.3px;color:#8fa8ca;margin-top:2px}
.evlist h3{font-size:11.6px;color:#fff;line-height:1.38;margin-bottom:3px;font-family:var(--f-sans);font-weight:600}
.evlist p{font-size:9.8px;color:#8fa8ca}

.testi{flex:1;position:relative;padding-right:120px}
.testi__q{width:34px;height:34px;color:rgba(255,255,255,.3);margin-bottom:8px}
.testi__stage{position:relative;min-height:132px}
.testi__item{margin:0;position:absolute;inset:0;opacity:0;transform:translateY(14px);
  transition:opacity .55s var(--ease),transform .55s var(--ease);pointer-events:none}
.testi__item.is-on{opacity:1;transform:none;pointer-events:auto}
.testi__item p{font-size:12.6px;color:#f4dde3;line-height:1.78;font-style:italic;margin-bottom:14px}
.testi__item cite{font-style:normal;font-size:11.6px;color:#fff;font-weight:600}
.dots{display:flex;gap:7px;margin-top:6px}
.dots button{width:7px;height:7px;border-radius:999px;background:rgba(255,255,255,.35);padding:0;
  transition:width .35s var(--ease),background-color .35s}
.dots button.is-on{width:20px;background:#fff}
.testi__pic{position:absolute;right:26px;bottom:34px;width:104px;height:104px;border-radius:50%;
  object-fit:cover;border:3px solid rgba(255,255,255,.6);box-shadow:0 12px 30px rgba(0,0,0,.3);
  animation:floaty 8s ease-in-out infinite}

/* ============================================================
   CTA
   ============================================================ */
.cta{position:relative;overflow:hidden;isolation:isolate;
  background:linear-gradient(100deg,#0b5a67 0%,#12707c 40%,#1a8391 70%,#0f6270 100%);
  padding:46px 0}
.cta__art{position:absolute;right:0;top:0;height:100%;width:34%;object-fit:cover;z-index:-1;opacity:.92;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 46%);
  mask-image:linear-gradient(90deg,transparent,#000 46%);
  animation:floaty 12s ease-in-out infinite}
.cta::before{content:"";position:absolute;left:-100px;bottom:-140px;width:400px;height:400px;z-index:-1;
  border-radius:50%;background:radial-gradient(circle,rgba(95,214,224,.2),transparent 68%);
  animation:drift1 20s ease-in-out infinite}
.cta__in{display:grid;grid-template-columns:1fr 1.15fr;gap:44px;align-items:center;
  max-width:min(100% - 40px,1140px)}
.cta__copy h2{font-size:clamp(24px,2.6vw,32px);color:#fff;margin-bottom:12px;line-height:1.26}
.cta__copy>p{font-size:12.6px;color:#c5e6ea;line-height:1.7;margin-bottom:22px;max-width:340px}
.cta__contact{display:grid;gap:12px}
.cta__contact li{display:flex;align-items:center;gap:12px;color:#fff;font-size:14px;font-weight:500}
.cta__contact a{transition:color .25s}
.cta__contact a:hover{color:var(--cyan-200)}
.cta__ic{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;flex:none;
  background:rgba(255,255,255,.16);color:#fff;transition:transform .35s var(--ease),background-color .3s}
.cta__contact li:hover .cta__ic{transform:scale(1.12) rotate(-8deg);background:rgba(255,255,255,.3)}

.inquiry{background:#fff;border-radius:14px;padding:24px 26px 26px;box-shadow:var(--shadow-3)}
.inquiry h3{font-size:16px;color:var(--teal-800);margin-bottom:16px}
.inquiry__row{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:14px}
.inquiry label{display:block}
.inquiry input,.inquiry textarea{width:100%;border:0;border-bottom:1px solid #dde7ef;background:transparent;
  padding:9px 2px;font-size:12.4px;transition:border-color .3s,box-shadow .3s}
.inquiry textarea{border:1px solid #dde7ef;border-radius:9px;padding:11px;resize:vertical;
  font-family:var(--f-sans)}
.inquiry input::placeholder,.inquiry textarea::placeholder{color:#9fb0c0}
.inquiry input:focus,.inquiry textarea:focus{outline:0;border-color:var(--teal-400);
  box-shadow:0 2px 0 0 rgba(31,159,178,.25)}
.inquiry textarea:focus{box-shadow:0 0 0 3px rgba(31,159,178,.14)}
.inquiry__msg{margin-bottom:18px;display:block}
.inquiry__send{width:auto;margin-inline:auto;display:flex}
.inquiry__ok{margin-top:12px;text-align:center;font-size:12px;color:#17879a;font-weight:600}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer{background:linear-gradient(160deg,#04203a,#062b47 60%,#052236);color:#a9c2d6;
  padding-top:42px;font-size:11.8px}
.foot__grid{display:grid;grid-template-columns:1.35fr .8fr .9fr .9fr 1.05fr 1.05fr;gap:26px;
  padding-bottom:34px}
.logo--foot{animation:none}
.logo--foot .logo__name{color:#fff;font-size:21px;background:none;
  -webkit-text-fill-color:currentColor;animation:none}
.logo--foot .logo__sub{color:#8fb0c6}
.logo--foot .logo__svg{width:40px;height:40px}
.logo--foot .lg-ring{stroke:#7fd6a8;animation:none;stroke-dashoffset:0}
.logo--foot .lg-stem{animation:none;stroke-dashoffset:0;stroke:#7fd6a8}
.logo--foot .lg-l,.logo--foot .lg-seed{animation:none;opacity:1}
.foot__brand>p{margin:14px 0 16px;line-height:1.65;max-width:250px;color:#8fb0c6}
.socials--foot{gap:9px}
.socials--foot a{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;
  background:rgba(255,255,255,.09);color:#cfe2ee;
  transition:transform .32s var(--ease),background-color .32s,color .32s}
.socials--foot .ic{width:13px;height:13px}
.socials--foot a:hover{background:var(--teal-500);color:#fff;transform:translateY(-3px) scale(1.08)}
.foot__col h3{font-size:13px;color:#fff;margin-bottom:14px;font-family:var(--f-sans);font-weight:600}
.foot__col a{display:block;padding:4px 0;color:#a9c2d6;transition:color .25s,transform .25s}
.foot__col nav a,.foot__col>a{padding:4px 0}
.foot__col a:hover{color:#fff;transform:translateX(4px)}
.foot__addr{display:flex;gap:9px;margin-bottom:10px;line-height:1.6;color:#a9c2d6}
.foot__addr .ic{width:14px;height:14px;flex:none;margin-top:2px;color:var(--cyan-300)}
.foot__addr a{display:inline;padding:0}
.foot__news>p{margin-bottom:12px;color:#8fb0c6}
.news{display:flex;background:#fff;border-radius:7px;overflow:hidden;padding:3px}
.news label{flex:1;min-width:0}
.news input{width:100%;border:0;outline:0;padding:9px 11px;font-size:11.6px;background:transparent;color:#12263a}
.news button{width:34px;border-radius:5px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--teal-500),var(--teal-400));flex:none;
  transition:transform .3s var(--ease)}
.news button:hover{transform:scale(1.06)}
.news button .ic{width:15px;height:15px}
.news__ok{margin-top:9px;color:var(--cyan-300);font-weight:600}
.foot__bottom{border-top:1px solid rgba(255,255,255,.09);padding:15px 0;font-size:11px}
.foot__bottom-in{display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap}
.foot__bottom nav{display:flex;gap:22px}
.foot__bottom a{transition:color .25s}
.foot__bottom a:hover{color:#fff}

/* back to top */
.totop{position:fixed;right:22px;bottom:22px;z-index:120;width:44px;height:44px;border-radius:50%;
  display:grid;place-items:center;color:#fff;
  background:linear-gradient(140deg,var(--teal-600),var(--teal-400));
  box-shadow:0 10px 26px rgba(14,85,96,.4);
  opacity:0;visibility:hidden;transform:translateY(16px) scale(.9);
  transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s}
.totop.show{opacity:1;visibility:visible;transform:none}
.totop:hover{transform:translateY(-3px) scale(1.06)}

/* ============================================================
   SCROLL REVEAL — creative variants per component
   ============================================================ */
/* Scoped to body.js (set synchronously by main.js) so that if the script is
   blocked or throws, content stays visible instead of being stuck at opacity 0. */
body.js [data-reveal]{opacity:0;transform:translateY(34px) scale(.97);filter:blur(8px);
  transition:opacity .85s var(--ease-out),transform .85s var(--ease-out),filter .7s var(--ease-out);
  transition-delay:var(--d,0ms);will-change:transform,opacity}
/* sweeps from the sides */
.mvv__card[data-reveal]{transform:translateX(74px)}
.newscard[data-reveal]{transform:translateX(-70px) scale(.98)}
.patcard[data-reveal]{transform:translateX(70px) scale(.98)}
.publist li[data-reveal]{transform:translateX(-48px)}
.evlist li[data-reveal]{transform:translateX(48px)}
/* bouncy pops */
.caps__list li[data-reveal],.path__steps li[data-reveal],
.statsbar__in li[data-reveal],.inno__card[data-reveal]{
  transform:scale(.55) translateY(14px);
  transition-timing-function:cubic-bezier(.34,1.56,.64,1)}
/* 3D card tilts */
.pcard[data-reveal]{transform:perspective(900px) rotateX(14deg) translateY(44px)}
.fcard[data-reveal]{transform:perspective(900px) rotateX(18deg) translateY(46px)}
/* landed state — .in.in raises specificity above the per-component variants
   above, which carry an element selector (e.g. `.publist li[data-reveal]`). */
[data-reveal].in.in{opacity:1;transform:none;filter:blur(0);will-change:auto}
.about__photo[data-reveal]{opacity:1;transform:none;filter:none}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1240px){
  .nav__list>li>a{padding:11px 11px;font-size:12px}
  .inno{grid-template-columns:1fr;gap:26px}
  .inno__copy p{max-width:460px}
  .progrid{grid-template-columns:repeat(3,1fr)}
  .programs__in{grid-template-columns:1fr;gap:24px}
  .programs__head{display:flex;align-items:center;gap:28px;flex-wrap:wrap}
  .programs__head .marker{width:100%}
  .cellviz{margin-top:0;display:flex;align-items:center;gap:18px}
  .cellviz__field{width:130px;height:130px;flex:none}
  .facgrid{grid-template-columns:repeat(3,1fr)}
  .caps__list{grid-template-columns:repeat(4,1fr)}
  .caps__in{grid-template-columns:1fr;gap:22px}
  .research__in{grid-template-columns:1fr}
  .rtiles{max-width:none}
  .about__grid{grid-template-columns:1fr;gap:28px}
  .mvv{grid-template-columns:repeat(3,1fr);display:grid}
}
@media (max-width:1080px){
  .nav__list,.nav__cta{display:none}
  .nav__burger{display:grid;background:rgba(255,255,255,.1)}
  .nav{justify-content:flex-start;gap:8px;padding:7px;width:auto}
  .nav__search{margin-left:auto;background:rgba(255,255,255,.08)}
  .hero__stage{min-height:392px}
  .hero__nav{position:static;justify-content:flex-start;margin-top:22px}
  .statsbar__in{grid-template-columns:repeat(3,1fr);gap:26px 0;border-radius:0}
  .statsbar__in li:nth-child(3n+1)::before{display:none}
  .statsbar__in b{font-size:31px}
  .statsbar__in li>span{font-size:12.2px}
  .statsbar__in .ic{width:36px;height:36px}
  .panels{grid-template-columns:1fr 1fr}
  .panel--testi{grid-column:1/-1}
  .newsrow{grid-template-columns:1fr}
  .path__steps{grid-template-columns:repeat(3,1fr);gap:22px 8px}
  .path__steps li:nth-child(3n)::after,.path__steps li:nth-child(4)::after{display:none}
  .cta__in{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:860px){
  .topbar__facts li:nth-child(n+3){display:none}
  .about{grid-template-columns:1fr}
  .about__photo{min-height:250px}
  .about__photo::after{background:linear-gradient(180deg,transparent 55%,rgba(7,51,62,.9) 100%)}
  .about__panel{padding:40px 20px}
  .about__grid{width:100%;padding-right:0}
  .mvv{grid-template-columns:1fr}
  .hero__slides{width:100%;opacity:.32;
    -webkit-mask-image:linear-gradient(180deg,transparent,#000 60%);
    mask-image:linear-gradient(180deg,transparent,#000 60%)}
  .hero{min-height:auto}
  .hero__in{padding:46px 0 46px}
  .hero__stage{min-height:400px}
  .hero__h1{font-size:clamp(27px,7.4vw,34px)}
  .hero__p br{display:none}
  .hero__h1 .line{display:inline;overflow:visible;padding-bottom:0;margin-bottom:0}
  .hero__h1 .line::after{content:" "}
  .lin{display:inline;transform:none;transition:none}
  .hslide .hero__h1{opacity:0;transform:translateY(22px);
    transition:opacity .7s var(--ease-out) .14s,transform .7s var(--ease-out) .14s}
  .hslide.is-on .hero__h1{opacity:1;transform:none}
  .trust{margin-top:6px}
  .corb{display:none}
  .progrid,.facgrid{grid-template-columns:repeat(2,1fr)}
  .caps__list{grid-template-columns:repeat(2,1fr)}
  .inno__cards{grid-template-columns:1fr}
  .path__steps{grid-template-columns:repeat(2,1fr)}
  .path__steps li::after{display:none!important}
  .patcard__pic{opacity:.3;max-width:70%}
  .patcard__body{max-width:100%}
  .rtiles{grid-template-columns:repeat(2,1fr)}
  .panels{grid-template-columns:1fr}
  .testi{padding-right:0}
  .testi__pic{position:relative;right:auto;bottom:auto;margin:18px 0 0}
  .inquiry__row{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:600px){
  /* let these grid items shrink to the track instead of forcing the page wider */
  .midblocks .wrap>*{min-width:0}
  .path__steps li{min-width:0}
  .topbar__facts{display:none}
  .topbar__in{justify-content:center;justify-content:safe center}
  .topbar__right{gap:12px}
  .topbar__lnk{font-size:10.6px}
  .statsbar__in{grid-template-columns:repeat(2,1fr);padding:26px 14px;gap:24px 0}
  .statsbar__in li::before{display:none!important}
  .statsbar__in b{font-size:28px}
  .statsbar__in li>span{font-size:11.6px}
  .statsbar__in .ic{width:32px;height:32px}
  .progrid,.facgrid,.caps__list,.rtiles{grid-template-columns:1fr}
  .foot__grid{grid-template-columns:1fr;gap:22px}
  .sect{padding:48px 0}
  .panel{padding:26px 20px}
  .foot__bottom-in{flex-direction:column;text-align:center}
}

/* Animations are part of this site's brand experience and run regardless
   of the OS reduced-motion setting (site-owner requirement). */

/* ============ AISRM LOGO IMAGE (v18) ============ */
.logo__img{height:100px;width:auto;max-width:none;display:block}
.logo--foot .logo__img{height:46px;background:#fff;padding:8px 13px;border-radius:12px;
  box-shadow:0 8px 22px rgba(0,0,0,.28)}
.dnaload__logo{height:64px;width:auto;max-width:none;display:block;background:#fff;padding:10px 15px;
  border-radius:14px;margin:0 auto 6px;box-shadow:0 10px 30px rgba(0,0,0,.35)}
@media (max-width:760px){
  .logo__img{height:64px}
  .logo--foot .logo__img{height:38px}
  .dnaload__logo{height:50px}
}

/* ============ READABILITY FONT-SIZE BUMP (v20) ============ */
/* research stat tiles (Pioneering Breakthroughs section) */
.rtiles b{font-size:33px}
.rtiles b .num{font-size:inherit}
.rtiles li>span{font-size:12.2px}
/* Advanced Biologic Therapies tiles */
.caps__list li{font-size:12.2px}
/* home + shared small text, all +1 approx */
.hero__p{font-size:14.4px}
.trust p{font-size:12.2px}
.trust b{font-size:12.8px}
.statsbar__in li>span{font-size:14px}
.pcard p{font-size:12.6px}
.more{font-size:12.4px}
.about__lead{font-size:14px}
.ticks li{font-size:13.6px}
.mvv__card p{font-size:11.8px}
.research__copy>p{font-size:13.4px}
.inno__copy p{font-size:13.4px}
.inno__stat>span{font-size:12.4px}
.inno__stat b .num{font-size:inherit}
.path__steps p{font-size:11.8px}
.newslist h3{font-size:13.4px}
.newslist p{font-size:11.6px}
.patcard__item p{font-size:14.2px}
.fcard p{font-size:11.4px}
.publist h3{font-size:13px}
.publist p{font-size:11px}
.evlist h3{font-size:12.6px}
.evlist p{font-size:10.8px}
.testi__item p{font-size:13.6px}
.testi__item cite{font-size:12.4px}
.cta__copy>p{font-size:13.6px}
.foot__col a,.foot__addr{font-size:12.8px}
.foot__bottom{font-size:12px}

/* ============ JUSTIFIED BODY TEXT (v27) ============ */
.about__lead,
.research__copy>p,
.inno__copy p,
.mvv__card p,
.patcard__item p,
.testi__item p,
.cta__copy>p,
.newslist h3{
  text-align:justify}

/* ============ PROGRAM CARD HEADINGS (v29) ============
   Marcellus ships a single weight (400) and browsers do not synthesise
   faux-bold for it, so weight is added with a hairline stroke instead. */
.pcard h3{font-size:17px;line-height:1.3;-webkit-text-stroke:.4px currentColor}

/* ============ PROGRAM CARD BODY TEXT (v30) ============ */
.pcard p{font-size:13.4px;color:var(--ink);line-height:1.65;text-align:justify}

/* ============ ABOUT LEAD PARAGRAPH — WHITE (v33) ============ */
.about__lead{color:#fff}

/* ============ MISSION / VISION / VALUES CARDS (v34) ============
   Marcellus has a single weight, so the heading gains weight via a
   hairline stroke rather than font-weight (which is a no-op here). */
.mvv__card h3{font-size:16px;line-height:1.28;margin-bottom:5px;color:var(--teal-900);-webkit-text-stroke:.4px currentColor}
.mvv__card p{font-size:12.8px;line-height:1.62;color:var(--ink);text-align:justify}

/* ============ OUR VALUES — BULLET LIST (v36) ============ */
.mvv__list{display:grid;gap:5px;margin-top:2px}
.mvv__list li{position:relative;padding-left:14px;font-size:12.8px;line-height:1.5;
  color:var(--ink)}
.mvv__list li::before{content:"";position:absolute;left:0;top:.55em;width:5px;height:5px;
  border-radius:50%;background:var(--teal-500)}

/* ============ MVV ICON / HEADING ALIGNMENT (v37) ============
   The 32px icon is taller than the heading's line box, so the heading is
   given a matching min-height and centred — icon and title share one line. */
.mvv__card h3{min-height:32px;display:flex;align-items:center}

/* ============ HERO SLIDE PARAGRAPHS (v38) ============
   <br> line breaks removed in markup: a line ending in a forced break is
   never justified, so the text now wraps naturally inside a width cap. */
.hero__p{color:#fff;text-align:justify;max-width:400px}

/* ============ OUR VALUES — READ MORE LINK (v39) ============ */
.mvv__more{display:inline-flex;align-items:center;gap:6px;margin-top:9px;
  font-size:12px;font-weight:600;color:var(--teal-600);
  transition:gap .3s var(--ease),color .3s}
.mvv__more:hover{gap:11px;color:var(--teal-500)}
.mvv__more .ic{width:13px;height:13px}

/* ============ RESEARCH SECTION PARAGRAPH — WHITE (v40) ============ */
.research__copy>p:not(.kicker){color:#fff}

/* ============ MISSION / VISION / VALUES — CURVY ACCORDION (v42) ============ */
.mvv{gap:13px}
.mvv__card{padding:0;display:block;overflow:hidden;border-radius:22px;
  border:1px solid rgba(255,255,255,.5);
  transition:box-shadow .45s var(--ease),transform .45s var(--ease),border-color .45s}
.mvv__card:hover{transform:none;box-shadow:0 14px 34px rgba(0,0,0,.24)}
/* gradient accent rail that grows when the panel opens */
.mvv__card::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;z-index:2;
  background:linear-gradient(180deg,var(--teal-500),var(--cyan-300));
  transform:scaleY(0);transform-origin:top;transition:transform .5s var(--ease)}
.mvv__card{position:relative}
.mvv__card.is-open::after{transform:scaleY(1)}
.mvv__card.is-open{box-shadow:0 16px 40px rgba(0,0,0,.28)}

/* header row = the toggle button */
.mvv__q{display:flex;align-items:center;gap:12px;width:100%;text-align:left;
  padding:15px 17px;background:none;border:0;cursor:pointer;
  transition:background-color .3s}
.mvv__q:hover{background:rgba(23,135,154,.06)}
.mvv__q h3{flex:1;margin:0}
.mvv__card.is-open .mvv__ic{transform:rotate(-8deg) scale(1.08);
  background:linear-gradient(140deg,var(--teal-600),var(--teal-400));color:#fff}
.mvv__chev{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;flex:none;
  background:var(--page-2);color:var(--teal-600);
  transition:transform .42s var(--ease),background-color .32s,color .32s}
.mvv__card.is-open .mvv__chev{transform:rotate(180deg);
  background:var(--teal-500);color:#fff}
.mvv__chev .ic{width:13px;height:13px}

/* animated panel */
.mvv__a{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.mvv__card.is-open .mvv__a{grid-template-rows:1fr}
.mvv__a>div{overflow:hidden}
.mvv__in{padding:0 18px 17px 61px;opacity:0;transition:opacity .35s .06s}
.mvv__card.is-open .mvv__in{opacity:1}
.mvv__in p{margin:0}
@media (max-width:760px){
  .mvv__in{padding-left:18px}
}

/* ============ ADVANCED BIOLOGIC THERAPIES (v43) ============ */
.caps__in{grid-template-columns:210px 1fr}
.caps__title{font-size:26px;line-height:1.28}
.caps__ic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;margin-bottom:13px;
  background:linear-gradient(140deg,var(--teal-600),var(--teal-400));color:#fff;
  box-shadow:0 10px 24px rgba(23,135,154,.34);
  transition:transform .5s var(--ease)}
.caps__ic .ic{width:27px;height:27px;stroke-width:1.5}
.caps__title:hover .caps__ic{transform:rotate(-8deg) scale(1.07)}
/* therapy tiles: larger label + larger icon */
.caps__list li{font-size:13.2px;line-height:1.45;padding:18px 12px}
.caps__list .ic--lg{width:36px;height:36px}
@media (max-width:1000px){
  .caps__in{grid-template-columns:1fr}
}

/* ============ THERAPY TILES — TOP-ALIGNED, SHARED TEXT BASELINE (v45) ============
   Icon pinned to the top of every tile, one fixed gap, so all seven labels
   begin on exactly the same line regardless of how long they are. */
.caps__list li{justify-content:flex-start;gap:0}
.caps__list .ic--lg{margin-bottom:12px}

/* ============ INNOVATION PARAGRAPH — WHITE (v46) ============ */
.inno__copy p{color:#fff}

/* ============ INNOVATION CARD STATS (v47) ============ */
.inno__stat b{font-size:25px}
.inno__stat b .num{font-size:inherit}
.inno__stat>span{font-size:13.4px;line-height:1.5}

/* ============ PATIENT TESTIMONIAL — WIDER TEXT (v48) ============
   The body was flex:0 1 auto so it shrank to its content, leaving a wide
   blank strip before the (absolutely positioned) photo. It now fills that
   space, capped at 64% so the text never runs under the photo. */
.patcard__body{flex:1 1 auto;max-width:64%}
.patcard__item p{max-width:none}

/* ============ FACULTY CAROUSEL (v49) ============ */
.facslide{position:relative;display:flex;align-items:center;gap:12px}
.facslide__vp{flex:1;overflow:hidden;padding:4px 2px 8px}
.facslide__track{display:flex;gap:13px;
  transition:transform .62s var(--ease);will-change:transform}
.facslide__track .fcard{flex:0 0 calc((100% - 39px) / 4)}
.facslide__arr{flex:none;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;
  background:#fff;color:var(--teal-600);border:1px solid var(--line);box-shadow:var(--shadow-2);
  cursor:pointer;transition:background-color .3s,color .3s,transform .3s var(--ease),box-shadow .3s}
.facslide__arr:hover{background:linear-gradient(140deg,var(--teal-600),var(--teal-400));color:#fff;
  border-color:transparent;transform:scale(1.09);box-shadow:0 10px 24px rgba(23,135,154,.36)}
.facslide__arr .ic{width:19px;height:19px}
/* names + roles a step larger */
.fcard h3{font-size:16px;margin:15px 0 5px}
.fcard p{font-size:12.6px;line-height:1.55}
@media (max-width:1180px){ .facslide__track .fcard{flex:0 0 calc((100% - 26px) / 3)} }
@media (max-width:900px){ .facslide__track .fcard{flex:0 0 calc((100% - 13px) / 2)} }
@media (max-width:620px){
  .facslide__track .fcard{flex:0 0 100%}
  .facslide__arr{width:36px;height:36px}
}

/* ============ FACULTY CARD NAME + ROLE (v50) ============
   Marcellus has one weight only, so the name is thickened with a
   hairline stroke rather than font-weight. */
.fcard h3{color:var(--teal-900);-webkit-text-stroke:.35px currentColor}
.fcard p{color:#1a1a1a;font-size:13.4px;line-height:1.5}

/* ============ HEADER LOCKUP v2 — EMBLEM + WORDMARK (v51) ============
   Opt-in via .brandbar--v2 (+ .brandbar--v2b for the two-line variant).
   Brand colours sampled from the supplied logo artwork.
   Mobile keeps the original full logo image, unchanged. */
.brandbar--v2 .logo{display:inline-flex;align-items:center;gap:16px}
.brandbar--v2 .logo__img{display:none}
.bb2__mk{height:66px;width:auto;max-width:none;display:block;flex:none}
.bb2__wm{display:flex;flex-direction:column;justify-content:center;min-width:0}
.bb2__full{display:none}

/* --- Design A: everything on one line --- */
.bb2__one{font-family:var(--f-serif);font-size:clamp(13px,1.63vw,25px);
  letter-spacing:.085em;color:#144067;line-height:1.1;white-space:nowrap}

/* --- Design B: two lines split by the brand rule --- */
.bb2__l1{font-family:var(--f-serif);font-size:clamp(17px,2.05vw,30px);
  letter-spacing:.11em;color:#144067;line-height:1;white-space:nowrap}
.bb2__rule{display:block;height:3px;border-radius:2px;margin:7px 0 6px;
  background:linear-gradient(90deg,#22B9D1 0 8%,#63BC46 8% 20%,#F99E25 20% 100%)}
.bb2__l2{font-family:var(--f-sans);font-size:clamp(8.6px,.93vw,12.8px);font-weight:600;
  letter-spacing:.2em;color:#1c5f76;line-height:1;white-space:nowrap}

@media (max-width:760px){
  .bb2__mk,.bb2__wm{display:none}
  .bb2__full{display:block;height:52px;width:auto;max-width:none}
  .brandbar--v2 .logo{gap:0}
}

/* ============ HEADER LOCKUP — BRAND TYPEFACE (v52) ============
   The logo wordmark is a bold geometric sans, so the header text now uses
   Montserrat (closest Google Font match) instead of the serif, a step larger. */
.bb2__one{font-family:'Montserrat',var(--f-sans);font-weight:800;
  font-size:clamp(12px,1.85vw,28px);letter-spacing:.038em}
.bb2__l1{font-family:'Montserrat',var(--f-sans);font-weight:800;
  font-size:clamp(19px,2.82vw,41px);letter-spacing:.045em}
.bb2__l2{font-family:'Montserrat',var(--f-sans);font-weight:600;
  font-size:clamp(9px,1.19vw,16.2px);letter-spacing:.185em}

/* ============ HEADER NAME — LETTER ANIMATION (v56) ============
   Opt-in via .brandbar--shine (about.html only). Letters rise into place
   one by one on load, then a slow colour wave travels along the name. */
.brandbar--shine .bb2__one .ch{display:inline-block;white-space:pre;
  will-change:transform,opacity;
  animation:bbIn .66s cubic-bezier(.2,.75,.25,1) both,
            bbWave 4.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * 24ms),
                  calc(1.5s + var(--i) * 38ms)}
@keyframes bbIn{
  from{opacity:0;transform:translateY(.55em) scale(.86);filter:blur(4px)}
  60%{filter:blur(0)}
  to{opacity:1;transform:none;filter:none}
}
@keyframes bbWave{
  0%,64%,100%{color:#144067;transform:translateY(0)}
  78%{color:#22B9D1;transform:translateY(-2px)}
}
@media (max-width:760px){
  .brandbar--shine .bb2__one .ch{animation:none}
}

/* ============ DESIGN B HEADER — BOLD LINE 2 + ANIMATION (v57) ============
   Sequence: the name rises letter by letter, the brand rule draws itself
   left to right, then the sub-line rises. Both lines then carry a slow
   travelling colour wave. Opt-in via .brandbar--anim. */
.bb2__l2{font-weight:700}

.brandbar--v2b.brandbar--anim .bb2__l1 .ch,
.brandbar--v2b.brandbar--anim .bb2__l2 .ch{display:inline-block;white-space:pre;
  will-change:transform,opacity}

.brandbar--v2b.brandbar--anim .bb2__l1 .ch{
  animation:bbIn .64s cubic-bezier(.2,.75,.25,1) both,
            bbWave 4.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * 30ms),
                  calc(1.7s + var(--i) * 52ms)}

.brandbar--v2b.brandbar--anim .bb2__rule{
  transform-origin:left center;
  animation:bbRuleDraw .8s cubic-bezier(.2,.75,.25,1) .6s both}
@keyframes bbRuleDraw{
  from{transform:scaleX(0);opacity:.25}
  to{transform:scaleX(1);opacity:1}
}

.brandbar--v2b.brandbar--anim .bb2__l2 .ch{
  animation:bbIn2 .55s ease-out both,
            bbWave2 4.8s ease-in-out infinite;
  animation-delay:calc(1.2s + var(--i) * 15ms),
                  calc(2.4s + var(--i) * 30ms)}
@keyframes bbIn2{
  from{opacity:0;transform:translateY(.45em)}
  to{opacity:1;transform:none}
}
@keyframes bbWave2{
  0%,66%,100%{color:#1c5f76}
  80%{color:#22B9D1}
}
@media (max-width:760px){
  .brandbar--v2b.brandbar--anim .bb2__l1 .ch,
  .brandbar--v2b.brandbar--anim .bb2__l2 .ch,
  .brandbar--v2b.brandbar--anim .bb2__rule{animation:none;transform:none;opacity:1}
}

/* ============ HEADER LOCKUP v3 — THREE-LINE MODEL (v60) ============
   Matches the supplied logo artwork: AGATHISHA, the full-width brand rule,
   then the institute name over two lines. Emblem is logo_aisrm.png.
   Opt-in via .brandbar--v2c. */
.brandbar--v2c .logo{display:inline-flex;align-items:center;gap:16px}
.brandbar--v2c .logo__img{display:none}
.bb3__mk{height:96px;width:auto;max-width:none;display:block;flex:none}
.bb3__wm{display:flex;flex-direction:column;align-items:stretch;min-width:0}
.bb3__full{display:none}

.bb3__l1{font-family:'Montserrat',var(--f-sans);font-weight:800;
  font-size:clamp(25px,3.52vw,52px);letter-spacing:.012em;line-height:1;
  color:#144067;white-space:nowrap}
.bb3__rule{display:block;height:5px;border-radius:3px;margin:2px 0 3px;
  background:linear-gradient(90deg,#22B9D1 0 9%,#63BC46 9% 22%,#F99E25 22% 100%)}
.bb3__l2,.bb3__l3{font-family:'Montserrat',var(--f-sans);font-weight:700;
  font-size:clamp(11px,1.49vw,21.5px);letter-spacing:.105em;line-height:1.1;
  color:#1c5f76;white-space:nowrap}

/* --- animation: name rises, rule draws, then the two lines rise --- */
.brandbar--v2c .bb3__l1 .ch,
.brandbar--v2c .bb3__l2 .ch,
.brandbar--v2c .bb3__l3 .ch{display:inline-block;white-space:pre;will-change:transform,opacity}
.brandbar--v2c .bb3__l1 .ch{
  animation:bbIn .64s cubic-bezier(.2,.75,.25,1) both, bbWave 4.8s ease-in-out infinite;
  animation-delay:calc(var(--i) * 34ms), calc(1.7s + var(--i) * 58ms)}
.brandbar--v2c .bb3__rule{transform-origin:left center;
  animation:bbRuleDraw .8s cubic-bezier(.2,.75,.25,1) .55s both}
.brandbar--v2c .bb3__l2 .ch{
  animation:bbIn2 .55s ease-out both, bbWave2 4.8s ease-in-out infinite;
  animation-delay:calc(1.15s + var(--i) * 16ms), calc(2.3s + var(--i) * 32ms)}
.brandbar--v2c .bb3__l3 .ch{
  animation:bbIn2 .55s ease-out both, bbWave2 4.8s ease-in-out infinite;
  animation-delay:calc(1.42s + var(--i) * 16ms), calc(2.6s + var(--i) * 32ms)}

@media (max-width:760px){
  .bb3__mkw,.bb3__wm{display:none}
  .bb3__full{display:block;height:52px;width:auto;max-width:none}
  .brandbar--v2c .logo{gap:0}
}

/* ---- v61: every line spans the block width, like the logo artwork ----
   The lines are already split into per-letter spans for the animation, so
   each line becomes a flex row and space-between tracks the letters out to
   both edges. Block width = the widest line; the others stretch to match. */
.brandbar--v2c .bb3__l1,
.brandbar--v2c .bb3__l2,
.brandbar--v2c .bb3__l3{display:flex;justify-content:space-between;
  letter-spacing:.028em;white-space:nowrap}
.brandbar--v2c .bb3__l1 .ch,
.brandbar--v2c .bb3__l2 .ch,
.brandbar--v2c .bb3__l3 .ch{flex:0 0 auto}

/* ============ EMBLEM GLOSS SWEEP (v65) ============
   A light sweep travels across the emblem, matching the shine used on the
   wordmark. The emblem PNG is reused as a mask so the gloss only lands on
   the artwork itself, never on the transparent square around it. */
.bb3__mkw{position:relative;display:block;flex:none;isolation:isolate}
.bb3__mkw::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;
  background-image:linear-gradient(115deg,
    rgba(255,255,255,0) 38%,
    rgba(255,255,255,.55) 47%,
    rgba(255,255,255,.85) 50%,
    rgba(255,255,255,.55) 53%,
    rgba(255,255,255,0) 62%);
  background-size:250% 100%;
  background-repeat:no-repeat;
  background-position:135% 0;
  -webkit-mask-image:url("../img/aisrm-emblem.png");
  mask-image:url("../img/aisrm-emblem.png");
  -webkit-mask-size:contain;mask-size:contain;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  animation:mkGloss 5.6s cubic-bezier(.4,0,.2,1) 1.4s infinite}
@keyframes mkGloss{
  0%{background-position:135% 0}
  42%,100%{background-position:-35% 0}
}
@media (max-width:760px){ .bb3__mkw{display:none} .bb3__mkw::after{animation:none;opacity:0} }

/* --------------------------------------------------------------------------
   Touch ergonomics + small-screen reading (added 4 Sep 2026)
   -------------------------------------------------------------------------- */

/* Tap targets: many footer / topbar / breadcrumb links are under 32px tall.
   On touch devices each gets an invisible halo that enlarges the tappable
   area without moving a single pixel visually. Scoped to coarse pointers so
   desktop hover behaviour is untouched. */
@media (pointer: coarse) {
  .topbar__lnk, .crumbs a, .foot__col a, .foot__bottom a,
  .foot__addr a, .dnav__lnk, .dcard__soc a, .ifac__go {
    position: relative;
  }
  .topbar__lnk::after, .crumbs a::after, .foot__col a::after,
  .foot__bottom a::after, .foot__addr a::after, .dnav__lnk::after,
  .dcard__soc a::after, .ifac__go::after {
    content: '';
    position: absolute;
    inset: -8px -6px;
  }
}

/* Justified text opens ugly rivers of space in narrow phone columns.
   Below 480px those paragraphs read ragged-right; desktop keeps the
   justified look that was chosen deliberately. */
@media (max-width: 480px) {
  .pcard p, .mvv__card p, .hero__p { text-align: left; }
}

/* --------------------------------------------------------------------------
   Parity fixes (4 Sep 2026): the three items the local/live audit was
   still right about.
   -------------------------------------------------------------------------- */

/* (reduced-motion override removed on request: the site always animates) */

/* 2. Topbar overflow: the fact list is nowrap, so on narrow screens it
      pushed the bar wider than the viewport. Facts now shed progressively
      and the bar may wrap — 0px overflow at every width. */
@media (max-width: 1100px) {
  .topbar__in { flex-wrap: wrap; row-gap: 4px; }
  .topbar__facts { flex-wrap: wrap; gap: 8px 18px; }
}
@media (max-width: 820px) {
  .topbar__facts li:nth-child(n+3) { display: none; }
}
@media (max-width: 540px) {
  .topbar__facts { display: none; }
}

/* 3. Event-date month label: #8fa8ca on the dark tile was 2.95:1 —
      below the 4.5:1 line. Lightened to pass AA. */
.date i { color: #c9d8ef; }

/* home faculty band: textured background + deeper card shadows */
.faculty{position:relative;overflow:hidden;isolation:isolate;
  background:
    radial-gradient(620px 420px at 8% 12%,rgba(31,159,178,.10),transparent 62%),
    radial-gradient(560px 400px at 94% 88%,rgba(201,138,43,.09),transparent 62%),
    linear-gradient(180deg,#f2f8fb,#e9f2f7)}
.faculty::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.6;
  background-image:radial-gradient(rgba(23,135,154,.14) 1px,transparent 1.35px);
  background-size:22px 22px}
.faculty::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:repeating-linear-gradient(115deg,rgba(23,135,154,.05) 0 1px,transparent 1px 90px)}
.fcard{box-shadow:0 10px 26px rgba(13,60,70,.12),0 2px 6px rgba(13,60,70,.07)}
.fcard:hover{box-shadow:0 26px 52px rgba(13,60,70,.2),0 6px 14px rgba(13,60,70,.1)}

/* faculty band: stronger effects */
.faculty{background:
    radial-gradient(680px 460px at 8% 12%,rgba(31,159,178,.20),transparent 62%),
    radial-gradient(600px 430px at 94% 88%,rgba(201,138,43,.16),transparent 62%),
    radial-gradient(420px 300px at 55% -10%,rgba(64,205,225,.14),transparent 60%),
    linear-gradient(180deg,#eef7fa,#e2eef5)}
.faculty::before{opacity:.85}
.faculty .wrap::before,.faculty .wrap::after{content:"";position:absolute;z-index:-1;border-radius:50%;pointer-events:none}
.faculty .wrap::before{width:300px;height:300px;left:-110px;bottom:-70px;
  border:1.5px dashed rgba(23,135,154,.35);animation:facSpin 36s linear infinite}
.faculty .wrap::after{width:180px;height:180px;right:-60px;top:-30px;
  border:1.5px dashed rgba(201,138,43,.4);animation:facSpin 28s linear infinite reverse}
@keyframes facSpin{to{rotate:360deg}}
.faculty .wrap{position:relative}
.fcard{border:1px solid rgba(255,255,255,.9)}
.fcard:hover{transform:translateY(-9px) rotate(-.6deg) scale(1.015)}
.fcard__img{position:relative}
.fcard__img::after{content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.5) 46%,transparent 60%);
  transform:translateX(-130%);transition:transform .8s var(--ease)}
.fcard:hover .fcard__img::after{transform:translateX(130%)}

/* faculty band: light hex molecule clusters in the corners (replaces diagonal weave) */
.faculty::after{opacity:.5;background-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20190%22%3E%3Cpolygon%20points%3D%2294.0%2C60.0%2077.0%2C89.4%2043.0%2C89.4%2026.0%2C60.0%2043.0%2C30.6%2077.0%2C30.6%22%20fill%3D%22none%22%20stroke%3D%22%238fd0da%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Cpolygon%20points%3D%22154.0%2C95.0%20137.0%2C124.4%20103.0%2C124.4%2086.0%2C95.0%20103.0%2C65.6%20137.0%2C65.6%22%20fill%3D%22none%22%20stroke%3D%22%238fd0da%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22154.0%22%20cy%3D%2295.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%22124.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%22124.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2286.0%22%20cy%3D%2295.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%2265.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%2265.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Cpolygon%20points%3D%2294.0%2C130.0%2077.0%2C159.4%2043.0%2C159.4%2026.0%2C130.0%2043.0%2C100.6%2077.0%2C100.6%22%20fill%3D%22none%22%20stroke%3D%22%238fd0da%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%22130.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%22159.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%22159.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%22130.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%22100.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%22100.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Cpolygon%20points%3D%22154.0%2C25.0%20137.0%2C54.4%20103.0%2C54.4%2086.0%2C25.0%20103.0%2C-4.4%20137.0%2C-4.4%22%20fill%3D%22none%22%20stroke%3D%22%238fd0da%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22154.0%22%20cy%3D%2225.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%2254.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%2254.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%2286.0%22%20cy%3D%2225.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%22-4.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%22-4.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Cpolygon%20points%3D%22214.0%2C60.0%20197.0%2C89.4%20163.0%2C89.4%20146.0%2C60.0%20163.0%2C30.6%20197.0%2C30.6%22%20fill%3D%22none%22%20stroke%3D%22%238fd0da%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22214.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22197.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22163.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22146.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22163.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3Ccircle%20cx%3D%22197.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%238fd0da%22/%3E%3C/svg%3E"),url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20240%20190%22%3E%3Cpolygon%20points%3D%2294.0%2C60.0%2077.0%2C89.4%2043.0%2C89.4%2026.0%2C60.0%2043.0%2C30.6%2077.0%2C30.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c489%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Cpolygon%20points%3D%22154.0%2C95.0%20137.0%2C124.4%20103.0%2C124.4%2086.0%2C95.0%20103.0%2C65.6%20137.0%2C65.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c489%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22154.0%22%20cy%3D%2295.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%22124.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%22124.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2286.0%22%20cy%3D%2295.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%2265.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%2265.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Cpolygon%20points%3D%2294.0%2C130.0%2077.0%2C159.4%2043.0%2C159.4%2026.0%2C130.0%2043.0%2C100.6%2077.0%2C100.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c489%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%2294.0%22%20cy%3D%22130.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%22159.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%22159.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2226.0%22%20cy%3D%22130.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2243.0%22%20cy%3D%22100.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2277.0%22%20cy%3D%22100.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Cpolygon%20points%3D%22154.0%2C25.0%20137.0%2C54.4%20103.0%2C54.4%2086.0%2C25.0%20103.0%2C-4.4%20137.0%2C-4.4%22%20fill%3D%22none%22%20stroke%3D%22%23e3c489%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22154.0%22%20cy%3D%2225.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%2254.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%2254.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%2286.0%22%20cy%3D%2225.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22103.0%22%20cy%3D%22-4.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22137.0%22%20cy%3D%22-4.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Cpolygon%20points%3D%22214.0%2C60.0%20197.0%2C89.4%20163.0%2C89.4%20146.0%2C60.0%20163.0%2C30.6%20197.0%2C30.6%22%20fill%3D%22none%22%20stroke%3D%22%23e3c489%22%20stroke-width%3D%222%22/%3E%3Ccircle%20cx%3D%22214.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22197.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22163.0%22%20cy%3D%2289.4%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22146.0%22%20cy%3D%2260.0%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22163.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3Ccircle%20cx%3D%22197.0%22%20cy%3D%2230.6%22%20r%3D%223.4%22%20fill%3D%22%23e3c489%22/%3E%3C/svg%3E");
  background-repeat:no-repeat,no-repeat;
  background-position:-40px calc(100% + 40px),calc(100% + 50px) -35px;
  background-size:300px auto,270px auto}

/* fcard: dark name area */
.fcard{background:linear-gradient(180deg,#0d5462,#0a4552);border-color:rgba(255,255,255,.12)}
.fcard h3{color:#fff}
.fcard p{color:#bcd9e2}
.fcard__soc a{background:rgba(255,255,255,.12);color:#9fdceb}
.fcard__soc a:hover{background:var(--teal-400);color:#fff}
.fcard .btn--outline{background:#fff;border-color:#fff;color:var(--teal-700)}
.fcard .btn--outline:hover{background:#c98a2b;border-color:#c98a2b;color:#fff}
.faculty{padding-top:52px}
.faculty__head .btn--outline{background:#0d5462;border-color:#0d5462;color:#fff;box-shadow:var(--shadow-1)}
.faculty__head .btn--outline:hover{background:#c98a2b;border-color:#c98a2b;color:#fff}
/* full photo, zoom keeps head, fade into dark base */
.fcard__img{aspect-ratio:640/711}
.fcard__img img{object-position:center top;transform-origin:center top}
.fcard__img::before{content:"";position:absolute;inset:auto 0 0 0;height:56px;z-index:1;
  background:linear-gradient(180deg,transparent,rgba(13,84,98,.85))}