/* Jain Heritage School - Electronic City landing page */

        :root{
            --ink:#070b1c;
            --ink2:#0c1330;
            --navy:#001c54;
            --orange:#ffcf3a;
            --orange2:#ffb300;
            --green:#37d39a;
            --cyan:#39c7ff;
            --blue:#1565d8;
            --yellow:#f7b500;
            --cta:#FFB539; /* NNS gold */
            --cta-ink:#a06800; /* readable gold for accents on light backgrounds */
            --navy-ink:#0d1430; /* deep navy button fill */
            --finn-green:#13c99b; /* Finland Education Hub logo green */
            --finn-blue:#1e9fde; /* Finland Education Hub logo blue */
            --ease:cubic-bezier(.22,1,.36,1);
            --text:#e8ecf6;
            --muted:#9aa3c0;
            --glass:rgba(255,255,255,.055);
            --glass-line:rgba(255,255,255,.12);

            /* one spacing scale — every rhythm value on the site is a step of it */
            --sp-2xs:6px;
            --sp-xs:11px;
            --sp-s:16px;
            --sp-m:24px;
            --sp-l:clamp(30px,3vw,44px);
            --sp-xl:clamp(40px,4.5vw,64px);
            --sp-section:clamp(84px,6vw,128px);
            --measure:680px;

            /* TWO faces site-wide, and one accent.
               Headings -> Plus Jakarta Sans, unchanged. Body and all sub-content -> DM Sans:
               Google Sans itself is proprietary and never resolves in a browser, so leading
               the stack with it meant the fallback always won. DM Sans is the real, licensed,
               always-loading match, declared first so what's coded is what renders.
               --font-script is the ONLY exception and is used in exactly one place:
               the "Finnish K-12" phrase in the home-page banner. Do not spread it. */
            --font-display:"Plus Jakarta Sans", "Google Sans", "DM Sans", Arial, sans-serif;
            --font-sans:"DM Sans", "Google Sans", "Google Sans Text", "Product Sans", Arial, sans-serif;
            --font-script:"Caveat", "Segoe Script", cursive;
        }
        *{ box-sizing:border-box; }
        html{ scroll-behavior:smooth; overflow-x:clip; scrollbar-gutter:stable; font-family:var(--font-sans); }
        body{
            margin:0; background:var(--ink); color:var(--text);
            font-family:var(--font-sans);
            line-height:1.6; overflow-x:clip; -webkit-font-smoothing:antialiased;
        }
        h1,h2,h3,h4{ font-family:var(--font-display); margin:0; color:#fff; font-weight:700; letter-spacing:-.3px; }
        a{ color:inherit; text-decoration:none; }
        .wrap{ width:min(2400px,93vw); margin-inline:auto; }
        .grad-text{ color:var(--yellow); }
        .legacy .grad-text{ color:var(--yellow); }

        /* Aurora background */
        .aurora{ position:fixed; inset:-30%; z-index:0; pointer-events:none; filter:blur(80px); opacity:.55;
            background:
                radial-gradient(42% 42% at 18% 12%, rgba(247,181,0,.10), transparent 62%),
                radial-gradient(40% 40% at 84% 88%, rgba(0,28,84,.34), transparent 64%);
            animation:drift 18s ease-in-out infinite alternate;
        }
        @keyframes drift{ from{ transform:translate3d(0,0,0) scale(1); } to{ transform:translate3d(0,-4%,0) scale(1.12) rotate(6deg); } }
        .grid-lines{ position:fixed; inset:0; z-index:0; pointer-events:none; opacity:.4;
            background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.04) 1px,transparent 1px);
            background-size:64px 64px; mask-image:radial-gradient(circle at 50% 30%,#000,transparent 75%); }
        .layer{ position:relative; z-index:2; }

        /* Nav (white header) */
        nav.top{ position:sticky; top:0; z-index:50; backdrop-filter:blur(14px); background:rgba(255,255,255,.94); border-bottom:1px solid #e6ebf5; box-shadow:0 4px 20px rgba(0,28,84,.06); }
        .top-in{ display:flex; align-items:center; justify-content:space-between; padding:12px 0; gap:14px; }
        .logo{ display:flex; align-items:center; gap:12px; }
        .logo-img{ height:34px; width:auto; display:block; }
        @media(max-width:560px){ .logo-img{ height:28px; } }
        .nav-links{ display:flex; align-items:center; gap:24px; font-size:14.5px; font-weight:700; margin-left:auto; }
        .nav-links a:not(.pill){ color:#0c1330; }
        .nav-links a:not(.pill):hover,
        .nav-links a:not(.pill).active,
        .nav-links a:not(.pill)[aria-current="page"]{ color:var(--yellow); }
        .nav-actions{ display:flex; align-items:center; gap:12px; }
        .pill{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; gap:9px; padding:11px 24px; border:0; border-radius:100vw; background:var(--cta); color:var(--navy-ink); font-weight:800; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .pill:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 12px 30px rgba(255,181,57,.4); }

        /* Mobile menu — the text links collapse below 1080px (site-wide breakpoint,
           matched in jhs-shared.css so the Programmes dropdown stacks with them). */
        .nav-toggle{ display:none; align-items:center; justify-content:center; width:42px; height:42px; flex:none; padding:0; border:0; border-radius:12px; background:rgba(12,19,48,.07); cursor:pointer; }
        .nav-toggle .bar{ position:relative; }
        .nav-toggle .bar, .nav-toggle .bar::before, .nav-toggle .bar::after{ display:block; width:20px; height:2px; border-radius:2px; background:#0c1330; transition:transform .25s var(--ease), background .2s ease; }
        .nav-toggle .bar::before, .nav-toggle .bar::after{ content:""; position:absolute; left:0; }
        .nav-toggle .bar::before{ top:-6px; }
        .nav-toggle .bar::after{ top:6px; }
        nav.top.open .nav-toggle .bar{ background:transparent; }
        nav.top.open .nav-toggle .bar::before{ transform:translateY(6px) rotate(45deg); }
        nav.top.open .nav-toggle .bar::after{ transform:translateY(-6px) rotate(-45deg); }
        @media(max-width:1080px){
            .top-in{ flex-wrap:wrap; }
            .nav-toggle{ display:inline-flex; }
            .nav-links{ order:9; flex-basis:100%; margin-left:0; display:grid; gap:0;
                max-height:0; overflow:hidden; visibility:hidden;
                transition:max-height .32s var(--ease), visibility .32s; }
            .nav-links a:not(.pill){ display:block; padding:13px 2px; border-top:1px solid #e6ebf5; font-size:15px; }
            nav.top.open .nav-links{ max-height:min(68vh,440px); overflow-y:auto; visibility:visible; }
        }
        /* Phones: the lockup, the CTA and the burger have to share one row, and a
           full-width logo plus a labelled pill will not. The pill drops to its icon. */
        @media(max-width:620px){
            .top-in{ gap:8px; }
            .logo{ flex:0 1 auto; min-width:0; }
            .logo-img{ height:26px; max-width:52vw; object-fit:contain; object-position:left center; }
            .nav-actions{ gap:8px; flex:none; }
            .pill{ padding:11px 13px; }
            .pill .pill-label{ display:none; }
            .pill i{ font-size:15px; }
            .nav-toggle{ width:38px; height:38px; }
        }

        /* Hero — split banner: white textured (left) · full-bleed photo (right) */
        .hero{ position:relative; padding:40px 0 44px; overflow:hidden; background:#ffffff; }
        .hero::before{ content:""; position:absolute; top:0; bottom:0; left:0; right:50%; z-index:0; pointer-events:none;
            box-shadow:22px 0 60px -38px rgba(0,28,84,.14);
            background:
                radial-gradient(rgba(0,28,84,.06) 1.1px, transparent 1.5px) 0 0 / 20px 20px,
                #f5f8fc; }
        .hero-grid{ position:relative; z-index:1; display:grid; grid-template-columns:1.04fr .96fr; gap:56px; align-items:center; min-height:clamp(440px,36vw,720px); }
        .hero-eyebrow{ display:inline-flex; align-items:center; gap:9px; margin-bottom:24px; padding:9px 17px; border-radius:999px; font-size:12px; font-weight:800; letter-spacing:1.8px; text-transform:uppercase; color:var(--cta);
            background:rgba(255,255,255,.72);
            border:1px solid rgba(255,255,255,.85);
            box-shadow:0 10px 26px -10px rgba(0,28,84,.22), inset 0 1px 0 rgba(255,255,255,.9);
            -webkit-backdrop-filter:blur(14px) saturate(150%); backdrop-filter:blur(14px) saturate(150%); }
        .hero-eyebrow .dot{ width:7px;height:7px;border-radius:50%; background:var(--cta); box-shadow:0 0 0 4px rgba(255,181,57,.35); animation:pulse 2.4s infinite; }
        @keyframes pulse{ 50%{ box-shadow:0 0 0 8px rgba(255,181,57,0); } }
        .hero h1{ font-family:var(--font-display); font-size:clamp(30px,3.7vw,70px); line-height:1.10; letter-spacing:-1px; margin:0; color:#001c54; }
        .hero .grad-text{ color:var(--cta); }
        .hero .fin-grad{ display:inline-flex; align-items:baseline; white-space:nowrap; }
        /* the one script accent on the whole site — banner only, see --font-script */
        .hero .fin-rest{ display:inline-block; color:var(--finn-green); -webkit-text-fill-color:var(--finn-green);
            font-family:var(--font-script); font-weight:700; font-size:1.22em; line-height:.9; letter-spacing:0; padding-right:.06em; }
        .hero .lead{ max-width:36em; margin:22px 0 0; color:#3b466a; font-size:clamp(14.5px,1.25vw,21px); }
        .hero-cta{ display:flex; gap:14px; margin:30px 0 0; flex-wrap:wrap; }
        .btn-primary{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; gap:11px; padding:16px 32px; border:0; border-radius:100vw; background:var(--cta); color:var(--navy-ink); font-weight:800; font-size:16px; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .btn-primary:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 38px rgba(255,181,57,.4); }
        .btn-ghost{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; gap:11px; padding:16px 32px; border:0; border-radius:100vw; background:transparent; color:var(--navy); font-weight:800; font-size:16px; box-shadow:inset 0 0 0 1.6px rgba(0,28,84,.26); cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .btn-ghost:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 14px 34px rgba(10,20,50,.22); }
        .hero-trust{ display:flex; align-items:center; margin-top:30px; padding-top:24px; border-top:1px solid rgba(0,28,84,.14); }
        .hero-trust .ts{ padding-right:24px; margin-right:24px; border-right:1px solid rgba(0,28,84,.14); }
        .hero-trust .ts:last-child{ border-right:none; padding-right:0; margin-right:0; }
        .hero-trust .n{ font-family:var(--font-display); font-weight:700; font-size:clamp(23px,2.4vw,40px); color:#001c54; line-height:1; }
        .hero-trust .l{ font-size:12.5px; color:#5a6486; margin-top:7px; }

        /* Hero visual — full-bleed photo on the right half */
        .hero-figure{ position:absolute; top:0; right:0; bottom:0; left:50%; z-index:0; margin:0; overflow:hidden; }
        .hero-figure img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; transform:scale(1); transition:transform 1.4s ease; }
        .hero-figure:hover img{ transform:scale(1.04); }
        .hero-figure::after{ content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(100deg, #ffffff 0%, rgba(255,255,255,0) 12%); }
        .hero-pin{ position:absolute; top:24px; left:34px; z-index:3; display:inline-flex; align-items:center; gap:8px; padding:8px 14px; border-radius:30px; background:rgba(12,19,48,.55); border:1px solid rgba(255,255,255,.18); backdrop-filter:blur(10px); font-size:12.5px; font-weight:600; color:#fff; }
        .hero-pin i{ color:var(--yellow); }
        .hero-float{ position:absolute; left:28px; bottom:28px; z-index:3; display:flex; align-items:center; gap:14px; padding:15px 20px; border-radius:16px; background:#001c54; border:1px solid rgba(255,255,255,.14); box-shadow:0 22px 46px rgba(0,28,84,.4); }
        .hero-float .ic{ width:44px;height:44px; border-radius:12px; display:grid; place-items:center; background:var(--yellow); color:#0c1330; font-size:17px; }
        .hero-float .ft b{ display:block; font-family:var(--font-display); font-weight:700; color:#fff; font-size:17px; line-height:1.1; }
        .hero-float .ft span{ font-size:12px; color:var(--muted); }
        @media(max-width:900px){
            .hero::before{ right:0; box-shadow:none; }
            .hero-grid{ grid-template-columns:1fr; gap:32px; }
            .hero-figure{ position:relative; top:auto; right:auto; bottom:auto; left:auto; height:auto; aspect-ratio:16/10; margin:34px 4vw 0; border-radius:18px; }
            .hero-figure::after{ background:none; }
            .hero-pin, .hero-float{ display:none; }
        }

        /* Section — the vertical rhythm is declared once, here, in --sp-* steps.
           Nothing below this block may re-declare .kicker / .head h2 spacing. */
        section{ padding:var(--sp-section) 0; }
        /* The pagehead already ends on a hard accent rule — a full section-top gap
           after that reads as two separators stacked with a void between them. */
        .pagehead + section{ padding-top:clamp(2.5rem,5vw,4rem); }
        .head{ max-width:var(--measure); margin:0 auto var(--sp-xl); text-align:center; }
        .kicker{ display:inline-block; font-size:12.5px; font-weight:800; letter-spacing:.19em; text-transform:uppercase; color:var(--yellow); margin:0 0 var(--sp-s); }
        .section-light .kicker{ color:var(--yellow); }
        .legacy .kicker{ color:var(--yellow); }
        .head h2{ font-size:clamp(30px,4vw,66px); line-height:1.07; letter-spacing:-.03em; margin:0; }
        .head h2 + p{ margin-top:var(--sp-m); }
        .head p{ color:var(--muted); margin:0 auto; }
        .head > :last-child{ margin-bottom:0; }

        /* Light "Why" section — bento photo cards on a white band */
        .section-light{ position:relative; z-index:2; background:#eef3fb;
            background-image:radial-gradient(rgba(0,28,84,.05) 1px, transparent 1px);
            background-size:22px 22px; }
        .section-light .head h2{ color:var(--navy); }
        .section-light .head p{ color:#566080; }
        .bento{ display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:minmax(clamp(230px,17vw,330px),1fr); gap:20px; }
        .cell{ position:relative; display:flex; align-items:flex-end; overflow:hidden; border-radius:22px; min-height:240px; box-shadow:0 20px 44px -26px rgba(0,28,84,.4); transition:transform .35s, box-shadow .35s; }
        .cell:hover{ transform:translateY(-6px); box-shadow:0 32px 58px -26px rgba(0,28,84,.5); }
        .cell-bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0; transition:transform .5s ease; }
        .cell:hover .cell-bg{ transform:scale(1.07); }
        .cell-veil{ position:absolute; inset:0; z-index:1; background:linear-gradient(180deg, rgba(6,10,28,0) 8%, rgba(6,10,28,.42) 42%, rgba(6,10,28,.82) 78%, rgba(6,10,28,.95) 100%); }
        .cell-in{ position:relative; z-index:2; padding:26px; }
        .cell .ic{ width:48px;height:48px;border-radius:13px; display:grid;place-items:center; font-size:20px; margin-bottom:14px; color:#0c1330; background:var(--yellow); }
        .cell h3{ font-size:21px; color:#fff; margin:0 0 8px; letter-spacing:-.2px; text-shadow:0 2px 14px rgba(4,8,22,.6); }
        .cell p{ color:rgba(255,255,255,.88); font-size:14px; margin:0; }
        .c-wide{ grid-column:span 4; } .c-mid{ grid-column:span 3; } .c-sm{ grid-column:span 2; }
        .cell.feature .big{ font-family:"Plus Jakarta Sans", sans-serif; font-weight:800; font-size:clamp(30px,3.6vw,46px); line-height:1; color:#fff; letter-spacing:-.5px; text-shadow:0 3px 18px rgba(4,8,22,.6); }
        @media(max-width:880px){ .bento{ grid-template-columns:repeat(2,1fr); } .c-wide,.c-mid,.c-sm{ grid-column:span 2; } }

        /* Brand-word marquee — type sliding inside the cell, clipped by it.
           Opacity cycles in threes, never in twos: each row repeats its word list
           twice for the -50% loop, so a two-step alternation would hand a word a
           different opacity on its second copy and the wrap would visibly flicker. */
        .wcell{ align-items:center; justify-content:center; text-align:center; }
        .wcell, .wcell:hover{ background:linear-gradient(160deg,#ffffff,#f2f6fc); box-shadow:inset 0 0 0 1px rgba(255,255,255,.8); transform:none;
            border:1px solid rgba(0,28,84,.10); }
        .wmarq{ position:absolute; inset:0; z-index:1; display:grid; align-content:center; gap:clamp(4px,.8vw,12px); overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); }
        .wmarq-row{ display:flex; width:max-content; will-change:transform; }
        .wmarq-row span{ flex:none; white-space:nowrap; padding-inline:.62em;
            font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; letter-spacing:-1px;
            font-size:clamp(26px,3.2vw,44px); line-height:1.1; color:var(--navy); opacity:.24; }
        /* bright / dim / mid, and each row peaks on a different step so the lit
           words fall diagonally instead of stacking in a column */
        .wmarq-row--a span:nth-child(3n+1){ opacity:1; }
        .wmarq-row--a span:nth-child(3n+2){ opacity:.13; }
        .wmarq-row--a span:nth-child(3n+3){ opacity:.24; }
        .wmarq-row--b span{ color:var(--yellow); }
        .wmarq-row--b span:nth-child(3n+1){ opacity:.22; }
        .wmarq-row--b span:nth-child(3n+2){ opacity:1; }
        .wmarq-row--b span:nth-child(3n+3){ opacity:.36; }
        .wmarq-row--c span:nth-child(3n+1){ opacity:.24; }
        .wmarq-row--c span:nth-child(3n+2){ opacity:.13; }
        .wmarq-row--c span:nth-child(3n+3){ opacity:1; }
        /* each row holds its word list twice, so -50% is a seamless loop */
        .wmarq-row--a{ animation:wMarq 26s linear infinite; }
        .wmarq-row--b{ animation:wMarq 34s linear infinite reverse; }
        .wmarq-row--c{ animation:wMarq 30s linear infinite; }
        @keyframes wMarq{ from{ transform:translateX(0); } to{ transform:translateX(-50%); } }
        @media (prefers-reduced-motion: reduce){ .wmarq-row{ animation:none!important; } }
        /* Phones: 44px type in a 240px box leaves two half-words behind a hard mask.
           Smaller and given air, so it reads as a texture rather than as clipped copy.
           Row gap and word gap are kept within a few px of each other — the em-based
           inline padding scales with the type while a fixed row gap does not, which is
           what made the rows look glued together while the words drifted apart. */
        @media(max-width:880px){
            .wmarq{ gap:clamp(16px,4.4vw,24px);
                -webkit-mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent);
                        mask-image:linear-gradient(90deg,transparent,#000 17%,#000 83%,transparent); }
            .wmarq-row span{ font-size:clamp(17px,4.4vw,23px); letter-spacing:.01em; padding-inline:.46em; }
        }
        @media(max-width:560px){
            .wmarq{ gap:clamp(18px,5.6vw,24px); }
            .wmarq-row span{ font-size:clamp(16px,5.2vw,22px); letter-spacing:.02em; padding-inline:.44em; }
        }
        @media(max-width:560px){ .bento{ grid-template-columns:1fr; } }

        /* Philosophy steps */
        .steps{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; }
        .step{ padding:30px 24px; border-radius:20px; border:1px solid var(--glass-line); background:var(--glass); position:relative; }
        .step .num{ font-family:"Plus Jakarta Sans"; font-weight:800; font-size:15px; width:42px;height:42px; border-radius:12px; display:grid;place-items:center; background:var(--yellow); color:#0c1330; margin-bottom:18px; }
        .step h3{ font-size:20px; margin:0 0 8px; }
        .step p{ color:var(--muted); font-size:13.5px; margin:0; }
        @media(max-width:880px){ .steps{ grid-template-columns:1fr 1fr; } }

        /* Vision & Mission (dark) */
        /* Vision & Mission — a light, cool band; the page takes a breath between the
           dark sections, and the mission is broken into its three actual promises
           instead of sitting as one paragraph nobody finishes. */
        /* clip, not hidden: overflow:hidden would make this a scroll container and
           silently kill the sticky aside and the panel stack below */
        .vision-sec{ overflow:clip; }
        .vision-sec::before, .vision-sec::after{ content:""; position:absolute; pointer-events:none; z-index:0; }
        .vision-sec::before{ inset:-25% -12% auto -18%; height:78%;
            background:radial-gradient(48% 100% at 22% 0%, rgba(30,159,222,.16), transparent 68%); }
        .vision-sec::after{ inset:auto -18% -30% -12%; height:70%;
            background:radial-gradient(48% 100% at 78% 100%, rgba(19,201,155,.16), transparent 68%); }
        .vm-in{ position:relative; z-index:1; display:grid;
            grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr); gap:clamp(2rem,5vw,5rem); align-items:start; }

        .vm-aside{ position:sticky; top:118px; }
        .vm-aside h2{ color:var(--navy); font-size:clamp(30px,3.6vw,56px); line-height:1.06; letter-spacing:-.03em; margin:16px 0 0; }
        .vm-lede{ color:#566080; font-size:clamp(15.5px,1.05vw,17.5px); line-height:1.72; margin:24px 0 0; max-width:34ch; }

        /* a compass that actually turns — the section is called Our Compass */
        .vm-compass{ position:relative; width:min(286px,80%); aspect-ratio:1; margin:clamp(30px,4.5vw,52px) 0 0; display:grid; place-items:center; }
        .vm-compass span{ position:absolute; }
        .vm-ring{ inset:0; border-radius:50%; border:1px dashed rgba(0,28,84,.22); animation:vmSpin 44s linear infinite; }
        .vm-ring--2{ inset:15%; border-style:solid; border-color:rgba(30,159,222,.3); animation-duration:30s; animation-direction:reverse; }
        .vm-sweep{ inset:7%; border-radius:50%;
            background:conic-gradient(from 0deg, transparent 0 74%, rgba(30,159,222,.32) 82%, transparent 89%);
            animation:vmSpin 17s linear infinite; }
        .vm-core{ position:relative; width:32%; aspect-ratio:1; border-radius:50%; display:grid; place-items:center;
            font-size:clamp(24px,2.7vw,34px); color:#fff; background:linear-gradient(150deg,#1e9fde,#13c99b);
            box-shadow:0 22px 44px -18px rgba(30,159,222,.75); }
        @keyframes vmSpin{ to{ transform:rotate(360deg); } }

        /* the two panels stack: Mission is later in the DOM, so it rides up over Vision.
           block flow, not grid — a sticky grid item is trapped in its own row's area
           and would have no travel at all */
        .vm-body{ padding-bottom:clamp(2rem,10vh,6rem); }
        .vm-panel{ position:sticky; top:calc(118px + var(--i,0) * 16px); }
        .vm-panel + .vm-panel{ margin-top:clamp(16px,2vw,24px); }
        .vm-panel{ position:relative; overflow:hidden; padding:clamp(26px,3vw,40px); border-radius:26px;
            background:#fff; border:1px solid #e4ebf7;
            box-shadow:0 1px 2px rgba(12,19,48,.04), 0 26px 54px -34px rgba(0,28,84,.34);
            transition:transform .4s var(--ease), box-shadow .4s var(--ease), border-color .35s ease; }
        .vm-panel::before{ content:""; position:absolute; inset:0 auto 0 0; width:5px; background:linear-gradient(180deg,#1e9fde,#13c99b); }
        .vm-panel--m::before{ background:linear-gradient(180deg,#13c99b,#1e9fde); }
        .vm-panel:hover{ transform:translateY(-6px); border-color:#cfdef4;
            box-shadow:0 1px 2px rgba(12,19,48,.04), 0 42px 72px -34px rgba(0,28,84,.42); }
        .vm-tag{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
            background:rgba(30,159,222,.12); color:#12678f; font-size:11.5px; font-weight:800; letter-spacing:.14em; text-transform:uppercase; }
        .vm-tag--m{ background:rgba(19,201,155,.14); color:#0b7359; }
        .vm-quote{ margin:20px 0 0; color:var(--navy); font-family:"Plus Jakarta Sans",sans-serif; font-weight:800;
            font-size:clamp(19px,1.8vw,26px); line-height:1.38; letter-spacing:-.02em; }
        .vm-quote em{ font-style:normal; color:var(--yellow); }

        .vm-steps{ list-style:none; margin:20px 0 0; padding:0; }
        .vm-steps li{ display:grid; grid-template-columns:auto 1fr; gap:2px 18px; padding:18px 0; }
        .vm-steps li + li{ border-top:1px solid #eef2f9; }
        .vm-steps li:last-child{ padding-bottom:0; }
        .vm-n{ grid-row:1/span 2; align-self:start; width:40px; height:40px; border-radius:13px; display:grid; place-items:center;
            font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:13px;
            color:#0b7359; background:rgba(19,201,155,.14); }
        .vm-steps h3{ margin:0; color:var(--navy); font-size:16.5px; letter-spacing:-.2px; }
        .vm-steps p{ margin:0; color:#566080; font-size:14.6px; line-height:1.75; }
        @media(max-width:980px){ .vm-in{ grid-template-columns:1fr; } .vm-aside{ position:static; } }
        @media(max-width:760px){ .vm-panel{ position:static; } .vm-body{ padding-bottom:0; } }
        @media (prefers-reduced-motion: reduce){ .vm-ring,.vm-sweep{ animation:none!important; } }

        /* Legacy — heritage band on white texture */
        .legacy{ position:relative; overflow:hidden; background:#ffffff;
            background-image:radial-gradient(rgba(0,28,84,.05) 1.1px, transparent 1.5px); background-size:22px 22px; }
        .legacy::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.7;
            background:radial-gradient(42% 60% at 90% 4%, rgba(247,181,0,.10), transparent 60%), radial-gradient(46% 60% at 4% 98%, rgba(0,28,84,.06), transparent 60%); }
        .legacy::after{ content:"EST. 1990"; position:absolute; right:-2%; top:6px; z-index:0; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:clamp(70px,12vw,168px); letter-spacing:6px; color:rgba(0,28,84,.035); pointer-events:none; white-space:nowrap; }
        .legacy .wrap{ position:relative; z-index:2; }
        .legacy-top{ display:grid; grid-template-columns:.92fr 1.08fr; gap:64px; align-items:center; }

        /* image collage */
        .legacy-collage{ position:relative; padding:0 28px 30px 0; }
        .legacy-collage .frame{ position:absolute; left:-14px; top:18px; right:42px; bottom:-14px; border:1.5px solid rgba(247,181,0,.4); border-radius:20px; z-index:0; }
        .legacy-collage .img-main{ position:relative; z-index:1; margin:0; border-radius:18px; overflow:hidden; aspect-ratio:4/4.3; box-shadow:0 40px 78px -40px rgba(0,28,84,.5); border:1px solid #eef1f7; }
        .legacy-collage .img-main img{ width:100%; height:100%; object-fit:cover; display:block; }
        .legacy-collage .img-sub{ position:absolute; right:0; bottom:0; z-index:2; width:52%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; border:6px solid #ffffff; box-shadow:0 26px 50px -22px rgba(0,28,84,.4); }
        .legacy-collage .img-sub img{ width:100%; height:100%; object-fit:cover; display:block; }
        .legacy-seal{ position:absolute; left:-26px; top:34px; z-index:3; width:104px;height:104px; border-radius:50%;
            background:var(--yellow); color:#001c54;
            display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center;
            box-shadow:0 18px 38px -14px rgba(247,181,0,.5); border:4px solid #ffffff; }
        .legacy-seal .sy{ font-family:"Plus Jakarta Sans"; font-weight:800; font-size:27px; line-height:1; }
        .legacy-seal .ss{ font-size:8.5px; letter-spacing:1.6px; text-transform:uppercase; font-weight:700; margin-top:3px; }

        /* content */
        .legacy-content .kicker{ color:var(--cta); }
        .legacy-content h2{ color:var(--navy); font-size:clamp(28px,3.4vw,44px); line-height:1.12; margin:14px 0 22px; }
        .legacy-quote{ position:relative; padding-left:30px; margin:0 0 22px; }
        .legacy-quote::before{ content:"\201C"; position:absolute; left:-6px; top:-18px; font-family:var(--font-display); font-size:74px; line-height:1; color:rgba(247,181,0,.32); }
        .legacy-quote p{ font-style:italic; font-weight:600; color:var(--navy); font-size:clamp(17px,1.7vw,21px); line-height:1.55; margin:0; }
        .legacy-attrib{ display:flex; align-items:center; gap:14px; padding-left:30px; margin-bottom:30px; }
        .legacy-attrib .bar{ width:34px; height:2px; background:var(--cta); }
        .legacy-attrib b{ color:#0c1330; font-weight:700; font-size:15px; display:block; }
        .legacy-attrib span{ color:#6a7390; font-size:13px; }

        /* milestone timeline */
        .legacy-timeline{ display:grid; grid-template-columns:repeat(4,1fr); gap:22px; padding-left:30px; }
        .milestone{ position:relative; padding-top:20px; }
        .milestone::before{ content:""; position:absolute; left:0; top:5px; width:10px;height:10px; border-radius:50%; background:var(--yellow); box-shadow:0 0 0 4px rgba(247,181,0,.25); }
        .milestone::after{ content:""; position:absolute; left:16px; top:9px; right:-10px; height:1px; background:#e3e8f2; }
        .milestone:last-child::after{ display:none; }
        .milestone .my{ font-family:"Plus Jakarta Sans"; font-weight:800; color:#0c1330; font-size:16px; }
        .milestone .mt{ color:#6a7390; font-size:12.5px; line-height:1.4; margin-top:5px; }

        @media(max-width:860px){
            .legacy-top{ grid-template-columns:1fr; gap:46px; }
            .legacy-collage{ max-width:440px; }
            .legacy-quote, .legacy-attrib, .legacy-timeline{ padding-left:0; }
            .legacy-timeline{ grid-template-columns:1fr 1fr; gap:24px; }
            .milestone::after{ display:none; }
        }
        @media(max-width:560px){
            .legacy::after{ font-size:46px; letter-spacing:3px; right:16px; left:auto; top:auto; bottom:132px; color:rgba(0,28,84,.10); }
            .legacy-quote{ padding-left:30px; }
            .legacy-quote::before{ font-size:60px; top:-12px; }
            .legacy-timeline{ gap:16px 24px; }
            .milestone{ padding-top:0; padding-left:22px; }
            .milestone::before{ top:3px; left:0; }
            /* fade milestones in place so the section's overflow never clips the bottom row */
            .legacy .milestone.reveal{ transform:none; }
        }

        /* Gallery (light) */
        .gallery-grid{ display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:168px; gap:16px; }
        .gallery-item{ position:relative; overflow:hidden; border-radius:16px; box-shadow:0 16px 34px -22px rgba(0,28,84,.4); }
        .gallery-item img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .6s ease; }
        .gallery-item:hover img{ transform:scale(1.08); }
        .gallery-item::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,transparent 50%,rgba(0,28,84,.4)); opacity:0; transition:opacity .4s; }
        .gallery-item:hover::after{ opacity:1; }
        .gallery-item.big{ grid-column:span 2; grid-row:span 2; }
        @media(max-width:760px){ .gallery-grid{ grid-template-columns:repeat(2,1fr); } .gallery-item.big{ grid-column:span 2; grid-row:span 1; } }

        /* Apply split */
        .apply-grid{ display:grid; grid-template-columns:.85fr 1.15fr; gap:36px; align-items:stretch; }
        .apply-info{ padding:38px; border-radius:24px; background:rgba(255,255,255,.05); border:1px solid var(--glass-line); }
        .apply-info h2{ font-size:clamp(26px,3vw,38px); line-height:1.1; }
        .apply-info p{ color:var(--text); opacity:.85; margin:16px 0 26px; }
        .info-list{ list-style:none; padding:0; margin:0; display:grid; gap:16px; }
        .info-list li{ display:flex; gap:14px; align-items:flex-start; }
        .info-list .ii{ width:40px;height:40px;border-radius:11px; background:rgba(255,255,255,.1); display:grid;place-items:center; color:var(--yellow); flex:0 0 auto; }
        .info-list b{ color:#fff; font-size:15px; display:block; }
        .info-list span{ color:var(--muted); font-size:13.5px; }

        /* Whitefield pattern: sticky filter rail + job list, not a filter bar on top.
           The rail stays in view while the list scrolls, and "Track Application"
           lives where a returning candidate actually looks \u2014 next to the filters,
           not in a separate section further down the page. */
        .jhs-jobs{ display:grid; grid-template-columns:272px 1fr; gap:28px; align-items:start; }
        .jhs-filters{ position:sticky; top:96px; padding:26px; border-radius:22px; background:#fff; border:1px solid #e9eff7; box-shadow:0 22px 46px -30px rgba(12,19,48,.16); }
        .jhs-filters h5{ margin:0 0 18px; color:var(--navy); font-size:17px; font-weight:800; }
        .jhs-field{ display:flex; flex-direction:column; gap:8px; margin-bottom:16px; }
        .jhs-field label{ font-size:11px; font-weight:700; color:#7b86a0; text-transform:uppercase; letter-spacing:.06em; }
        .jhs-field input,
        .jhs-field select{ width:100%; padding:12px 14px; border-radius:12px; border:1px solid #e5ecf6; background:#f9fbff; color:#0c1330; font-size:14px; }
        .jhs-count{ margin:14px 0 0; color:#4a546b; font-size:13px; font-weight:700; }
        .jhs-filters hr{ margin:18px 0; border:none; border-top:1px solid #e9eff7; }
        .jhs-applied-label{ margin:0 0 10px; color:#7b86a0; font-size:13px; }
        .jhs-track{ display:flex; align-items:center; justify-content:center; gap:10px; padding:13px 16px; border-radius:12px; background:var(--navy); color:#fff; font-weight:700; font-size:14px; text-decoration:none; }
        .jhs-track:hover{ background:#002a72; }

        .jhs-list{ display:grid; gap:16px; }
        .jhs-list .loading,
        .jhs-list .jempty{ color:#0c1330; margin:0; }
        .jempty{ padding:30px; border-radius:22px; background:#f9fbff; border:1px solid #e7eef8; text-align:center; }
        .jempty h4{ margin:0 0 8px; color:var(--navy); font-size:19px; }
        .jempty p{ margin:0; color:#4a546b; line-height:1.8; }
        .jempty a{ color:#1565d8; font-weight:700; }
        .jcard{ padding:22px 24px; border-radius:20px; background:#fff; border:1px solid #e9eff7; box-shadow:0 18px 40px -30px rgba(12,19,48,.16); cursor:pointer; transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
        .jcard:hover{ transform:translateY(-2px); box-shadow:0 26px 50px -30px rgba(12,19,48,.22); border-color:#c9d8f2; }
        .jcard h4{ margin:0 0 4px; font-size:19px; color:var(--navy); font-weight:800; }
        .jcard .meta{ margin:0; color:#7b86a0; font-size:13.5px; display:flex; align-items:center; gap:6px; }
        .jcard .meta i{ font-size:12px; }
        .jcard .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-top:12px; }
        .jcard .badges span{ display:inline-block; padding:5px 12px; border-radius:999px; background:#eef3fb; color:var(--navy); font-size:12px; font-weight:700; }
        .jcard .badges span.jopenings{ background:rgba(55,211,154,.14); color:#159168; }
        .jcard .badges span.jdeadline{ background:rgba(247,181,0,.16); color:#9a6a00; }
        .jcard .row2{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:16px; padding-top:16px; border-top:1px solid #f0f3f9; }
        .jcard .jview{ color:#1565d8; font-weight:700; font-size:13.5px; display:inline-flex; align-items:center; gap:8px; }
        .jbtn{ padding:10px 20px; border-radius:100px; background:var(--yellow); color:#0c1330; font-weight:800; font-size:13.5px; text-decoration:none; white-space:nowrap; }
        .jbtn:hover{ background:#e5a500; }

        /* Job description modal */
        .jd-overlay{ position:fixed; inset:0; z-index:1200; background:rgba(6,12,32,.55); display:none; align-items:center; justify-content:center; padding:24px; }
        .jd-overlay.open{ display:flex; }
        .jd-panel{ position:relative; width:min(720px,100%); max-height:86vh; background:#fff; border-radius:24px; overflow:hidden; display:flex; flex-direction:column; }
        .jd-close{ position:absolute; top:14px; right:18px; border:0; background:none; font-size:28px; line-height:1; color:#8a93ab; cursor:pointer; }
        .jd-close:hover{ color:#0c1330; }
        #jdBody{ overflow-y:auto; padding:38px 34px 32px; }
        #jdBody h2{ margin:0 0 6px; color:var(--navy); font-size:26px; }
        #jdBody .jdmeta{ margin:0 0 18px; color:#7b86a0; font-size:14px; }
        #jdBody .badges{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:22px; }
        #jdBody .badges span{ display:inline-block; padding:6px 14px; border-radius:999px; background:#eef3fb; color:var(--navy); font-size:12.5px; font-weight:700; }
        #jdBody .badges span.jopenings{ background:rgba(55,211,154,.14); color:#159168; }
        #jdBody .badges span.jdeadline{ background:rgba(247,181,0,.16); color:#9a6a00; }
        #jdBody p.jdesc{ color:#45516f; line-height:1.85; margin:0 0 22px; }
        #jdBody h6{ margin:22px 0 10px; color:#9a7200; text-transform:uppercase; letter-spacing:.08em; font-size:12px; font-weight:800; }
        #jdBody ul{ margin:0; padding-left:20px; color:#45516f; line-height:1.8; }
        #jdBody .jdapply{ display:inline-flex; margin-top:26px; padding:14px 26px; border-radius:100px; background:var(--yellow); color:#0c1330; font-weight:800; text-decoration:none; }

        @media(max-width:960px){ .jhs-jobs{ grid-template-columns:1fr; } .jhs-filters{ position:static; } }

        .field{ display:flex; flex-direction:column; gap:8px; margin-bottom:18px; }
        .field label{ font-size:13px; font-weight:700; color:#0c1330; }
        .field input,
        .field select,
        .field textarea{ width:100%; padding:14px 16px; border-radius:14px; border:1px solid #dfe4ef; background:#fff; color:#0c1330; font-size:15px; }
        .field textarea{ min-height:140px; resize:vertical; }

        .glass-form{ padding:36px; border-radius:24px; background:var(--glass); border:1px solid var(--glass-line); backdrop-filter:blur(12px); }
        .glass-form h3{ font-size:23px; margin:0 0 4px; }
        .glass-form .fsub{ color:var(--muted); font-size:14px; margin:0 0 22px; }
        .gf{ margin-bottom:15px; }
        .gf label{ display:block; font-size:12.5px; font-weight:600; color:var(--text); margin-bottom:7px; }
        .gf .req{ color:var(--cta-ink); }
        .gf input,.gf select,.gf textarea{ width:100%; padding:13px 15px; border-radius:11px; border:1px solid var(--glass-line); background:rgba(255,255,255,.04); color:#fff; font-family:inherit; font-size:14.5px; transition:border-color .2s, box-shadow .2s; }
        .gf input::placeholder,.gf textarea::placeholder{ color:#6f7896; }
        .gf input:focus,.gf select:focus,.gf textarea:focus{ outline:none; border-color:#f7b500; box-shadow:0 0 0 3px rgba(247,181,0,.18); }
        .gf-locked{ display:flex; align-items:center; gap:9px; padding:13px 15px; border-radius:11px; border:1px solid var(--glass-line); background:rgba(255,255,255,.04); color:#fff; font-weight:700; font-size:14px; }
        .gf-locked i{ color:var(--yellow); }
        .gf select option{ background:var(--ink2); color:#fff; }
        .gf-row{ display:grid; grid-template-columns:1fr 1fr; gap:15px; }
        .gf-consent{ display:flex; gap:10px; align-items:flex-start; font-size:12.5px; color:var(--muted); margin:6px 0 18px; }
        .gf-consent input{ margin-top:3px; }
        .gf-submit{ position:relative; overflow:hidden; z-index:0; width:100%; border:0; cursor:pointer; padding:17px; border-radius:100vw; background:var(--cta); color:var(--navy-ink); font-family:"Plus Jakarta Sans"; font-weight:800; font-size:16px; display:flex; align-items:center; justify-content:center; gap:11px; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .gf-submit:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 38px rgba(255,181,57,.4); }
        .gf-note{ text-align:center; font-size:12px; color:var(--muted); margin:14px 0 0; }
        .gf-note a{ color:var(--cta-ink); font-weight:700; }
        .gf-msg{ display:none; margin-top:14px; padding:13px 16px; border-radius:11px; font-size:14px; font-weight:600; }
        .gf-msg.ok{ display:block; background:rgba(55,211,154,.14); color:var(--green); border:1px solid rgba(55,211,154,.4); }
        .gf-msg.err{ display:block; background:rgba(255,90,70,.14); color:#ff8f7e; border:1px solid rgba(255,90,70,.4); }
        @media(max-width:880px){ .apply-grid{ grid-template-columns:1fr; } .gf-row{ grid-template-columns:1fr; } }

        /* Apply section on a light textured band (navy info card + white form) */
        .apply-sec .apply-info{ background:#0c1330; border-color:rgba(255,255,255,.10); }
        .apply-sec .glass-form{ background:#fff; border:1px solid #e3e9f5; backdrop-filter:none; box-shadow:0 26px 54px -30px rgba(0,28,84,.4); }
        .apply-sec .glass-form h3{ color:var(--navy); }
        .apply-sec .glass-form .fsub{ color:#566080; }
        .apply-sec .gf label{ color:#0c1330; }
        .apply-sec .gf input,.apply-sec .gf select,.apply-sec .gf textarea{ background:#f7f9fd; border:1px solid #dde4f1; color:#0c1330; }
        .apply-sec .gf-locked{ background:#f7f9fd; border-color:#dde4f1; color:#0c1330; }
        .apply-sec .gf input::placeholder,.apply-sec .gf textarea::placeholder{ color:#9aa3bd; }
        .apply-sec .gf select option{ background:#fff; color:#0c1330; }
        .apply-sec .gf-consent{ color:#566080; }
        .apply-sec .gf-note{ color:#566080; }

        /* Unified form typography — every form uses the site body face */
        #admissionForm,
        #admissionForm *:not([class*="fa-"]){
            font-family:var(--font-sans) !important;
        }

        /* Scroll reveal */
        @media (prefers-reduced-motion: no-preference){
            .reveal{ opacity:0; transform:translateY(42px); transition:opacity .7s ease, transform .8s cubic-bezier(.22,.61,.36,1); will-change:opacity, transform; }
            .reveal.from-left{ transform:translateX(-40px); }
            .reveal.from-right{ transform:translateX(40px); }
            .reveal.is-in{ opacity:1; transform:none; }
        }
        /* Mobile only: slide-in vertically (the desktop layout is zoom-scaled and clips X overflow, so it keeps the left/right slides) */
        @media (prefers-reduced-motion: no-preference) and (max-width: 1023px){
            .reveal.from-left, .reveal.from-right{ transform:translateY(42px); }
        }

        /* Footer (textured, distinctive) */
        .site-foot{ position:relative; background-color:#061735;
            background-image:radial-gradient(rgba(255,255,255,.05) 1px, transparent 1.5px); background-size:22px 22px; }
        .site-foot::before{ content:""; position:absolute; inset:0; pointer-events:none;
            background:
                radial-gradient(55% 70% at 88% 6%, rgba(247,181,0,.08), transparent 60%),
                radial-gradient(50% 62% at 6% 98%, rgba(21,101,216,.12), transparent 62%),
                radial-gradient(125% 95% at 50% 0%, transparent 52%, rgba(2,9,26,.78) 100%); }
        .foot-cta{ position:relative; z-index:2; overflow:hidden; margin-top:-14px; margin-bottom:84px; padding:46px 48px; border-radius:26px;
            background:linear-gradient(120deg,var(--ink2),var(--navy)); box-shadow:0 24px 48px -32px rgba(0,0,0,.6); border:1px solid rgba(255,255,255,.10);
            display:flex; align-items:center; justify-content:space-between; gap:26px; flex-wrap:wrap; }
        .foot-cta::before{ content:""; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.5;
            background-image:radial-gradient(rgba(255,255,255,.22) 1px, transparent 1.4px); background-size:16px 16px;
            -webkit-mask-image:linear-gradient(105deg,#000 8%, transparent 64%); mask-image:linear-gradient(105deg,#000 8%, transparent 64%); }
        .foot-cta > *{ position:relative; z-index:1; }
        .foot-cta h3{ color:#fff; font-size:clamp(23px,3vw,34px); margin:0; line-height:1.12; }
        .foot-cta p{ color:rgba(255,255,255,.85); margin:8px 0 0; font-weight:600; font-size:16.5px; }
        .foot-cta .btn-w{ position:relative; overflow:hidden; z-index:1; display:inline-flex; align-items:center; gap:11px; background:var(--cta); color:var(--navy-ink); font-weight:800; padding:16px 32px; border:0; border-radius:100vw; font-size:16px; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .foot-cta .btn-w:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 38px rgba(255,181,57,.4); }
        .foot-main{ position:relative; z-index:2; display:grid; grid-template-columns:1.8fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:44px; }
        .foot-brand .logo-img{ width:160px; height:auto; }
        .foot-brand p{ color:rgba(255,255,255,.72); font-size:15.5px; margin:18px 0 22px; max-width:32em; line-height:1.75; }
        .foot-social{ display:flex; gap:11px; }
        .foot-social a{ width:42px;height:42px; border-radius:12px; display:grid;place-items:center; color:#fff; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.12); transition:transform .25s, background .25s, color .25s; }
        .foot-social a:hover{ background:var(--yellow); color:#0c1330; transform:translateY(-3px); }
        /* Finland → India: the same motif used on the two stage pages, folded into the footer */
        .foot-flags{ display:inline-flex; align-items:center; gap:8px; margin:14px 0 4px; }
        .foot-flags .flag{ width:30px;height:20px;border-radius:4px;position:relative;overflow:hidden;flex:none;box-shadow:0 1px 4px rgba(0,0,0,.35); background:center/cover no-repeat #fff; }
        .foot-flags .flag--fi{ background-image:url("../img/flag-finland.svg"); }
        .foot-flags .flag--in{ background-image:url("../img/flag-india.svg"); }
        .foot-flags .arrow{ color:rgba(255,255,255,.45); font-weight:900; font-size:13.5px; }
        .foot-flags-cap{ display:block; margin:6px 0 18px; font-size:13.5px; font-weight:700; letter-spacing:.02em; color:rgba(255,255,255,.68); }
        .site-foot h4{ position:relative; font-family:"Plus Jakarta Sans"; font-weight:800; font-size:14px; letter-spacing:1.6px; text-transform:uppercase; color:#fff; margin:0 0 20px; padding-bottom:11px; }
        .site-foot h4::after{ content:""; position:absolute; left:0; bottom:0; width:26px; height:2px; border-radius:2px; background:var(--yellow); }
        .foot-links{ list-style:none; padding:0; margin:0; display:grid; gap:13px; }
        .foot-links a{ color:rgba(255,255,255,.75); font-size:15.5px; transition:color .2s, padding-left .2s; }
        .foot-links a:hover{ color:var(--yellow); padding-left:5px; }
        .foot-contact{ list-style:none; padding:0; margin:0; display:grid; gap:15px; }
        .foot-contact li{ display:flex; gap:12px; color:rgba(255,255,255,.78); font-size:15.5px; line-height:1.6; }
        .foot-contact i{ color:var(--yellow); margin-top:3px; }
        .foot-contact a{ color:inherit; }
        .foot-bot{ position:relative; z-index:2; border-top:1px solid rgba(255,255,255,.1); padding:22px 0 34px; display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; font-size:14px; color:rgba(255,255,255,.62); }
        .foot-bot a{ color:rgba(255,255,255,.72); } .foot-bot a:hover{ color:var(--yellow); }
        @media(max-width:860px){ .foot-main{ grid-template-columns:1fr 1fr; gap:30px; } .foot-cta{ padding:30px; } }
        @media(max-width:520px){ .foot-main{ grid-template-columns:1fr; } }

        /* Mobile responsiveness */
        @media(max-width:600px){
            /* re-tune the scale once; every component that uses it follows */
            :root{ --sp-section:52px; --sp-xl:36px; --sp-l:26px; --sp-m:20px; }
            .hero{ padding:40px 0 44px; }
            .hero h1{ font-size:24px; line-height:1.12; letter-spacing:-.4px; }
            .apply-info{ padding:28px; }
            .glass-form{ padding:24px; }
            .hero-cta{ gap:12px; }
            .hero-cta .btn-primary,.hero-cta .btn-ghost{ width:100%; justify-content:center; }
            .hero-trust .n{ font-size:22px; }
            .hero-trust .ts{ padding-right:18px; margin-right:18px; }
        }
        @media(max-width:400px){
            .hero-trust{ flex-wrap:wrap; gap:16px 0; }
            .hero-trust .ts{ flex:0 0 50%; border-right:none; padding-right:0; margin-right:0; }
        }
        @media(prefers-reduced-motion:reduce){ .aurora{ animation:none; } .hero-figure img{ transition:none; } }

        /* --- Hero entrance + typewriter headline --- */
        @media (prefers-reduced-motion:no-preference){
            .js .hero-eyebrow, .js .hero h1, .js .hero .lead, .js .hero-cta, .js .hero-trust{ opacity:0; animation:heroUp .85s cubic-bezier(.22,.61,.36,1) forwards; }
            .js .hero-eyebrow{ animation-delay:.10s; }
            .js .hero h1{ animation-delay:.22s; }
            .js .hero .lead{ animation-delay:.44s; }
            .js .hero-cta{ animation-delay:.60s; }
            .js .hero-trust{ animation-delay:.74s; }
        }
        @keyframes heroUp{ from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
        .hero h1 .fin-grad{ white-space:nowrap; display:inline-flex; align-items:baseline; }
        .hero h1 .fin-rest{ display:inline-block; white-space:nowrap; }
        .hero h1 .fin-grad.typing::after{ content:""; display:inline-block; width:3px; height:.92em; margin-left:3px; vertical-align:-.08em; background:var(--finn-green); border-radius:2px; animation:caret .75s step-end infinite; }
        @keyframes caret{ 50%{ opacity:0; } }

        /* --- Learning Path (scroll-stacking cards) --- */
        .lp2{ position:relative; max-width:760px; margin:6px auto 0; }
        .lp2-item{ position:sticky; display:flex; gap:24px; align-items:center; background:#fff; border:1px solid #eef1f7; border-radius:20px; padding:26px 30px; box-shadow:0 24px 54px -26px rgba(0,28,84,.5); margin-bottom:26px; transform-origin:center top; will-change:transform, opacity; }
        .lp2-item:nth-child(1){ top:96px; }
        .lp2-item:nth-child(2){ top:112px; }
        .lp2-item:nth-child(3){ top:128px; }
        .lp2-item:nth-child(4){ top:144px; }
        .lp2-item:nth-child(5){ top:160px; }
        .lp2-item:last-child{ margin-bottom:0; }
        .lp2-marker{ flex-shrink:0; }
        .lp2-marker span{ display:grid; place-items:center; width:58px; height:58px; border-radius:17px; font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:18px; color:#0c1330; background:var(--yellow); }
        .lp2-tag{ color:var(--cta); font-weight:700; font-size:11.5px; letter-spacing:.6px; text-transform:uppercase; }
        .lp2-card h3{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; color:var(--navy); font-size:19px; margin:6px 0 7px; }
        .lp2-card p{ color:#566080; font-size:14px; line-height:1.65; margin:0; }
        @media(max-width:560px){
            .lp2-item{ gap:16px; padding:20px; }
            .lp2-marker span{ width:46px; height:46px; border-radius:14px; font-size:15px; }
            .lp2-item:nth-child(1){ top:80px; }
            .lp2-item:nth-child(2){ top:92px; }
            .lp2-item:nth-child(3){ top:104px; }
            .lp2-item:nth-child(4){ top:116px; }
            .lp2-item:nth-child(5){ top:128px; }
        }
        @media(prefers-reduced-motion:reduce){ .lp2-item{ position:static; } }

        /* --- About the JGI Group (terminal window) --- */
        .term{ max-width:880px; margin:0 auto; border-radius:16px; overflow:hidden; background:#0c1330; border:1px solid rgba(255,255,255,.08); box-shadow:0 44px 96px -38px rgba(0,28,84,.7); }
        .term-bar{ display:flex; align-items:center; gap:9px; padding:0 16px; height:46px; background:#1d2647; border-bottom:1px solid rgba(255,255,255,.06); }
        .term-dot{ width:13px; height:13px; border-radius:50%; display:grid; place-items:center; line-height:1; }
        .term-dot.red{ background:#ff5f57; } .term-dot.yellow{ background:#febc2e; } .term-dot.green{ background:#28c840; }
        .term-dot span{ font-family:var(--font-sans); font-size:10px; font-weight:800; color:rgba(0,0,0,.55); opacity:0; transition:opacity .15s; }
        .term-bar:hover .term-dot span{ opacity:1; }
        .term-title{ flex:1; text-align:center; margin-right:55px; font-family:"Plus Jakarta Sans",sans-serif; font-size:12.5px; font-weight:600; letter-spacing:.3px; color:#9fb0d8; }
        .term-body{ padding:28px clamp(22px,4vw,42px) 38px; }
        .term-cmd-line{ font-family:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace; font-size:13.5px; color:#7c8bb5; margin:0 0 20px; }
        .term-cmd-line .term-prompt{ color:#37d39a; font-weight:700; }
        .term-cmd-line .term-cmd{ color:#e8ecf6; }
        .term-out{ font-family:"SF Mono","JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace; font-weight:700; text-transform:uppercase; font-size:clamp(17px,2.7vw,31px); line-height:1.55; letter-spacing:.5px; color:#eef2fb; white-space:pre-wrap; margin:0; min-height:calc(3 * 1.55em); }
        .term-out .term-hi{ color:var(--yellow); }
        .term-caret{ display:inline-block; width:.58em; height:1.04em; vertical-align:-0.16em; margin-left:3px; background:#10a06a; border-radius:2px; box-shadow:0 0 12px rgba(16,160,106,.75); animation:termBlink 1.05s steps(1) infinite; }
        @keyframes termBlink{ 50%{ opacity:0; } }
        @media(max-width:560px){ .term-title{ margin-right:0; } .term-out{ letter-spacing:0; } }

        /* --- Journey of Excellence (showcase + spinning JGI seal) --- */
        .journey-grid{ display:grid; grid-template-columns:1fr 1.04fr; gap:56px; align-items:center; }
        .jcards{ display:grid; gap:22px; }
        .jcard{ position:relative; display:flex; align-items:flex-start; gap:18px; padding:26px 28px; background:#fff; border:1px solid #e8edf7; border-radius:20px; box-shadow:0 20px 44px -28px rgba(0,28,84,.42); overflow:hidden; transition:transform .45s cubic-bezier(.22,.61,.36,1), box-shadow .45s, border-color .45s; }
        .jcard::before{ content:""; position:absolute; left:0; top:18px; bottom:18px; width:4px; border-radius:0 4px 4px 0; background:var(--cta); transform:scaleY(0); transform-origin:top; transition:transform .45s ease; }
        .jcard:hover{ transform:translateY(-6px); box-shadow:0 36px 64px -30px rgba(0,28,84,.5); border-color:#d8e3fb; }
        .jcard:hover::before{ transform:scaleY(1); }
        .jcard-body{ flex:1; min-width:0; }
        .jcard h3{ font-family:"Plus Jakarta Sans",sans-serif; font-size:19px; color:var(--navy); margin:0 0 8px; letter-spacing:-.2px; }
        .jcard p{ color:#566080; font-size:13.6px; line-height:1.62; margin:0 0 14px; }
        .jcard-more{ display:inline-flex; align-items:center; gap:8px; font-weight:800; font-size:13px; letter-spacing:.3px; color:var(--cta-ink); background:none; border:0; padding:0; cursor:pointer; font-family:inherit; text-align:left; }
        .jcard-more i{ transition:transform .35s ease; }
        .jcard:hover .jcard-more i{ transform:translate(3px,-3px); }
        .jcard-ic{ flex:0 0 auto; width:54px; height:54px; border-radius:50%; display:grid; place-items:center; font-size:21px; color:#0c1330; background:var(--yellow); transition:background .35s ease, transform .55s cubic-bezier(.34,1.56,.64,1); }
        .jcard:hover .jcard-ic{ background:#ff8a1e; transform:rotate(-8deg) scale(1.08); }

        /* Choreographed entrance: each card joins from a different direction, then text drops in from the top-front */
        .jx .jcard{ opacity:0; will-change:transform, opacity, clip-path; transition:opacity .4s ease, transform .5s cubic-bezier(.2,.7,.2,1), clip-path .5s cubic-bezier(.2,.7,.2,1); }
        .jx .jcards .jcard:nth-child(1){ transform:translateX(-120%) rotate(-3deg); }
        .jx .jcards .jcard:nth-child(2){ clip-path:inset(0 50% 0 50% round 20px); transform:translateY(40px); }
        .jx .jcards .jcard:nth-child(3){ clip-path:inset(50% 50% 50% 50% round 20px); transform:scale(.4); }
        .jx .jcards .jcard.card-in{ opacity:1; transform:none; clip-path:inset(0 0 0 0 round 20px); }
        .jx .jcard .jcard-body > *{ opacity:0; transform:perspective(800px) rotateX(-82deg) translateY(-20px); transform-origin:top center; transition:opacity .32s ease, transform .4s cubic-bezier(.2,.85,.3,1); }
        .jx .jcard.text-in .jcard-body > *{ opacity:1; transform:none; }
        .jx .jcard.text-in .jcard-body > *:nth-child(2){ transition-delay:.06s; }
        .jx .jcard.text-in .jcard-body > *:nth-child(3){ transition-delay:.12s; }
        .jx .jcard .jcard-ic{ opacity:0; transform:scale(.3) rotate(-15deg); transition:opacity .5s ease, transform .6s cubic-bezier(.34,1.56,.64,1); }
        .jx .jcard.text-in .jcard-ic{ opacity:1; transform:none; transition-delay:.05s; }

        .journey-visual{ position:relative; display:grid; grid-template-columns:1fr 1fr; gap:20px; }
        .jphoto{ position:relative; margin:0; overflow:hidden; border-radius:150px 150px 26px 26px; aspect-ratio:3/4.5; box-shadow:0 40px 80px -36px rgba(0,28,84,.5); border:6px solid #fff; }
        .jphoto img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform 1.1s ease; }
        .jphoto:hover img{ transform:scale(1.06); }
        .jphoto-b{ margin-top:46px; }
        .jseal{ position:absolute; left:50%; top:50%; width:142px; height:142px; transform:translate(-50%,-50%); z-index:4; display:grid; place-items:center; filter:drop-shadow(0 18px 32px rgba(0,28,84,.36)); }
        .jseal-disc{ position:absolute; inset:0; border-radius:50%; background:rgba(255,255,255,.74); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.92); }
        .jseal-ring{ position:absolute; inset:0; width:100%; height:100%; animation:jsealSpin 16s linear infinite; }
        .jseal-ring text{ font-family:"Plus Jakarta Sans",sans-serif; font-weight:800; font-size:12.5px; letter-spacing:1.5px; fill:#001c54; text-transform:uppercase; }
        .jseal-core{ position:relative; z-index:2; width:72px; height:72px; border-radius:50%; background:#fff; display:grid; place-items:center; box-shadow:0 6px 16px -4px rgba(0,28,84,.5); }
        .jseal-core img{ width:72px; height:72px; border-radius:50%; display:block; }
        @keyframes jsealSpin{ to{ transform:rotate(360deg); } }
        @media(prefers-reduced-motion:reduce){ .jseal-ring{ animation:none; } }
        @media(max-width:980px){ .journey-grid{ grid-template-columns:1fr; gap:42px; } .journey-visual{ max-width:560px; margin:0 auto; } }
        @media(max-width:560px){
            .jphoto{ border-radius:110px 110px 18px 18px; }
            .jseal{ width:110px; height:110px; }
            .jseal-core{ width:58px; height:58px; } .jseal-core img{ width:58px; height:58px; }
            .jseal-ring text{ font-size:11.5px; letter-spacing:1px; }
        }

        /* ===== Desktop: scale the WHOLE design uniformly so it looks identical at every size ===== */
        @media (min-width: 1024px){
            body{ width:1440px; }
            .wrap{ width:1340px; }
            .hero-grid{ min-height:540px; }
            .hero h1{ font-size:56px; }
            .hero .lead{ font-size:18px; }
            .hero-trust .n{ font-size:34px; }
            :root{ --sp-section:98px; }
            .head h2{ font-size:54px; }
            .bento{ grid-auto-rows:minmax(280px,1fr); }
            .cell.feature .big{ font-size:42px; }
            .legacy::after{ font-size:150px; }
            .legacy-content h2{ font-size:42px; }
            .legacy-quote p{ font-size:20px; }
            .apply-info h2{ font-size:36px; }
            .foot-cta h3{ font-size:32px; }
            .term-body{ padding:28px 40px 38px; }
            .term-out{ font-size:28px; }
        }

        .reveal-curtain{ display:none; }
        html[data-sweep] .reveal-curtain{ display:block; position:fixed; inset:0; z-index:100000; background:#0c1330; pointer-events:none; will-change:transform; }
        html[data-sweep] .reveal-curtain.away{ transition:transform .42s cubic-bezier(.76,0,.24,1); }
        html[data-sweep="left"] .reveal-curtain.away{ transform:translateX(100%); }
        html[data-sweep="right"] .reveal-curtain.away{ transform:translateX(-100%); }
        html[data-sweep="center"] .reveal-curtain.away{ transform:scaleX(0); }
        @media (prefers-reduced-motion: reduce){ html[data-sweep] .reveal-curtain{ display:none; } }

            .campus-sec{ position:relative; background:var(--ink2); }
            .campus-stage{ position:relative; max-width:1120px; margin:0 auto; border-radius:26px; overflow:hidden; aspect-ratio:21/9; min-height:320px; box-shadow:0 40px 90px -40px rgba(0,0,0,.7); }
            .campus-stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .9s cubic-bezier(.22,.61,.36,1); }
            .campus-stage:hover img{ transform:scale(1.05); }
            .campus-tint{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,10,28,.15) 0%, transparent 34%, rgba(6,10,28,.82) 100%); }
            .campus-cap{ position:absolute; z-index:2; left:0; right:0; bottom:0; padding:clamp(22px,3vw,40px); }
            .campus-badge{ display:inline-flex; align-items:center; gap:9px; padding:8px 15px; border-radius:999px; background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.26); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); color:#fff; font-size:12.5px; font-weight:700; }
            .campus-badge i{ color:var(--yellow); }
            .campus-cap h3{ color:#fff; font-size:clamp(20px,2.6vw,32px); line-height:1.14; letter-spacing:-.3px; margin:12px 0 0; }
            .campus-cap h3 span{ color:var(--yellow); }
            .campus-facts{ display:grid; grid-template-columns:repeat(4,1fr); gap:18px; margin-top:20px; }
            .cfx{ background:var(--glass); border:1px solid var(--glass-line); border-radius:20px; padding:28px 24px; transition:transform .4s cubic-bezier(.22,.61,.36,1), background .4s, border-color .4s; }
            .cfx:hover{ transform:translateY(-8px); background:rgba(255,255,255,.08); border-color:rgba(247,181,0,.4); }
            .cfx-ic{ width:52px;height:52px;border-radius:15px; display:grid;place-items:center; background:rgba(247,181,0,.14); color:var(--yellow); font-size:21px; margin-bottom:16px; transition:background .35s, color .35s, transform .5s cubic-bezier(.34,1.56,.64,1); }
            .cfx:hover .cfx-ic{ background:var(--yellow); color:#0c1330; transform:rotate(-6deg) scale(1.08); }
            .cfx h4{ color:#fff; font-size:16.5px; margin:0 0 8px; }
            .cfx p{ color:var(--muted); font-size:13.5px; line-height:1.6; margin:0; }
            @media(max-width:900px){ .campus-facts{ grid-template-columns:1fr 1fr; } }
            @media(max-width:560px){ .campus-facts{ grid-template-columns:1fr; } .campus-stage{ aspect-ratio:4/3; } }

            .visit-sec .head{ margin-bottom:var(--sp-xl); }
            .visit-grid{ display:grid; grid-template-columns:.92fr 1.08fr; gap:24px; align-items:stretch; max-width:1120px; margin:0 auto; }
            .visit-info{ background:linear-gradient(160deg,#0c1330,#132148); border:1px solid var(--glass-line); border-radius:24px; padding:clamp(28px,3vw,40px); display:flex; flex-direction:column; box-shadow:0 30px 64px -34px rgba(0,28,84,.5); }
            .visit-info h3{ color:#fff; font-size:22px; margin:0 0 4px; }
            .visit-info .vsub{ color:var(--muted); font-size:14px; margin:0 0 26px; }
            .visit-list{ list-style:none; padding:0; margin:0 0 auto; display:grid; gap:18px; }
            .visit-list li{ display:flex; gap:15px; align-items:flex-start; }
            .visit-list .vi{ width:44px;height:44px;border-radius:12px; background:rgba(255,255,255,.08); display:grid;place-items:center; color:var(--yellow); flex:0 0 auto; font-size:16px; }
            .visit-list b{ color:#fff; font-size:14.5px; display:block; margin-bottom:3px; }
            .visit-list span{ color:var(--muted); font-size:13.5px; line-height:1.55; }
            .visit-list a{ color:inherit; }
            .visit-info .vbtn{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:11px; margin-top:28px; padding:16px 30px; border:0; border-radius:100vw; background:var(--cta); color:var(--navy-ink); font-weight:800; font-size:15px; cursor:pointer; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
            .visit-info .vbtn:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 38px rgba(255,181,57,.4); }
            .map-frame{ position:relative; border-radius:24px; overflow:hidden; border:1px solid #dbe3f1; box-shadow:0 30px 70px -34px rgba(0,28,84,.5); min-height:440px; background:#e6ecf6; }
            .map-frame iframe{ display:block; width:100%; height:100%; min-height:440px; border:0; }
            .map-cta{ position:absolute; left:20px; bottom:20px; z-index:2; overflow:hidden; display:inline-flex; align-items:center; gap:10px; padding:14px 24px; border:0; border-radius:100vw; background:var(--navy); color:#fff; font-weight:800; font-size:14px; cursor:pointer; box-shadow:0 16px 38px -10px rgba(0,28,84,.4); transition:transform .3s var(--ease), box-shadow .3s var(--ease), color .3s var(--ease); }
            .map-cta i{ color:inherit; }
            .map-cta:hover{ transform:translateY(-3px); color:var(--navy-ink); box-shadow:0 20px 44px -10px rgba(0,28,84,.5); }
            @media(max-width:860px){ .visit-grid{ grid-template-columns:1fr; } .map-frame{ min-height:340px; } .map-frame iframe{ min-height:340px; } }

        .lp-modal{ position:fixed; inset:0; z-index:1000; display:none; }
        .lp-modal.open{ display:block; }
        .lp-modal-overlay{ position:absolute; inset:0; background:rgba(4,9,28,.66); -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px); animation:lpModalFade .25s ease; }
        .lp-modal-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:min(1000px,94vw); max-height:92vh; animation:lpModalPop .32s cubic-bezier(.2,.8,.3,1.05); }
        .lp-modal-slot{ max-height:92vh; overflow:auto; padding:4px; }
        .lp-modal-slot::-webkit-scrollbar{ width:0; }
        .lp-modal-slot .apply-grid{ margin:0; }
        /* Desktop: keep the navy info card stable; scroll ONLY the form card */
        @media(min-width:881px){
            .lp-modal-slot{ overflow:hidden; }
            .lp-modal-slot .apply-grid{ height:min(90vh,780px); grid-template-rows:minmax(0,1fr); }
            .lp-modal-slot .apply-info{ min-height:0; overflow-y:auto; }
            .lp-modal-slot .apply-info::-webkit-scrollbar{ width:0; }
            .lp-modal-slot .glass-form{ min-height:0; overflow-y:auto; }
            .lp-modal-slot .glass-form::-webkit-scrollbar{ width:8px; }
            .lp-modal-slot .glass-form::-webkit-scrollbar-thumb{ background:#cdd4e6; border-radius:8px; }
            .lp-modal-slot .glass-form::-webkit-scrollbar-track{ background:transparent; }
        }
        /* Inside the modal the grid leaves .apply-sec, so its readable overrides no longer apply.
           Re-assert the same light theme used in the apply section (navy info card + white form)
           so the popup matches the Whitefield campus look. */
        .lp-modal-slot .apply-info{ background:#0c1330; border-color:rgba(255,255,255,.10); }
        .lp-modal-slot .glass-form{ background:#fff; border:1px solid #e3e9f5; -webkit-backdrop-filter:none; backdrop-filter:none; box-shadow:0 26px 54px -30px rgba(0,28,84,.4); }
        .lp-modal-slot .glass-form h3{ color:var(--navy); }
        .lp-modal-slot .glass-form .fsub{ color:#566080; }

        /* Nordi renders its own title, intro line and privacy note, so the page's
           versions are suppressed in the modal rather than saying it all twice. */
        @media(min-width:881px){
            .lp-modal-slot .glass-form > h3,
            .lp-modal-slot .glass-form > .fsub,
            .lp-modal-slot .glass-form > .gf-note{ display:none; }
            .lp-modal-slot .glass-form{ padding-top:20px; }
            .lp-modal-slot .apply-info > p{ display:none; }
            .lp-modal-slot .apply-info{ justify-content:center; }
            .lp-modal-slot .apply-info h2{ font-size:clamp(1.5rem,2.3vw,1.95rem); line-height:1.15; margin-top:12px; }
            .lp-modal-slot .apply-info .info-list{ margin-top:22px; }
        }
        .lp-modal-slot .gf label{ color:#0c1330; }
        .lp-modal-slot .gf-locked{ background:#f7f9fd; border-color:#dde4f1; color:#0c1330; }
        .lp-modal-slot .gf input,.lp-modal-slot .gf select,.lp-modal-slot .gf textarea{ background:#f7f9fd; border-color:#dde4f1; color:#0c1330; }
        .lp-modal-slot .gf input::placeholder,.lp-modal-slot .gf textarea::placeholder{ color:#9aa3bd; }
        .lp-modal-slot .gf select option{ background:#fff; color:#0c1330; }
        .lp-modal-slot .gf-consent{ color:#566080; }
        .lp-modal-slot .gf-note{ color:#566080; }
        .lp-modal-close{ position:absolute; top:-14px; right:-14px; z-index:5; width:42px; height:42px; border-radius:50%; border:none; cursor:pointer; background:#fff; color:#0c1330; font-size:18px; line-height:1; box-shadow:0 6px 18px rgba(0,0,0,.35); transition:background .2s, transform .25s; }
        .lp-modal-close:hover{ background:var(--cta); color:#08122e; transform:rotate(90deg); }
        @keyframes lpModalFade{ from{ opacity:0; } to{ opacity:1; } }
        @keyframes lpModalPop{ from{ opacity:0; transform:translate(-50%,-46%) scale(.96); } to{ opacity:1; transform:translate(-50%,-50%) scale(1); } }
        @media(max-width:560px){ .lp-modal-close{ top:6px; right:6px; } }

        .ewm{ position:fixed; inset:0; z-index:2600; display:none; font-family:var(--font-sans); }
        .ewm.open{ display:block; }
        .ewm-overlay{ position:absolute; inset:0; background:rgba(3,7,20,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:ewmFade .4s ease; }
        @keyframes ewmFade{ from{ opacity:0; } to{ opacity:1; } }
        @keyframes ewmPulse{ 50%{ box-shadow:0 0 0 8px rgba(247,181,0,0); } }
        .ewm-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.93); opacity:0; width:min(430px,94vw); max-height:92vh; overflow:auto; background:#fff; border-radius:26px; box-shadow:0 50px 110px -34px rgba(0,12,40,.5); transition:transform .5s cubic-bezier(.2,.9,.3,1.12), opacity .45s ease; }
        .ewm.open .ewm-box{ transform:translate(-50%,-50%) scale(1); opacity:1; }
        .ewm-box::-webkit-scrollbar{ width:0; }
        .ewm-in{ position:relative; padding:40px 34px 32px; text-align:center; }
        .ewm-in::before{ content:""; position:absolute; top:0; left:0; right:0; height:150px; border-radius:26px 26px 0 0; background:linear-gradient(180deg, #fff6ec, #fff); pointer-events:none; }
        .ewm-ic{ position:relative; width:66px;height:66px;border-radius:20px; margin:0 auto 18px; display:grid;place-items:center; background:linear-gradient(140deg, var(--cta), var(--orange)); color:#fff; font-size:27px; box-shadow:0 18px 36px -12px rgba(247,181,0,.55); }
        .ewm-badge{ position:relative; display:inline-flex; align-items:center; gap:8px; padding:6px 15px; border-radius:999px; background:rgba(247,181,0,.14); color:#7a5200; font-weight:800; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; }
        .ewm-badge .dot{ width:6px;height:6px;border-radius:50%; background:var(--cta); box-shadow:0 0 0 4px rgba(247,181,0,.2); animation:ewmPulse 2.4s infinite; }
        .ewm-in h3{ position:relative; font-family:"Plus Jakarta Sans", sans-serif; color:var(--navy); font-size:23px; font-weight:800; margin:15px 0 0; line-height:1.2; letter-spacing:-.4px; }
        .ewm-in > p{ position:relative; color:#5a6480; font-size:14px; line-height:1.62; margin:11px 0 0; }
        .ewm-points{ list-style:none; padding:0; margin:22px 0 24px; display:grid; gap:11px; text-align:left; }
        .ewm-points li{ display:flex; gap:11px; align-items:center; color:#3c465f; font-size:13.5px; font-weight:700; }
        .ewm-points i{ color:var(--green); font-size:16px; }
        .ewm-actions{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
        .ewm-btn{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px 16px; border-radius:100vw; font-weight:800; font-size:14px; cursor:pointer; border:0; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .ewm-btn.primary{ background:var(--cta); color:var(--navy-ink); }
        .ewm-btn.primary:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 34px rgba(255,181,57,.4); }
        .ewm-btn.ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.6px rgba(0,28,84,.22); }
        .ewm-btn.ghost:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 14px 30px rgba(10,20,50,.22); }
        .ewm-close{ position:absolute; top:16px; right:16px; z-index:4; width:34px;height:34px;border-radius:50%; border:0; cursor:pointer; background:#f4f7fc; color:#5a6480; font-size:14px; transition:background .25s, transform .3s, color .25s; }
        .ewm-close:hover{ background:var(--cta); color:#08122e; transform:rotate(90deg); }
        @media(max-width:420px){ .ewm-actions{ grid-template-columns:1fr; } }
        @media (prefers-reduced-motion: reduce){ .ewm-badge .dot{ animation:none !important; } .ewm-box{ transition:none; } }

        .jm{ position:fixed; inset:0; z-index:2650; display:none; font-family:var(--font-sans); }
        .jm.open{ display:block; }
        .jm-overlay{ position:absolute; inset:0; background:rgba(3,7,20,.62); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); animation:ewmFade .4s ease; }
        .jm-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.93); opacity:0; width:min(500px,94vw); max-height:92vh; overflow:auto; background:#fff; border-radius:26px; box-shadow:0 50px 110px -34px rgba(0,12,40,.5); transition:transform .5s cubic-bezier(.2,.9,.3,1.12), opacity .45s ease; }
        .jm.open .jm-box{ transform:translate(-50%,-50%) scale(1); opacity:1; }
        .jm-box::-webkit-scrollbar{ width:0; }
        .jm-in{ position:relative; padding:38px 36px 32px; }
        .jm-in::before{ content:""; position:absolute; top:0; left:0; right:0; height:150px; border-radius:26px 26px 0 0; background:linear-gradient(180deg,#fff6ec,#fff); pointer-events:none; }
        .jm-head{ position:relative; display:flex; align-items:center; gap:14px; }
        .jm-ic{ width:60px;height:60px;border-radius:18px; display:grid;place-items:center; background:linear-gradient(140deg,var(--cta),var(--orange)); color:#fff; font-size:24px; box-shadow:0 18px 36px -12px rgba(247,181,0,.55); flex:0 0 auto; }
        .jm-kicker{ display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(247,181,0,.14); color:#7a5200; font-weight:800; font-size:11px; letter-spacing:1.4px; text-transform:uppercase; }
        .jm-title{ position:relative; font-family:"Plus Jakarta Sans",sans-serif; color:var(--navy); font-size:24px; font-weight:800; margin:22px 0 0; line-height:1.18; letter-spacing:-.5px; }
        .jm-tag{ position:relative; font-family:"Plus Jakarta Sans",sans-serif; font-size:clamp(18px,2.3vw,21px); font-weight:800; line-height:1.28; letter-spacing:-.4px; margin:15px 0 0; padding-top:15px; }
        .jm-tag::before{ content:""; position:absolute; top:0; left:0; width:44px; height:3px; border-radius:3px; background:linear-gradient(90deg,var(--cta),var(--orange)); }
        .jm-tag-a{ color:#0c1330; }
        .jm-tag-b{ background:linear-gradient(100deg,var(--cta),var(--orange)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
        .jm-lead{ position:relative; color:#5a6480; font-size:14.5px; line-height:1.66; margin:16px 0 0; }
        .jm-list{ list-style:none; padding:0; margin:20px 0 26px; display:grid; gap:12px; }
        .jm-list li{ display:flex; gap:12px; align-items:flex-start; color:#3c465f; font-size:13.6px; font-weight:700; line-height:1.5; }
        .jm-list i{ color:var(--green); font-size:16px; margin-top:2px; flex:0 0 auto; }
        .jm-actions{ display:grid; grid-template-columns:1.15fr .85fr; gap:11px; }
        .jm-btn{ position:relative; overflow:hidden; z-index:0; display:inline-flex; align-items:center; justify-content:center; gap:10px; padding:15px; border-radius:100vw; font-weight:800; font-size:14px; cursor:pointer; border:0; transition:transform .35s var(--ease), box-shadow .35s var(--ease), color .3s var(--ease); }
        .jm-btn.primary{ background:var(--cta); color:var(--navy-ink); }
        .jm-btn.primary:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 16px 34px rgba(255,181,57,.4); }
        .jm-btn.ghost{ background:transparent; color:var(--navy); box-shadow:inset 0 0 0 1.6px rgba(0,28,84,.22); }
        .jm-btn.ghost:hover{ transform:translateY(-3px); color:#fff; box-shadow:0 14px 30px rgba(10,20,50,.22); }
        .jm-close{ position:absolute; top:16px; right:16px; z-index:4; width:34px;height:34px;border-radius:50%; border:0; cursor:pointer; background:#f4f7fc; color:#5a6480; font-size:14px; transition:background .25s, transform .3s, color .25s; }
        .jm-close:hover{ background:var(--cta); color:#08122e; transform:rotate(90deg); }
        @media(max-width:440px){ .jm-actions{ grid-template-columns:1fr; } .jm-head{ flex-direction:column; align-items:flex-start; gap:12px; } .jm-in{ padding:34px 24px 28px; } }
        @media (prefers-reduced-motion: reduce){ .jm-box{ transition:none; } }
/* ===== Polished pill buttons — ported from the NNS design system ===== */
/* fill slides up from below on hover (behind the label) */
.pill::before,.btn-primary::before,.btn-ghost::before,.gf-submit::before,.visit-info .vbtn::before,.map-cta::before,.foot-cta .btn-w::before,.ewm-btn::before,.jm-btn::before{
  content:"";position:absolute;inset:0;z-index:-1;background:var(--navy-ink);
    transform:translateY(101%);transition:transform .95s cubic-bezier(.22,.74,.2,1);
}
.map-cta::before{background:var(--cta)} /* ink button fills gold */
.pill:hover::before,.btn-primary:hover::before,.btn-ghost:hover::before,.gf-submit:hover::before,.visit-info .vbtn:hover::before,.map-cta:hover::before,.foot-cta .btn-w:hover::before,.ewm-btn:hover::before,.jm-btn:hover::before{transform:translateY(0)}
/* sheen sweep on hover */
.pill::after,.btn-primary::after,.btn-ghost::after,.gf-submit::after,.visit-info .vbtn::after,.map-cta::after,.foot-cta .btn-w::after,.ewm-btn::after,.jm-btn::after{
  content:"";position:absolute;top:-6%;bottom:-6%;left:-70%;width:44%;z-index:1;
  background:linear-gradient(100deg,transparent 8%,rgba(255,255,255,.5) 50%,transparent 92%);
  transform:skewX(-22deg);opacity:0;pointer-events:none;
}
.pill:hover::after,.btn-primary:hover::after,.btn-ghost:hover::after,.gf-submit:hover::after,.visit-info .vbtn:hover::after,.map-cta:hover::after,.foot-cta .btn-w:hover::after,.ewm-btn:hover::after,.jm-btn:hover::after{animation:btnSheen .85s var(--ease) .1s 1}
@keyframes btnSheen{0%{left:-70%;opacity:0}15%{opacity:1}100%{left:135%;opacity:0}}
.pill:active,.btn-primary:active,.btn-ghost:active,.gf-submit:active,.visit-info .vbtn:active,.map-cta:active,.foot-cta .btn-w:active,.ewm-btn:active,.jm-btn:active{transform:translateY(-1px) scale(.97)}
/* click ripple (span injected by main.js) */
.btn-rip{position:absolute;z-index:-1;border-radius:50%;background:rgba(255,255,255,.4);
  transform:scale(0);animation:btnRipple .6s ease-out forwards;pointer-events:none}
@keyframes btnRipple{to{transform:scale(1);opacity:0}}
/* breathing attention ring on the main gold CTAs */
.btn-primary:not(:hover),.foot-cta .btn-w:not(:hover),.ewm-btn.primary:not(:hover),.jm-btn.primary:not(:hover){animation:goldPulse 2.8s cubic-bezier(.4,0,.2,1) infinite}
@keyframes goldPulse{0%{box-shadow:0 0 0 0 rgba(255,181,57,.42)}70%{box-shadow:0 0 0 14px rgba(255,181,57,0)}100%{box-shadow:0 0 0 0 rgba(255,181,57,0)}}
@media(prefers-reduced-motion:reduce){
  .pill::after,.btn-primary::after,.btn-ghost::after,.gf-submit::after,.visit-info .vbtn::after,.map-cta::after,.foot-cta .btn-w::after,.ewm-btn::after,.jm-btn::after{display:none}
  .btn-primary:not(:hover),.foot-cta .btn-w:not(:hover),.ewm-btn.primary:not(:hover),.jm-btn.primary:not(:hover){animation:none}
  .pill::before,.btn-primary::before,.btn-ghost::before,.gf-submit::before,.visit-info .vbtn::before,.map-cta::before,.foot-cta .btn-w::before,.ewm-btn::before,.jm-btn::before{transition:none}
}

/* ===== Programme cards — entry points to the two stage landing pages ===== */
.stage-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.stage-card{ position:relative; display:flex; overflow:hidden; border-radius:26px; min-height:clamp(320px,38vw,420px); color:#fff; isolation:isolate;
  box-shadow:0 30px 70px -38px rgba(12,19,48,.5);
  transition:transform .5s var(--ease), box-shadow .5s var(--ease); }
.stage-card:hover,.stage-card:focus-visible{ transform:translateY(-8px); box-shadow:0 44px 88px -38px rgba(12,19,48,.58); }
.stage-card img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:0;
  transition:transform .9s cubic-bezier(.22,.61,.36,1); }
.stage-card:hover img{ transform:scale(1.07); }
.stage-veil{ position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(6,10,28,.18) 0%, rgba(6,10,28,.4) 44%, rgba(6,10,28,.9) 100%);
  transition:opacity .5s var(--ease); }
.stage-card:hover .stage-veil{ opacity:.92; }
.stage-in{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:flex-end; padding:clamp(24px,3vw,36px); }
.stage-tag{ display:inline-flex; align-self:flex-start; align-items:center; padding:7px 15px; border-radius:999px;
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  font-size:12px; font-weight:800; letter-spacing:.3px; }
.stage-card h3{ color:#fff; font-size:clamp(24px,2.7vw,32px); line-height:1.14; letter-spacing:-.4px; margin:14px 0 0; }
.stage-card h3 span{ color:var(--yellow); }
.stage-card p{ color:rgba(255,255,255,.82); font-size:14.5px; line-height:1.65; margin:10px 0 0; max-width:38ch; }
.stage-go{ display:inline-flex; align-items:center; gap:10px; margin-top:20px; font-weight:800; font-size:14px; color:var(--yellow); }
.stage-go i{ transition:transform .4s var(--ease); }
.stage-card:hover .stage-go i{ transform:translateX(6px); }
@media(max-width:820px){ .stage-grid{ grid-template-columns:1fr; } .stage-card{ min-height:300px; } }

/* ===== Careers job list cards — give them the same lift as the rest ===== */

/* ===== Welcome popup: direct routes to the two programme pages ===== */
/* ===== Welcome popup: "choose your stage" chooser ===== */
.ewm--choose .ewm-box{ width:min(760px,94vw); border-radius:30px; }
.ewm--choose .ewm-in{ padding:38px 34px 26px; }
.ewm--choose .ewm-in::before{ height:210px; border-radius:30px 30px 0 0; background:radial-gradient(120% 100% at 50% 0%, #fff3e2 0%, #fdf8ff 45%, #fff 100%); }
.ewm--choose .ewm-in h3{ font-size:clamp(24px,3.4vw,32px); margin:16px 0 0; }
.ewm--choose .ewm-in > p{ max-width:52ch; margin:12px auto 0; font-size:14.5px; }

.ewm-picks{ display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:26px 0 20px; text-align:left; }
.ewm-pick{ position:relative; display:flex; flex-direction:column; overflow:hidden; border-radius:22px; background:#fff; border:1.5px solid #e7edf7; box-shadow:0 18px 40px -30px rgba(12,19,48,.5); color:#0c1330; opacity:0; transform:translateY(26px) scale(.97); transition:transform .45s var(--ease), box-shadow .45s var(--ease), border-color .35s ease; }
.ewm.open .ewm-pick{ animation:ewmPickIn .66s var(--ease) var(--d,0s) both; }
@keyframes ewmPickIn{ from{ opacity:0; transform:translateY(26px) scale(.97); } to{ opacity:1; transform:none; } }
.ewm-pick:hover{ transform:translateY(-7px); border-color:var(--pk,#e7edf7); box-shadow:0 34px 60px -30px rgba(12,19,48,.55); }

.ewm-pick-media{ position:relative; display:block; height:200px; overflow:hidden; background:#eef2f8; }
.ewm-pick-media img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; transition:transform .8s var(--ease); }
.ewm-pick:hover .ewm-pick-media img{ transform:scale(1.09); }
.ewm-pick-media::after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(6,12,30,0) 40%, rgba(6,12,30,.55) 100%); }
.ewm-pick-age{ position:absolute; z-index:2; left:12px; bottom:11px; padding:5px 11px; border-radius:999px; background:rgba(255,255,255,.92); color:#0c1330; font-size:11px; font-weight:800; letter-spacing:.3px; }

.ewm-pick-body{ position:relative; display:block; flex:1; padding:26px 16px 14px; }
.ewm-pick-ic{ position:absolute; top:-19px; right:14px; width:38px; height:38px; border-radius:12px; display:grid; place-items:center; color:#fff; font-size:15px; background:var(--pk,#0c1330); box-shadow:0 14px 26px -12px rgba(12,19,48,.6); transition:transform .4s var(--ease); }
.ewm-pick:hover .ewm-pick-ic{ transform:translateY(-3px) rotate(-6deg); }
.ewm-pick-body b{ display:block; font-family:"Plus Jakarta Sans", sans-serif; font-size:17px; font-weight:800; letter-spacing:-.2px; }
.ewm-pick-body small{ display:block; margin-top:3px; color:#6a7490; font-size:12px; font-weight:700; line-height:1.45; }
.ewm-pick-go{ display:inline-flex; align-items:center; gap:8px; margin-top:9px; font-size:12.5px; font-weight:800; color:var(--pk,#0c1330); }
.ewm-pick-go i{ transition:transform .35s var(--ease); }
.ewm-pick:hover .ewm-pick-go i{ transform:translateX(6px); }
.ewm-pick--pre{ --pk:#f0801f; }
.ewm-pick--pri{ --pk:#12805a; }

.ewm-later{ position:relative; display:inline-flex; align-items:center; gap:7px; padding:11px 18px; border-radius:999px; background:#f4f7fc; color:#5a6480; font-size:13px; font-weight:700; transition:background .3s var(--ease), color .3s var(--ease), transform .3s var(--ease); }
.ewm-later b{ color:#0c1330; font-weight:800; }
.ewm-later i{ font-size:12px; transition:transform .3s var(--ease); }
.ewm-later:hover{ background:var(--cta); color:var(--navy-ink); transform:translateY(-2px); }
.ewm-later:hover b{ color:var(--navy-ink); }
.ewm-later:hover i{ transform:translateX(4px); }

@media(max-width:640px){
    .ewm--choose .ewm-in{ padding:32px 20px 22px; }
    .ewm-picks{ grid-template-columns:1fr; gap:13px; margin:22px 0 16px; }
    .ewm-pick{ flex-direction:row; align-items:stretch; }
    .ewm-pick-media{ width:132px; height:auto; flex:none; align-self:stretch; }
    .ewm-pick-age{ display:none; }
    .ewm-pick-body{ padding:12px 14px; }
    .ewm-pick-ic{ display:none; }
    .ewm-pick-go{ margin-top:9px; }
}
@media(max-height:720px){ .ewm--choose .ewm-in{ padding-top:28px; } .ewm-pick-media{ height:150px; } }
@media (prefers-reduced-motion: reduce){
    .ewm.open .ewm-pick{ animation:none; opacity:1; transform:none; }
    .ewm-pick:hover{ transform:none; }
    .ewm-pick:hover .ewm-pick-media img{ transform:none; }
}

/* ===== Programme picker — a split brand panel, deliberately unlike the plain centred cards ===== */
.gp{ position:fixed; inset:0; z-index:2700; display:none; font-family:var(--font-sans); }
.gp.open{ display:block; }
.gp-overlay{ position:absolute; inset:0; background:rgba(3,7,20,.72); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); animation:ewmFade .35s ease; }
.gp-box{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(.94); opacity:0;
    width:min(900px,95vw); max-height:92vh; overflow:auto;
    display:grid; grid-template-columns:minmax(0,.86fr) minmax(0,1.14fr);
    background:#fff; border-radius:28px; box-shadow:0 60px 130px -40px rgba(0,12,40,.65);
    transition:transform .5s cubic-bezier(.2,.9,.3,1.1), opacity .4s ease; }
.gp.open .gp-box{ transform:translate(-50%,-50%) scale(1); opacity:1; }
.gp-box::-webkit-scrollbar{ width:0; }

/* --- left: the brand panel --- */
.gp-aside{ position:relative; overflow:hidden; padding:40px 32px;
    display:flex; flex-direction:column; justify-content:center;
    background:radial-gradient(120% 90% at 12% 0%, #14306b 0%, #001c54 48%, #030c26 100%); color:#fff; }
.gp-aside::before{ content:""; position:absolute; inset:0; opacity:.55; pointer-events:none;
    background-image:radial-gradient(rgba(255,255,255,.12) 1px, transparent 1.4px); background-size:17px 17px;
    -webkit-mask-image:linear-gradient(160deg,#000 5%,transparent 70%); mask-image:linear-gradient(160deg,#000 5%,transparent 70%); }
.gp-aside::after{ content:""; position:absolute; right:-32%; bottom:-36%; width:80%; aspect-ratio:1; border-radius:50%;
    background:radial-gradient(circle, rgba(255,181,57,.38), transparent 66%); pointer-events:none; }
.gp-aside > *{ position:relative; z-index:1; }
.gp-logo{ width:min(160px,72%); height:auto; margin-bottom:24px; }
.gp-kicker{ display:inline-flex; align-items:center; gap:8px; align-self:flex-start; padding:7px 14px; border-radius:999px;
    background:rgba(255,181,57,.15); border:1px solid rgba(255,181,57,.34); color:var(--cta);
    font-weight:800; font-size:11px; letter-spacing:1.3px; text-transform:uppercase; }
.gp-aside h3{ font-family:"Plus Jakarta Sans", sans-serif; color:#fff; font-size:clamp(22px,2.6vw,29px); font-weight:800; margin:16px 0 0; line-height:1.16; letter-spacing:-.5px; }
.gp-lead{ color:rgba(255,255,255,.66); font-size:13.5px; line-height:1.65; margin:11px 0 0; }
.gp-trust{ list-style:none; padding:0; margin:22px 0 0; display:grid; gap:9px; }
.gp-trust li{ display:flex; align-items:center; gap:9px; font-size:12.5px; font-weight:700; color:rgba(255,255,255,.8); }
.gp-trust i{ flex:none; width:17px; height:17px; border-radius:50%; display:grid; place-items:center; font-size:8px; background:rgba(255,181,57,.2); color:var(--cta); }

/* --- right: the choices --- */
.gp-in{ position:relative; padding:38px 32px 30px; display:flex; flex-direction:column; justify-content:center; }
.gp-eyebrow{ margin:0 0 16px; font-size:11px; font-weight:800; letter-spacing:1.5px; text-transform:uppercase; color:#98a2b9; }
.gp-opts{ display:grid; gap:13px; }
.gp-opt{ --pk:#0c1330; position:relative; overflow:hidden; display:flex; align-items:center; gap:16px;
    padding:18px 20px 18px 22px; border-radius:20px; background:#f7fafd; border:1.6px solid #e6edf7; color:#0c1330;
    transition:transform .4s var(--ease), border-color .35s var(--ease), box-shadow .4s var(--ease), background .35s var(--ease); }
/* a colour rail wipes up the edge on hover */
.gp-opt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:5px; background:var(--pk);
    transform:scaleY(0); transform-origin:50% 100%; transition:transform .45s var(--ease); }
.gp-opt:hover::before,.gp-opt:focus-visible::before{ transform:scaleY(1); }
.gp-opt:hover,.gp-opt:focus-visible{ transform:translateY(-4px); background:#fff; border-color:var(--pk); box-shadow:0 26px 50px -24px rgba(12,19,48,.4); }
.gp-opt--pre{ --pk:#f0801f; }
.gp-opt--pri{ --pk:#12805a; }
/* backwards fill only: after the entrance ends the hover transform is free to apply */
.gp.open .gp-opt{ animation:gpIn .55s var(--ease) calc(.14s + var(--i,0) * .09s) backwards; }
@keyframes gpIn{ from{ opacity:0; transform:translateX(28px); } to{ opacity:1; transform:none; } }
.gp-ic{ width:54px; height:54px; flex:0 0 auto; border-radius:17px; display:grid; place-items:center; font-size:21px; color:#fff;
    box-shadow:0 14px 26px -12px rgba(12,19,48,.55); transition:transform .45s cubic-bezier(.34,1.56,.64,1); }
.gp-opt:hover .gp-ic{ transform:rotate(-7deg) scale(1.07); }
.gp-opt--pre .gp-ic{ background:linear-gradient(140deg,#ff9a3c,#f7761f); }
.gp-opt--pri .gp-ic{ background:linear-gradient(140deg,#2fa36b,#12805a); }
.gp-txt{ display:block; flex:1; min-width:0; }
.gp-age{ display:inline-block; margin-bottom:6px; padding:3px 9px; border-radius:999px; font-size:10.5px; font-weight:800; letter-spacing:.5px; text-transform:uppercase; }
.gp-opt--pre .gp-age{ background:rgba(240,128,31,.13); color:#b85c0c; }
.gp-opt--pri .gp-age{ background:rgba(18,128,90,.13); color:#0d6a4a; }
.gp-txt b{ display:block; font-family:"Plus Jakarta Sans", sans-serif; font-size:17.5px; font-weight:800; letter-spacing:-.3px; }
.gp-txt small{ display:block; margin-top:3px; color:#66708a; font-size:12.5px; font-weight:700; }
.gp-go{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; display:grid; place-items:center; background:#fff; border:1.5px solid #e6edf7; color:#9aa4bd; font-size:14px;
    transition:transform .35s var(--ease), color .35s var(--ease), background .35s var(--ease), border-color .35s var(--ease); }
.gp-opt:hover .gp-go{ background:var(--pk); border-color:var(--pk); color:#fff; transform:translateX(4px); }
.gp-skip{ display:inline-flex; align-items:center; justify-content:center; gap:8px; margin-top:20px; padding:12px 16px; border-radius:14px;
    background:#f4f7fc; color:#5a6480; font-size:13px; font-weight:700; text-decoration:none;
    transition:background .3s var(--ease), color .3s var(--ease); }
.gp-skip b{ color:var(--navy); font-weight:800; }
.gp-skip i{ font-size:12px; transition:transform .3s var(--ease); }
.gp-skip:hover{ background:var(--cta); color:var(--navy-ink); }
.gp-skip:hover b{ color:var(--navy-ink); }
.gp-skip:hover i{ transform:translateX(4px); }
.gp-close{ position:absolute; top:14px; right:14px; z-index:5; width:36px; height:36px; border-radius:50%; border:0; cursor:pointer;
    background:rgba(12,19,48,.06); color:#5a6480; font-size:14px; transition:background .25s, transform .3s, color .25s; }
.gp-close:hover{ background:var(--cta); color:#08122e; transform:rotate(90deg); }

@media(max-width:760px){
    .gp-box{ grid-template-columns:1fr; width:min(470px,94vw); }
    .gp-aside{ padding:30px 24px 26px; }
    .gp-logo{ width:138px; margin-bottom:16px; }
    .gp-trust{ display:none; }
    .gp-in{ padding:24px 22px 26px; }
}
@media(max-width:420px){
    .gp-opt{ padding:15px 16px; gap:13px; }
    .gp-ic{ width:46px; height:46px; font-size:18px; border-radius:14px; }
    .gp-go{ width:32px; height:32px; }
}
@media(prefers-reduced-motion:reduce){
    .gp-box{ transition:none; }
    .gp.open .gp-opt{ animation:none; }
    .gp-opt:hover{ transform:none; }
    .gp-opt:hover .gp-ic{ transform:none; }
    .gp-opt::before{ transition:none; }
}

/* ==========================================================================
   TYPOGRAPHY SYSTEM + TEXT MICRO-ANIMATIONS
   Shared with the two stage pages, which carry the same rules inline.
   Layer 1 is pure type; layer 2 is motion and degrades to nothing.
   ========================================================================== */

/* --- optical rhythm: tighter tracking as type gets bigger --- */
h1,h2,h3,h4,h5{ text-wrap:balance; }
p,li,figcaption,blockquote,dd{ text-wrap:pretty; }
h1{ letter-spacing:-.028em; line-height:1.05; font-weight:800; }
h2{ letter-spacing:-.024em; line-height:1.09; font-weight:800; }
h3{ letter-spacing:-.015em; line-height:1.22; font-weight:800; }
h4{ letter-spacing:-.008em; line-height:1.34; font-weight:800; }
/* .head h2 / .kicker spacing + tracking live in the rhythm block only */
.head p,.section-light .head p{ font-size:clamp(15.5px,1.05vw,17.5px); line-height:1.72; max-width:60ch; margin-inline:auto; }
p{ hyphens:manual; }
:where(p,li) a:not([class]){ text-underline-offset:3px; text-decoration-thickness:1px; }
/* tabular numerals wherever figures are compared */
.ts .n,.milestone .my,.stat__num,.lstat__num,.jseal .sy{ font-variant-numeric:tabular-nums; }

/* --- the logo blue carries every heading that sits on a light ground --- */
.section-light :is(h2,h3,h4),
.legacy-content :is(h2,h3),
.apply-sec :is(h3,h4),
.lp2-card h3,
.faq-item :is(h3,h4){ color:var(--navy); }
/* ...but a heading sitting ON a photo stays white, whatever ground the section is */
.cell :is(h3,h4),.cell .big,.stage-card :is(h3,h4),.campus-cap h3{ color:#fff; }

@media (prefers-reduced-motion: no-preference){
    /* --- headings arrive a word at a time (spans injected by main.js) --- */
    .tsplit__w{
        display:inline-block; opacity:0;
        transform:perspective(620px) translate3d(0,.42em,0) rotateX(-74deg);
        transform-origin:50% 0;
        transition:opacity .5s ease var(--wd,0s), transform .8s cubic-bezier(.16,.84,.26,1) var(--wd,0s);
    }
    .reveal.is-in .tsplit__w{ opacity:1; transform:none; }

    /* --- the kicker tracks in ahead of the heading it labels --- */
    .reveal .kicker{
        display:inline-block; opacity:0; transform:translateY(-9px); letter-spacing:.42em;
        transition:opacity .5s ease, transform .55s var(--ease), letter-spacing .95s cubic-bezier(.16,.84,.26,1);
    }
    .reveal.is-in .kicker{ opacity:1; transform:none; letter-spacing:.19em; }

    /* --- and the standfirst follows the last word in --- */
    :is(.head,.sec-head,.legacy-content).reveal > p{
        opacity:0; transform:translateY(15px);
        transition:opacity .7s ease .28s, transform .8s cubic-bezier(.2,.75,.25,1) .28s;
    }
    :is(.head,.sec-head,.legacy-content).reveal.is-in > p{ opacity:1; transform:none; }
}

@media (prefers-reduced-motion: reduce){
    .tsplit__w{ opacity:1 !important; transform:none !important; transition:none !important; }
    .reveal .kicker{ opacity:1 !important; transform:none !important; letter-spacing:.19em !important; transition:none !important; }
    :is(.head,.sec-head,.legacy-content).reveal > p{ opacity:1 !important; transform:none !important; transition:none !important; }
}