/* ==========================================================================
   Starliks Campus — design system
   Navy is the material. Gold is the instrument: it only ever marks, measures
   or indexes something (progress, position, the Apply action).
   ========================================================================== */

:root{
  --navy:#072B6E;
  --navy-deep:#041C4A;
  --blue:#0B3A93;
  --blue-lift:#1E5FD8;
  --gold:#F5D06A;
  --gold-deep:#B8860F;
  --paper:#FFFFFF;
  --tint:#F6F7FB;
  --ink:#10182B;
  --muted:#5A6478;
  --line:#E3E7F0;
  --line-dark:rgba(245,208,106,.22);
  --shadow-1:0 1px 2px rgba(7,43,110,.06);
  --shadow-2:0 12px 32px rgba(7,43,110,.12);
  --r-s:4px; --r-l:14px;
  --pad:20px;
  --max:1240px;
}
@media (min-width:768px){:root{--pad:32px}}
@media (min-width:1280px){:root{--pad:48px}}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;background:var(--paper);color:var(--ink);
  font-family:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:1rem;line-height:1.6;-webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto;display:block}
a{color:var(--blue-lift);text-decoration-thickness:1px;text-underline-offset:3px}
h1,h2,h3,h4{font-family:"Bricolage Grotesque","Instrument Sans",system-ui,sans-serif;
  font-weight:600;letter-spacing:-.02em;line-height:1.08;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,4vw,3rem)}
h2{font-size:clamp(1.5rem,2.6vw,2.05rem)}
h3{font-size:clamp(1.05rem,1.3vw,1.2rem);line-height:1.3}
p{margin:0 0 1em;max-width:72ch}
.lede{font-size:clamp(1rem,1.1vw,1.1rem);line-height:1.65;color:var(--muted);max-width:60ch}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.narrow{max-width:820px}
section{padding-block:clamp(48px,7vw,96px)}
.tint{background:var(--tint)}
.dark{background:var(--navy);color:#fff}
.dark h1,.dark h2,.dark h3{color:#fff}
.dark p,.dark .lede{color:rgba(255,255,255,.76)}
.dark a{color:var(--gold)}
.dark a.btn-apply,a.btn-apply{color:var(--navy)}
.dark a.btn-solid,.dark a.btn-outline{color:#fff}
.skip{position:absolute;left:-9999px}
.skip:focus{left:var(--pad);top:10px;z-index:200;background:#fff;color:var(--navy);
  padding:10px 16px;border-radius:var(--r-s)}
:focus-visible{outline:2px solid var(--blue-lift);outline-offset:2px;border-radius:2px}
.dark :focus-visible{outline-color:var(--gold)}

/* ---------- metadata type (restricted to course/data chips) ---------- */
.meta{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.dark .meta{color:var(--gold)}

/* ---------- star glyph ---------- */
.star{display:inline-block;width:1em;height:1em;flex:none;
  background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.5em;min-height:48px;padding:0 22px;
  border-radius:var(--r-s);font-weight:600;font-size:.95rem;text-decoration:none;
  border:1px solid transparent;cursor:pointer;transition:transform .18s,background .18s,border-color .18s}
.btn:hover{transform:translateY(-1px)}
.btn-apply{background:var(--gold);color:var(--navy)}
.btn-apply:hover{background:#efc352}
.btn-solid{background:var(--navy);color:#fff}
.btn-solid:hover{background:var(--blue)}
.btn-outline{border-color:var(--line);color:var(--ink);background:#fff}
.dark .btn-outline{border-color:rgba(255,255,255,.35);color:#fff;background:transparent}
.dark .btn-outline:hover{border-color:var(--gold)}
.btn-sm{min-height:40px;padding:0 16px;font-size:.88rem}
.link-u{color:inherit;text-decoration:none;font-weight:600;border-bottom:1px solid currentColor;
  padding-bottom:2px}
.link-u:hover{border-bottom-color:var(--gold)}

/* ==========================  HEADER  ============================ */
.hdr{position:sticky;top:0;z-index:100;background:rgba(7,43,110,.97);
  backdrop-filter:saturate(1.2) blur(8px);border-bottom:1px solid rgba(255,255,255,.08)}
.hdr-in{display:flex;align-items:center;gap:20px;height:72px;
  max-width:var(--max);margin-inline:auto;padding-inline:var(--pad)}
.brand{display:flex;align-items:center;gap:12px;flex:none;text-decoration:none}
.brand img{height:44px;width:auto}
.brand .wm{display:block;line-height:1}
.brand .wm b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-weight:600;
  font-size:1.22rem;letter-spacing:.06em;color:#fff}
.brand .wm span{display:block;font-size:.62rem;letter-spacing:.34em;color:var(--gold);margin-top:4px}
@media (max-width:460px){.brand .wm b{font-size:1.02rem}.brand img{height:38px}}
.ftr .brand{margin-bottom:16px}
.ftr .brand img{height:52px}
.nav{display:none;margin-left:auto;align-items:center;gap:4px}
@media (min-width:1080px){.nav{display:flex}}
.nav>*{position:relative}
.nav a.top,.nav button.top{display:inline-flex;align-items:center;gap:6px;background:none;border:0;
  color:#fff;font:inherit;font-size:.95rem;font-weight:500;padding:10px 14px;cursor:pointer;
  text-decoration:none;border-radius:var(--r-s)}
.nav a.top::after,.nav button.top::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;
  height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .2s}
.nav a.top:hover::after,.nav button.top:hover::after,.nav .is-active::after{transform:scaleX(1)}
.hdr-cta{display:none;gap:10px;align-items:center;margin-left:14px}
@media (min-width:1080px){.hdr-cta{display:flex}}
.chev{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);opacity:.7}

.mega{position:fixed;top:72px;left:50%;transform:translateX(-50%) translateY(6px);
  width:min(1100px,94vw);background:#fff;color:var(--ink);border-radius:var(--r-l);
  box-shadow:var(--shadow-2);padding:28px;opacity:0;visibility:hidden;transition:opacity .18s,transform .18s}
.mega[data-open="true"]{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mega-grid{display:grid;grid-template-columns:1.1fr 1fr 1.2fr;gap:32px}
.mega h4{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
  font-family:"Instrument Sans",sans-serif;font-weight:700;margin:0 0 12px}
.mega ul{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.mega ul a{display:flex;align-items:center;gap:8px;padding:7px 8px;border-radius:var(--r-s);
  color:var(--ink);text-decoration:none;font-size:.95rem}
.mega ul a:hover{background:var(--tint)}
.mega ul a .star{opacity:0;width:.7em;height:.7em}
.mega ul a:hover .star{opacity:1}
.mega-feat{border-left:1px solid var(--line);padding-left:28px}
.mega-feat img{border-radius:var(--r-s);margin-bottom:12px;aspect-ratio:16/9;object-fit:cover}
.mega-foot{display:flex;gap:22px;margin-top:22px;padding-top:18px;border-top:1px solid var(--line);
  font-size:.92rem}
.mega-foot a{color:var(--navy);font-weight:600;text-decoration:none}
.mega-foot a:hover{text-decoration:underline}

.burger{display:inline-flex;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.25);
  border-radius:var(--r-s);color:#fff;width:46px;height:42px;align-items:center;justify-content:center;cursor:pointer}
@media (min-width:1080px){.burger{display:none}}
.burger span{width:18px;height:1.6px;background:#fff;position:relative}
.burger span::before,.burger span::after{content:"";position:absolute;left:0;width:18px;height:1.6px;background:#fff}
.burger span::before{top:-6px}.burger span::after{top:6px}

.drawer{position:fixed;inset:72px 0 0;background:var(--navy);z-index:99;overflow-y:auto;
  padding:24px var(--pad) 120px;display:none}
.drawer[data-open="true"]{display:block}
.drawer h4{color:var(--gold);font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:"Instrument Sans",sans-serif;margin:26px 0 10px}
.drawer a{display:block;color:#fff;text-decoration:none;padding:11px 0;font-size:1.05rem;
  border-bottom:1px solid rgba(255,255,255,.1)}

/* ==========================  HERO  ============================== */
.hero{position:relative;min-height:min(88vh,760px);display:flex;align-items:flex-end;
  background:var(--navy-deep);overflow:hidden;color:#fff}
.hero-media{position:absolute;inset:0}
.hero-media figure{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .9s ease}
.hero-media figure.on{opacity:1}
.hero-media img{width:100%;height:100%;object-fit:cover;animation:kb 12s ease-out both}
.hero-media figure.on img{animation:kb 12s ease-out both}
@keyframes kb{from{transform:scale(1.005)}to{transform:scale(1.07)}}
.hero-scrim{position:absolute;inset:0;
  background:linear-gradient(105deg,rgba(4,28,74,.94) 0%,rgba(4,28,74,.82) 42%,rgba(4,28,74,.35) 100%)}
.hero-in{position:relative;width:100%;max-width:var(--max);margin-inline:auto;
  padding:120px var(--pad) 40px}
.hero h1{max-width:16ch;margin-bottom:.35em}
.hero .lede{color:rgba(255,255,255,.82);max-width:48ch}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.hero-grid{display:grid;gap:40px;align-items:end}
@media (min-width:1080px){.hero-grid{grid-template-columns:1.25fr .75fr;gap:56px;align-items:center}}
.ticker{display:none;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--r-l);padding:20px;backdrop-filter:blur(14px) saturate(1.2);max-width:420px;
  box-shadow:0 20px 50px rgba(2,12,36,.35)}
@media (min-width:1080px){.ticker{display:block}}
.ticker-h{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.ticker-h span{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}
.ticker-h i{display:inline-flex;align-items:center;gap:6px;font-style:normal;font-size:.72rem;
  color:rgba(255,255,255,.6)}
.ticker-h i::before{content:"";width:7px;height:7px;border-radius:50%;background:#4ade80;
  animation:blip 1.8s ease-in-out infinite}
@keyframes blip{50%{opacity:.25}}
.ticker-list{position:relative;height:330px;overflow:hidden}
.ticker-item{position:absolute;inset:0;opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity .5s ease,transform .5s ease;display:flex;flex-direction:column;gap:12px;
  text-decoration:none;color:#fff}
.ticker-item.on{opacity:1;transform:none;pointer-events:auto}
.ticker-item img{border-radius:8px;height:160px;object-fit:cover;width:100%}
.ticker-item b{font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;font-weight:600;line-height:1.25}
.ticker-item p{font-size:.86rem;color:rgba(255,255,255,.72);margin:0;line-height:1.5}
.ticker-item u{display:inline-flex;align-items:center;gap:6px;text-decoration:none;color:var(--gold);
  font-size:.82rem;font-weight:600;margin-top:auto}
.ticker-bar{height:2px;background:rgba(255,255,255,.18);margin-top:16px;border-radius:2px;overflow:hidden}
.ticker-bar i{display:block;height:100%;background:var(--gold);width:0;animation:tick 5s linear infinite}
@keyframes tick{from{width:0}to{width:100%}}
.ticker-tabs{display:flex;gap:6px;margin-top:12px}
.ticker-tabs button{flex:1;height:3px;border:0;padding:0;background:rgba(255,255,255,.2);cursor:pointer;border-radius:2px}
.ticker-tabs button[aria-current="true"]{background:var(--gold)}
.hero-rail{display:flex;align-items:center;gap:18px;margin-top:38px;flex-wrap:wrap}
.hero-dots{display:flex;gap:14px;align-items:center}
.hero-dots button{background:none;border:0;padding:6px;cursor:pointer;line-height:0}
.hero-dots .star{opacity:.34;transition:opacity .25s,transform .25s;width:13px;height:13px}
.hero-dots button[aria-current="true"] .star{opacity:1;transform:scale(1.25)}
.hero-count{font-variant-numeric:tabular-nums;font-size:.85rem;letter-spacing:.1em;color:rgba(255,255,255,.7)}
.hero-ctrl{display:flex;gap:8px}
.hero-ctrl button{width:38px;height:38px;border:1px solid rgba(255,255,255,.3);background:none;
  color:#fff;border-radius:50%;cursor:pointer;display:grid;place-items:center;font-size:.85rem}
.hero-ctrl button:hover{border-color:var(--gold)}
.hero-line{font-size:.95rem;color:var(--gold);margin-bottom:14px;display:flex;align-items:center;gap:10px}

/* ======================  PATHWAY SPINE  ========================= */
.spine{position:fixed;left:18px;top:0;bottom:0;width:2px;background:rgba(7,43,110,.1);z-index:50;display:none}
@media (min-width:1280px){.spine{display:block}}
.spine i{position:absolute;top:0;left:0;width:100%;background:var(--gold);height:0}
.spine-bar{position:fixed;top:72px;left:0;right:0;height:2px;background:rgba(255,255,255,.12);z-index:98}
.spine-bar i{display:block;height:100%;width:0;background:var(--gold)}
@media (min-width:1280px){.spine-bar{display:none}}

/* ==========================  RAILS  ============================= */
.rail-head{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;
  flex-wrap:wrap;margin-bottom:28px}
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(230px,258px);gap:16px;
  overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:14px;
  scrollbar-width:thin;margin-inline:calc(var(--pad) * -1);padding-inline:var(--pad)}
.rail>*{scroll-snap-align:start}
.area{position:relative;display:block;border-radius:var(--r-l);overflow:hidden;text-decoration:none;
  color:#fff;aspect-ratio:3/4;background:var(--navy)}
.area img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .5s}
.area:hover img{transform:scale(1.05)}
.area::after{content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(4,28,74,.15) 30%,rgba(4,28,74,.92) 100%)}
.area-txt{position:absolute;inset:auto 0 0 0;padding:18px;z-index:2}
.area-txt h3{margin:0 0 4px;font-size:1.12rem}
.area-txt span{font-size:.82rem;color:var(--gold);font-variant-numeric:tabular-nums}

/* ==========================  COURSE CARDS  ====================== */
.cards{display:grid;gap:22px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr))}
.card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-l);overflow:hidden;text-decoration:none;color:inherit;
  transition:transform .2s,box-shadow .2s}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-2)}
.card img{aspect-ratio:16/9;object-fit:cover;width:100%}
.card-b{padding:18px 20px 22px;display:flex;flex-direction:column;flex:1}
.card-b h3{font-size:1.08rem;margin-bottom:6px}
.card-b p{font-size:.92rem;color:var(--muted);margin-bottom:14px}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:auto}
.chip{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;font-weight:600;
  border:1px solid var(--line);border-radius:var(--r-s);padding:4px 8px;color:var(--muted)}
.chip-gold{border-color:var(--gold);color:var(--gold-deep)}

/* ==========================  INDEX LIST  ======================== */
.index{border-top:1px solid var(--line-dark)}
.dark .index{border-color:var(--line-dark)}
.index-row{display:grid;grid-template-columns:44px 1fr;gap:14px;padding:22px 0;
  border-bottom:1px solid var(--line-dark);align-items:baseline}
@media (min-width:860px){.index-row{grid-template-columns:64px 1.1fr 1.4fr;gap:26px}}
.index-n{font-variant-numeric:tabular-nums;color:var(--gold);font-size:.85rem;letter-spacing:.08em}
.index-row h3{margin:0;font-size:1.15rem}
.index-row p{margin:8px 0 0;font-size:.95rem}
@media (min-width:860px){.index-row p{margin:0}}

/* ==========================  STEPS  ============================= */
.steps{display:grid;gap:18px;margin-top:34px;counter-reset:s}
@media (min-width:760px){.steps{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.steps{grid-template-columns:repeat(4,1fr);gap:20px}}
.step{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r-l);
  padding:26px 22px 24px;overflow:hidden;transition:transform .25s ease,box-shadow .25s ease}
.step::before{content:"";position:absolute;inset:0 0 auto 0;height:4px;background:var(--gold)}
.step:nth-child(2)::before{background:var(--blue-lift)}
.step:nth-child(3)::before{background:var(--gold-deep)}
.step:nth-child(4)::before{background:var(--navy)}
.step:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.step-n{display:grid;place-items:center;width:46px;height:46px;border-radius:12px;margin-bottom:16px;
  font-family:"Bricolage Grotesque",sans-serif;font-weight:600;font-size:1.05rem;
  background:var(--navy);color:var(--gold);font-variant-numeric:tabular-nums;
  transition:transform .3s ease}
.step:hover .step-n{transform:rotate(-6deg) scale(1.06)}
.step:nth-child(2) .step-n{background:#EDF2FC;color:var(--navy)}
.step:nth-child(3) .step-n{background:#FDF5E0;color:var(--gold-deep)}
.step:nth-child(4) .step-n{background:var(--tint);color:var(--navy)}
.step h3{font-size:1.02rem;margin:0 0 8px}
.step p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55}
.step-link{display:inline-flex;align-items:center;gap:6px;margin-top:14px;font-size:.85rem;
  font-weight:600;color:var(--navy);text-decoration:none}
.step-link:hover{color:var(--blue-lift)}
@media (min-width:1080px){
  .steps::before{content:"";position:absolute}
  .step::after{content:"";position:absolute;top:48px;right:-20px;width:20px;height:1px;
    background:var(--line)}
  .step:last-child::after{display:none}
  .steps{position:relative}
}

/* ==========================  PILLARS  =========================== */
.pillars{display:grid;gap:18px;margin-top:32px}
@media (min-width:640px){.pillars{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.pillars{grid-template-columns:repeat(4,1fr)}}
.pillar{border-radius:var(--r-l);padding:26px 22px;background:#EDF2FC;
  transition:transform .25s ease,box-shadow .25s ease}
.pillar:nth-child(2){background:#FDF5E0}
.pillar:nth-child(3){background:#E9EFFA}
.pillar:nth-child(4){background:#FAF4E2}
.pillar:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.pillar svg{width:30px;height:30px;stroke:var(--navy);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.pillar:nth-child(2) svg,.pillar:nth-child(4) svg{stroke:var(--gold-deep)}
.pillar h3{font-size:1.02rem;margin:0 0 6px}
.pillar p{font-size:.9rem;color:var(--muted);margin:0;line-height:1.55}

/* ==========================  LEAD EDITORIAL  ==================== */
.lead-grid{display:grid;gap:36px}
@media (min-width:960px){.lead-grid{grid-template-columns:.85fr 1.15fr;gap:64px;align-items:start}}
.lead-kicker{position:sticky;top:110px}
.lead-kicker h2{margin-bottom:14px}
.lead-kicker .bar{width:56px;height:3px;background:var(--gold);margin-bottom:18px}
.lead-body p:first-of-type{font-size:1.15rem;line-height:1.6;color:var(--ink)}
.lead-body p:first-of-type::first-letter{float:left;font-family:"Bricolage Grotesque",sans-serif;
  font-size:3.2rem;line-height:.82;font-weight:600;color:var(--navy);margin:4px 12px 0 0}
.facts{display:grid;gap:14px;margin-top:30px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
.fact{border-left:2px solid var(--gold);padding:4px 0 4px 14px}
.fact b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.35rem;color:var(--navy)}
.fact span{font-size:.84rem;color:var(--muted)}

/* ==========================  SPLIT  ============================= */
.split{display:grid;gap:40px;align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:64px}
  .split.flip>*:first-child{order:2}}
.split img{border-radius:var(--r-l);width:100%}
.stats{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:34px;max-width:520px}
.stat b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.9rem;
  font-variant-numeric:tabular-nums;line-height:1;color:var(--navy)}
.dark .stat b{color:var(--gold)}
.stat span{font-size:.88rem;color:var(--muted)}
.dark .stat span{color:rgba(255,255,255,.7)}

/* ==========================  MARQUEE  =========================== */
.marquee{overflow:hidden;mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marquee-in{display:flex;gap:56px;width:max-content;animation:slide 48s linear infinite}
.marquee:hover .marquee-in,.marquee:focus-within .marquee-in{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-50%)}}
.marquee img{height:74px;width:auto;object-fit:contain}

/* ==========================  FEATURE GRID  ====================== */
.feats{display:grid;gap:1px;background:rgba(245,208,106,.18);border:1px solid rgba(245,208,106,.18);
  border-radius:var(--r-l);overflow:hidden;grid-template-columns:repeat(1,1fr)}
@media (min-width:600px){.feats{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1000px){.feats{grid-template-columns:repeat(4,1fr)}}
.feat{background:var(--navy-deep);padding:26px 22px 24px;transition:background .25s}
.feat:hover{background:var(--blue)}
.feat svg{width:26px;height:26px;stroke:var(--gold);stroke-width:1.6;fill:none;
  stroke-linecap:round;stroke-linejoin:round;margin-bottom:16px}
.feat h3{font-size:1rem;margin:0 0 6px;color:#fff}
.feat p{font-size:.88rem;color:rgba(255,255,255,.7);margin:0;line-height:1.5}

/* ==========================  CREDENTIAL ROW  ==================== */
.creds{display:grid;gap:0;border-top:1px solid var(--line)}
@media (min-width:900px){.creds{grid-template-columns:repeat(5,1fr);border-top:0}}
.cred{padding:22px 0;border-bottom:1px solid var(--line)}
@media (min-width:900px){.cred{padding:26px 24px 26px 0;border-bottom:0;border-left:1px solid var(--line);
  padding-left:24px}.cred:first-child{border-left:0;padding-left:0}}
.cred img{height:52px;width:auto;object-fit:contain;margin-bottom:14px}
.cred b{display:block;font-family:"Bricolage Grotesque",sans-serif;font-size:1.02rem;
  letter-spacing:-.01em;margin-bottom:6px}
.cred span{display:block;font-size:.88rem;color:var(--muted);line-height:1.45}
.cred em{display:block;font-style:normal;font-size:.76rem;letter-spacing:.07em;text-transform:uppercase;
  color:var(--gold-deep);font-weight:600;margin-top:10px}

/* ==========================  PANEL  ============================= */
.person{display:block;text-decoration:none;color:inherit}
.person figure{margin:0 0 14px;border-radius:var(--r-l);overflow:hidden;background:var(--tint);
  aspect-ratio:4/5}
.person figure{position:relative}
.person img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.person:hover img{transform:scale(1.04)}
.person figure::after{content:"";position:absolute;inset:auto 0 0 0;height:0;background:var(--gold);
  transition:height .25s ease}
.person:hover figure::after{height:4px}
.person figure em{position:absolute;inset:auto 0 0 0;padding:34px 14px 14px;font-style:normal;
  font-size:.78rem;line-height:1.45;color:#fff;opacity:0;transform:translateY(8px);
  background:linear-gradient(180deg,rgba(4,28,74,0),rgba(4,28,74,.92));
  transition:opacity .3s ease,transform .3s ease}
.person:hover figure em,.person:focus-visible figure em{opacity:1;transform:none}
.person h3{font-size:.98rem;margin:0 0 4px}
.person .qual{font-size:.8rem;color:var(--ink);display:block;line-height:1.45}
.person .role{font-size:.78rem;color:var(--muted);display:block;margin-top:4px}
.dark .person .qual{color:rgba(255,255,255,.82)}
.dark .person .role{color:rgba(255,255,255,.6)}

/* ==========================  PHOTO SCROLLER  ==================== */
.scroller{overflow:hidden;
  mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.scroller-in{display:flex;gap:16px;width:max-content;animation:slide 42s linear infinite}
.scroller:hover .scroller-in{animation-play-state:paused}
.scroller figure{margin:0;width:340px;flex:none;border-radius:var(--r-l);overflow:hidden;
  transform:translateY(var(--y,0))}
.scroller img{width:100%;height:230px;object-fit:cover;display:block}
.scroller figcaption{font-size:.8rem;color:rgba(255,255,255,.66);padding:10px 2px 0}

/* ==========================  QUOTES  ============================ */
.quotes{display:grid;gap:20px;grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.quote{background:#fff;border:1px solid var(--line);border-radius:var(--r-l);padding:24px;
  display:flex;flex-direction:column;transition:box-shadow .2s,transform .2s}
.quote:hover{box-shadow:var(--shadow-2);transform:translateY(-2px)}
.quote p{font-size:.94rem;margin-bottom:18px;line-height:1.6}
.quote footer{font-size:.84rem;color:var(--muted);margin-top:auto;display:flex;gap:10px;align-items:center}
.quote .av{width:34px;height:34px;border-radius:50%;background:var(--navy);color:#fff;flex:none;
  display:grid;place-items:center;font-size:.85rem;font-weight:600}
.quote footer b{display:block;color:var(--ink);font-size:.88rem}
.gsum{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:30px;
  border:1px solid var(--line);border-radius:var(--r-l);padding:18px 22px;background:#fff}
.gsum .big{font-family:"Bricolage Grotesque",sans-serif;font-size:2rem;line-height:1;color:var(--navy)}
.gshots{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));margin-top:26px}
.gshots img{border-radius:var(--r-l);border:1px solid var(--line);width:100%}
.rate{display:flex;gap:3px;margin-bottom:14px}
.rate .star{width:14px;height:14px;background:var(--gold-deep)}

/* ==========================  SUBJECT GRID  ====================== */
.subgrid{display:grid;gap:12px;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));margin-top:20px}
.sub{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:16px 18px;
  border:1px solid var(--line);border-radius:var(--r-l);text-decoration:none;color:var(--ink);
  background:#fff;transition:border-color .2s,transform .2s,box-shadow .2s}
.sub:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:var(--shadow-1)}
.sub b{font-weight:600;font-size:.96rem;display:block}
.sub small{color:var(--muted);font-size:.8rem}
.sub .arw{width:26px;height:26px;border-radius:50%;background:var(--tint);display:grid;place-items:center;
  color:var(--navy);font-size:.8rem;flex:none;transition:background .2s,color .2s,transform .2s}
.sub:hover .arw{background:var(--gold);transform:translateX(2px)}

/* ==========================  COURSE PAGE  ======================= */
.crumb{font-size:.85rem;color:var(--muted);padding:18px 0;display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.crumb a{color:var(--muted);text-decoration:none}
.crumb a:hover{color:var(--navy)}
.crumb .star{width:.55em;height:.55em;background:var(--gold-deep)}
.chero{background:var(--navy);color:#fff;padding-block:clamp(40px,5vw,64px)}
.chero h1,.chero h2{color:#fff}
.chero .lede,.chero p{color:rgba(255,255,255,.82)}
.chero .meta{color:var(--gold)}
.chero a:not(.btn){color:var(--gold)}
.chero-grid{display:grid;gap:34px}
@media (min-width:960px){.chero-grid{grid-template-columns:1.15fr .85fr;gap:56px;align-items:center}}
.chero img{border-radius:var(--r-l)}
.snap{display:grid;gap:0;border-top:1px solid var(--line)}
.snap div{display:grid;grid-template-columns:minmax(120px,180px) 1fr;gap:18px;padding:14px 0;
  border-bottom:1px solid var(--line);align-items:baseline}
.snap dt{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;font-weight:600;color:var(--muted)}
.snap dd{margin:0}
.ticks{list-style:none;padding:0;margin:0;display:grid;gap:14px}
.ticks li{display:grid;grid-template-columns:18px 1fr;gap:12px;align-items:start}
.ticks .star{width:11px;height:11px;margin-top:7px}
.mods{counter-reset:m;border-top:1px solid var(--line)}
.mod{border-bottom:1px solid var(--line);padding:20px 0;display:grid;gap:6px;
  grid-template-columns:44px 1fr}
.mod b{counter-increment:m;font-variant-numeric:tabular-nums;color:var(--gold-deep);font-weight:600;font-size:.85rem}
.mod b::before{content:counter(m,decimal-leading-zero)}
.mod h3{font-size:1.05rem;margin:0 0 4px}
.mod p{margin:0;font-size:.95rem;color:var(--muted)}
.pills{display:flex;flex-wrap:wrap;gap:10px;list-style:none;padding:0;margin:0}
.pills li{border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.92rem}
.dark .pills li{border-color:rgba(255,255,255,.28)}

/* ==========================  ACCORDION  ========================= */
details{border-bottom:1px solid var(--line);padding:4px 0}
details summary{list-style:none;cursor:pointer;padding:18px 34px 18px 0;position:relative;
  font-weight:600;font-size:1.02rem}
details summary::-webkit-details-marker{display:none}
details summary::after{content:"";position:absolute;right:6px;top:24px;width:9px;height:9px;
  border-right:2px solid var(--gold-deep);border-bottom:2px solid var(--gold-deep);
  transform:rotate(45deg);transition:transform .22s}
details[open] summary::after{transform:rotate(-135deg)}
details p{padding-bottom:16px;color:var(--muted);margin:0}

/* ==========================  FORMS  ============================= */
.form{display:grid;gap:18px;max-width:640px}
.field{display:grid;gap:6px}
.field label{font-size:.88rem;font-weight:600}
.field input,.field select,.field textarea{
  font:inherit;padding:12px 14px;min-height:48px;border:1px solid var(--line);
  border-radius:var(--r-s);background:#fff;color:var(--ink);width:100%}
.field textarea{min-height:120px;resize:vertical}
.field small{color:var(--muted);font-size:.82rem}
.two{display:grid;gap:18px}
@media (min-width:640px){.two{grid-template-columns:1fr 1fr}}
.hp{position:absolute;left:-9999px}

/* ==========================  FOOTER  ============================ */
.ftr{background:var(--navy-deep);color:rgba(255,255,255,.72);padding-block:56px 28px;font-size:.9rem}
.ftr-grid{display:grid;gap:36px}
@media (min-width:760px){.ftr-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1080px){.ftr-grid{grid-template-columns:1.5fr 1fr 1fr 1.15fr}}
.ftr h4{color:#fff;font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;
  font-family:"Instrument Sans",sans-serif;font-weight:700;margin:0 0 14px}
.ftr ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.ftr a{color:rgba(255,255,255,.76);text-decoration:none}
.ftr a:hover{color:var(--gold)}
.ftr img.logo{height:54px;margin-bottom:16px}
.ftr-btm{margin-top:48px;padding-top:22px;border-top:1px solid rgba(255,255,255,.12);
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:.85rem}

/* ==========================  FLOATING  ========================== */
.wa{position:fixed;right:20px;bottom:20px;z-index:90;width:56px;height:56px;border-radius:50%;
  background:#25D366;display:grid;place-items:center;box-shadow:var(--shadow-2)}
.wa svg{width:28px;height:28px;fill:#fff}
.wa::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid #25D366;
  animation:pulse 2.6s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7}70%{transform:scale(1.5);opacity:0}100%{opacity:0}}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:91;display:flex;gap:10px;padding:10px var(--pad);
  background:rgba(7,43,110,.97);border-top:1px solid rgba(255,255,255,.12)}
.mbar .btn{flex:1;justify-content:center}
@media (min-width:900px){.mbar{display:none}}
@media (max-width:899px){.wa{bottom:82px;width:50px;height:50px}body{padding-bottom:70px}}

/* ==========================  REVEAL  ============================ */
.rv{opacity:0;transform:translateY(12px);transition:opacity .55s ease,transform .55s ease}
.rv.in{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .hero-media img{transform:none}
  .hero-arc path{stroke-dashoffset:0}
}