/* =============================================================================
   Adventure Classes — design system
   =============================================================================
   Sections
     01  Design tokens
     02  Reset
     03  Typography
     04  Layout
     05  Buttons
     06  Announcement bar
     07  Header & navigation
     08  Footer
     09  Cards
     10  Sections & headings
     11  Forms
     12  Accordion
     13  Utilities
     14  Motion

   Fonts: the display/body stacks resolve to the best available system face.
   Dropping self-hosted Sora + Inter WOFF2 files into /assets/fonts and adding
   them to the front of --font-display / --font-body is the only change needed
   to switch — no markup or component CSS depends on the family.
   ========================================================================== */


/* -- 01  Design tokens ---------------------------------------------------- */

:root {
  /* Brand — navy, taken from the logo disc */
  --brand-50:#EEF2F9;  --brand-100:#D6E0EF; --brand-200:#ADC0DE; --brand-300:#7E99C8;
  --brand-400:#4C6DA8; --brand-500:#2A4A82; --brand-600:#17346A; --brand-700:#0F2551;
  --brand-800:#0B1B3A; --brand-900:#071227; --brand-950:#040B18;

  /* Accent — summit gold, from the sunrise */
  --gold-50:#FFF8E6;  --gold-100:#FCEBBE; --gold-200:#F8DA8B; --gold-300:#F4C95A;
  --gold-400:#F0B429; --gold-500:#D69A12; --gold-600:#A9760A; --gold-700:#7C5606;

  /* Signal — urgency only */
  --alert-500:#C81E1E; --alert-600:#A31616; --alert-50:#FDE7E7;

  --success-500:#0F8B54; --success-50:#E4F5EC;

  /* Course-track identity, mirrored from course_categories.color */
  --track-school:#1D4ED8; --track-entrance:#0F8B54; --track-pg:#6D28D9;

  /* Neutrals */
  --ink-900:#0A0F1A; --ink-800:#151C2C; --ink-700:#28324A; --ink-600:#44506B;
  --ink-500:#6B7691; --ink-400:#98A2B8; --ink-300:#C6CDDB; --ink-200:#E2E7EF;
  --ink-100:#F1F4F9; --ink-050:#F8FAFC; --white:#FFFFFF;

  --surface:var(--white);
  --surface-muted:var(--ink-050);
  --border:var(--ink-200);

  --grad-hero:linear-gradient(135deg,#0B1B3A 0%,#12295C 55%,#17346A 100%);
  --grad-gold:linear-gradient(135deg,#F0B429 0%,#F4C95A 100%);

  /* Type */
  --font-display:"Segoe UI Variable Display","Segoe UI",-apple-system,BlinkMacSystemFont,
                 "SF Pro Display",Roboto,"Helvetica Neue",Arial,sans-serif;
  --font-body:"Segoe UI Variable Text","Segoe UI",-apple-system,BlinkMacSystemFont,
              "SF Pro Text",Roboto,"Helvetica Neue",Arial,sans-serif;

  /* Capped well below a typical display size: the hero must fit one screen on
     a 720px-tall laptop, and every extra headline line costs ~55px. */
  --fs-display:clamp(1.9rem,1.25rem + 1.9vw,3rem);
  --fs-h1:clamp(1.95rem,1.5rem + 2.1vw,3.25rem);
  --fs-h2:clamp(1.6rem,1.32rem + 1.4vw,2.5rem);
  --fs-h3:clamp(1.25rem,1.12rem + .7vw,1.6rem);
  --fs-h4:clamp(1.05rem,1rem + .35vw,1.25rem);
  --fs-lead:clamp(1.0625rem,1rem + .35vw,1.25rem);
  --fs-body:1rem;
  --fs-sm:.9375rem;
  --fs-xs:.8125rem;

  --lh-tight:1.14; --lh-snug:1.3; --lh-normal:1.62;
  --ls-tight:-.022em;

  /* Space */
  --sp-1:.25rem; --sp-2:.5rem;  --sp-3:.75rem; --sp-4:1rem;   --sp-5:1.25rem;
  --sp-6:1.5rem; --sp-8:2rem;   --sp-10:2.5rem;--sp-12:3rem;  --sp-16:4rem;
  --sp-20:5rem;  --sp-24:6rem;

  --section-y:clamp(3.5rem,2rem + 5.5vw,7rem);
  --container:1200px;
  --container-narrow:760px;
  --gutter:clamp(1rem,.5rem + 2vw,2.5rem);

  --r-sm:8px; --r-md:12px; --r-lg:16px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  --sh-xs:0 1px 2px rgba(11,27,58,.06);
  --sh-sm:0 2px 6px rgba(11,27,58,.07),0 1px 2px rgba(11,27,58,.05);
  --sh-md:0 8px 24px rgba(11,27,58,.08),0 2px 6px rgba(11,27,58,.05);
  --sh-lg:0 20px 48px rgba(11,27,58,.11),0 6px 14px rgba(11,27,58,.06);
  --sh-gold:0 10px 30px rgba(240,180,41,.30);

  --ease-out:cubic-bezier(.22,.61,.36,1);
  --t-fast:140ms; --t-base:240ms; --t-slow:420ms;

  --header-h:76px;
}


/* -- 02  Reset ------------------------------------------------------------ */

*,*::before,*::after{box-sizing:border-box}

html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:calc(var(--header-h) + 1rem)}

body{
  margin:0;
  background:var(--surface);
  color:var(--ink-800);
  font-family:var(--font-body);
  font-size:var(--fs-body);
  line-height:var(--lh-normal);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;

  /* Flex column for two reasons.
     1. The layout has out-of-flow children (skip link, mobile drawer, WhatsApp
        button). The newlines around them in the markup become real inline text
        nodes, each rendering a line box one line-height tall — which showed up
        as a blank strip above the header, between main and the footer, and
        below the footer. A flex container discards whitespace-only nodes.
     2. It gives a sticky footer for free: on a short page the footer sits at
        the bottom of the viewport rather than halfway up. */
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
@supports (min-height:100svh){body{min-height:100svh}}

/* Grows to fill the gap on short pages, and never shrinks on long ones. */
main{flex:1 0 auto}

/* The header must not be squashed by the flex container. */
body > header{flex:none}

h1,h2,h3,h4,h5,h6,p,figure,blockquote,dl,dd{margin:0}
ul[class],ol[class]{list-style:none;margin:0;padding:0}

img,svg,video{display:block;max-width:100%;height:auto}

/* Sprite icons carry no intrinsic size, so without this they render at the
   SVG default of 300x150. Scaling to the current font size means an icon
   always matches the text it sits beside. Component rules override freely. */
.icon{width:1.15em;height:1.15em;flex:none}
.btn .icon{width:1.05em;height:1.05em}
.acc-icon svg{width:15px;height:15px}

button,input,select,textarea{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;padding:0}

a{color:inherit;text-decoration:none}

:focus-visible{outline:3px solid var(--gold-400);outline-offset:3px;border-radius:4px}

::selection{background:var(--gold-200);color:var(--brand-900)}


/* -- 03  Typography ------------------------------------------------------- */

h1,h2,h3,h4{
  font-family:var(--font-display);
  font-weight:700;
  line-height:var(--lh-tight);
  letter-spacing:var(--ls-tight);
  color:var(--brand-800);
  text-wrap:balance;
}

h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3);line-height:var(--lh-snug)}
h4{font-size:var(--fs-h4);line-height:var(--lh-snug)}

p{text-wrap:pretty}

.lead{font-size:var(--fs-lead);color:var(--ink-600);line-height:1.55}

.eyebrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  color:var(--gold-600);
}
.eyebrow::before{content:"";width:22px;height:2px;background:var(--gold-400);border-radius:2px}

.on-dark h1,.on-dark h2,.on-dark h3,.on-dark h4{color:var(--white)}
.on-dark .lead{color:var(--brand-200)}
.on-dark .eyebrow{color:var(--gold-300)}


/* -- 04  Layout ----------------------------------------------------------- */

.container{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.container--narrow{max-width:var(--container-narrow)}

.section{padding-block:var(--section-y)}
.section--muted{background:var(--surface-muted)}
.section--dark{background:var(--grad-hero);color:var(--brand-100)}
.section--tight{padding-block:calc(var(--section-y) * .6)}

.grid{display:grid;gap:var(--sp-6)}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr))}
.grid--3{grid-template-columns:repeat(auto-fill,minmax(min(100%,300px),1fr))}
.grid--4{grid-template-columns:repeat(auto-fill,minmax(min(100%,220px),1fr))}

.skip-link{
  position:absolute;left:var(--sp-4);top:-100px;z-index:200;
  background:var(--gold-400);color:var(--brand-900);
  padding:var(--sp-3) var(--sp-5);border-radius:var(--r-pill);font-weight:700;
  transition:top var(--t-fast) var(--ease-out);
}
.skip-link:focus{top:var(--sp-4)}


/* -- 05  Buttons ---------------------------------------------------------- */

.btn{
  --btn-bg:var(--gold-400);
  --btn-fg:var(--brand-900);
  --btn-bd:transparent;
  display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-2);
  min-height:48px;padding:0 var(--sp-6);
  background:var(--btn-bg);color:var(--btn-fg);
  border:1px solid var(--btn-bd);border-radius:var(--r-pill);
  font-family:var(--font-display);font-size:var(--fs-sm);font-weight:700;
  letter-spacing:.005em;text-align:center;white-space:nowrap;
  transition:transform var(--t-fast) var(--ease-out),
             box-shadow var(--t-fast) var(--ease-out),
             background-color var(--t-fast) var(--ease-out);
}
.btn:hover{transform:translateY(-2px);box-shadow:var(--sh-gold)}
.btn:active{transform:translateY(0)}

/* Gold always carries navy text. There is deliberately no white-on-gold
   variant: that pairing is 2.0:1 and fails AA at every size. */
.btn--primary{--btn-bg:var(--gold-400);--btn-fg:var(--brand-900)}
.btn--primary:hover{--btn-bg:var(--gold-300)}

.btn--navy{--btn-bg:var(--brand-800);--btn-fg:var(--white)}
.btn--navy:hover{--btn-bg:var(--brand-700);box-shadow:var(--sh-md)}

.btn--outline{--btn-bg:transparent;--btn-fg:var(--brand-800);--btn-bd:var(--ink-300)}
.btn--outline:hover{--btn-bg:var(--brand-800);--btn-fg:var(--white);--btn-bd:var(--brand-800);box-shadow:var(--sh-md)}

.btn--ghost-light{--btn-bg:transparent;--btn-fg:var(--white);--btn-bd:rgba(255,255,255,.32)}
.btn--ghost-light:hover{--btn-bg:rgba(255,255,255,.12);--btn-bd:rgba(255,255,255,.5);box-shadow:none}

.btn--lg{min-height:56px;padding:0 var(--sp-8);font-size:var(--fs-body)}
.btn--sm{min-height:40px;padding:0 var(--sp-5);font-size:var(--fs-xs)}
.btn--block{display:flex;width:100%}

.link-arrow{
  display:inline-flex;align-items:center;gap:var(--sp-2);
  font-weight:600;font-size:var(--fs-sm);color:var(--brand-600);
}
.link-arrow span{transition:transform var(--t-fast) var(--ease-out)}
.link-arrow:hover{color:var(--brand-800)}
.link-arrow:hover span{transform:translateX(4px)}
.on-dark .link-arrow{color:var(--gold-300)}


/* -- 06  Announcement bar ------------------------------------------------- */

.announce{
  position:relative;z-index:60;
  background:var(--alert-500);color:var(--white);
  font-size:var(--fs-sm);
}
.announce--info{background:var(--brand-700)}
.announce--success{background:var(--success-500)}

.announce__inner{
  display:flex;align-items:center;justify-content:center;gap:var(--sp-4);
  min-height:44px;padding-block:var(--sp-2);
  text-align:center;flex-wrap:wrap;
}
.announce__text{font-weight:600}
.announce__link{
  text-decoration:underline;text-underline-offset:3px;
  font-weight:700;white-space:nowrap;
}
.announce__close{
  position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);
  width:32px;height:32px;display:grid;place-items:center;
  border-radius:var(--r-pill);color:rgba(255,255,255,.85);
}
.announce__close:hover{background:rgba(255,255,255,.15);color:var(--white)}

@media (max-width:640px){
  .announce__inner{padding-right:var(--sp-10)}
}


/* -- 07  Header & navigation ---------------------------------------------- */

.header{
  position:sticky;top:0;z-index:50;
  background:transparent;
  transition:background-color var(--t-base) var(--ease-out),
             box-shadow var(--t-base) var(--ease-out);
}
/* One of only three places glassmorphism is used site-wide.
   `--solid` is the same treatment applied from the start, for pages that do
   not open with a dark hero — without it the white nav text would sit on a
   white page and be invisible until the visitor scrolled. */
.header.is-stuck,
.header--solid{
  background:rgba(255,255,255,.86);
  -webkit-backdrop-filter:blur(14px) saturate(150%);
  backdrop-filter:blur(14px) saturate(150%);
  box-shadow:var(--sh-sm);
}
@supports not (backdrop-filter:blur(1px)){
  .header.is-stuck,.header--solid{background:var(--white)}
}

.header__inner{
  display:flex;align-items:center;gap:var(--sp-6);
  min-height:var(--header-h);
}

.brand{display:flex;align-items:center;gap:var(--sp-3);flex:none}
.brand__mark{width:46px;height:46px;flex:none}
.brand__text{display:flex;flex-direction:column;line-height:1.15}
.brand__name{
  font-family:var(--font-display);font-weight:800;font-size:1.0625rem;
  letter-spacing:-.01em;color:var(--white);
}
.brand__tagline{font-size:.6875rem;letter-spacing:.06em;color:var(--gold-300);font-weight:600}

.header.is-stuck .brand__name,.header--solid .brand__name{color:var(--brand-800)}
.header.is-stuck .brand__tagline,.header--solid .brand__tagline{color:var(--gold-600)}

.nav{margin-left:auto;display:none}
.nav__list{display:flex;align-items:center;gap:var(--sp-1)}
.nav__link{
  display:block;padding:var(--sp-2) var(--sp-3);border-radius:var(--r-sm);
  font-size:var(--fs-sm);font-weight:600;color:rgba(255,255,255,.88);
  transition:color var(--t-fast),background-color var(--t-fast);
}
.nav__link:hover{color:var(--white);background:rgba(255,255,255,.12)}
.nav__link[aria-current]{color:var(--gold-300)}

.header.is-stuck .nav__link,.header--solid .nav__link{color:var(--ink-600)}
.header.is-stuck .nav__link:hover,.header--solid .nav__link:hover{color:var(--brand-800);background:var(--ink-100)}
.header.is-stuck .nav__link[aria-current],.header--solid .nav__link[aria-current]{color:var(--brand-800)}
.header.is-stuck .nav__link[aria-current]::after,.header--solid .nav__link[aria-current]::after{
  content:"";display:block;height:2px;margin-top:3px;border-radius:2px;background:var(--gold-400);
}

.header__actions{display:none;gap:var(--sp-3);align-items:center;flex:none}

/* The phone button is white-on-transparent while the header sits over the dark
   hero. Once the header turns white it has to invert, or it disappears. */
.header.is-stuck .header__actions .btn--ghost-light,
.header--solid .header__actions .btn--ghost-light{
  --btn-fg:var(--brand-800);
  --btn-bd:var(--ink-300);
}
.header.is-stuck .header__actions .btn--ghost-light:hover,
.header--solid .header__actions .btn--ghost-light:hover{
  --btn-bg:var(--brand-800);
  --btn-fg:var(--white);
  --btn-bd:var(--brand-800);
}

.nav-toggle{
  margin-left:auto;width:44px;height:44px;display:grid;place-items:center;
  border-radius:var(--r-sm);color:var(--white);
}
.header.is-stuck .nav-toggle,.header--solid .nav-toggle{color:var(--brand-800)}
.nav-toggle__bar{display:block;width:22px;height:2px;background:currentColor;border-radius:2px;position:relative}
.nav-toggle__bar::before,.nav-toggle__bar::after{
  content:"";position:absolute;left:0;width:22px;height:2px;background:currentColor;border-radius:2px;
  transition:transform var(--t-fast) var(--ease-out),opacity var(--t-fast);
}
.nav-toggle__bar::before{top:-7px}
.nav-toggle__bar::after{top:7px}

/* Mobile drawer */
.drawer{
  position:fixed;inset:0;z-index:80;
  display:grid;grid-template-rows:auto 1fr;
  background:var(--brand-900);color:var(--white);
  transform:translateX(100%);
  transition:transform var(--t-base) var(--ease-out);
  overflow-y:auto;
}
.drawer.is-open{transform:translateX(0)}
.drawer__head{display:flex;align-items:center;min-height:var(--header-h);gap:var(--sp-3)}
.drawer__close{margin-left:auto;width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-sm);font-size:1.5rem}
.drawer__close:hover{background:rgba(255,255,255,.12)}
.drawer__list{display:flex;flex-direction:column;padding-block:var(--sp-4) var(--sp-8)}
.drawer__link{
  padding:var(--sp-4) 0;border-bottom:1px solid rgba(255,255,255,.1);
  font-family:var(--font-display);font-size:1.125rem;font-weight:600;
}
.drawer__link[aria-current]{color:var(--gold-300)}
.drawer__actions{display:grid;gap:var(--sp-3);padding-top:var(--sp-6)}

@media (min-width:1080px){
  .nav{display:block}
  .header__actions{display:flex}
  .nav-toggle{display:none}
}

/* Sticky mobile action bar */
.action-bar{
  position:fixed;left:0;right:0;bottom:0;z-index:70;
  display:grid;grid-template-columns:repeat(3,1fr);
  background:var(--brand-800);
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -6px 24px rgba(7,18,39,.28);
}
.action-bar__item{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  min-height:60px;color:var(--white);font-size:var(--fs-xs);font-weight:600;
}
.action-bar__item + .action-bar__item{border-left:1px solid rgba(255,255,255,.12)}
.action-bar__item--accent{background:var(--gold-400);color:var(--brand-900)}
.action-bar svg{width:20px;height:20px}

@media (min-width:1080px){.action-bar{display:none}}
@media (max-width:1079px){body{padding-bottom:60px}}

/* Floating buttons.
   One variable drives the stack so WhatsApp and back-to-top can never drift
   apart or collide with the mobile action bar. */
:root{--float-bottom:calc(60px + var(--sp-5));--float-size:54px}
@media (min-width:1080px){:root{--float-bottom:var(--sp-6)}}

.whatsapp-float{
  position:fixed;right:var(--sp-5);bottom:var(--float-bottom);z-index:65;
  width:var(--float-size);height:var(--float-size);display:grid;place-items:center;
  background:#25D366;color:var(--white);border-radius:var(--r-pill);
  box-shadow:0 8px 24px rgba(37,211,102,.4);
  transition:transform var(--t-fast) var(--ease-out);
}
.whatsapp-float:hover{transform:scale(1.06)}
.whatsapp-float svg{width:28px;height:28px}

/* Back to top — stacked directly above WhatsApp. */
.to-top{
  position:fixed;right:var(--sp-5);z-index:65;
  bottom:calc(var(--float-bottom) + var(--float-size) + var(--sp-3));
  width:46px;height:46px;display:grid;place-items:center;
  background:var(--brand-800);color:var(--white);
  border:1px solid rgba(255,255,255,.14);border-radius:var(--r-pill);
  box-shadow:var(--sh-md);
  opacity:0;transform:translateY(10px);pointer-events:none;
  transition:opacity var(--t-base) var(--ease-out),
             transform var(--t-base) var(--ease-out),
             background-color var(--t-fast);
}
.to-top[hidden]{display:none}
.to-top.is-visible{opacity:1;transform:none;pointer-events:auto}
.to-top:hover{background:var(--brand-600)}
/* The sprite only carries a right arrow; rotating it avoids a second symbol. */
.to-top .icon{width:20px;height:20px;transform:rotate(-90deg)}


/* -- 08  Footer ----------------------------------------------------------- */

.footer{background:var(--brand-900);color:var(--brand-200);padding-block:var(--sp-16) var(--sp-6)}
.footer__grid{
  display:grid;gap:var(--sp-10);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),1fr));
}
.footer__brand{max-width:34ch}
.footer__intro{margin-top:var(--sp-4);font-size:var(--fs-sm);color:var(--brand-300);line-height:1.7}
.footer__title{
  font-family:var(--font-display);font-size:var(--fs-xs);font-weight:700;
  letter-spacing:.11em;text-transform:uppercase;color:var(--white);
  margin-bottom:var(--sp-4);
}
.footer__list{display:flex;flex-direction:column;gap:var(--sp-3)}
.footer__list a{font-size:var(--fs-sm);color:var(--brand-300);transition:color var(--t-fast)}
.footer__list a:hover{color:var(--gold-300)}
.footer__contact{display:flex;flex-direction:column;gap:var(--sp-4);font-size:var(--fs-sm)}
.footer__contact-item{display:flex;gap:var(--sp-3);align-items:flex-start;color:var(--brand-300)}
.footer__contact-item svg{width:18px;height:18px;flex:none;margin-top:3px;color:var(--gold-400)}
.footer__contact-item a:hover{color:var(--gold-300)}
.footer__socials{display:flex;gap:var(--sp-3);margin-top:var(--sp-5)}
.footer__social{
  width:40px;height:40px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);color:var(--brand-200);transition:background-color var(--t-fast),color var(--t-fast);
}
.footer__social:hover{background:var(--gold-400);color:var(--brand-900)}
.footer__social svg{width:18px;height:18px}
.footer__bar{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);align-items:center;justify-content:space-between;
  margin-top:var(--sp-12);padding-top:var(--sp-6);
  border-top:1px solid rgba(255,255,255,.1);
  font-size:var(--fs-xs);color:var(--brand-400);
}
.footer__bar a:hover{color:var(--gold-300)}
.footer__legal{display:flex;gap:var(--sp-5);flex-wrap:wrap}


/* -- 09  Cards ------------------------------------------------------------ */

.card{
  position:relative;display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:var(--sp-6);height:100%;
  transition:transform var(--t-base) var(--ease-out),box-shadow var(--t-base) var(--ease-out),
             border-color var(--t-base);
}
.card:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:transparent}

/* Course */
.course-card{overflow:hidden;padding-top:calc(var(--sp-6) + 3px)}
.course-card::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:var(--track,var(--brand-600));
}
.course-card__top{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--sp-3)}
.chip{
  display:inline-block;padding:4px 10px;border-radius:var(--r-pill);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.02em;
  background:color-mix(in srgb,var(--track,var(--brand-600)) 12%,transparent);
  color:var(--track,var(--brand-600));
}
@supports not (background:color-mix(in srgb,red 10%,white)){
  .chip{background:var(--ink-100)}
}
.ribbon{
  padding:4px 10px;border-radius:var(--r-pill);
  background:var(--alert-50);color:var(--alert-600);
  font-size:var(--fs-xs);font-weight:700;white-space:nowrap;
}
.course-card__title{margin-top:var(--sp-4);font-size:1.25rem}
.course-card__desc{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-600);flex:1}
.course-card__meta{
  display:flex;flex-wrap:wrap;gap:var(--sp-2) var(--sp-4);
  margin-top:var(--sp-5);padding-top:var(--sp-4);border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--ink-500);
}
.course-card__meta span{display:inline-flex;align-items:center;gap:6px}
.course-card__cta{margin-top:var(--sp-4)}
.stretch::after{content:"";position:absolute;inset:0;border-radius:inherit}

/* Stat */
.stat{text-align:center}
.stat__value{
  font-family:var(--font-display);font-weight:800;
  font-size:clamp(2rem,1.4rem + 2.2vw,3rem);line-height:1;
  color:var(--gold-400);font-variant-numeric:tabular-nums;letter-spacing:-.03em;
}
.stat__label{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--brand-200)}

/* Feature */
.feature{display:flex;gap:var(--sp-4)}
.feature__icon{
  width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);
  background:rgba(240,180,41,.14);color:var(--gold-400);
}
.feature__icon svg{width:22px;height:22px}
.feature__title{font-size:var(--fs-h4);margin-bottom:4px}
.feature__text{font-size:var(--fs-sm);color:var(--brand-200);line-height:1.65}

/* Faculty */
.faculty-card{text-align:center;align-items:center}
.avatar{
  width:88px;height:88px;border-radius:var(--r-pill);
  display:grid;place-items:center;overflow:hidden;
  background:var(--grad-hero);color:var(--gold-300);
  font-family:var(--font-display);font-weight:800;font-size:1.75rem;letter-spacing:.02em;
}
.avatar img{width:100%;height:100%;object-fit:cover}
.faculty-card__name{margin-top:var(--sp-4);font-size:var(--fs-h4)}
.faculty-card__role{font-size:var(--fs-sm);color:var(--gold-600);font-weight:600;margin-top:2px}
.faculty-card__qual{font-size:var(--fs-xs);color:var(--ink-500);margin-top:var(--sp-2)}
.faculty-card__exp{
  margin-top:var(--sp-4);padding-top:var(--sp-3);border-top:1px solid var(--border);
  font-size:var(--fs-xs);color:var(--ink-500);width:100%;
}

/* Result */
.result-card{
  text-align:center;align-items:center;
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);
}
.result-card:hover{background:rgba(255,255,255,.1)}
.result-card__rank{
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--gold-400);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.result-card__name{margin-top:var(--sp-3);font-size:var(--fs-h4);color:var(--white)}
.result-card__exam{
  display:inline-block;margin-top:var(--sp-2);padding:3px 10px;border-radius:var(--r-pill);
  background:rgba(240,180,41,.16);color:var(--gold-300);
  font-size:var(--fs-xs);font-weight:700;
}
.result-card__college{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--brand-200)}

/* Testimonial */
.testimonial{position:relative}
.testimonial__quote{
  font-size:var(--fs-body);color:var(--ink-700);line-height:1.75;flex:1;
}
.testimonial__stars{display:flex;gap:3px;color:var(--gold-400);margin-bottom:var(--sp-4)}
.testimonial__stars svg{width:16px;height:16px}
.testimonial__author{display:flex;align-items:center;gap:var(--sp-3);margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border)}
.testimonial__author .avatar{width:44px;height:44px;font-size:.9375rem}
.testimonial__name{font-weight:700;font-size:var(--fs-sm);color:var(--brand-800)}
.testimonial__role{font-size:var(--fs-xs);color:var(--ink-500)}

/* Blog */
.blog-card{padding:0;overflow:hidden}
.blog-card__media{aspect-ratio:16/9;background:var(--grad-hero);display:grid;place-items:center;overflow:hidden}
.blog-card__media img{width:100%;height:100%;object-fit:cover}
.blog-card__media svg{width:48px;height:48px;color:rgba(240,180,41,.5)}
.blog-card__body{padding:var(--sp-5) var(--sp-6) var(--sp-6);display:flex;flex-direction:column;flex:1}
.blog-card__cat{
  align-self:flex-start;padding:3px 10px;border-radius:var(--r-pill);
  background:var(--ink-100);color:var(--brand-600);
  font-size:var(--fs-xs);font-weight:700;
}
.blog-card__title{margin-top:var(--sp-3);font-size:1.125rem;line-height:1.35}
.blog-card__excerpt{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-600);flex:1}
.blog-card__meta{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-500)}


/* -- 10  Sections & headings ---------------------------------------------- */

.section-head{max-width:62ch;margin-bottom:var(--sp-10)}
.section-head--center{margin-inline:auto;text-align:center}
.section-head__title{margin-top:var(--sp-3)}
.section-head__lead{margin-top:var(--sp-4)}

.section-foot{margin-top:var(--sp-10);text-align:center}

/* Hero
   Sized to one screen: everything — headline, buttons, slider controls,
   illustration and the stat strip — must be visible before any scrolling.
   `svh` rather than `vh` so the mobile URL bar collapsing does not change the
   height mid-scroll. Short viewports fall back to auto height rather than
   clipping content. */
.hero{
  position:relative;
  display:flex;flex-direction:column;
  min-height:100svh;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + var(--sp-5));
  padding-bottom:var(--sp-5);
  background:var(--grad-hero);
  color:var(--brand-100);
  overflow:hidden;
  isolation:isolate;
}
@supports not (min-height:100svh){.hero{min-height:100vh}}
@media (max-height:660px){.hero{min-height:auto;padding-block:calc(var(--header-h) + var(--sp-10)) var(--sp-10)}}

/* Wide enough that the headline breaks at three lines rather than four. */
.hero__inner{position:relative;z-index:1;max-width:min(52ch,54%)}
@media (max-width:1079px){.hero__inner{max-width:52ch}}

/* --- Ambient background layer --- */
.hero-bg{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}

/* Soft colour fields. Large, very low opacity, slowly drifting — enough to
   stop the navy reading as a flat block, not enough to compete with the text. */
.hero-bg__orb{position:absolute;border-radius:50%;filter:blur(70px)}
.hero-bg__orb--gold{
  width:640px;height:640px;right:-8%;top:-22%;
  background:radial-gradient(circle,rgba(240,180,41,.30) 0%,transparent 68%);
  animation:orbDriftA 26s ease-in-out infinite alternate;
}
.hero-bg__orb--blue{
  width:560px;height:560px;left:-14%;bottom:-24%;
  background:radial-gradient(circle,rgba(76,109,168,.42) 0%,transparent 68%);
  animation:orbDriftB 32s ease-in-out infinite alternate;
}
@keyframes orbDriftA{from{transform:translate3d(0,0,0)}to{transform:translate3d(-56px,44px,0)}}
@keyframes orbDriftB{from{transform:translate3d(0,0,0)}to{transform:translate3d(48px,-38px,0)}}

/* Science line-art: atom, DNA, a plotted curve. */
.hero-bg__art{position:absolute;inset:0;width:100%;height:100%;color:#FFFFFF;opacity:.07}
.hero-bg__drift{animation:artFloat 18s ease-in-out infinite alternate}
.hero-bg__drift--slow{animation-duration:26s;animation-direction:alternate-reverse}
@keyframes artFloat{from{transform:translateY(0)}to{transform:translateY(-18px)}}

.hero-bg__ridge{
  position:absolute;left:0;right:0;bottom:-1px;width:100%;height:170px;
  color:rgba(4,11,24,.55);
}

/* Student illustration.
   Anchored clear of the stats panel: overlapping it cut the figures off at the
   waist, which read as a rendering fault rather than a layered composition. */
.hero-figure{
  position:absolute;right:max(2vw,calc((100vw - var(--container)) / 2 - 24px));
  bottom:clamp(96px,13vh,168px);
  width:min(38vw,470px);height:auto;z-index:0;
  opacity:.96;pointer-events:none;
  animation:heroRise var(--t-slow) var(--ease-out) both;
}
@keyframes heroRise{from{opacity:0;transform:translateY(24px)}to{opacity:.96;transform:none}}
@media (max-width:1079px){.hero-figure{display:none}}

/* --- Slider --- */
.hero-slider{position:relative;z-index:1;display:grid}
.hero-slide{
  grid-area:1/1;
  opacity:0;visibility:hidden;
  transform:translateY(10px);
  transition:opacity var(--t-slow) var(--ease-out),
             transform var(--t-slow) var(--ease-out),
             visibility 0s linear var(--t-slow);
}
.hero-slide.is-active{
  opacity:1;visibility:visible;transform:none;
  transition-delay:0s;
}
/* Without JavaScript nothing gets .is-active, so the first slide must still
   show. :first-child wins because it is declared last. */
.no-js .hero-slide:first-child{opacity:1;visibility:visible;transform:none}

/* Full-bleed photography.
   A layer of its own covering the whole hero, rather than a child of each
   slide: inside the slide it can only ever be as large as the text block. */
.hero-media{position:absolute;inset:0;z-index:0;overflow:hidden}
.hero-media__item{
  position:absolute;inset:0;opacity:0;
  transition:opacity var(--t-slow) var(--ease-out);
}
.hero-media__item.is-active{opacity:1}
.hero-media__item img{width:100%;height:100%;object-fit:cover;object-position:center 32%}

/* Scrim. Heavier on the left, where the headline sits, fading right so the
   photograph is still legible. Sits above the images, below the text. */
.hero-media::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:
    linear-gradient(90deg,rgba(7,18,39,.95) 0%,rgba(7,18,39,.88) 34%,rgba(7,18,39,.55) 66%,rgba(7,18,39,.42) 100%),
    linear-gradient(to top,rgba(4,11,24,.70) 0%,transparent 42%);
}
@media (max-width:900px){
  /* On a narrow screen the text spans the full width, so the scrim must too. */
  .hero-media::after{background:linear-gradient(to top,rgba(4,11,24,.92) 12%,rgba(7,18,39,.80) 60%,rgba(7,18,39,.72) 100%)}
  .hero-media__item img{object-position:center 25%}
}

/* Controls sit under the text column, not at the far right — at the right they
   landed on top of the illustration. */
.hero-controls{
  position:relative;z-index:2;
  display:flex;align-items:center;gap:var(--sp-5);
  margin-top:var(--sp-6);
}
.hero-dots{display:flex;gap:var(--sp-2)}
.hero-dot{
  width:34px;height:22px;display:grid;place-items:center;border-radius:var(--r-pill);
}
.hero-dot span{
  display:block;width:26px;height:4px;border-radius:var(--r-pill);
  background:rgba(255,255,255,.28);transition:background-color var(--t-base),width var(--t-base);
}
.hero-dot:hover span{background:rgba(255,255,255,.5)}
.hero-dot.is-active span{background:var(--gold-400);width:32px}

.hero-arrows{display:flex;gap:var(--sp-2)}
.hero-arrow{
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid rgba(255,255,255,.24);color:var(--white);
  transition:background-color var(--t-fast),border-color var(--t-fast);
}
.hero-arrow:hover{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.44)}
[data-hero-prev] .icon{transform:rotate(180deg)}

@media (max-width:640px){
  .hero-arrows{display:none}
  .hero-controls{justify-content:center;margin-top:var(--sp-6)}
}

/* Ambient texture on the muted sections, so the page is not flat white
   between the navy bands. */
.section--muted{
  background-image:radial-gradient(rgba(11,27,58,.045) 1px,transparent 1px);
  background-size:22px 22px;
}

@media (prefers-reduced-motion:reduce){
  .hero-bg__orb,.hero-bg__drift,.hero-figure{animation:none}
  .hero-slide{transition:none}
}
/* Styled on the class, not the tag: only the first slide may be an <h1>
   (one per page), so the remaining slide titles are <p role="heading"> and
   must still look identical. */
.hero__title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:var(--fs-display);
  line-height:1.1;
  letter-spacing:var(--ls-tight);
  text-wrap:balance;
  color:var(--white);
  margin-top:var(--sp-4);
}
.hero__title em{font-style:normal;color:var(--gold-400)}
.hero__lead{margin-top:var(--sp-4);font-size:var(--fs-body);color:var(--brand-200);max-width:46ch;line-height:1.6}
.hero__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin-top:var(--sp-6)}

/* Pushed to the foot of the hero by the auto margin, so the block above stays
   optically centred whatever the viewport height. */
.hero__stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(2,1fr);gap:var(--sp-4);
  margin-top:auto;padding:var(--sp-4) var(--sp-5);
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-xl);
  -webkit-backdrop-filter:blur(12px);
  backdrop-filter:blur(12px);
}
.hero__stats .stat__value{font-size:clamp(1.6rem,1.15rem + 1.5vw,2.35rem)}
.hero__stats .stat__label{font-size:var(--fs-xs)}

@media (min-width:820px){
  .hero__stats{grid-template-columns:repeat(4,1fr)}
}
/* The stats container is a direct child of .container, which the flex column
   would otherwise stretch; this keeps the auto margin working. */
.hero > .container:last-of-type{margin-top:auto;width:100%}

/* Intro split */
.split{display:grid;gap:var(--sp-10);align-items:center}
@media (min-width:900px){.split{grid-template-columns:1.05fr .95fr;gap:var(--sp-16)}}

.tick-list{display:grid;gap:var(--sp-3);margin-top:var(--sp-6)}
.tick-list li{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm)}
.tick-list svg{width:20px;height:20px;flex:none;color:var(--success-500);margin-top:1px}

.media-frame{
  position:relative;border-radius:var(--r-2xl);overflow:hidden;
  background:var(--grad-hero);aspect-ratio:4/3;display:grid;place-items:center;
  box-shadow:var(--sh-lg);
}
.media-frame img{width:100%;height:100%;object-fit:cover}
.media-frame__mark{width:38%;max-width:190px;opacity:.9}
.media-badge{
  position:absolute;right:-14px;bottom:24px;
  background:var(--gold-400);color:var(--brand-900);
  padding:var(--sp-4) var(--sp-5);border-radius:var(--r-lg);
  box-shadow:var(--sh-lg);text-align:center;
}
.media-badge strong{display:block;font-family:var(--font-display);font-size:1.5rem;line-height:1}
.media-badge span{font-size:var(--fs-xs);font-weight:600}

/* Journey steps */
.journey{display:grid;gap:var(--sp-6);counter-reset:step}
@media (min-width:760px){.journey{grid-template-columns:repeat(4,1fr)}}
.journey__item{position:relative;padding-top:var(--sp-8)}
.journey__item::before{
  counter-increment:step;content:counter(step);
  position:absolute;top:0;left:0;
  width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--gold-400);color:var(--brand-900);
  font-family:var(--font-display);font-weight:800;font-size:.9375rem;
}
.journey__title{font-size:var(--fs-h4)}
.journey__text{margin-top:var(--sp-2);font-size:var(--fs-sm);color:var(--ink-600)}

/* Filter chips */
.filters{display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;margin-bottom:var(--sp-8)}
.filter{
  padding:9px 18px;border-radius:var(--r-pill);border:1px solid var(--border);
  background:var(--white);color:var(--ink-600);
  font-size:var(--fs-sm);font-weight:600;
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.filter:hover{border-color:var(--brand-300);color:var(--brand-700)}
.filter.is-active{background:var(--brand-800);border-color:var(--brand-800);color:var(--white)}

/* CTA band */
.cta-band{
  position:relative;overflow:hidden;
  background:var(--grad-hero);color:var(--brand-100);
  border-radius:var(--r-2xl);
  padding:clamp(2.5rem,1.5rem + 4vw,4.5rem) var(--gutter);
  text-align:center;
}
.cta-band::before{
  content:"";position:absolute;width:420px;height:420px;right:-120px;top:-160px;
  background:radial-gradient(circle,rgba(240,180,41,.22) 0%,transparent 66%);
}
.cta-band > *{position:relative}
.cta-band__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}

/* Contact block */
.contact-grid{display:grid;gap:var(--sp-10)}
@media (min-width:900px){.contact-grid{grid-template-columns:1fr 1fr;gap:var(--sp-16)}}
.info-list{display:grid;gap:var(--sp-5);margin-top:var(--sp-6)}
.info-item{display:flex;gap:var(--sp-4);align-items:flex-start}
.info-item__icon{
  width:42px;height:42px;flex:none;display:grid;place-items:center;border-radius:var(--r-md);
  background:var(--ink-100);color:var(--brand-700);
}
.info-item__icon svg{width:20px;height:20px}
.info-item__label{font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-500)}
.info-item__value{font-size:var(--fs-body);color:var(--brand-800);font-weight:600}
.info-item__value a:hover{color:var(--brand-600)}

.map-frame{
  border-radius:var(--r-xl);overflow:hidden;border:1px solid var(--border);
  aspect-ratio:16/11;background:var(--ink-100);
}
.map-frame iframe{width:100%;height:100%;border:0;display:block}

/* Admission poster — shown whole, never cropped */
.poster{
  margin:0;border-radius:var(--r-xl);overflow:hidden;
  border:1px solid var(--border);box-shadow:var(--sh-lg);background:var(--white);
}
.poster img{width:100%;height:auto;display:block}
.poster__caption{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--sp-4);padding:var(--sp-4) var(--sp-6);
  background:var(--brand-800);color:var(--brand-200);font-size:var(--fs-sm);
}

/* Gallery */
.album-card{padding:0;overflow:hidden}
.album-card__media{
  position:relative;aspect-ratio:4/3;background:var(--grad-hero);
  display:grid;place-items:center;overflow:hidden;
}
.album-card__media img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.album-card:hover .album-card__media img{transform:scale(1.04)}
.album-card__media .icon{width:44px;height:44px;color:rgba(240,180,41,.5)}
.album-card__count{
  position:absolute;right:var(--sp-3);bottom:var(--sp-3);
  padding:4px 10px;border-radius:var(--r-pill);
  background:rgba(7,18,39,.78);color:var(--white);
  font-size:var(--fs-xs);font-weight:600;
}
.album-card__body{padding:var(--sp-5)}
.album-card__title{font-size:var(--fs-h4)}
.album-card__date{margin-top:4px;font-size:var(--fs-xs);color:var(--ink-500)}

.photo-grid{
  display:grid;gap:var(--sp-3);
  grid-template-columns:repeat(auto-fill,minmax(min(100%,240px),1fr));
}
.photo{
  position:relative;display:block;aspect-ratio:4/3;overflow:hidden;
  border-radius:var(--r-md);background:var(--ink-100);
}
.photo img{width:100%;height:100%;object-fit:cover;transition:transform var(--t-slow) var(--ease-out)}
.photo:hover img{transform:scale(1.05)}
.photo__play{
  position:absolute;inset:0;display:grid;place-items:center;
  background:rgba(7,18,39,.42);color:var(--white);font-size:2rem;
}

/* Lightbox — the third and last use of glassmorphism. */
.lightbox{
  position:fixed;inset:0;z-index:120;
  display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:var(--sp-4);
  padding:var(--sp-6);
  background:rgba(4,11,24,.92);
  -webkit-backdrop-filter:blur(10px);
  backdrop-filter:blur(10px);
}
.lightbox[hidden]{display:none}
.lightbox__figure{margin:0;display:grid;place-items:center;gap:var(--sp-4);min-width:0}
.lightbox__figure img{
  max-width:100%;max-height:78vh;border-radius:var(--r-lg);
  box-shadow:0 30px 80px rgba(0,0,0,.5);
}
.lightbox__figure figcaption{color:var(--brand-200);font-size:var(--fs-sm);text-align:center}
.lightbox__close{
  position:absolute;top:var(--sp-5);right:var(--sp-5);
  width:44px;height:44px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);color:var(--white);
}
.lightbox__close:hover{background:rgba(255,255,255,.24)}
.lightbox__nav{
  width:48px;height:48px;display:grid;place-items:center;border-radius:var(--r-pill);
  background:rgba(255,255,255,.12);color:var(--white);flex:none;
}
.lightbox__nav:hover{background:rgba(255,255,255,.24)}
.lightbox__nav--prev .icon{transform:rotate(180deg)}

@media (max-width:640px){
  .lightbox{grid-template-columns:1fr;grid-template-rows:1fr auto;padding:var(--sp-4)}
  .lightbox__nav{position:static}
  .lightbox__nav--prev{justify-self:start;grid-row:2}
  .lightbox__nav--next{justify-self:end;grid-row:2;margin-top:calc(-48px - var(--sp-4))}
}

/* Empty state */
.empty{
  text-align:center;padding:var(--sp-12) var(--sp-6);
  border:1px dashed var(--border);border-radius:var(--r-lg);color:var(--ink-500);
}
.empty svg{width:40px;height:40px;margin:0 auto var(--sp-4);color:var(--ink-300)}


/* -- 10b  Inner pages ------------------------------------------------------ */

.page-hero{
  position:relative;overflow:hidden;
  margin-top:calc(var(--header-h) * -1);
  padding-top:calc(var(--header-h) + var(--sp-12));
  padding-bottom:var(--sp-12);
  background:var(--grad-hero);color:var(--brand-100);
}
.page-hero::after{
  content:"";position:absolute;right:-140px;top:-120px;width:420px;height:420px;
  background:radial-gradient(circle,rgba(240,180,41,.16) 0%,transparent 66%);
  pointer-events:none;
}
.page-hero > *{position:relative;z-index:1}
.page-hero__title{font-size:var(--fs-h1);color:var(--white);margin-top:var(--sp-4);max-width:20ch}
.page-hero__lead{margin-top:var(--sp-4);max-width:60ch}
.page-hero .hero__actions{margin-top:var(--sp-8)}

/* Breadcrumbs */
.crumbs ol{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-2);font-size:var(--fs-xs)}
.crumbs li{display:flex;align-items:center;gap:var(--sp-2);color:var(--brand-300)}
.crumbs li + li::before{content:"/";color:var(--brand-500)}
.crumbs a{color:var(--brand-200)}
.crumbs a:hover{color:var(--gold-300)}
.crumbs [aria-current]{color:var(--gold-300);font-weight:600}

.chip--onDark{
  background:rgba(240,180,41,.16);color:var(--gold-300);
  margin-top:var(--sp-6);
}

.hero-facts{
  display:flex;flex-wrap:wrap;gap:var(--sp-3) var(--sp-6);
  margin-top:var(--sp-6);font-size:var(--fs-sm);color:var(--brand-200);
}
.hero-facts li{display:inline-flex;align-items:center;gap:var(--sp-2)}
.hero-facts .icon{color:var(--gold-400)}

/* Two-column detail layout with a sticky rail */
.course-layout{display:grid;gap:var(--sp-10)}
@media (min-width:1000px){
  .course-layout{grid-template-columns:minmax(0,1fr) 340px;gap:var(--sp-16);align-items:start}
  .course-rail{position:sticky;top:calc(var(--header-h) + var(--sp-6))}
}

.prose h2{margin-bottom:var(--sp-4)}
.prose h2 + p{margin-top:0}
.prose h3{margin-top:var(--sp-8);margin-bottom:var(--sp-3)}
.prose p{color:var(--ink-600);line-height:1.8}
.prose p + p,.prose ul,.prose ol,.prose blockquote,.prose table{margin-top:var(--sp-4)}
.prose ul,.prose ol{padding-left:var(--sp-6);color:var(--ink-600);list-style:revert}
.prose li + li{margin-top:var(--sp-2)}
.prose a{color:var(--brand-600);text-decoration:underline;text-underline-offset:3px}
.prose a:hover{color:var(--brand-800)}
.prose strong{color:var(--brand-800)}
.prose blockquote{
  padding:var(--sp-5) var(--sp-6);border-left:3px solid var(--gold-400);
  background:var(--ink-050);border-radius:0 var(--r-md) var(--r-md) 0;
  font-size:var(--fs-lead);color:var(--ink-700);
}
.prose img{border-radius:var(--r-lg);margin-top:var(--sp-6)}
.prose table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.prose th,.prose td{padding:var(--sp-3);border:1px solid var(--border);text-align:left}
.prose th{background:var(--ink-050);color:var(--brand-800);font-weight:600}
.prose hr{border:0;border-top:1px solid var(--border);margin-block:var(--sp-8)}

/* Legal pages: longer, denser, read rather than scanned. */
.prose--legal h2{font-size:var(--fs-h3);margin-top:var(--sp-10)}
.prose--legal h2:first-child{margin-top:0}

.subject-grid{display:grid;gap:var(--sp-3);grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr))}
.subject{
  display:flex;gap:var(--sp-3);align-items:flex-start;
  padding:var(--sp-4);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--white);
}
.subject__dot{width:10px;height:10px;border-radius:50%;background:var(--track,var(--brand-600));margin-top:7px;flex:none}
.subject strong{display:block;color:var(--brand-800)}
.subject span{display:block;font-size:var(--fs-xs);color:var(--ink-500);margin-top:2px}

.rail-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-6);box-shadow:var(--sh-md);
}
.rail-card__title{font-size:var(--fs-h4)}
.rail-card__text{margin:var(--sp-3) 0 var(--sp-5);font-size:var(--fs-sm);color:var(--ink-600)}
.rail-note{margin-top:var(--sp-4);font-size:var(--fs-xs);color:var(--ink-500);text-align:center}
.rail-fee{
  margin-top:var(--sp-5);padding-top:var(--sp-5);border-top:1px solid var(--border);text-align:center;
}
.rail-fee__label{display:block;font-size:var(--fs-xs);letter-spacing:.08em;text-transform:uppercase;color:var(--ink-500)}
.rail-fee strong{display:block;font-family:var(--font-display);font-size:1.75rem;color:var(--brand-800)}
.rail-fee span{font-size:var(--fs-xs);color:var(--ink-500)}

.batch-list{display:grid;gap:var(--sp-4)}
.batch-list li{padding-bottom:var(--sp-4);border-bottom:1px solid var(--border);font-size:var(--fs-sm)}
.batch-list li:last-child{padding-bottom:0;border-bottom:0}
.batch-list strong{display:block;color:var(--brand-800)}
.batch-list span{display:block;color:var(--ink-500);font-size:var(--fs-xs);margin-top:2px}
.batch-seats{color:var(--success-500) !important;font-weight:600}

/* Filter chips render as links so they work without JavaScript. */
a.filter{display:inline-flex;align-items:center;gap:6px}

/* Two filter rows (year + exam) stacked with their own labels. */
.filter-bar{display:grid;gap:var(--sp-5);margin-bottom:var(--sp-8)}
.filter-bar__group{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3)}
.filter-bar__label{
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--ink-500);min-width:44px;
}
.filter-bar .filters{justify-content:flex-start}

/* Faculty profile head */
.profile-head{display:flex;flex-wrap:wrap;gap:var(--sp-6);align-items:center;margin-top:var(--sp-6)}
.profile-head__role{margin-top:var(--sp-2);color:var(--gold-300);font-weight:600}
.avatar--lg{width:140px;height:140px;font-size:2.75rem;border:3px solid rgba(255,255,255,.16)}

.chip-row{display:flex;flex-wrap:wrap;gap:var(--sp-2)}
.chip--link{
  padding:8px 16px;font-size:var(--fs-sm);
  transition:background-color var(--t-fast),color var(--t-fast);
}
.chip--link:hover{background:var(--track,var(--brand-600));color:var(--white)}

/* Topper cards */
.topper-card{text-align:center;align-items:center}
.topper-card__rank{
  margin-top:var(--sp-4);
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  color:var(--gold-600);font-variant-numeric:tabular-nums;letter-spacing:-.02em;
}
.topper-card__name{margin-top:var(--sp-2);font-size:var(--fs-h4)}
.topper-card .result-card__exam{background:var(--ink-100);color:var(--brand-600)}
.topper-card__college{margin-top:var(--sp-3);font-size:var(--fs-xs);color:var(--ink-500)}

/* Data table — a table on desktop, stacked cards on mobile. A six-column
   table is unreadable on a phone, and horizontal scrolling is worse. */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border);background:var(--white)}
.data-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.data-table th,.data-table td{padding:var(--sp-4) var(--sp-5);text-align:left}
.data-table thead th{
  background:var(--ink-050);color:var(--ink-500);
  font-size:var(--fs-xs);font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  border-bottom:1px solid var(--border);white-space:nowrap;
}
.data-table tbody tr{border-bottom:1px solid var(--ink-100)}
.data-table tbody tr:last-child{border-bottom:0}
.data-table tbody tr:hover{background:var(--ink-050)}
.data-table .num{font-variant-numeric:tabular-nums;white-space:nowrap}
.cell-name{font-weight:600;color:var(--brand-800)}

@media (max-width:820px){
  .table-wrap{border:0;background:transparent;overflow:visible}
  .data-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .data-table tbody tr{
    display:block;background:var(--white);border:1px solid var(--border);
    border-radius:var(--r-md);padding:var(--sp-4);margin-bottom:var(--sp-3);
  }
  .data-table td{
    display:flex;justify-content:space-between;gap:var(--sp-4);
    padding:var(--sp-2) 0;text-align:right;
  }
  .data-table td::before{
    content:attr(data-label);
    font-size:var(--fs-xs);font-weight:700;letter-spacing:.05em;text-transform:uppercase;
    color:var(--ink-500);text-align:left;
  }
}

/* Blog listing toolbar */
.blog-toolbar{
  display:flex;flex-wrap:wrap;gap:var(--sp-4);align-items:center;justify-content:space-between;
  margin-bottom:var(--sp-8);
}
.search-form{position:relative;flex:0 1 280px;min-width:220px}
.search-form .field__control{padding-right:48px;min-height:46px}
.search-form__submit{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:36px;height:36px;display:grid;place-items:center;border-radius:var(--r-sm);
  color:var(--ink-500);
}
.search-form__submit:hover{background:var(--ink-100);color:var(--brand-700)}

/* Article */
.article-hero{
  width:100%;border-radius:var(--r-xl);margin-bottom:var(--sp-8);
  aspect-ratio:16/9;object-fit:cover;box-shadow:var(--sh-md);
}
.article-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-4);
  margin-top:var(--sp-10);padding-top:var(--sp-6);border-top:1px solid var(--border);
}
.article-foot__label{font-size:var(--fs-sm);font-weight:600;color:var(--ink-500)}
.share-row{display:flex;gap:var(--sp-2)}
.share-btn{
  width:42px;height:42px;display:grid;place-items:center;border-radius:var(--r-pill);
  border:1px solid var(--border);color:var(--ink-600);
  transition:background-color var(--t-fast),color var(--t-fast),border-color var(--t-fast);
}
.share-btn:hover{background:var(--brand-800);border-color:var(--brand-800);color:var(--white)}

/* Pagination */
.pagination{
  display:flex;flex-wrap:wrap;gap:var(--sp-2);justify-content:center;align-items:center;
  margin-top:var(--sp-10);
}
.pagination__page,.pagination__step{
  min-width:42px;height:42px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 var(--sp-3);border:1px solid var(--border);border-radius:var(--r-md);
  background:var(--white);color:var(--ink-600);font-size:var(--fs-sm);font-weight:600;
  font-variant-numeric:tabular-nums;
  transition:border-color var(--t-fast),color var(--t-fast),background-color var(--t-fast);
}
.pagination__page:hover,.pagination__step:hover{border-color:var(--brand-400);color:var(--brand-700)}
.pagination__page.is-active{background:var(--brand-800);border-color:var(--brand-800);color:var(--white)}
.pagination__step.is-disabled{opacity:.4;pointer-events:none}
.pagination__gap{padding:0 var(--sp-2);color:var(--ink-400)}
.pagination__summary{margin-top:var(--sp-4);text-align:center;font-size:var(--fs-xs);color:var(--ink-500)}

.footer__credit{margin-left:auto}
.footer__credit a{color:var(--brand-300);transition:color var(--t-fast)}
.footer__credit a:hover{color:var(--gold-300)}


/* -- 11  Forms ------------------------------------------------------------ */

.field{display:flex;flex-direction:column;gap:var(--sp-2)}
.field__label{font-size:var(--fs-sm);font-weight:600;color:var(--brand-800)}
.field__label .req{color:var(--alert-500)}
.field__control{
  width:100%;min-height:50px;padding:var(--sp-3) var(--sp-4);
  background:var(--white);color:var(--ink-800);
  border:1px solid var(--ink-300);border-radius:var(--r-md);
  transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.field__control::placeholder{color:var(--ink-400)}
.field__control:focus{
  outline:none;border-color:var(--brand-500);
  box-shadow:0 0 0 4px rgba(42,74,130,.14);
}
textarea.field__control{min-height:120px;resize:vertical}
select.field__control{appearance:none;background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236B7691' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px;padding-right:44px}
.field__error{font-size:var(--fs-xs);color:var(--alert-500);font-weight:600}
.field__control[aria-invalid="true"]{border-color:var(--alert-500)}

.form-card{
  background:var(--white);border:1px solid var(--border);border-radius:var(--r-xl);
  padding:var(--sp-8);box-shadow:var(--sh-md);
}
.form-grid{display:grid;gap:var(--sp-5)}
@media (min-width:560px){.form-grid--2{grid-template-columns:1fr 1fr}}

.field__hint{font-size:var(--fs-xs);color:var(--ink-500)}

/* Moved off-screen rather than display:none — some bots skip hidden fields,
   which would defeat the point of the trap. */
.honeypot{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

.consent{display:flex;gap:var(--sp-3);align-items:flex-start;font-size:var(--fs-sm);color:var(--ink-600);cursor:pointer}
.consent input{width:20px;height:20px;flex:none;margin-top:2px;accent-color:var(--brand-700)}

.form-note{font-size:var(--fs-xs);color:var(--ink-500);text-align:center}
.form-note a{color:var(--brand-600);text-decoration:underline;text-underline-offset:2px}

/* Explanatory column beside the form */
.form-layout{display:grid;gap:var(--sp-10)}
@media (min-width:960px){
  .form-layout{grid-template-columns:0.85fr 1.15fr;gap:var(--sp-16);align-items:start}
}

.map-frame--wide{aspect-ratio:21/9}
@media (max-width:720px){.map-frame--wide{aspect-ratio:4/3}}

/* Thank-you page */
.thankyou{padding-top:calc(var(--header-h) + var(--section-y))}
.thankyou__tick{
  width:88px;height:88px;display:grid;place-items:center;margin:0 auto;
  border-radius:var(--r-pill);background:var(--success-50);color:var(--success-500);
}
.thankyou__tick svg{width:42px;height:42px}
.thankyou__actions{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-8)}
.thankyou__next{margin-top:var(--sp-16);padding-top:var(--sp-8);border-top:1px solid var(--border)}
.thankyou__links{display:flex;flex-wrap:wrap;gap:var(--sp-3);justify-content:center;margin-top:var(--sp-5)}
.thankyou__links a{
  padding:10px 20px;border:1px solid var(--border);border-radius:var(--r-pill);
  font-size:var(--fs-sm);font-weight:600;color:var(--ink-600);
  transition:border-color var(--t-fast),color var(--t-fast);
}
.thankyou__links a:hover{border-color:var(--brand-400);color:var(--brand-700)}

.alert{padding:var(--sp-4) var(--sp-5);border-radius:var(--r-md);font-size:var(--fs-sm);font-weight:600}
.alert--success{background:var(--success-50);color:#0A6B41}
.alert--error{background:var(--alert-50);color:var(--alert-600)}


/* -- 12  Accordion -------------------------------------------------------- */

.accordion{display:grid;gap:var(--sp-3)}
.acc-item{border:1px solid var(--border);border-radius:var(--r-md);background:var(--white);overflow:hidden}
.acc-item[open]{border-color:var(--brand-300);box-shadow:var(--sh-sm)}
.acc-trigger{
  display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4);
  width:100%;padding:var(--sp-5);cursor:pointer;
  font-family:var(--font-display);font-weight:600;font-size:1.0625rem;color:var(--brand-800);
  list-style:none;text-align:left;
}
.acc-trigger::-webkit-details-marker{display:none}
.acc-trigger:hover{background:var(--ink-050)}
.acc-icon{
  width:28px;height:28px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--ink-100);color:var(--brand-700);
  transition:transform var(--t-base) var(--ease-out),background-color var(--t-fast);
}
.acc-item[open] .acc-icon{transform:rotate(45deg);background:var(--gold-400);color:var(--brand-900)}
.acc-body{padding:0 var(--sp-5) var(--sp-5);color:var(--ink-600);font-size:var(--fs-sm);line-height:1.7}


/* -- 13  Utilities -------------------------------------------------------- */

.sr-only{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.u-center{text-align:center}
.u-mt-4{margin-top:var(--sp-4)}
.u-mt-6{margin-top:var(--sp-6)}
.u-mt-8{margin-top:var(--sp-8)}
.u-hide{display:none}


/* -- 14  Motion ----------------------------------------------------------- */

[data-reveal]{opacity:0;transform:translateY(14px)}
[data-reveal].is-visible{
  opacity:1;transform:none;
  transition:opacity var(--t-slow) var(--ease-out),transform var(--t-slow) var(--ease-out);
  transition-delay:var(--reveal-delay,0ms);
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.01ms !important;animation-iteration-count:1 !important;
    transition-duration:.01ms !important;
  }
  [data-reveal]{opacity:1;transform:none}
}