@charset "UTF-8";
/* ═══════════════════════════════════════════════════════════════════════════
   NBIPS DESIGN SYSTEM
   North Bengal Institute of Pharmaceutical Science

   One stylesheet, no build step, no framework. Everything below is written to
   be read: tokens first, then primitives, then components, then page-specific
   blocks, then utilities.

   The visual signature is the HEX LATTICE — a hexagonal molecular grid drawn
   from a benzene ring — used quietly in hero backgrounds, section transitions,
   page headers and loading states. Capsule geometry gives the radius language:
   999px on interactive pills, 2px on surfaces.

   Contents
     01  Tokens
     02  Reset & base
     03  Typography
     04  Layout & containers
     05  The hex-lattice motif
     06  Buttons & links
     07  Forms
     08  Cards & surfaces
     09  Media
     10  Header & navigation
     11  Hero
     12  Section furniture
     13  Content blocks
     14  Tables & data
     15  Footer
     16  Feedback: flashes, badges, empty states
     17  Utilities
     18  Motion & accessibility
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────
   01  TOKENS
   ─────────────────────────────────────────────────────────────── */

:root {
    /* ── Brand: royal blue and gold ─────────────────────────
       Blue carries the institution, gold carries the emphasis. The
       proportion matters more than the hues: blue is structural — headers,
       footers, buttons, headings — and gold appears in small, deliberate
       amounts, never as a background for body text.

       Gold is a poor text colour on white (#C8860D reaches only 3.6:1) so
       it is used for rules, bullets, underlines, numbers and fills, and for
       TEXT ONLY on the dark blue surfaces, where it is comfortably legible.
       Anything interactive on a light background stays blue. ───────────── */

    --blue-950: #04162E;   /* near-black blue, gradient ends            */
    --blue-900: #08203F;   /* deepest — headings on white, footer ground */
    --blue-800: #0B3D8F;   /* primary royal blue — buttons, dark sections  */
    --blue-700: #12489F;
    --blue-600: #1A5BC4;   /* interactive: links, focus, active states     */
    --blue-500: #2E74E0;
    --blue-100: #DCE8FA;
    --blue-050: #EFF4FC;

    --gold-700: #96620A;   /* text-safe gold: >=4.7:1 on every light ground */
    --gold-600: #C8860D;
    --gold-500: #E9A319;   /* primary gold */
    --gold-400: #F7BE3F;   /* on dark blue */
    --gold-100: #FDF3DC;

    /* The palette used to be navy and teal. These names are kept pointing at
       the new scale rather than renamed across two hundred usages — one place
       to change a colour, and no risk of missing one. */
    --navy-900: var(--blue-900);
    --navy-800: var(--blue-800);
    --navy-700: var(--blue-700);
    --navy-600: var(--blue-600);
    --navy-500: var(--blue-500);

    --teal-900: var(--blue-900);
    --teal-800: var(--blue-700);
    --teal-700: var(--blue-600);   /* links and interactive accents */
    --teal-600: var(--blue-500);
    --teal-500: var(--gold-400);   /* accents on dark surfaces only */
    --teal-100: var(--blue-100);
    --teal-050: var(--blue-050);

    /* Accent — pharmaceutical green. Accent only, never dominant. */
    --green-700: #2F7A55;
    --green-600: #3E9C6D;
    --green-100: #E3F2EA;

    /* ── Neutrals ──────────────────────────────────────────── */
    --white:      #FFFFFF;
    --paper:      #F7F9FA;   /* off-white page ground */
    --paper-warm: #F4F6F6;
    --grey-100:   #EDF1F3;
    --grey-200:   #DDE4E8;
    --grey-300:   #C4CFD6;
    --grey-400:   #9AA9B4;
    --grey-500:   #5F7080;   /* muted blue-grey — darkened from #6E808E,
                                which reached only 4.08:1 on white and 3.9:1
                                on the paper ground. Now 5.1 and 4.8. */
    --grey-600:   #51636F;
    --ink:        #16232E;

    /* ── Semantic ──────────────────────────────────────────── */
    --success:    #2F7A55;
    --success-bg: #E3F2EA;
    --warning:    #9A6412;
    --warning-bg: #FBF1DF;
    --danger:     #A83232;
    --danger-bg:  #FBE9E9;
    --info:       var(--teal-700);
    --info-bg:    var(--teal-050);

    /* ── Typography ────────────────────────────────────────── */
    --font-display: "Source Serif 4", "Source Serif Pro", Georgia, "Times New Roman", serif;
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                 "Helvetica Neue", Arial, "Noto Sans", sans-serif;
    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;

    /* Fluid type scale — 1.250 minor third at the small end, 1.333 at the large */
    --text-xs:   0.75rem;    /* 12 */
    --text-sm:   0.8125rem;  /* 13 */
    --text-base: 0.9375rem;  /* 15 */
    --text-md:   1rem;       /* 16 */
    --text-lg:   1.125rem;   /* 18 */
    --text-xl:   clamp(1.25rem, 0.6vw + 1.1rem, 1.4375rem);
    --text-2xl:  clamp(1.5rem, 1vw + 1.25rem, 1.875rem);
    --text-3xl:  clamp(1.75rem, 1.8vw + 1.35rem, 2.5rem);
    --text-4xl:  clamp(2.125rem, 2.8vw + 1.4rem, 3.25rem);
    --text-5xl:  clamp(2.5rem, 4vw + 1.4rem, 4.25rem);

    --leading-tight:   1.12;
    --leading-snug:    1.28;
    --leading-normal:  1.55;
    --leading-relaxed: 1.72;

    --tracking-tight: -0.018em;
    --tracking-snug:  -0.008em;
    --tracking-wide:   0.06em;
    --tracking-eyebrow: 0.14em;

    /* ── Spacing (8px base, generous by design) ────────────── */
    --space-1: 0.25rem;
    --space-2: 0.5rem;
    --space-3: 0.75rem;
    --space-4: 1rem;
    --space-5: 1.5rem;
    --space-6: 2rem;
    --space-7: 2.5rem;
    --space-8: 3rem;
    --space-9: 4rem;
    --space-10: 5rem;
    --space-11: 6.5rem;
    --space-12: 8rem;

    /* Section rhythm — the single most important spacing decision on the site */
    /* Tightened from 7rem/9rem. The old rhythm was magazine-generous — it
       read as calm on a page with a lot to say, and as empty on a page still
       being filled in. At 5rem a visitor sees roughly one more band per
       screen, which is what "busier" actually means. */
    --section-y:       clamp(3rem, 5vw, 5rem);
    --section-y-large: clamp(3.75rem, 6.5vw, 6.5rem);

    /* ── Layout ────────────────────────────────────────────── */
    --container:      1220px;
    --container-wide: 1440px;
    --container-text: 68ch;
    --gutter: clamp(1.25rem, 4vw, 3rem);

    /* ── Radius — capsule geometry ─────────────────────────── */
    --radius-pill:  999px;
    --radius-card:  3px;
    --radius-sharp: 2px;
    --radius-media: 3px;

    /* ── Elevation — restrained; this is not a SaaS dashboard ─ */
    --shadow-xs: 0 1px 2px rgba(6, 26, 46, 0.05);
    --shadow-sm: 0 1px 3px rgba(6, 26, 46, 0.07), 0 1px 2px rgba(6, 26, 46, 0.04);
    --shadow-md: 0 6px 20px -6px rgba(6, 26, 46, 0.14), 0 2px 6px rgba(6, 26, 46, 0.05);
    --shadow-lg: 0 20px 48px -16px rgba(6, 26, 46, 0.22), 0 4px 12px rgba(6, 26, 46, 0.06);

    /* ── Borders ───────────────────────────────────────────── */
    --border:        1px solid rgba(10, 37, 64, 0.10);
    --border-strong: 1px solid rgba(10, 37, 64, 0.18);
    --border-light:  1px solid rgba(255, 255, 255, 0.14);

    /* ── Motion ────────────────────────────────────────────── */
    --ease-out: cubic-bezier(0.22, 0.61, 0.36, 1);
    --ease-in-out: cubic-bezier(0.65, 0.05, 0.36, 1);
    --duration-fast: 140ms;
    --duration: 240ms;
    --duration-slow: 480ms;

    --header-height: 76px;
    --z-header: 100;
    --z-dropdown: 110;
    --z-overlay: 200;
    --z-modal: 210;
}

/* ───────────────────────────────────────────────────────────────
   02  RESET & BASE
   ─────────────────────────────────────────────────────────────── */

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

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

body {
    margin: 0;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: var(--leading-normal);
    color: var(--ink);
    background: var(--white);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    text-rendering: optimizeLegibility;
    overflow-x: hidden;
}

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

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

ul, ol { margin: 0; padding: 0; }
figure, blockquote { margin: 0; }

hr {
    border: 0;
    border-top: var(--border);
    margin: var(--space-8) 0;
}

::selection {
    background: var(--teal-100);
    color: var(--navy-900);
}

/* Skip link — first stop for keyboard and screen-reader users */
.skip-link {
    position: absolute;
    left: var(--space-4);
    top: -100px;
    z-index: 999;
    padding: 0.75rem 1.25rem;
    background: var(--navy-800);
    color: var(--white);
    border-radius: var(--radius-sharp);
    font-weight: 500;
    text-decoration: none;
    transition: top var(--duration) var(--ease-out);
}
.skip-link:focus { top: var(--space-4); }

/* ───────────────────────────────────────────────────────────────
   03  TYPOGRAPHY
   ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4, h5, h6 {
    margin: 0;
    font-family: var(--font-display);
    font-weight: 400;
    line-height: var(--leading-tight);
    letter-spacing: var(--tracking-tight);
    color: var(--navy-900);
    text-wrap: balance;
}

h1 { font-size: var(--text-4xl); }
h2 { font-size: var(--text-3xl); }
h3 { font-size: var(--text-2xl); line-height: var(--leading-snug); }
h4 { font-size: var(--text-xl); line-height: var(--leading-snug); }
h5 { font-size: var(--text-lg); line-height: var(--leading-snug); }
h6 {
    font-family: var(--font-body);
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--grey-600);
}

p { margin: 0 0 var(--space-4); text-wrap: pretty; }
p:last-child { margin-bottom: 0; }

a {
    color: var(--teal-700);
    text-decoration-thickness: 1px;
    text-underline-offset: 0.18em;
    transition: color var(--duration-fast) var(--ease-out);
}
a:hover { color: var(--teal-800); }

strong, b { font-weight: 600; }

small { font-size: var(--text-sm); }

/* The eyebrow: small, spaced, teal. It appears above almost every heading and
   is a large part of what makes the site feel institutional rather than generic. */
.eyebrow {
    display: block;
    margin: 0 0 var(--space-3);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--gold-700);
}
/* A short gold rule above every section eyebrow. This is where most of the
   gold on a light page lives — small, repeated, structural. */
.eyebrow::before {
    content: "";
    display: block;
    width: 34px;
    height: 3px;
    border-radius: 2px;
    margin-bottom: 0.7rem;
    background: var(--gold-500);
}
.section-head--center .eyebrow::before { margin-inline: auto; }
.eyebrow--light::before { background: var(--gold-400); }
/* The eyebrow does not always know what it is sitting on. On the dark
   surfaces it takes the bright gold; the dark gold is for light grounds. */
.section--navy .eyebrow,
.hero .eyebrow,
.page-header .eyebrow,
.site-footer .eyebrow { color: var(--gold-400); }
.section--navy .eyebrow::before,
.hero .eyebrow::before,
.page-header .eyebrow::before,
.site-footer .eyebrow::before { background: var(--gold-400); }
.eyebrow--light { color: var(--teal-500); }

.lede {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--grey-600);
    max-width: 62ch;
}

.display {
    font-family: var(--font-display);
    font-size: var(--text-5xl);
    line-height: 1.06;
    letter-spacing: var(--tracking-tight);
}

.text-muted { color: var(--grey-500); }
.text-small { font-size: var(--text-sm); }

/* Long-form prose: the editorial voice of the site */
.prose {
    max-width: var(--container-text);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--grey-600);
}
.prose > * + * { margin-top: var(--space-5); }
.prose h2 { font-size: var(--text-2xl); color: var(--navy-900); margin-top: var(--space-8); }
.prose h3 { font-size: var(--text-xl); color: var(--navy-900); margin-top: var(--space-7); }
.prose h2 + *, .prose h3 + * { margin-top: var(--space-4); }
.prose p { margin: 0; }
.prose ul, .prose ol { padding-left: 1.35em; }
.prose li { margin-bottom: var(--space-2); }
.prose li::marker { color: var(--teal-600); }
.prose a { font-weight: 500; }
.prose blockquote {
    padding-left: var(--space-5);
    border-left: 2px solid var(--teal-600);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--navy-800);
}
.prose img { border-radius: var(--radius-media); margin-block: var(--space-6); }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--text-base); }
.prose th, .prose td { padding: 0.75rem 1rem; border-bottom: var(--border); text-align: left; }
.prose th { color: var(--navy-800); font-weight: 600; font-family: var(--font-body); }

/* ───────────────────────────────────────────────────────────────
   04  LAYOUT & CONTAINERS
   ─────────────────────────────────────────────────────────────── */

.container {
    width: 100%;
    max-width: var(--container);
    margin-inline: auto;
    padding-inline: var(--gutter);
}
.container--wide { max-width: var(--container-wide); }
.container--narrow { max-width: 880px; }
.container--text { max-width: 74ch; }

.section { padding-block: var(--section-y); }
.section--large { padding-block: var(--section-y-large); }
.section--tight { padding-block: clamp(2.5rem, 5vw, 4rem); }
.section--flush-top { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--paper { background: var(--paper); }
.section--tint  { background: var(--teal-050); }
.section--navy {
    background: var(--navy-800);
    color: rgba(255, 255, 255, 0.82);
}
.section--navy h1, .section--navy h2, .section--navy h3, .section--navy h4 { color: var(--white); }
.section--navy .lede { color: rgba(255, 255, 255, 0.72); }
.section--navy a:not(.btn) { color: var(--teal-500); }

/* Grids */
.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
/* For two-up cards inside an already narrow column (the newsroom band). */
.grid--2-narrow { grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)); }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr)); }
.grid--tight { gap: var(--space-4); }
.grid--loose { gap: var(--space-8); }

/* Editorial split: text on one side, media on the other */
.split {
    display: grid;
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: center;
}
@media (min-width: 900px) {
    .split { grid-template-columns: 1fr 1fr; }
    .split--text-narrow { grid-template-columns: 5fr 6fr; }
    .split--media-narrow { grid-template-columns: 6fr 5fr; }
    .split--reverse > :first-child { order: 2; }
}

.stack > * + * { margin-top: var(--space-4); }
.stack--sm > * + * { margin-top: var(--space-2); }
.stack--lg > * + * { margin-top: var(--space-6); }

.cluster {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
}

/* ───────────────────────────────────────────────────────────────
   05  THE HEX LATTICE — the NBIPS visual signature
   ─────────────────────────────────────────────────────────────── */

/* A hexagonal molecular grid, drawn as an inline SVG data URI so it costs no
   request. It appears at 3–7% opacity behind dark surfaces, and never anywhere
   it would compete with a photograph or with text. */
.lattice {
    position: relative;
    isolation: isolate;
}
.lattice::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 112px 97px;
    opacity: 0.055;
    pointer-events: none;
}
.lattice--dense::before { background-size: 72px 62px; opacity: 0.05; }
.lattice--faint::before { opacity: 0.032; }

/* On light surfaces the lattice is drawn in navy instead of white. */
.lattice--ink::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%230A2540' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.045;
}

/* The section rule: a hairline interrupted by a single small hexagon.
   Used between major bands instead of a plain <hr>. */
.rule {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    color: var(--grey-300);
}
.rule::before, .rule::after {
    content: "";
    flex: 1;
    height: 1px;
    background: currentColor;
    opacity: 0.5;
}
.rule__mark {
    width: 12px;
    height: 14px;
    flex: none;
    background: var(--teal-600);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

/* Hexagonal frame for icons and small marks */
.hex {
    display: grid;
    place-items: center;
    width: 46px;
    height: 52px;
    flex: none;
    background: var(--teal-050);
    color: var(--teal-700);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    transition: background var(--duration) var(--ease-out), color var(--duration) var(--ease-out);
}
.hex svg { width: 20px; height: 20px; }
.hex--navy { background: var(--navy-800); color: var(--teal-500); }
.hex--outline { background: rgba(26, 91, 196, 0.08); }
.hex--sm { width: 34px; height: 38px; }
.hex--sm svg { width: 15px; height: 15px; }
.hex--lg { width: 62px; height: 70px; }
.hex--lg svg { width: 26px; height: 26px; }

/* Loading state — three hexagons breathing in sequence */
.hex-loader {
    display: inline-flex;
    gap: 6px;
    align-items: center;
}
.hex-loader span {
    width: 10px;
    height: 11px;
    background: var(--teal-600);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
    animation: hex-pulse 1.15s var(--ease-in-out) infinite;
}
.hex-loader span:nth-child(2) { animation-delay: 0.14s; }
.hex-loader span:nth-child(3) { animation-delay: 0.28s; }

@keyframes hex-pulse {
    0%, 100% { opacity: 0.25; transform: translateY(0); }
    50%      { opacity: 1;    transform: translateY(-3px); }
}

/* ───────────────────────────────────────────────────────────────
   06  BUTTONS & LINKS
   ─────────────────────────────────────────────────────────────── */

.btn {
    --btn-bg: var(--navy-800);
    --btn-fg: var(--white);
    --btn-border: var(--navy-800);

    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.55em;
    padding: 0.8125rem 1.75rem;
    min-height: 46px;
    font-family: var(--font-body);
    font-size: var(--text-base);
    font-weight: 500;
    letter-spacing: 0.005em;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-border);
    border-radius: var(--radius-pill);
    cursor: pointer;
    transition: background var(--duration) var(--ease-out),
                border-color var(--duration) var(--ease-out),
                color var(--duration) var(--ease-out),
                transform var(--duration-fast) var(--ease-out);
}
.btn:hover {
    --btn-bg: var(--teal-700);
    --btn-border: var(--teal-700);
    color: var(--white);
    transform: translateY(-1px);
}
.btn:active { transform: translateY(0); }

.btn--secondary {
    --btn-bg: transparent;
    --btn-fg: var(--navy-800);
    --btn-border: rgba(10, 37, 64, 0.22);
}
.btn--secondary:hover {
    --btn-bg: var(--navy-800);
    --btn-border: var(--navy-800);
    color: var(--white);
}

.btn--teal { --btn-bg: var(--teal-700); --btn-border: var(--teal-700); }
.btn--teal:hover { --btn-bg: var(--teal-800); --btn-border: var(--teal-800); }

.btn--apply {
    --btn-bg: var(--gold-500);
    --btn-fg: var(--blue-900);
    --btn-border: var(--gold-500);
    font-weight: 600;
}
.btn--apply:hover {
    --btn-bg: var(--gold-400);
    --btn-border: var(--gold-400);
    color: var(--blue-900);
}

.btn--light {
    --btn-bg: var(--white);
    --btn-fg: var(--navy-800);
    --btn-border: var(--white);
}
.btn--light:hover { --btn-bg: var(--teal-050); --btn-border: var(--teal-050); color: var(--navy-900); }

.btn--outline-light {
    --btn-bg: transparent;
    --btn-fg: var(--white);
    --btn-border: rgba(255, 255, 255, 0.35);
}
.btn--outline-light:hover {
    --btn-bg: var(--white);
    --btn-border: var(--white);
    color: var(--navy-800);
}

.btn--ghost {
    --btn-bg: transparent;
    --btn-fg: var(--teal-700);
    --btn-border: transparent;
    padding-inline: 0.5rem;
}
.btn--ghost:hover { --btn-bg: transparent; --btn-border: transparent; color: var(--teal-800); transform: none; }

.btn--sm { padding: 0.5rem 1.125rem; min-height: 36px; font-size: var(--text-sm); }
.btn--lg { padding: 1rem 2.25rem; min-height: 54px; font-size: var(--text-lg); }
.btn--block { display: flex; width: 100%; }
.btn--danger { --btn-bg: var(--danger); --btn-border: var(--danger); }
.btn--danger:hover { --btn-bg: #8E2828; --btn-border: #8E2828; }

.btn[disabled], .btn[aria-disabled="true"] {
    opacity: 0.45;
    pointer-events: none;
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }

/* The arrow link — used everywhere in place of a "read more" button */
.link-arrow {
    display: inline-flex;
    align-items: center;
    gap: 0.5em;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--teal-700);
    text-decoration: none;
}
.link-arrow::after {
    content: "";
    width: 1.1em;
    height: 1.1em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
    transition: transform var(--duration) var(--ease-out);
}
.link-arrow:hover::after { transform: translateX(3px); }
.link-arrow--light { color: var(--teal-500); }

/* ───────────────────────────────────────────────────────────────
   07  FORMS
   ─────────────────────────────────────────────────────────────── */

.field { margin-bottom: var(--space-5); }

.field__label {
    display: block;
    margin-bottom: var(--space-2);
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--navy-800);
    letter-spacing: 0.002em;
}
.field__label .required { color: var(--danger); margin-left: 0.15em; }
.field__label .optional {
    margin-left: 0.4em;
    font-weight: 400;
    color: var(--grey-500);
    text-transform: none;
    letter-spacing: 0;
}

.field__help {
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--grey-500);
}

.field__error {
    display: flex;
    align-items: flex-start;
    gap: 0.4em;
    margin: var(--space-2) 0 0;
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--danger);
}
.field__error::before {
    content: "";
    width: 1.05em;
    height: 1.05em;
    flex: none;
    margin-top: 0.15em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M12 8v5M12 16.5v.01'/%3E%3C/svg%3E") center / contain no-repeat;
}

.input, .select, .textarea {
    display: block;
    width: 100%;
    padding: 0.75rem 1rem;
    min-height: 48px;
    font-family: var(--font-body);
    font-size: var(--text-md);
    line-height: 1.45;
    color: var(--ink);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-sharp);
    transition: border-color var(--duration-fast) var(--ease-out),
                box-shadow var(--duration-fast) var(--ease-out);
    -webkit-appearance: none;
    appearance: none;
}
.input:hover, .select:hover, .textarea:hover { border-color: var(--grey-400); }

.input:focus, .select:focus, .textarea:focus {
    outline: none;
    border-color: var(--teal-700);
    box-shadow: 0 0 0 3px rgba(26, 91, 196, 0.14);
}

.input::placeholder, .textarea::placeholder { color: var(--grey-400); }

.textarea { min-height: 140px; resize: vertical; line-height: var(--leading-normal); }

.select {
    padding-right: 2.75rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2351636F' 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 0.9rem center;
    background-size: 18px;
    cursor: pointer;
}

.input[aria-invalid="true"], .select[aria-invalid="true"], .textarea[aria-invalid="true"],
.field--error .input, .field--error .select, .field--error .textarea {
    border-color: var(--danger);
    background-color: #FFFCFC;
}
.field--error .input:focus { box-shadow: 0 0 0 3px rgba(168, 50, 50, 0.14); }

.input[readonly], .input[disabled], .select[disabled], .textarea[disabled] {
    background: var(--grey-100);
    color: var(--grey-500);
    cursor: not-allowed;
}

/* Checkbox and radio */
.choice {
    display: flex;
    align-items: flex-start;
    gap: 0.7rem;
    padding: 0.15rem 0;
    cursor: pointer;
}
.choice input[type="checkbox"], .choice input[type="radio"] {
    flex: none;
    width: 20px;
    height: 20px;
    margin: 0.15rem 0 0;
    accent-color: var(--teal-700);
    cursor: pointer;
}
.choice__text { font-size: var(--text-base); line-height: 1.5; }
.choice__text small { display: block; color: var(--grey-500); margin-top: 0.15rem; }

/* Card-style radio group — used for programme selection in the application */
.choice-card {
    display: flex;
    align-items: flex-start;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: 1px solid var(--grey-300);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                background var(--duration) var(--ease-out);
}
.choice-card:hover { border-color: var(--teal-600); }
.choice-card:has(input:checked) {
    border-color: var(--teal-700);
    background: var(--teal-050);
    box-shadow: 0 0 0 1px var(--teal-700);
}
.choice-card input { margin-top: 0.2rem; accent-color: var(--teal-700); width: 20px; height: 20px; flex: none; }
.choice-card__title { font-weight: 600; color: var(--navy-800); }
.choice-card__meta { font-size: var(--text-sm); color: var(--grey-500); margin-top: 0.2rem; }

/* File upload */
.upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6);
    text-align: center;
    background: var(--paper);
    border: 1.5px dashed var(--grey-300);
    border-radius: var(--radius-card);
    cursor: pointer;
    transition: border-color var(--duration) var(--ease-out), background var(--duration) var(--ease-out);
}
.upload:hover, .upload.is-dragging { border-color: var(--teal-700); background: var(--teal-050); }
.upload input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.upload__label { font-weight: 500; color: var(--navy-800); }
.upload__hint { font-size: var(--text-sm); color: var(--grey-500); }
.upload__preview {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-3);
    padding: var(--space-3);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-sharp);
    font-size: var(--text-sm);
}
.upload__preview img { width: 48px; height: 48px; object-fit: cover; border-radius: 2px; }

.fieldset {
    margin: 0 0 var(--space-7);
    padding: 0;
    border: 0;
}
.fieldset__legend {
    padding: 0;
    margin-bottom: var(--space-5);
    font-family: var(--font-display);
    font-size: var(--text-xl);
    color: var(--navy-900);
}

.form-grid {
    display: grid;
    gap: 0 var(--space-5);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
}
.form-grid--halves { grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); }
.form-grid .field--full { grid-column: 1 / -1; }

.form-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    align-items: center;
    padding-top: var(--space-5);
    margin-top: var(--space-6);
    border-top: var(--border);
}
.form-actions--split { justify-content: space-between; }

/* Honeypot for spam bots — visually and audibly hidden, never focusable */
.hp-field {
    position: absolute !important;
    left: -9999px !important;
    opacity: 0;
    height: 0;
    width: 0;
    overflow: hidden;
}

/* ───────────────────────────────────────────────────────────────
   08  CARDS & SURFACES
   ─────────────────────────────────────────────────────────────── */

.card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-card);
    overflow: hidden;
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out);
}
/* A gold rule grows across the top of a card on hover. It is the only
   moving decoration on the page, it costs one pseudo-element, and it makes
   a grid of cards feel like a grid of things you can pick up. */
.card::after {
    content: "";
    position: absolute;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background: var(--gold-500);
    transition: width var(--duration) var(--ease-out);
}
.card--interactive:hover {
    border-color: rgba(26, 91, 196, 0.35);
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}
.card--interactive:hover::after,
.card--interactive:focus-within::after { width: 100%; }

@media (prefers-reduced-motion: reduce) {
    .card::after { transition: none; }
    .card--interactive:hover { transform: none; }
}
.card__media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: var(--grey-100);
    overflow: hidden;
}
.card__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--duration-slow) var(--ease-out);
}
.card--interactive:hover .card__media img { transform: scale(1.035); }

.card__body {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    flex: 1;
    padding: var(--space-5);
}
.card__body--roomy { padding: var(--space-6); }

.card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--grey-500);
}
.card__meta > * + *::before {
    content: "·";
    margin-right: var(--space-3);
    color: var(--grey-300);
}

.card__title {
    font-family: var(--font-display);
    font-size: var(--text-xl);
    line-height: var(--leading-snug);
    color: var(--navy-900);
    margin: 0;
}
.card__title a { color: inherit; text-decoration: none; }
.card__title a::after {
    content: "";
    position: absolute;
    inset: 0;
}
.card__title a:hover { color: var(--teal-800); }

.card__text {
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    color: var(--grey-600);
    margin: 0;
}

.card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin-top: auto;
    padding-top: var(--space-4);
    font-size: var(--text-sm);
}

/* A card with a hexagon instead of a photograph */
.card--icon .card__body { gap: var(--space-4); padding: var(--space-6); }

/* Panel: a flat surface without the card's hover behaviour */
.panel {
    padding: var(--space-6);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-card);
}
.panel--paper { background: var(--paper); border-color: transparent; }
.panel--tint  { background: var(--teal-050); border-color: rgba(26, 91, 196, 0.14); }
.panel--navy  { background: var(--navy-800); color: rgba(255,255,255,0.82); border-color: transparent; }
.panel--navy h2, .panel--navy h3, .panel--navy h4 { color: var(--white); }
.panel--flush { padding: 0; }

/* The definition list used for Quick Facts, approvals, receipts */
.facts {
    display: grid;
    gap: 0;
    margin: 0;
}
.facts__row {
    display: grid;
    grid-template-columns: minmax(120px, 38%) 1fr;
    gap: var(--space-4);
    padding: var(--space-4) 0;
    border-bottom: var(--border);
    align-items: baseline;
}
.facts__row:last-child { border-bottom: 0; }
.facts__label {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--grey-500);
    letter-spacing: 0.01em;
}
.facts__value {
    font-size: var(--text-base);
    color: var(--navy-800);
    margin: 0;
}
@media (max-width: 520px) {
    .facts__row { grid-template-columns: 1fr; gap: var(--space-1); }
}

/* ───────────────────────────────────────────────────────────────
   09  MEDIA
   ─────────────────────────────────────────────────────────────── */

.media {
    position: relative;
    overflow: hidden;
    background: var(--grey-100);
    border-radius: var(--radius-media);
}
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--3-2   { aspect-ratio: 3 / 2; }
.media--4-3   { aspect-ratio: 4 / 3; }
.media--16-9  { aspect-ratio: 16 / 9; }
.media--1-1   { aspect-ratio: 1 / 1; }
.media--3-4   { aspect-ratio: 3 / 4; }
.media--tall  { aspect-ratio: 4 / 5; }

/* The placeholder treatment. Requirement 8: a stand-in must never be mistaken
   for a real NBIPS facility, so it is visibly, deliberately a placeholder. */
/* A placeholder does not need the whole 16:10 block the real photograph will
   occupy. Reserving it made a page with no pictures yet look like a page with
   nothing on it — several screens of hatching between one card title and the
   next. It collapses to a band instead, keeps the honest label, and gives the
   space back to the content that does exist. The moment a real image is
   uploaded the card takes its proper proportions. */
.media--placeholder {
    display: grid;
    place-items: center;
    aspect-ratio: auto;
    min-height: 84px;
    border-bottom: 3px solid var(--gold-500);
    background:
        repeating-linear-gradient(135deg,
            rgba(11, 61, 143, 0.035) 0 12px,
            rgba(11, 61, 143, 0.07) 12px 24px);
    color: var(--grey-500);
}
.media__placeholder-note {
    padding: 0.4rem 0.9rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    background: var(--white);
    border-radius: var(--radius-pill);
    box-shadow: var(--shadow-xs);
}

/* Portrait treatment for faculty and leadership */
.portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    overflow: hidden;
    background: var(--navy-800);
    border-radius: var(--radius-media);
}
.portrait img {
    width: 100%; height: 100%;
    object-fit: cover;
    filter: saturate(0.92);
    transition: transform var(--duration-slow) var(--ease-out), filter var(--duration) var(--ease-out);
}
.portrait:hover img { transform: scale(1.03); filter: saturate(1); }

.portrait__fallback {
    display: grid;
    place-items: center;
    width: 100%;
    height: 100%;
    font-family: var(--font-display);
    font-size: clamp(2rem, 5vw, 3rem);
    color: rgba(255, 255, 255, 0.55);
    background: linear-gradient(160deg, var(--navy-700), var(--navy-900));
}

/* Figure with caption */
.figure figcaption {
    margin-top: var(--space-3);
    font-size: var(--text-sm);
    line-height: 1.5;
    color: var(--grey-500);
}

/* Video embed */
.embed {
    position: relative;
    aspect-ratio: 16 / 9;
    background: var(--navy-900);
    border-radius: var(--radius-media);
    overflow: hidden;
}
.embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* ───────────────────────────────────────────────────────────────
   10  HEADER & NAVIGATION
   ─────────────────────────────────────────────────────────────── */

.announcement {
    padding: 0.6rem var(--gutter);
    background: var(--navy-900);
    color: rgba(255, 255, 255, 0.9);
    font-size: var(--text-sm);
    text-align: center;
}
.announcement a { color: var(--teal-500); font-weight: 500; }

.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    background: rgba(255, 255, 255, 0.97);
    border-bottom: 1px solid transparent;
    transition: border-color var(--duration) var(--ease-out),
                box-shadow var(--duration) var(--ease-out);
}
@supports (backdrop-filter: blur(8px)) {
    .site-header { backdrop-filter: saturate(1.4) blur(10px); }
}
.site-header.is-stuck {
    border-bottom-color: rgba(10, 37, 64, 0.1);
    box-shadow: 0 1px 12px rgba(6, 26, 46, 0.06);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-height);

    /* A navigation bar is not reading content, so it is not held to the
       1440px measure the page body uses. Ten menu items plus a brand and
       two buttons need the room, and on a wide monitor there is no reason
       to crowd them into the middle. */
    max-width: min(100% - (2 * var(--gutter)), 1840px);
}

.brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: var(--navy-900);
    flex: none;
}
.brand__mark { height: 44px; width: auto; }
.brand__fallback {
    display: grid;
    place-items: center;
    width: 42px;
    height: 47px;
    background: var(--navy-800);
    color: var(--white);
    font-family: var(--font-display);
    font-size: 0.9rem;
    letter-spacing: 0.02em;
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name {
    font-family: var(--font-display);
    font-size: 1.3rem;
    letter-spacing: 0.01em;
    color: var(--navy-900);
}
/* The institution's full name sits under "NBIPS" on every page and at every
   width. It used to be hidden below 1800px because, set on one line, it was
   315px wide and there was no room for it beside a ten-item menu.

   Wrapping it onto two lines solves that: the same words in roughly half the
   width. An institution should say its own name on its own website, and
   "NBIPS" alone means nothing to a parent seeing the site for the first time. */
.brand__full {
    display: block;
    max-width: min(15rem, 44vw);
    margin-top: 0.15rem;
    font-size: 0.6rem;
    font-weight: 500;
    line-height: 1.25;
    letter-spacing: 0.045em;
    text-transform: uppercase;
    text-wrap: balance;
    color: var(--grey-500);
}

/* Primary navigation */
.nav { display: flex; align-items: center; gap: 0.25rem; }
.nav__item { position: relative; list-style: none; }

.nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.6rem 0.75rem;
    font-size: var(--text-base);
    font-weight: 500;
    color: var(--blue-900);
    text-decoration: none;
    border-radius: var(--radius-sharp);
    white-space: nowrap;
    transition: color var(--duration-fast) var(--ease-out);
}
.nav__link:hover, .nav__item:focus-within > .nav__link { color: var(--blue-600); }

.nav__link[aria-current="page"], .nav__link.is-active {
    color: var(--blue-800);
    font-weight: 600;
}
.nav__link[aria-current="page"]::after, .nav__link.is-active::after {
    content: "";
    position: absolute;
    left: 0.75rem;
    right: 0.75rem;
    bottom: 0.25rem;
    height: 3px;
    border-radius: 2px;
    background: var(--gold-500);
}

.nav__caret {
    width: 0.85em;
    height: 0.85em;
    opacity: 0.5;
    transition: transform var(--duration) var(--ease-out);
}
.nav__item:hover .nav__caret, .nav__item:focus-within .nav__caret { transform: rotate(180deg); }

.nav__dropdown {
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    z-index: var(--z-dropdown);
    min-width: 268px;
    padding: var(--space-3);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-card);
    box-shadow: var(--shadow-lg);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-6px);
    transition: opacity var(--duration) var(--ease-out),
                transform var(--duration) var(--ease-out),
                visibility var(--duration);
}
.nav__item:hover > .nav__dropdown,
.nav__item:focus-within > .nav__dropdown,
.nav__dropdown.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}
.nav__dropdown a {
    display: block;
    padding: 0.55rem 0.75rem;
    font-size: var(--text-base);
    color: var(--navy-800);
    text-decoration: none;
    border-radius: var(--radius-sharp);
    transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.nav__dropdown a:hover { background: var(--teal-050); color: var(--teal-800); }
.nav__dropdown-heading {
    padding: var(--space-2) 0.75rem;
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--grey-400);
    border-top: var(--border);
}
.nav__dropdown-heading:first-child { border-top: 0; margin-top: 0; }

.header-actions { display: flex; align-items: center; gap: var(--space-3); flex: none; }

.nav-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border: 1px solid rgba(10, 37, 64, 0.14);
    border-radius: var(--radius-sharp);
    color: var(--navy-800);
}
.nav-toggle svg { width: 22px; height: 22px; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }
.nav-toggle[aria-expanded="true"] .icon-menu { display: none; }

/* ── How the header sheds width ──────────────────────────────────────────
   Ten menu items, a brand and two buttons.

   These scale continuously with the viewport rather than jumping at
   breakpoints. Stepped breakpoints kept failing just past each edge — a
   window at 1728px would fit at 1600 and again at 1920, but clip the Apply
   button in between. clamp() has no such gaps: every width between the
   menu button and the widest monitor is accounted for.

   The numbers were measured against the real typefaces, not guessed. */

.nav { gap: clamp(0rem, 0.25vw, 0.25rem); }

.nav__link {
    padding-inline: clamp(0.26rem, 0.4vw, 0.75rem);
    font-size: clamp(0.8125rem, 0.66vw, 1rem);
}

.site-header__inner { gap: clamp(var(--space-3), 1.2vw, var(--space-5)); }

.header-actions { gap: clamp(var(--space-2), 0.6vw, var(--space-3)); }
.header-actions .btn {
    padding-inline: clamp(0.7rem, 0.85vw, 1.5rem);
    font-size: clamp(0.8125rem, 0.7vw, 0.9375rem);
}

.brand__name { font-size: clamp(1.15rem, 1vw, 1.3rem); }
.brand__mark { height: clamp(38px, 2.4vw, 44px); }

/* Between 1400 and 1520 there is room for the name and the menu but not for
   both buttons. "Enquire" stands down; "Apply Now" is the one an applicant
   came for, and enquiring is still one tap away inside the menu. */
@media (max-width: 1519px) and (min-width: 1400px) {
    .header-actions .btn--secondary { display: none; }
}

@media (max-width: 1399px) {
    .nav-toggle { display: inline-flex; }

    /* Once the menu becomes a button there is room for exactly one call to
       action beside it, and it must be the primary one. "Enquire" stands down
       and is still the first thing inside the open menu. Below 720px even
       "Apply Now" goes, because the fixed bar at the foot of the screen
       already carries both. */
    .header-actions .btn--secondary { display: none; }

    /* The header carries a backdrop-filter, and a backdrop-filtered element
       becomes the containing block for its position:fixed descendants. The
       panel was therefore being laid out against a 70px-tall header instead
       of the viewport, which is why it appeared as a sliver. Two fixes, so
       that neither alone has to be remembered:

         1. No backdrop blur at this size. It is a wide-screen nicety and the
            header is opaque white on a phone anyway.
         2. The panel hangs off the header rather than the viewport, so it
            always starts directly below it — correct whether or not an
            announcement bar is pushing the header down the page. */

    .site-header { backdrop-filter: none; }

    .nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        z-index: var(--z-overlay);
        display: block;
        max-height: calc(100dvh - var(--header-height));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--space-5) var(--gutter) var(--space-10);
        background: var(--white);
        box-shadow: 0 12px 24px rgba(6, 26, 46, 0.10);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform var(--duration-slow) var(--ease-out), visibility var(--duration-slow);
    }
    .nav.is-open { transform: translateX(0); visibility: visible; }

    /* A panel parked at translateX(100%) still occupies space to the right of
       the viewport, and the page becomes twice as wide as the screen — you can
       swipe sideways into nothing. `visibility: hidden` does not prevent that;
       only taking it out of the scrollable area does.

       `overflow-x: clip` rather than `hidden`, because `hidden` creates a
       scroll container and that silently breaks the sticky header. */
    html { overflow-x: clip; }

    @supports not (overflow: clip) {
        /* Older Safari has no overflow:clip. Park the closed panel by moving
           it, not by translating it beyond the page edge. */
        .nav:not(.is-open) { transform: none; left: 100%; right: -100%; }
    }

    .nav__item { border-bottom: var(--border); }
    .nav__link {
        justify-content: space-between;
        width: 100%;
        padding: 1rem 0;
        font-size: var(--text-lg);
    }
    .nav__link[aria-current="page"]::after, .nav__link.is-active::after { display: none; }

    .nav__dropdown {
        position: static;
        min-width: 0;
        padding: 0 0 var(--space-4) var(--space-4);
        border: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        display: none;
    }
    .nav__dropdown.is-open { display: block; }
    .nav__item:hover > .nav__dropdown, .nav__item:focus-within > .nav__dropdown { display: none; }
    .nav__item:hover > .nav__dropdown.is-open { display: block; }

    .nav__mobile-cta {
        display: flex;
        flex-direction: column;
        gap: var(--space-3);
        margin-top: var(--space-6);
    }
}
@media (min-width: 1400px) { .nav__mobile-cta { display: none; } }

/* Sticky Enquire | Apply bar on small screens (requirement 11) */
.mobile-cta {
    position: fixed;
    left: 0; right: 0; bottom: 0;
    z-index: var(--z-header);
    display: none;
    background: var(--white);
    border-top: var(--border);
    box-shadow: 0 -2px 16px rgba(6, 26, 46, 0.08);
    padding: 0.6rem var(--space-4) calc(0.6rem + env(safe-area-inset-bottom));
    gap: var(--space-3);
}
.mobile-cta .btn { flex: 1; padding-inline: 0.75rem; }
@media (max-width: 720px) {
    .mobile-cta { display: flex; }
    body.has-mobile-cta { padding-bottom: 74px; }
    .header-actions .btn--apply { display: none; }
}

/* ───────────────────────────────────────────────────────────────
   10b  FLOATING WHATSAPP BUTTON

   Bottom-right, above everything, on every public page. It collapses to
   a circle on a phone — where the label would compete with the Enquire /
   Apply bar — and sits clear of that bar rather than on top of it.

   Rendered only when a real number is in Settings; see
   partials/whatsapp-float.php.
   ─────────────────────────────────────────────────────────────── */

.wa-float {
    position: fixed;
    right: clamp(1rem, 2vw, 1.75rem);
    bottom: clamp(1rem, 2vw, 1.75rem);
    z-index: var(--z-header);
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.1rem 0.6rem 0.7rem;
    border-radius: 999px;
    background: #0F7A52;
    color: #FFFFFF;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    box-shadow: 0 6px 20px rgba(6, 26, 46, 0.22);
    transition: transform var(--duration-base) var(--ease-out),
                box-shadow var(--duration-base) var(--ease-out);
}
.wa-float:hover,
.wa-float:focus-visible {
    color: #FFFFFF;
    transform: translateY(-2px);
    box-shadow: 0 10px 26px rgba(6, 26, 46, 0.28);
}
.wa-float__icon { display: inline-flex; }
.wa-float__label { white-space: nowrap; }

/* On a phone the label competes with the Enquire / Apply bar for the same
   corner. Drop to a circle and lift clear of that bar. */
@media (max-width: 720px) {
    .wa-float {
        padding: 0.75rem;
        bottom: calc(74px + 0.75rem + env(safe-area-inset-bottom));
    }
    .wa-float__label {
        position: absolute;
        width: 1px; height: 1px;
        overflow: hidden;
        clip-path: inset(50%);
        white-space: nowrap;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wa-float { transition: none; }
    .wa-float:hover, .wa-float:focus-visible { transform: none; }
}

/* ───────────────────────────────────────────────────────────────
   10c  HOMEPAGE BANNER SLIDER

   Slides are stacked, not laid side by side. Only the active one is
   opaque, so there is no track to translate and no layout that can
   drift out of step — and with JavaScript switched off the first slide
   simply stays put, which is a perfectly good banner.
   ─────────────────────────────────────────────────────────────── */

.hero-slider {
    position: relative;
    overflow: hidden;
    /* The ground a slide sits on when it has no photograph yet — the same
       gradient and hex lattice the plain hero uses, so an office that has
       written its headlines before it has taken its photographs still gets
       a designed banner rather than a flat blue box. */
    background: linear-gradient(140deg, var(--blue-950) 0%, var(--blue-900) 45%, var(--blue-800) 100%);
}
.hero-slider::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 112px 97px;
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(120% 100% at 15% 50%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 15% 50%, #000 20%, transparent 78%);
}
.hero-slider__track {
    position: relative;
    display: grid;
    min-height: min(72vh, 620px);
}
/* Every slide occupies the same cell, so the slider is as tall as its
   tallest slide and never jumps height when it advances. */
.hero-slide {
    grid-area: 1 / 1;
    position: relative;
    display: flex;
    align-items: center;
    padding-block: clamp(3rem, 6.5vw, 5rem);
    opacity: 0;
    visibility: hidden;
    transition: opacity var(--duration-slow) var(--ease-out),
                visibility var(--duration-slow);
}
.hero-slide.is-active { opacity: 1; visibility: visible; }

.hero-slide__bg { position: absolute; inset: 0; z-index: 0; }
.hero-slide__bg img { width: 100%; height: 100%; object-fit: cover; }
/* The wash keeps white text legible over a photograph nobody has vetted for
   contrast — the office uploads what it has, and the banner still reads. */
.hero-slide__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(100deg,
        rgba(4, 22, 46, 0.92) 0%,
        rgba(8, 32, 63, 0.82) 40%,
        rgba(11, 61, 143, 0.55) 75%,
        rgba(26, 91, 196, 0.38) 100%);
}
.hero-slide__inner { position: relative; z-index: 2; width: 100%; }
.hero-slide { z-index: 2; }
.hero-slide__content { max-width: 46rem; }

.hero-slide__title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 2.3vw + 1.05rem, 3.25rem);
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 var(--space-4);
}
.hero-slide__text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.82);
    max-width: 38rem;
    margin: 0 0 var(--space-6);
}

.hero-slider__controls {
    position: absolute;
    z-index: 3;
    left: 50%;
    transform: translateX(-50%);
    bottom: clamp(1rem, 2.5vw, 1.75rem);
    display: flex;
    align-items: center;
    gap: var(--space-3);
}
.hero-slider__arrow {
    display: inline-grid;
    place-items: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(4, 22, 46, 0.35);
    color: var(--white);
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                border-color var(--duration-fast) var(--ease-out);
}
.hero-slider__arrow:hover {
    background: var(--gold-500);
    border-color: var(--gold-500);
    color: var(--blue-900);
}

.hero-slider__dots { display: flex; align-items: center; gap: 0.5rem; }
.hero-slider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, 0.65);
    background: transparent;
    cursor: pointer;
    transition: background var(--duration-fast) var(--ease-out),
                width var(--duration-fast) var(--ease-out);
}
.hero-slider__dot.is-active {
    width: 26px;
    background: var(--gold-500);
    border-color: var(--gold-500);
}

/* Hit areas stay finger-sized even though the dots are drawn small. */
.hero-slider__dot::before {
    content: "";
    position: absolute;
    inset: -12px;
}
.hero-slider__dot { position: relative; }

@media (max-width: 720px) {
    .hero-slider__controls { bottom: 0.9rem; gap: var(--space-2); }
    .hero-slider__arrow { width: 36px; height: 36px; }
}

/* Somebody who has asked their system for less motion gets no automatic
   rotation and no cross-fade — the arrows and dots still work. */
@media (prefers-reduced-motion: reduce) {
    .hero-slide { transition: none; }
}

/* ───────────────────────────────────────────────────────────────
   11  HERO
   ─────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    display: flex;
    align-items: center;
    /* The band was 88vh/780px, which pushed everything below it — the
       programmes, the notices, the reason somebody came — off the first
       screen. A hero should introduce the page, not be the page. */
    min-height: min(72vh, 620px);
    padding-block: clamp(3rem, 6.5vw, 5rem);
    background: var(--navy-800);
    color: var(--white);
    overflow: hidden;
}
.hero__bg { position: absolute; inset: 0; z-index: 0; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background:
        linear-gradient(105deg,
            rgba(4, 22, 46, 0.94) 0%,
            rgba(8, 32, 63, 0.88) 34%,
            rgba(11, 61, 143, 0.66) 68%,
            rgba(26, 91, 196, 0.48) 100%);
}
.hero__lattice {
    position: absolute;
    inset: 0;
    z-index: 1;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 112px 97px;
    opacity: 0.07;
    -webkit-mask-image: radial-gradient(120% 100% at 15% 50%, #000 20%, transparent 78%);
    mask-image: radial-gradient(120% 100% at 15% 50%, #000 20%, transparent 78%);
}
.hero__inner { position: relative; z-index: 2; width: 100%; }
.hero__content { max-width: 48rem; }

.hero__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: var(--space-5);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.72);
}
.hero__eyebrow::before {
    content: "";
    width: 11px;
    height: 12px;
    background: var(--teal-500);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}

.hero__title {
    /* Deliberately smaller than the display scale. At 68px the headline read
       as shouting and broke "pharmaceutical" across an awkward measure; at
       56px it holds the same authority and fits in fewer, cleaner lines. */
    font-size: clamp(2.125rem, 2.4vw + 1.1rem, 3.5rem);
    line-height: 1.08;
    letter-spacing: -0.02em;
    color: var(--white);
    margin: 0 0 var(--space-5);
}
.hero__title em {
    font-style: italic;
    color: var(--teal-500);
}

.hero__text {
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.78);
    max-width: 40rem;
    margin: 0 0 var(--space-7);
}

.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }

.hero__aside {
    position: absolute;
    right: var(--gutter);
    bottom: var(--space-8);
    z-index: 2;
    display: none;
    max-width: 300px;
    padding: var(--space-5);
    background: rgba(255, 255, 255, 0.09);
    border: var(--border-light);
    border-radius: var(--radius-card);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.86);
}
@supports (backdrop-filter: blur(6px)) {
    .hero__aside { backdrop-filter: blur(8px); }
}
@media (min-width: 1100px) { .hero__aside { display: block; } }

/* Page header — the hero's quieter cousin, used on interior pages */
.page-header {
    position: relative;
    padding-block: clamp(3rem, 7vw, 5.5rem) clamp(2.5rem, 5vw, 4rem);
    background: var(--navy-800);
    color: var(--white);
    overflow: hidden;
}
.page-header::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 112px 97px;
    opacity: 0.06;
    -webkit-mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
    mask-image: linear-gradient(100deg, #000 0%, transparent 62%);
}
.page-header__inner { position: relative; }
.page-header__title { color: var(--white); font-size: var(--text-4xl); margin: 0; }
.page-header__lede {
    max-width: 56ch;
    margin-top: var(--space-4);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: rgba(255, 255, 255, 0.76);
}
.page-header--image { min-height: 340px; display: flex; align-items: flex-end; }
.page-header__bg { position: absolute; inset: 0; }
.page-header__bg img { width: 100%; height: 100%; object-fit: cover; }
.page-header__bg::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(6,26,46,0.95) 8%, rgba(6,26,46,0.62) 60%, rgba(6,26,46,0.4) 100%);
}

/* Breadcrumbs */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin-bottom: var(--space-5);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.6);
    list-style: none;
}
.breadcrumbs a { color: rgba(255, 255, 255, 0.78); text-decoration: none; }
.breadcrumbs a:hover { color: var(--white); text-decoration: underline; }
.breadcrumbs li + li::before { content: "/"; margin-right: 0.4rem; opacity: 0.5; }
.breadcrumbs--light { color: var(--grey-500); }
.breadcrumbs--light a { color: var(--grey-600); }
.breadcrumbs--light a:hover { color: var(--teal-700); }

/* ───────────────────────────────────────────────────────────────
   12  SECTION FURNITURE
   ─────────────────────────────────────────────────────────────── */

.section-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-5);
    margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}
.section-head__text { max-width: 46rem; }
.section-head__title { margin: 0; }
.section-head__lede { margin-top: var(--space-4); }
.section-head--center {
    flex-direction: column;
    align-items: center;
    text-align: center;
}
.section-head--center .section-head__lede { margin-inline: auto; }

.section-foot {
    display: flex;
    justify-content: center;
    margin-top: clamp(2rem, 4vw, 3rem);
}

/* ───────────────────────────────────────────────────────────────
   13  CONTENT BLOCKS
   ─────────────────────────────────────────────────────────────── */

/* Programme card */
.programme-card { position: relative; }
.programme-card__level {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal-700);
}
.programme-card__abbr {
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    color: var(--navy-900);
    line-height: 1;
}
.programme-card__facts {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border);
    font-size: var(--text-sm);
    color: var(--grey-500);
}
.programme-card__facts strong { color: var(--navy-800); font-weight: 600; }

/* Statistics band */
.stat {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding: var(--space-5) 0;
}
.stat__value {
    font-family: var(--font-display);
    font-size: clamp(2.25rem, 4.5vw, 3.5rem);
    line-height: 1;
    letter-spacing: -0.03em;
    color: var(--white);
}
.section--navy .stat__value { color: var(--white); }
.stat__label {
    font-size: var(--text-sm);
    font-weight: 500;
    letter-spacing: 0.03em;
    color: rgba(255, 255, 255, 0.72);
}
.stat__caption { font-size: var(--text-xs); color: rgba(255, 255, 255, 0.5); }

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    gap: var(--space-5);
    border-top: var(--border-light);
}
.stats-grid > * { border-bottom: var(--border-light); }
@media (min-width: 720px) {
    .stats-grid > * + * { border-left: var(--border-light); padding-left: var(--space-6); }
}

/* Approval / disclosure item */
.approval {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-5) 0;
    border-bottom: var(--border);
}
.approval:last-child { border-bottom: 0; }
.approval__authority {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--teal-700);
}
.approval__title {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--navy-900);
    margin: var(--space-1) 0 var(--space-2);
}
.approval__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-sm);
    color: var(--grey-500);
}
.approval__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); }

/* Notices list */
.notice-list { list-style: none; }
.notice-item {
    display: flex;
    gap: var(--space-5);
    padding: var(--space-4) 0;
    border-bottom: var(--border);
}
.notice-item:last-child { border-bottom: 0; }
.notice-item__date {
    flex: none;
    width: 4.25rem;
    text-align: center;
    padding-top: 0.15rem;
}
.notice-item__day {
    display: block;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    line-height: 1;
    color: var(--navy-800);
}
.notice-item__month {
    display: block;
    margin-top: 0.15rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--grey-500);
}
.notice-item__body { flex: 1; min-width: 0; }
.notice-item__title {
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--navy-800);
    text-decoration: none;
    line-height: var(--leading-snug);
}
.notice-item__title:hover { color: var(--teal-700); }
.notice-item__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-2) var(--space-3);
    margin-top: var(--space-2);
    font-size: var(--text-sm);
    color: var(--grey-500);
}

/* Testimonial */
.testimonial {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
    padding: var(--space-6);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-card);
    height: 100%;
}
.testimonial__quote {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-relaxed);
    color: var(--navy-800);
    margin: 0;
}
.testimonial__quote::before {
    content: "";
    display: block;
    width: 26px;
    height: 3px;
    margin-bottom: var(--space-4);
    background: var(--teal-600);
}
.testimonial__person {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    margin-top: auto;
    padding-top: var(--space-4);
    border-top: var(--border);
}
.testimonial__avatar {
    width: 48px;
    height: 48px;
    flex: none;
    border-radius: 50%;
    object-fit: cover;
    background: var(--grey-100);
}
.testimonial__avatar-fallback {
    display: grid;
    place-items: center;
    width: 48px; height: 48px; flex: none;
    border-radius: 50%;
    background: var(--teal-050);
    color: var(--teal-700);
    font-weight: 600;
    font-size: var(--text-base);
}
.testimonial__name { font-weight: 600; color: var(--navy-800); font-size: var(--text-base); }
.testimonial__role { font-size: var(--text-sm); color: var(--grey-500); }

/* Faculty card */
.faculty-card { display: flex; flex-direction: column; gap: var(--space-4); }
.faculty-card__name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--navy-900);
    margin: 0;
    line-height: var(--leading-snug);
}
.faculty-card__name a { color: inherit; text-decoration: none; }
.faculty-card__name a:hover { color: var(--teal-800); }
.faculty-card__role { font-size: var(--text-sm); color: var(--teal-700); font-weight: 500; }
.faculty-card__detail { font-size: var(--text-sm); color: var(--grey-500); line-height: 1.55; }

/* Steps (admission process, application flow) */
.steps { counter-reset: step; list-style: none; }
.step {
    position: relative;
    counter-increment: step;
    display: grid;
    grid-template-columns: 56px 1fr;
    gap: var(--space-5);
    padding-bottom: var(--space-7);
}
.step:last-child { padding-bottom: 0; }
.step::before {
    content: counter(step, decimal-leading-zero);
    display: grid;
    place-items: center;
    width: 46px;
    height: 52px;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    color: var(--teal-700);
    background: var(--teal-050);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.step:not(:last-child)::after {
    content: "";
    position: absolute;
    left: 23px;
    top: 58px;
    bottom: 8px;
    width: 1px;
    background: var(--grey-200);
}
.step__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--navy-900); margin: 0 0 var(--space-2); }
.step__text { color: var(--grey-600); font-size: var(--text-base); margin: 0; }

/* Accordion — used for FAQs and curriculum */
.accordion { border-top: var(--border); }
.accordion__item { border-bottom: var(--border); }
.accordion__trigger {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-4);
    width: 100%;
    padding: var(--space-5) 0;
    text-align: left;
    font-family: var(--font-display);
    font-size: var(--text-lg);
    line-height: var(--leading-snug);
    color: var(--navy-900);
    cursor: pointer;
}
.accordion__trigger:hover { color: var(--teal-800); }
.accordion__icon {
    flex: none;
    width: 22px;
    height: 22px;
    margin-top: 0.15rem;
    color: var(--teal-700);
    transition: transform var(--duration) var(--ease-out);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); }
.accordion__panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows var(--duration) var(--ease-out);
}
.accordion__panel[data-open="true"] { grid-template-rows: 1fr; }
.accordion__panel > div { overflow: hidden; }
.accordion__body {
    padding-bottom: var(--space-5);
    color: var(--grey-600);
    font-size: var(--text-base);
    line-height: var(--leading-relaxed);
    max-width: 68ch;
}

/* Tabs / filter pills */
.pills {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-6);
}
.pill {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.1rem;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--grey-600);
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
    text-decoration: none;
    transition: all var(--duration-fast) var(--ease-out);
}
.pill:hover { border-color: var(--teal-600); color: var(--teal-800); }
.pill.is-active, .pill[aria-selected="true"] {
    background: var(--navy-800);
    border-color: var(--navy-800);
    color: var(--white);
}
.pill__count { font-size: var(--text-xs); opacity: 0.7; }

/* Gallery grid */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr));
    gap: var(--space-3);
}
.gallery-item {
    position: relative;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: var(--radius-media);
    background: var(--grey-100);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--duration-slow) var(--ease-out); }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-item__caption {
    position: absolute;
    inset: auto 0 0;
    padding: var(--space-5) var(--space-4) var(--space-3);
    font-size: var(--text-sm);
    color: var(--white);
    background: linear-gradient(to top, rgba(6, 26, 46, 0.86), transparent);
    opacity: 0;
    transition: opacity var(--duration) var(--ease-out);
}
.gallery-item:hover .gallery-item__caption, .gallery-item:focus-within .gallery-item__caption { opacity: 1; }
.gallery-item--tall { grid-row: span 2; aspect-ratio: 4 / 6.2; }

/* Logo wall — only ever populated with authorised marks */
.logo-wall {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 1px;
    background: var(--grey-200);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-card);
    overflow: hidden;
}
.logo-wall__item {
    display: grid;
    place-items: center;
    padding: var(--space-6) var(--space-4);
    background: var(--white);
    min-height: 110px;
}
.logo-wall__item img {
    max-height: 44px;
    width: auto;
    filter: grayscale(1);
    opacity: 0.72;
    transition: filter var(--duration) var(--ease-out), opacity var(--duration) var(--ease-out);
}
.logo-wall__item:hover img { filter: grayscale(0); opacity: 1; }

/* Download row */
.download-row {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    padding: var(--space-4) var(--space-5);
    background: var(--white);
    border: var(--border);
    border-radius: var(--radius-card);
    text-decoration: none;
    transition: border-color var(--duration) var(--ease-out), box-shadow var(--duration) var(--ease-out);
}
.download-row:hover { border-color: var(--teal-600); box-shadow: var(--shadow-sm); }
.download-row__body { flex: 1; min-width: 0; }
.download-row__title { font-weight: 500; color: var(--navy-800); font-size: var(--text-base); }
.download-row__meta {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-3);
    margin-top: 0.2rem;
    font-size: var(--text-sm);
    color: var(--grey-500);
}
.download-row__action { flex: none; color: var(--teal-700); }

/* Timeline for important dates */
.timeline { list-style: none; border-left: 2px solid var(--grey-200); padding-left: var(--space-6); }
.timeline__item { position: relative; padding-bottom: var(--space-6); }
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: calc(-1 * var(--space-6) - 7px);
    top: 6px;
    width: 12px;
    height: 13px;
    background: var(--teal-600);
    clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%);
}
.timeline__date {
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.02em;
    color: var(--teal-700);
}
.timeline__title { font-family: var(--font-display); font-size: var(--text-lg); color: var(--navy-900); margin: 0.15rem 0 0.3rem; }
.timeline__text { font-size: var(--text-base); color: var(--grey-600); margin: 0; }

/* Application progress bar */
.progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
    margin-bottom: var(--space-7);
    list-style: none;
}
.progress-steps__item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.45rem 0.9rem;
    font-size: var(--text-sm);
    color: var(--grey-500);
    background: var(--white);
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-pill);
}
.progress-steps__item[data-state="current"] {
    border-color: var(--navy-800);
    background: var(--navy-800);
    color: var(--white);
    font-weight: 500;
}
.progress-steps__item[data-state="done"] { border-color: var(--green-600); color: var(--green-700); }
.progress-steps__item[data-state="done"]::before {
    content: "";
    width: 0.9em; height: 0.9em;
    background: currentColor;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12.5l5.5 5.5L20 7'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ───────────────────────────────────────────────────────────────
   14  TABLES & DATA
   ─────────────────────────────────────────────────────────────── */

.table-wrap {
    width: 100%;
    overflow-x: auto;
    border: var(--border);
    border-radius: var(--radius-card);
    background: var(--white);
    -webkit-overflow-scrolling: touch;
}

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-base);
    min-width: 560px;
}
.table th, .table td {
    padding: 0.875rem 1.1rem;
    text-align: left;
    vertical-align: middle;
    border-bottom: var(--border);
}
.table thead th {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    text-transform: uppercase;
    color: var(--grey-500);
    background: var(--paper);
    white-space: nowrap;
}
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: var(--paper); }
.table td strong { color: var(--navy-800); font-weight: 600; }
.table .numeric { text-align: right; font-variant-numeric: tabular-nums; }
.table caption {
    caption-side: bottom;
    padding: var(--space-3) 1.1rem;
    font-size: var(--text-sm);
    color: var(--grey-500);
    text-align: left;
}

/* Pagination */
.pagination {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    margin-top: var(--space-7);
    list-style: none;
}
.pagination a, .pagination span {
    display: grid;
    place-items: center;
    min-width: 40px;
    height: 40px;
    padding-inline: 0.75rem;
    font-size: var(--text-base);
    color: var(--navy-800);
    text-decoration: none;
    border: 1px solid var(--grey-200);
    border-radius: var(--radius-sharp);
    transition: all var(--duration-fast) var(--ease-out);
}
.pagination a:hover { border-color: var(--teal-600); color: var(--teal-800); }
.pagination [aria-current="page"] { background: var(--navy-800); border-color: var(--navy-800); color: var(--white); }
.pagination .is-gap { border-color: transparent; color: var(--grey-400); }

/* ───────────────────────────────────────────────────────────────
   15  FOOTER
   ─────────────────────────────────────────────────────────────── */

.site-footer {
    position: relative;
    padding-block: var(--space-10) var(--space-6);
    background: var(--blue-900);
    border-top: 4px solid var(--gold-500);
    color: rgba(255, 255, 255, 0.7);
    font-size: var(--text-base);
    overflow: hidden;
}
.site-footer::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='112' height='97' viewBox='0 0 112 97'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1'%3E%3Cpath d='M28 0.5L0.5 16.5v32L28 64.5l27.5-16v-32z'/%3E%3Cpath d='M84 0.5l-27.5 16v32l27.5 16L111.5 48.5v-32z'/%3E%3Cpath d='M56 48.5l-27.5 16v32L56 112.5l27.5-16v-32z'/%3E%3C/g%3E%3C/svg%3E");
    background-size: 112px 97px;
    opacity: 0.04;
    -webkit-mask-image: linear-gradient(to top, #000, transparent 70%);
    mask-image: linear-gradient(to top, #000, transparent 70%);
}
.site-footer .container { position: relative; }

.footer-grid {
    display: grid;
    gap: var(--space-8) var(--space-6);
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr));
    padding-bottom: var(--space-8);
    border-bottom: var(--border-light);
}
.footer-grid__brand { grid-column: span 2; max-width: 34ch; }
@media (max-width: 700px) { .footer-grid__brand { grid-column: span 1; } }

.footer-heading {
    margin: 0 0 var(--space-4);
    font-family: var(--font-body);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-eyebrow);
    text-transform: uppercase;
    color: var(--gold-400);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; }
.footer-links a {
    color: rgba(255, 255, 255, 0.74);
    text-decoration: none;
    font-size: var(--text-base);
    transition: color var(--duration-fast) var(--ease-out);
}
.footer-links a:hover { color: var(--teal-500); }

.footer-contact { display: flex; flex-direction: column; gap: var(--space-3); font-size: var(--text-base); }
.footer-contact__row { display: flex; gap: 0.75rem; align-items: flex-start; }
.footer-contact__row svg { width: 17px; height: 17px; flex: none; margin-top: 0.2rem; color: var(--teal-500); }
.footer-contact a { color: rgba(255, 255, 255, 0.82); text-decoration: none; }
.footer-contact a:hover { color: var(--teal-500); }

.social-links { display: flex; gap: var(--space-2); }
.social-links a {
    display: grid;
    place-items: center;
    width: 40px;
    height: 40px;
    color: rgba(255, 255, 255, 0.74);
    border: var(--border-light);
    border-radius: 50%;
    transition: all var(--duration) var(--ease-out);
}
.social-links a:hover { background: var(--teal-700); border-color: var(--teal-700); color: var(--white); }
.social-links svg { width: 18px; height: 18px; }

.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    padding-top: var(--space-6);
    font-size: var(--text-sm);
    color: rgba(255, 255, 255, 0.45);
}
.footer-bottom a { color: rgba(255, 255, 255, 0.6); text-decoration: none; }
.footer-bottom a:hover { color: var(--teal-500); }
.footer-bottom__links { display: flex; flex-wrap: wrap; gap: var(--space-4); list-style: none; }

/* ───────────────────────────────────────────────────────────────
   16  FEEDBACK
   ─────────────────────────────────────────────────────────────── */

.flash {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-5);
    margin-bottom: var(--space-5);
    font-size: var(--text-base);
    line-height: var(--leading-normal);
    border: 1px solid transparent;
    border-radius: var(--radius-card);
}
.flash svg { width: 20px; height: 20px; flex: none; margin-top: 0.1rem; }
.flash--success { background: var(--success-bg); border-color: rgba(47, 122, 85, 0.24); color: #1F5A3D; }
.flash--error   { background: var(--danger-bg);  border-color: rgba(168, 50, 50, 0.24);  color: #7E2222; }
.flash--warning { background: var(--warning-bg); border-color: rgba(154, 100, 18, 0.24); color: #74490D; }
.flash--info    { background: var(--info-bg);    border-color: rgba(26, 91, 196, 0.22); color: var(--teal-900); }
.flash__close { margin-left: auto; color: inherit; opacity: 0.6; }
.flash__close:hover { opacity: 1; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
    padding: 0.25rem 0.7rem;
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.03em;
    border-radius: var(--radius-pill);
    background: var(--grey-100);
    color: var(--grey-600);
    white-space: nowrap;
}
.badge--positive { background: var(--success-bg); color: var(--success); }
.badge--critical { background: var(--danger-bg);  color: var(--danger); }
.badge--notice   { background: var(--warning-bg); color: var(--warning); }
.badge--neutral  { background: var(--grey-100);   color: var(--grey-600); }
.badge--teal     { background: var(--teal-050);   color: var(--teal-800); }
.badge--navy     { background: var(--navy-800);   color: var(--white); }
.badge--dot::before {
    content: "";
    width: 6px; height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* Empty state — always says what to do next, never just "no data" */
.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-4);
    padding: clamp(2.5rem, 6vw, 4.5rem) var(--space-5);
    text-align: center;
    background: var(--paper);
    border: 1px dashed var(--grey-300);
    border-radius: var(--radius-card);
}
.empty__title { font-family: var(--font-display); font-size: var(--text-xl); color: var(--navy-800); margin: 0; }
.empty__text { max-width: 46ch; color: var(--grey-500); font-size: var(--text-base); margin: 0; }

/* The honest "not published yet" note used across regulatory and data sections */
.pending-note {
    display: flex;
    gap: var(--space-4);
    padding: var(--space-5);
    background: var(--teal-050);
    border-left: 3px solid var(--teal-600);
    border-radius: var(--radius-sharp);
    font-size: var(--text-base);
    color: var(--teal-900);
}
.pending-note strong { display: block; margin-bottom: 0.2rem; color: var(--navy-800); }

/* Demo content warning — only ever seen by administrators before launch */
.demo-banner {
    padding: 0.6rem var(--gutter);
    background: var(--warning-bg);
    color: #74490D;
    font-size: var(--text-sm);
    text-align: center;
    border-bottom: 1px solid rgba(154, 100, 18, 0.2);
}
.demo-banner strong { font-weight: 600; }

/* ───────────────────────────────────────────────────────────────
   17  UTILITIES
   ─────────────────────────────────────────────────────────────── */

.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
    border: 0;
}

.text-center { text-align: center; }
.text-right  { text-align: right; }

.mt-0 { margin-top: 0 !important; }
.mt-2 { margin-top: var(--space-2); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mt-5 { margin-top: var(--space-5); }
.mt-6 { margin-top: var(--space-6); }
.mt-7 { margin-top: var(--space-7); }
.mt-8 { margin-top: var(--space-8); }
.mb-0 { margin-bottom: 0 !important; }
.mb-4 { margin-bottom: var(--space-4); }
.mb-5 { margin-bottom: var(--space-5); }
.mb-6 { margin-bottom: var(--space-6); }

.flex { display: flex; }
.flex-between { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.gap-2 { gap: var(--space-2); }
.gap-3 { gap: var(--space-3); }
.gap-4 { gap: var(--space-4); }
.w-full { width: 100%; }

.hide { display: none !important; }
@media (max-width: 720px) { .hide-mobile { display: none !important; } }
@media (min-width: 721px) { .hide-desktop { display: none !important; } }

.no-print { }
@media print {
    .site-header, .site-footer, .mobile-cta, .no-print, .announcement, .breadcrumbs { display: none !important; }
    body { background: #fff; color: #000; font-size: 11pt; }
    .section { padding-block: 1rem; }
    a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 9pt; color: #555; }
}

/* ───────────────────────────────────────────────────────────────
   18  MOTION & ACCESSIBILITY
   ─────────────────────────────────────────────────────────────── */

/* Focus. Visible, consistent, and never removed. */
:focus-visible {
    outline: 2px solid var(--teal-700);
    outline-offset: 3px;
    border-radius: 2px;
}
.section--navy :focus-visible,
.hero :focus-visible,
.page-header :focus-visible,
.site-footer :focus-visible {
    outline-color: var(--teal-500);
}

/* Gentle entrance for content as it scrolls into view.
   The default state is VISIBLE — if JavaScript never runs, nothing is hidden. */
.reveal { opacity: 1; }
.js .reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity 700ms var(--ease-out), transform 700ms var(--ease-out);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
.js .reveal[data-delay="1"] { transition-delay: 90ms; }
.js .reveal[data-delay="2"] { transition-delay: 180ms; }
.js .reveal[data-delay="3"] { transition-delay: 270ms; }

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    .js .reveal { opacity: 1 !important; transform: none !important; }
    .card--interactive:hover { transform: none; }
}

@media (prefers-contrast: more) {
    :root {
        --grey-500: #4A5A66;
        --border: 1px solid rgba(10, 37, 64, 0.28);
    }
    .btn { border-width: 2px; }
}

/* Forced colours (Windows high contrast) */
@media (forced-colors: active) {
    .btn { border: 1px solid ButtonText; }
    .hex, .rule__mark, .step::before { forced-color-adjust: none; }
}