/* ============================================================
   JOHN PAUL COLLEGE — DOMESTIC SITE THEME LAYER
   ------------------------------------------------------------
   Loads AFTER /css/jpic-shared.css. Three jobs:
     1. Re-weight the shared brand tokens so burgundy leads and
        blue supports (the College palette); gold stays the accent.
        Token VALUES are unchanged — they are the same brand hexes
        already defined in jpic-shared.css — only their ROLES move.
     2. Carry the homepage-scoped styles (.hx-* explore doors, zones,
        pathway visual; .co-quiz matcher) that on jpic.com.au live
        inline in index.html, so the domestic home can reuse them
        without copy-pasting 950 lines into the page.
     3. Small domestic-only additions (.jpcd-*).
   [VERIFY] Confirm hex values against the JPC Brand Guide before
   launch: burgundy #880D27, blue #004990 / #003366, gold #4980C1.
   ============================================================ */

/* ---------- 1. Role re-weighting (scoped to body.jpc-domestic) ---------- */
body.jpc-domestic{
  /* JPC Brand Style Guide 2025, s2.1 — primary colours.
     Burgundy PMS 202C #880D27 (same value as JPIC's token).
     JPC Blue  PMS 660C #4980C1 — NOT JPIC's #004990, which the guide lists
     as JPIC's own secondary blue. Re-pointing --jpic-blue here recolours
     every blue surface in the shared framework for the domestic site.
     --jpic-blue-dark is kept as a deep supporting tone for footer/stat bands;
     the guide specifies only one blue, so [VERIFY] with the Brand Manager
     whether #003366 is acceptable or an 80% tint of 660C is preferred. */
  --jpic-blue:#4980C1;
  --jpic-blue-light:#6E9BD1;
  --jpic-gold:#4980C1;            /* guide s2.1 secondary palette */
  --jpic-gold-dark:#4980C1;
  /* Semantic aliases for the domestic site. Use these in new components. */
  --jpc-primary:var(--jpic-burgundy);
  --jpc-primary-dark:var(--jpic-burgundy-dark);
  --jpc-secondary:var(--jpic-blue);
  --jpc-secondary-dark:var(--jpic-blue-dark);
  --jpc-accent:var(--jpic-gold);
}
body.jpc-domestic .km-label:not(.km-label-light){color:var(--jpic-burgundy);}

body.jpc-domestic .km-hero-overlay{
  background:
    linear-gradient(0deg, rgba(8,14,26,.94) 0%, rgba(8,14,26,.66) 32%, rgba(8,14,26,.22) 60%, rgba(8,14,26,.08) 100%),
    linear-gradient(110deg, rgba(107,10,31,.55) 0%, rgba(0,51,102,.35) 60%, rgba(0,51,102,.05) 100%);
}

body.jpc-domestic .hx-btn-blue{background:var(--jpic-burgundy);border-color:var(--jpic-burgundy);}
body.jpc-domestic .hx-btn-blue:hover{background:var(--jpic-burgundy-dark);border-color:var(--jpic-burgundy-dark);}

body.jpc-domestic .hx-zone-blue{--hx-accent:var(--jpic-burgundy);}

body.jpc-domestic .y-final-cta{background:var(--jpic-burgundy-dark);}
body.jpc-domestic .jpic-footer{background:var(--jpic-blue-dark);}

/* ---------- 1b. Burgundy-led surfaces ----------
   The framework paints its big surfaces JPIC blue. On the domestic site
   burgundy leads and blue supports: rail + mobile chrome, section headings,
   quick-nav pill, journey/quiz components and card accents go burgundy;
   the footer, hero gradient and stats band keep navy so the page still
   reads as burgundy AND blue rather than burgundy alone. */
body.jpc-domestic .jpicnav-rail,
body.jpc-domestic .jpicnav-mobile-bar,
body.jpc-domestic .jpicnav-mobile-overlay{background:var(--jpic-burgundy);}
body.jpc-domestic .jpicnav-rail{box-shadow:2px 0 18px rgba(60,6,20,.22);}
/* Landscape logo in the rail: widen the open rail a little and size the mark by
   width so it never runs under the collapse toggle (which sits at right:-16px). */
body.jpc-domestic .jpicnav{--jpn-rail-w-open:272px;}
body.jpc-domestic .jpicnav-rail.is-expanded .jpicnav-rail-brand{padding-right:22px;box-sizing:border-box;}
body.jpc-domestic .jpicnav-mark-full{height:auto;width:100%;max-width:196px;}
body.jpc-domestic .jpicnav-rail-brand .jpicnav-toggle{background-color:var(--jpic-burgundy-dark);}
body.jpc-domestic .jpicnav-rail-divider{background:rgba(255,255,255,.18);}
body.jpc-domestic .km-h2{color:var(--jpic-burgundy);}
body.jpc-domestic .km-stories .km-h2{color:#fff;}
body.jpc-domestic .km-label::before{background:var(--jpic-gold);}
body.jpc-domestic .km-qnav{border-bottom-color:rgba(136,13,39,.14);}
body.jpc-domestic .km-qnav-pill{
  background:linear-gradient(135deg,var(--jpic-burgundy-lite),var(--jpic-burgundy) 60%,var(--jpic-burgundy-dark));
  box-shadow:0 8px 20px -8px rgba(136,13,39,.55),inset 0 1px 0 rgba(255,255,255,.14);}







body.jpc-domestic .hx-why-cue,
body.jpc-domestic .hx-door-cue{color:var(--jpic-gold);}
body.jpc-domestic .hx-zone-neutral,
body.jpc-domestic .hx-zone-white{--hx-accent:var(--jpic-burgundy);}








body.jpc-domestic .km-btn-gold{color:var(--jpic-burgundy-dark);}
body.jpc-domestic .jf-heading{color:var(--jpic-gold);}
body.jpc-domestic .jpic-footer .km-btn-gold{color:var(--jpic-burgundy-dark);}

/* ---------- 3. Domestic-only additions ---------- */
/* Hero brand lock-up — official reversed landscape logo (guide s1.2/s1.4) */




/* Footer brand lock-up — official reversed landscape logo */
.jpcd-fbrand{display:flex;align-items:center;gap:14px;}
.jpcd-fbrand img{height:72px;width:auto;}

/* Acknowledgement of Country — full width beneath the footer columns */
.jpcd-ack{margin-top:36px;padding-top:26px;border-top:1px solid rgba(255,255,255,.18);}
.jpcd-ack p{margin:0;max-width:72ch;font-size:.95rem;line-height:1.7;color:rgba(255,255,255,.82);}
/* IB PYP logo strip — guide s4.2: IB logo on solid white, isolated from other
   graphics, aligned with the JPC (colour) logo. */
.jpcd-ib{background:#fff;padding:18px 0;border-top:1px solid var(--grey-200);}
.jpcd-ib .jf-inner{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap;}
.jpcd-ib img{height:56px;width:auto;}
.jpcd-ib .jpcd-ib-jpc{height:64px;}
.jpcd-ib span{font-family:var(--km-body);font-size:.85rem;color:var(--grey-600);flex:1;text-align:right;}
@media (max-width:600px){.jpcd-ib .jf-inner{justify-content:center;}.jpcd-ib span{text-align:center;flex:1 1 100%;}}
/* Yellow "international?" divert used in the hero and admissions block */
.jpcd-divert{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;border-radius:14px;
  background:var(--jpic-soft);border-left:5px solid var(--jpic-gold);margin-top:24px;}
.jpcd-divert i{font-size:1.4rem;color:var(--jpic-burgundy);flex:none;margin-top:2px;}
.jpcd-divert p{margin:0;color:var(--grey-700);}
.jpcd-divert a{font-weight:700;color:var(--jpic-burgundy);}
/* Admissions steps + fee card */
.jpcd-adm{display:grid;grid-template-columns:1.1fr .9fr;gap:48px;align-items:start;margin-top:32px;}
.jpcd-steps{list-style:none;margin:0;padding:0;counter-reset:s;}
.jpcd-steps li{position:relative;padding-left:56px;margin-bottom:22px;counter-increment:s;}
.jpcd-steps li::before{content:counter(s);position:absolute;left:0;top:0;width:40px;height:40px;border-radius:50%;
  background:var(--jpic-burgundy);color:#fff;display:grid;place-items:center;font-family:var(--km-display);font-weight:800;}
.jpcd-steps h3{font-family:var(--km-display);font-size:1.1rem;margin:0 0 4px;color:var(--grey-900);}
.jpcd-steps p{margin:0;color:var(--grey-600);}
.jpcd-fees{background:#fff;border:1px solid var(--grey-200);border-radius:18px;overflow:hidden;box-shadow:0 10px 30px rgba(26,34,48,.06);}
.jpcd-fees table{width:100%;border-collapse:collapse;}
.jpcd-fees th,.jpcd-fees td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--grey-200);vertical-align:top;}
.jpcd-fees th{background:var(--off-white);font-family:var(--km-display);font-weight:700;font-size:.85rem;color:var(--grey-700);}
.jpcd-fees td:last-child{text-align:right;font-family:var(--km-display);font-weight:800;color:var(--jpic-burgundy);white-space:nowrap;}
.jpcd-fees small{display:block;color:var(--grey-500);font-size:.85rem;}
.jpcd-fees tfoot td{font-size:.85rem;color:var(--grey-600);text-align:left;font-family:var(--km-body);font-weight:400;white-space:normal;border-bottom:0;}
@media (max-width:900px){.jpcd-adm{grid-template-columns:1fr;gap:28px;}}
/* Placeholder image blocks — remove once real assets are in /img */

/* Testimonial cards reuse .km-story-card geometry but hold text */





/* ---------- 2. Homepage-scoped styles carried over from jpic.com.au/index.html ---------- */
/* ---- .hx-* : zones, explore doors, pathway visual (from index.html <style> #1) ---- */
  /* ---- 30th anniversary hero watermark ---- */
  
  
  

  /* ---- 30th anniversary hero intro (crest draws in, then zooms out) ---- */
  
  
  
  
  
  
  
  @keyframes jpicWipeReveal{0%{clip-path:inset(0 100% 0 0);}100%{clip-path:inset(0 0 0 0);}}
  @keyframes jpicStackFadeOut{0%{opacity:1;}100%{opacity:0;}}
  @keyframes jpicCrestComplete{0%{opacity:0;transform:translate(-50%,-50%) scale(.88);}100%{opacity:1;transform:translate(-50%,-50%) scale(1);}}
  @keyframes jpicCrestZoomOut{0%{opacity:1;transform:translate(-50%,-50%) scale(1);}100%{opacity:0;transform:translate(-50%,-50%) scale(2.4);}}
  @keyframes jpicHeroIntroBgOut{0%{opacity:1;}100%{opacity:0;}}
  
  

  /* ============================================================
     AWARD-WINNING HERO — "Start Here. Go Anywhere."
     Headline accent + supporting lead + the animated student
     JOURNEY TRACK (Preparation → Mainstream → University → Career).
     Brand-anchored (JPIC navy/gold, Raleway). Transform/opacity
     only; every motion respects prefers-reduced-motion.
     ============================================================ */
  
  

  
  /* The rail + animated fill + travelling comet run between the first and
     last node centres (each of 4 equal stages is centred at 12.5% steps). */
  
  
  

  
  
  
  /* Ring pulse ripples node-to-node in sync with the comet, dramatising the flow. */
  
  
  

  @keyframes kmJtFill{from{transform:scaleX(0);}to{transform:scaleX(1);}}
  @keyframes kmJtStageIn{to{opacity:1;transform:translateY(0);}}
  @keyframes kmJtComet{
    0%{left:0;opacity:0;}6%{opacity:1;}90%{opacity:1;}100%{left:100%;opacity:0;}}
  @keyframes kmJtRing{
    0%{opacity:0;transform:scale(.8);}8%{opacity:.85;transform:scale(1);}
    24%{opacity:0;transform:scale(1.4);}100%{opacity:0;transform:scale(1.4);}}

  
  

  /* ---- scroll-reveal + count-up (reused pattern) ---- */
  
  
   
  
  
  
  
  
  
  
  
  
  

  /* ---- Why cards are now links into deeper pages ---- */
  
  
  
  
  
  
  
  
  

  /* ---- the ATAR stat is a door into the full results page (#ar-results) ----
     Only the last stat links, so the shared :not(:last-child) gold divider is
     untouched. Sits on the navy band, so the cue is gold, not brand blue. ---- */
  
  
  
  
  
  
  
  
  
  

  /* ---- scoped solid-blue button (no km-btn-blue in the shared system) ---- */
  .hx-btn-blue{background:var(--jpic-blue);color:#fff !important;box-shadow:0 4px 16px rgba(0,73,144,.28);}
  .hx-btn-blue:hover{background:var(--jpic-blue-dark);transform:translateY(-2px);text-decoration:none;
    box-shadow:0 8px 24px rgba(0,73,144,.38);}

  /* ============================================================
     EXPLORE DOORS  ·  interactive curiosity grid
     ============================================================ */
  .hx-explore{padding:clamp(56px,7vw,96px) 0;background:var(--off-white);}
  
  .hx-doors{margin-top:clamp(32px,4vw,52px);display:grid;gap:22px;
    grid-template-columns:repeat(3,1fr);}
  @media(max-width:900px){.hx-doors{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:560px){.hx-doors{grid-template-columns:1fr;}}

  .hx-door{position:relative;display:block;min-height:300px;border-radius:18px;overflow:hidden;
    text-decoration:none;color:#fff;isolation:isolate;box-shadow:0 8px 24px rgba(0,32,74,.12);
    transition:transform .4s cubic-bezier(.16,1,.3,1),box-shadow .4s;}
  .hx-door::before{content:"";position:absolute;inset:0;z-index:-2;background-image:var(--img);
    background-size:cover;background-position:center;transition:transform .6s cubic-bezier(.16,1,.3,1);}
  .hx-door::after{content:"";position:absolute;inset:0;z-index:-1;
    background:linear-gradient(180deg,rgba(0,32,74,.05) 0%,rgba(0,32,74,.35) 45%,rgba(0,32,74,.86) 100%);
    transition:background .4s;}
  .hx-door:hover,.hx-door:focus-visible{transform:translateY(-6px);box-shadow:0 18px 40px rgba(0,32,74,.24);outline:none;}
  .hx-door:hover::before,.hx-door:focus-visible::before{transform:scale(1.07);}
  .hx-door:hover::after,.hx-door:focus-visible::after{background:linear-gradient(180deg,rgba(0,73,144,.15) 0%,rgba(0,32,74,.55) 45%,rgba(0,32,74,.92) 100%);}
  .hx-door:focus-visible{box-shadow:0 0 0 3px var(--jpic-gold),0 18px 40px rgba(0,32,74,.24);}

  
  .hx-door-body{position:absolute;left:0;right:0;bottom:0;z-index:2;padding:22px 22px 24px;
    display:flex;flex-direction:column;gap:6px;}
  .hx-door-tag{font-family:var(--km-body);font-size:11px;font-weight:700;letter-spacing:1.2px;
    text-transform:uppercase;color:var(--jpic-gold);}
  .hx-door-body h3{margin:2px 0 0;font-family:var(--km-display);font-weight:700;
    font-size:clamp(19px,1.7vw,22px);line-height:1.2;color:#fff;}
  .hx-door-body p{margin:0;font-family:var(--km-body);font-size:14px;line-height:1.5;color:rgba(255,255,255,.9);
    max-height:0;opacity:0;overflow:hidden;transform:translateY(6px);
    transition:max-height .45s ease,opacity .35s ease,transform .45s ease;}
  .hx-door-cue{display:inline-flex;align-items:center;gap:7px;margin-top:8px;
    font-family:var(--km-body);font-weight:700;font-size:14px;color:#fff;
    opacity:.92;transition:gap .3s ease;}
  .hx-door-cue .jp-icon{width:16px;height:16px;transition:transform .3s ease;}
  .hx-door:hover .hx-door-body p,.hx-door:focus-visible .hx-door-body p{max-height:80px;opacity:1;transform:translateY(0);}
  .hx-door:hover .hx-door-cue,.hx-door:focus-visible .hx-door-cue{gap:12px;}
  .hx-door:hover .hx-door-cue .jp-icon{transform:translateX(3px);}
  @media (prefers-reduced-motion: reduce){
    .hx-door,.hx-door::before,.hx-door-body p{transition:none;}
    .hx-door-body p{max-height:80px;opacity:1;transform:none;}
  }
  /* Door photo as an <img> (build-m1.js) – same layer, zoom and timing as .hx-door::before above */
  .hx-door-img{position:absolute;inset:0;z-index:-2;display:block;width:100%;height:100%;max-width:none;margin:0;
    object-fit:cover;object-position:center;border-radius:0;transition:transform .6s cubic-bezier(.16,1,.3,1);}
  .hx-door:hover .hx-door-img,.hx-door:focus-visible .hx-door-img{transform:scale(1.07);}
  @media (prefers-reduced-motion: reduce){.hx-door-img{transition:none;}}
  /* Touch devices can't hover — always show the description there */
  @media (hover:none){.hx-door-body p{max-height:80px;opacity:1;transform:none;}}

  /* ============================================================
     THE STUDENT ROUTE  ·  the animated 4-stage track
     The band it used to live in (#pathway, "Plan a Pathway") was removed on
     2026-08-21 — its headline and CTA duplicated the #matcher quiz directly
     above it. The animation was kept and moved INSIDE #matcher, where it
     illustrates the four stages that quiz sorts a student into. Its dark card
     is .co-routeband, further down: these nodes are translucent white and
     would vanish on the white zone.
     ============================================================ */
  
  
  
  
  
  @keyframes hxLineGrow{0%{transform:translateY(-50%) scaleX(0);}100%{transform:translateY(-50%) scaleX(1);}}
  @keyframes hxNodePop{0%{opacity:0;transform:scale(.6);}100%{opacity:1;transform:scale(1);}}
  


  /* ============================================================
     JOURNEY BRAND BADGES (.jb-*)  ·  who teaches each step
     Added 2026-08-21. The JPIC 30th-anniversary roundel sits on the two
     English PREPARATION courses; the John Paul College shield sits on the
     three MAINSTREAM school steps. "University & Global Careers" carries
     NEITHER on purpose — it is the destination, not a course we teach, and
     leaving it bare is what makes the badges read as provenance rather than
     decoration.

     ON THE BRAND RULE: DESIGN-SYSTEM.md §1.4 says not to hand-place logos in
     page bodies, because the nav already injects the header pair. These are
     not page branding — they are ~30px provenance marks tied to the legend
     below the map, and the two marks never touch, so the "never a side-by-side
     lockup" rule still holds. Confirm before copying the pattern elsewhere.

     THE MARK STANDS ALONE — no white disc, no coloured ring (Adam, 2026-08-21:
     "maybe no circle, just a badge"). A plate behind a logo reads as a sticker
     applied to the page; the bare mark reads as the brand itself. Both logos
     are already designed to sit unaccompanied, so the only job left is
     separating them from what is behind.

     THAT SEPARATION IS THE drop-shadow PAIR, and it is load-bearing, not
     decoration. The badge straddles the edge of the .km-step-icon circle, so
     each mark lands half on a saturated blue (or gold) circle and half on the
     white card. The first shadow is a 1.5px white halo that keylines the mark
     against the dark circle; the second is a soft grey shadow that lifts it off
     the white card. Remove either and the badge disappears into one of the two
     grounds. filter:drop-shadow (not box-shadow) is required — it follows the
     PNG's alpha, so the halo traces the shield and the roundel, not a square.

     It is a child of .km-step-icon so it travels with that circle's hover lift
     instead of floating beside it. The icon is a centred flex box and this is
     absolutely positioned, so it is out of flow and the glyph does not move.
     ============================================================ */
  
  
  /* SIZED BY HEIGHT, IN PIXELS. Two things forced this:
       1. Both marks are TALLER than wide (shield 324x362, roundel 320x347), so
          sizing by width makes the two look like different sizes. Constraining
          the long side keeps them optically equal.
       2. A percentage height does NOT resolve here — nothing in the chain has a
          definite height, so it falls back to auto and the image renders at its
          natural 362px. Hence explicit px. */
  
  /* the two entry tracks run 76px icons, not 92px — see .km-branch-entries
     .km-step-icon above; the mark steps down with the circle it sits on. */
  
  

  
  
  /* the legend sits on the pale blue zone, so the marks need no keyline here —
     just enough shadow to stop them looking printed onto the background */
  
  
  
  @media(max-width:600px){
    /* stacked, left-aligned as a list — centred rows wrap raggedly at 375px */
    
  }
  

  /* ============================================================
     WHERE WE ARE  ·  the south-east Queensland map band (.lc-*)
     Ported from #mk-where on /Welcome/korea.html — same dark-glass
     chips, night-navy map card, gold routes and gold-when-live pins.
     The Brisbane aerial sits behind the band, quiet enough that the
     map still leads.
     isolate: the reveal transforms inside create stacking contexts,
     and the pop-up is deliberately rendered OUTSIDE this section so
     it is not trapped by them.  overflow:hidden — the photograph is
     cropped and must not bleed into the zones either side.
     ============================================================ */
  .lc-where{--bne-show:.62;--bne-veil:.68;
    position:relative;isolation:isolate;overflow:hidden;
    padding:clamp(56px,7vw,96px) 0;background:#04162e;}
  /* cover, not a fixed zoom: a fixed background-size stops covering as soon as
     the section grows taller than the scaled image, which it does at every
     stacked breakpoint. brightness(.78) is load-bearing, not taste — the source
     fades to a white halo, and GOLD type is the first thing to fail as the
     ground lightens. --bne-show / --bne-veil are deliberate knobs: raising show
     or lowering veil makes the city more present and WILL start failing AA on
     the gold. If you move them, re-check .lc-gl-ic, .lc-pb-dist, .lc-school-cap. */
  .lc-where::before{content:"";position:absolute;inset:0;z-index:-1;
    background-image:url("../img/Brisbane/_lg/BNE-FINAL-Fisheye_HR2_jpg.jpg");
    background-repeat:no-repeat;background-size:cover;background-position:45% 60%;
    opacity:var(--bne-show);
    filter:saturate(1.02) contrast(1.05) brightness(.78);}
  /* The veil: lightest over the middle so the city reads there, closing down to
     almost solid navy at the edges so the band seats itself between the gold
     zone above and the neutral zone below. */
  .lc-where::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;
    background:
      radial-gradient(135% 100% at 50% 40%,
        rgba(3,20,44,var(--bne-veil)) 0%,
        rgba(3,20,44,calc(var(--bne-veil) + .12)) 55%,
        rgba(2,15,36,.95) 100%),
      linear-gradient(180deg,
        rgba(4,26,54,.62) 0%, rgba(4,26,54,.3) 16%, rgba(4,26,54,0) 38%,
        rgba(4,26,54,0) 70%, rgba(4,26,54,.6) 100%);}
  
  
  

  /* ---- the four glance chips ---- */
  /* DARK glass, not light: a white-tinted panel LIGHTENS whatever is behind it,
     so with a photograph back there the gold icon loses contrast. Tinting them
     navy gives each chip its own known dark ground. */
  
  
  
  
  
  
  
  

  /* ---- the map ---- */
  
  /* Sits directly on the photograph rather than on a card, so it carries its own
     quiet navy chip — cheaper than veiling the whole band for one line of type. */
  
  
  
  
  /* The flat navy here is only a fallback under the SVG's own #lcGround rect. */
  
  
  

  /* water, island, bushland */
  
  
  

  /* A lit road on navy rather than white on paper. Translucent white, not #fff —
     a solid white ribbon at this width out-shouts the pins and the College. */
  
  
  
  /* The shield stays a white plate with navy type — brand blue on this ground is
     nearly invisible, and making it gold would break the no-gold-on-roads rule. */
  
  

  /* Routes draw on when their row or pin is hovered/focused. --len is seeded from
     the real path length by the script, so any geometry animates correctly. */
  
  

  
  
  @keyframes lcPulse{0%{transform:scale(.6);opacity:.9}70%{transform:scale(2);opacity:0}100%{opacity:0}}
  

  /* Teardrop pins: translucent white on the navy at rest, gold when their row is live. */
  
  
  
  
  
  
  
  
  

  /* ---- Australia locator inset ---- */
  /* BOTTOM-LEFT, and that is the only free corner — do not move it back.
     In SVG units a 158px card on a 505px map is ~121 wide x ~150 tall, so each
     corner claims a 121x150 block: top-left lands on pins 4 and 5, top-right on
     pin 6, bottom-right on pin 7 (its head is at 299,452). Bottom-left is empty
     below pin 3, whose tip stops at y=276. Widen this past ~160px and it starts
     reaching pin 3. Under 760px it leaves the corner altogether. */
  
  
  
  
  
  
  
  
  

  /* ---- the list beside the map ---- */
  
  /* column, not row: with JS off the .lc-poi-src copy prints inline and must
     stack under its row rather than sit beside it. */
  
  
  
  
  /* Selected state is a GOLD RING, not a gold wash: filling the card lightens it
     far enough that its own gold travel time drops below contrast. */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* ---- place pop-up ---- */
  .lc-poi{position:fixed;inset:0;z-index:1000;display:none;align-items:center;
    justify-content:center;padding:24px;}
  .lc-poi.is-open{display:flex;}
  
  
  @keyframes lcFadeIn{from{opacity:0}to{opacity:1}}
  @keyframes lcPoiIn{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:none}}
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  @media (max-width:760px){
    /* Out of the map's corner and under it instead: at 375px the card is 37% of
       the map, and it covered too much of the picture it is there to explain. */
    
  }
  @media (max-width:600px){
    /* The place pop-up becomes a bottom sheet. */
    .lc-poi{padding:0;align-items:flex-end;}
    
    
    
    
    
    
    
    
    /* TOUCH TARGET. The map scales with the column, so at 375px an r=22 hit ring
       is only ~35px across — under the 44px floor. `r` is an SVG geometry
       property and settable from CSS, so widen it here: r=28 on a 335px-wide map
       is ~45px. Safe against collisions — the closest two pin heads (2 and 3) are
       88 SVG units apart and r=28 needs 56. Where CSS geometry properties are not
       supported the attribute r=22 still applies and the list rows beside the map
       remain the primary control. */
    
    /* MOBILE TYPE BUMP — this band is read by parents, often in their second
       language, and the chip copy sits under the 16px phone floor on desktop. */
    
  }
  
  /* ---- no JS ----
     The pop-up copy prints inline under its row, so every fact in this band is
     readable, crawlable and translatable without scripting. */
  
  
  
  
  

  /* ============================================================
     MATCHER ROUTE BAND  ·  the animated 4-stage route, moved here
     from the retired #pathway section at Adam's request (he liked
     the animation and it was the only part of that band worth
     keeping — its copy and CTA duplicated this quiz).
     It stays dark because .hx-route-node is translucent white and
     would vanish on the white card.

     IT IS THE QUIZ CARD'S HEADER, NOT A CARD OF ITS OWN. It lives
     INSIDE .co-quiz as the first child and cancels that card's
     padding with negative margins, so it runs edge to edge and
     takes the card's own top corners. Three things follow:
       • the negative margins MUST track .co-quiz's padding — change
         one and change the other, including in the 600px rule below
       • no shadow and no max-width of its own; the card supplies both
       • the card's 1px border sits outside the padding box, so the
         band lands flush inside it with no seam
     ============================================================ */
  
  
  
  /* THE FIRST TWO NODES GET A WHITE PLATE, and it is not a style choice.
     Everywhere else on the site a brand mark on a dark ground uses the reversed
     variant (DESIGN-SYSTEM.md §1.4) — but at the ~34px these nodes allow, the
     reversed roundel is a white ring with a blob in it and the reversed shield
     loses the burgundy that identifies it. Neither is recognisable, which is the
     entire point of putting them here. So the plate comes to the mark instead:
     a solid white circle lets both full-colour marks read at full strength.
     The two outcome nodes stay translucent and the destination node stays gold,
     so the row still says "these two are ours, that one is where you end up". */
  
  /* sized by height for the same reason as .jb-badge — both marks are taller
     than wide, so matching their widths makes them look unequal */
  

  /* ============================================================
     SECTION COLOUR ZONES  ·  seamless focusable "areas"
     Borrowed from the Accommodation Overview page, where Boarding
     (navy) and Homestay (burgundy) each own a colour so parents can
     orient at a glance. Here every content band still owns a subtle
     brand tint + a colour-matched eyebrow label — but there is NO
     hard divider line. Instead each zone's background EASES into the
     exact colour the next zone begins with, so the seams dissolve
     and the page reads as one continuous, flowing surface:
        Blue    → the academic Journey   (tops light-blue, hands off to white)
        Gold    → Why JPC (proof & pride) (white, hands off to off-white)
        Neutral → Explore the College     (off-white, hands off to soft blush)
        Burgundy→ Graduate Success Stories (soft blush)
     Each zone holds its tint for most of its height, then blends in
     the final stretch, so adjacent edges meet on the same colour.
     BRAND TOKENS ONLY (blue / gold / burgundy families) — no
     off-brand hues. Backgrounds sit later in the cascade than the
     shared .km-* defaults, so these win by source order.
     ============================================================ */
  /* eyebrow label + its underline adopt the zone's accent colour */
  .hx-zone .km-label{color:var(--hx-accent,var(--jpic-gold-dark));}
  .hx-zone .km-label::before{background:var(--hx-accent,var(--jpic-gold));}

  /* BLUE ZONE — Your Journey · light-blue → white (into Why) */
  .hx-zone-blue{--hx-accent:var(--jpic-blue);
    background:linear-gradient(180deg,#eaf2fb 0%,#eef4fb 50%,#ffffff 100%);}
  /* ============================================================
     WHY GRID — the four value cards now sit INSIDE .km-why-content
     (2-across), so that column runs far taller than the 4/5 photo.
     Centring the photo would leave a pool of whitespace above AND
     below it, so top-align the pair and let the photo travel with
     the reader instead. Reset below 991px, where .km-why-grid
     collapses to a single column and sticky would be wrong.
     ============================================================ */
  
  
  @media(min-width:992px){
    .km-why-image{position:sticky;top:96px;}
  }

  /* GOLD ZONE — Why JPC · white → off-white (into Explore) */
  .hx-zone-gold{--hx-accent:var(--jpic-gold-dark);
    background:linear-gradient(180deg,#ffffff 0%,#ffffff 58%,#f5f7fa 100%);}
  /* NEUTRAL ZONE — Explore · off-white → soft blush (into Stories) */
  .hx-zone-neutral{--hx-accent:var(--jpic-blue);
    background:linear-gradient(180deg,#f5f7fa 0%,#f7f4f5 62%,#fbf1f3 100%);}
  /* BURGUNDY ZONE — Graduate stories · soft blush, settling deeper */
  .hx-zone-burgundy{--hx-accent:var(--jpic-burgundy);
    background:linear-gradient(180deg,#fbf1f3 0%,#f9edef 100%);}
  /* keep the "See all alumni" link on-theme inside the burgundy zone */
  
  

  /* ============================================================
     PRIMARY ENTRY TRACK (.hx-ptrack) — page-scoped override of the
     shared flex .km-track-steps row. Two entries converge on ONE
     destination: Lower Primary (row 1) and Primary School Preparation
     (row 2) both arrow across into Upper Primary, which spans both
     rows in column 3. Keeps the card two rows tall instead of three.
     Collapses to one column at the shared 600px stacking breakpoint,
     where the source order reads Lower → PSP → Upper.
     ============================================================ */
  
  
  
  
  
  
  /* trim the shared step rhythm across BOTH entry tracks — no bullet
     lists here any more, so the 92px icon rhythm just adds height. The
     gold destination spine keeps its full-size icons on purpose. */
  
  
  
  

/* ---- .co-quiz : starting-point matcher (from index.html <style> #2) ---- */
  /* colour-zone: white → white, keeps the seamless hand-off intact */
  .hx-zone-white{--hx-accent:var(--jpic-blue);background:#ffffff;}
  
  

  /* agent hint under the intro */
  
  
  

  /* quiz shell */
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  
  
  
  
  
  
  

  /* result card */
  
  
  
  
  
  
  
  
  
  
  /* The brand mark in front of a program name. Sized by HEIGHT for the same
     reason as .jb-badge — both marks are taller than wide, so matching their
     widths makes the two look unequal. vertical-align sits it on the cap height
     of the 23px display type rather than the baseline, so it reads as part of
     the line instead of hanging below it. r.pathText strips tags before the
     enquiry prefill, so nothing leaks into the form. */
  
  @media(max-width:600px){
    /* .co-result-path drops to 20px here — see the breakpoint below */
    
  }
  
  
  
  
  
  
  

  /* result "read more" links */
  
  
  
  
  

  /* inline "About this program" detail panel */
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  
  

  
  
  
  
  
  
  
  

  @keyframes coPanelIn{from{opacity:0;transform:translateY(10px);}to{opacity:1;transform:none;}}

  @media(max-width:600px){
    
    /* tracks .co-quiz's padding above — see the .co-routeband comment */
    
    
    
    
    
    
    
  }
  

  /* Print / save → isolate the recommendation, hide the rest of the page */
  @media print{
    body [class*="jpicnav"], .jpic-footer, .jpt, .jpicm-overlay,
    .epx-overlay, .jpicc-overlay, .jpicn-overlay{display:none !important;}
    /* NB the `body ` ancestor above is load-bearing: js/jpic-nav.js puts
       `jpicnav-is-expanded` on <body>, so a bare [class*="jpicnav"]
       matched the body itself and printed a blank page. */
    body:has(#matcher) :is(.km-hero, .km-qnav, .km-journey, .km-why, .hx-explore, .km-stories, .lc-where, .lc-poi, .y-final-cta, .km-modal){display:none !important;}
    #matcher .km-center, .co-routeband, .co-agent-hint, .co-quiz-top, .co-quiz-bar, .co-quiz-steps{display:none !important;}
    #matcher{padding:0 !important;background:#fff !important;}
    
    
    
    
    body{background:#fff !important;}
  }