/* ═══ Forest Immersive — shared theme (from the Oct 2026 homepage) ═══ */
    :root {
      --night: #0b170d; --forest: #13301a; --forest-2: #1f4a27; --moss: #2d5a2d;
      --cream: #f6f1e4; --mist: #b9c6b6; --gold: #e3bb46; --gold-d: #c9a227; --crimson: #c0000c;
      --line: rgba(246, 241, 228, .14); --glass: rgba(11, 23, 13, .62);
      --serif: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif;
      --wrap: min(1200px, 100% - 32px - env(safe-area-inset-left, 0px) - env(safe-area-inset-right, 0px)); --ease: cubic-bezier(.2, .7, .2, 1);
    }
    *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 }
    html { scroll-behavior: smooth; scroll-padding-top: 84px }
    body { background: var(--night); color: var(--cream); font: 16px/1.6 var(--sans); -webkit-font-smoothing: antialiased; overflow-x: hidden }
    img, video { display: block; max-width: 100% }
    a { color: inherit }
    button, input, select, textarea { font: inherit; color: inherit }
    :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 4px }
    .wrap { width: var(--wrap); margin-inline: auto }
    .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap }
    .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 600 12px/1.2 var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold) }
    .eyebrow::before { content: ""; width: 22px; height: 1px; background: currentColor; flex: none }
    h1, h2, h3 { font-family: var(--serif); line-height: 1.06; letter-spacing: -.015em; font-weight: 600 }
    h2 { font-size: clamp(34px, 5.4vw, 64px); margin-top: 18px }
    h1 i, h2 i, h3 i { font-weight: 500; color: var(--gold) }
    .lede { font-size: clamp(16px, 1.6vw, 19px); color: var(--mist); max-width: 56ch; margin-top: 18px }
    .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 48px; padding: 14px 24px; border-radius: 999px; font: 600 15px/1.1 var(--sans); text-decoration: none; white-space: nowrap; border: 0; cursor: pointer; transition: transform .2s, background .2s, color .2s }
    .btn:hover { transform: translateY(-2px) }
    .btn-gold { background: var(--gold); color: var(--night) }
    .btn-gold:hover { background: #f0cc5c }
    .btn-ghost { border: 1px solid var(--line); background: rgba(246, 241, 228, .06); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px) }
    .btn-ghost:hover { background: var(--cream); color: var(--night) }
    .ctas .btn { white-space: normal; text-align: center }
    .btn-sm { min-height: 42px; padding: 11px 18px; font-size: 14px }
    .ctas { display: flex; flex-wrap: wrap; gap: 12px }
    section { padding: clamp(40px, 4.5vw, 64px) 0 }
    .sec-head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 20px 40px }

    /* motion reveal: hidden only once motion is ready (html.m), so no-JS / CDN failure shows everything */
    html.m .rev, html.m .hero-in { opacity: 0 }


    /* ═══ NAV ═══ */
    #nav { position: fixed; inset: 0 0 auto; z-index: 70; transition: transform .45s var(--ease) }
    #nav::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(11, 23, 13, .88); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--line); opacity: 0; transition: opacity .35s ease; pointer-events: none }
    #nav.solid::before { opacity: 1 }
    @media (min-width: 1140px) { #nav.solid { transform: translateY(-39px) } }
    .nstrip { display: none; font-size: 13px; color: var(--mist); border-bottom: 1px solid var(--line) }
    .nstrip .wrap { display: flex; justify-content: space-between; align-items: center; height: 38px; gap: 16px }
    .nstrip div { display: flex; gap: 18px; align-items: center }
    .nstrip a { text-decoration: none } .nstrip a:hover { color: var(--cream) }
    .nstrip .chip { border: 1px solid var(--line); border-radius: 99px; padding: 3px 11px }
    .nstrip .chip.gold { border-color: rgba(227, 187, 70, .45); color: var(--gold) }
    .nstrip { transition: opacity .3s } #nav.solid .nstrip { opacity: 0; pointer-events: none }
    .nbar .wrap { display: flex; align-items: center; justify-content: space-between; height: 72px; gap: 16px }
    .brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0 }
    .brand img { width: 44px; height: 44px; background: #fff; border-radius: 50%; padding: 2px; flex: none }
    .brand { max-width: 100% }
    .brand .brand-name { height: 44px; width: auto; min-width: 0; max-width: calc(100% - 55px); object-fit: contain; object-position: left center; background: none; border-radius: 0; padding: 0 }
    footer .brand .brand-name { height: 48px }
    .nlinks { display: none; gap: 24px; font-size: 14.5px; color: #dfe6dc }
    .nlinks a { text-decoration: none; position: relative; padding: 6px 0 }
    .nlinks a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gold); transform: scaleX(0); transition: transform .3s var(--ease) }
    .nlinks a:hover::after { transform: scaleX(1) }
    .nright { display: flex; align-items: center; gap: 10px }
    .ham { flex: none; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--line); background: var(--glass); display: grid; place-items: center; cursor: pointer }
    .ham span { display: block; width: 18px; height: 1.5px; background: var(--cream); position: relative; transition: background .2s }
    .ham span::before, .ham span::after { content: ""; position: absolute; left: 0; width: 18px; height: 1.5px; background: var(--cream); transition: transform .3s var(--ease) }
    .ham span::before { top: -6px } .ham span::after { top: 6px }
    .ham[aria-expanded=true] span { background: transparent }
    .ham[aria-expanded=true] span::before { transform: translateY(6px) rotate(45deg) }
    .ham[aria-expanded=true] span::after { transform: translateY(-6px) rotate(-45deg) }
    .mmenu { position: fixed; inset: 72px 0 0; background: rgba(11, 23, 13, .97); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); padding: 18px 16px 120px; overflow-y: auto; display: none }
    .mmenu.open { display: block }
    .mmenu a { display: block; padding: 15px 4px; border-bottom: 1px solid var(--line); text-decoration: none; font: 500 22px/1.2 var(--serif) }
    .mmenu .msub { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 22px }
    .mmenu .msub a { border: 1px solid var(--line); border-radius: 16px; padding: 14px; font: 600 14px/1.3 var(--sans); text-align: center }
    @media (min-width: 1140px) { .nstrip { display: block } .nlinks { display: flex } .ham { display: none } .mmenu { display: none !important } }
    @media (max-width: 899px) { .nright .btn { display: none } .brand .brand-name { height: 36px } }


    /* ═══ NUMBERS ═══ */
    .numbers { border-block: 1px solid var(--line); padding: 0 }
    .numbers .wrap { display: grid; grid-template-columns: repeat(2, 1fr) }
    .numbers div { padding: 28px 0 28px 18px; border-left: 1px solid var(--line) }
    .numbers div:nth-child(odd) { border-left: 0; padding-left: 0 }
    .numbers div:nth-child(n+3) { border-top: 1px solid var(--line) }
    .numbers b { font: 800 clamp(34px, 5vw, 58px)/1 var(--serif); display: block; color: var(--gold); font-variant-numeric: tabular-nums }
    .numbers span { font-size: 13.5px; color: var(--mist) }
    @media (min-width: 800px) {
      .numbers .wrap { grid-template-columns: repeat(4, 1fr) }
      .numbers div { border-top: 0 !important; border-left: 1px solid var(--line) !important; padding-left: 28px !important }
      .numbers div:first-child { border-left: 0 !important; padding-left: 0 !important }
    }


    /* ═══ STORY ═══ */
    .split { display: grid; gap: 44px; align-items: center }
    .photo { position: relative; border-radius: 24px; overflow: hidden; width: 100%; max-width: 360px; justify-self: center }
    .photo img { width: 100%; height: auto; aspect-ratio: 4/5; object-fit: cover }
    .photo .tag { position: absolute; left: 14px; right: 14px; bottom: 14px; background: var(--glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 16px; padding: 14px 16px; font-size: 14px; color: var(--mist) }
    .photo .tag b { color: var(--cream); font: 600 18px/1.3 var(--serif); display: block }
    .tl { list-style: none; margin-top: 30px; display: grid; gap: 0; border-left: 1px solid var(--line) }
    .tl li { position: relative; padding: 0 0 18px 22px; font-size: 15px; color: var(--mist) }
    .tl li::before { content: ""; position: absolute; left: -5px; top: 8px; width: 9px; height: 9px; border-radius: 50%; background: var(--night); border: 2px solid var(--gold) }
    .tl b { color: var(--cream); font: 700 17px/1 var(--serif); margin-right: 10px }
    @media (min-width: 960px) { .split { grid-template-columns: 1.5fr 1fr; gap: 72px } }


    /* ═══ FOOTER ═══ */
    footer { border-top: 1px solid var(--line); padding: 48px 0 calc(20px + env(safe-area-inset-bottom, 0px)); color: var(--mist); font-size: 14.5px }
    .fgrid { display: grid; gap: 36px }
    .fbrand p { margin-top: 14px; max-width: 40ch }
    .fmotto { font: italic 500 15px/1.4 var(--serif); color: var(--gold) !important }
    .fsoc { display: flex; gap: 10px; margin-top: 20px }
    .fsoc a { width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--line); display: grid; place-items: center; transition: background .2s }
    .fsoc a:hover { background: var(--cream) } .fsoc a:hover svg { fill: var(--night) }
    .fsoc svg { width: 16px; height: 16px; fill: var(--cream) }
    .fcol h5 { font: 600 12px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--cream); margin-bottom: 16px }
    .fcol ul { list-style: none; display: grid; gap: 10px }
    .fcol a { text-decoration: none } .fcol a:hover { color: var(--cream) }
    .fbot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line); margin-top: 32px; padding-top: 18px; font-size: 13px }
    .cbsepill { border: 1px solid rgba(227, 187, 70, .4); color: var(--gold); border-radius: 99px; padding: 3px 10px; font-weight: 600 }
    @media (min-width: 900px) { footer { padding-bottom: 24px } .fgrid { grid-template-columns: 1.6fr 1fr 1fr 1.2fr } }

    /* ═══ MOBILE DOCK + WHATSAPP ═══ */
    /* device-aware: clears the home indicator / notch (safe-area), adapts to width + landscape */
    .dock { position: fixed; left: max(12px, env(safe-area-inset-left, 0px)); right: max(12px, env(safe-area-inset-right, 0px)); bottom: calc(max(12px, env(safe-area-inset-bottom, 0px) + 6px)); z-index: 60; display: flex; gap: clamp(4px, 1.5vw, 7px); padding: clamp(5px, 1.7vw, 8px); max-width: 440px; margin-inline: auto; border-radius: 999px; isolation: isolate;
      /* liquid glass: light tint so the page shows through, heavy blur + saturation boost, specular rim + inner glow */
      background: linear-gradient(180deg, rgba(255, 255, 255, .16) 0%, rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, .02) 100%), rgba(14, 30, 18, .38);
      -webkit-backdrop-filter: blur(24px) saturate(190%) brightness(1.08); backdrop-filter: blur(24px) saturate(190%) brightness(1.08);
      border: 1px solid rgba(255, 255, 255, .2);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(255, 255, 255, .08), inset 0 0 18px rgba(255, 255, 255, .06), 0 12px 32px -10px rgba(0, 0, 0, .6), 0 2px 6px rgba(0, 0, 0, .25);
      transition: transform .4s var(--ease) }
    /* specular sheen: soft highlight across the upper half, like light on curved glass */
    .dock::before { content: ""; position: absolute; inset: 1px; border-radius: inherit; z-index: -1; pointer-events: none;
      background: radial-gradient(120% 90% at 22% -30%, rgba(255, 255, 255, .28), transparent 55%), radial-gradient(80% 70% at 100% 130%, rgba(227, 187, 70, .12), transparent 60%) }
    .dock::after { content: ""; position: absolute; left: 14%; right: 14%; top: 0; height: 1px; border-radius: 99px; pointer-events: none;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); opacity: .7 }
    .dock.hide, .dock.kb { transform: translateY(calc(100% + 40px)); pointer-events: none }
    /* Call + WhatsApp share .dock-l with space-evenly, so edge→Call = Call→WhatsApp = WhatsApp→Apply */
    .dock-l { flex: 1 1 auto; min-width: 0; display: flex; justify-content: space-evenly; align-items: center }
    .dock a { flex: 0 0 auto; min-width: 0; min-height: clamp(44px, 12vw, 50px); padding: 0 clamp(6px, 2vw, 12px); border-radius: 99px; display: flex; align-items: center; justify-content: center; gap: 7px; font: 600 clamp(13px, 3.6vw, 15px)/1 var(--sans); color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .45); transition: background .2s, transform .15s; text-decoration: none; white-space: nowrap }
    .dock svg { flex: none }
    .dock svg { width: clamp(16px, 4.4vw, 19px); height: clamp(16px, 4.4vw, 19px); fill: none; stroke: currentColor; stroke-width: 2; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)) }
    .dock-l a:active { background: rgba(255, 255, 255, .14); transform: scale(.96) }
    .dock a.go { flex: 0 0 auto; padding: 0 clamp(16px, 6vw, 30px); color: var(--night); text-shadow: none;
      background: linear-gradient(180deg, #f6d873 0%, #e3bb46 52%, #cfa436 100%);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .65), inset 0 -2px 4px rgba(120, 80, 0, .25), 0 4px 14px -4px rgba(227, 187, 70, .55) }
    .dock a.go:active { transform: scale(.97) }
    .wa { display: none; position: fixed; right: 24px; bottom: 24px; z-index: 60; width: 58px; height: 58px; border-radius: 50%; background: #25d366; place-items: center; box-shadow: 0 12px 30px -8px rgba(0, 0, 0, .5); transition: transform .2s }
    .wa:hover { transform: scale(1.06) }
    .wa svg { width: 30px; height: 30px; fill: #fff }
    @media (max-width: 359px) { .dock { gap: 4px; padding: 5px } .dock a { gap: 5px } .dock a.go { padding: 0 14px } }
    @media (max-width: 329px) { .dock a:not(.go) span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0) } .dock a:not(.go) { flex: 0 0 44px } }
    @media (max-height: 500px) and (orientation: landscape) { .dock { left: auto; width: 380px; padding: 5px } .dock a { min-height: 44px; font-size: 13px } .dock svg { width: 16px; height: 16px } }
    @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .dock { background: rgba(11, 23, 13, .92) } }
    @media (min-width: 900px) { .dock { display: none } .wa { display: grid } }

    /* ═══ INNER PAGES (shared by about / academics / beyond …) ═══ */
    .body { color: #d6ddd3; margin-top: 16px; max-width: 62ch }
    .band { background: var(--forest) }
    .split > div { min-width: 0 }
    .sub { font-size: clamp(22px, 2.6vw, 30px); margin: 44px 0 18px }
    /* page hero — shorter than the homepage hero, neutral scrim */
    .phero { position: relative; min-height: min(78svh, 720px); display: flex; align-items: flex-end; padding: 150px 0 clamp(32px, 6svh, 64px); overflow: hidden }
    .phero-bg { position: absolute; inset: 0; background: #000 }
    .phero-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; animation: kb 20s ease-out forwards }
    .phero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .55) 0%, rgba(0, 0, 0, .3) 35%, rgba(0, 0, 0, .7) 78%, var(--night) 100%), linear-gradient(90deg, rgba(0, 0, 0, .5), transparent 70%) }
    @keyframes kb { from { transform: scale(1.08) } to { transform: scale(1) } }
    .phero .wrap { position: relative }
    .phero h1 { font-size: clamp(44px, min(9vw, 11svh), 112px); font-weight: 800; text-shadow: 0 2px 24px rgba(0, 0, 0, .35) }
    .phero .lede { color: #e3eadf; text-shadow: 0 2px 16px rgba(0, 0, 0, .4) }
    @media (max-width: 340px) { .phero h1 i { white-space: normal !important } }
    .crumbs { display: flex; gap: 10px; font-size: 13.5px; color: var(--mist); margin-bottom: 16px }
    .crumbs a { text-decoration: none; color: var(--gold) }
    .jump { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px }
    .jump a { border: 1px solid var(--line); border-radius: 99px; padding: 8px 14px; font-size: 13.5px; text-decoration: none; color: #e3eadf; background: var(--glass); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .2s, color .2s }
    .jump a:hover { background: var(--cream); color: var(--night) }

    .glass { border: 1px solid rgba(255, 255, 255, .14); border-radius: 26px; padding: clamp(24px, 3.4vw, 40px); background: linear-gradient(180deg, rgba(255, 255, 255, .08), rgba(255, 255, 255, .02)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18) }
    .role { font: 600 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--gold) }
    .pill { display: inline-block; margin-top: 14px; border: 1px solid rgba(227, 187, 70, .4); color: var(--gold); border-radius: 99px; padding: 5px 12px; font-size: 13px; font-weight: 600 }
    /* CTA */
    .cta { text-align: center; border: 1px solid rgba(255, 255, 255, .14); border-radius: 30px; padding: clamp(32px, 6vw, 72px) clamp(20px, 5vw, 64px); background: radial-gradient(120% 140% at 50% 0%, rgba(227, 187, 70, .14), transparent 60%), linear-gradient(180deg, var(--forest-2), var(--forest)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .15) }
    .cta .eyebrow { justify-content: center }
    .cta h2 { max-width: 18ch; margin-inline: auto }
    .cta .lede { margin-inline: auto }
    .cta .ctas { justify-content: center; margin-top: 28px }
    .nlinks a[aria-current=page]::after { transform: scaleX(1) }
    .mmenu a[aria-current=page] { color: var(--gold) }
      /* hero stats strip (beyond, campus …) */
    .hstats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 26px; max-width: 720px }
    .hstats div { border: 1px solid rgba(255, 255, 255, .16); border-radius: 16px; padding: 12px 14px; background: rgba(0, 0, 0, .28); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px) }
    .hstats b { display: block; font: 800 clamp(24px, 3vw, 32px)/1 var(--serif); color: var(--gold) }
    .hstats span { font-size: 12.5px; color: #dfe6dc }
    @media (min-width: 700px) { .hstats { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) } }
    .chips { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px }
    .chips li { border: 1px solid var(--line); border-radius: 99px; padding: 5px 11px; font-size: 12.5px; color: #dfe6dc; background: rgba(11, 23, 13, .3) }
    /* very small screens: let long button labels wrap instead of widening the page */
    .btn { max-width: 100% }
    @media (max-width: 360px) { .btn { white-space: normal; text-align: center } }