:root{
  --navy:#0b2447; --navy-2:#123a6b; --blue:#1d63b8; --gold:#d4a72c; --gold-2:#f0c75e;
  --gold-ink:#86680f; /* accessible gold for text on light surfaces (>=4.5:1) */
  --ink:#182234; --muted:#5d6a80; --line:#e3e8f0; --bg:#f6f8fb; --white:#fff;
  --r:16px; --shadow:0 12px 32px rgba(11,36,71,.10);
  --font-display:'Source Serif 4',Georgia,'Times New Roman',serif;
  --font-body:'Hanken Grotesk','Noto Sans Khmer',system-ui,-apple-system,sans-serif;
  --focus:0 0 0 3px rgba(212,167,44,.6);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--font-body);color:var(--ink);background:var(--bg);line-height:1.65;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
h1,h2,h3,.serif{font-family:var(--font-display);line-height:1.15}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.wrap{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:68px 0}

/* accessibility: visible keyboard focus + text selection */
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px}
a:focus-visible,button:focus-visible,summary:focus-visible,.cta:focus-visible,.ghost:focus-visible{outline:none;box-shadow:var(--focus)}
::selection{background:var(--gold-2);color:var(--navy)}

/* editorial ruled eyebrow (magazine small-caps kicker) */
.tag{display:inline-flex;align-items:center;gap:11px;color:var(--gold-ink);font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;margin-bottom:14px}
.tag::before{content:"";width:26px;height:1.5px;background:var(--gold)}
.center .tag{justify-content:center}
.sec-h{font-size:clamp(1.8rem,3.3vw,2.55rem);color:var(--navy);margin-bottom:14px;letter-spacing:-.015em;line-height:1.12}
.lead{color:var(--muted);max-width:64ch;font-size:1.02rem}
.center{text-align:center}.center .lead{margin:0 auto}

/* utility bar */
.util{background:var(--navy);color:#b9c8e2;font-size:.8rem}
.util .wrap{display:flex;justify-content:space-between;align-items:center;height:40px;gap:12px}
.util a{color:#d7e2f5}.util a:hover{color:var(--gold-2)}
.util .r a{margin-left:16px}

/* nav */
nav{position:sticky;top:0;z-index:99;background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
nav .wrap{display:flex;align-items:center;justify-content:space-between;height:74px}
.brand{display:flex;gap:12px;align-items:center}
.brand .logo{width:54px;height:54px;border-radius:50%;object-fit:contain;background:#fff}
.mark{width:46px;height:46px;border-radius:50%;border:2.5px solid var(--navy);display:flex;align-items:center;justify-content:center;font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:.72rem;text-align:center;line-height:1}
.brand .t b{display:block;color:var(--navy);font-size:.98rem;font-weight:800}
.brand .t span{font-size:.7rem;color:var(--muted);letter-spacing:.06em}
/* .cta is used on both <a> and <button>; reset the button chrome so the two are
   indistinguishable */
.cta{background:var(--gold);color:var(--navy);font-weight:800;padding:12px 24px;border-radius:999px;font-size:.88rem;transition:.2s;white-space:nowrap;border:none;cursor:pointer;font-family:var(--font-body);display:inline-block}
.cta:hover{background:var(--gold-2);transform:translateY(-1px)}

/* breadcrumb */
.crumbs{position:relative;z-index:1;font-size:.78rem;color:#9db2d4;margin-bottom:26px;letter-spacing:.02em}
.crumbs a{color:#c5d3ea}.crumbs a:hover{color:var(--gold-2)}
.crumbs span{margin:0 8px;color:#5d7cb0}

/* sticky in-page subnav (NTU-style) */
.subnav{position:sticky;top:74px;z-index:90;background:var(--navy);border-bottom:1px solid rgba(255,255,255,.1)}
.subnav .wrap{display:flex;gap:4px;overflow-x:auto;scrollbar-width:none}
.subnav a{color:#b9c8e2;font-size:.85rem;font-weight:600;padding:15px 18px;border-bottom:3px solid transparent;white-space:nowrap}
.subnav a:hover{color:#fff}
.subnav a.active{color:var(--gold-2);border-color:var(--gold)}

/* at-a-glance facts strip */
.glance{background:var(--bg);border-bottom:1px solid var(--line)}
.glance .wrap{display:grid;grid-template-columns:repeat(6,1fr);gap:0;padding:0 24px}
.gl{padding:26px 18px;border-left:1px solid var(--line);text-align:left}
.gl:first-child{border-left:none}
.gl small{display:block;font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:4px}
.gl b{font-size:1.02rem;color:var(--navy)}

/* curriculum accordion */
.acc{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;margin-bottom:16px;background:#fff}
.acc summary{cursor:pointer;list-style:none;background:linear-gradient(90deg,var(--navy),var(--navy-2));color:#fff;padding:18px 24px;display:flex;justify-content:space-between;align-items:center;font-weight:800;font-size:1rem;font-family:var(--font-body)}
.acc summary::-webkit-details-marker{display:none}
.acc summary span{margin-left:auto;font-size:.75rem;color:var(--gold-2);letter-spacing:.08em;text-transform:uppercase;font-weight:700;white-space:nowrap}
.acc summary::after{content:"+";font-family:var(--font-display);font-size:1.5rem;color:var(--gold-2);margin-left:16px;transition:.25s}
.acc[open] summary::after{transform:rotate(45deg)}
.acc .inner{display:grid;grid-template-columns:1fr 1fr}
.acc .sem+.sem{border-top:none;border-left:1px dashed var(--line)}

/* reveal animation */
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.rv.in{opacity:1;transform:none}

/* ---- page transitions ----
   The news pages are ~5KB off a CDN edge with everything else already cached,
   so they paint in about 130ms. With no transition that reads as a jump cut:
   the eye expects something between A and B and gets nothing. These give the
   navigation a beat without slowing anything down.

   Cross-document view transitions (Chrome/Edge) cross-fade between pages. */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vtOut .18s ease both}
::view-transition-new(root){animation:vtIn .28s ease both}
@keyframes vtOut{to{opacity:0}}
@keyframes vtIn{from{opacity:0;transform:translateY(8px)}}

/* Browsers without view transitions (Safari, Firefox) still get an entrance,
   and this also covers the very first load, which view transitions never
   animate because there is no previous page to come from. Only direct children
   animate: animating .art too would compound the opacities into a double
   fade. */
.newspage .art-back{animation:artIn .45s cubic-bezier(.22,.61,.36,1) both}
.newspage .art-head{animation:artIn .5s cubic-bezier(.22,.61,.36,1) .04s both}
.newspage .art-hero{animation:artIn .55s cubic-bezier(.22,.61,.36,1) .1s both}
.newspage .art-body{animation:artIn .55s cubic-bezier(.22,.61,.36,1) .16s both}
.newspage .art-facts,.newspage .art-foot,.newspage .art-more{animation:artIn .55s cubic-bezier(.22,.61,.36,1) .22s both}
@keyframes artIn{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}

@media (prefers-reduced-motion: reduce){
  @view-transition{navigation:none}
  .newspage .art-back,.newspage .art-head,.newspage .art-hero,.newspage .art-body,
  .newspage .art-facts,.newspage .art-foot,.newspage .art-more{animation:none}
}
@media (prefers-reduced-motion: reduce){.rv{opacity:1;transform:none;transition:none}}

/* related programs */
.rel{background:var(--bg)}
.relcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;transition:.22s;display:block}
.relcard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.relcard span{font-size:.72rem;color:var(--gold);font-weight:800;letter-spacing:.12em;text-transform:uppercase}
.relcard h3{color:var(--navy);font-family:var(--font-body);font-weight:800;font-size:1.05rem;margin:6px 0 8px}
.relcard p{color:var(--muted);font-size:.88rem}
.relcard b{display:inline-block;margin-top:12px;color:var(--navy);font-size:.85rem}

/* back to top */
#toTop{position:fixed;right:22px;bottom:22px;width:46px;height:46px;border-radius:50%;background:var(--navy);color:var(--gold-2);border:none;font-size:1.2rem;cursor:pointer;opacity:0;pointer-events:none;transition:.3s;z-index:98;box-shadow:0 6px 18px rgba(11,36,71,.35)}
#toTop.show{opacity:1;pointer-events:auto}

@media(max-width:960px){
  .glance .wrap{grid-template-columns:repeat(2,1fr)}
  .gl{border-left:none;border-top:1px solid var(--line)}
  .acc .inner{grid-template-columns:1fr}
  .acc .sem+.sem{border-left:none;border-top:1px dashed var(--line)}
  .subnav{top:74px}
}

/* hero */
.hero{position:relative;background:linear-gradient(118deg,var(--navy) 0%,var(--navy-2) 58%,#1b4c8f 100%);color:#fff;overflow:hidden}
.hero::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 380px at 85% 15%,rgba(212,167,44,.22),transparent 60%)}
.hero .wrap{position:relative;display:grid;grid-template-columns:1.15fr .85fr;gap:52px;align-items:center;padding:96px 24px}
.hero-logo{width:92px;height:92px;border-radius:50%;object-fit:contain;padding:5px;box-shadow:0 8px 28px rgba(0,0,0,.35);background:#fff}
.kick{display:inline-flex;align-items:center;gap:8px;background:rgba(212,167,44,.14);border:1px solid rgba(212,167,44,.5);color:var(--gold-2);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 16px;border-radius:999px;margin-bottom:22px}
.hero h1 em{font-style:normal;color:var(--gold-2)}
.hero-actions{display:flex;gap:14px;flex-wrap:wrap}
.ghost{border:1.5px solid rgba(255,255,255,.45);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;font-size:.88rem}
.ghost:hover{border-color:var(--gold-2);color:var(--gold-2)}
.hero-card{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:var(--r);padding:30px;backdrop-filter:blur(6px)}
.hero-card h3{font-family:var(--font-body);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);margin-bottom:16px}
.dl{display:flex;justify-content:space-between;gap:10px;padding:13px 0;border-bottom:1px solid rgba(255,255,255,.13);font-size:.92rem}
.dl:last-of-type{border:none}
.dl span{color:#a9bbdb}.dl b{color:#fff;text-align:right}
.hero-card .cta{display:block;text-align:center;margin-top:18px}

/* stats */
.stats{background:var(--bg);border-bottom:1px solid var(--line)}
.stats .wrap{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;padding:40px 24px;text-align:center}
.stat b{display:block;font-family:var(--font-display);font-size:clamp(2.3rem,3.4vw,3rem);font-weight:600;color:var(--navy)}
.stat small{font-size:.8rem;color:var(--muted);line-height:1.4;display:block}

/* photo frames */
.ph{position:relative;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#0f2c55,#1d63b8);min-height:230px;display:flex;align-items:flex-end}
.ph img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ph::before{content:"";position:absolute;inset:0;background:radial-gradient(300px 160px at 20% 20%, rgba(212,167,44,.25), transparent 60%),repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 12px, transparent 12px 24px)}
.ph .cap{position:relative;width:100%;padding:14px 16px;background:linear-gradient(transparent,rgba(11,36,71,.85));color:#dbe6f7;font-size:.75rem;letter-spacing:.02em;z-index:1}
.ph .cap b{color:var(--gold-2);display:block;font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;margin-bottom:2px}

/* cards & grids */
.g2{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.g3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.g4{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;box-shadow:0 2px 10px rgba(11,36,71,.04);transition:.22s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.card h3{font-size:1.06rem;color:var(--navy);margin-bottom:8px;font-family:var(--font-body);font-weight:800}
.card p{font-size:.9rem;color:var(--muted)}
.num{font-family:var(--font-display);font-size:1.5rem;color:var(--gold);font-weight:700}

/* reasons */
.reasons{background:var(--navy);color:#fff}
.reasons .sec-h{color:#fff}
.reasons .lead{color:#b9c8e2}
.reason{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);padding:24px}
.reason b{display:flex;gap:10px;align-items:baseline;color:var(--gold-2);margin-bottom:8px;font-size:.98rem}
.reason b i{font-style:normal;font-family:var(--font-display);font-size:1.3rem;opacity:.85}
.reason p{color:#c5d3ea;font-size:.88rem}
.reason.hl{background:rgba(212,167,44,.16);border-color:rgba(212,167,44,.5)}
.reason.ctacell{display:flex;align-items:center;justify-content:center}

/* curriculum */
.curr{background:var(--bg)}
.yeargrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.year{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.year header{background:linear-gradient(90deg,var(--navy),var(--navy-2));color:#fff;padding:16px 22px;display:flex;justify-content:space-between;align-items:center}
.year header h3{font-family:var(--font-body);font-weight:800;font-size:1rem}
.year header span{font-size:.75rem;color:var(--gold-2);letter-spacing:.08em;text-transform:uppercase}
.sem{padding:18px 22px}
.sem+.sem{border-top:1px dashed var(--line)}
.sem h4{font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);margin-bottom:10px}
.sem ul{list-style:none}
.sem li{font-size:.9rem;padding:5px 0 5px 22px;position:relative;color:#33415c}
.sem li::before{content:"▸";position:absolute;left:2px;color:var(--gold)}
.credit-note{margin-top:26px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:20px 24px;font-size:.9rem;color:var(--muted);display:flex;gap:28px;flex-wrap:wrap}
.credit-note b{color:var(--navy)}

/* global */
.dest-table{width:100%;border-collapse:collapse;font-size:.88rem;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(11,36,71,.05)}
.dest-table th{background:var(--navy);color:#fff;text-align:left;padding:12px 16px;font-size:.75rem;letter-spacing:.1em;text-transform:uppercase}
.dest-table td{padding:10px 16px;border-bottom:1px solid var(--line);color:#33415c}
.dest-table tr:last-child td{border:none}
.bar{height:8px;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-2));display:inline-block;vertical-align:middle}
.partners{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.chip{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 18px;font-size:.82rem;font-weight:600;color:var(--navy)}
.chip.hl{background:var(--navy);color:var(--gold-2);border-color:var(--navy)}

/* tiers */
/* editorial pathway cards — no slab bar, no emoji bullets. A ruled duration
   eyebrow, a serif title, then the programmes as a clean bordered list. */
.tier{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 8px;transition:transform .2s,box-shadow .2s,border-color .2s}
.tier:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.tier span{display:inline-flex;align-items:center;gap:9px;font-size:.68rem;color:var(--gold-ink);font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.tier span::before{content:"";width:16px;height:1.5px;background:var(--gold)}
.tier h3{color:var(--navy);font-size:1.2rem;margin:11px 0 6px;font-family:var(--font-display);font-weight:600;line-height:1.2;letter-spacing:-.01em}
.tier ul{list-style:none}
.tier li{font-size:.88rem;color:#33415c;padding:11px 0 11px 20px;position:relative;border-top:1px solid var(--line)}
.tier li::before{content:"";position:absolute;left:0;top:18px;width:8px;height:1.5px;background:var(--gold)}

/* admissions */
.adm{background:linear-gradient(180deg,#fff,#f2f6fc)}
.fee{background:var(--navy);color:#fff;border-radius:var(--r);padding:34px;position:relative;overflow:hidden}
.fee::after{content:"";position:absolute;right:-70px;top:-70px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(212,167,44,.3),transparent 65%)}
.fee .amount{font-family:var(--font-display);font-size:3rem;color:var(--gold-2)}
.fee p{color:#c5d3ea;font-size:.92rem}
.fee ul{list-style:none;margin-top:14px}
.fee li{padding:8px 0;border-bottom:1px solid rgba(255,255,255,.14);font-size:.92rem;display:flex;justify-content:space-between;gap:12px}
.fee li:last-child{border:none}
.steps{counter-reset:s}
.stepc{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 26px 30px;position:relative;margin-bottom:16px}
.stepc::before{counter-increment:s;content:counter(s);position:absolute;left:-16px;top:24px;width:34px;height:34px;border-radius:50%;background:var(--gold);color:var(--navy);font-weight:800;display:flex;align-items:center;justify-content:center;font-size:.95rem;box-shadow:0 4px 10px rgba(212,167,44,.4)}
.stepc h3{font-size:1rem;color:var(--navy);font-family:var(--font-body);font-weight:800;margin-bottom:6px}
.stepc p{font-size:.88rem;color:var(--muted)}
/* step 1 opens the on-page entrance-exam form rather than sending people off to
   an external portal — styled as a text action so it doesn't compete with the
   solid CTA in the deadline banner below */
.stepc-go{margin-top:12px;background:none;border:0;padding:0;cursor:pointer;font-family:inherit;
  font-size:.87rem;font-weight:700;color:var(--gold-ink);display:inline-flex;align-items:center;gap:7px}
.stepc-go span{transition:transform .2s}
.stepc-go:hover span{transform:translateX(4px)}
.stepc-go:hover{text-decoration:underline;text-underline-offset:3px}
@media(prefers-reduced-motion:reduce){.stepc-go span{transition:none}}
.deadline-banner{margin-top:26px;background:linear-gradient(90deg,var(--gold),var(--gold-2));border-radius:var(--r);padding:22px 28px;display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.deadline-banner b{color:var(--navy);font-size:1.05rem}
.deadline-banner .cta{background:var(--navy);color:#fff}

/* outcomes */
.donut{display:flex;gap:26px;flex-wrap:wrap}
.oc{flex:1;min-width:200px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px;text-align:center}
.oc b{font-family:var(--font-display);font-size:2.3rem;color:var(--navy);display:block}
.oc small{color:var(--muted);font-size:.82rem}
.rank{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:6px 0;margin-top:26px}
.rank div{display:flex;gap:14px;align-items:center;padding:12px 22px;border-bottom:1px solid var(--line);font-size:.92rem;color:#33415c}
.rank div:last-child{border:none}
.rank i{font-style:normal;font-family:var(--font-display);color:var(--gold);font-weight:700;width:20px}

/* voices */
.voice{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px}
.voice p{font-size:.92rem;color:#33415c;font-style:italic;margin-bottom:14px}
.voice b{color:var(--navy);font-size:.9rem}
.voice small{display:block;color:var(--muted);font-size:.78rem}

/* footer */
footer{background:var(--navy);color:#a9bbdb;padding:64px 0 30px;font-size:.9rem}
.fgrid{display:grid;grid-template-columns:2fr 1fr 1fr 1.2fr;gap:38px;margin-bottom:40px}
footer h4{color:#fff;font-size:.95rem;margin-bottom:14px}
footer a{display:block;padding:4px 0}
footer a:hover{color:var(--gold-2)}
.copy{border-top:1px solid rgba(255,255,255,.14);padding-top:22px;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:.78rem}

@media(max-width:960px){
  .hero .wrap{grid-template-columns:1fr;padding:64px 24px}
  .stats .wrap{grid-template-columns:repeat(2,1fr)}
  .g2,.g3,.g4,.yeargrid,.fgrid{grid-template-columns:1fr}
}

/* ============ editorial-academic polish ============ */

/* ---- about the college ----
   Opens with a claim and a single lede rather than three equal grey paragraphs;
   the supporting detail is broken into labelled notes so it can be skimmed. The
   accreditation line that used to sit here is gone: the logo grid further down
   makes the same point with actual evidence. */
/* ── About: bento hero ──────────────────────────────────────────────────
   The top is a single bento. A big text tile (eyebrow, headline, lede, and a
   credential strip anchoring the bottom) spans both rows on the left; a
   collage of program photos fills the 2-row grid on the right. The grid is
   always full, so there is no dead space beside the text, and the headline no
   longer needs a highlighter — the accent word simply goes gold. */
.abt-hero{display:grid;grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:1fr 1fr;gap:clamp(12px,1.3vw,16px);min-height:clamp(380px,37vw,470px);padding-bottom:clamp(30px,3.4vw,44px)}
.abt-hero-text{grid-column:1;grid-row:1/3;display:flex;flex-direction:column;justify-content:space-between;padding-right:clamp(6px,1vw,14px)}
.abt-hero-text .sec-h{margin:14px 0;text-wrap:balance;font-size:clamp(2rem,3.5vw,3.35rem);line-height:1.02;letter-spacing:-.03em}
/* accent word: a clean gold colour, no marker sweep */
.abt-hero-text .hl{color:var(--gold-ink)}
.abt-hero-text .abt-lede{font-size:clamp(1rem,1.15vw,1.15rem);line-height:1.6;color:var(--ink);max-width:48ch}
/* credential strip fills the bottom of the text tile so nothing floats */
.abt-meta{list-style:none;display:flex;flex-wrap:wrap;gap:9px 20px;margin-top:20px;font-size:.76rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--navy)}
.abt-meta li{position:relative;padding-left:16px}
.abt-meta li::before{content:"";position:absolute;left:0;top:50%;width:7px;height:7px;background:var(--gold);border-radius:50%;transform:translateY(-50%)}
/* photo tiles: navy gradient shows through if an image is missing */
.abt-tile{position:relative;margin:0;border-radius:var(--r);overflow:hidden;background:linear-gradient(135deg,#0f2c55,#1d63b8);box-shadow:var(--shadow)}
.abt-tile--a{grid-column:2;grid-row:1}
.abt-tile--b{grid-column:3;grid-row:1}
.abt-tile--c{grid-column:2/4;grid-row:2}
.abt-tile img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;will-change:transform}
/* always-on Ken Burns on two tiles, different timings so they never sync */
.abt-tile--a img{animation:kb-a 22s ease-in-out infinite alternate}
.abt-tile--c img{animation:kb-b 27s ease-in-out infinite alternate}
@keyframes kb-a{from{transform:scale(1.05) translate(0,0)}to{transform:scale(1.13) translate(-1.5%,-1%)}}
@keyframes kb-b{from{transform:scale(1.1) translate(1%,.5%)}to{transform:scale(1.04) translate(0,-1%)}}
@media(prefers-reduced-motion:reduce){.abt-tile img{animation:none}}
/* label only on the flagship wide tile */
.abt-tile--c::after{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(7,22,45,.82),rgba(7,22,45,.12) 52%,transparent 72%);z-index:1;pointer-events:none}
.abt-tile figcaption{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:15px 17px 14px;color:#eef3fb;font-size:.8rem;line-height:1.4;text-shadow:0 1px 3px rgba(0,0,0,.6)}
.abt-tile figcaption b{display:block;color:var(--gold-2);text-transform:uppercase;letter-spacing:.12em;font-size:.66rem;font-weight:800;margin-bottom:2px}
/* stacked: text on top, then a small pair, then the wide flagship tile */
@media(max-width:900px){
  .abt-hero{grid-template-columns:1fr 1fr;grid-template-rows:none;min-height:0;gap:14px}
  .abt-hero-text{grid-column:1/3;grid-row:auto;padding-right:0}
  .abt-hero-text .sec-h{font-size:clamp(2rem,7.4vw,2.7rem)}
  .abt-tile{grid-column:auto;grid-row:auto;aspect-ratio:4/3}
  .abt-tile--c{grid-column:1/3;aspect-ratio:16/9}
}
/* The narrative body: a short serif rail on the left keys the section, the
   prose carries the actual story of the program on the right. The two-track
   split (narrow label / wide reading column) is the same editorial move as
   .abt-top, so the block reads as a continuation rather than a new pattern. */
.abt-body{display:grid;grid-template-columns:minmax(0,.34fr) minmax(0,.66fr);gap:clamp(28px,5vw,64px);align-items:start;padding-top:clamp(34px,3.6vw,48px);border-top:1px solid var(--line)}
.abt-kick{display:block;font-size:.72rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:6px}
/* the founding year is the section's editorial anchor: a single oversized
   display numeral that gives the story block a strong left-hand focal point
   instead of a paragraph of caption text */
.abt-year{display:block;font-family:var(--font-display);font-size:clamp(3.6rem,7.5vw,5.6rem);line-height:.92;font-weight:600;color:var(--navy);letter-spacing:-.03em;margin-bottom:16px}
.abt-year::after{content:"";display:block;width:52px;height:4px;background:var(--gold);border-radius:2px;margin-top:16px}
/* the rail note is set in the display serif so it reads as a caption/standfirst,
   distinct in voice from the grotesk prose beside it rather than a size step
   away from it */
.abt-est{font-size:1.02rem;line-height:1.6;color:var(--muted);max-width:30ch}
.abt-story{max-width:64ch}
.abt-story p{color:var(--ink);font-size:1.06rem;line-height:1.78;margin-bottom:1.05em}
.abt-story p:last-child{margin-bottom:0}
/* The living band: a continuous, full-bleed ribbon of real student faces that
   drifts sideways. Two identical halves in the track + translateX(-50%) makes
   a seamless loop; a soft edge mask lets faces enter and leave rather than clip.
   Hover pauses it so a face can be looked at. This is the section's pulse. */
.facewall{margin:clamp(38px,4.4vw,60px) 0 0;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.facewall-track{display:flex;gap:14px;width:max-content;animation:facescroll 70s linear infinite}
.facewall img{width:clamp(84px,9vw,124px);aspect-ratio:1/1;object-fit:cover;border-radius:16px;box-shadow:0 6px 16px rgba(11,36,71,.12);filter:grayscale(.12)}
.facewall:hover .facewall-track{animation-play-state:paused}
@keyframes facescroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
/* reduced motion: no drift — the faces settle into a centered wrapped grid */
@media(prefers-reduced-motion:reduce){
  .facewall{-webkit-mask-image:none;mask-image:none}
  .facewall-track{animation:none;flex-wrap:wrap;justify-content:center;width:auto}
}
/* Four things that define how the program actually runs. These are block
   cards you can feel: a gold rule that grows on hover, a lift, and a shadow —
   the interaction is what makes the set feel alive rather than static. */
.abt-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,1.6vw,22px);padding-top:clamp(40px,4vw,56px);margin-top:clamp(40px,4vw,56px);border-top:1px solid var(--line)}
.abt-step{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:26px 22px 26px;overflow:hidden;transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease,border-color .28s ease}
/* the gold rule spans the full top edge on hover, keying the card to the
   accent. driven by scaleX (transform-only, no layout) from a short stub to
   full width; transform-origin:left so it grows rightward */
.abt-step::before{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:var(--gold);transform:scaleX(.16);transform-origin:left;transition:transform .3s cubic-bezier(.2,.7,.3,1)}
.abt-step:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:transparent}
.abt-step:hover::before{transform:scaleX(1)}
.abt-step h3{font-family:var(--font-display);font-size:1.24rem;color:var(--navy);margin:12px 0 9px;line-height:1.16;letter-spacing:-.015em}
.abt-step p{color:var(--muted);font-size:.94rem;line-height:1.62}
@media(prefers-reduced-motion:reduce){.abt-step,.abt-step::before{transition:none}}
@media(max-width:900px){
  .abt-hero-text .abt-lede{max-width:none}
  /* stacked: the rail label drops above the prose it introduces */
  .abt-body{grid-template-columns:1fr;gap:16px;padding-top:30px}
  .abt-story{max-width:none}
  /* 16px floor: below this iOS zooms the page on focus and the copy gets hard
     to read at arm's length */
  .abt-story p{font-size:1.02rem}
  .abt-steps{grid-template-columns:repeat(2,1fr);gap:24px 22px;padding-top:32px;margin-top:32px}
  .abt-tile figcaption{font-size:.78rem}
}
@media(max-width:560px){
  .abt-steps{grid-template-columns:1fr;gap:22px}
}

/* pull-quote treatment for student voices */
.voice{position:relative;padding-top:34px}
.voice::before{
  content:"\201C";position:absolute;top:8px;left:22px;
  font-family:var(--font-display);font-size:3.2rem;line-height:1;color:var(--gold-2);
}

/* refined stat presentation with a gold rule */
.stat b{letter-spacing:-.02em}
.stat b::after{content:"";display:block;width:26px;height:2px;background:var(--gold);margin:8px auto 0;opacity:.75}

/* hero heading + card refinements */
.hero h1{letter-spacing:-.02em}
.hero-card h3::after{content:"";display:block;width:30px;height:2px;background:var(--gold);margin-top:8px}

/* centered section headings get a subtle gold rule */
.center .sec-h{position:relative;display:block;padding-bottom:16px}
.center .sec-h::after{content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:56px;height:3px;background:var(--gold);border-radius:2px}

/* partner/career badges are static informational labels, not buttons */
.chip{cursor:default}

@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}

/* ============ flag destination ranking ============ */
.destlist{background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;box-shadow:0 2px 10px rgba(11,36,71,.05)}
.destlist .dhead{display:flex;justify-content:space-between;background:var(--navy);color:#fff;padding:14px 18px;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;font-weight:700}
.destlist .dhead span:last-child{color:var(--gold-2)}
.drow{display:grid;grid-template-columns:34px 1fr 52px;align-items:center;gap:14px;padding:12px 18px;border-top:1px solid var(--line)}
.drow .flag{font-size:1.5rem;line-height:1;text-align:center}
.drow .dname{font-weight:700;color:var(--navy);font-size:.9rem;margin-bottom:6px}
.drow .dbar{height:7px;border-radius:99px;background:linear-gradient(90deg,var(--gold),var(--gold-2))}
.drow .dcount{font-family:var(--font-display);font-weight:700;color:var(--navy);font-size:1.2rem;text-align:right}
.drow.more{grid-template-columns:34px 1fr;color:var(--muted)}
.drow.more .flag{font-size:1.2rem}
.drow.more span:last-child{font-size:.82rem;color:var(--muted)}

/* partner badges with heading */
.partnerbox{margin-top:22px}
.plabel{display:block;font-size:.78rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:12px}
.chip.hl{background:#fff;border:1.5px solid var(--gold);color:var(--navy)}
.chip.hl::after{content:"3+1";margin-left:8px;font-size:.62rem;font-weight:800;letter-spacing:.05em;color:var(--gold-ink);background:rgba(212,167,44,.16);padding:2px 7px;border-radius:99px;vertical-align:middle}

/* selection criteria as concise numbered pills */
.selsteps{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.selstep{display:flex;align-items:center;gap:10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:6px 18px 6px 6px}
.selstep i{font-style:normal;width:28px;height:28px;border-radius:50%;background:var(--navy);color:var(--gold-2);font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center;font-family:var(--font-display)}
.selstep span{font-size:.86rem;font-weight:600;color:#33415c}

/* ============ graduate outcome rings ============ */
/* outcomes opens tighter than the other tabs — its header sat too far below the
   nav, so the top pad is trimmed 20% (68px → 54px) here only */
#outcomes > section{padding-top:54px}
.metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.metric{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 16px;text-align:center;box-shadow:0 2px 10px rgba(11,36,71,.04)}
.ring{position:relative;width:118px;height:118px;border-radius:50%;margin:0 auto 16px;display:grid;place-items:center;background:conic-gradient(var(--gold) calc(var(--p)*1%),var(--line) 0)}
.ring::before{content:"";position:absolute;width:88px;height:88px;border-radius:50%;background:#fff}
/* tabular figures so the counting animation doesn't jiggle the digits */
.ring b{position:relative;font-family:var(--font-display);font-size:1.5rem;color:var(--navy);font-variant-numeric:tabular-nums}
.metric small{font-size:.84rem;color:var(--muted);display:block;line-height:1.45}
.metric-hero{margin-top:22px;background:linear-gradient(118deg,var(--navy),var(--navy-2));color:#fff;border-radius:var(--r);padding:26px 32px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;justify-content:center;text-align:center}
.metric-hero b{font-family:var(--font-display);font-size:2.8rem;color:var(--gold-2);line-height:1}
.metric-hero span{color:#c5d3ea;font-size:1rem;font-weight:500}

/* ============ student voices with photos ============ */
.voice{padding:0;overflow:hidden;display:flex;flex-direction:column}
.voice::before{content:none}
.vmedia{position:relative;height:230px;background:linear-gradient(135deg,var(--navy),#1d63b8)}
.vmedia img{width:100%;height:100%;object-fit:cover;object-position:center 45%}
.vmedia.noimg{display:grid;place-items:center}
.vmedia .vquote{font-family:var(--font-display);font-size:4.4rem;color:var(--gold-2);line-height:1;opacity:.9}
.vmedia .vloc{position:absolute;left:0;right:0;bottom:0;background:linear-gradient(transparent,rgba(11,36,71,.9));color:#fff;font-size:.76rem;font-weight:600;padding:22px 18px 12px}
.vbody{padding:22px 24px 24px;display:flex;flex-direction:column;flex:1}
.vbody p{font-size:.92rem;color:#33415c;font-style:italic;margin-bottom:14px;flex:1}
.vbody b{color:var(--navy);font-size:.92rem}
.vbody small{display:block;color:var(--muted);font-size:.78rem}

/* ============ send-off photo gallery ============ */
.abroad{margin-top:48px}
.abroad-lead{text-align:center;font-family:var(--font-display);font-style:italic;color:var(--navy);font-size:clamp(1.15rem,2.4vw,1.5rem);max-width:44ch;margin:0 auto 26px;line-height:1.35}
.abroad-carousel{position:relative}
.abroad-track{display:flex;gap:18px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 6px;-ms-overflow-style:none;scrollbar-width:none}
.abroad-track::-webkit-scrollbar{display:none}
.abroad-track:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
.ab-photo{position:relative;margin:0;flex:0 0 min(440px,84%);height:440px;border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px rgba(11,36,71,.14);background:linear-gradient(135deg,var(--navy),#1d63b8)}
.ab-photo img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.ab-nav{position:absolute;top:50%;transform:translateY(-50%);z-index:3;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:var(--navy);color:var(--gold-2);font-size:1.7rem;line-height:1;cursor:pointer;display:grid;place-items:center;box-shadow:0 6px 20px rgba(11,36,71,.35);transition:background .2s,transform .2s,opacity .2s}
.ab-nav:hover{background:var(--navy-2);transform:translateY(-50%) scale(1.08)}
.ab-nav.prev{left:-8px}
.ab-nav.next{right:-8px}
.ab-nav[hidden]{display:none}
.ab-photo:hover img{transform:scale(1.05)}
.ab-photo .abflag{position:absolute;top:14px;left:14px;width:34px;height:auto;border-radius:3px;box-shadow:0 2px 8px rgba(0,0,0,.35);transform:none}
.ab-photo figcaption{position:absolute;left:0;right:0;bottom:0;padding:34px 18px 15px;background:linear-gradient(transparent,rgba(11,36,71,.92));color:#fff}
.ab-photo figcaption b{display:block;font-size:.96rem;line-height:1.25}
.ab-photo figcaption span{display:block;color:#c5d3ea;font-size:.78rem;margin-top:3px}

/* student-voices carousel (reuses .ab-nav arrows) */
.voices-carousel{position:relative}
.voices-track{display:flex;gap:24px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 8px;-ms-overflow-style:none;scrollbar-width:none}
.voices-track::-webkit-scrollbar{display:none}
.voices-track:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
.voices-track .voice{flex:0 0 min(360px,84%)}

.abroad-more-lead{text-align:center;color:var(--muted);font-size:.82rem;letter-spacing:.12em;text-transform:uppercase;margin:30px 0 16px}
.abroad-more-carousel{position:relative}
.abroad-more{display:flex;gap:14px;overflow-x:auto;scroll-behavior:smooth;padding:4px 2px 6px;-ms-overflow-style:none;scrollbar-width:none}
.abroad-more::-webkit-scrollbar{display:none}
.abroad-more:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:var(--r)}
.abroad-more .stu{flex:0 0 min(300px,82%)}
.stu{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:14px 16px;box-shadow:0 2px 10px rgba(11,36,71,.04);transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.stu:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
.stu-av{position:relative;flex:0 0 42px;width:42px;height:42px;border-radius:50%;overflow:hidden;background:#eef2f8;box-shadow:0 0 0 1px var(--line) inset}
.stu-av img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.stu-av.logo{background:#fff}
.stu-av.logo img{object-fit:contain;padding:7px}
.stu b{display:block;color:var(--navy);font-size:.9rem;line-height:1.25}
.stu small{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:.76rem;margin-top:2px}
.stu small .fl{width:18px;height:auto;border-radius:2px;flex:0 0 auto}

@media(max-width:960px){
  .metrics{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:640px){
  .ab-photo{height:380px}
  .ab-nav.prev{left:2px}
  .ab-nav.next{right:2px}
}

/* ============ hero — "global departure" ============ */
/* --herofit is set by JS to (viewport height − the bars above the hero) so the
   landing fills exactly one screen; 88vh is the no-JS fallback */
.hero{position:relative;isolation:isolate;display:flex;flex-direction:column;min-height:var(--herofit,88vh);background:var(--navy);color:#fff;overflow:hidden}
/* depth: warm gold glow top-right + cool blue glow bottom-left, above the photo */
.hero::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:radial-gradient(780px 480px at 87% 2%,rgba(212,167,44,.32),transparent 60%),radial-gradient(660px 660px at -6% 114%,rgba(29,99,184,.42),transparent 60%)}

/* photographic base + directional legibility wash */
.hero-bg{position:absolute;inset:0;z-index:0;overflow:hidden}
/* crossfading slideshow of real student photos (shuffled + advanced by main.js) */
.hero-bg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 34%;opacity:0;transition:opacity 1.4s ease;will-change:opacity}
.hero-bg img.active{opacity:1;animation:kenburns 9s ease-out forwards}
.hero-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(101deg,rgba(6,18,40,.97) 0%,rgba(8,24,50,.9) 33%,rgba(9,28,56,.5) 66%,rgba(9,28,56,.26) 100%),linear-gradient(0deg,var(--navy) 1%,rgba(11,36,71,.1) 44%,transparent 72%)}
@keyframes kenburns{from{transform:scale(1.05)}to{transform:scale(1.14) translateY(-2%)}}

/* content */
.hero .hero-top{position:relative;z-index:3;display:block;padding:20px 24px 0}
.hero .hero-center{position:relative;z-index:3;flex:1 1 auto;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;text-align:left;max-width:1160px;width:100%;margin:0 auto;padding:clamp(20px,3vw,34px) 24px clamp(90px,11vw,118px)}
.hero-kicker{display:inline-flex;align-items:center;gap:11px;color:var(--gold-2);font-weight:700;font-size:.75rem;letter-spacing:.2em;text-transform:uppercase;margin-bottom:16px}
.hero-kicker::before{content:"";width:28px;height:1.5px;background:var(--gold)}
.hero .hero-center h1{font-family:var(--font-display);font-weight:700;font-size:clamp(2.9rem,7.6vw,5.2rem);line-height:.96;letter-spacing:-.038em;color:#fff;margin:0 0 16px;text-wrap:balance}
.hero .hero-center h1 em{font-style:normal;color:var(--gold-2)}
.hero-center .hero-lede{color:#dde7f7;font-size:clamp(1.08rem,1.6vw,1.3rem);line-height:1.45;max-width:34ch;font-weight:500;margin:0 0 20px;text-wrap:pretty}
.hero-center .hero-proof{display:flex;flex-wrap:wrap;gap:9px 30px;margin:0 0 26px;padding:0;max-width:none}
.hero-center .hero-proof span{position:relative;color:#c2d0e6;font-size:.94rem;font-weight:500}
.hero-center .hero-proof span+span::before{content:"";position:absolute;left:-16px;top:50%;width:5px;height:5px;border-radius:50%;background:var(--gold);opacity:.75;transform:translateY(-50%)}
.hero-center .hero-proof b{color:var(--gold-2);font-family:var(--font-display);font-weight:700;font-size:1.05rem}
.hero .hero-center .hero-actions{justify-content:flex-start;gap:14px}
.hero .hero-center .cta,.hero .hero-center .ghost{padding:14px 28px;font-size:.92rem}

/* live destinations marquee — breadth of the network, and "there's more below" */
.hero-dests{position:absolute;left:0;right:0;bottom:0;z-index:3;overflow:hidden;border-top:1px solid rgba(255,255,255,.13);background:linear-gradient(0deg,rgba(6,17,36,.6),transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.hd-track{display:flex;width:max-content;animation:marquee 40s linear infinite}
.hd-track span{display:inline-flex;align-items:center;padding:13px 0;color:#cad7ec;font-weight:600;font-size:.85rem;letter-spacing:.02em;white-space:nowrap}
.hd-track span::after{content:"·";margin:0 26px;color:var(--gold);opacity:.6}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* orchestrated entrance */
.hero-kicker,.hero .hero-center h1,.hero-center .hero-lede,.hero-center .hero-proof,.hero .hero-center .hero-actions{animation:heroIn .8s cubic-bezier(.2,.7,.3,1) both}
.hero-kicker{animation-delay:.12s}
.hero .hero-center h1{animation-delay:.26s}
.hero-center .hero-lede{animation-delay:.42s}
.hero-center .hero-proof{animation-delay:.56s}
.hero .hero-center .hero-actions{animation-delay:.7s}
@keyframes heroIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

@media(max-width:760px){
  .hero .hero-top{display:none}                 /* breadcrumb wraps awkwardly on phones */
  .hero-dests{display:none}                     /* drop the marquee so the hero fits one screen */
  .hero .hero-center{align-items:center;text-align:center;padding-top:clamp(14px,3vw,24px);padding-bottom:clamp(20px,5vw,36px)}
  .hero-kicker{justify-content:center;margin-bottom:12px}
  .hero .hero-center h1{font-size:clamp(2.6rem,9vw,3.6rem);margin-bottom:12px}
  .hero-center .hero-lede{max-width:40ch;margin-bottom:14px}
  .hero-center .hero-proof{justify-content:center;margin-bottom:16px}
  .hero .hero-center .hero-actions{justify-content:center}
  .hero::before{background:radial-gradient(520px 420px at 82% 0%,rgba(212,167,44,.3),transparent 62%),radial-gradient(520px 520px at -12% 114%,rgba(29,99,184,.4),transparent 60%)}
  .hero-bg::after{background:linear-gradient(180deg,rgba(7,20,42,.78),rgba(9,28,56,.6) 42%,rgba(7,20,42,.94)),linear-gradient(0deg,var(--navy),transparent 60%)}
}
@media(prefers-reduced-motion:reduce){
  .hero-bg img,.hero-bg img.active{animation:none;transform:scale(1.05)}
  .hd-track{animation:none}
  .hero-kicker,.hero .hero-center h1,.hero-center .hero-lede,.hero-center .hero-proof,.hero .hero-center .hero-actions{animation:none}
}
@media(max-width:640px){.util{display:none}.brand .t span{display:none}.brand .t b{font-size:.9rem;line-height:1.1}.cta{padding:10px 18px}}

/* tighter, neater brand lockup */
.brand .t b{font-size:.98rem;line-height:1.15}
.brand .t span{font-size:.66rem;letter-spacing:.02em}

/* ============ world map of destinations (full-bleed navy) ============ */
.global-map{background:radial-gradient(1200px 600px at 78% 40%,#16406f,transparent 70%),linear-gradient(180deg,var(--navy),var(--navy-2));color:#fff}
.global-map .sec-h{color:#fff}
.global-map .lead{color:#c5d3ea}
.global-map .tag{color:var(--gold-2)}
.global-map .tag::before{background:var(--gold-2)}
.global-map .center .sec-h::after{background:var(--gold)}

/* map frame: 1200×600 on desktop (centred on the viewport, breaking out of the
   content column), shrinking to full screen width below 1200px; phones get
   their own height below. The min() keeps both edges on-screen at any size. */
.worldmap{position:relative;width:auto;margin-left:calc(50% - min(600px,50vw));margin-right:calc(50% - min(600px,50vw));height:min(600px,50vw);overflow:hidden}
.global-map{overflow-x:clip}
/* the pannable/zoomable layer — arcs, countries and pins ride on it together so
   the transform keeps them perfectly aligned. The detail panel is a sibling
   (outside the transform) so its fixed positioning isn't broken. */
/* touch-action:pan-y — one finger must keep scrolling the page (the map is
   full-width on phones and must never trap the scroll); two-finger gestures
   are ours (JS blocks the browser for those) */
/* no will-change here: pinning the stage to a persistent GPU layer makes the
   browser rasterize it once at 1x and zoom becomes a blurry upscale — without
   it the SVG re-renders crisp at the final scale */
.mapstage{position:absolute;top:0;left:0;width:100%;aspect-ratio:1280/512;transform-origin:0 0;touch-action:pan-y}
.js .worldmap{cursor:grab}
.js .worldmap.grabbing{cursor:grabbing}
/* zoom / reset controls */
.mapzoom{position:absolute;right:10px;bottom:10px;z-index:7;display:flex;flex-direction:column;gap:6px}
.mapzoom-b{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
  font-size:1.25rem;line-height:1;font-weight:700;color:#0b1f3a;background:rgba(255,255,255,.92);
  border:1px solid rgba(240,199,94,.6);border-radius:10px;cursor:pointer;
  box-shadow:0 4px 12px rgba(0,0,0,.35);-webkit-tap-highlight-color:transparent;transition:background .15s}
.mapzoom-b:hover{background:#fff}
.mapzoom-b:active{background:var(--gold-2)}
html:not(.js) .mapzoom{display:none}

/* flight arcs from Cambodia */
.arcs{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:1;pointer-events:none}
/* stroke-width counter-scales with zoom (--inv = 1/zoom, set by the map JS):
   without this the 24 overlapping arcs fatten into a solid yellow smear the
   moment the map is zoomed on a phone */
.arcs path{fill:none;stroke:var(--gold-2);stroke-width:calc(2px*var(--inv,1));opacity:.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 2.4s ease forwards;vector-effect:non-scaling-stroke}
.arcs path:nth-child(2){animation-delay:.15s}.arcs path:nth-child(3){animation-delay:.3s}
.arcs path:nth-child(4){animation-delay:.45s}.arcs path:nth-child(5){animation-delay:.6s}
.arcs path:nth-child(6){animation-delay:.75s}.arcs path:nth-child(n+7){animation-delay:.9s}
@keyframes draw{to{stroke-dashoffset:0}}

/* pins ride on the zoom layer for positioning, but counter-scale (--inv = 1/zoom)
   so the dot and label stay a constant on-screen size like real map markers */
.pin{position:absolute;width:0;height:0;z-index:2;transform:scale(var(--inv,1))}
.pin i{position:absolute;width:calc(var(--r,6px)*1.5);height:calc(var(--r,6px)*1.5);left:calc(var(--r,6px)*-0.75);top:calc(var(--r,6px)*-0.75);border-radius:50%;background:radial-gradient(circle at 35% 30%,var(--gold-2),var(--gold));box-shadow:0 0 0 3px rgba(212,167,44,.18),0 2px 8px rgba(0,0,0,.5);z-index:3}
.pin.home::after{content:"";position:absolute;width:calc(var(--r)*1.5);height:calc(var(--r)*1.5);left:calc(var(--r)*-0.75);top:calc(var(--r)*-0.75);border-radius:50%;border:2px solid var(--gold-2);animation:ping 2.8s ease-out infinite;z-index:2}
@keyframes ping{0%{transform:scale(1);opacity:.75}100%{transform:scale(3);opacity:0}}
.pin b{position:absolute;left:0;bottom:calc(var(--r,6px) + 8px);transform:translateX(-50%);background:#fff;color:var(--navy);font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:7px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;box-shadow:0 4px 14px rgba(0,0,0,.4);z-index:6}
.pin:hover{z-index:7}
.pin:hover b,.pin.home b{opacity:1}

.mapstats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;max-width:760px;margin:28px auto 0;padding-top:22px;border-top:1px solid rgba(255,255,255,.14)}
.mapstats div{text-align:center}
.mapstats b{display:block;font-family:var(--font-display);font-size:2rem;color:var(--gold-2);line-height:1}
.mapstats small{color:#c5d3ea;font-size:.78rem;display:block;margin-top:6px}
@media(prefers-reduced-motion:reduce){.pin.home::after{animation:none;display:none}.arcs path{animation:none;stroke-dashoffset:0}}
@media(max-width:600px){.mapstats{grid-template-columns:repeat(2,1fr);gap:18px}}

/* real vector country layer (replaces flat silhouette) */
.worldmap .geo{position:absolute;inset:0;width:100%;height:100%;z-index:0}
/* country borders counter-scale too (see .arcs note) — constant screen width */
.geo .cc{fill:rgba(180,205,240,.14);stroke:rgba(120,150,190,.28);stroke-width:calc(.5px*var(--inv,1));fill-rule:evenodd;pointer-events:none;vector-effect:non-scaling-stroke}
.geo .cc.dest{fill:rgba(212,167,44,.26);stroke:rgba(240,199,94,.55);stroke-width:calc(.8px*var(--inv,1));pointer-events:auto;cursor:pointer;transition:fill .18s,filter .18s}
.geo .cc.dest:hover{fill:rgba(240,199,94,.52)}
.geo .cc.dest.active{fill:rgba(240,199,94,.64);stroke:var(--gold-2);stroke-width:calc(1.1px*var(--inv,1));filter:drop-shadow(0 0 5px rgba(240,199,94,.5))}
.map-hint{text-align:center;color:#9fb2d0;font-size:.82rem;margin:16px auto 0;max-width:540px}

/* country detail panel */
/* hidden/shown via display, not an opacity transition: if the state were only
   a transition from opacity:0, any environment where that transition doesn't
   run would leave the "open" panel permanently invisible. The fade/slide is a
   decorative entrance animation on top of a structurally visible panel. */
.mappanel{position:absolute;top:10px;right:10px;width:min(340px,86%);max-height:calc(100% - 20px);overflow:auto;
  background:linear-gradient(180deg,rgba(9,26,50,.97),rgba(12,40,75,.97));backdrop-filter:blur(6px);
  border:1px solid rgba(240,199,94,.35);border-radius:14px;padding:20px 20px 22px;z-index:8;
  box-shadow:0 18px 44px rgba(0,0,0,.5);color:#e8eef8;display:none}
.mappanel.open{display:block;animation:mpIn .22s ease}
@keyframes mpIn{from{opacity:0;transform:translateX(14px)}}
@media(prefers-reduced-motion:reduce){.mappanel.open{animation:none}}
.mp-close{position:absolute;top:8px;right:10px;background:none;border:none;color:#9fb2d0;font-size:1.5rem;line-height:1;cursor:pointer;padding:4px}
.mp-close:hover{color:var(--gold-2)}
.mp-head{display:flex;align-items:baseline;gap:10px;padding-right:24px;margin-bottom:2px}
.mp-name{font-family:var(--font-display);font-size:1.3rem;color:var(--gold-2);line-height:1.1;margin:0}
.mp-count{font-size:.72rem;font-weight:700;color:var(--navy);background:var(--gold-2);padding:2px 9px;border-radius:999px;white-space:nowrap}
.mp-blurb{font-size:.8rem;color:#b7c6de;margin:8px 0 14px;line-height:1.45}
.mp-schools{display:flex;flex-direction:column;gap:8px}
.mp-school{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-radius:8px;padding:9px 12px}
.mp-school b{display:block;font-size:.86rem;color:#fff;font-weight:700}
.mp-school small{display:block;font-size:.72rem;color:#9fb2d0;margin-top:2px}
.mp-empty{font-size:.79rem;color:#9fb2d0;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.16);border-radius:8px;padding:10px 12px;line-height:1.45}
.mp-students{margin-top:14px;border-top:1px solid rgba(255,255,255,.12);padding-top:12px;display:flex;flex-direction:column;gap:7px}
.mp-slabel{font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-2);font-weight:700}
.mp-stud{font-size:.8rem;color:#dbe5f3;line-height:1.4}
.mp-stud b{color:#fff}
.mp-backdrop{display:none}

@media(max-width:600px){
  /* detail panel becomes a full-width bottom sheet */
  .mappanel{position:fixed;top:auto;left:0;right:0;bottom:0;width:auto;max-width:none;
    max-height:76vh;border-radius:20px 20px 0 0;border:none;border-top:1px solid rgba(240,199,94,.35);
    padding:26px 22px calc(22px + env(safe-area-inset-bottom));
    box-shadow:0 -14px 40px rgba(0,0,0,.55);z-index:120}
  .mappanel.open{animation:mpUp .28s cubic-bezier(.2,.7,.3,1)}
  @keyframes mpUp{from{transform:translateY(60%);opacity:.4}}
  .mappanel::before{content:"";position:absolute;top:9px;left:50%;transform:translateX(-50%);
    width:40px;height:4px;border-radius:999px;background:rgba(255,255,255,.28)}
  .mp-head{margin-top:6px}
  .mp-name{font-size:1.45rem}
  .mp-close{top:12px;right:14px;font-size:1.7rem}
  .mp-backdrop{display:block;position:fixed;inset:0;background:rgba(4,12,26,.55);
    opacity:0;pointer-events:none;transition:opacity .22s;z-index:119}
  .mp-backdrop.show{opacity:1;pointer-events:auto}
  /* larger invisible tap target around each pin for touch */
  .pin::before{content:"";position:absolute;width:30px;height:30px;left:-15px;top:-15px;border-radius:50%;z-index:2}
  .geo .cc.dest{stroke-width:calc(1px*var(--inv,1))}
  /* zoomed into the cluster, all 24 arcs share the frame — quieter so the
     countries and pins stay readable */
  .arcs path{opacity:.26}

  /* The map opens showing the WHOLE world (nothing cropped) inside a TALL,
     edge-to-edge frame: the world floats centred on the navy band, and once
     the visitor pinches in, the tall viewport makes panning comfortable —
     a small letterbox beats a 150px slit you can't navigate. */
  .worldmap{height:300px}
  .geo .cc{fill:rgba(180,205,240,.22)}
  /* smaller pin labels so "Cambodia · home" doesn't blanket the SE-Asia cluster */
  .pin b{font-size:.6rem;padding:2px 7px;bottom:calc(var(--r,6px) + 5px)}
}
/* last so it also beats the mobile sheet's mpUp entrance */
@media(prefers-reduced-motion:reduce){.mappanel.open{animation:none}}

/* ============ school values grid ============ */
/* Six equal cards in a 3x2 grid — every cell filled, no spans. Each card leads
   with its own evidence (a figure, or a real logo) instead of a decorative icon.
   Hairline gaps let the navy read as a single ruled table rather than six
   floating boxes. */
.values{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;margin-top:40px;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.12);border-radius:var(--r);overflow:hidden}
.value{background:var(--navy);padding:24px 24px 22px;display:flex;flex-direction:column;transition:background .25s}
.value:hover{background:#0e2c56}
.value h3{color:#fff;font-family:var(--font-body);font-weight:800;font-size:1rem;line-height:1.28;margin-bottom:6px}
.value p{color:#9fb2cf;font-size:.85rem;line-height:1.55}

/* the figure that leads each card — a tight lockup with its heading, no
   free-floating gap */
.v-fig{display:block;font-family:var(--font-display);font-size:2.1rem;font-weight:700;color:var(--gold-2);line-height:1;margin-bottom:6px;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.v-fig i{font-style:normal;font-size:1.1rem;color:rgba(240,199,94,.5);margin-left:1px}

/* a card led by a recurring cadence rather than a number (industry visits) —
   sits in the same top slot as the figure so the grid keeps its rhythm */
.v-kicker{display:inline-flex;align-items:center;gap:8px;font-size:.72rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;color:var(--gold-2);margin-bottom:11px}
.v-kicker::before{content:"";width:16px;height:1.5px;background:var(--gold-2)}

/* the dual-degree card is the feature: inverted to white so the partner marks
   sit naturally without chips */
.value.feature{background:#fff}
.value.feature:hover{background:#fff}
.value.feature .v-fig{color:var(--gold-ink)}
.value.feature h3{color:var(--navy)}
.value.feature p{color:var(--muted)}
/* logos hug the copy with a modest gap instead of being flung to the card
   bottom by margin-top:auto */
.v-logos{display:flex;align-items:center;gap:16px;margin-top:14px}
.v-logos img{max-height:26px;max-width:88px;width:auto;object-fit:contain;opacity:.9}

.v-logo{display:flex;align-items:center;height:30px;margin-bottom:12px}
.v-logo img{max-height:28px;max-width:150px;object-fit:contain}

@media(max-width:920px){.values{grid-template-columns:repeat(2,1fr)}}
@media(max-width:620px){.values{grid-template-columns:1fr}}

/* campus & ecosystem — light section (overrides the dark .value styling) */
.campus{padding:56px 0 4px}

/* ---- campus facilities: photo-led cards that open a detail view ---- */
.fac-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fac{display:flex;flex-direction:column;text-align:left;background:#fff;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;cursor:pointer;padding:0;font:inherit;color:inherit;box-shadow:0 1px 2px rgba(11,36,71,.05);transition:transform .22s,box-shadow .22s}
.fac:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.fac:focus-visible{outline:3px solid var(--gold);outline-offset:2px}
.fac-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,var(--navy),#1b4c8f);overflow:hidden}
.fac-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .35s ease}
.fac:hover .fac-media img{transform:scale(1.05)}
.fac-media i{display:none;position:absolute;inset:0;align-items:center;justify-content:center;font-style:normal;font-family:var(--font-display);font-weight:700;font-size:2.2rem;color:rgba(240,199,94,.85);letter-spacing:.02em}
.fac-media.nophoto i{display:flex}
.fac-body{display:flex;flex-direction:column;flex:1;gap:8px;padding:18px 20px 20px}
.fac-body b{color:var(--navy);font-size:1.02rem;font-weight:800;line-height:1.3}
.fac-body small{color:var(--muted);font-size:.86rem;line-height:1.55}
.fac-more{margin-top:auto;padding-top:10px;display:inline-flex;align-items:center;gap:7px;color:var(--gold-ink);font-size:.8rem;font-weight:700;letter-spacing:.04em}
.fac-more svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.fac:hover .fac-more svg{transform:translateX(4px)}

/* facility detail — its own sheet (a dedicated tab panel, not an inline fold) */
.facpage{padding:52px 0 72px}
.fac-back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;color:var(--gold-ink);font:inherit;font-size:.84rem;font-weight:700;cursor:pointer;padding:0;margin-bottom:26px}
.fac-back svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.fac-back:hover{color:var(--navy)}
/* photos lead, copy follows underneath — one full-width column */
.fac-d-grid{display:grid;grid-template-columns:1fr;gap:30px;align-items:start}
.fac-d-mediawrap[hidden]{display:none}
.fac-d-head{display:flex;align-items:center;gap:12px}
.fac-d-logo{height:44px;width:auto;max-width:140px;object-fit:contain;border-radius:9px;border:1px solid var(--line);background:#fff;padding:4px}
.fac-d-logo[hidden]{display:none}
.fac-d-title{font-family:var(--font-display);color:var(--navy);font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.18;margin:12px 0 16px}
.fac-d-nav{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px}
.fac-d-nav button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 15px;font:inherit;font-size:.8rem;font-weight:700;color:var(--navy);cursor:pointer;transition:border-color .15s,box-shadow .15s}
.fac-d-nav button:hover{border-color:var(--gold);box-shadow:0 2px 10px rgba(11,36,71,.08)}
.fac-d-copy p{color:#33415c;font-size:.96rem;line-height:1.75;margin-bottom:13px}
.fac-d-facts{list-style:none;display:grid;grid-template-columns:1fr 1fr;gap:10px 18px;margin-top:20px;padding-top:18px;border-top:1px solid var(--line)}
.fac-d-facts li{font-size:.86rem;color:var(--muted);padding-left:20px;position:relative;line-height:1.5}
.fac-d-facts li::before{content:"";position:absolute;left:0;top:.5em;width:9px;height:9px;border-radius:50%;background:var(--gold)}
.fac-d-facts li b{color:var(--navy)}
.fac-d-lead{display:flex;align-items:center;gap:13px;margin-top:20px;padding:12px 14px;background:var(--bg,#f7f9fc);border:1px solid var(--line);border-radius:12px}
.fac-d-lead[hidden]{display:none}
.fac-d-lead-av{width:52px;height:52px;flex:0 0 52px;border-radius:50%;object-fit:cover;border:2px solid #fff;box-shadow:0 1px 6px rgba(11,36,71,.14)}
.fac-d-lead-meta{display:flex;flex-direction:column;line-height:1.35}
.fac-d-lead-meta b{color:var(--navy);font-size:.95rem}
.fac-d-lead-meta span{color:var(--muted);font-size:.8rem}
.fac-d-partners{margin-top:20px}
.fac-d-partners[hidden]{display:none}
.fac-d-partners-label{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700;margin-bottom:10px}
.fac-d-partners-row{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.fac-d-partner{display:inline-flex;align-items:center;background:#fff;border:1px solid var(--line);border-radius:9px;padding:7px 13px;font-size:.82rem;font-weight:700;color:var(--navy)}
.fac-d-partner.has-logo{padding:6px 12px}
.fac-d-partner img{height:26px;width:auto;display:block;object-fit:contain}
.fac-d-intro .fac-d-title{margin:12px 0 0}
.fac-d-mediawrap{min-width:0;position:relative}
.fac-d-media{display:flex;gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;scrollbar-width:none;min-width:0;cursor:grab}
.fac-d-media.dragging{cursor:grabbing;scroll-snap-type:none;scroll-behavior:auto}
.fac-d-media:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:12px}
.fac-d-media::-webkit-scrollbar{display:none}
.fac-d-media figure{margin:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);flex:0 0 100%;scroll-snap-align:start;background:var(--bg,#f7f9fc)}
.fac-d-media img{width:100%;display:block;object-fit:cover;aspect-ratio:16/9;max-height:430px;-webkit-user-drag:none;user-select:none}
/* prev/next controls, centred on the photo itself (not the caption strip) */
.fac-d-arrow{position:absolute;top:calc((100% - 42px)/2);transform:translateY(-50%);width:38px;height:38px;border-radius:50%;border:0;-webkit-appearance:none;appearance:none;background-color:rgba(11,36,71,.2);color:#fff;font-size:1.5rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;text-shadow:0 1px 4px rgba(0,0,0,.55);opacity:.7;transition:background .15s,opacity .15s,transform .15s;z-index:2}
.fac-d-mediawrap:hover .fac-d-arrow{opacity:1}
.fac-d-arrow:hover{background-color:rgba(11,36,71,.5);transform:translateY(-50%) scale(1.08)}
.fac-d-arrow[hidden]{display:none}
.fac-d-arrow.prev{left:12px}
.fac-d-arrow.next{right:12px}
.fac-d-media figcaption{font-size:.76rem;color:var(--muted);padding:9px 13px;background:var(--bg,#f7f9fc)}
.fac-d-dots{display:flex;justify-content:center;gap:8px;margin-top:12px}
.fac-d-dots[hidden]{display:none}
.fac-d-dot{width:8px;height:8px;padding:0;border:none;border-radius:50%;background:var(--line);cursor:pointer;transition:background .15s,transform .15s}
.fac-d-dot.is-on{background:var(--gold);transform:scale(1.25)}
@media(max-width:900px){.fac-grid{grid-template-columns:repeat(2,1fr)}.fac-d-grid{grid-template-columns:1fr}}
@media(max-width:560px){.fac-grid{grid-template-columns:1fr}.facpage{padding:34px 0 48px}.fac-d-facts{grid-template-columns:1fr}}
.mba-path{margin-top:22px;background:linear-gradient(120deg,var(--navy),var(--navy-2));border-radius:var(--r);padding:34px 36px;display:grid;grid-template-columns:1.25fr 1fr;gap:32px;align-items:center;color:#fff;box-shadow:var(--shadow)}
.mba-kick{display:inline-block;font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-2);font-weight:700;margin-bottom:10px}
.mba-copy h3{font-family:var(--font-display);font-size:1.5rem;margin-bottom:12px;color:#fff;line-height:1.15}
.mba-copy p{color:#c5d3ea;font-size:.92rem;line-height:1.6}
.mba-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;list-style:none}
.mba-facts li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:12px;padding:14px 14px}
.mba-facts b{display:block;font-family:var(--font-display);font-size:1.35rem;color:var(--gold-2);line-height:1}
.mba-facts span{display:block;font-size:.7rem;color:#b7c6de;margin-top:5px}
@media(max-width:820px){.mba-path{grid-template-columns:1fr;padding:28px 24px;gap:22px}.mba-facts{grid-template-columns:repeat(4,1fr)}}
@media(max-width:560px){.mba-facts{grid-template-columns:repeat(2,1fr)}}

/* testimonials — "where else we sent students" strip */
.wherewent{margin-top:30px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:10px;align-items:center;justify-content:center}
.ww-lead{font-size:.85rem;color:var(--muted);font-weight:700;margin-right:2px}

/* study tours & industry visits (soft-tinted section) */
.tours{background:#f4f7fc;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:56px 0}
.visitgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.visit{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 22px;box-shadow:0 1px 2px rgba(11,36,71,.05);transition:transform .2s,box-shadow .2s}
.visit:hover{transform:translateY(-3px);box-shadow:var(--shadow)}
.vdate{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gold-ink);background:rgba(212,167,44,.16);padding:3px 10px;border-radius:999px;margin-bottom:12px}
.visit b{display:block;color:var(--navy);font-size:1rem;font-weight:800;margin-bottom:5px;font-family:var(--font-body)}
.visit small{color:var(--muted);font-size:.84rem;line-height:1.45;display:block}
@media(max-width:820px){.visitgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.visitgrid{grid-template-columns:1fr}}
@media(max-width:960px){.values{grid-template-columns:1fr}}

/* flag images (Windows-safe; emoji flags don't render on Windows) */
.drow img.flag{width:34px;height:24px;object-fit:cover;border-radius:3px;box-shadow:0 1px 3px rgba(11,36,71,.28);justify-self:center}
.chip .cflag{width:21px;height:15px;object-fit:cover;border-radius:2px;vertical-align:-2px;margin-right:8px;box-shadow:0 1px 2px rgba(0,0,0,.18)}
.vloc .vflag{width:23px;height:16px;object-fit:cover;border-radius:2px;vertical-align:-3px;margin-right:8px;box-shadow:0 1px 3px rgba(0,0,0,.3)}

/* ==================================================================
   DARK THEME + TABBED SECTIONS
   The page canvas is deep navy; white lives only inside content cards.
   ================================================================== */
:root{ --muted-d:#5d6a80; }
/* Light canvas restored (dark theme reverted). The page is white/light again;
   .reasons (Why) and .global-map (Exchange map) keep their own dark styling
   from the base rules as accent sections — as it was earlier. */

/* ---- tab bar (sticky just under the nav, primary section switcher) ---- */
.subnav{top:74px;box-shadow:0 10px 22px rgba(0,0,0,.3)}
.subnav a{padding:16px 20px}

/* ---- tab panels: show one at a time ---- */
.tabpanels{position:relative}
/* progressive enhancement: no JS → every panel is a normal stacked section, so all
   content stays reachable and indexable; JS turns them into single-view tabs */
.panel{scroll-margin-top:88px}
html.js .panel{display:none}
html.js .panel.active{display:block;animation:panelIn .45s ease both}
/* opacity-only: a transform here would make every .panel a containing block,
   trapping the mobile map detail sheet's position:fixed inside the tab panel */
@keyframes panelIn{from{opacity:0}to{opacity:1}}
/* entering a tab loads its blocks in one after another (staggered rise) instead
   of popping the whole page at once. Purely CSS: display none→block restarts the
   animation on every visit, so it can never mis-measure or fail to replay.
   Once finished, fill:both computes transform:none — so no lingering containing
   block to trap the map sheet's position:fixed. */
/* .global-map is excluded: its transform (while animating) would become the
   containing block for the map detail sheet's position:fixed and misplace it —
   that section still gets the whole-panel fade (panelIn) instead */
html.js .panel.active > *:not(.global-map){animation:tabBlockIn .55s cubic-bezier(.2,.7,.3,1) both}
html.js .panel.active > :nth-child(1){animation-delay:.04s}
html.js .panel.active > :nth-child(2){animation-delay:.16s}
html.js .panel.active > :nth-child(3){animation-delay:.28s}
html.js .panel.active > :nth-child(4){animation-delay:.4s}
html.js .panel.active > :nth-child(n+5){animation-delay:.5s}
@keyframes tabBlockIn{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){
  .panel.active{animation:none}
  html.js .panel.active > *{animation:none}
}

/* closing CTA band always visible under the panels */
/* ============ news (sourced from the Telegram channel) ============ */
.newsgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.ncard{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .2s,box-shadow .2s,border-color .2s}
.ncard:hover{transform:translateY(-4px);box-shadow:var(--shadow);border-color:var(--gold)}
/* the headline is the card's single real link; its ::after stretches over the
   whole card so a click anywhere opens the post, without nesting duplicate
   links inside each other */
.ncard h3 .nstretch{color:inherit;background:none;border:none;padding:0;font:inherit;text-align:left;cursor:pointer}
.ncard h3 .nstretch::after{content:"";position:absolute;inset:0;z-index:1}
.ncard h3 .nstretch:hover{color:var(--blue)}
.ncard:focus-within{border-color:var(--gold);box-shadow:var(--focus)}
.ncard h3 .nstretch:focus-visible{outline:none;box-shadow:none}
.nmedia{display:block;aspect-ratio:16/9;background:linear-gradient(120deg,var(--navy),var(--navy-2));overflow:hidden}
.nmedia img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.ncard:hover .nmedia img{transform:scale(1.04)}
/* no photo yet: collapse the well rather than show an empty navy band */
.nmedia.nophoto{aspect-ratio:auto;height:5px;background:var(--gold)}
.nbody{padding:20px 22px 22px;display:flex;flex-direction:column;flex:1}
.nmeta{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.nmeta time{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-variant-numeric:tabular-nums}
.nmeta i{font-style:normal;font-size:.64rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;color:var(--gold-ink);background:rgba(212,167,44,.15);border-radius:999px;padding:3px 9px}
.ncard h3{font-family:var(--font-body);font-weight:800;font-size:1.02rem;color:var(--navy);line-height:1.32;margin-bottom:8px}
.ncard p{font-size:.88rem;color:var(--muted);margin-bottom:16px}
.nlink{margin-top:auto;display:inline-flex;align-items:center;gap:7px;font-size:.8rem;font-weight:800;color:var(--blue)}
.nlink svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
.ncard:hover .nlink svg{transform:translateX(3px)}
.newsmore{display:flex;justify-content:center;gap:12px;margin-top:34px;flex-wrap:wrap}
.newsmore .ghost{border:1.5px solid var(--line);color:var(--navy);padding:11px 22px;border-radius:999px;font-weight:700;font-size:.85rem;transition:.2s}
.newsmore .ghost:hover{border-color:var(--gold);color:var(--gold-ink)}
@media(max-width:980px){.newsgrid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.newsgrid{grid-template-columns:1fr}}

/* ============ news article (read on the page) ============ */
.artpage{padding-top:34px}
.art-back{display:inline-flex;align-items:center;gap:8px;background:none;border:none;cursor:pointer;font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--muted);padding:8px 0;margin-bottom:22px;transition:.2s}
.art-back:hover{color:var(--navy)}
.art-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.art{max-width:780px;margin:0 auto}
.art-head{margin-bottom:26px}
.art-head .nmeta{margin-bottom:12px}
.art-title{font-family:var(--font-display);font-size:clamp(1.7rem,3.6vw,2.5rem);color:var(--navy);line-height:1.14;letter-spacing:-.015em}
.art-hero{margin:0 0 30px;border-radius:var(--r);overflow:hidden;background:var(--navy);position:relative}
.art-hero img{width:100%;display:block}
.art-hero figcaption{padding:11px 16px;font-size:.78rem;color:#c5d3ea;background:var(--navy)}
.art-body p{font-size:1.05rem;line-height:1.75;color:var(--ink);margin-bottom:18px}
.art-body p:first-of-type{font-size:1.15rem;color:var(--navy)}
.art-facts{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;margin:32px 0}
.art-facts ul{list-style:none;display:grid;gap:2px}
.art-facts li{padding:7px 0;font-size:.93rem;color:var(--muted);display:flex;gap:12px;align-items:baseline}
.art-facts li::before{content:"";width:14px;height:1.5px;background:var(--gold);flex:none;transform:translateY(-3px)}
.art-facts li b{color:var(--navy);font-weight:700}
.art-facts .cta{border:none;cursor:pointer;font-family:var(--font-body);margin-top:16px;font-size:.9rem}
.art-foot{margin:30px 0 46px}
.art-src{display:flex;align-items:center;gap:15px;background:var(--navy);border-radius:14px;padding:17px 22px;transition:.2s}
.art-src:hover{background:var(--navy-2);transform:translateY(-2px)}
.art-src>svg:first-child{width:24px;height:24px;fill:var(--gold-2);flex:none}
.art-src span{display:flex;flex-direction:column;flex:1;min-width:0}
.art-src b{color:#fff;font-size:.94rem}
.art-src small{color:#a9bbd6;font-size:.79rem}
.art-src-go{width:19px;height:19px;fill:none;stroke:var(--gold-2);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:transform .2s}
.art-src:hover .art-src-go{transform:translateX(4px)}
.art-more{border-top:1px solid var(--line);padding-top:30px}
.art-more h3{font-family:var(--font-body);font-size:.75rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:18px}
.art-morelist{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.art-morecard{display:flex;flex-direction:column;text-align:left;background:var(--white);border:1px solid var(--line);border-radius:12px;overflow:hidden;cursor:pointer;padding:0;font-family:var(--font-body);transition:.2s}
.art-morecard:hover{border-color:var(--gold);transform:translateY(-3px);box-shadow:var(--shadow)}
.am-media{display:block;aspect-ratio:16/9;overflow:hidden;background:var(--navy)}
.am-media.nophoto{aspect-ratio:auto;height:4px;background:var(--gold)}
.am-media img{width:100%;height:100%;object-fit:cover}
.am-body{display:block;padding:13px 15px 16px}
.am-body small{display:block;font-size:.67rem;font-weight:700;letter-spacing:.09em;text-transform:uppercase;color:var(--muted);margin-bottom:5px}
.am-body b{color:var(--navy);font-size:.87rem;line-height:1.35;font-weight:800}
@media(max-width:720px){.art-morelist{grid-template-columns:1fr}}

/* ============ entrance-test CTA band + apply modal ============ */
.deadline-banner .cta,.closecta .cta{border:none;cursor:pointer;font-family:var(--font-body)}

/* margin:auto is what centres a modal <dialog> against its inset:0 box — the
   global *{margin:0} reset wipes the UA default, which pinned it to the
   top-left corner, so it has to be restored explicitly here. */
.applydlg{border:none;padding:0;background:transparent;max-width:520px;width:calc(100% - 32px);max-height:92vh;overflow:visible;margin:auto}
.applydlg::backdrop{background:rgba(11,36,71,.62);backdrop-filter:blur(3px)}
.applydlg .reg-card{position:relative;max-height:92vh;overflow-y:auto}
/* Sticky, not absolute: the card itself scrolls on short screens, and an
   absolutely-positioned close button scrolled away with the content — leaving
   no visible way out once you reached the submit button. The negative bottom
   margin keeps it from pushing the heading down. */
.dlg-x{position:sticky;top:6px;z-index:3;display:block;margin:0 0 -30px auto;width:34px;height:34px;border:none;border-radius:50%;background:var(--bg);color:var(--muted);font-size:1.6rem;line-height:1;cursor:pointer;transition:.2s}
.dlg-x:hover{background:var(--line);color:var(--navy)}
.dlg-h{font-family:var(--font-display);font-size:1.7rem;color:var(--navy);margin-bottom:6px;line-height:1.1}
.dlg-sub{font-size:.9rem;color:var(--muted);margin-bottom:20px}
.reg-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.dlg-done{display:block;width:100%;margin-top:18px;border:1.5px solid var(--line);background:transparent;color:var(--navy);padding:11px;border-radius:999px;font-weight:700;font-size:.85rem;cursor:pointer;font-family:var(--font-body)}
.dlg-done:hover{border-color:var(--gold);color:var(--gold-ink)}
@media(max-width:880px){}
@media(max-width:460px){.reg-row{grid-template-columns:1fr}}

.reg-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r);padding:32px;box-shadow:var(--shadow)}
.reg-card label{display:block;font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.reg-card label small{text-transform:none;letter-spacing:0;font-weight:500}
.reg-card input,.reg-card select{display:block;width:100%;margin-top:6px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font-body);font-size:.95rem;color:var(--ink);background:#fff;letter-spacing:normal;text-transform:none;font-weight:500}
.reg-card input::placeholder{color:#a4aec0}
/* ---- date picker ----
   Replaces <input type="date">: the native popup can't be styled, offers
   weekends the exam schedule doesn't run, and renders mm/dd/yyyy to a Cambodian
   audience. The real value rides in a hidden input under the same name. */
.dp,.fs{position:relative;margin-top:6px}
.dp-field,.fs-field{display:flex;width:100%;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 14px;border:1px solid var(--line);border-radius:10px;background:#fff;cursor:pointer;
  font-family:var(--font-body);font-size:.95rem;font-weight:500;color:var(--ink);
  letter-spacing:normal;text-transform:none;text-align:left}
.dp-field:hover,.fs-field:hover{border-color:var(--gold)}
.dp-field:focus-visible,.fs-field:focus-visible,
.dp-field[aria-expanded="true"],.fs-field[aria-expanded="true"]{outline:none;box-shadow:var(--focus);border-color:var(--gold)}
.dp-field.empty .dp-val{color:#a4aec0}
.dp-field svg,.fs-field svg{width:18px;height:18px;flex:none;fill:none;stroke:var(--gold-ink);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fs-field[aria-expanded="true"] svg{transform:rotate(180deg)}
.fs-field svg{transition:transform .2s}
/* the native <select> stays in the DOM so form.shift.value / form.entry.value
   keep working — it is just never shown once the listbox is built */
/* .reg-card select sets display:block and outranks a bare .fs-native, so this
   has to match at least as specifically to win */
.fs-native,.reg-card select.fs-native{display:none}
.fs-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;right:0;margin:0;padding:6px;list-style:none;
  background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 18px 44px rgba(11,36,71,.24);
  max-height:244px;overflow:auto}
.fs-pop.up{top:auto;bottom:calc(100% + 6px)}
.fs-o{padding:10px 12px;border-radius:8px;cursor:pointer;
  font-family:var(--font-body);font-size:.9rem;font-weight:500;color:var(--ink);letter-spacing:normal;text-transform:none}
.fs-o:hover{background:rgba(212,167,44,.18)}
.fs-o:focus-visible{outline:none;box-shadow:var(--focus)}
.fs-o.sel{background:var(--navy);color:#fff;font-weight:700}
@media(prefers-reduced-motion:reduce){.fs-field svg{transition:none}}
.dp-pop{position:absolute;z-index:40;top:calc(100% + 8px);left:0;width:290px;padding:14px;
  background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 18px 44px rgba(11,36,71,.24)}
.dp-pop.up{top:auto;bottom:calc(100% + 8px)}
.dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.dp-mon{font-size:.9rem;font-weight:800;color:var(--navy);letter-spacing:normal;text-transform:none}
.dp-nav{width:30px;height:30px;display:grid;place-items:center;border:1px solid var(--line);border-radius:9px;
  background:#fff;color:var(--navy);font-size:1.05rem;line-height:1;cursor:pointer;font-family:inherit}
.dp-nav:hover:not(:disabled){border-color:var(--gold);color:var(--gold-ink)}
.dp-nav:disabled{opacity:.32;cursor:default}
.dp-dows,.dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.dp-dows span{padding:4px 0;text-align:center;font-size:.66rem;font-weight:700;letter-spacing:.06em;color:var(--muted)}
.dp-d{height:34px;border:0;border-radius:9px;background:none;cursor:pointer;
  font-family:var(--font-body);font-size:.85rem;font-weight:500;color:var(--ink)}
.dp-d:hover:not(:disabled){background:rgba(212,167,44,.18)}
.dp-d:focus-visible{outline:none;box-shadow:var(--focus)}
.dp-d:disabled{color:#c6cedb;cursor:default}
.dp-d.pad{visibility:hidden}
.dp-d.today{box-shadow:inset 0 0 0 1.5px var(--gold)}
.dp-d.sel{background:var(--navy);color:#fff;font-weight:700}
.dp-foot{margin-top:10px;text-align:center;font-size:.73rem;font-weight:500;color:var(--muted);letter-spacing:normal;text-transform:none}
.reg-card input:focus,.reg-card select:focus{outline:none;box-shadow:var(--focus);border-color:var(--gold)}
.reg-card button.cta{display:block;width:100%;border:none;cursor:pointer;font-family:var(--font-body);font-size:.95rem;padding:14px 24px}
.reg-card button.cta:disabled{opacity:.6;cursor:wait;transform:none}
.reg-note{font-size:.78rem;color:var(--muted);margin-top:12px;text-align:center}
.hp{position:absolute !important;left:-9999px;top:auto;width:1px;height:1px;overflow:hidden;opacity:0}
.reg-ok b{display:block;font-family:var(--font-display);font-size:1.4rem;color:var(--navy);margin-bottom:10px}
.reg-ok p{font-size:.92rem;color:var(--muted);margin-bottom:8px}
.reg-ok a{color:var(--blue);font-weight:700;text-decoration:underline}
.reg-err{margin-top:14px;background:#fdf0f0;border:1px solid #f0c9c9;color:#8a2a2a;border-radius:10px;padding:12px 16px;font-size:.88rem}
.reg-err a{font-weight:800;text-decoration:underline;white-space:nowrap}
@media(max-width:880px){.reg-card{padding:26px}}

.closecta{padding:56px 0 64px}

/* ---- world map (image pre-cropped to 1280x720; no clip-path — it breaks the mask) ---- */
.global-map{padding:58px 0 48px}
.mapstats{margin-top:22px}

@media(max-width:960px){
  .subnav a{padding:14px 15px}
}

/* ---- dropdown menus in the section bar ---- */
.subnav .wrap{flex-wrap:wrap;overflow:visible}
.navdrop{position:relative;display:inline-flex}
.navdrop-t{display:inline-flex;align-items:center;gap:7px;color:#b9c8e2;font-size:.85rem;font-weight:600;font-family:inherit;padding:16px 20px;background:none;border:0;border-bottom:3px solid transparent;cursor:pointer;white-space:nowrap}
.navdrop-t:hover{color:#fff}
.navdrop-t.active{color:var(--gold-2);border-color:var(--gold)}
.navcaret{font-size:.62em;line-height:1;opacity:.85;transition:transform .2s}
.navdrop.open .navcaret{transform:rotate(180deg)}
.navdrop-m{position:absolute;top:100%;left:0;min-width:214px;background:#fff;border-radius:0 0 12px 12px;box-shadow:0 20px 44px rgba(11,36,71,.28);padding:8px;display:none;flex-direction:column;z-index:120}
.navdrop.open .navdrop-m{display:flex}
.navdrop-m a{color:var(--navy);font-size:.9rem;font-weight:600;padding:12px 16px;border:0;border-radius:8px;white-space:nowrap}
.navdrop-m a:hover{color:var(--navy);background:#eef3fb}
.navdrop-m a.active{color:var(--gold-2);background:rgba(212,160,23,.12);border:0}
@media(max-width:960px){
  .navdrop-t{padding:14px 15px}
}
/* on phones the menu spans under the whole (wrapped) bar so it never overflows the viewport */
@media(max-width:640px){
  .navdrop{position:static}
  .navdrop-m{left:12px;right:12px;min-width:0;border-radius:12px}
}

/* ---- partner university logo wall (auto-moving + swipe/arrows) ---- */
.partnerwall{margin-top:30px}
.pw-head{text-align:center;margin-bottom:28px}
.pw-title{font-family:var(--font-display);font-weight:700;font-size:clamp(1.55rem,3.2vw,2.2rem);color:var(--navy);letter-spacing:-.015em;line-height:1.12;margin-bottom:10px}
.partnerwall .plabel{margin:0}
.mq-arrows{display:flex;gap:12px;justify-content:center;margin-top:24px}
.mq-arrow{width:38px;height:38px;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--navy);font-size:1.35rem;line-height:1;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:.18s;box-shadow:0 2px 8px rgba(11,36,71,.08);-webkit-tap-highlight-color:transparent}
.mq-arrow:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}
.marquee{overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none;scroll-behavior:smooth;-webkit-overflow-scrolling:touch;cursor:grab;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent);mask-image:linear-gradient(90deg,transparent,#000 5%,#000 95%,transparent)}
.marquee::-webkit-scrollbar{display:none}
.marquee.dragging{cursor:grabbing;scroll-behavior:auto}
.mq-track{display:flex;gap:16px;width:max-content;padding:6px 2px}
.ptile{flex:0 0 auto;width:168px;background:transparent;border:none;border-radius:0;padding:16px 12px;text-align:center;box-shadow:none;transition:transform .25s;color:var(--navy);display:flex;flex-direction:column;align-items:center;gap:12px}
.ptile:hover{transform:translateY(-7px)}
.ptile .pl{height:90px;display:flex;align-items:center;justify-content:center}
.ptile .pl img{max-height:90px;max-width:134px;width:auto;object-fit:contain;filter:drop-shadow(0 10px 18px rgba(11,36,71,.22));transition:filter .25s}
.ptile:hover .pl img{filter:drop-shadow(0 16px 26px rgba(11,36,71,.34))}
.ptile b{font-family:var(--font-body);font-weight:700;font-size:.82rem;line-height:1.25;color:var(--navy);min-height:2.4em;display:flex;align-items:center}
.ptile small{color:var(--muted);font-size:.72rem;font-weight:600;display:flex;align-items:center;gap:6px}
.ptile small .cflag{width:18px;height:13px;margin:0}
@media(max-width:600px){.ptile{width:150px}.ptile .pl{height:64px}.ptile .pl img{max-height:64px}}

/* ============ redesign pass: micro-polish ============ */
/* tabular figures so animated counters don't jitter width as they tick up */
.stat b,.ring b,.mapstats b,.metric-hero b,.gl b,.fee .amount{font-variant-numeric:tabular-nums}
/* balanced headline wrapping — no orphaned last-line words */
h1,h2,h3,.sec-h,.pw-title{text-wrap:balance}
.lead,.hero-tag{text-wrap:pretty}
/* physical press feedback on primary controls (hover lifts, press settles) */
.cta:active,.ghost:active,.mq-arrow:active,#toTop:active{transform:translateY(0) scale(.97)}
/* skip link for keyboard users */
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--navy);color:#fff;padding:12px 18px;border-radius:0 0 8px 0;font-weight:700;box-shadow:var(--shadow)}
.skip:focus{left:0;box-shadow:var(--focus)}

/* ============ About Us: welcome link · vision & mission · networks ============ */
/* "read our story" text link (light-surface variant of the hero ghost) */
.morelink{display:inline-flex;align-items:center;gap:9px;color:var(--navy);font-weight:700;font-size:.98rem;border-bottom:2px solid var(--gold);padding-bottom:4px;transition:color .2s ease}
.morelink span{transition:transform .2s ease}
.morelink:hover{color:var(--blue)}
.morelink:hover span{transform:translateX(5px)}

/* vision & mission — two committed statements, gold rule under each serif label */
/* Vision & Mission — editorial statement band: small-caps kickers, large serif
   statements, one hairline divider. No boxes; the typography carries it. */
.vm{padding-top:18px}
/* vision & mission lifted onto a single warm panel — a soft white→gold
   gradient block that gives the section a closing statement with some colour
   and weight, instead of two loose columns of text on the page background */
.vmgrid{display:grid;grid-template-columns:1fr 1fr;max-width:1080px;margin:0 auto;background:linear-gradient(135deg,#ffffff 0%,#fbf5e6 100%);border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:var(--shadow)}
.vmitem{padding:clamp(30px,3.4vw,50px)}
.vmitem + .vmitem{border-left:1px solid var(--line)}
.vmk{display:block;font-size:.74rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-ink);margin-bottom:14px}
.vmk::before{content:"";display:inline-block;width:22px;height:2px;background:var(--gold);vertical-align:middle;margin-right:10px;border-radius:1px}
.vmtext{font-family:var(--font-display);font-size:clamp(1.45rem,2.5vw,2rem);line-height:1.34;color:var(--navy);letter-spacing:-.015em;text-wrap:balance}
@media(max-width:760px){
  .vmgrid{grid-template-columns:1fr}
  .vmitem{padding:26px 22px}
  .vmitem + .vmitem{border-left:none;border-top:1px solid var(--line)}
}

/* accreditation & networks — membership grid, GBSN carried in navy to break the row */
/* inbound programs — same .tier cards as the outbound tiers, re-keyed so the two
   lists don't read as one: a navy eyebrow rule instead of gold. */
.inbound .tier span{color:var(--navy)}
.inbound .tier span::before{background:var(--navy)}
.inbound .tier:hover{border-color:var(--navy)}

/* ---- internationalization framework ----
   The full-bleed navy band that closes About Us. It deliberately breaks the
   white-card rhythm of every section above it: this is the one block on the page
   stating institutional intent rather than student-facing fact, and it should
   land differently. Glass pillars over navy with ambient gold light — no photo,
   because nothing in the asset library earns one here. */
.fw{position:relative;overflow:hidden;padding:78px 0 72px;
    background:linear-gradient(158deg,var(--navy) 0%,var(--navy-2) 56%,#081c39 100%)}
.fw-glow{position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(46% 52% at 12% 4%,rgba(240,199,94,.20),transparent 62%),
             radial-gradient(44% 50% at 92% 98%,rgba(240,199,94,.13),transparent 60%)}
.fw .wrap{position:relative}
.fw-head{margin-bottom:44px}
.fw .tag{color:var(--gold-2)}
.fw .sec-h{color:#fff}
.fw .lead{color:#b9cae4;margin-left:auto;margin-right:auto}
.fwgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px}
.fwcard{position:relative;border-radius:var(--r);padding:28px 24px 26px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);
  /* opacity is listed because .rv (the scroll-reveal fade) sits earlier in this
     file — without it this rule wins the cascade and the reveal snaps in */
  transition:transform .3s ease,background .28s ease,border-color .28s ease,box-shadow .28s ease,opacity .7s ease}
/* hairline that fades out to the right — an accent inset from the corners, so it
   never has to negotiate with the border radius */
.fwcard::after{content:"";position:absolute;left:24px;right:24px;top:0;height:2px;
  background:linear-gradient(90deg,var(--gold-2),rgba(240,199,94,0))}
.fwcard:hover{transform:translateY(-6px);background:rgba(255,255,255,.09);
  border-color:rgba(240,199,94,.5);box-shadow:0 18px 40px rgba(0,0,0,.3)}
.fwi{display:grid;place-items:center;width:46px;height:46px;border-radius:13px;margin-bottom:16px;
  background:rgba(240,199,94,.13);border:1px solid rgba(240,199,94,.3)}
.fwi svg{width:23px;height:23px;fill:none;stroke:var(--gold-2);stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.fwcard h3{font-family:var(--font-body);font-weight:800;font-size:.97rem;color:#fff;line-height:1.32;margin-bottom:12px}
.fwcard ul{list-style:none}
.fwcard li{font-size:.85rem;color:#b9cae4;line-height:1.55;padding:5px 0 5px 16px;position:relative}
.fwcard li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:50%;background:var(--gold-2)}
.fwnote{margin-top:34px;text-align:center;color:var(--gold-2);font-family:var(--font-display);font-size:1.06rem}
@media(max-width:1040px){.fwgrid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.fwgrid{grid-template-columns:1fr}.fw{padding:56px 0 52px}}
@media(prefers-reduced-motion:reduce){.fwcard{transition:none}}

/* institutional collaborations — a quieter text row under the accreditor cards */
.collab{margin-top:34px;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 28px}
.collab h3{font-family:var(--font-body);font-weight:800;font-size:1rem;color:var(--navy);margin-bottom:4px}
.collab p{font-size:.86rem;color:var(--muted);margin-bottom:16px}
.collablist{display:flex;flex-wrap:wrap;gap:10px}
.collablist span{display:inline-flex;align-items:baseline;gap:8px;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-size:.86rem;color:#33415c}
.collablist span i{font-style:normal;font-family:var(--font-display);font-size:.8rem;color:var(--gold-ink);font-weight:700}
.netgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:18px}
.netcard{background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:28px 24px;transition:transform .22s ease,box-shadow .22s ease,border-color .22s ease}
.netcard:hover{transform:translateY(-6px);box-shadow:var(--shadow);border-color:var(--gold)}
.netcard b{display:block;font-family:var(--font-display);font-size:1.75rem;color:var(--navy);margin-bottom:10px;line-height:1}
.netcard span{color:#33415c;font-size:.9rem;line-height:1.55;display:block}
.netcard.hl{background:linear-gradient(158deg,var(--navy),var(--navy-2));border-color:var(--navy)}
.netcard.hl b{color:var(--gold-2)}
.netcard.hl span{color:#c9d6ec}
.netcard.hl strong{color:#fff}
@media(prefers-reduced-motion:reduce){.netcard,.morelink span{transition:none}}

/* ============ wave section dividers (NUM-style transitions) ============ */
.vm,.reasons,.global-map,.closecta{position:relative}
.global-map{padding-bottom:80px}
.closecta{padding-bottom:78px}
.wave-b{position:absolute;left:0;right:0;bottom:-1px;height:44px;line-height:0;z-index:2;color:var(--bg);pointer-events:none}
.wave-b.to-navy{color:var(--navy)}
.wave-b svg{display:block;width:100%;height:100%}
@media(max-width:640px){.wave-b{height:26px}}

/* accreditation / network logos */
.netlogo{display:flex;align-items:center;height:58px;margin-bottom:16px}
.netlogo img{max-height:52px;max-width:100%;width:auto;object-fit:contain}

/* (map interactivity reverted — original static world map retained) */

/* ============ landing lock ============
   The Home hero is a one-screen gate: on entry the page shows only the hero and
   scrolling is disabled. Scroll unlocks the moment a nav tab or a hero button
   takes the visitor into a section (handled in main.js showTab). */
html.landing-locked,
html.landing-locked body{overflow:hidden}
html.landing-locked body{overscroll-behavior:none}

/* The hero belongs to the Home landing only. On any content tab the page is
   unlocked (landing-locked removed), so without this the hero would still sit
   above the panels and scrolling back up would re-show "Go International" —
   which reads as broken. Hide it whenever we're not on Home. (JS-only: without
   JS there is no locking, so the hero must stay visible.) */
html.js:not(.landing-locked) .hero{display:none}

/* ============ unified top bar: brand + section tabs + CTA in one white row ============ */
nav .wrap{gap:16px}
.navlinks{flex:1 1 auto;align-self:stretch;display:flex;align-items:stretch;justify-content:center;gap:2px;min-width:0}
.navlinks > a,
.navlinks .navdrop-t{display:inline-flex;align-items:center;position:relative;color:var(--ink);font-family:inherit;font-size:.92rem;font-weight:600;padding:0 15px;border:0;background:none;cursor:pointer;white-space:nowrap;transition:color .15s}
.navlinks .navdrop{align-self:stretch;display:inline-flex}
.navlinks > a:hover,
.navlinks .navdrop-t:hover{color:var(--navy)}
.navlinks > a.active,
.navlinks .navdrop-t.active{color:var(--navy)}
.navlinks > a::after,
.navlinks .navdrop-t::after{content:"";position:absolute;left:15px;right:15px;bottom:0;height:3px;border-radius:3px 3px 0 0;background:var(--gold);transform:scaleX(0);transform-origin:center;transition:transform .18s ease,opacity .18s ease}
.navlinks > a.active::after,
.navlinks .navdrop-t.active::after{transform:scaleX(1)}
.navlinks > a:hover::after,
.navlinks .navdrop-t:hover::after{transform:scaleX(1);opacity:.45}
.navlinks .navcaret{opacity:.7}
@media(prefers-reduced-motion:reduce){.navlinks > a::after,.navlinks .navdrop-t::after{transition:none}}

/* phones: brand + CTA on row 1, section tabs on a scrollable row 2 */
@media(max-width:860px){
  nav .wrap{flex-wrap:wrap;height:auto;align-items:center;padding:12px 16px 0;gap:8px 12px}
  .brand{order:1;gap:9px;min-width:0}
  .brand .logo{width:40px;height:40px}
  .brand .t span{display:none}
  .brand .t b{font-size:.85rem;line-height:1.15;white-space:nowrap}
  nav .wrap > .cta{order:2;margin-left:auto;flex:0 0 auto;padding:10px 14px}
  .navlinks{order:3;flex-basis:100%;align-self:auto;justify-content:flex-start;align-items:center;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;margin-top:6px;border-top:1px solid var(--line)}
  .navlinks::-webkit-scrollbar{display:none}
  .navlinks > a,.navlinks .navdrop-t{padding:13px 12px}
  .navlinks > a::after,.navlinks .navdrop-t::after{left:12px;right:12px}
}