/* ================================================================
   JOHN PAUL COLLEGE INTERNATIONAL — SHARED SITE STYLESHEET
   ================================================================
   One stylesheet, loaded once, shared by every page (home.html,
   psp.html, and any future page) plus the navigation and footer
   partials. This replaces having each page carry its own full copy
   of the same ~1,400 lines of CSS — that duplication was the main
   cause of page bloat and slow loads.

   DEPLOYMENT (SharePoint on-premises):
   Upload this file to the site's Style Library or Site Assets
   library, then reference it from the master page (or from each
   page, until the master page is wired up) with:
     <link rel="stylesheet" href="/sites/YOURSITE/SiteAssets/css/jpic-shared.css">
   Update the href to match wherever it actually lands.

   WHAT LIVES HERE vs WHAT STAYS PER-PAGE:
   - Brand tokens, base typography, buttons, icons, and every
     reusable km- and y- prefixed component (hero shell, why-cards,
     journey pathway, stats, campus, stories, safe, accordion,
     contact, video modal, final CTA) — all shared, defined below.
   - Navigation rail (.jpicnav-*) and footer (.jpic-footer/.jf-*)
     — shared, defined once below.
   - Anything page-specific (e.g. home's "30 years" hero watermark,
     or psp's .psp-* section styles) stays in that page's own
     <style> block, since it's used nowhere else.
   ================================================================ */

/* === BEGIN self-hosted fonts (generated by tools/build-local-fonts.py) === */
/* Downloaded from Google Fonts, SIL Open Font License.
   Self-hosted so there is no third-party request: @import cost a chained
   round trip, and fonts.googleapis.com is blocked in mainland China, which
   stalled every /Zh-Hans/ and /Zh-Hant/ page.
   Re-run tools/build-local-fonts.py to change weights or scripts. */
@font-face{font-family:'Noto Sans Thai';font-style:normal;font-weight:300 800;font-display:swap;src:url('../font/google/noto-sans-thai-thai.woff2') format('woff2');unicode-range:U+02D7, U+0303, U+0331, U+0E01-0E5B, U+200C-200D, U+25CC;}
@font-face{font-family:'Raleway';font-style:italic;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-vietnamese-italic.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Raleway';font-style:italic;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-latin-ext-italic.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:italic;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-latin-italic.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Raleway';font-style:normal;font-weight:300 800;font-display:swap;src:url('../font/google/raleway-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url('../font/google/roboto-vietnamese.woff2') format('woff2');unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url('../font/google/roboto-latin-ext.woff2') format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;}
@font-face{font-family:'Roboto';font-style:normal;font-weight:300 700;font-display:swap;src:url('../font/google/roboto-latin.woff2') format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
/* === END self-hosted fonts === */

:root{
  /* ---- Brand colour tokens (single source of truth) ---- */
  --jpic-blue:#004990; --jpic-blue-dark:#003366; --jpic-blue-light:#3a7cc6;
  --jpic-red:#ED1B2E; --jpic-gold:#FEBE50; --jpic-gold-dark:#e5a530;
  --jpic-burgundy:#880D27; --jpic-burgundy-dark:#6b0a1f; --jpic-burgundy-lite:#b23a52;
  --jpic-soft:#fbf1f3;
  --white:#ffffff; --off-white:#f5f7fa;
  --grey-100:#edf0f5; --grey-200:#dce1e8; --grey-500:#6b7a8d;
  --grey-600:#4f5b6b; --grey-700:#3a4553; --grey-900:#1a2230;

  /* ---- Type tokens ---- */
  --km-display:'Raleway',sans-serif; --km-body:'Roboto',sans-serif;
}

/* ---- SharePoint chrome suppression (safe on every page) ---- */
#contentBox, #s4-bodyContainer{margin-bottom:0 !important;padding-bottom:0 !important;}
/* Remove the browser-default 8px body margin so the full-bleed hero sits flush
   to the viewport edges (SharePoint already resets this; this keeps standalone
   previews and any un-reset context consistent, and makes the hero+quick-nav
   fill exactly one screen). */
html,body{margin:0;}


/* ================================================================
   PAGE COMPONENT LIBRARY — shared across home.html, psp.html, etc.
   ================================================================ */
  
  /* ---------- ICONS (SVG jp-icon, sized via width/height) ---------- */
.jp-icon{width:22px;height:22px;flex-shrink:0;display:inline-block;vertical-align:middle;}
.jp-icon-sm{width:16px;height:16px;}
.jp-icon-lg{width:30px;height:30px;}
.jp-icon-xl{width:40px;height:40px;}

  /* ---------- ICON-FONT SIZE SCALE (icon-font glyphs, sized via font-size) ----------
     Apply directly to the <i class="icon-..."> element — e.g.
     <i class="icon-default-heart icon-med"></i> — instead of writing a
     new CSS rule every time an icon needs a size. !important is
     intentional: several pages have a blanket `[class^="icon-"]{font-size:1em}`
     rule (inherit size from a sized wrapper div) that is more specific
     than a single class and would otherwise silently win. These utility
     classes are meant to always be the definitive size when used. */
.icon-x-small{font-size:20px !important;line-height:1;}
.icon-small{font-size:25px !important;line-height:1;}
.icon-med{font-size:35px !important;line-height:1;}
.icon-large{font-size:45px !important;line-height:1;}
.icon-x-large{font-size:55px !important;line-height:1;}
.icon-xx-large{font-size:65px !important;line-height:1;}

/****** SUPPORT TEXT ****/
.text-jpic-gold{color:#FEBE50 !important ;}
.text-jpic-gold-dark{color:#e5a530 !important ;}
.text-white{color:#fff !important ;}
.text-off-white{color: #f5f7fa !important;}
.text-jpic-burgundy{color: #880D27 !important;}

/* ============================================================
   TEXT SHINE  —  animated metallic-gradient headline effect
   ------------------------------------------------------------
   A bright band sweeps slowly across a gradient that is clipped
   to the text. First built for the PSP hero ("A Confident Start").
   Wrap the words you want to shine in a span (or apply to a
   heading) and add .jp-shine plus one colour variant:

     <span class="jp-shine">A Confident Start</span>
     <span class="jp-shine jp-shine-blue">Study in Australia</span>

   • Designed for DARK / photo backgrounds. On LIGHT backgrounds
     use the deeper -royal / -ember variants (readable on white).
   • Colours are driven by --jp-shine-1..6 custom props, so you can
     recolour inline without a new class if you ever need to.
   • Speed via .jp-shine-slow / .jp-shine-fast; freeze with
     .jp-shine-still. Honours prefers-reduced-motion automatically.
   • Pair with your own font-size/weight (it only paints the fill).
   ============================================================ */
.jp-shine{
  /* default = brand GOLD on dark */
  --jp-shine-1:#eab94f;                    /* deep edge     */
  --jp-shine-2:#ffe6a8;                    /* warm mid      */
  --jp-shine-3:#ffffff;                    /* hot highlight */
  --jp-shine-4:#ffe6a8;
  --jp-shine-5:var(--jpic-gold,#FEBE50);
  --jp-shine-6:var(--jpic-gold-dark,#e5a530);
  --jp-shine-glow:rgba(0,0,0,.42);         /* legibility halo on photos */
  --jp-shine-speed:6.5s;
  background:linear-gradient(100deg,
    var(--jp-shine-1) 0%, var(--jp-shine-2) 22%, var(--jp-shine-3) 35%,
    var(--jp-shine-4) 48%, var(--jp-shine-5) 68%, var(--jp-shine-6) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  text-shadow:none;                        /* text-shadow can't render on clipped text */
  filter:drop-shadow(0 3px 16px var(--jp-shine-glow));
  animation:jpShineSweep var(--jp-shine-speed) ease-in-out infinite;
}
@keyframes jpShineSweep{
  0%,100%{background-position:118% 0;}
  50%    {background-position:-18% 0;}
}

/* ---- Colour variants (for DARK / photo backgrounds) ---- */
.jp-shine-blue{      /* cool, corporate — academics, admissions */
  --jp-shine-1:#0a5aa8; --jp-shine-2:#7fc0ff; --jp-shine-3:#ffffff;
  --jp-shine-4:#9fd0ff; --jp-shine-5:#2f86d6; --jp-shine-6:var(--jpic-blue,#004990);}
.jp-shine-burgundy{  /* heritage, graduation, prestige */
  --jp-shine-1:#7a0f24; --jp-shine-2:#e79aad; --jp-shine-3:#fff0f3;
  --jp-shine-4:#e79aad; --jp-shine-5:#a51834; --jp-shine-6:var(--jpic-burgundy,#880D27);}
.jp-shine-platinum{  /* metallic silver/white — premium neutral */
  --jp-shine-1:#8a93a6; --jp-shine-2:#e9edf4; --jp-shine-3:#ffffff;
  --jp-shine-4:#cdd4e0; --jp-shine-5:#aab2c2; --jp-shine-6:#7c8496;}
.jp-shine-aurora{    /* full brand spectrum — celebratory / anniversary */
  --jp-shine-1:var(--jpic-blue,#004990); --jp-shine-2:#5ea9e8; --jp-shine-3:#ffe6a8;
  --jp-shine-4:var(--jpic-gold,#FEBE50); --jp-shine-5:#d36a86; --jp-shine-6:var(--jpic-burgundy,#880D27);}
.jp-shine-sunrise{   /* warm gold→coral — welcoming, primary/junior */
  --jp-shine-1:#e58b3c; --jp-shine-2:#ffd08a; --jp-shine-3:#fff4dc;
  --jp-shine-4:#ffb27a; --jp-shine-5:#f2894f; --jp-shine-6:#d9612e;}
.jp-shine-emerald{   /* fresh green→gold — wellbeing, SOARING, sustainability */
  --jp-shine-1:#127a5e; --jp-shine-2:#7ce0be; --jp-shine-3:#f2fff8;
  --jp-shine-4:#a7e8cf; --jp-shine-5:#1f9c78; --jp-shine-6:#0c5f49;}

/* ---- Colour variants tuned for LIGHT backgrounds (readable on white) ---- */
.jp-shine-royal{     /* deep brand blue sheen on white */
  --jp-shine-1:#013a73; --jp-shine-2:#0a5aa8; --jp-shine-3:#3f8fd6;
  --jp-shine-4:#0a5aa8; --jp-shine-5:#013a73; --jp-shine-6:#012a55;
  --jp-shine-glow:rgba(1,42,85,.14);}
.jp-shine-ember{     /* deep gold/bronze sheen on white */
  --jp-shine-1:#8a5c07; --jp-shine-2:#d79a1f; --jp-shine-3:#f0b93e;
  --jp-shine-4:#d79a1f; --jp-shine-5:#a5710d; --jp-shine-6:#6e4a05;
  --jp-shine-glow:rgba(138,92,7,.16);}

/* ---- Motion helpers ---- */
.jp-shine-slow{--jp-shine-speed:10s;}
.jp-shine-fast{--jp-shine-speed:4s;}
.jp-shine-still{animation:none; background-position:38% 0;}

@media (prefers-reduced-motion:reduce){
  .jp-shine{animation:none; background-position:38% 0;}
}

small { font-family: var(--km-body,'Roboto',sans-serif); }  /* was 'Lato' - never imported */

.uppercase {text-transform: uppercase !important;}

.lowercase {text-transform: lowercase !important;}

.capitalize {	text-transform: capitalize !important;}

.nott {	text-transform: none !important;}

.tright {	text-align: right !important;}

.tleft {	text-align: left !important;}

.fright {	float: right !important;}

.fleft {	float: left !important;}

.fnone {	float: none !important;}

.superscript {	position: relative;	top: -0.5em;	font-size: 80%;}

.subscript {	position: relative;	top: 0.5em;	font-size: 80%;}

.small-print {	font-size: 70%;}

.cricos {	font-size: 70%;	font-style: italic;	font-weight: 700;}

.ohidden {	position: relative;	overflow: hidden !important;}

.clear-bottommargin-sm {
	margin-bottom: -20px !important;
}

/*JPIC*/
.allmargin-lg {
	margin: 80px !important;
}

.leftmargin-lg {
	margin-left: 80px !important;
}

.rightmargin-lg {
	margin-right: 80px !important;
}

.topmargin-lg {
	margin-top: 80px !important;
}

.bottommargin-lg {
	margin-bottom: 80px !important;
}

.clear-bottommargin-lg {
	margin-bottom: -80px !important;
}

.nomargin {
	margin: 0 !important;
}

.noleftmargin {
	margin-left: 0 !important;
}

.norightmargin {
	margin-right: 0 !important;
}

.notopmargin {
	margin-top: 0 !important;
}

.nobottommargin {
	margin-bottom: 0 !important;
}



  /* ---------- HERO ---------- */
/* Hero height = one screenful minus the quick-nav bar, so on load the hero +
   the sticky quick-nav together fill exactly one viewport and the nav's bottom
   edge rests on the bottom of the screen. dvh (with a vh fallback) makes iOS
   Safari measure the *visible* viewport, not the larger toolbar-hidden one.
   --qn-h is the bar height (64 desktop / 58 mobile); +1 covers its border. */
.km-hero{position:relative;
  min-height:calc(100vh - var(--qn-h) - 1px);
  min-height:calc(100dvh - var(--qn-h) - 1px);
  display:flex;align-items:center;overflow:hidden;
  background:var(--jpic-blue-dark);}
/* On <1024px the fixed mobile top bar (60px) also sits in the viewport, so
   subtract it too, keeping the nav's bottom on the screen edge. */
@media (max-width:1023px){
  .km-hero{
    min-height:calc(100vh - 60px - var(--qn-h) - 1px);
    min-height:calc(100dvh - 60px - var(--qn-h) - 1px);}
}
.km-hero-media{position:absolute;inset:0;z-index:0;overflow:hidden;}
.km-hero-img{width:100%;height:100%;object-fit:cover;animation:kmKenBurns 22s ease-in-out infinite alternate;}
@keyframes kmKenBurns{from{transform:scale(1);}to{transform:scale(1.12);}}
.km-hero-overlay{position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(0deg, rgba(8,14,26,.94) 0%, rgba(8,14,26,.62) 30%, rgba(8,14,26,.14) 58%, rgba(8,14,26,0) 72%),
    linear-gradient(110deg, rgba(110,27,43,.4) 0%, rgba(0,73,144,.32) 50%, rgba(0,73,144,.05) 100%);}
.km-hero-inner{position:relative;z-index:2;max-width:1200px;margin:0 auto;padding:150px 32px 90px;width:100%;}
/* On short viewports (landscape tablets/phones, short desktop windows) the
   hero's tall vertical padding pushed the sticky quick-nav past the fold and
   clipped it. Trim the padding there so the quick-nav clears under the hero. */
@media (max-height:900px){
  .km-hero-inner{padding-top:104px;padding-bottom:56px;}
}
@media (max-height:740px){
  .km-hero-inner{padding-top:88px;padding-bottom:44px;}
}
.km-hero-title{font-family:var(--km-display);font-weight:800;color:#fff;
  font-size:clamp(34px,5.4vw,64px);line-height:1.08;margin:0 0 16px;max-width:820px;
  letter-spacing:-.01em;text-shadow:0 2px 20px rgba(0,0,0,.5),0 1px 4px rgba(0,0,0,.4);}
.km-hero-tagline{font-family:var(--km-display);font-weight:700;font-style:italic;color:var(--jpic-gold);
  font-size:clamp(18px,2.4vw,26px);margin:0 0 16px;}
.km-hero-pathway{color:rgba(255,255,255,.92);font-size:clamp(14px,1.5vw,18px);font-weight:500;margin:0 0 28px;}
.km-hero-pillars{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 36px;padding:0;list-style:none;
  color:rgba(255,255,255,.85);font-size:13px;letter-spacing:.5px;text-transform:uppercase;font-weight:500;}
.km-hero-pillars li:not(:first-child)::before{content:'';display:inline-block;width:1px;height:14px;
  background:rgba(255,255,255,.4);margin-right:10px;vertical-align:middle;}
.km-hero-buttons{display:flex;flex-wrap:wrap;gap:14px;}

/* ================================================================
   ALUMNI / FEATURE STORY HERO — shared "look & feel"
   Opt-in components used by the alumni-*.html story pages. Add
   `km-hero-story` to the <section class="km-hero"> to get the refined
   scrim, toned line-draw and lifted secondary CTA; use .km-hero-back,
   .km-hero-meta (+ flag/sep) and .km-hero-lede inside .km-hero-copy.
   ================================================================ */
.km-hero-copy{max-width:600px;}
.km-hero-back{display:inline-flex;align-items:center;gap:8px;color:rgba(255,255,255,.82);
  font-family:var(--km-display);font-weight:700;font-size:13px;letter-spacing:.4px;
  text-transform:uppercase;text-decoration:none;margin-bottom:22px;
  transition:color .2s,transform .15s;}
.km-hero-back:hover{color:var(--jpic-gold);transform:translateX(-2px);}
.km-hero-back span{font-size:15px;transition:transform .25s cubic-bezier(.34,1.56,.64,1);}
.km-hero-back:hover span{transform:translateX(-3px);}
.km-hero-back:focus-visible{outline:3px solid var(--jpic-gold);outline-offset:3px;border-radius:4px;}
/* unified kicker — replaces the old pill + flag-chip + loose-text tagline */
.km-hero-meta{display:flex;align-items:center;flex-wrap:wrap;gap:9px;margin:0 0 20px;
  font-family:var(--km-display);font-weight:700;font-size:13px;letter-spacing:1px;
  text-transform:uppercase;color:rgba(255,255,255,.92);text-shadow:0 1px 6px rgba(0,0,0,.5);}
.km-hero-meta-flag{display:inline-flex;align-items:center;gap:8px;}
.km-hero-meta-sep{width:5px;height:5px;border-radius:50%;background:var(--jpic-gold);opacity:.9;flex-shrink:0;}
.km-hero-lede{color:rgba(255,255,255,.9);font-size:clamp(15px,1.5vw,18px);line-height:1.6;
  max-width:500px;margin:0 0 30px;text-shadow:0 1px 8px rgba(0,0,0,.5);}
.km-hero-lede strong{color:#fff;font-weight:700;}
/* story-hero polish: cleaner left scrim, subtle line-draw + visible icon, lifted CTA */
.km-hero-story .km-hero-overlay{background:
  linear-gradient(90deg, rgba(6,12,24,.88) 0%, rgba(6,12,24,.66) 34%, rgba(6,12,24,.20) 62%, rgba(6,12,24,0) 82%),
  linear-gradient(0deg, rgba(6,12,24,.80) 0%, rgba(6,12,24,.30) 26%, rgba(6,12,24,0) 60%),
  linear-gradient(115deg, rgba(110,27,43,.32) 0%, rgba(0,73,144,.28) 55%, rgba(0,73,144,0) 100%);}
.km-hero-story .km-hline-path{opacity:.34;}
.km-hero-story .km-hline-disc{filter:drop-shadow(0 4px 14px rgba(0,10,30,.55));}
.km-hero-story .km-hline-icon path{stroke-width:2.4px;}
.km-hero-story .km-hero-buttons .km-btn-outline-light{background-color:rgba(255,255,255,.12);
  border-color:rgba(255,255,255,.6);backdrop-filter:blur(3px);}
.km-hero-story .km-hero-buttons .km-btn-outline-light:hover{background-color:#fff;border-color:#fff;color:var(--jpic-blue);}


  .km-page {
    font-family: var(--km-body);
    color: var(--grey-700);
    line-height: 1.6;
    box-sizing: border-box;
    -webkit-font-smoothing: antialiased;
  }
  .km-page * {
    box-sizing: border-box;
  }
  .km-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 32px;
  }
  .km-center {
    text-align: center;
    margin-bottom: 48px;
  }
  .km-label {
    display: inline-block;
    font-family: var(--km-display);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: var(--jpic-blue);
    margin-bottom: 16px;
    padding-left: 36px;
    position: relative;
  }
  .km-label::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    width: 24px;
    height: 2px;
    background: var(--jpic-gold);
    transform: translateY(-50%);
  }
  .km-label-light {
    color: var(--jpic-gold);
    text-shadow: 0 1px 8px rgba(0,0,0,.35);
  }
  .km-center .km-label {
    padding-left: 0;
  }
  .km-center .km-label::before {
    left: 50%;
    transform: translate(-50%, -50%);
    top: -12px;
  }
  .km-h2 {
    font-family: var(--km-display);
    font-weight: 800;
    font-size: clamp(28px, 3.2vw, 40px);
    line-height: 1.18;
    color: var(--jpic-blue);
    margin: 0 0 18px;
  }
  .km-h2-sm {
    font-size: clamp(24px, 2.4vw, 30px);
  }
  .km-lead {
    font-size: 16px;
    line-height: 1.75;
    color: var(--grey-700);
    margin: 0 0 28px;
  }
  .km-step a,
  .km-step a:visited,
  .km-step-title a,
  .km-step-title a:visited,
  .km-step-title h3 a ,
  .y-pathways-grid a,
  .y-final-btns a,
  a:visited,
  .km-btn-red a {
    color: inherit;
    text-decoration: none;
    font: inherit;
  }

  /* Buttons */
  .km-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 14px;
    letter-spacing: 0.4px;
    padding: 14px 30px;
    border-radius: 6px;
    text-decoration: none;
    transition:
      transform 0.2s,
      box-shadow 0.2s,
      background 0.2s,
      color 0.2s;
    cursor: pointer;
    border: 2px solid transparent;
    /* border-box + max-width — pages that stretch a CTA with width:100% were getting
       the 30px side padding and 2px border added on top of the track (content-box),
       so a full-width button sat ~64px wider than its container and scrolled the page
       sideways on phones. Both together keep any button inside its column. */
    box-sizing: border-box;
    max-width: 100%;
  }
  .km-btn span[aria-hidden="true"] {
    display: inline-block;
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
  }
  .km-btn:hover span[aria-hidden="true"] {
    transform: translateX(5px);
  }
  @media (prefers-reduced-motion: reduce) {
    .km-btn span[aria-hidden="true"] {
      transition: none;
    }
  }
  .km-btn-gold {
    background: var(--jpic-gold);
    color: var(--jpic-blue);
    box-shadow: 0 4px 16px rgba(254, 190, 80, 0.35);
  }
  .km-btn-gold:hover {
    background: var(--jpic-gold-dark);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(254, 190, 80, 0.45);
  }
  .km-btn-red {
    background: var(--jpic-red);
    color: #fff !important;
    box-shadow: 0 4px 16px rgba(237, 27, 46, 0.3);
  }
  .km-btn-red:hover {
    background: #c8121f;
    transform: translateY(-2px);
    text-decoration: none;
  }
  .km-btn-outline {
    background: rgba(255, 255, 255, 0.06);
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.7);
  }
  .km-btn-outline:hover {
    background: #fff;
    color: var(--jpic-blue) !important;
  }
  .km-btn-outline-light {
    background: transparent;
    color: #fff !important;
    border-color: rgba(255, 255, 255, 0.8);
  }
  .km-btn-outline-light:hover {
    background: #fff;
    color: var(--jpic-blue);
  }
  .km-btn-ghost {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    border: 1px solid rgba(255, 255, 255, 0.4);
  }
  .km-btn-ghost:hover {
    background: rgba(255, 255, 255, 0.18);
  }

  /* ---------- WHY ---------- */
  .km-why {
    padding: 90px 0;
    background: var(--white);
  }
  .km-why-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
  }
  .km-why-image {
    position: relative;
  }
  .km-why-image img {
    width: 100%;
    border-radius: 12px;
    object-fit: cover;
    /* Bias the crop toward the top: these are people photos and faces sit
       in the upper third, so a centred crop (esp. of a portrait source in a
       landscape box on mobile) decapitates the subjects. */
    object-position: center 20%;
    aspect-ratio: 4/5;
    box-shadow: 0 20px 50px rgba(0, 51, 102, 0.18);
  }
  /* Floating achievement badge overlaid on the why-image photo — e.g.
     "30+ Years of Excellence". Additive/optional: only appears where a
     page's markup includes it (currently home.html). */
  .km-why-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(6px);
    border-radius: 14px;
    padding: 16px 20px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.2);
  }
  .km-why-badge-num {
    font-family: var(--km-display);
    font-weight: 800;
    font-size: 32px;
    color: var(--jpic-blue);
    line-height: 1;
    flex-shrink: 0;
  }
  .km-why-badge-num span {
    color: var(--jpic-gold-dark);
  }
  .km-why-badge-num .hm-count {
    color: var(--jpic-blue);
  }
  .km-why-badge-label {
    font-size: 12px;
    color: var(--grey-500);
    font-weight: 600;
    line-height: 1.35;
  }

  .km-why-cards {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-top: 8px;
  }
  /* Modifier: lays the same cards out 4-across full width — used when the
     cards sit below the why-grid rather than squeezed into its narrower
     content column (currently home.html only). */
  .km-why-cards-full {
    grid-template-columns: repeat(4, 1fr);
  }
  .km-why-card {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 10px;
    padding: 24px 22px;
    border-top: 4px solid var(--jpic-gold);
    transition:
      transform 0.25s,
      box-shadow 0.25s;
  }
  /*****HOVER****/
  .km-why-card:hover,
  .km-step-icon:hover,
  .km-person:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 30px rgba(0, 51, 102, 0.12);
  }
  .km-why-icon {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jpic-blue-light), var(--jpic-blue) 65%, var(--jpic-blue-dark));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 34px;
    margin-bottom: 16px;
    box-shadow: 0 10px 22px rgba(0, 73, 144, 0.28), 0 0 0 6px rgba(0, 73, 144, 0.07);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
  }
  .km-why-card:hover .km-why-icon {
    transform: scale(1.06);
    box-shadow: 0 14px 28px rgba(0, 73, 144, 0.35), 0 0 0 8px rgba(0, 73, 144, 0.1);
  }
  .km-why-icon-gold {
    width: 94px;
    height: 94px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jpic-gold), var(--jpic-gold-dark));
    color: var(--jpic-blue-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    margin-bottom: 16px;
    box-shadow: 0 10px 22px rgba(254, 190, 80, 0.32), 0 0 0 6px rgba(254, 190, 80, 0.1);
  }
  .km-why-card h3 {
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--jpic-blue);
    margin: 0 0 8px;
    line-height: 1.3;
  }
  .km-why-card p {
    font-size: 14px;
    color: var(--grey-500);
    margin: 0;
    line-height: 1.6;
  }

  /* ---------- WHY ACHIEVEMENT BAND ----------
     The proof-point numbers (years, nationalities, ATAR, pathway support)
     live inside the Why section as one rounded highlight band, rather
     than as a separate full-bleed dark section further down the page —
     ties the value proposition and the achievement stats into a single
     "why + proof" block (home.html only; .km-stats elsewhere is untouched). */
  .km-why-stats-band {
    position: relative;
    overflow: hidden;
    background: linear-gradient(120deg, var(--jpic-blue-dark), var(--jpic-blue));
    border-radius: 20px;
    padding: 40px 36px;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin: 56px 0 48px;
    box-shadow: 0 24px 60px rgba(0, 51, 102, 0.22);
  }
  .km-why-stats-band::before {
    content: "";
    position: absolute;
    top: -60px;
    right: -60px;
    width: 220px;
    height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(254, 190, 80, 0.28), transparent 70%);
  }
  .km-why-stat {
    position: relative;
    z-index: 1;
    text-align: center;
  }
  .km-why-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: -12px;
    top: 8%;
    height: 84%;
    width: 1px;
    background: linear-gradient(var(--jpic-gold), transparent);
  }
  .km-why-stat-icon {
    font-size: 26px;
    color: var(--jpic-gold);
    margin-bottom: 8px;
  }
  .km-why-stat-num {
    font-family: var(--km-display);
    font-weight: 800;
    font-size: clamp(32px, 3.4vw, 42px);
    color: #fff;
    line-height: 1;
  }
  .km-why-stat-num span {
    color: var(--jpic-gold);
  }
  .km-why-stat-num .hm-count {
    color: #fff;
  }
  .km-why-stat-num-text {
    font-size: clamp(24px, 2.8vw, 32px);
  }
  .km-why-stat-label {
    color: rgba(255, 255, 255, 0.82);
    font-size: 12.5px;
    margin-top: 8px;
    line-height: 1.4;
    font-weight: 500;
  }

  /* ---------- JOURNEY ---------- */
  .km-journey {
    padding: 90px 0;
    background: var(--off-white);
  }
  .km-journey-intro {
    max-width: auto;
    margin: -24px auto 48px;
    text-align: center;
    font-size: 15px;
    padding-bottom: 30px;
    line-height: 1.7;
    color: var(--grey-700);
  }

  /* Branch layout: two optional entry tracks -> shared spine */
  .km-branch {
    display: grid;
    grid-template-columns: auto 64px 1fr;
    align-items: center;
    gap: 0;
  }
  .km-branch-entries {
    display: flex;
    flex-direction: column;
    gap: 36px;
  }
  .km-track {
    background: #fff;
    border: 1px solid var(--grey-200);
    border-radius: 14px;
    padding: 22px 22px 24px;
    position: relative;
    box-shadow: 0 6px 20px rgba(0, 51, 102, 0.05);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
  }
  .km-track:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(0, 51, 102, 0.1);
  }
  .km-track-label {
    position: absolute;
    top: -12px;
    left: 22px;
    background: var(--jpic-blue);
    color: #fff;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
  }
  .km-track-steps {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
  }
  .km-track-steps .km-step {
    flex: 1;
  }
  .km-track-arrow {
    color: var(--jpic-gold-dark);
    font-size: 24px;
    font-weight: 700;
    flex: 0 0 auto;
  }

  /* Convergence connector */
  .km-branch-merge {
    position: relative;
    height: 100%;
    min-height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .km-merge-line {
    position: absolute;
    left: 2px;
    width: 46px;
    height: 3px;
    border-radius: 2px;
    background: linear-gradient(90deg, var(--jpic-gold), var(--jpic-gold-dark));
  }
  .km-merge-top {
    top: 28%;
    transform: rotate(22deg);
    transform-origin: left center;
  }
  .km-merge-bottom {
    bottom: 28%;
    transform: rotate(-22deg);
    transform-origin: left center;
  }
  .km-merge-arrow {
    position: relative;
    color: var(--jpic-gold-dark);
    font-size: 38px;
    font-weight: 700;
    margin-left: 20px;
  }

  /* Shared destination spine */
  .km-branch-shared {
    display: flex;
    align-items: center;
    gap: 8px;
    background: #fff;
    border: 2px solid var(--jpic-gold);
    border-radius: 14px;
    padding: 24px 22px;
    box-shadow: 0 8px 26px rgba(254, 190, 80, 0.18);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
  }
  .km-branch-shared:hover {
    transform: translateY(-3px);
    box-shadow: 0 16px 34px rgba(254, 190, 80, 0.28);
  }
  .km-branch-shared .km-step {
    flex: 1;
  }

  /* Destination steps (Secondary School, University) get a gold gradient
     icon to mark them visually as "the goal" — everything on the left
     (entry tracks) reads blue, the shared spine on the right reads gold. */
  .km-branch-shared .km-step-icon {
    background: linear-gradient(135deg, var(--jpic-gold), var(--jpic-gold-dark));
    color: var(--jpic-blue-dark);
    box-shadow: 0 10px 22px rgba(254, 190, 80, 0.35), 0 0 0 6px rgba(254, 190, 80, 0.1);
  }
  .km-branch-shared .km-step:hover .km-step-icon {
    box-shadow: 0 16px 30px rgba(254, 190, 80, 0.42), 0 0 0 8px rgba(254, 190, 80, 0.16);
  }

  /* Optional step styling — lighter tone + dashed ring signals "this step
     can be skipped if the student already meets the entry requirement". */
  .km-step-optional .km-step-icon {
    background: linear-gradient(135deg, #eef4fb, #dbe9f8);
    border: 2px dashed var(--jpic-blue-light);
    color: var(--jpic-blue);
    box-shadow: 0 8px 18px rgba(0, 73, 144, 0.12);
  }
  .km-optional-tag {
    display: inline-block;
    background: var(--grey-100);
    color: var(--jpic-blue);
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 12px;
    margin-bottom: 10px;
    border: 1px dashed var(--jpic-blue-light);
  }

  .km-step {
    position: relative;
    z-index: 1;
    text-align: center;
    background: transparent;
  }
  .km-step-marker {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--jpic-red);
    color: #fff;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px;
    box-shadow: 0 3px 10px rgba(237, 27, 46, 0.35);
  }
  .km-step-icon {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--jpic-blue-light), var(--jpic-blue) 65%, var(--jpic-blue-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 32px;
    margin: 0 auto 18px;
    color: #fff;
    box-shadow: 0 10px 22px rgba(0, 73, 144, 0.28), 0 0 0 6px rgba(0, 73, 144, 0.07);
    transition: transform 0.3s cubic-bezier(.16,1,.3,1), box-shadow 0.3s;
  }
  .km-step:hover .km-step-icon {
    transform: translateY(-5px) scale(1.05);
    box-shadow: 0 16px 30px rgba(0, 73, 144, 0.35), 0 0 0 8px rgba(0, 73, 144, 0.1);
  }
  .km-step-title {
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 15px;
    color: var(--jpic-blue);
    margin: 0 0 12px;
    line-height: 1.3;
    min-height: 40px;
    text-decoration: none;
  }
  .km-step-title span {
    display: block;
    font-weight: 500;
    color: var(--grey-500);
    font-size: 13px;
  }
  .km-step ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .km-step ul li {
    font-size: 13px;
    color: var(--grey-700);
    padding: 4px 0;
    position: relative;
  }
  .km-step ul li::before {
    content: "•";
    color: var(--jpic-gold);
    font-weight: 700;
    margin-right: 6px;
  }

  /* ---------- STATS ---------- */
  .km-stats {
    padding: 70px 0;
    background: linear-gradient(
      135deg,
      var(--jpic-blue-dark),
      var(--jpic-blue)
    );
  }
  /* minmax(0,1fr) — a bare 1fr is minmax(auto,1fr), so a track can never shrink
     below the min-content width of its stat. Long word-stats ("Vice Captain",
     "Dux of the College") then push the whole grid past the viewport and the page
     scrolls sideways on phones. minmax(0,…) lets the track shrink and the text wrap. */
  .km-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 0;
  }
  .km-stat {
    text-align: center;
    padding: 10px 28px;
    position: relative;
    min-width: 0; /* grid items default to min-width:auto — same overflow trap */
  }
  .km-stat:not(:last-child)::after {
    content: "";
    position: absolute;
    right: 0;
    top: 18%;
    height: 64%;
    width: 1px;
    background: linear-gradient(var(--jpic-gold), transparent);
  }
  .km-stat-icon {
    font-size: 30px;
    color: var(--jpic-gold);
    margin-bottom: 10px;
  }
  .km-stat-num {
    font-family: var(--km-display);
    font-weight: 800;
    font-size: clamp(38px, 4.5vw, 56px);
    color: #fff;
    line-height: 1;
    overflow-wrap: break-word; /* a single long token can't force a sideways scroll */
  }
  .km-stat-num span {
    color: var(--jpic-gold);
  }
  .km-stat-num-text {
    font-size: clamp(30px, 3.6vw, 44px);
  }
  .km-stat-label {
    color: rgba(255, 255, 255, 0.8);
    font-size: 13px;
    margin-top: 10px;
    line-height: 1.45;
    font-weight: 500;
  }

  /* ---------- CAMPUS ---------- */
  .km-campus {
    padding: 90px 0;
    background: var(--white);
  }
  .km-campus-grid {
    display: grid;
    grid-template-columns: 1.1fr 1fr;
    gap: 40px;
    align-items: start;
  }
  .km-tour-frame {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 16/10;
    box-shadow: 0 18px 44px rgba(0, 51, 102, 0.2);
  }
  .km-tour-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .km-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 74px;
    height: 74px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.92);
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition:
      transform 0.25s,
      background 0.25s;
  }
  .km-play span {
    color: var(--jpic-red);
    font-size: 26px;
    margin-left: 4px;
    text-decoration: none;
  }
  .km-play:hover {
    transform: translate(-50%, -50%) scale(1.08);
    background: #fff;
    text-decoration: none;
  }
  .km-tour-caption {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 24px;
    background: linear-gradient(transparent, rgba(0, 51, 102, 0.92));
  }
  .km-tour-caption h3 {
    font-family: var(--km-display);
    font-weight: 700;
    color: #fff;
    font-size: 18px;
    margin: 0 0 4px;
  }
  .km-tour-caption p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 0;
  }
  .km-tour-btn {
    margin-top: 18px;
  }
  .km-facilities {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
  }
  .km-facility {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 4/3;
    text-decoration: none;
    display: block;
  }
  .km-facility img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s;
  }
  .km-facility:hover img {
    transform: scale(1.08);
  }
  .km-facility span {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 10px 12px;
    color: #fff;
    font-family: var(--km-display);
    font-weight: 600;
    font-size: 13px;
    background: linear-gradient(transparent, rgba(0, 51, 102, 0.88));
  }

  /* ---------- SUCCESS STORIES ---------- */
  .km-stories {
    padding: 90px 0;
    background: var(--off-white);
  }
  .km-stories .km-h2 {
    /*color: #fff;*/
  }
  .km-stories .km-label {
    color: var(--jpic-gold);
  }
  .km-stories-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    text-align: left;
  }
  .km-viewall {
    color: var(--jpic-gold);
    text-decoration: none;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 14px;
  }
  .km-viewall:hover {
    color: var(--jpic-gold);
    text-decoration: none;
    transform: scale(1.07);
  }
  .km-stories-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .km-story-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/5;
    text-decoration: none;
    display: block;
    transition:
      transform 0.3s,
      box-shadow 0.3s;
  }
  .km-story-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .km-story-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      transparent 30%,
      rgba(0, 73, 144, 0.55) 70%,
      rgba(0, 73, 144, 0.92) 100%
    );
  }
  .km-story-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.5);
  }
  .km-story-card:hover img {
    transform: scale(1.07);
  }
  .km-story-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: var(--jpic-burgundy);
    color: #fff;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 4px;
  }
  .km-story-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 22px 22px 24px;
  }
  .km-story-body h3 {
    font-family: var(--km-display);
    font-weight: 700;
    color: #fff !important;
    font-size: 19px;
    margin: 0 0 4px;
    line-height: 1.25;
  }
  .km-story-body p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 0 0 12px;
  }
  .km-watch {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jpic-gold);
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 13px;
  }

  /* ============================================================
     GLOBAL VIDEO CUE — one shared "this is a video, tap to play"
     language reused across every page (home Success Stories,
     campus tour, HSP student-story thumbnails, homestay
     testimonial avatars, and any future video). Self-contained:
     it draws its own play triangle and pulsing gold ring in pure
     CSS, so it needs NO icon font or SVG sprite and renders
     identically everywhere.

     USAGE
       <a class="jp-video" data-vimeo="123456">
         <img ...>
         <span class="jp-videobadge">Watch video</span>   <!-- optional, larger media -->
         <span class="jp-videocue" aria-hidden="true"></span>
       </a>
     Put .jp-video on the clickable trigger (the [data-vimeo] /
     link element); drop a .jp-videocue inside it. Size modifiers:
     .jp-videocue-lg (hero/tour), default (story cards),
     .jp-videocue-sm (small avatars/thumbnails).
     ============================================================ */
  .jp-video { position: relative; cursor: pointer; }
  .jp-video:focus-visible { outline: 3px solid var(--jpic-gold); outline-offset: 3px; }

  .jp-videocue {
    --jp-cue: 60px;
    position: absolute; top: 50%; left: 50%; z-index: 3;
    transform: translate(-50%, -50%);
    width: var(--jp-cue); height: var(--jp-cue); border-radius: 50%;
    display: grid; place-items: center;
    background: rgba(255, 255, 255, 0.94);
    box-shadow: 0 10px 30px rgba(0, 20, 40, 0.4);
    font-size: var(--jp-cue); /* play triangle scales with cue size via em */
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), background 0.3s;
  }
  /* Play triangle — pure CSS, brand gold */
  .jp-videocue::after {
    content: ''; display: block; width: 0; height: 0; border-style: solid;
    border-width: 0.19em 0 0.19em 0.3em;
    border-color: transparent transparent transparent var(--jpic-gold, #FEBE50);
    margin-left: 0.07em; transition: border-color 0.3s;
  }
  /* Pulsing gold ring draws the eye to the control */
  .jp-videocue::before {
    content: ''; position: absolute; inset: 0; border-radius: 50%;
    border: 2px solid var(--jpic-gold, #FEBE50);
    animation: jpVideoCuePulse 2.6s ease-out infinite;
  }
  @keyframes jpVideoCuePulse {
    0% { opacity: 0.9; transform: scale(1); }
    70% { opacity: 0; transform: scale(1.6); }
    100% { opacity: 0; transform: scale(1.6); }
  }
  .jp-videocue-lg { --jp-cue: 76px; }
  .jp-videocue-sm { --jp-cue: 42px; }
  .jp-videocue-xs { --jp-cue: 34px; }

  .jp-video:hover .jp-videocue,
  .jp-videocue:hover {
    transform: translate(-50%, -50%) scale(1.1); background: #fff;
  }
  .jp-video:hover .jp-videocue::after,
  .jp-videocue:hover::after { border-left-color: var(--jpic-blue, #004990); }

  /* "Watch video" badge — the at-a-glance signal on larger media */
  .jp-videobadge {
    position: absolute; top: 14px; right: 14px; z-index: 3;
    display: inline-flex; align-items: center; gap: 7px;
    padding: 6px 12px 6px 11px; border-radius: 100px;
    background: rgba(6, 20, 42, 0.55);
    -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.28);
    color: #fff; font-family: var(--km-display); font-weight: 700;
    font-size: 11px; letter-spacing: 0.4px; line-height: 1; text-transform: uppercase;
    box-shadow: 0 4px 14px rgba(0, 20, 40, 0.3); pointer-events: none;
  }
  .jp-videobadge::before {
    content: ''; width: 0; height: 0; border-style: solid;
    border-width: 5px 0 5px 8px;
    border-color: transparent transparent transparent var(--jpic-gold, #FEBE50);
  }

  @media (max-width: 600px) {
    .jp-videocue { --jp-cue: 54px; }
    .jp-videocue-lg { --jp-cue: 64px; }
    .jp-videocue-sm { --jp-cue: 40px; }
    .jp-videocue-xs { --jp-cue: 32px; }
    .jp-videobadge { font-size: 10px; padding: 5px 10px 5px 9px; }
  }
  @media (prefers-reduced-motion: reduce) {
    .jp-videocue::before { animation: none; opacity: 0.9; }
  }

  /* ---------- HERO BACKGROUND VIDEO (.jp-herovid) ----------
     Layers a silent, looping film over the hero photo.

     The existing .km-hero-img STAYS PUT and is doing two jobs: it is the
     LCP element and it is the poster. So a visitor who never receives the
     video — reduced motion, small screen, Save-Data, slow link, or a
     browser that refuses autoplay — sees exactly the hero they see today.
     That is the whole design: the video is an enhancement, never a
     dependency, and it costs nothing to the people who don't get it.

     Markup — ONE empty div inside .km-hero-media, AFTER the <img>:
       <div class="jp-herovid"
            data-hv-1080="/Video/Foo-1080.mp4"
            data-hv-720="/Video/Foo-720.mp4" aria-hidden="true"></div>
     js/jpic-herovideo.js injects the <video> only when it is safe to, and
     only after window.load, so the film never competes with the hero image
     for bandwidth. Absolute URLs are used as-is; root-relative paths are
     resolved against window.JPIC_MEDIA_BASE when that is set, which is the
     one-line switch to Azure Storage / a CDN.

     The existing .km-hero-overlay IS the scrim — headline contrast is
     unchanged. Do NOT add a second overlay on top of the video. */
  .jp-herovid { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .jp-herovid video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; opacity: 0; transition: opacity 0.9s ease;
  }
  .jp-herovid video.is-in { opacity: 1; }
  /* Once the film is up it completely covers the photo, so the photo's slow
     Ken Burns push is just wasted compositing — and on a still frame behind
     moving video it can read as a wobble. Stop it. */
  .jp-herovid-on .km-hero-img { animation: none; }
  @media (prefers-reduced-motion: reduce) { .jp-herovid { display: none; } }

  /* ---------- LIFE GALLERY ----------
     Uniform 3-col editorial card grid (same visual language as the
     Success Stories cards above: photo + gradient overlay + tag + title
     + one-line caption). Replaces the old 6-cell bento grid with mixed
     spans and single-word captions, which read as busy/flat rather than
     inviting. */
  .km-life {
    padding: 90px 0;
    background: var(--white);
  }
  .km-life-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
  }
  .km-life-card {
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    aspect-ratio: 4/5;
    text-decoration: none;
    display: block;
    transition: transform 0.3s, box-shadow 0.3s;
  }
  .km-life-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s;
  }
  .km-life-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 50px rgba(0, 0, 0, 0.28);
  }
  .km-life-card:hover img {
    transform: scale(1.07);
  }
  .km-life-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(
      transparent 35%,
      rgba(0, 51, 102, 0.55) 70%,
      rgba(0, 51, 102, 0.92) 100%
    );
  }
  .km-life-tag {
    position: absolute;
    top: 16px;
    left: 16px;
    background: rgba(255, 255, 255, 0.16);
    backdrop-filter: blur(6px);
    border: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 10.5px;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 6px 12px;
    border-radius: 20px;
  }
  .km-life-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 20px 20px 22px;
  }
  .km-life-body h3 {
    font-family: var(--km-display);
    font-weight: 700;
    color: #fff !important;
    font-size: 18px;
    margin: 0 0 4px;
    line-height: 1.25;
  }
  .km-life-body p {
    color: rgba(255, 255, 255, 0.85);
    font-size: 13px;
    margin: 0;
    line-height: 1.5;
  }

  /* ---------- SAFE ----------
     Asymmetric photo + feature-list layout (same pattern language as
     .km-why-grid) instead of a lone 6-card icon grid — a real photo plus
     a floating stat badge gives the section a human anchor point rather
     than reading as six identical boxes filling space. */
  .km-safe {
    padding: 90px 0;
    background: var(--grey-100);
  }
  .km-safe-grid {
    display: grid;
    grid-template-columns: 0.85fr 1.15fr;
    gap: 56px;
    align-items: center;
  }
  .km-safe-media {
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    aspect-ratio: 4/5;
    box-shadow: 0 20px 50px rgba(0, 51, 102, 0.18);
  }
  .km-safe-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  .km-safe-media-badge {
    position: absolute;
    left: 20px;
    bottom: 20px;
    right: 20px;
    background: rgba(255, 255, 255, 0.96);
    backdrop-filter: blur(6px);
    border-radius: 12px;
    padding: 16px 18px;
    display: flex;
    align-items: center;
    gap: 14px;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
  }
  .km-safe-media-badge i {
    font-size: 28px;
    color: var(--jpic-gold-dark);
    flex-shrink: 0;
  }
  .km-safe-media-badge strong {
    display: block;
    font-family: var(--km-display);
    font-weight: 800;
    font-size: 19px;
    color: var(--jpic-blue);
    line-height: 1.2;
  }
  .km-safe-media-badge span {
    font-size: 12px;
    color: var(--grey-500);
  }
  .km-safe-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .km-safe-item {
    display: flex;
    align-items: flex-start;
    gap: 18px;
    padding: 18px 0;
    border-bottom: 1px solid var(--grey-200);
  }
  .km-safe-item:last-child {
    border-bottom: none;
  }
  .km-safe-icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    background: rgba(0, 73, 144, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: var(--jpic-blue);
  }
  .km-safe-item h3 {
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 15.5px;
    color: var(--jpic-blue);
    margin: 0 0 4px;
  }
  .km-safe-item p {
    font-size: 13.5px;
    color: var(--grey-500);
    margin: 0;
    line-height: 1.6;
  }

  /*-------------ACCOMMODATION------------*/
  /* ====================== SECTION SHELL ====================== */
  .y-section {
    padding: 70px 28px;
    background: var(--off-white);
  }
  .y-section-inner {
    max-width: var(--y-maxw);
    margin: 0 auto;
  }
  .y-section-head {
    text-align: center;
    margin-bottom: 46px;
  }
  .y-section-head h2 {
    font-family: var(--km-display);
    font-size: clamp(28px, 3.4vw, 40px);
    font-weight: 600;
    color: var(--grey-900);
    margin-bottom: 12px;
  }

  /* ====================== TWO PATHWAYS ====================== */
  .y-pathways-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 26px;
  }

  /* Each card: a photo on the OUTER edge and a content panel that overlaps
   it with an angled edge. ATAR = photo left, IB = photo right. */
  .y-pathway-block {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    min-height: 240px;
    display: flex;
  }
  .y-pathway-block.blue {
    background: var(--off-white);
    border: 1px solid var(--grey-200);
  }
  .y-pathway-block.gold {
    background: #fff7ea;
    border: 1px solid #f3dcae;
  }

  /* Photo sits behind, pinned to the outer edge */
  .y-pathway-img {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 44%;
    background-size: cover;
    background-position: center;
  }
  .y-pathway-block.blue .y-pathway-img {
    left: 0;
  }
  .y-pathway-block.gold .y-pathway-img {
    right: 0;
  }

  /* Content panel overlaps the photo with an angled cut */
  .y-pathway-content {
    position: relative;
    z-index: 2;
    padding: 30px 30px;
    width: 62%;
    align-self: stretch;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }
  .y-pathway-block.blue .y-pathway-content {
    margin-left: auto;
    background: var(--off-white);
    clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%);
    padding-left: 64px;
  }
  .y-pathway-block.gold .y-pathway-content {
    margin-right: auto;
    background: #fff7ea;
    clip-path: polygon(0 0, 100% 0, 82% 100%, 0 100%);
    padding-right: 64px;
  }
  .y-pathway-content .y-pw-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
  }
  .y-pw-badge {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--jpic-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    flex-shrink: 0;
  }
  .y-pathway-block.gold .y-pw-badge {
    background: var(--y-gold);
    color: var(--y-blue);
  }
  .y-pathway-content h3 {
    font-family: var(--y-display);
    font-size: 23px;
    font-weight: 600;
    color: var(--grey-900);
  }
  .y-pathway-block.gold .y-pathway-content h3 {
    color: var(--jpic-gold-dark);
  }
  .y-pathway-content .y-pw-desc {
    font-size: 14px;
    color: var(--grey-700);
    margin-bottom: 16px;
    line-height: 1.5;
  }
  .y-pw-list {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .y-pw-list li {
    font-size: 13.5px;
    color: var(--grey-700);
    padding: 6px 0 6px 24px;
    position: relative;
  }
  .y-pw-list li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--jpic-blue);
    font-weight: 700;
  }
  .y-pathway-block.gold .y-pw-list li::before {
    color: var(--jpic-gold-dark);
  }

  /* ---------- INFO (FAQ + TEAM) ---------- */
  .km-info {
    padding: 90px 0;
    background: var(--white);
  }
  .km-info-grid {
    display: grid;
    grid-template-columns: 1.05fr 0.95fr;
    gap: 56px;
    align-items: start;
  }
  .km-accordion {
    margin-top: 8px;
  }
  .km-acc-item {
    border-bottom: 1px solid var(--grey-200);
  }
  .km-acc-item summary {
    cursor: pointer;
    list-style: none;
    padding: 18px 36px 18px 0;
    position: relative;
    font-family: var(--km-display);
    font-weight: 600;
    font-size: 15px;
    color: var(--grey-900);
  }
  .km-acc-item summary::-webkit-details-marker {
    display: none;
  }
  .km-acc-item summary::after {
    content: "+";
    position: absolute;
    right: 4px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--jpic-red);
    font-size: 22px;
    font-weight: 400;
    transition: transform 0.25s;
  }
  .km-acc-item[open] summary::after {
    content: "–";
  }
  .km-acc-body {
    padding: 0 0 18px;
  }
  .km-acc-body p {
    font-size: 14px;
    color: var(--grey-500);
    margin: 0;
    line-height: 1.7;
  }

  .km-team-intro {
    font-size: 15px;
    color: var(--grey-700);
    margin: 0 0 24px;
    line-height: 1.7;
  }
  .km-team-people {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 18px;
    margin-bottom: 28px;
  }
  .km-person {
    text-align: center;
    background: var(--off-white);
    border-radius: 12px;
    padding: 24px 16px;
    border: 1px solid var(--grey-200);
  }
  .km-person img {
    width: 88px;
    height: 88px;
    border-radius: 50%;
    object-fit: cover;
    margin: 0 auto 12px;
    border: 3px solid var(--jpic-gold);
  }
  .km-person h4 {
    font-family: var(--km-display);
    font-weight: 700;
    font-size: 16px;
    color: var(--jpic-blue);
    margin: 0 0 2px;
  }
  .km-person p {
    font-size: 13px;
    color: var(--grey-500);
    margin: 0 0 12px;
  }
  .km-person-links {
    display: flex;
    justify-content: center;
    gap: 10px;
  }
  .km-person-links a {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--jpic-blue);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 14px;
    transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.2s;
  }
  /* Hover mirrors the primary gold CTA (.km-btn-gold) rather than an
     off-brand red — navy pill lifts into brand gold with a navy glyph. */
  .km-person-links a:hover,
  .km-person-links a:focus-visible {
    background: var(--jpic-gold);
    color: var(--jpic-blue-dark);
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(254, 190, 80, 0.45);
  }
  .km-contact {
    background: var(--jpic-blue);
    border-radius: 12px;
    padding: 26px 28px;
  }
  .km-contact h4 {
    font-family: var(--km-display);
    font-weight: 700;
    color: #fff;
    font-size: 17px;
    margin: 0 0 16px;
  }
  .km-contact ul {
    list-style: none;
    padding: 0;
    margin: 0;
  }
  .km-contact li {
    display: flex;
    align-items: center;
    gap: 10px;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    padding: 8px 0;
  }
  .km-contact li strong {
    color: #fff;
  }
  /* Contact rows are actionable (enquiry popup / tel:) — keep them white on
     the navy panel and let them warm to brand gold on hover. */
  .km-contact li a {
    color: #fff;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color 0.2s;
  }
  .km-contact li a:hover,
  .km-contact li a:focus-visible {
    color: var(--jpic-gold);
  }
  .km-contact li a:hover strong,
  .km-contact li a:focus-visible strong {
    color: inherit;
  }
  .km-c-ic {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    flex-shrink: 0;
  }
  .km-c-kakao {
    background: var(--jpic-gold);
    color: var(--jpic-blue);
  }
  .km-c-wa {
    background: #25d366;
  }

  /* ---------- FINAL CTA ---------- */
  .km-cta {
    position: relative;
    padding: 80px 0;
    overflow: hidden;
    background: linear-gradient(
      135deg,
      var(--jpic-blue-dark) 0%,
      var(--jpic-blue) 55%,
      var(--jpic-blue-light) 100%
    );
  }
  .km-cta-bg {
    position: absolute;
    inset: 0;
    background: radial-gradient(
      ellipse at 75% 50%,
      rgba(254, 190, 80, 0.12) 0%,
      transparent 60%
    );
  }
  .km-cta-inner {
    position: relative;
    z-index: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 40px;
    flex-wrap: wrap;
  }
  .km-cta-crest {
    font-size: 34px;
    color: var(--jpic-gold);
    margin-bottom: 10px;
  }
  .km-cta-text h2 {
    font-family: var(--km-display);
    font-weight: 800;
    color: #fff;
    font-size: clamp(26px, 3vw, 38px);
    margin: 0 0 8px;
    line-height: 1.15;
  }
  .km-cta-text p {
    color: rgba(255, 255, 255, 0.82);
    font-size: 16px;
    margin: 0;
  }
  .km-cta-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
  }

  /* ====================== FINAL CTA ====================== */
  .y-final-cta {
    background: linear-gradient(
      135deg,
      var(--jpic-blue-dark) 0%,
      var(--jpic-blue) 70%
    );
    color: #fff;
    padding: 46px 28px;
  }
  .y-final-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 30px;
    flex-wrap: wrap;
  }
  .y-final-crest {
    font-size: 46px;
    flex-shrink: 0;
  }
  .y-final-text {
    flex: 1;
    min-width: 240px;
  }
  .y-final-text h2 {
    font-family: var(--km-display);
    font-size: 26px;
    font-weight: 600;
    margin-bottom: 6px;
  }
  .y-final-text p {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.78);
    line-height: 1.5;
  }
  .y-final-btns {
    display: flex;
    gap: 13px;
    flex-wrap: wrap;
  }

  /* ---------- VIDEO LIGHTBOX (Vimeo popup) ---------- */
  .km-modal {
    position: fixed;
    inset: 0;
    z-index: 2147483000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 24px;
  }
  .km-modal.is-open {
    display: flex;
  }
  .km-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(8, 20, 38, 0.88);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
  }
  .km-modal-dialog {
    position: relative;
    z-index: 1;
    width: 100%;
    max-width: 960px;
  }
  .km-modal-frame {
    position: relative;
    width: 100%;
    padding-top: 56.25%;
    border-radius: 12px;
    overflow: hidden;
    background: #000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
  }
  .km-modal-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
  }
  .km-modal-close {
    position: absolute;
    top: -46px;
    right: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    border: 0;
    font-size: 18px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition:
      background 0.2s,
      transform 0.2s;
  }
  .km-modal-close:hover {
    background: var(--jpic-red);
    transform: scale(1.08);
  }
  @media (max-width: 600px) {
    .km-modal-close {
      top: -44px;
    }
  }

  /* ---------- RESPONSIVE ---------- */
@media(max-width:991px){
  .km-why-grid{grid-template-columns:1fr;gap:40px;}
  /* Gentler crop on mobile than 16/10: a portrait source keeps heads-to-waist
     (paired with object-position:center 20% above), landscape sources still fit. */
  .km-why-image img{aspect-ratio:4/3;max-height:460px;}
  .km-campus-grid{grid-template-columns:1fr;}
  .km-info-grid{grid-template-columns:1fr;gap:48px;}
  /* Journey: stack the two entry tracks above the shared destination */
  .km-branch{grid-template-columns:1fr;}
  .km-branch-merge{height:auto;min-height:0;margin:6px 0 2px;}
  .km-merge-line{display:none;}
  .km-merge-arrow{margin-left:0;transform:rotate(90deg);}
  /* See the minmax(0,1fr) note on .km-stats-grid above — the 2-up mobile grid needs
     it too, and the roomy 28px desktop side padding leaves too little room for a
     word-stat to wrap into once two tracks share a 375px screen. */
  .km-stats-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:36px 0;}
  .km-stat{padding:10px 14px;}
  .km-stat:nth-child(2)::after{display:none;}
  .km-stories-grid{grid-template-columns:1fr;}
  .km-safe-grid{grid-template-columns:1fr;gap:36px;}
  .km-safe-media{aspect-ratio:16/10;}
  .km-life-grid{grid-template-columns:repeat(2,1fr);}
  .km-why-cards-full{grid-template-columns:1fr 1fr;}
  .km-why-stats-band{grid-template-columns:1fr 1fr;row-gap:32px;}
  .km-why-stat:nth-child(2)::after{display:none;}
}
@media(max-width:768px){
  .y-pathway-card { max-width:380px; }
  .y-pathways-grid { grid-template-columns:1fr; }
  .y-pathway-block { flex-direction:column; }
  .y-pathway-img { position:relative; width:100%; height:180px; left:auto !important; right:auto !important; }
  .y-pathway-content {
    width:100% !important; margin:0 !important;
    clip-path:none !important; padding:26px !important;
  }
}
@media(max-width:600px){
  .km-inner{padding:0 20px;}
  .km-why-cards{grid-template-columns:1fr;}
  .km-why-cards-full{grid-template-columns:1fr;}
  .km-why-stats-band{grid-template-columns:1fr;gap:28px;padding:32px 26px;}
  .km-why-stat::after{display:none !important;}
  .km-why-badge{position:static;margin-top:14px;box-shadow:0 8px 22px rgba(0,0,0,.12);}
  /* Journey: stack each track's steps vertically, arrows point down */
  .km-track-steps{flex-direction:column;gap:6px;}
  .km-track-steps .km-track-arrow{transform:rotate(90deg);}
  .km-branch-shared{flex-direction:column;gap:6px;}
  .km-branch-shared .km-track-arrow{transform:rotate(90deg);}
  .km-facilities{grid-template-columns:1fr 1fr;}
  .km-life-grid{grid-template-columns:1fr;}
  .km-team-people{grid-template-columns:1fr;}
  .km-stores-head,.km-stories-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .km-hero-buttons .km-btn,.km-cta-buttons .km-btn{width:100%;justify-content:center;}
}

/* ================================================================
   NAVIGATION RAIL — .jpicnav-*
   ================================================================ */
.jpicnav{
  --mist:#F4F2F4; --ink:#1A1A1A; --soft-ink:#44444A; --line:#D9D9DE;
  /* Was 'Inter' - a third typeface loaded site-wide for the nav rail alone
     (~47 KB latin, ~140 KB on /Vi/). DESIGN-SYSTEM.md only tokenises Raleway
     and Roboto, so the rail now uses the body token like everything else. */
  --jpn-body:var(--km-body,'Roboto',sans-serif);
  --jpn-rail-w:76px; --jpn-rail-w-open:250px; --jpn-flyout-w:355px;
  --jpn-ease:cubic-bezier(.4,0,.2,1);
  font-family:var(--jpn-body);
}
.jpicnav *{box-sizing:border-box;}
.jpicnav a{text-decoration:none;}
.jpicnav button{font-family:inherit;cursor:pointer;background:none;border:0;}
.jpicnav :focus-visible{outline:2px solid var(--jpic-gold);outline-offset:2px;border-radius:4px;}

/* ================= DESKTOP / TABLET RAIL ================= */
.jpicnav-rail{
  position:fixed;top:0;left:0;height:100vh;width:var(--jpn-rail-w);
  background:var(--jpic-blue);color:#fff;z-index:1000;
  display:flex;flex-direction:column;
  transition:width .22s var(--jpn-ease);
  box-shadow:2px 0 18px rgba(0,20,50,.18);
}
.jpicnav-rail.is-expanded{width:var(--jpn-rail-w-open);}

/* ---- Scrollable menu body ----
   The rail is a fixed 100vh column, so on a short window (a 1280x700 laptop, or
   any browser carrying a lot of chrome) the menu is taller than the rail. It
   used to be silently CLIPPED — the lists shrank and their own overflow:hidden
   cut the last items off with no way to reach them. The lists now keep their
   natural height (flex:0 0 auto below) and this wrapper scrolls instead, which
   also lets keyboard focus scroll a clipped item into view for free.
   The wrapper — not the rail — is the scroll container on purpose: the collapse
   toggle sits at right:-16px, deliberately overhanging the rail edge, and an
   overflow on the rail would slice it in half. The logo lockup and the toggle
   therefore stay pinned above the scrolling menu. */
.jpicnav-rail-scroll{
  flex:1 1 auto;min-height:0;display:flex;flex-direction:column;
  overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.32) transparent;
}
.jpicnav-rail-scroll::-webkit-scrollbar{width:6px;}
.jpicnav-rail-scroll::-webkit-scrollbar-track{background:transparent;}
.jpicnav-rail-scroll::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:3px;}
.jpicnav-rail-scroll::-webkit-scrollbar-thumb:hover{background:rgba(255,255,255,.5);}

.jpicnav-rail-brand{position:relative;display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:10px;flex:0 0 auto;padding:50px 0px 50px 0px;}
.jpicnav-rail.is-expanded .jpicnav-rail-brand{flex-direction:row;flex-wrap:wrap;column-gap:14px;row-gap:6px;}
.jpicnav-rail-logo{display:flex;flex-direction:column;align-items:center;}
.jpicnav-mark-compact{width:48px;height:48px;object-fit:contain;flex:0 0 auto;}
.jpicnav-mark-full{display:none;height:84px;width:auto;max-width:100%;object-fit:contain;}
.jpicnav-rail.is-expanded .jpicnav-mark-compact{display:none;}
.jpicnav-rail.is-expanded .jpicnav-mark-full{display:block;}
.jpicnav-30mark-compact{display:block;height:70px;width:auto;flex:0 0 auto;}
.jpicnav-30mark-full{display:none;height:84px;width:auto;flex:0 0 auto;}
.jpicnav-rail.is-expanded .jpicnav-30mark-compact{display:none;}
.jpicnav-rail.is-expanded .jpicnav-30mark-full{display:block;}

.jpicnav-rail-brand .jpicnav-toggle{
  position:absolute;top:50%;right:-16px;transform:translateY(-50%);
  width:32px;height:32px;border-radius:50%;background-color:var(--jpic-blue);
  color:var(--jpic-gold);display:flex;align-items:center;justify-content:center;
  box-shadow:0 2px 8px rgba(0,20,50,.35);border:2px solid var(--jpic-gold);
  transition:transform .22s var(--jpn-ease);
}
.jpicnav-rail.is-expanded .jpicnav-toggle{transform:translateY(-50%) rotate(180deg);}
.jpicnav-toggle .jpicnav-icon{font-size:16px;line-height:1;}

.jpicnav-rail-list{list-style:none;margin:0;padding:50px 8px 8px 8px;display:flex;flex-direction:column;gap:2px;
  overflow:hidden;flex:0 0 auto;}
.jpicnav-rail-list-utility{margin-top:auto;padding-bottom:18px;}
.jpicnav-rail-divider{height:1px;background:rgba(255,255,255,.18);flex:0 0 auto;}
.jpicnav-rail-divider-top{margin:0 16px;}
.jpicnav-rail-divider-bottom{margin:auto 16px 0;}

.jpicnav-rail-item{
  display:flex;align-items:center;gap:16px;width:100%;min-height:48px;padding:12px 14px;
  border-radius:10px;color:rgba(255,255,255,.92);font-size:14px;font-weight:600;
  white-space:nowrap;position:relative;overflow:hidden;
  transition:background .28s var(--jpn-ease),color .2s,padding-left .28s var(--jpn-ease);
}
.jpicnav-rail-item .jpicnav-icon{display:inline-block;font-size:20px;line-height:1;flex:0 0 auto;width:22px;text-align:center;
  transition:transform .28s var(--jpn-ease),color .2s;}
/* Labels are timed against the width move rather than alongside it: on the way
   OUT they leave first, so no text is left being squeezed by a narrowing rail;
   on the way IN they wait for the rail to have made room, then fade up. Two
   rules, because the base declaration is the closing target and the .is-expanded
   one is the opening target — that is what makes the timing direction-aware. */
.jpicnav-rail-item .jpicnav-label{opacity:0;transition:opacity .12s var(--jpn-ease);overflow:hidden;}
.jpicnav-rail.is-expanded .jpicnav-rail-item .jpicnav-label{opacity:1;transition:opacity .16s var(--jpn-ease) .12s;}
/* Premium hover: soft gradient wash, icon lifts to gold, content nudges right,
   and a gold accent line grows in from the middle — a quieter preview of the
   full accent bar used for the active/expanded state below. */
.jpicnav-rail-item::after{
  content:'';position:absolute;left:0;top:50%;width:3px;height:0;
  border-radius:0 3px 3px 0;background:var(--jpic-gold);
  transform:translateY(-50%);
  transition:height .28s var(--jpn-ease);
}
.jpicnav-rail-item:hover,.jpicnav-rail-item:focus-visible{
  background:linear-gradient(90deg, rgba(255,255,255,.16), rgba(255,255,255,.06));
  color:#fff;
  padding-left:20px;
}
.jpicnav-rail-item:hover::after,.jpicnav-rail-item:focus-visible::after{height:58%;}
.jpicnav-rail-item:hover .jpicnav-icon,.jpicnav-rail-item:focus-visible .jpicnav-icon{
  color:var(--jpic-gold);
  transform:scale(1.14);
}
.jpicnav-rail-item[aria-expanded="true"]{
  background:var(--mist);color:var(--jpic-blue);
  border-radius:12px 0 0 12px;width:calc(100% + 8px);padding-right:22px;
  position:relative;z-index:1001;
}
.jpicnav-rail-item[aria-expanded="true"]::before{
  content:'';position:absolute;left:0;top:8px;bottom:8px;width:3px;border-radius:0 3px 3px 0;background:var(--jpic-gold);
}
.jpicnav-rail-item[aria-expanded="true"]:hover .jpicnav-icon{color:var(--jpic-blue);transform:scale(1.14);}
.jpicnav-rail-item[aria-expanded="true"]::after{display:none;}
.jpicnav-rail-item-cta .jpicnav-icon{color:var(--jpic-gold);}
.jpicnav-rail-item-cta:hover,.jpicnav-rail-item-cta:focus-visible{
  background:linear-gradient(90deg, rgba(254,190,80,.22), rgba(254,190,80,.08));
}
.jpicnav-rail-item-cta:hover .jpicnav-icon{color:var(--jpic-gold);transform:scale(1.18);}

/* On a short desktop window the rail's generous top padding is the difference
   between a menu that fits and one that has to scroll, so it is trimmed back
   before the scrollbar has to do the work. Heights above this keep the roomier
   resting design untouched. */
@media (min-width:1024px) and (max-height:860px){
  .jpicnav-rail-brand{padding:22px 0;}
  .jpicnav-rail-list{padding-top:18px;}
}

/* ---- Collapsed-rail hover labels ----
   With the rail minimised the item labels are hidden, so hovering (or keyboard-
   focusing) an icon reveals its name in a small pill beside the rail. One shared
   element, placed by JS — position:fixed so it escapes the rail/list overflow
   clipping, and z-index above the rail. Desktop only; never shown while the rail
   is expanded (the real labels are visible then). */
.jpicnav-tip{
  position:fixed;left:0;top:0;z-index:1002;
  max-width:230px;padding:9px 14px;
  border-radius:8px;border-left:3px solid var(--jpic-gold);
  background:var(--mist);color:var(--jpic-blue);
  font-family:var(--jpn-body);font-size:13.5px;font-weight:700;line-height:1.3;
  /* Wraps rather than clips: the pill shrinks to fit short labels, but the
     longest translated ones (Spanish "Trayectorias de Estudio en JPC" needs
     236px) run past the cap and would otherwise spill outside the background. */
  white-space:normal;text-wrap:balance;
  box-shadow:6px 6px 20px rgba(0,20,50,.22);
  opacity:0;visibility:hidden;pointer-events:none;
  transform:translateX(-6px);
  transition:opacity .16s var(--jpn-ease),transform .16s var(--jpn-ease),visibility .16s;
}
.jpicnav-tip::before{
  content:'';position:absolute;left:-8px;top:50%;transform:translateY(-50%);
  width:0;height:0;border:5px solid transparent;border-right-color:var(--jpic-gold);
}
.jpicnav-tip.is-shown{opacity:1;visibility:visible;transform:translateX(0);}
@media (max-width:1023px){ .jpicnav-tip{display:none;} }

/* ================= SCRIM ================= */
.jpicnav-scrim{
  position:fixed;inset:0;background:rgba(8,20,38,.5);z-index:998;
  opacity:0;visibility:hidden;transition:opacity .22s var(--jpn-ease);
}
.jpicnav.has-flyout-open .jpicnav-scrim{opacity:1;visibility:visible;}

/* ================= DESKTOP FLYOUT ================= */
.jpicnav-flyout{
  position:fixed;top:0;left:var(--jpn-rail-w-open);width:var(--jpn-flyout-w);
  height:auto;max-height:calc(100vh - 40px);
  background:var(--mist);z-index:999;padding:32px 36px;overflow-y:auto;
  border-radius:0 20px 20px 20px;
  transform:translateX(-16px);opacity:0;visibility:hidden;
  transition:opacity .2s var(--jpn-ease),transform .2s var(--jpn-ease),visibility .2s;
  box-shadow:8px 8px 24px rgba(0,20,50,.18);
}
.jpicnav.has-flyout-open .jpicnav-flyout{opacity:1;visibility:visible;transform:translateX(0);}
.jpicnav-panel{display:none;}
.jpicnav-panel.is-active{display:block;}
.jpicnav-panel-title{font-family:var(--jpn-body);font-weight:700;font-size:19px;color:var(--jpic-blue);
  margin:0 0 20px;padding-bottom:14px;border-bottom:1px solid var(--line);}
.jpicnav-panel-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.jpicnav-panel-list a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:11px 10px 11px 4px;font-size:15px;font-weight:500;color:var(--soft-ink);
  border-radius:6px;transition:color .2s var(--jpn-ease),background .2s var(--jpn-ease),padding-left .2s var(--jpn-ease);}
.jpicnav-panel-list a::after{
  content:'\2192';color:var(--jpic-gold-dark);font-weight:700;
  opacity:0;transform:translateX(-6px);transition:opacity .2s var(--jpn-ease),transform .2s var(--jpn-ease);
}
.jpicnav-panel-list a:hover{color:var(--jpic-blue);background:rgba(0,73,144,.06);padding-left:14px;}
.jpicnav-panel-list a:hover::after{opacity:1;transform:translateX(0);}

/* ---- grouped submenu: a labelled block per group inside one panel ----
   Emitted by navBody() in js/jpic-nav.js when a NAV_LINKS array carries
   { group: … } markers. Only the Study Pathways panel uses this today; panels
   without markers still render one flat .jpicnav-panel-list and are untouched.
   The gold tick ties the label to the brand without shouting at 4 repeats. */
.jpicnav-panel-group + .jpicnav-panel-group{margin-top:18px;}
.jpicnav-panel-grouphead{display:flex;align-items:center;gap:8px;margin:0 0 6px;padding-left:4px;
  font-family:var(--jpn-body);font-size:10.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#82828d;}
.jpicnav-panel-grouphead::before{content:'';flex:0 0 auto;width:14px;height:2px;
  background:var(--jpic-gold);border-radius:1px;}
.jpicnav-panel-list-lang a::after{content:none;}
/* justify-content:flex-start overrides the space-between inherited from the
   base .jpicnav-panel-list rule above (added for the hover-arrow reveal) —
   without it, the flag becomes one flex item and the language name becomes
   a second, and space-between shoves the name to the far right edge. */
.jpicnav-panel-list-lang a{display:flex;align-items:center;justify-content:flex-start;gap:12px;}
.jpicnav-panel-list-lang img{border-radius:3px;flex:0 0 auto;box-shadow:0 0 0 1px rgba(0,0,0,.08);}
/* Neutral chip used instead of a national flag for Traditional Chinese —
   avoids using the Taiwan flag, which is a sensitive political symbol in
   the China market this site also serves. Matches the flag's footprint so
   the language list still lines up visually. */
.jpicnav-lang-chip{display:inline-flex;align-items:center;justify-content:center;flex:0 0 auto;
  width:24px;height:18px;border-radius:3px;background:var(--jpic-blue);color:#fff;
  font-family:var(--km-body);font-size:11px;font-weight:700;line-height:1;}

/* ================= MOBILE / TABLET TOP BAR ================= */
.jpicnav-mobile-bar{
  display:none;position:fixed;top:0;left:0;right:0;height:60px;z-index:1000;
  background:var(--jpic-blue);align-items:center;justify-content:space-between;padding:0 14px;
  box-shadow:0 2px 14px rgba(0,20,50,.18);
}
.jpicnav-mobile-burger,.jpicnav-mobile-account{color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:background .2s var(--jpn-ease),transform .2s var(--jpn-ease);}
.jpicnav-mobile-burger:hover,.jpicnav-mobile-account:hover{background:rgba(255,255,255,.14);transform:scale(1.08);}
.jpicnav-mobile-logo img{height:44px;width:auto;display:block;}
/* Dual-logo lockup (mobile bar): JPC shield  |  JPIC 30th, dash divider between.
   Absolutely centred in the bar so it stays viewport-centred regardless of the
   burger (left) and language pill (right) widths. */
.jpicnav-mobile-logo-dual{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  display:flex;align-items:center;gap:11px;}
.jpicnav-mobile-logo-dual img{width:auto;display:block;}
.jpicnav-mobile-logo-dual .jpicnav-mlogo-shield{height:42px;}
.jpicnav-mobile-logo-dual .jpicnav-mlogo-30{height:40px;}
.jpicnav-mlogo-sep{width:1px;height:28px;background:rgba(255,255,255,.5);flex:0 0 auto;}
/* Right-corner slot that holds the language pill (injected by js/jpic-topbar.js). */
.jpicnav-mobile-lang{display:flex;align-items:center;justify-content:flex-end;min-height:44px;}
.jpicnav-mobile-bar .jpicnav-icon{font-size:22px;line-height:1;}

/* ================= MOBILE FULL-SCREEN OVERLAY ================= */
.jpicnav-mobile-overlay{
  display:none;position:fixed;inset:0;z-index:1100;background:var(--jpic-blue);
  flex-direction:column;opacity:0;visibility:hidden;transition:opacity .22s var(--jpn-ease);
}
.jpicnav-mobile-overlay.is-open{opacity:1;visibility:visible;}
.jpicnav-mobile-topbar{display:flex;align-items:center;justify-content:space-between;height:60px;padding:0 14px;flex:0 0 auto;}
.jpicnav-mobile-close{color:#fff;width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:background .2s var(--jpn-ease),transform .2s var(--jpn-ease);}
.jpicnav-mobile-close:hover{background:rgba(255,255,255,.14);transform:scale(1.08) rotate(90deg);}
.jpicnav-mobile-topbar-actions{display:flex;align-items:center;gap:6px;position:relative;}
.jpicnav-mobile-iconbtn{color:#fff;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;
  transition:background .2s var(--jpn-ease),transform .2s var(--jpn-ease);}
.jpicnav-mobile-iconbtn:hover{background:rgba(255,255,255,.14);transform:scale(1.08);}
.jpicnav-mobile-langpill{display:flex;align-items:center;gap:6px;height:36px;padding:0 12px;border-radius:20px;
  background:rgba(255,255,255,.95);color:var(--jpic-blue);font-size:13px;font-weight:700;}
.jpicnav-mobile-langpill img{border-radius:2px;}
.jpicnav-mobile-langmenu{list-style:none;margin:0;padding:8px;position:absolute;top:60px;right:12px;z-index:20;
  background:#fff;border-radius:10px;box-shadow:0 10px 30px rgba(0,0,0,.25);min-width:210px;}
.jpicnav-mobile-langmenu a{display:flex;align-items:center;gap:10px;padding:10px 12px;font-size:14px;font-weight:600;color:var(--ink);border-radius:6px;}
.jpicnav-mobile-langmenu a:hover{background:var(--mist);}
.jpicnav-mobile-langmenu img{border-radius:2px;}

.jpicnav-mobile-body{flex:1 1 auto;display:flex;overflow:hidden;}
.jpicnav-mobile-primary{flex:0 0 auto;width:120px;background:var(--jpic-blue-dark);height:100%;overflow-y:auto;padding:8px 0 24px;}
/* Full 30th-anniversary crest — no border-radius clip (the artwork is a wider-
   than-tall transparent PNG, so a circular mask would crop the banner/edges). */
.jpicnav-mobile-primary-mark{width:auto;height:72px;max-width:100%;display:block;margin:6px auto 14px;object-fit:contain;}
.jpicnav-mobile-primary ul{list-style:none;margin:0;padding:0;}
.jpicnav-mobile-primary-item{
  width:100%;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 6px;
  color:rgba(255,255,255,.85);font-size:11.5px;font-weight:600;text-align:center;line-height:1.25;
  position:relative;transition:background .2s var(--jpn-ease),color .2s var(--jpn-ease);
}
.jpicnav-mobile-primary-item .jpicnav-icon{font-size:20px;line-height:1;transition:transform .2s var(--jpn-ease),color .2s;}
.jpicnav-mobile-primary-item.is-active,.jpicnav-mobile-primary-item:hover{background:var(--mist);color:var(--jpic-blue);border-radius:0;}
.jpicnav-mobile-primary-item.is-active .jpicnav-icon,.jpicnav-mobile-primary-item:hover .jpicnav-icon{transform:scale(1.12);}
.jpicnav-mobile-primary-item.is-active::before{
  content:'';position:absolute;left:0;top:50%;transform:translateY(-50%);
  width:3px;height:60%;border-radius:0 3px 3px 0;background:var(--jpic-gold);
}
.jpicnav-mobile-primary-item-cta .jpicnav-icon{color:var(--jpic-gold);}
.jpicnav-mobile-primary-divider{height:1px;background:rgba(255,255,255,.18);margin:10px 14px;}

.jpicnav-mobile-panel-wrap{flex:1 1 auto;background:var(--mist);overflow-y:auto;padding:24px 20px 40px;}
.jpicnav-mobile-panel{display:none;}
.jpicnav-mobile-panel.is-active{display:block;}
.jpicnav-mobile-panel ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:2px;}
.jpicnav-mobile-panel a{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:13px 6px;font-size:15px;font-weight:500;color:var(--soft-ink);border-bottom:1px solid var(--line);
  transition:color .2s var(--jpn-ease),padding-left .2s var(--jpn-ease);}
.jpicnav-mobile-panel a::after{content:'\2192';color:var(--jpic-gold-dark);font-weight:700;opacity:.55;flex:0 0 auto;}
.jpicnav-mobile-panel a:hover,.jpicnav-mobile-panel a:active{color:var(--jpic-blue);padding-left:10px;}
/* grouped submenu, mobile twin of .jpicnav-panel-grouphead above. Slightly
   larger than the desktop label: this sits on a full-width scrolling sheet,
   where 10.5px uppercase reads as noise rather than as a heading. */
.jpicnav-mobile-panel-group + .jpicnav-mobile-panel-group{margin-top:22px;}
.jpicnav-mobile-panel-grouphead{display:flex;align-items:center;gap:8px;margin:0 0 4px;
  font-family:var(--jpn-body);font-size:11.5px;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:#82828d;}
.jpicnav-mobile-panel-grouphead::before{content:'';flex:0 0 auto;width:14px;height:2px;
  background:var(--jpic-gold);border-radius:1px;}

/* ================= BREAKPOINT SWITCH ================= */
@media (max-width:1023px){
  .jpicnav-rail,.jpicnav-flyout,.jpicnav-scrim{display:none;}
  .jpicnav-mobile-bar{display:flex;}
  .jpicnav-mobile-overlay{display:flex;}
  body{padding-top:60px;}
}
@media (min-width:1024px){
  body{padding-left:76px;transition:padding-left .22s cubic-bezier(.4,0,.2,1);}
  body.jpicnav-is-expanded{padding-left:250px;}
}

/* ================= REDUCED MOTION ================= */
@media (prefers-reduced-motion:reduce){
  .jpicnav *{transition-duration:.001ms !important;}
  .km-hero-img{animation:none;}
}

/* ================================================================
   FOOTER — .jpic-footer / .jf-*
   ================================================================ */
.jpic-footer{
  --jf-navy:#0b2a52; --jf-navy-deep:#082244;
  font-family:var(--km-body); line-height:1.6; color:rgba(255,255,255,.85);
  background:var(--jf-navy);
  box-sizing:border-box; -webkit-font-smoothing:antialiased;
  border-top:3px solid var(--jpic-gold);
}

/* ----- SharePoint defensive reset (scoped) ----- */
.jpic-footer *{box-sizing:border-box;}
.jpic-footer p,.jpic-footer ul,.jpic-footer li,.jpic-footer h3,.jpic-footer figure{margin:0;padding:0;}
.jpic-footer ul{list-style:none;}
.jpic-footer a{color:inherit;text-decoration:none;background:none;}
.jpic-footer img{max-width:100%;height:auto;border:0;display:block;}
.jpic-footer button{font-family:inherit;cursor:pointer;}

.jf-inner{max-width:1280px;margin:0 auto;padding:0 40px;}
.jf-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* ---------- MAIN GRID ---------- */
.jf-main{padding:58px 0 50px;}
.jf-grid{
  display:grid;
  /* Quick Links (col 3) carries the longest labels — "Entry Requirements",
     and longer again in Vi/Ko/Ja — so it gets width rather than the .85fr it
     used to have, which wrapped labels onto two lines. */
  grid-template-columns:1.15fr 1fr 1.05fr 1.05fr .95fr;
  gap:40px;
}
.jf-heading{
  font-family:var(--km-display);font-weight:700;font-size:15px;letter-spacing:1px;
  text-transform:uppercase;color:#fff;margin-bottom:18px;position:relative;padding-bottom:12px;
}
.jf-heading::after{content:'';position:absolute;left:0;bottom:0;width:46px;height:2px;background:var(--jpic-gold);}
.jf-heading-sm{margin-top:30px;}

/* Brand col */
.jf-brand{display:flex;align-items:center;}
.jf-logo{display:block;width:100%;}
.jf-logo img{width:100%;max-width:340px;height:auto;}

/* Contact */
.jf-contact li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;
  line-height:1.55;padding:7px 0;color:rgba(255,255,255,.85);}
.jf-contact a:hover{color:var(--jpic-gold);}
.jf-ic{color:var(--jpic-gold);font-size:16px;flex:0 0 auto;width:18px;text-align:center;margin-top:1px;}
.jf-btn{margin-top:18px;}
.jf-btn i{font-size:16px;line-height:1;}

/* Quick links */
.jf-links li{padding:6px 0;}
.jf-links a{display:inline-flex;align-items:center;gap:10px;font-size:14.5px;
  color:rgba(255,255,255,.85);transition:color .2s,transform .2s;}
.jf-links a::before{content:'\203A';color:var(--jpic-gold);font-size:16px;font-weight:700;line-height:1;}
.jf-links a:hover{color:var(--jpic-gold);transform:translateX(3px);}

/* Social */
.jf-social li{padding:6px 0;}
.jf-social a{display:flex;align-items:center;gap:12px;font-size:14.5px;
  color:rgba(255,255,255,.9);transition:color .2s;}
.jf-social a:hover{color:var(--jpic-gold);}
.jf-soc-ic{width:34px;height:34px;border-radius:50%;background:var(--jpic-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-size:16px;flex:0 0 auto;transition:background .2s;}
.jf-social a:hover .jf-soc-ic{background:var(--jpic-gold);color:var(--jpic-blue);}

/* Newsletter */
.jf-news-intro{font-size:14px;color:rgba(255,255,255,.78);margin-bottom:14px;line-height:1.6;}
.jf-news{display:flex;align-items:stretch;max-width:320px;border:1px solid rgba(255,255,255,.25);
  border-radius:6px;overflow:hidden;background:rgba(255,255,255,.04);}
.jf-news-input{flex:1;min-width:0;background:transparent;border:0;outline:none;color:#fff;
  font-family:var(--km-body);font-size:14px;padding:13px 16px;}
.jf-news-input::placeholder{color:rgba(255,255,255,.55);}
.jf-news-btn{flex:0 0 auto;width:50px;border:0;background:var(--jpic-gold);color:var(--jpic-blue);
  font-size:22px;line-height:1;transition:background .2s;}
.jf-news-btn:hover{background:var(--jpic-gold-dark);}

/* College details */
.jf-details li{display:flex;align-items:flex-start;gap:12px;font-size:14.5px;
  line-height:1.55;padding:8px 0;color:rgba(255,255,255,.85);}

/* ---------- TRUST / ACCREDITATION BAND ---------- */
.jf-band{background:var(--jf-navy-deep);padding:36px 0;
  border-top:1px solid rgba(255,255,255,.08);}
.jf-band-grid{display:grid;grid-template-columns:auto auto 1fr;gap:48px;align-items:center;}
.jf-band-label{display:block;font-family:var(--km-display);font-weight:700;font-size:13px;
  letter-spacing:1px;text-transform:uppercase;color:#fff;margin-bottom:16px;}
.jf-band-logo img{max-height:58px;width:auto;}
.jf-band-logos{display:flex;align-items:center;gap:34px;flex-wrap:wrap;}
.jf-band-logos img{max-height:52px;width:auto;opacity:.92;}
.jf-band-accred{border-left:1px solid rgba(255,255,255,.12);border-right:1px solid rgba(255,255,255,.12);
  padding:0 48px;}
/* Country NAMES only — the College does not publish national flags
   anywhere on this site (see DESIGN-SYSTEM.md). */
.jf-flags{display:flex;flex-wrap:wrap;gap:10px;justify-content:flex-start;max-width:560px;}
.jf-flags .jf-flag-item{display:inline-flex;align-items:center;gap:8px;padding:7px 15px;
  border-radius:999px;background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.16);}
.jf-flag-chip-more{font-size:14px;color:var(--jpic-gold);line-height:1;}
.jf-flag-name{font-size:13px;line-height:1.2;color:rgba(255,255,255,.88);white-space:nowrap;}
.jf-flag-name-more{color:rgba(255,255,255,.7);}

/* ---------- BOTTOM BAR ---------- */
.jf-bottom{background:var(--jf-navy-deep);padding:20px 0;
  border-top:1px solid rgba(255,255,255,.08);}
.jf-bottom-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.jf-copy{font-size:13.5px;color:rgba(255,255,255,.7);}
.jf-legal{display:flex;align-items:center;gap:18px;}
.jf-legal a{font-size:13.5px;color:rgba(255,255,255,.85);transition:color .2s;}
.jf-legal a:hover{color:var(--jpic-gold);}
.jf-sep{color:rgba(255,255,255,.3);}
.jf-lang{display:inline-flex;align-items:center;gap:8px;position:relative;
  color:rgba(255,255,255,.85);font-size:13.5px;}
.jf-lang-ic{font-size:16px;flex:0 0 auto;}
.jf-lang-select{appearance:none;-webkit-appearance:none;-moz-appearance:none;
  background:transparent;border:1px solid rgba(255,255,255,.25);border-radius:6px;
  color:rgba(255,255,255,.85);font-family:var(--km-body);font-size:13.5px;
  padding:8px 30px 8px 12px;cursor:pointer;transition:border-color .2s,color .2s;outline:none;}
.jf-lang-select:hover{border-color:var(--jpic-gold);color:#fff;}
.jf-lang-select:focus-visible{border-color:var(--jpic-gold);}
.jf-lang-select option{background:var(--jf-navy-deep);color:#fff;}
.jf-lang-caret{position:absolute;right:12px;top:50%;transform:translateY(-50%);
  pointer-events:none;font-size:11px;color:rgba(255,255,255,.7);}
/* "translation on its way" message, shown when a chosen language has no
   translation of the current page yet (mirrors the top-bar .jpt-toast). */
.jf-toast{position:absolute;bottom:calc(100% + 8px);right:0;z-index:5;
  max-width:280px;padding:10px 12px;border-radius:8px;
  background:var(--jf-navy-deep,#0b1f3a);border:1px solid var(--jpic-gold);
  color:#fff;font-family:var(--km-body);font-size:12.5px;line-height:1.4;
  box-shadow:0 8px 24px rgba(0,0,0,.35);}

/* ---------- BUTTONS (mirror .km-btn for consistency) ---------- */
.jpic-footer .km-btn{display:inline-flex;align-items:center;gap:8px;font-family:var(--km-display);
  font-weight:700;font-size:14px;letter-spacing:.4px;padding:13px 26px;border-radius:6px;
  text-decoration:none;transition:transform .2s,box-shadow .2s,background .2s,color .2s;
  cursor:pointer;border:2px solid transparent;}
.jpic-footer .km-btn-gold{background:var(--jpic-gold);color:var(--jpic-blue);box-shadow:0 4px 16px rgba(254,190,80,.35);}
.jpic-footer .km-btn-gold:hover{background:var(--jpic-gold-dark);transform:translateY(-2px);box-shadow:0 8px 24px rgba(254,190,80,.45);}

/* Secondary CTA. Defined here rather than reusing .km-btn-outline, which is
   scoped elsewhere and carries !important. Dark ground only — as the footer is. */
.jpic-footer .jf-btn-ghost{background:rgba(255,255,255,.06);color:#fff;
  border-color:rgba(255,255,255,.45);box-shadow:none;}
.jpic-footer .jf-btn-ghost:hover{background:rgba(255,255,255,.12);
  border-color:var(--jpic-gold);color:var(--jpic-gold);transform:translateY(-2px);}

/* Stacked CTA pair (Apply Now / Get In Touch) — deterministic column so the
   two buttons never depend on the grid column happening to be wide enough. */
.jf-cta{display:flex;flex-direction:column;align-items:flex-start;gap:10px;margin-top:18px;}
.jf-cta .jf-btn{margin-top:0;}

/* ---------- RESPONSIVE ---------- */
@media(max-width:1100px){
  .jf-grid{grid-template-columns:1fr 1fr 1fr;gap:36px 40px;}
  .jf-brand{grid-column:1 / -1;}
  .jf-band-grid{grid-template-columns:1fr;gap:30px;}
  .jf-band-accred{border:0;padding:0;border-top:1px solid rgba(255,255,255,.12);
    border-bottom:1px solid rgba(255,255,255,.12);padding:26px 0;}
}
@media(max-width:680px){
  .jf-inner{padding:0 24px;}
  .jf-grid{grid-template-columns:1fr;}
  .jf-band-logos{gap:24px;}

  /* ---- DENSITY PASS ----
     Stacked, the footer ran ~2357px on a 375px viewport — nearly three phone
     screens, with the language picker buried at the very bottom. This brings it
     to ~1585px without removing content or touching the markup (the footer is
     inlined into ~500 pages, so markup changes mean a sweep). */
  .jf-main{padding:34px 0 30px;}
  .jf-grid{gap:26px;}
  .jf-logo img{max-width:200px;}

  .jf-heading{font-size:14px;margin-bottom:13px;padding-bottom:9px;}
  .jf-heading-sm{margin-top:20px;}

  /* Quick links in two columns rather than one tall stack. */
  .jf-links{display:grid;grid-template-columns:1fr 1fr;column-gap:14px;}
  .jf-links li{padding:5px 0;}
  .jf-links a{font-size:14px;}

  /* Social collapses to an icon row. font-size:0 hides the visible label but
     keeps the link's accessible name, so screen readers still say "Facebook". */
  .jf-social{display:flex;gap:12px;}
  .jf-social li{padding:0;}
  .jf-social a{font-size:0;gap:0;}
  .jf-soc-ic{width:44px;height:44px;font-size:18px;}

  .jf-contact li,.jf-details li{padding:5px 0;font-size:14px;}

  /* Trust band: tighter logos; the country-name pills wrap. */
  .jf-band{padding:26px 0;}
  .jf-band-grid{gap:22px;}
  .jf-band-accred{padding:20px 0;}
  .jf-band-logo img{max-height:44px;}
  .jf-band-logos img{max-height:38px;}
  .jf-flags{gap:8px;max-width:none;}
  .jf-flags .jf-flag-item{padding:6px 12px;}
  .jf-flag-name{font-size:12.5px;}

  /* Legal links and the language picker share a row; copyright wraps beneath. */
  .jf-bottom{padding:16px 0;}
  .jf-bottom-inner{flex-direction:row;flex-wrap:wrap;align-items:center;gap:10px 16px;}
  .jf-copy{order:3;flex:1 0 100%;font-size:12.5px;}
  .jf-legal{order:1;gap:14px;}
  .jf-lang{order:2;margin-left:auto;}
}

/* ================================================================
   STICKY QUICK NAVIGATION — .km-qnav (scrollspy sub-nav)
   Sits under a page's hero on load, pins to the top on scroll,
   highlights the section in view via a sliding blue pill, and
   smooth-scrolls to any section. Behaviour lives in the shared
   js/jpic-quicknav.js; each page supplies only the <nav> markup.
   The script tags every target section with .km-qnav-target so the
   scroll-margin below clears the pinned bar regardless of page markup.
   ================================================================ */
:root{--qn-h:64px;}
.km-qnav{
  position:sticky; top:0; z-index:900;
  background:rgba(255,255,255,.94);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid rgba(0,73,144,.12);
  box-shadow:0 1px 0 rgba(0,32,74,.04);
  transition:box-shadow .35s ease, background .35s ease, border-color .35s ease;
}
/* Gold hairline that slides across the top once the bar is pinned. */
.km-qnav::before{
  content:''; position:absolute; left:0; right:0; top:0; height:3px;
  background:linear-gradient(90deg,var(--jpic-gold),var(--jpic-gold-dark));
  transform:scaleX(0); transform-origin:left center; opacity:0;
  transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .35s ease;
}
.km-qnav.is-stuck{
  background:rgba(255,255,255,.98);
  border-bottom-color:rgba(0,73,144,.06);
  box-shadow:0 12px 30px -14px rgba(0,32,74,.38);
}
.km-qnav.is-stuck::before{transform:scaleX(1); opacity:1;}

/* Inner is the scroll viewport; the track centres when items fit and
   scrolls horizontally when they don't — items are never clipped. */
.km-qnav-inner{
  max-width:1200px; margin:0 auto; padding:0 20px;
  height:var(--qn-h);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none; -webkit-overflow-scrolling:touch;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 22px,#000 calc(100% - 22px),transparent);
}
.km-qnav-inner::-webkit-scrollbar{display:none;}
.km-qnav-track{
  position:relative;
  height:100%; width:max-content; margin:0 auto;
  display:flex; align-items:center; gap:2px;
}

/* Sliding blue pill that glides between items as the section changes. */
.km-qnav-pill{
  position:absolute; left:0; top:50%; height:42px; width:0;
  transform:translate(0,-50%); transform-origin:left center;
  border-radius:999px;
  background:linear-gradient(135deg,var(--jpic-blue-light),var(--jpic-blue) 60%,var(--jpic-blue-dark));
  box-shadow:0 8px 20px -8px rgba(0,73,144,.55), inset 0 1px 0 rgba(255,255,255,.14);
  opacity:0; pointer-events:none; z-index:0;
}
.km-qnav-pill.is-ready{
  opacity:1;
  transition:transform .42s cubic-bezier(.22,1,.36,1), width .42s cubic-bezier(.22,1,.36,1), opacity .3s ease;
}

.km-qnav-link{
  position:relative; z-index:1;
  display:inline-flex; align-items:center; gap:8px;
  height:42px; padding:0 17px;
  font-family:var(--km-display); font-size:14px; font-weight:600; letter-spacing:.2px;
  color:#4a5a70; white-space:nowrap; border-radius:999px;
  text-decoration:none;
  transition:color .25s ease;
}
.km-qnav-link i{font-size:16px; line-height:1; color:#9aa7b6;
  transition:color .25s ease, transform .25s cubic-bezier(.22,1,.36,1);}
.km-qnav-link:not(.is-active):hover{color:var(--jpic-blue); background:rgba(0,73,144,.06);}
.km-qnav-link:not(.is-active):hover i{color:var(--jpic-gold-dark); transform:translateY(-1px);}
.km-qnav-link:focus-visible{outline:2px solid var(--jpic-blue); outline-offset:2px;}
.km-qnav-link.is-active{color:#fff;}
.km-qnav-link.is-active i{color:var(--jpic-gold);}

/* Section landing offset so anchors clear the sticky bar (class added by JS). */
.km-qnav-target{scroll-margin-top:calc(var(--qn-h, 64px) + 16px);}
html{scroll-behavior:smooth;}

@media (max-width:1023px){
  :root{--qn-h:58px;}
  .km-qnav{top:60px;}
  .km-qnav-inner{padding:0 14px;}
  .km-qnav-link{padding:0 15px; font-size:13.5px;}
  .km-qnav-target{scroll-margin-top:calc(60px + var(--qn-h) + 14px);}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .km-qnav, .km-qnav::before, .km-qnav-link, .km-qnav-link i, .km-qnav-pill.is-ready{transition:none;}
  .km-qnav-link:not(.is-active):hover i{transform:none;}
}



/* ---------- REAL SCHOOL EXPERIENCE ----------
     Slow living-photo zoom (same language as the hero Ken Burns effect),
     a short lead line for warmth, frosted-glass icon badges instead of
     bare floating icons, hover lift, and a scroll-reveal stagger. */
  .psp-real{position:relative;min-height:520px;display:flex;align-items:center;overflow:hidden;background:var(--jpic-blue-dark);}
  .psp-real-photo{position:absolute;inset:0;z-index:0;}
  .psp-real-photo img{width:100%;height:100%;object-fit:cover;animation:pspRealZoom 22s ease-in-out infinite alternate;}
  @keyframes pspRealZoom{from{transform:scale(1);}to{transform:scale(1.08);}}
  .psp-real-photo::after{content:'';position:absolute;inset:0;
    background:linear-gradient(100deg,rgba(0,51,102,.93) 0%,rgba(0,73,144,.82) 45%,rgba(0,73,144,.5) 100%);}
  .psp-real-inner{position:relative;z-index:1;max-width:1200px;margin:0 auto;padding:72px 32px;width:100%;}
  .psp-real-lead{color:rgba(255,255,255,.85);font-size:15px;line-height:1.7;max-width:640px;margin:14px 0 0;}
  .psp-real-row{display:grid;grid-template-columns:repeat(5,1fr);gap:24px;margin-top:36px;}
  .psp-real-row .km-stat{text-align:center;}
  .psp-real-row .km-stat-icon{
    width:64px;height:64px;border-radius:50%;margin:0 auto 14px;
    background:rgba(255,255,255,.12);backdrop-filter:blur(6px);
    border:1px solid rgba(255,255,255,.25);
    display:flex;align-items:center;justify-content:center;
    transition:transform .3s cubic-bezier(.16,1,.3,1),background .3s,border-color .3s;
  }
  .psp-real-row .km-stat:hover .km-stat-icon{
    transform:translateY(-4px) scale(1.08);
    background:rgba(254,190,80,.18);border-color:rgba(254,190,80,.5);
  }
  .psp-real-row h4{font-size:14px;line-height:1.4;font-weight:600;}
  .psp-real-reveal > *{opacity:0;transform:translateY(20px);transition:opacity .6s ease,transform .4s cubic-bezier(.16,1,.3,1);}
  .psp-real-reveal.is-visible > *{opacity:1;transform:translateY(0);}
  .psp-real-reveal.is-visible > *:nth-child(1){transition-delay:0ms;}
  .psp-real-reveal.is-visible > *:nth-child(2){transition-delay:80ms;}
  .psp-real-reveal.is-visible > *:nth-child(3){transition-delay:160ms;}
  .psp-real-reveal.is-visible > *:nth-child(4){transition-delay:240ms;}
  .psp-real-reveal.is-visible > *:nth-child(5){transition-delay:320ms;}
  .no-psp-anim-js .psp-real-reveal > *{opacity:1;transform:none;}
  @media(prefers-reduced-motion:reduce){
    .psp-real-photo img{animation:none;}
    .psp-real-reveal > *{transition:none;opacity:1;transform:none;}
  }

/* ============================================================
   BRAND HERO LINE-DRAW (.km-hline) — the animated gold "flowing
   line + icon" hero flourish. Geometry is built in JS (js/jpic-
   heroline.js) from hero-relative coordinates, with the viewBox
   matched 1:1 to the hero's pixels, so there's no distortion and
   the stroke stays a constant slim width at every resolution. See
   that file for the required markup + per-page glyph.
   ============================================================ */
.km-hline{position:absolute;inset:0;z-index:1;width:100%;height:100%;
  pointer-events:none;opacity:0;transition:opacity .45s ease;}
.km-hline.is-ready{opacity:1;}

/* Gold line — slim, crisp (constant px because the viewBox is 1:1 with the
   hero pixels). Starts hidden via a big dash offset until JS drives it. */
.km-hline-path{fill:none;stroke:var(--jpic-gold);stroke-width:2.6;
  stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:4000;stroke-dashoffset:4000;
  filter:drop-shadow(0 0 4px rgba(254,190,80,.5));}

/* End icon badge — navy disc + gold ring + gold line-art glyph (echoes the
   prospectus icon badges & the index journey nodes). #km-hline-endpos (JS)
   sets position + size; .km-hline-end does the CSS pop, so the two
   transforms don't collide. Swap the glyph inside .km-hline-icon per page. */
.km-hline-end{opacity:0;transform-box:fill-box;transform-origin:center;}
.km-hline-disc{fill:var(--jpic-blue-dark);stroke:var(--jpic-gold);stroke-width:2.5;
  filter:drop-shadow(0 0 8px rgba(254,190,80,.6));}
.km-hline-icon path{fill:none;stroke:var(--jpic-gold);stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;}
.km-hline.is-arrived .km-hline-end{animation:kmHlineEndPop .55s cubic-bezier(.34,1.56,.64,1) forwards;}
@keyframes kmHlineEndPop{0%{opacity:0;transform:scale(.3);}
  70%{opacity:1;transform:scale(1.12);}100%{opacity:1;transform:scale(1);}}

/* Leading sparkle-star. JS moves/fades it; the star twinkles while drawing. */
.km-hline-spark{opacity:0;}
.km-hline-glow{fill:rgba(254,190,80,.55);filter:url(#kmHlineGlow);}
.km-hline-core{fill:#fff;}
.km-hline-star{fill:var(--jpic-gold);transform-box:fill-box;transform-origin:center;}
.km-hline.is-drawing .km-hline-star{animation:kmHlineTwinkle 1s ease-in-out infinite;}
@keyframes kmHlineTwinkle{0%,100%{transform:scale(.7) rotate(0deg);opacity:.85;}
  50%{transform:scale(1.15) rotate(45deg);opacity:1;}}

@media(prefers-reduced-motion:reduce){
  .km-hline-end{opacity:1 !important;animation:none !important;}
  .km-hline-spark,.km-hline-star{animation:none !important;}
}

/* ================================================================
   LOGIN — portal sign-in modal + nav trigger
   Markup + behaviour are injected on every page by js/jpic-login.js
   (no per-page copy). Styles live here so the one shared stylesheet
   remains the single source of truth. Scoped under .jpic-login-* /
   .jpicnav-login-* so nothing collides with page or nav CSS.
   ================================================================ */

/* ---- Rail login trigger + its top/bottom dividers ---- */
.jpicnav-login-sep{height:1px;margin:8px 14px;background:rgba(255,255,255,.18);list-style:none;}
.jpicnav-login-trigger .jpicnav-icon{color:var(--jpic-gold);}
.jpicnav-login-trigger:hover .jpicnav-icon,
.jpicnav-login-trigger:focus-visible .jpicnav-icon{color:var(--jpic-gold);transform:scale(1.14);}

/* ---- Overlay + dialog ---- */
.jpic-login{position:fixed;inset:0;z-index:2000;display:none;}
.jpic-login.is-open{display:block;}
.jpic-login-scrim{position:absolute;inset:0;background:rgba(8,20,38,.62);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);
  opacity:0;transition:opacity .25s ease;}
.jpic-login.is-open .jpic-login-scrim{opacity:1;}
.jpic-login-dialog{
  position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);
  width:min(440px,calc(100vw - 32px));max-height:calc(100vh - 40px);overflow-y:auto;
  background:var(--white);border-radius:20px;
  box-shadow:0 24px 70px rgba(0,20,50,.45);
  padding:34px 34px 30px;opacity:0;
  transition:opacity .28s var(--jpn-ease,cubic-bezier(.4,0,.2,1)),transform .28s var(--jpn-ease,cubic-bezier(.4,0,.2,1));
  font-family:var(--km-body);
}
.jpic-login.is-open .jpic-login-dialog{opacity:1;transform:translate(-50%,-50%);}
.jpic-login-x{
  position:absolute;top:14px;right:14px;width:38px;height:38px;border:0;cursor:pointer;
  background:var(--grey-100);color:var(--grey-700);border-radius:50%;
  font-size:20px;line-height:1;display:flex;align-items:center;justify-content:center;
  transition:background .2s ease,transform .2s ease,color .2s ease;}
.jpic-login-x:hover{background:var(--jpic-red);color:#fff;transform:rotate(90deg);}

/* ---- Brand header ---- */
.jpic-login-brand{display:flex;justify-content:center;margin-bottom:18px;}
.jpic-login-brand img{height:66px;width:auto;}

/* ---- Views (crossfade) ---- */
.jpic-login-view{display:none;}
.jpic-login-view.is-active{display:block;animation:jpicLoginFade .3s ease both;}
@keyframes jpicLoginFade{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:translateY(0);}}
.jpic-login-title{font-family:var(--km-display);font-weight:800;font-size:23px;line-height:1.2;
  color:var(--jpic-blue);text-align:center;margin:0 0 6px;}
.jpic-login-sub{font-size:14.5px;color:var(--grey-500);text-align:center;margin:0 0 22px;}

/* ---- Audience chooser ---- */
.jpic-login-audience{display:flex;flex-direction:column;gap:12px;}
.jpic-login-aud{
  display:flex;align-items:center;gap:15px;width:100%;text-align:left;cursor:pointer;
  padding:16px 18px;border:2px solid var(--grey-200);border-radius:14px;background:var(--white);
  transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease;}
.jpic-login-aud:hover,.jpic-login-aud:focus-visible{
  border-color:var(--jpic-blue);background:var(--off-white);transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(0,73,144,.14);}
.jpic-login-aud-ic{flex:0 0 auto;width:44px;height:44px;border-radius:12px;
  display:flex;align-items:center;justify-content:center;font-size:22px;
  background:linear-gradient(135deg,var(--jpic-blue-light),var(--jpic-blue));color:#fff;}
.jpic-login-aud-tx{flex:1 1 auto;}
.jpic-login-aud-tx strong{display:block;font-family:var(--km-display);font-weight:700;font-size:16px;color:var(--jpic-blue);}
.jpic-login-aud-tx span{display:block;font-size:12.5px;color:var(--grey-500);margin-top:2px;}
.jpic-login-aud-go{flex:0 0 auto;color:var(--jpic-gold-dark);font-size:18px;
  transform:translateX(-4px);opacity:.5;transition:transform .2s ease,opacity .2s ease;}
.jpic-login-aud:hover .jpic-login-aud-go{transform:translateX(0);opacity:1;}

/* ---- Back link + audience chip ---- */
.jpic-login-back{display:inline-flex;align-items:center;gap:7px;border:0;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--grey-500);padding:0;margin:0 0 14px;
  transition:color .2s ease;}
.jpic-login-back:hover{color:var(--jpic-blue);}
.jpic-login-chip{display:inline-flex;align-items:center;gap:8px;margin:0 auto 14px;
  padding:6px 14px;border-radius:20px;background:rgba(0,73,144,.08);
  color:var(--jpic-blue);font-size:13px;font-weight:700;}
.jpic-login-chiprow{display:flex;justify-content:center;}

/* ---- Form ---- */
.jpic-login-form{display:flex;flex-direction:column;gap:14px;}
.jpic-login-field{display:flex;flex-direction:column;gap:6px;text-align:left;}
.jpic-login-field label{font-size:12.5px;font-weight:700;color:var(--grey-700);letter-spacing:.02em;}
.jpic-login-field input{
  width:100%;box-sizing:border-box;padding:13px 15px;font-size:15px;font-family:var(--km-body);
  border:2px solid var(--grey-200);border-radius:11px;background:var(--off-white);color:var(--grey-900);
  transition:border-color .2s ease,background .2s ease,box-shadow .2s ease;}
.jpic-login-field input:focus{outline:none;border-color:var(--jpic-blue);background:#fff;
  box-shadow:0 0 0 4px rgba(0,73,144,.12);}
.jpic-login-select{
  width:100%;box-sizing:border-box;padding:13px 40px 13px 15px;font-size:15px;font-family:var(--km-body);
  border:2px solid var(--grey-200);border-radius:11px;background:var(--off-white);color:var(--grey-900);
  cursor:pointer;-webkit-appearance:none;-moz-appearance:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7a8d' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:16px;
  transition:border-color .2s ease,background-color .2s ease,box-shadow .2s ease;}
.jpic-login-select:focus{outline:none;border-color:var(--jpic-blue);background-color:#fff;
  box-shadow:0 0 0 4px rgba(0,73,144,.12);}
.jpic-login-forgot{align-self:flex-end;font-size:12.5px;font-weight:600;color:var(--jpic-blue);
  background:none;border:0;cursor:pointer;padding:0;text-decoration:none;}
.jpic-login-forgot:hover{text-decoration:underline;color:var(--jpic-blue-dark);}
.jpic-login-submit{
  width:100%;margin-top:2px;padding:14px;border:0;cursor:pointer;border-radius:11px;
  font-family:var(--km-display);font-weight:800;font-size:15px;letter-spacing:.02em;color:#fff;
  background:linear-gradient(135deg,var(--jpic-blue-light),var(--jpic-blue) 65%,var(--jpic-blue-dark));
  box-shadow:0 8px 20px rgba(0,73,144,.28);
  transition:transform .18s ease,box-shadow .2s ease,filter .2s ease;}
.jpic-login-submit:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(0,73,144,.36);filter:brightness(1.05);}

/* ---- "or continue with" divider ---- */
.jpic-login-or{display:flex;align-items:center;gap:12px;margin:22px 0 16px;
  color:var(--grey-500);font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.06em;}
.jpic-login-or::before,.jpic-login-or::after{content:'';flex:1;height:1px;background:var(--grey-200);}

/* ---- Social / SSO buttons ---- */
.jpic-login-social{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
.jpic-login-sso{
  display:flex;align-items:center;justify-content:center;gap:9px;cursor:pointer;
  padding:12px 10px;border:2px solid var(--grey-200);border-radius:11px;background:#fff;
  font-family:var(--km-body);font-size:13.5px;font-weight:600;color:var(--grey-900);
  transition:border-color .2s ease,background .2s ease,transform .15s ease,box-shadow .2s ease;}
.jpic-login-sso:hover{border-color:var(--jpic-blue-light);transform:translateY(-2px);
  box-shadow:0 6px 16px rgba(0,20,50,.12);}
.jpic-login-sso svg,.jpic-login-sso .jpic-login-ssoic{width:19px;height:19px;flex:0 0 auto;}
.jpic-login-sso-wide{grid-column:1 / -1;}
.jpic-login-sso-otp{grid-column:1 / -1;border-color:var(--jpic-gold);background:rgba(254,190,80,.1);}
.jpic-login-sso-otp:hover{border-color:var(--jpic-gold-dark);background:rgba(254,190,80,.2);}
.jpic-login-sso-otp .jpic-login-ssoic{color:var(--jpic-gold-dark);}

/* ---- Success / status note ---- */
.jpic-login-note{margin:16px 0 0;padding:12px 14px;border-radius:11px;font-size:13.5px;line-height:1.5;
  background:rgba(0,73,144,.07);color:var(--jpic-blue-dark);text-align:center;display:none;}
.jpic-login-note.is-shown{display:block;animation:jpicLoginFade .3s ease both;}
.jpic-login-note.is-error{background:rgba(237,27,46,.09);color:var(--jpic-red);}

/* ---- Register / "already have an account" links + name row ---- */
.jpic-login-alt{margin:18px 0 0;text-align:center;font-size:13px;color:var(--grey-500);}
.jpic-login-link{border:0;background:none;cursor:pointer;padding:0;font-size:13px;font-weight:700;
  color:var(--jpic-blue);text-decoration:none;font-family:var(--km-body);}
.jpic-login-link:hover{text-decoration:underline;color:var(--jpic-blue-dark);}
.jpic-login-row{display:flex;gap:12px;}
.jpic-login-row .jpic-login-field{flex:1 1 0;min-width:0;}

@media(max-width:420px){
  .jpic-login-dialog{padding:28px 20px 24px;}
  .jpic-login-social{grid-template-columns:1fr;}
  .jpic-login-row{flex-direction:column;gap:14px;}
}
@media(prefers-reduced-motion:reduce){
  .jpic-login-view.is-active,.jpic-login-note.is-shown{animation:none;}
  .jpic-login-dialog,.jpic-login-scrim{transition:none;}
}

/* ================================================================
   NAV — main-nav divider + signed-in personalised panel
   (rail sits between the main-nav divider and the login divider)
   ================================================================ */
.jpicnav-rail-divider-main{margin:6px 16px;}

.jpicnav-userpanel{flex:0 0 auto;padding:4px 8px 6px;overflow:hidden;}
.jpicnav-userpanel[hidden]{display:none;}

/* Greeting row — avatar always visible; "Hello Allan" reveals when expanded */
.jpicnav-userpanel-hi{display:flex;align-items:center;gap:12px;padding:8px 6px 10px;}
.jpicnav-userpanel-avatar{flex:0 0 auto;width:34px;height:34px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--jpic-gold),var(--jpic-gold-dark));
  color:var(--jpic-blue-dark);font-family:var(--km-display);font-weight:800;font-size:15px;
  box-shadow:0 2px 8px rgba(0,20,50,.25);}
.jpicnav-userpanel-greet{display:flex;flex-direction:column;line-height:1.15;
  opacity:0;transition:opacity .18s var(--jpn-ease);white-space:nowrap;}
.jpicnav-rail.is-expanded .jpicnav-userpanel-greet{opacity:1;}
.jpicnav-userpanel-hello{font-size:11px;font-weight:600;color:rgba(255,255,255,.7);text-transform:uppercase;letter-spacing:.05em;}
.jpicnav-userpanel-name{font-family:var(--km-display);font-weight:800;font-size:16px;color:var(--jpic-gold);}

/* Quick links reuse the rail-item look but read as a lighter sub-group */
.jpicnav-userpanel-links{display:flex;flex-direction:column;gap:2px;}
.jpicnav-userpanel-link{font-weight:500;}
.jpicnav-userpanel-link .jpicnav-icon{color:var(--jpic-gold);}
.jpicnav-userpanel-link:hover .jpicnav-icon,
.jpicnav-userpanel-link:focus-visible .jpicnav-icon{color:var(--jpic-gold);}
/* Caret hint on grouped items (opens a flyout mega-menu); only when expanded */
.jpicnav-userpanel-caret{margin-left:auto;font-size:12px;line-height:1;opacity:0;flex:0 0 auto;
  color:rgba(255,255,255,.6);transition:opacity .18s var(--jpn-ease),transform .2s var(--jpn-ease);}
.jpicnav-rail.is-expanded .jpicnav-userpanel-link .jpicnav-userpanel-caret{opacity:.7;}
.jpicnav-userpanel-link[aria-expanded="true"] .jpicnav-userpanel-caret{transform:rotate(90deg);color:var(--jpic-blue);}

/* Flyout mega-menu list with icons (signed-in groups) */
.jpicnav-panel-list-icons a{justify-content:flex-start;gap:13px;}
.jpicnav-panel-list-icons a::after{content:none;}
.jpicnav-panel-list-icons .jpicnav-icon{flex:0 0 auto;width:22px;text-align:center;font-size:18px;
  color:var(--jpic-gold-dark);transition:color .2s var(--jpn-ease);}
.jpicnav-panel-list-icons a:hover .jpicnav-icon{color:var(--jpic-blue);}

/* Signed-in Log Out affordance */
.jpicnav-login-trigger.is-authed .jpicnav-icon{color:var(--jpic-gold);}

/* Mobile signed-in panel (in the overlay's primary column) */
.jpicnav-mobile-userpanel{margin:4px 0 10px;padding:14px;border-radius:14px;
  background:rgba(255,255,255,.08);}
.jpicnav-mobile-userpanel[hidden]{display:none;}
.jpicnav-mobile-userpanel .jpicnav-userpanel-hi{padding:0 0 10px;}
.jpicnav-mobile-userpanel .jpicnav-userpanel-greet{opacity:1;}
.jpicnav-mobile-userpanel .jpicnav-userpanel-links{gap:0;}
.jpicnav-mobile-login .jpicnav-icon{color:var(--jpic-gold);}
/* Grouped sections inside the mobile signed-in panel */
.jpicnav-userpanel-mgroup{margin:6px 0 2px;}
.jpicnav-userpanel-mgrouphdr{display:flex;align-items:center;gap:10px;padding:9px 4px 5px;
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.06em;color:rgba(255,255,255,.6);}
.jpicnav-userpanel-mgrouphdr .jpicnav-icon{color:var(--jpic-gold);font-size:15px;}


/* ================================================================
   TOP-CORNER UTILITY CLUSTER — site search + language  (.jpt-*)
   ----------------------------------------------------------------
   Injected by js/jpic-topbar.js. A frosted-glass pill cluster that
   floats in the TOP CORNER of the page, above the hero:
     • desktop (>=1024px): true top-right corner, clear of the left
       rail — a permanent search box + a language pill;
     • mobile (<=1023px): sits just under the 60px blue nav bar —
       a search icon that expands to a field, plus a language pill.

   LANGUAGE / POLITICAL SENSITIVITY:
   The selector lists LANGUAGES, never countries or regions, and
   uses NO national flags anywhere. Chinese is offered as two
   language variants — Simplified (简) and Traditional (繁) — with
   neutral script-glyph chips, so nothing implies a stance on
   Hong Kong, Taiwan or the mainland. Do NOT add flags here.
   ================================================================ */
.jpt{position:fixed;z-index:950;top:70px;right:12px;font-family:var(--km-body);}
.jpt *{box-sizing:border-box;}
.jpt-inner{display:flex;align-items:center;gap:8px;justify-content:flex-end;}

/* shared frosted pill / button */
.jpt-btn{
  display:inline-flex;align-items:center;gap:8px;height:44px;padding:0 15px;
  border:1px solid rgba(255,255,255,.55);border-radius:24px;
  background:rgba(255,255,255,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:#fff;font-size:14px;font-weight:600;line-height:1;cursor:pointer;
  transition:background .2s ease,transform .2s ease,box-shadow .2s ease;
}
.jpt-btn:hover{background:rgba(255,255,255,.30);transform:translateY(-1px);}
.jpt-btn i{font-size:18px;line-height:1;}
.jpt :focus-visible{outline:3px solid var(--jpic-gold);outline-offset:2px;border-radius:24px;}

/* ---------- SEARCH ---------- */
.jpt-search{position:relative;}
.jpt-search-toggle{width:44px;padding:0;justify-content:center;}
.jpt-search-toggle .jpt-btn-label{display:none;}

.jpt-search-field{
  display:none;align-items:center;gap:8px;height:44px;width:min(320px,calc(100vw - 96px));
  padding:0 8px 0 14px;border-radius:24px;background:rgba(255,255,255,.96);
  border:1px solid rgba(255,255,255,.7);box-shadow:0 6px 22px rgba(0,20,50,.20);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
}
.jpt.is-search-open .jpt-search-field{display:flex;animation:jptField .22s ease;}
.jpt.is-search-open .jpt-search-toggle{display:none;}
.jpt.is-search-open .jpt-lang{display:none;}          /* free up room on small screens */
@keyframes jptField{from{opacity:0;transform:scaleX(.85);transform-origin:right;}to{opacity:1;transform:scaleX(1);}}
.jpt-search-field-ic{color:var(--jpic-blue);font-size:17px;flex:0 0 auto;}
.jpt-search-input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:15px;color:var(--grey-900);}
.jpt-search-input::placeholder{color:var(--grey-500);}
.jpt-search-input::-webkit-search-decoration,.jpt-search-input::-webkit-search-cancel-button{-webkit-appearance:none;}
.jpt-search-clear{flex:0 0 auto;border:0;background:none;cursor:pointer;color:var(--grey-500);
  width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .2s ease,color .2s ease;}
.jpt-search-clear:hover{background:var(--grey-100);color:var(--grey-900);}
.jpt-search-clear i{font-size:15px;}

/* results panel */
.jpt-results{
  position:absolute;top:calc(100% + 10px);right:0;width:min(390px,calc(100vw - 24px));
  background:#fff;border-radius:14px;box-shadow:0 18px 46px rgba(0,20,50,.26);
  padding:6px;max-height:min(66vh,520px);overflow-y:auto;overscroll-behavior:contain;
}
.jpt-results-hd{font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--grey-500);padding:11px 12px 5px;}
.jpt-result{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:10px;color:var(--grey-900);text-decoration:none;cursor:pointer;}
.jpt-result:hover,.jpt-result.is-active{background:rgba(0,73,144,.09);}
.jpt-result-ic{flex:0 0 auto;width:34px;height:34px;border-radius:9px;background:var(--jpic-blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:16px;}
.jpt-result-tx{min-width:0;}
.jpt-result-tt{font-size:14.5px;font-weight:700;color:var(--jpic-blue-dark);line-height:1.3;}
.jpt-result-ds{font-size:12.5px;color:var(--grey-500);line-height:1.35;margin-top:2px;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;}
.jpt-result mark{background:transparent;color:var(--jpic-red);font-weight:800;padding:0;}
/* "See all results" footer row (Pattern A → search.html) */
.jpt-result-all{margin-top:4px;border-top:1px solid var(--grey-200,#e6e9ee);border-radius:0 0 10px 10px;}
.jpt-result-all .jpt-result-ic{background:var(--jpic-gold);color:var(--jpic-blue-dark,#003b73);}
.jpt-result-all .jpt-result-tt{color:var(--jpic-blue);align-self:center;}
.jpt-result-count{color:var(--grey-500);font-weight:600;}
/* "English" badge on a result whose page has no translation in this language
   yet (search-index.json marks those entries). Tells a translated visitor what
   they'll get BEFORE they click, rather than surprising them with an English
   page. Same treatment on the full results page: .srch-card-en. */
/* grey-700 on grey-200, not grey-500 on grey-100: at 10.5px this needs to clear
   WCAG AA (4.5:1) for small text, and the lighter pairing sat near 3.5:1. */
.jpt-result-en,.srch-card-en{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:100px;
  background:var(--grey-200,#dce1e8);color:var(--grey-700,#3a4553);font-size:10.5px;font-weight:700;
  letter-spacing:.02em;text-transform:uppercase;vertical-align:middle;white-space:nowrap;}
.jpt-noresult{padding:20px 16px;text-align:center;color:var(--grey-500);font-size:13.5px;line-height:1.5;}
.jpt-noresult strong{color:var(--grey-900);}
.jpt-noresult a{color:var(--jpic-blue);font-weight:700;text-decoration:none;}
.jpt-noresult a:hover{text-decoration:underline;}

/* ---------- LANGUAGE ---------- */
.jpt-lang{position:relative;}
.jpt-lang-code{font-weight:700;letter-spacing:.02em;}
.jpt-caret{font-size:13px !important;opacity:.85;transition:transform .2s ease;}
.jpt-lang-toggle[aria-expanded="true"] .jpt-caret{transform:rotate(180deg);}
.jpt-langmenu{
  position:absolute;top:calc(100% + 10px);right:0;width:274px;list-style:none;margin:0;padding:6px;
  background:#fff;border-radius:14px;box-shadow:0 18px 46px rgba(0,20,50,.26);
  max-height:min(70vh,470px);overflow-y:auto;overscroll-behavior:contain;
}
.jpt-lang-opt{display:flex;align-items:center;gap:12px;width:100%;padding:10px 12px;border:0;background:none;
  border-radius:10px;cursor:pointer;text-align:left;color:var(--grey-900);transition:background .18s ease;}
.jpt-lang-opt:hover,.jpt-lang-opt.is-active{background:rgba(0,73,144,.09);}
.jpt-lang-chip{flex:0 0 auto;width:34px;height:34px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(135deg,var(--jpic-blue-light),var(--jpic-blue));color:#fff;font-weight:700;font-size:14px;}
.jpt-lang-tx{min-width:0;flex:1 1 auto;}
.jpt-lang-name{font-size:14.5px;font-weight:700;line-height:1.25;}
.jpt-lang-sub{font-size:12px;color:var(--grey-500);line-height:1.2;margin-top:1px;}
.jpt-lang-tick{flex:0 0 auto;color:var(--jpic-blue);font-size:15px;opacity:0;}
.jpt-lang-opt.is-active .jpt-lang-tick{opacity:1;}

/* transient "translation coming soon" note */
.jpt-toast{position:absolute;top:calc(100% + 10px);right:0;max-width:min(320px,calc(100vw - 24px));
  background:var(--jpic-blue-dark);color:#fff;font-size:13px;line-height:1.45;padding:12px 15px;border-radius:12px;
  box-shadow:0 14px 34px rgba(0,20,50,.32);animation:jptToast .25s ease;}
@keyframes jptToast{from{opacity:0;transform:translateY(-6px);}to{opacity:1;transform:translateY(0);}}

/* desktop: true top corner, permanent search box */
@media(min-width:1024px){
  .jpt{top:16px;right:24px;}
  .jpt-search-toggle{display:none;}
  .jpt-search-field{display:flex;}
  .jpt.is-search-open .jpt-lang{display:inline-flex;}

  /* scrolled: collapse the permanent box to an icon so it stops covering the
     sticky sub-nav; it re-expands when the icon is clicked. */
  .jpt.is-scrolled .jpt-search-field{display:none;}
  .jpt.is-scrolled .jpt-search-toggle{display:inline-flex;}
  .jpt.is-scrolled.is-search-open .jpt-search-field{display:flex;}
  .jpt.is-scrolled.is-search-open .jpt-search-toggle{display:none;}
}

/* scrolled: solid, high-contrast controls so the search + language read clearly
   on the light sticky sub-nav (and still pop on the dark hero). */
.jpt.is-scrolled .jpt-btn{
  background:#fff;border-color:var(--grey-200);color:var(--jpic-blue-dark);
  box-shadow:0 6px 18px rgba(0,20,50,.18);
}
.jpt.is-scrolled .jpt-btn:hover{background:var(--off-white);}
.jpt.is-scrolled .jpt-btn i{color:var(--jpic-blue);}
.jpt.is-scrolled .jpt-lang-code{color:var(--jpic-blue-dark);}

@media(prefers-reduced-motion:reduce){
  .jpt *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
  .jpt-m *{transition-duration:.001ms !important;animation-duration:.001ms !important;}
}
.jpicnav-userpanel-mgroup .jpicnav-mobile-primary-item{padding-left:24px;}


/* ================================================================
   SEARCH + LANGUAGE — MOBILE (mounted inside the burger menu)
   ----------------------------------------------------------------
   On mobile the floating top-corner cluster is hidden; js/jpic-topbar.js
   mounts a search field + a flag-free language picker inside the open
   burger overlay instead (so they appear only after the burger tap).
   ================================================================ */
@media(max-width:1023px){
  .jpt{display:none !important;}                 /* no floating cluster on mobile */
}

.jpt-m{position:relative;flex:0 0 auto;background:#fff;padding:14px 16px 16px;
  border-bottom:1px solid var(--grey-200);font-family:var(--km-body);}
.jpt-m *{box-sizing:border-box;}
.jpt-m-search{display:flex;align-items:center;gap:8px;height:48px;padding:0 8px 0 14px;border-radius:26px;
  background:var(--off-white);border:1px solid var(--grey-200);}
.jpt-m-search:focus-within{border-color:var(--jpic-blue-light);background:#fff;box-shadow:0 0 0 3px rgba(0,73,144,.12);}
.jpt-m-search > i{color:var(--jpic-blue);font-size:18px;flex:0 0 auto;}
.jpt-m-input{flex:1 1 auto;min-width:0;border:0;outline:0;background:transparent;font:inherit;font-size:16px;color:var(--grey-900);}
.jpt-m-input::placeholder{color:var(--grey-500);}
.jpt-m-input::-webkit-search-decoration,.jpt-m-input::-webkit-search-cancel-button{-webkit-appearance:none;}
.jpt-m-clear{flex:0 0 auto;border:0;background:none;color:var(--grey-500);width:36px;height:36px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;cursor:pointer;}
.jpt-m-clear i{font-size:16px;}

.jpt-m-results{position:absolute;left:16px;right:16px;top:calc(100% - 2px);z-index:6;
  background:#fff;border-radius:14px;box-shadow:0 20px 48px rgba(0,20,50,.3);
  padding:6px;max-height:min(64vh,460px);overflow-y:auto;overscroll-behavior:contain;
  border:1px solid var(--grey-100);}

.jpt-m-toast{margin:14px 2px 2px;background:var(--jpic-blue-dark);color:#fff;font-size:13px;line-height:1.45;
  padding:12px 15px;border-radius:12px;}

/* language: one globe pill in the burger top bar → dropdown list */
.jpt-mlang{position:relative;display:flex;align-items:center;}
.jpt-mlang-btn{display:inline-flex;align-items:center;gap:6px;height:40px;padding:0 12px;border:0;border-radius:20px;
  background:rgba(255,255,255,.16);color:#fff;font-family:var(--km-body);font-size:14px;font-weight:700;cursor:pointer;
  transition:background .2s ease;}
.jpt-mlang-btn:hover{background:rgba(255,255,255,.28);}
.jpt-mlang-btn > i:first-child{font-size:18px;line-height:1;}
.jpt-mlang-btn .jpt-caret{font-size:12px;opacity:.85;transition:transform .2s ease;}
.jpt-mlang-btn[aria-expanded="true"] .jpt-caret{transform:rotate(180deg);}
.jpt-mlang-btn:focus-visible{outline:3px solid var(--jpic-gold);outline-offset:2px;}
.jpt-mlang-menu{position:absolute;top:calc(100% + 8px);right:0;z-index:40;width:min(260px,calc(100vw - 24px));
  list-style:none;margin:0;padding:6px;background:#fff;border-radius:14px;box-shadow:0 20px 48px rgba(0,20,50,.32);
  max-height:min(64vh,430px);overflow-y:auto;overscroll-behavior:contain;}

/* ================================================================
   NAV CONTRAST HARDENING
   ----------------------------------------------------------------
   The rail/menu <a> items (About Us, Contact Us, Apply Online) must
   stay white on the blue chrome even if a host stylesheet (e.g. the
   SharePoint master page) sets a global dark `a { color }`. These
   element+class rules out-specify any bare `a` rule; the active /
   hover / CTA states below still win via their own higher specificity.
   ================================================================ */
.jpicnav-rail a.jpicnav-rail-item{color:rgba(255,255,255,.92);}
.jpicnav-rail a.jpicnav-rail-item:hover,.jpicnav-rail a.jpicnav-rail-item:focus-visible{color:#fff;}
.jpicnav-mobile-primary a.jpicnav-mobile-primary-item{color:rgba(255,255,255,.85);}
.jpicnav-mobile-primary a.jpicnav-mobile-primary-item:hover,
.jpicnav-mobile-primary a.jpicnav-mobile-primary-item.is-active{color:var(--jpic-blue);}

/* ================================================================
   GLOBAL 360° VIRTUAL-TOUR COMPONENT  (.jp-tour*)
   ----------------------------------------------------------------
   "Walk Through Our Facilities in 360°" — an embedded YouTour stage
   with a photo-thumbnail picker. Reusable site-wide: drop the markup
   (see below) into any page, load js/jpic-tour360.js, and the picker
   swaps the iframe location. Originated on School/primary-school.html
   (formerly the page-scoped .ps-tour); promoted here so every page
   shares one source of truth.

   MARKUP:
     <div class="jp-tour360" data-jp-tour>
       <div class="jp-tour-head">
         <h3 class="jp-tour-title"><i class="icon-default-play" aria-hidden="true"></i> Walk Through Our Facilities in 360&deg;</h3>
         <p class="jp-tour-sub">…short blurb…</p>
       </div>
       <div class="jp-tour-body">
         <div class="jp-tour-stage">
           <iframe class="jp-tour-frame" src="…first location…" title="…"
                   loading="lazy" allow="fullscreen; accelerometer; gyroscope; xr-spatial-tracking"
                   allowfullscreen referrerpolicy="no-referrer-when-downgrade"></iframe>
           <a class="jp-tour-launch" href="…first location…" target="_blank" rel="noopener"><i class="icon-default-expand" aria-hidden="true"></i> Full screen</a>
         </div>
         <div class="jp-tour-picker" role="tablist" aria-label="Choose a place to explore">
           <button class="jp-tour-loc is-active" type="button" role="tab" aria-selected="true" data-src="…location…"><span class="jp-tour-thumb"><img src="…thumb…" alt="" loading="lazy"></span><span class="jp-tour-locname">…name…</span></button>
           …more .jp-tour-loc buttons…
         </div>
       </div>
     </div>
   ================================================================ */
.jp-tour360{margin-top:56px;}
.jp-tour-head{text-align:center;margin-bottom:24px;}
.jp-tour-title{font-family:var(--km-display);font-weight:800;font-size:22px;color:var(--jpic-blue);margin:0;
  display:flex;align-items:center;justify-content:center;gap:10px;}
.jp-tour-title i{color:var(--jpic-gold);font-size:18px;}
.jp-tour-sub{font-size:14.5px;color:var(--grey-500);margin:8px 0 0;}
.jp-tour-body{max-width:1040px;margin:0 auto;display:flex;flex-direction:column;gap:16px;}
.jp-tour-stage{position:relative;border-radius:24px;overflow:hidden;aspect-ratio:16/9;
  background:var(--jpic-blue-dark);box-shadow:0 22px 54px rgba(0,51,102,.20);}
.jp-tour-frame{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;}
.jp-tour-launch{position:absolute;right:14px;bottom:14px;z-index:2;background:rgba(0,51,102,.82);color:#fff;
  font-family:var(--km-display);font-weight:700;font-size:12.5px;padding:8px 13px;border-radius:999px;
  display:inline-flex;align-items:center;gap:6px;text-decoration:none;backdrop-filter:blur(4px);transition:background .2s;}
.jp-tour-launch:hover{background:var(--jpic-blue);}
.jp-tour-picker{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;}
.jp-tour-loc{border:0;background:transparent;padding:0;margin:0;cursor:pointer;width:112px;text-align:center;transition:transform .2s ease;}
.jp-tour-loc:hover{transform:translateY(-3px);}
.jp-tour-thumb{display:block;position:relative;border-radius:12px;overflow:hidden;aspect-ratio:4/3;
  border:3px solid transparent;box-shadow:0 6px 16px rgba(0,51,102,.12);transition:border-color .2s ease,box-shadow .2s ease;}
.jp-tour-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.jp-tour-loc:hover .jp-tour-thumb{border-color:rgba(254,190,80,.6);}
.jp-tour-loc.is-active .jp-tour-thumb{border-color:var(--jpic-gold);box-shadow:0 8px 20px rgba(254,190,80,.4);}
.jp-tour-locname{display:block;font-family:var(--km-display);font-weight:700;font-size:12px;color:var(--jpic-blue);margin-top:7px;line-height:1.2;}
.jp-tour-loc.is-active .jp-tour-locname{color:var(--jpic-blue-dark);}
@media(max-width:768px){
  .jp-tour-loc{width:96px;}
}
@media(max-width:600px){
  .jp-tour-loc{width:44%;}
}

/* ══════════════════════════════════════════════════════════════════════════
   RESULTS PANEL + ALUMNI RESULT CARDS  (.ar-*)
   ══════════════════════════════════════════════════════════════════════════
   Promoted here from About-JPIC/academic-results.html once a second page
   (Courses/atar.html) needed the same components. The `ar-` prefix is
   historical ("academic results") — kept rather than renamed so the original
   page and its JS hooks (arPanelTabs, .ar-panel-pane) keep working unchanged.

   NOTE: academic-results.html still carries its own byte-identical copy of
   these rules in its page <style> block. That copy wins on cascade order and
   renders identically, so nothing changed there. De-duplicating it is a
   follow-up that needs its own browser-verified pass — do not delete those
   rules blind.

   Components:
     .ar-panel*      dark navy results band: identity column + data pane
     .ar-dux-strip*  burgundy "top graduate" lead-proof strip
     .ar-metrics/.ar-metric*   2x2 metric card grid (on the dark band)
     .ar-measure*    median measure bar with a marked threshold
     .ar-alum-card*  portrait alumni result card (4/5 frame + gold badge)

   The measure bar's grow-on-reveal animation is intentionally NOT here — it
   lives with academic-results.html's reveal JS. Pages without that JS get a
   static bar drawn at its inline width, which is correct with or without JS.
   ────────────────────────────────────────────────────────────────────────── */

:root{
  /* Shadow/radius tokens these components expect. academic-results.html
     redefines the same names on .ar-page with identical values. */
  --ar-shadow-sm: 0 1px 3px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.06);
  --ar-shadow-md: 0 4px 20px rgba(0,73,144,.07);
  --ar-shadow-lg: 0 12px 40px rgba(0,73,144,.1);
  --ar-radius: 12px;
  /* Accessible mid-grey for small secondary text. The shared --grey-500 measures
     4.38:1 on white at the 11–13px sizes these cards use, just under AA. Same
     hue, darkened ~10%: 5.3:1 on white. */
  --ar-grey-mid: #606f7f;
}

/* ---------- Results panel: dark band, identity column + data pane ---------- */
.ar-panel{
  padding:76px 0;color:#fff;position:relative;overflow:hidden;
  background:linear-gradient(135deg, var(--jpic-blue-dark), var(--jpic-blue));
}
/* Gold bloom + navy vignette — the same treatment the library uses on its other
   dark bands, so this reads as brand furniture, not a one-off. Decorative. */
.ar-panel::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(ellipse at 78% 42%, rgba(254,190,80,.13) 0%, transparent 58%),
    radial-gradient(ellipse at 8% 108%, rgba(0,51,102,.55) 0%, transparent 62%);
}
.ar-panel::after{
  content:'';position:absolute;top:-90px;right:-90px;width:300px;height:300px;
  border-radius:50%;pointer-events:none;
  background:radial-gradient(circle, rgba(254,190,80,.16), transparent 70%);
}
.ar-panel > .km-inner{position:relative;z-index:1;}

/* minmax(0,…) on the data column — a bare 1fr is minmax(auto,1fr) and the wide
   metric numerals would refuse to shrink, pushing the page sideways on mobile. */
.ar-panel-grid{display:grid;grid-template-columns:minmax(0,340px) minmax(0,1fr);gap:56px;align-items:start;}

.ar-panel-eyebrow{
  font-family:var(--km-display);font-size:12px;font-weight:700;letter-spacing:2.4px;
  text-transform:uppercase;color:var(--jpic-gold);margin:0 0 18px;
}
.ar-panel-title{
  font-family:var(--km-display);font-size:clamp(34px,4.4vw,52px);font-weight:800;
  line-height:1.08;margin:0 0 22px;color:#fff;
}
.ar-panel-title span{display:block;color:var(--jpic-gold);}
.ar-panel-lead{font-size:16px;line-height:1.7;color:rgba(255,255,255,.82);margin:0 0 26px;max-width:34ch;}
.ar-panel-link{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--km-display);font-size:13px;font-weight:800;letter-spacing:1.4px;
  text-transform:uppercase;color:var(--jpic-gold);text-decoration:none;
  padding:10px 0;border-bottom:2px solid rgba(254,190,80,.45);
  transition:color .2s ease,border-color .2s ease,gap .2s ease;
}
.ar-panel-link:hover{color:#fff;border-bottom-color:#fff;gap:14px;}
.ar-panel-link:focus-visible{outline:3px solid var(--jpic-gold);outline-offset:4px;}
.ar-panel-link-sm{font-size:12px;margin-top:6px;}

.ar-pane-h{
  font-family:var(--km-display);font-size:20px;font-weight:800;color:var(--jpic-gold);
  margin:0 0 22px;
}
.ar-panel-pane + .ar-panel-pane{margin-top:52px;}

/* ---------- Top-graduate strip (lead proof point) ---------- */
.ar-dux-strip{
  display:flex;align-items:center;gap:18px;
  background:linear-gradient(120deg, rgba(136,13,39,.92) 0%, rgba(178,58,82,.72) 100%);
  border:1px solid rgba(255,255,255,.14);border-radius:14px;
  padding:20px 24px;margin-bottom:22px;
}
.ar-dux-strip-icon{
  flex:0 0 auto;width:52px;height:52px;border-radius:50%;
  background:rgba(255,255,255,.16);display:flex;align-items:center;justify-content:center;font-size:23px;
}
.ar-dux-strip-text{display:flex;flex-direction:column;gap:3px;min-width:0;}
.ar-dux-strip-label{font-size:11.5px;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.8);}
.ar-dux-strip-name{font-family:var(--km-display);font-size:21px;font-weight:800;color:#fff;line-height:1.2;}
.ar-dux-strip-score{margin-left:auto;text-align:right;display:flex;flex-direction:column;line-height:1;}
/* The top ATAR is the single number parents look for first, so it is the
   largest type in the panel. */
.ar-dux-strip-atar{
  font-family:var(--km-display);font-size:clamp(50px,5.6vw,66px);font-weight:800;
  color:var(--jpic-gold);line-height:1;font-variant-numeric:tabular-nums;
}
.ar-dux-strip-unit{font-size:11px;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.7);margin-top:5px;}

/* ---------- 2x2 metric grid (sits on the dark band) ---------- */
.ar-metrics{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;}
.ar-metric{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  border-radius:14px;padding:22px 24px;display:flex;flex-direction:column;
  transition:background .25s ease,border-color .25s ease,transform .3s cubic-bezier(.16,1,.3,1);
}
.ar-metric:hover{background:rgba(255,255,255,.095);border-color:rgba(254,190,80,.45);transform:translateY(-3px);}
.ar-metric-icon{font-size:21px;color:var(--jpic-gold);margin-bottom:12px;line-height:1;}
.ar-metric-num{
  font-family:var(--km-display);font-size:clamp(36px,3.9vw,44px);font-weight:800;
  line-height:1;color:#fff;
  font-variant-numeric:tabular-nums;   /* keeps the 2x2 numerals optically aligned */
}
.ar-metric-unit{font-size:.52em;font-weight:800;margin-left:1px;color:rgba(255,255,255,.72);}
.ar-metric-plus{font-size:.62em;color:var(--jpic-gold);margin-right:1px;}
.ar-metric-label{font-family:var(--km-display);font-size:15px;font-weight:700;color:#fff;margin-top:12px;}
.ar-metric-label em{font-style:normal;color:var(--jpic-gold);}
/* "of students achieved" — quiet connective line between the percentage and the
   ATAR value it refers to. */
.ar-metric-of{font-size:12.5px;font-weight:600;letter-spacing:.3px;color:var(--jpic-gold);margin-top:11px;}
/* The ATAR band itself (99+ / 95+ / 90+) is a real ATAR score, so it gets real
   type rather than sitting inside a caption. */
.ar-metric-band{
  font-family:var(--km-display);font-size:21px;font-weight:800;color:#fff;
  line-height:1.15;margin-top:2px;font-variant-numeric:tabular-nums;
}
.ar-metric-sub{font-size:13px;color:rgba(255,255,255,.76);margin-top:5px;line-height:1.5;}
.ar-metric-tier{
  display:inline-block;font-size:11.5px;font-weight:700;letter-spacing:.4px;
  color:var(--jpic-gold);background:rgba(254,190,80,.13);
  border:1px solid rgba(254,190,80,.3);padding:3px 11px;border-radius:20px;
  line-height:1.45;
}
/* Comparison pill pushed to the foot so all cards line up even when the labels
   above them wrap to different depths. */
.ar-metric-pill{margin-top:auto;padding-top:13px;}

/* Source/footnote line for a pane on the dark band. */
.ar-pane-foot{margin:16px 0 0;font-size:12px;line-height:1.6;color:rgba(255,255,255,.62);}

/* ---------- Median measure bar ---------- */
.ar-measure{margin-top:22px;padding:24px;background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.12);border-radius:14px;}
.ar-measure-head{display:flex;align-items:baseline;justify-content:space-between;gap:16px;flex-wrap:wrap;}
.ar-measure-title{font-family:var(--km-display);font-size:17px;font-weight:800;color:#fff;}
.ar-measure-yr{font-weight:700;color:rgba(255,255,255,.55);font-size:14px;}
.ar-measure-val{
  font-family:var(--km-display);font-size:clamp(44px,4.8vw,56px);font-weight:800;line-height:1;
  color:var(--jpic-gold);font-variant-numeric:tabular-nums;
}
.ar-measure-track{
  position:relative;height:13px;border-radius:8px;margin:18px 0 8px;
  background:rgba(255,255,255,.14);
}
.ar-measure-fill{
  height:100%;border-radius:8px;
  background:linear-gradient(90deg, var(--jpic-gold-dark), var(--jpic-gold));
  transform-origin:left center;
}
/* Threshold marker (e.g. the "top 10% of the state" line at ATAR 90). */
.ar-measure-mark{position:absolute;top:-6px;bottom:-6px;width:2px;background:rgba(255,255,255,.85);}
.ar-measure-mark span{
  position:absolute;top:calc(100% + 8px);left:0;transform:translateX(-50%);white-space:nowrap;
  font-size:11px;font-weight:700;letter-spacing:.3px;color:rgba(255,255,255,.8);
}
/* Axis ticks kept above AA — the scale is what gives the median its meaning. */
.ar-measure-scale{
  display:flex;justify-content:space-between;margin-top:30px;
  font-size:11px;color:rgba(255,255,255,.7);font-variant-numeric:tabular-nums;
}
.ar-measure-note{font-size:14.5px;line-height:1.65;color:rgba(255,255,255,.78);margin:12px 0 0;}
.ar-measure-hi{color:var(--jpic-gold);font-weight:700;}

/* ---------- Alumni result card ----------
   Portrait 4/5 frame (the site's standard portrait ratio) + gold result badge.
   The card is layout-agnostic: academic-results.html puts it in a scroll-snap
   carousel, Courses/atar.html in a plain 3-up grid. */
.ar-alum-card{
  scroll-snap-align:start;display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--grey-200);border-radius:var(--ar-radius);
  overflow:hidden;text-decoration:none;color:inherit;min-width:0;
  box-shadow:var(--ar-shadow-sm);
  transition:transform .3s cubic-bezier(.16,1,.3,1),box-shadow .3s,border-color .3s;
}
.ar-alum-card:hover{transform:translateY(-5px);box-shadow:var(--ar-shadow-lg);border-color:var(--jpic-gold);}
.ar-alum-card:focus-visible{outline:3px solid var(--jpic-blue);outline-offset:3px;}
/* REQUIRED for the random-pick pattern on Courses/atar.html: the author
   `display:flex` above beats the UA stylesheet's `[hidden]{display:none}`, so
   setting el.hidden alone would NOT hide a card. */
.ar-alum-card[hidden]{display:none;}
.ar-alum-media{position:relative;display:block;aspect-ratio:4/5;background:var(--off-white);overflow:hidden;}
.ar-alum-media img{width:100%;height:100%;object-fit:cover;object-position:center 28%;display:block;}
.ar-alum-badge{
  position:absolute;left:12px;bottom:12px;max-width:calc(100% - 24px);
  font-family:var(--km-display);font-size:12.5px;font-weight:800;letter-spacing:.3px;
  color:var(--jpic-blue-dark);background:var(--jpic-gold);
  padding:6px 12px;border-radius:20px;box-shadow:0 2px 10px rgba(0,51,102,.28);
}
.ar-alum-body{display:flex;flex-direction:column;gap:3px;padding:18px 20px 20px;flex:1;}
.ar-alum-origin{font-size:11.5px;font-weight:700;letter-spacing:1.4px;text-transform:uppercase;color:var(--ar-grey-mid);}
.ar-alum-name{font-family:var(--km-display);font-size:20px;font-weight:800;color:var(--grey-900);line-height:1.2;margin-top:2px;}
.ar-alum-tier{font-size:12.5px;font-weight:700;color:var(--jpic-burgundy);}
.ar-alum-dest{font-size:13.5px;color:var(--grey-700);line-height:1.45;margin-top:8px;}
.ar-alum-dest em{display:block;font-style:normal;color:var(--ar-grey-mid);font-size:12.5px;margin-top:1px;}
.ar-alum-more{
  margin-top:auto;padding-top:14px;font-family:var(--km-display);
  font-size:12.5px;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;color:var(--jpic-blue);
}
.ar-alum-card:hover .ar-alum-more{color:var(--jpic-gold-dark);}

.ar-alum-cta-line{display:flex;gap:28px;flex-wrap:wrap;margin:26px 0 0;}
.ar-alum-link{
  display:inline-flex;align-items:center;gap:8px;min-height:44px;
  font-family:var(--km-display);font-size:13px;font-weight:800;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--jpic-blue);text-decoration:none;
  border-bottom:2px solid rgba(0,73,144,.3);transition:color .2s,border-color .2s,gap .2s;
}
.ar-alum-link:hover{color:var(--jpic-gold-dark);border-bottom-color:var(--jpic-gold);gap:13px;}
.ar-alum-link:focus-visible{outline:3px solid var(--jpic-blue);outline-offset:3px;}

@media(max-width:991px){
  /* Panel collapses to a single column: identity block on top, data below. */
  .ar-panel-grid{grid-template-columns:minmax(0,1fr);gap:38px;}
  .ar-panel-lead{max-width:none;}
}
@media(max-width:768px){
  .ar-panel{padding:56px 0;}
  .ar-metric{padding:18px 18px;}
  .ar-measure{padding:20px 18px;}
}
@media(max-width:600px){
  /* One metric per row: two tabular numerals at 36px+ plus padding cannot share
     a 375px screen without the labels wrapping to three lines. */
  .ar-metrics{grid-template-columns:minmax(0,1fr);}
  /* Stack the dux strip so the big ATAR numeral is not fighting the name. */
  .ar-dux-strip{flex-wrap:wrap;gap:14px;padding:18px;}
  .ar-dux-strip-score{margin-left:0;text-align:left;flex-direction:row;align-items:baseline;gap:8px;}
  .ar-dux-strip-unit{margin-top:0;}
  .ar-measure-head{gap:6px;}
  /* The threshold flag sits at 90% of the track; centring it there overflows the
     right edge on a narrow screen, so pin it to the right instead. */
  .ar-measure-mark span{left:auto;right:0;transform:none;}
  .ar-alum-cta-line{gap:0 24px;}
}

/* =========================================================================
   THAI (/Th/) — script-specific typography.        Added 2026-08-18.
   -------------------------------------------------------------------------
   Scoped to html[lang="th"] so no other locale is touched. Three problems
   this fixes, all of them specific to how Thai is written:

   1. FONT. Raleway and Roboto ship no Thai glyphs, so Thai fell back to
      whatever the OS had, and font-weight:800 headings got SYNTHETIC bold,
      which smears the tone marks stacked above each consonant. Noto Sans Thai
      is a real 300..800 variable face (self-hosted by
      tools/build-local-fonts.py, thai subset only, 26 KB).
      It is listed FIRST but its @font-face declares only the Thai
      unicode-range, so Latin characters in the same sentence — "Year 7",
      "ATAR", "CRICOS" — still render in Raleway/Roboto. That mixing is
      deliberate: /Th/ copy keeps year levels and acronyms in Latin.

   2. LINE-HEIGHT. Thai stacks an upper vowel AND a tone mark above the
      consonant, plus a vowel below it — four levels where Latin has one.
      Anything at line-height <= 1.25 clips the marks off, which changes the
      word. The display classes are re-set loose enough to clear them.

   3. LETTER-SPACING. Thai is written with no spaces between words, so tracking
      pulls a single word apart and can visually detach a combining mark from
      its consonant. Every tracked display class is reset to normal here.
      (text-transform:uppercase is left alone — Thai has no capitals, so it is
      simply inert.)
   ========================================================================= */
html[lang="th"] {
  --km-display: 'Noto Sans Thai', 'Raleway', sans-serif;
  --km-body:    'Noto Sans Thai', 'Roboto', sans-serif;
}

/* Body copy — a little more air than Latin needs. */
html[lang="th"] body { line-height: 1.75; }

/* Display type: clear the stacked marks. */
html[lang="th"] .km-hero-title   { line-height: 1.4;  letter-spacing: normal; }
html[lang="th"] .km-hero-tagline { line-height: 1.45; }
html[lang="th"] .km-h2,
html[lang="th"] .km-h2-sm        { line-height: 1.42; }
html[lang="th"] .km-step-title   { line-height: 1.45; }
html[lang="th"] .km-lead         { line-height: 1.8; }
html[lang="th"] .km-stat-num     { line-height: 1.35; }
html[lang="th"] .km-stat-num-text{ line-height: 1.35; }
html[lang="th"] .km-stat-label   { line-height: 1.6; }

/* Tracked / condensed UI type — drop the tracking, give the line room. */
html[lang="th"] .km-label,
html[lang="th"] .km-hero-pillars,
html[lang="th"] .km-btn,
html[lang="th"] .km-qnav-link,
html[lang="th"] .jpicnav-rail-item,
html[lang="th"] .jf-links a { letter-spacing: normal; }

html[lang="th"] .km-label { line-height: 1.6; }

/* Thai runs 15-30% longer than English, so a fixed-height pill can trap a
   descender. Let the chrome pills grow with their content. */
html[lang="th"] .km-qnav-link { height: auto; min-height: 42px; padding-top: 6px; padding-bottom: 6px; }