/*
Theme Name: ALIT
Theme URI: https://alit.edu.au
Author: ALIT
Description: WordPress theme converted from the ALIT static HTML template. Vocational education and training institute site with a Course custom post type.
Version: 1.0.0
Requires at least: 6.3
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: alit
*/

/* ALIT — single merged stylesheet (style.css)
   globals.css + component stylesheets inlined; admin dashboard styles removed.
   Mobile menu is pure CSS (checkbox + <details>) — no JavaScript.
   Layer order: base, utilities, components. */

/* =============================================================================
   ALIT — Global Stylesheet
   src/app/globals.css

   PURPOSE:
     This file is the design system foundation. It contains ONLY:
       1. Design tokens (CSS custom properties)
       2. Base resets
       3. Layout utilities (.container, .section)
       4. Focus styles (accessibility)

   THEME: single light theme only — there is no dark mode. If one is ever
   built, it needs a deliberate colour/contrast pass, not a revival of the
   `.dark` overrides that used to live here (removed — they were dead code
   with no toggle wired to apply them).

   COMPONENT STYLES live in their own files:
     src/app/styles/header.css          → TopBar + Header + MobileNav + SearchDropdown
     src/app/styles/dropdown.css        → Mega-menu courses + resources dropdowns
     src/app/styles/footer.css          → All four footer sections
     src/app/styles/accessibility.css   → Accessibility widget (Carbon FAB + panel)
     src/app/styles/homepage.css        → All homepage sections (hero, About, Features)
     src/app/styles/contact.css         → Contact page (Enquire, Hours & Maps, FAQ)
     src/app/styles/dashboard.css       → Management Console (Carbon Gray 100 theme)
     src/app/styles/enrolment.css       → Enrolment form (warm off-white theme)
     src/app/styles/lln.css             → LLN Assessment pages
     src/app/styles/course.css          → Course detail pages

   IMPORT ORDER (in globals.css):
     1. Tailwind preflight + utilities
     2. This file's base layer
     3. Each component CSS file via @import

   HOW TO RETHEME:
     Edit the :root block below — every colour, spacing, shadow and motion token
     cascades through the entire site automatically.
   ============================================================================= */

/* Explicit cascade layer order: base MUST win the layer-priority fight last
   so component styles in utilities always beat the base element resets
   (button/link resets etc.) regardless of selector specificity. The original
   Next.js build got this ordering for free from the Tailwind preflight/utilities
   imports; this standalone export has no Tailwind, so it's declared explicitly
   here instead. */
@layer base, utilities, components;

/* ── Component stylesheets ──
   Import order matches the document cascade (topbar → header → footer → pages) */
/* ============================================================
   header.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Header Styles
   src/app/styles/header.css

   STRUCTURE:
     Section A — TopBar (navy utility strip)
     Section B — Main Header (logo + nav + actions)
     Section C — Search (expanding input + results dropdown)
     Section D — Mobile Navigation (hamburger menu)
     Section E — Responsive overrides

   RESPONSIVE STRATEGY:
     Desktop (>1024px): full nav visible, hamburger hidden
     Mobile  (≤1024px): nav hidden, hamburger shown — search + theme stay in header bar

   DESIGN PHILOSOPHY:
     - Carbon Design System (zero border-radius on interactive elements)
     - Source Sans 3 via var(--font-sans)
     - 88px header height, 48px side padding (matches footer/container)
     - Carbon motion: 70ms cubic-bezier(0,0,0.38,0.9)
   ============================================================================= */

/* =============================================================================
   SECTION A — TOP BAR
   Navy utility strip. Scrolls with the page (not sticky).
   ============================================================================= */

.topbar {
  background-color: #ffffff;
  color: var(--color-navy);
}

/* Same shared fluid container the header nav, hero and page body use
   (`--page-max`/`--page-side` — see globals.css) instead of a hardcoded
   1280/48 that used to make the topbar/nav row narrower than everything
   below it on wide screens. The bar's white background stays full-bleed;
   only the content column is capped and centred. */
.topbar__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--page-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.topbar__cricos {
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
}

/* Compliance button — identical to .topbar__link */
.topbar__compliance-btn {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  transition: color 150ms ease;
}

.topbar__compliance-btn:hover { color: var(--color-blue); }
.topbar__compliance-btn:hover .topbar__link-icon { opacity: 1; }

.topbar__links {
  display: flex;
  align-items: center;
  gap: 40px;
}

.topbar__link {
  display: flex;
  align-items: center;
  gap: 7px;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  font-family: var(--font-sans);
  transition: color 150ms ease;
}

.topbar__link:hover { color: var(--color-blue); }

.topbar__link-icon {
  display: flex;
  align-items: center;
  opacity: 0.6;
  flex-shrink: 0;
  transition: opacity 150ms ease;
}

.topbar__link:hover .topbar__link-icon { opacity: 1; }

/* =============================================================================
   SECTION B — MAIN HEADER
   Sticky white bar: Logo | Divider | Nav | Actions
   ============================================================================= */

.header {
  position: sticky;
  top: 0;
  z-index: var(--z-header);
  background-color: var(--color-header-bg);
  transition:
    background-color 110ms ease,
    box-shadow 110ms ease;
}

.header--dropdown-open {
  box-shadow: none;
}

/* ── Overlay mode (homepage hero) ──
   Transparent nav over the royal-blue gradient; white text/icons for contrast.
   Reverts to the standard header (above) once the user scrolls — the JS removes
   the .header--overlay class, so all of this simply stops applying. */
.header--overlay {
  background-color: transparent;
  box-shadow: none;
}
.header--overlay .nav__link            { color: #ffffff; }
.header--overlay .nav__link:hover      { background-color: rgba(255,255,255,0.14); color: #ffffff; }
.header--overlay .header__icon-btn,
.header--overlay .header__hamburger    { color: #ffffff; }
.header--overlay .header__icon-btn:hover,
.header--overlay .header__hamburger:hover { background-color: rgba(255,255,255,0.14); }
.header--overlay .header__divider      { background: rgba(255,255,255,0.3); }
/* Whiten the (dark, transparent-PNG) logo so it reads on the blue */
.header--overlay .header__logo-img     { filter: brightness(0) invert(1); }
/* CTA: solid white pill with navy text stands out on the blue */
.header--overlay .header__cta {
  background-color: #ffffff;
  color: var(--color-navy);
}
.header--overlay .header__cta:hover    { background-color: #eef1f6; }

/* Topbar in overlay mode (homepage): navy to match the hero, white text, so the
   whole top of the page reads as one continuous navy block. */
.topbar--overlay {
  background-color: var(--color-navy);
}
.topbar--overlay .topbar__cricos,
.topbar--overlay .topbar__link,
.topbar--overlay .topbar__compliance-btn { color: rgba(255,255,255,0.82); }
.topbar--overlay .topbar__link:hover,
.topbar--overlay .topbar__compliance-btn:hover { color: #ffffff; }

.header__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
  height: 88px;
  display: flex;
  align-items: center;   /* centre-align children vertically */
}

/* ── Logo ── */
.header__logo {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-shrink: 0;
  padding-right: 32px;
  text-decoration: none;
}

.header__logo-text {
  font-size: 10px;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* Vertical divider */
.header__divider {
  /* The logo/nav divider is the "ignition" of the homepage guide thread: white
     fading to blue, bottom-flush with the header edge and the same 4px width as
     the thread, so the blue line continues straight out of it with no seam. */
  align-self: flex-end;
  width: 4px;
  height: 44px;
  background: linear-gradient(to bottom, #ffffff 0%, var(--color-blue) 100%);
  flex-shrink: 0;
  margin-right: 8px;
}

/* ── Primary Navigation ── */
.header__nav {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-width: 0;
  padding-left: 8px;
  height: 100%;
}

.nav__item {
  display: flex;
  align-items: stretch;
  position: relative;
  overflow: hidden;
}

.nav__link {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 24px;
  height: 88px;   /* explicit — avoids stretch issues when parent changes */
  font-size: 16px;
  font-weight: 700;
  color: var(--color-nav-text);
  letter-spacing: 0.01em;
  white-space: nowrap;
  text-decoration: none;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background-color 120ms ease, color 120ms ease;
}

.nav__link:hover {
  background-color: #f0f4f8;
  color: var(--color-navy);
}

/* "You are here" — the section the visitor is currently on. Text-only (blue +
   bolder), deliberately with no background box, so it reads as location, not
   as a hover/pressed state. */
.nav__link--active {
  color: var(--color-blue) !important;
  font-weight: 700;
}

/* Dropdown trigger while its mega-menu is expanded — a distinct, temporary
   "this menu is open" state, kept separate from the page-location indicator
   above so the two are never visually identical. */
.nav__link--open {
  background-color: var(--color-navy) !important;
  color: #ffffff !important;
  font-weight: 600;
}

.nav__chevron {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
  transition: transform 150ms ease;
}

.nav__item--open .nav__chevron {
  transform: rotate(180deg);
}

/* ── Actions row ──
   Always display: flex. margin-left: auto pins it to the right.
   Contains: search | theme toggle | Apply Now (desktop) | hamburger (mobile) */
.header__actions {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-shrink: 0;
  margin-left: auto;
}

/* ── Theme toggle button ──
   Always visible — desktop and mobile. Never set display:none on this. */
.header__icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-nav-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 70ms ease, color 70ms ease;
}

.header__icon-btn:hover {
  background-color: #f0f4f8;
  color: var(--color-navy);
}

/* ── Accessibility button — mobile only ──
   On desktop the floating "Accessibility" tab handles this; ≤1024px that tab is
   hidden and this header button opens the same panel (via a window event). */
.header__a11y-btn { display: none; }
@media (max-width: 1024px) {
  .header__a11y-btn { display: flex; }
}

/* ── Apply Now CTA — desktop only (hidden ≤1024px) ── */
.header__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 24px;
  margin-left: 8px;
  background-color: var(--color-navy);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: none;
  border-radius: 0;
  cursor: pointer;
  text-decoration: none;
  flex-shrink: 0;
  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9);
}

.header__cta:hover { background-color: var(--color-navy-dark); }

/* ── Hamburger — mobile only (hidden >1024px) ── */
.header__hamburger {
  display: none;   /* shown via media query below */
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  color: var(--color-nav-text);
  background: none;
  border: none;
  cursor: pointer;
  transition: background-color 70ms ease, color 70ms ease;
}
.header__hamburger:hover { background-color: #f0f4f8; }

/* =============================================================================
   SECTION C — SEARCH
   Always visible in the header bar (desktop + mobile).
   Clicking the icon expands an input. On Enter or click, shows results dropdown.
   Collapses on Escape or on blur when the input is empty.
   ============================================================================= */

/* Wrapper — positions the results dropdown relative to itself */
.header__search {
  display: flex;   /* always flex — never hidden */
  align-items: center;
  position: relative;
  flex-shrink: 0;
}

/* Collapsed state: search icon button */
.header__search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-nav-text);
  background: none;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 70ms ease, color 70ms ease;
}

.header__search-btn:hover {
  background-color: #f0f4f8;
  color: var(--color-navy);
}

/* Expanded state: text input */
.header__search-input {
  width: 220px;
  height: 44px;
  padding: 0 44px 0 14px;
  background-color: #f0f4f8;
  border: none;
  border-bottom: 2px solid var(--color-navy);
  outline: none;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text);
  animation: search-expand 150ms cubic-bezier(0,0,0.38,0.9) forwards;
}

@keyframes search-expand {
  from { width: 0; opacity: 0; }
  to   { width: 220px; opacity: 1; }
}

.header__search-input::placeholder { color: var(--color-text-muted); }

/* Icon button overlaid on the right of the input (submit or close) */
.header__search-close {
  position: absolute;
  right: 0;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  color: var(--color-text-muted);
  background: none;
  border: none;
  cursor: pointer;
  transition: color 70ms ease;
}

.header__search-close:hover { color: var(--color-text); }

/* ── Search Results Overlay ──
   Rendered OUTSIDE the header element so it's not trapped in its
   stacking context. Uses position:fixed like the mega-menus, but with
   a higher z-index so it always sits above them.                        */

.search-results-overlay {
  position: fixed;
  left: 0;
  right: 0;
  width: 100%;
  background-color: var(--color-surface);
  border-top: 3px solid var(--color-blue);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 8px 32px rgba(0,0,0,0.14), 0 2px 8px rgba(0,0,0,0.08);
  z-index: calc(var(--z-dropdown) + 20);   /* 70 — always above mega-menus (50) */
  animation: search-overlay-in 110ms cubic-bezier(0,0,0.38,0.9);
}

@keyframes search-overlay-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Constrained inner layout — mirrors dropdown__inner padding */
.search-results-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--page-side) 20px;
}

/* Section label — "N results for …" */
.search-results__heading {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-text-muted);
  margin: 0 0 16px;
  font-family: var(--font-sans);
}

/* No-results hint */
.search-results__empty-hint {
  font-size: 14px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  line-height: 1.6;
  margin: 0 0 20px;
}

/* Result cards — 3-column grid on desktop */
.search-results__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-bottom: 20px;
}

@media (max-width: 1024px) {
  .search-results__grid { grid-template-columns: repeat(2, 1fr); }
  .search-results-inner { padding: 20px 32px 16px; }
}

@media (max-width: 600px) {
  .search-results__grid { grid-template-columns: 1fr; }
  .search-results-inner { padding: 16px 20px 12px; }
}

.search-results__item {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 14px 44px 14px 16px;  /* right padding clears the absolute arrow */
  border: 2px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
  position: relative;
  min-height: 82px;
  text-decoration: none;
  transition: background-color 70ms ease, border-color 70ms ease;
  cursor: pointer;
}

.search-results__item:hover {
  background-color: #f0f4f8;
  border-color: var(--color-navy);
  border-left-color: var(--color-navy);
}

/* Category badge (e.g. "Business Services", "Assessment") */
.search-results__item-cat {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-blue);
  font-family: var(--font-sans);
}

/* Course / page name */
.search-results__item-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  font-family: var(--font-sans);
  line-height: 1.4;
}

/* Arrow — fixed to lower-right corner of each card */
.search-results__item-arrow {
  position: absolute;
  bottom: 12px;
  right: 14px;
  color: var(--color-blue);
  display: flex;
  align-items: center;
  transition: transform 70ms cubic-bezier(0,0,0.38,0.9), color 70ms ease;
}

.search-results__item-arrow svg { width: 16px; height: 16px; }

.search-results__item:hover .search-results__item-arrow {
  transform: translateX(3px);
  color: var(--color-navy);
}

/* Footer bar — white, space-between: "View all" left, "Close" right */
.search-results__footer {
  background-color: var(--color-surface);
  border-top: 2px solid var(--color-border);
}

.search-results__footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 16px var(--page-side);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

@media (max-width: 1024px) {
  .search-results__footer-inner { padding: 14px 32px; }
}

@media (max-width: 600px) {
  .search-results__footer-inner { padding: 12px 20px; flex-wrap: wrap; }
}

/* Close — outlined on white background */
.search-results__footer-close {
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 24px;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  border: 1px solid var(--color-border);
  border-radius: 0;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 70ms ease, color 70ms ease, border-color 70ms ease;
}

.search-results__footer-close:hover {
  background-color: #f0f4f8;
  color: var(--color-navy);
  border-color: var(--color-navy);
}

/* =============================================================================
   SECTION D — MOBILE NAVIGATION
   Panel that drops below the header when hamburger is clicked.
   Contains nav links + Apply Now CTA.
   ============================================================================= */

.mobile-nav {
  display: none;
  flex-direction: column;
  background-color: var(--color-header-bg);
  border-top: 1px solid var(--color-header-border);
  padding: 8px 0 16px;
}

.mobile-nav--open {
  display: flex;
}

.mobile-nav__link {
  display: block;
  padding: 15px 24px;
  font-size: 16px;
  font-weight: 400;
  color: var(--color-nav-text);
  border-left: 3px solid transparent;
  transition:
    background-color 70ms ease,
    border-color 70ms ease,
    color 70ms ease;
}

.mobile-nav__link:hover {
  background-color: #f0f4f8;
  border-left-color: var(--color-navy);
  color: var(--color-navy);
}

.mobile-nav__link--active {
  background-color: #f0f4f8;
  border-left-color: var(--color-navy);
  color: var(--color-navy);
  font-weight: 600;
}

.mobile-cta {
  display: block;
  margin: 12px 24px 4px;
  padding: 14px 24px;
  background-color: var(--color-navy);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  border-radius: 0;
  transition: background-color 70ms ease;
}

.mobile-cta:hover { background-color: var(--color-navy-dark); }

/* =============================================================================
   SECTION E — RESPONSIVE OVERRIDES
   ============================================================================= */

/* ── ≤1024px — hide desktop nav + CTA, show hamburger ── */
@media (max-width: 1024px) {
  .header__inner  { padding: 0 32px; height: 72px; }
  .header__nav    { display: none; }
  .header__divider { display: none; }
  .header__cta    { display: none; }
  .header__hamburger { display: flex; }

  /* Shrink expanded input so it fits alongside the other icons */
  .header__search-input {
    width: 150px;
  }

  @keyframes search-expand {
    from { width: 0; opacity: 0; }
    to   { width: 150px; opacity: 1; }
  }

  .nav__link { height: 72px; }
}

/* ── ≤768px ── */
@media (max-width: 768px) {
  .topbar__inner { padding: 10px 24px; }
  .header__inner { padding: 0 24px; }
}

/* ── ≤600px — further shrink input, hide CRICOS ── */
@media (max-width: 600px) {
  .header__inner  { padding: 0 16px; }
  .topbar__inner  { padding: 10px 16px; }
  .topbar__cricos { display: none; }
  .topbar__compliance-btn { display: none; }
  .header__actions { gap: 2px; }

  .header__search-input {
    width: 110px;
  }

  @keyframes search-expand {
    from { width: 0; opacity: 0; }
    to   { width: 110px; opacity: 1; }
  }

  .mobile-nav__link { padding: 14px 20px; }
  .mobile-cta       { margin: 12px 20px 4px; }
}

/* ── ≤400px — stack topbar ── */
@media (max-width: 400px) {
  .topbar__inner {
    flex-direction: column;
    gap: 6px;
    text-align: center;
    padding: 10px 16px;
  }
  .header__inner { padding: 0 12px; }
  .header__search-input { width: 90px; }
}

/* =============================================================================
   COMPLIANCE MODAL
============================================================================= */

.compliance-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: rgba(10, 15, 30, 0.6);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in 120ms ease;
}

@keyframes fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.compliance-modal {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  width: 100%;
  max-width: 640px;
  animation: modal-up 160ms ease;
  box-shadow: 0 24px 80px rgba(0,0,0,0.3);
}

@keyframes modal-up {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.compliance-modal__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 28px;
  border-bottom: 1px solid var(--color-border);
  background: #f8f9fa;
}

.compliance-modal__head-left {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.compliance-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: var(--color-navy);
  font-size: 22px;
  font-weight: 700;
  font-family: var(--font-sans);
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
  transition: color 70ms ease;
  flex-shrink: 0;
}

.compliance-modal__close:hover { color: var(--color-blue); }

.compliance-modal__body {
  padding: 28px 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.compliance-modal__logo {
  align-self: center;
  height: 52px;
  width: auto;
  margin: 4px 0 -4px;        /* sit just below the header, above the intro */
}

.compliance-modal__intro {
  font-size: 14px;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-family: var(--font-sans);
  margin: 0;
}

.compliance-modal__table {
  width: 100%;
  border-collapse: collapse;
  font-family: var(--font-sans);
}

.compliance-modal__table tr {
  border-bottom: 1px solid var(--color-border);
}

.compliance-modal__table tr:last-child {
  border-bottom: none;
}

.compliance-modal__td-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 10px 16px 10px 0;
  width: 160px;
  vertical-align: top;
}

.compliance-modal__td-value {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  padding: 10px 0;
  vertical-align: top;
}

.compliance-modal__links {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 12px;
}

.compliance-modal__link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  padding: 10px 18px;
  background: var(--color-navy);
  color: #ffffff;
  transition: background 100ms ease;
}

.compliance-modal__link:hover { background: var(--color-navy-dark); }

/* =============================================================================
   FOOTER MODALS — legal content + Carbon-style forms
   Reuse the .compliance-modal shell (overlay / head / close). Bodies can be
   long, so they scroll. Forms are UI-only (not wired to a backend yet).
   ============================================================================= */

/* Scrollable body for long legal text / forms. Typography matches the readable
   body-page template (larger type, roomier line spacing, navy headings). */
.footer-modal__body {
  max-height: 72vh;
  overflow-y: auto;
}

/* Intro paragraph — match the template body size/spacing (scoped to footer modals) */
.footer-modal__body .compliance-modal__intro {
  font-size: 15px;
  line-height: 1.75;
}

/* ── Legal content blocks ── */
.legal-modal__section {
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.legal-modal__h {
  font-size: 15.5px;
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin: 0;
  font-family: var(--font-sans);
}

.legal-modal__p {
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.8;
  margin: 0;
  font-family: var(--font-sans);
}

.legal-modal__list {
  margin: 2px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.legal-modal__list li {
  font-size: 15px;
  color: var(--color-text);
  line-height: 1.7;
  font-family: var(--font-sans);
}

.legal-modal__note {
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0;
  font-family: var(--font-sans);
}

/* ── Carbon-style form ── */
.cds-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.cds-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.cds-form__field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.cds-form__label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--color-text-muted);
  letter-spacing: 0.02em;
  font-family: var(--font-sans);
}

.cds-form__input,
.cds-form__select,
.cds-form__textarea {
  width: 100%;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: #f4f4f4;            /* Carbon field background */
  border: none;
  border-bottom: 1px solid #8d8d8d;
  border-radius: 0;              /* Carbon: square corners */
  padding: 12px 16px;
  transition: background 70ms ease, outline 70ms ease;
}

.cds-form__textarea {
  min-height: 110px;
  resize: vertical;
  line-height: 1.6;
}

/* Carbon select — square field with a chevron affordance */
.cds-form__select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 40px;
  cursor: pointer;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='%231a2744'><path d='M8 11 3 6l.7-.7L8 9.6l4.3-4.3.7.7z'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
}

.cds-form__input:hover,
.cds-form__select:hover,
.cds-form__textarea:hover {
  background: #eaeaea;
}

.cds-form__input:focus,
.cds-form__select:focus,
.cds-form__textarea:focus {
  outline: 2px solid var(--color-blue);
  outline-offset: -2px;
}

/* ── Checkbox row ── */
.cds-form__checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.6;
  font-family: var(--font-sans);
}

.cds-form__checkbox input {
  width: 18px;
  height: 18px;
  margin-top: 1px;
  flex-shrink: 0;
  accent-color: var(--color-blue);
}

/* ── Carbon primary button ── */
.cds-form__submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  height: 48px;
  padding: 0 28px;
  background: var(--color-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.02em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background 100ms ease;
}

.cds-form__submit:hover { background: #1d4ed8; }

/* ── Success confirmation (Carbon inline notification — success/green) ── */
.cds-form__success {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #defbe6;
  border-left: 3px solid #24a148;
  color: #0e3a1c;
  font-family: var(--font-sans);
}

.cds-form__success svg { color: #24a148; flex-shrink: 0; margin-top: 1px; }

.cds-form__success-title {
  font-size: 15px;
  font-weight: 700;
  margin: 0 0 2px;
}

.cds-form__success-text {
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 520px) {
  .cds-form__row { grid-template-columns: 1fr; }
}

/* ── Mobile nav: expandable groups (Course / Resources) ── */
.mobile-nav__group {
  display: flex;
  flex-direction: column;
}

.mobile-nav__link--toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  border-left: 3px solid transparent;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
}

.mobile-nav__submenu {
  display: flex;
  flex-direction: column;
  background-color: #f8f9fa;
  padding: 4px 0 8px;
}

.mobile-nav__sublink {
  display: block;
  padding: 12px 24px 12px 40px;
  font-size: 15px;
  font-weight: 400;
  color: var(--color-text-muted);
  border-left: 3px solid transparent;
  transition: background-color 70ms ease, color 70ms ease, border-color 70ms ease;
}

.mobile-nav__sublink:hover {
  background-color: #e8eef5;
  color: var(--color-navy);
  border-left-color: var(--color-navy);
}

.mobile-nav__sublink--all {
  font-weight: 700;
  color: var(--color-navy);
}

/* Chevron rotation for the toggle buttons, matching desktop's .nav__item--open pattern */
.nav__chevron--open {
  transform: rotate(180deg);
}
}

/* ============================================================
   dropdown.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Courses Mega-Menu Dropdown
   src/styles/dropdown.css

   The mega-menu appears when the "Course" nav item is clicked.
   It renders as a full-width navy panel flush against the header bottom.
   Top position is calculated dynamically in CoursesDropdown.tsx via topOffset.

   STRUCTURE:
     .dropdown--fullwidth   → full-width fixed panel
     .dropdown__inner       → two-column grid (categories | courses)
     .dropdown__footer      → "View all" CTA bar

   DESIGN DETAILS:
     - Navy background matching --color-navy (#1a2744)
     - Category buttons: space-between layout, arrow fades in on hover/active
     - Active category: bold text + blue left accent bar (Carbon selection indicator)
     - Course links: arrow on hover, indent transition
     - View all: Carbon primary button (blue, square corners, icon beside text)
     - Entry animation: 110ms Carbon ease
     - Hidden at ≤1024px — mobile nav handles courses instead
   ============================================================================= */


/* ── Full-width fixed panel flush against header bottom ── */
.dropdown--fullwidth {
  position: fixed;
  left: 0;
  right: 0;
  top: 134px;                  /* Fallback — overridden dynamically by JS topOffset prop */
  width: 100%;
  background-color: #1a2744;  /* --color-navy, explicit for reliability in this context */
  z-index: var(--z-dropdown);
  border-top: 1px solid rgba(255,255,255,0.06);   /* Subtle separator from header */
  box-shadow:
    0 8px 32px rgba(0,0,0,0.32),
    0 2px 8px rgba(0,0,0,0.16);
  animation: dropdown-slide-in 110ms cubic-bezier(0,0,0.38,0.9);
}

@keyframes dropdown-slide-in {
  from { opacity: 0; transform: translateY(-10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Inner layout — two-column grid matching the header's shared fluid
   container (`--page-max`/`--page-side`), same as the rest of the page. */
.dropdown__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--page-side) 36px;
  display: grid;
  grid-template-columns: 280px 1fr;   /* Left: category list | Right: course links */
  gap: 48px;
}

/* ── Section labels (Carbon panel label style) ── */
.dropdown__categories-label,
.dropdown__courses-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #aab6c8;               /* was #64748b — lifted for contrast on navy */
  margin-bottom: 16px;
  font-family: var(--font-sans);
}

/* ── Category buttons — full-width, no border-radius (Carbon) ── */
.dropdown__category-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 14px 20px;
  font-size: 16px;              /* match the footer link rhythm */
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-sans);
  color: #cbd5e1;
  letter-spacing: 0.01em;
  background: none;
  border: none;
  border-radius: 0;             /* Carbon: no radius */
  cursor: pointer;
  transition:
    background-color 70ms cubic-bezier(0,0,0.38,0.9),
    color 70ms ease;
  margin-bottom: 2px;
}

/* Label takes all available width — arrow pinned to far right */
.dropdown__category-btn .dropdown__cat-label {
  flex: 1;
  text-align: left;
}

/* Arrow icon — hidden by default, slides in on hover/active */
.dropdown__category-btn .dropdown__cat-arrow {
  flex-shrink: 0;
  margin-left: auto;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 70ms ease, transform 70ms ease;
  color: #4589ff;               /* Carbon Blue 50 */
  display: flex;
  align-items: center;
}

/* Show arrow on hover or when this category is active */
.dropdown__category-btn:hover .dropdown__cat-arrow,
.dropdown__category-btn--active .dropdown__cat-arrow {
  opacity: 1;
  transform: translateX(0);
}

.dropdown__category-btn:hover {
  background-color: rgba(255,255,255,0.07);
  color: #ffffff;
  font-weight: 600;            /* whiter + a touch bolder on hover */
}

/* Active state: slight fill + left accent bar (Carbon selection indicator) */
.dropdown__category-btn--active {
  background-color: rgba(255,255,255,0.1);
  color: #ffffff;
  font-weight: 600;
  border-left: 3px solid #4589ff;
  padding-left: 17px;           /* Compensate for border-left so text doesn't shift */
}

/* ── Course links — right column ── */
.dropdown__course-link {
  display: block;
  padding: 12px 0;             /* match the footer link rhythm */
  font-size: 16px;
  line-height: 1.6;
  font-weight: 400;
  font-family: var(--font-sans);
  color: #b8c2d4;               /* was #94a3b8 — clearer on navy */
  letter-spacing: 0.01em;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 70ms ease, padding-left 70ms ease;
}

.dropdown__course-link:hover {
  color: #ffffff;
  font-weight: 600;            /* whiter + a touch bolder on hover */
  padding-left: 6px;            /* Subtle indent — directional cue on hover */
}

/* ── Footer bar — "View all courses" CTA ── */
.dropdown__footer {
  border-top: 1px solid rgba(255,255,255,0.07);
}

.dropdown__footer-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--page-side);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Carbon primary button — blue, square corners, icon beside text */
.btn-view-all {
  display: inline-flex;
  flex-direction: row;          /* Icon sits BESIDE text (not stacked) */
  align-items: center;
  gap: 10px;
  height: 48px;
  padding: 0 28px;
  background-color: var(--color-blue);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  white-space: nowrap;
  border: none;
  border-radius: 0;             /* Carbon: zero radius — matches header CTA */
  text-decoration: none;
  cursor: pointer;
  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9);
}

.btn-view-all svg { flex-shrink: 0; display: block; }

.btn-view-all:hover { background-color: #1d4ed8; }


/* ── RPL simple dropdown ──────────────────────────────────────────────────
   Single flat list instead of the two-column categories|links layout.
   Shares .dropdown--fullwidth for positioning/background/animation. ── */

.dropdown__simple-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 40px var(--page-side) 36px;
}

.dropdown__simple-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 16px 20px;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9), padding-left 70ms ease;
}
.dropdown__simple-link:first-child { border-top: 1px solid rgba(255,255,255,0.06); }

.dropdown__simple-link-label {
  display: block;
  font-size: 16px;
  font-weight: 600;
  color: #ffffff;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
}

.dropdown__simple-link-desc {
  display: block;
  margin-top: 4px;
  font-size: 13px;
  line-height: 1.5;
  color: #aab6c8;
  font-family: var(--font-sans);
}

.dropdown__simple-link-arrow {
  flex-shrink: 0;
  color: #4589ff;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 70ms ease, transform 70ms ease;
  display: flex;
  align-items: center;
}

.dropdown__simple-link:hover {
  background-color: rgba(255,255,255,0.07);
  padding-left: 26px;
}
.dropdown__simple-link:hover .dropdown__simple-link-arrow {
  opacity: 1;
  transform: translateX(0);
}

/* ── Responsive ── */

/* Dropdown is hidden on mobile/tablet — the mobile hamburger nav handles courses */
@media (max-width: 1024px) {
  .dropdown--fullwidth { display: none; }
}

/* Stacked single-column layout on narrow viewports (should not be reached
   given the display:none above, but defensive if ever changed) */
@media (max-width: 768px) {
  .dropdown__inner {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 20px 16px;
  }
  .dropdown__footer-inner { padding: 16px 20px; }
}

}

/* ============================================================
   footer.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {


/* =============================================================================
   SECTION 1 — Main Content (navy)
   Brand column (logo, address, codes) + three link columns.
   48px side padding matches the header exactly.
   ============================================================================= */

.footer__s1 {
  background-color: #1a2744;
  color: #cbd5e1;
  position: relative;
  overflow: hidden;             /* clips the watermark bleed below, flush to the true edge */
  display: grid;
  grid-template-columns: minmax(0, 1fr); /* without this the implicit column sizes to content, not 100% width */
  align-items: center;          /* keeps the columns vertically centred as min-height grows */
  /* --fw-size lives here (not on .footer__watermark) so the section can grow
     tall enough to fit the watermark at its current size — otherwise, on
     wide screens where the watermark grows taller than the column content,
     `overflow: hidden` above clips it top and bottom instead of just the
     intended left-edge bleed. */
  --fw-size: clamp(640px, 38vw, 1040px);
  min-height: var(--fw-size);
}

.footer__s1-inner {
  width: 100%;                  /* explicit — .footer__s1 is now a grid container, and a grid
                                    item's margin:auto absorbs stretch instead of filling the
                                    column by default the way a block child's width:auto would */
  max-width: 1280px;
  margin: 0 auto;
  padding: 64px 48px 56px;
  display: flex;
  justify-content: center;      /* Centered composition — footer logo removed */
  position: relative;
  z-index: 1;
}

/* Decorative watermark — the ALIT mark, tinted white via filter (it's a
   black-stroke SVG, so filter is simpler/more robust than trying to
   override individual stroke colours), bled half off the true left edge of
   the section (positioned against `.footer__s1`, not the 1280px-capped
   `.footer__s1-inner`, so it's flush with zero gap even on wide screens).
   Purely decorative — see aria-hidden in Footer.tsx.
   Size scales with viewport width (fluid, via clamp on --fw-size, defined
   on `.footer__s1` above) — 640px is the floor (unchanged on laptop-size
   screens), growing up to 1040px on very wide monitors. */
.footer__watermark {
  position: absolute;
  top: 50%;
  left: calc(var(--fw-size) * -0.5);
  transform: translateY(-50%);
  width: var(--fw-size);
  height: var(--fw-size);
  filter: brightness(0) invert(1);
  opacity: 0.14;
  pointer-events: none;
  z-index: 0;
}

/* RTO / CRICOS / licence codes — horizontal row above the NRT badge, styled
   like the header utility links (Newsroom / Console): uppercase, letter-spaced,
   bold. The row reads as the divider between the links and the badge. */
.footer__codes-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 16px 56px;               /* spread out (column gap) + row gap when wrapped */
  list-style: none;
  margin: 0;
  padding: 40px 0;
  width: 100%;
  font-size: 15px;              /* taller for visibility */
  font-family: var(--font-sans);
  font-weight: 600;             /* a tad bolder */
  letter-spacing: 0.08em;       /* matches the header utility links */
  text-transform: uppercase;    /* matches Newsroom / Console */
  color: #ecf0f6;               /* near-white — readable on navy */
  line-height: 1.5;
  text-align: center;
}

.footer__codes-row strong {
  color: #ffffff;               /* white labels for clear hierarchy */
  font-weight: 700;
}

/* ── Link columns — the column GROUP is centered as a row, but each
   column's own text stays left-aligned (footer logo removed) ── */
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 40px 72px;
  padding-left: 0;
  width: 100%;
  text-align: left;
}

.footer__col { flex: 0 1 220px; }

/* Column heading (COURSES, RESOURCES, CONTACT US) */
.footer__col-heading {
  color: #ffffff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 24px;
}

/* Nav link within a column */
.footer__link {
  display: block;
  font-size: 16px;              /* was 15px */
  font-family: var(--font-sans);
  color: #ecf0f6;
  padding: 12px 0;
  text-decoration: none;
  border: none;
  transition:
    color 70ms cubic-bezier(0.2,0,0.38,0.9),
    padding-left 70ms cubic-bezier(0.2,0,0.38,0.9);
  line-height: 1.6;
}

.footer__link:hover {
  color: #ffffff;
  font-weight: 600;            /* whiter + a touch bolder on hover */
  padding-left: 4px;            /* Subtle indent — directional cue */
}

/* ── Contact column items ── */
.footer__contact-item {
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;  /* Left-align the icon + text pair */
  gap: 10px;
  font-size: 16px;              /* was 15px */
  font-family: var(--font-sans);
  color: #ecf0f6;
  padding: 14px 0;
  line-height: 1.6;
  text-decoration: none;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  transition: color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.footer__contact-item:hover { color: #ffffff; }

/* Icon slot (email, phone, map-pin) */
.footer__contact-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 18px;
  margin-top: 2px;              /* Optical alignment with first line of text */
  color: #4589ff;               /* Carbon Blue 50 — consistent with dropdown accent */
}

.footer__contact-text { flex: 0 1 auto; }

/* =============================================================================
   SECTION 2 — NRT Badge Strip (same navy as Section 1)
   A hairline top border separates S1 from S2 without adding visual weight.
   ============================================================================= */

.footer__s2 {
  background-color: #1a2744;
  padding: 0 48px 36px;
}

.footer__s2-inner {
  max-width: 1280px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer__nrt-badge {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Placeholder shown if the real NRT SVG/PNG has not been added yet */
.footer__nrt-placeholder {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.65;
  padding: 12px 24px;
  border: 1px solid rgba(148,163,184,0.15);
  border-radius: 0;
}

.footer__nrt-text {
  display: flex;
  flex-direction: column;
  font-size: 11.5px;            /* was 9px — no longer pixelated */
  font-weight: 700;
  font-family: var(--font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ecf0f6;               /* near-white — readable on navy */
  line-height: 1.7;
}

/* =============================================================================
   SECTION 3 — Acknowledgement of Country (cream)
   Same background as Section 4 — they read as one continuous light block.
   Includes Aboriginal & Torres Strait Islander flag placeholders.
   ============================================================================= */

.footer__aoc {
  background-color: var(--color-cream);
  border-top: none;             /* No border between S2 (navy) and S3 (cream) — tone shift speaks for itself */
}

.footer__aoc-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 40px;
  display: flex;
  align-items: flex-start;
  gap: 32px;
}

/* Flag row */
.footer__flags {
  display: flex;
  gap: 12px;
  flex-shrink: 0;
  align-self: flex-start;
  margin-top: 4px;
}

/* Individual flag placeholder — replace with <Image> once real flags are provided */
.footer__flag-placeholder {
  position: relative;
  width: 80px;
  height: 52px;
  border-radius: 0;             /* Carbon: no radius */
  overflow: hidden;
  border: 1px solid rgba(0,0,0,0.12);
  flex-shrink: 0;
}

/* If using a real flag image */
.footer__flag-img {
  width: 80px;
  height: 52px;
  object-fit: cover;
  border-radius: 0;
  border: 1px solid rgba(0,0,0,0.12);
}

/* AoC text block */
.footer__aoc-text {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.footer__aoc-heading {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #1a1a1a;
  margin: 0;
  letter-spacing: -0.01em;
  line-height: 1.3;
}

.footer__aoc-body {
  font-size: 14px;
  font-family: var(--font-sans);
  color: #4a4030;
  line-height: 1.75;
  margin: 0;
  max-width: 760px;
}

/* =============================================================================
   SECTION 4 — Legal Bar (same cream as Section 3)
   Social follow icons on the left · legal links + copyright on the right.
   Hairline top border separates S3 from S4.
   ============================================================================= */

.footer__s3 {
  background-color: var(--color-cream);
  border-top: none;             /* One continuous cream block with the Acknowledgement above */
}

.footer__s3-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

/* ── Social row ── */
.footer__social-row {
  display: flex;
  align-items: center;
  gap: 20px;
}

.footer__follow-label {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #2d2416;
  white-space: nowrap;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.footer__social {
  display: flex;
  align-items: center;
  gap: 4px;
}

/* Carbon ghost icon button — 40×40, no radius */
.footer__social-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 0;
  color: #4a4030;
  transition:
    color 70ms cubic-bezier(0.2,0,0.38,0.9),
    background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.footer__social-link:hover {
  color: #1a1a1a;
  background-color: rgba(0,0,0,0.06);
}

/* ── Legal links ── */
.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 20px;
  justify-content: flex-end;
}

.footer__legal-link {
  font-size: 13px;
  font-family: var(--font-sans);
  color: #5a4f3a;
  white-space: nowrap;
  transition: color 70ms cubic-bezier(0.2,0,0.38,0.9);
  letter-spacing: 0.01em;
  /* Rendered as a <button> that opens a modal — reset native button chrome. */
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}

.footer__legal-link:hover {
  color: #1a1a1a;
  text-decoration: underline;
}

/* Copyright string — separated by a hairline from the links */
.footer__legal-copyright {
  font-size: 12px;
  font-family: var(--font-sans);
  color: #8a7a60;
  white-space: nowrap;
  padding-left: 16px;
  border-left: 1px solid rgba(0,0,0,0.12);
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

/* ── ≤1024px: Reduce side padding on tablet ── */
@media (max-width: 1024px) {
  .footer__s1-inner  { padding: 48px 32px 40px; }
  .footer__s2        { padding: 0 32px 28px; }
  .footer__aoc-inner { padding: 40px 32px; }
  .footer__s3-inner  { padding: 20px 32px; }
}

/* ── ≤900px: tighter padding; columns wrap via flex-basis ── */
@media (max-width: 900px) {
  .footer__s1-inner {
    padding: 40px 24px 32px;
  }

  .footer__cols {
    gap: 32px 48px;
  }

  .footer__watermark { display: none; } /* avoid clashing with wrapped/stacked columns */

  .footer__aoc-inner {
    padding: 32px 24px;
  }

  .footer__s3-inner {
    padding: 20px 24px;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
  }

  .footer__legal { justify-content: flex-start; flex-wrap: wrap; }
  .footer__s2    { padding: 0 24px 24px; }
}

/* ── ≤600px: Single-column link columns, stacked AoC ── */
@media (max-width: 600px) {
  .footer__cols      { flex-direction: column; flex-wrap: nowrap; align-items: flex-start; gap: 24px; }
  .footer__col       { flex-basis: auto; width: 100%; }
  .footer__aoc-inner { flex-direction: column; gap: 20px; padding: 28px 20px; }
  .footer__s1-inner  { padding: 32px 20px; }
  .footer__s3-inner  { padding: 16px 20px; }
  .footer__s2        { padding: 0 20px 20px; }

  /* Stack the codes vertically on narrow screens */
  .footer__codes-row { flex-direction: column; gap: 10px; padding: 28px 0; }
  .footer__legal     { gap: 4px 12px; }

  /* Copyright on its own row with a top border instead of left border */
  .footer__legal-copyright {
    padding-left: 0;
    border-left: none;
    padding-top: 8px;
    border-top: 1px solid rgba(0,0,0,0.10);
    width: 100%;
  }
}

/* ── ≤400px: Minimal padding, stack social row ── */
@media (max-width: 400px) {
  .footer__s3-inner  { padding: 16px; }
  .footer__social-row { flex-direction: column; align-items: flex-start; gap: 12px; }
}

}

/* ============================================================
   accessibility.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Accessibility Widget
   src/styles/accessibility.css

   IBM Carbon Design System panel + FAB (Floating Action Button) tab, Magenta 50
   identity. Fixed to the right edge of the viewport, vertically centred.

   STRUCTURE:
     .a11y-widget      → fixed container, positions the FAB
     .a11y-fab         → rotated vertical tab button (Magenta 50)
     .a11y-panel       → slide-in settings panel (left of the FAB)
     .a11y-option      → individual toggle row inside the panel

   FONT: IBM Plex Sans — Carbon's official typeface.
         Loaded separately from the site's Source Sans 3.

   The three toggles' actual EFFECTS (high contrast / large text / focus
   indicators) are NOT in this file — they're unlayered overrides in
   app/globals.css, right after the design tokens, so they reliably win over
   every component stylesheet regardless of cascade-layer order.
   ============================================================================= */


/* =============================================================================
   CARBON COLOUR TOKENS (widget-scoped)
   Mirrors Carbon's official dark-shell token set, with Magenta as the one
   interactive accent (button, active row, toggle-on, reset badge).
   Reference: carbondesignsystem.com/elements/color/tokens
   ============================================================================= */

.a11y-widget {
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif !important;

  /* Magenta identity */
  --carbon-magenta-50:      #ee5396;   /* FAB resting / active accents (~5.4:1 with the ink below) */
  --carbon-magenta-60:      #d02670;   /* FAB hover — one step darker */
  --carbon-text-on-magenta: #161616;   /* Carbon Gray 100 */

  /* Carbon dark-shell panel colours */
  --carbon-layer-01:          #161616;
  --carbon-layer-02:          #262626;
  --carbon-layer-03:          #393939;
  --carbon-text-primary:      #f4f4f4;
  --carbon-text-secondary:    #a8a8a8;
  --carbon-text-disabled:     #525252;
  --carbon-toggle-off:        #6f6f6f;
  --carbon-focus:             #ffffff;

  /* Fixed position: right edge, vertically centred */
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: var(--z-modal);
  display: flex;
  align-items: flex-end;
}


/* =============================================================================
   FAB — Vertical tab button
   Uses writing-mode so text rotates natively (bottom→top).
   A counter-rotate flips it to read top→bottom (upward on the right edge).
   ============================================================================= */

.a11y-fab {
  /* writing-mode rotates both text and layout 90° */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  transform: rotate(180deg);    /* Flip so label reads top → bottom */
  /* On mobile the trigger moves into the header (see .header__a11y-btn) */

  /* Carbon large button spec */
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 0;             /* Becomes left/right padding after writing-mode */
  width: 48px;                 /* Becomes the visual height after rotation */
  height: auto;

  background-color: var(--carbon-magenta-50);
  /* Dark ink, not white — even at Magenta 50, white text/icons only reach
     ~3.3:1 (fails WCAG AA for normal text); Gray 100 reaches ~5.4:1 (passes). */
  color: var(--carbon-text-on-magenta);
  border: none;
  border-radius: 0;
  cursor: pointer;

  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;             /* bolder than the old white-on-blue label for legibility */
  letter-spacing: 0.16px;
  line-height: 1;
  white-space: nowrap;

  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9);
  position: relative;
  outline: none;
}

.a11y-fab:hover { background-color: var(--carbon-magenta-60); }

.a11y-fab:focus-visible {
  outline: 2px solid var(--carbon-text-on-magenta);
  outline-offset: -2px;
}

/* Label inherits writing-mode rotation automatically */
.a11y-fab__label {
  color: inherit;
  font-family: inherit;
  font-size: inherit;
}

/* Icon — writing-mode rotates it too; counter-rotate to keep it upright */
.a11y-fab__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: inherit;
  transform: rotate(180deg);
}

/* Active indicator badge — sits at the top of the rotated button */
.a11y-fab__badge {
  position: absolute;
  top: 4px;
  left: 50%;
  transform: translateX(-50%) rotate(180deg);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--carbon-text-on-magenta);
  color: #ffffff;
  font-size: 10px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  writing-mode: horizontal-tb;  /* Badge text stays horizontal */
}


/* =============================================================================
   PANEL — Carbon dark tile / flyout
   Slides in from the right, positioned to the left of the FAB.
   ============================================================================= */

.a11y-panel {
  position: fixed;
  right: 48px;                  /* FAB is 48px wide */
  top: 50%;
  transform: translateY(-50%);

  width: 288px;

  background-color: var(--carbon-layer-01);
  border: 1px solid var(--carbon-layer-03);
  border-radius: 0;
  box-shadow:
    0 8px 24px rgba(0,0,0,0.5),
    0 2px 6px rgba(0,0,0,0.3);
  overflow: hidden;

  animation: carbon-panel-enter 110ms cubic-bezier(0,0,0.38,0.9);
}

@keyframes carbon-panel-enter {
  from { opacity: 0; transform: translateY(-50%) translateX(16px); }
  to   { opacity: 1; transform: translateY(-50%) translateX(0); }
}

/* ── Panel header ── */
.a11y-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: var(--carbon-layer-01);
}

.a11y-panel__header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--carbon-text-primary);
}

.a11y-panel__title {
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 16px;
  font-weight: 600;
  color: var(--carbon-text-primary);
  letter-spacing: 0;
}

/* Carbon ghost icon close button */
.a11y-panel__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--carbon-text-secondary);
  transition: background-color 70ms ease, color 70ms ease;
  border-radius: 0;
}

.a11y-panel__close:hover {
  background-color: var(--carbon-layer-03);
  color: var(--carbon-text-primary);
}

.a11y-panel__close:focus-visible {
  outline: 2px solid var(--carbon-focus);
  outline-offset: -2px;
}

/* Section label (small caps) */
.a11y-panel__section-label {
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--carbon-text-disabled);
  padding: 12px 16px 8px;
}

/* Hairline dividers */
.a11y-panel__divider     { height: 1px; background-color: var(--carbon-layer-03); }
.a11y-panel__row-divider { height: 1px; background-color: var(--carbon-layer-03); margin: 0 16px; }

/* Panel body — options are full-bleed (no body padding) */
.a11y-panel__body {
  display: flex;
  flex-direction: column;
}


/* =============================================================================
   TOGGLE ROWS — Carbon toggle design
   Each .a11y-option is a full-width clickable row with a Carbon toggle switch.
   ============================================================================= */

.a11y-option {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  padding: 14px 16px;
  background-color: var(--carbon-layer-01);
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background-color 70ms cubic-bezier(0,0,0.38,0.9);
}

.a11y-option:hover { background-color: var(--carbon-layer-02); }

.a11y-option:focus-visible {
  outline: 2px solid var(--carbon-focus);
  outline-offset: -2px;
}

/* Active row: subtle left accent bar */
.a11y-option--active {
  border-left: 3px solid var(--carbon-magenta-50);
  padding-left: 13px;           /* Compensate for border so text doesn't shift */
}

/* Option icon */
.a11y-option__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--carbon-text-secondary);
  transition: color 70ms ease;
}

.a11y-option--active .a11y-option__icon { color: var(--carbon-magenta-50); }

/* Label + description */
.a11y-option__text { flex: 1; min-width: 0; }

.a11y-option__label {
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: var(--carbon-text-primary);
  display: block;
}

.a11y-option__desc {
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 12px;
  color: var(--carbon-text-secondary);
  display: block;
  margin-top: 2px;
  line-height: 1.4;
}

/* ── Carbon toggle switch ──
   The JSX renders `.a11y-toggle` (the whole pill) with a single
   `.a11y-toggle__knob` child — no separate track element — so the track
   background lives on `.a11y-toggle` itself. */
.a11y-toggle {
  position: relative;
  flex-shrink: 0;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background-color: var(--carbon-toggle-off);
  transition: background-color 150ms cubic-bezier(0,0,0.38,0.9);
}

.a11y-toggle--on { background-color: var(--carbon-magenta-50); }

.a11y-toggle__knob {
  position: absolute;
  top: 4px;
  left: 4px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: #ffffff;
  transition: transform 150ms cubic-bezier(0,0,0.38,0.9);
}

.a11y-toggle--on .a11y-toggle__knob { transform: translateX(16px); }

/* ── Panel footer / reset button ── */
.a11y-panel__footer {
  padding: 12px 16px;
  background-color: var(--carbon-layer-01);
}

.a11y-reset {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 10px 12px;
  background-color: var(--carbon-layer-02);
  border: none;
  cursor: pointer;
  border-radius: 0;
  font-family: "IBM Plex Sans", "Inter", system-ui, sans-serif;
  font-size: 13px;
  color: var(--carbon-text-secondary);
  transition: background-color 70ms ease, color 70ms ease;
  text-align: left;
}

.a11y-reset:hover {
  background-color: var(--carbon-layer-03);
  color: var(--carbon-text-primary);
}

.a11y-reset:focus-visible {
  outline: 2px solid var(--carbon-focus);
  outline-offset: -2px;
}

.a11y-reset__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  margin-left: auto;
  border-radius: 9px;
  background-color: var(--carbon-magenta-50);
  color: var(--carbon-text-on-magenta);
  font-size: 11px;
  font-weight: 700;
}

}

/* ============================================================
   homepage.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {


/* ── Background video ── */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
  transform: scale(1.01);     /* Prevents flash of uncovered edges during load */
}

/* ── Dark gradient overlay — left-heavy so the card text is readable ── */
.hero__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(0,0,0,0.75) 0%,
    rgba(0,0,0,0.38) 55%,
    rgba(0,0,0,0.06) 100%
  );
  z-index: 1;
}

/* ── Slide content — bottom-left anchored, 48px from each edge ── */
.hero__content {
  position: absolute;
  bottom: var(--cds-spacing-10);  /* 64px from bottom */
  left: 0;
  right: 0;
  z-index: 5;
  padding: 0 48px;                /* Matches header/footer side padding */
}

/* ── Glassmorphism card — frosted navy ── */
.hero__card {
  max-width: 520px;
  padding: 40px 44px 32px;
  background: rgba(15,20,40,0.55);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255,255,255,0.10);
  border-top: 3px solid var(--color-blue);
  position: relative;
  transition:
    background-color var(--cds-duration-moderate-01) var(--cds-ease-standard),
    border-color     var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

/* ── Individual slides ── */
.hero__slide         { display: none; }
.hero__slide--active {
  display: block;
  animation: hero-slide-in var(--cds-duration-moderate-02) var(--cds-ease-entrance);
}

@keyframes hero-slide-in {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Tag — small label above the title ── */
.hero__tag {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);           /* 8px */
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #5b9cf6;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--cds-spacing-05); /* 16px */
}

.hero__tag-line {
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* ── Slide title ── */
.hero__title {
  font-size: 38px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  line-height: 1.15;
  margin: 0 0 var(--cds-spacing-04) 0;  /* 0 0 12px */
  white-space: pre-line;
}

/* ── Slide subtitle ── */
.hero__sub {
  font-size: 14px;
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.62);
  line-height: 1.75;
  margin: 0 0 var(--cds-spacing-06) 0;  /* 0 0 24px */
}

/* ── CTA buttons ── */
.hero__btns {
  display: flex;
  gap: var(--cds-spacing-04);           /* 12px */
  margin-bottom: var(--cds-spacing-06);
  flex-wrap: wrap;
}

/* Primary — solid blue, Carbon square corners */
.hero__btn-primary {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  background: var(--color-blue);
  border: none;
  border-radius: 0;
  padding: 12px 26px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  transition: background-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.hero__btn-primary:hover { background: var(--color-blue-hover); }

/* Secondary — ghost / outline */
.hero__btn-secondary {
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  background: transparent;
  border: 1.5px solid rgba(255,255,255,0.35);
  border-radius: 0;
  padding: 12px 26px;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  transition: border-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.hero__btn-secondary:hover { border-color: rgba(255,255,255,0.8); }

/* ── Dot navigation ── */
.hero__dots {
  display: flex;
  gap: var(--cds-spacing-02);           /* 4px */
  align-items: center;
}

.hero__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.25);
  border: none;
  cursor: pointer;
  padding: 0;
  transition:
    width            var(--cds-duration-moderate-01) var(--cds-ease-standard),
    background-color var(--cds-duration-moderate-01) var(--cds-ease-standard),
    border-radius    var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

/* Active dot — widens into a blue pill to indicate the current slide */
.hero__dot--active {
  background: var(--color-blue);
  width: 24px;
  border-radius: 4px;
}

/* ── Prev / Next arrows ── */
.hero__arrow {
  position: absolute;
  top: 42%;
  transform: translateY(-50%);
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  color: #ffffff;
  width: 36px;
  height: 36px;
  border-radius: 50%;           /* Arrows keep radius — navigational, not form elements */
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.hero__arrow:hover { background: rgba(255,255,255,0.22); }

.hero__arrow--prev { left: -52px; }
.hero__arrow--next { right: -52px; }

/* ── Hero responsive ── */

@media (max-width: 1024px) {
  .hero__content { padding: 0 32px; bottom: 48px; }
}

@media (max-width: 768px) {
  .hero          { min-height: 560px; }
  .hero__content { padding: 0 20px; bottom: 28px; }
  .hero__card    { max-width: 100%; padding: 28px 24px 22px; }
  .hero__title   { font-size: 28px; }
  /* Move arrows inside the card area on tablet */
  .hero__arrow--prev { left: 6px; }
  .hero__arrow--next { right: 6px; }
}

@media (max-width: 560px) {
  .hero          { min-height: 500px; }
  .hero__content { padding: 0 16px; bottom: 20px; }
  .hero__card    { padding: 22px 20px 18px; }
  .hero__title   { font-size: 22px; white-space: normal; }
  .hero__sub     { font-size: 13px; }
  .hero__btns    { flex-direction: column; gap: 8px; }
  .hero__btn-primary,
  .hero__btn-secondary { width: 100%; justify-content: center; }
  /* Hide arrows on small screens — dots are sufficient */
  .hero__arrow   { display: none; }
}

@media (max-width: 380px) {
  .hero          { min-height: 460px; }
  .hero__title   { font-size: 20px; }
  .hero__tag     { font-size: 10px; }
}

/* =============================================================================
   SECTION 2 — ABOUT / YOUTUBE EMBED
   Light background in light mode, dark surface in dark mode.
   Plain so the YouTube player and text are the focus — no competing visuals.
   ============================================================================= */

.about {
  background-color: var(--color-surface);
  padding: 80px 0;
  transition: background-color var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

/* Narrower inner container — keeps text line lengths readable */
.about__inner {
  max-width: 860px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
}

/* Centred text block above the video */
.about__header {
  text-align: center;
  max-width: 680px;
}

.about__heading {
  font-size: var(--cds-heading-04);  /* 28px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  line-height: 1.25;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
}

.about__lead {
  font-size: var(--cds-body-02);    /* 16px */
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0;
}

/* 16:9 ratio video wrapper — maintains aspect ratio at any container width */
.about__video-wrap {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;           /* 9/16 = 56.25% */
  height: 0;
  overflow: hidden;
  border: 1px solid var(--color-border);
}

.about__video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

/* Body copy below the video */
.about__body {
  font-size: var(--cds-body-01);    /* 14px */
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.75;
  text-align: center;
  max-width: 640px;
  margin: 0;
}

/* =============================================================================
   SECTION 3 — FEATURES STRIP
   City background image with deep navy overlay.
   Overlay opacity creates the dark blue tint shown in the design.
   Cards sit on a slightly lighter semi-transparent surface for contrast.
   ============================================================================= */

.features {
  position: relative;
  /* backgroundImage is set inline in JSX so it can be dynamic */
  background-color: var(--color-navy);   /* Fallback while image loads */
  background-size: cover;
  background-position: center;
  background-attachment: fixed;          /* Parallax effect on desktop */
  padding: 88px 0;
  overflow: hidden;
}

/* Navy + blue-tint gradient overlay */
.features__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    160deg,
    rgba(10,16,40,0.88) 0%,
    rgba(20,30,70,0.82) 100%
  );
  z-index: 0;
}

.features__inner {
  position: relative;
  z-index: 1;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
}

/* Centred section header above the card grid */
.features__header {
  text-align: center;
  margin-bottom: 56px;
  max-width: 600px;
  margin-left: auto;
  margin-right: auto;
}

.features__heading {
  font-size: var(--cds-heading-04);  /* 28px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  margin: 0 0 16px;
  letter-spacing: -0.01em;
  line-height: 1.25;
}

.features__sub {
  font-size: var(--cds-body-02);    /* 16px */
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.65);
  line-height: 1.7;
  margin: 0;
}

/* Three-column card grid */
.features__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

/* Individual card — semi-transparent surface, Carbon-style */
.features__card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.10);
  border-left: 3px solid var(--color-blue);   /* Carbon selection indicator */
  padding: 40px 32px 36px;
  text-align: center;
  transition:
    background-color var(--cds-duration-fast-01) var(--cds-ease-standard),
    border-color     var(--cds-duration-fast-01) var(--cds-ease-standard),
    transform        var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.features__card:hover {
  background: rgba(255,255,255,0.10);
  border-left-color: #4589ff;           /* Carbon Blue 50 — brighter on hover */
  transform: translateY(-3px);
}

/* Icon container — circular, blue-tinted */
.features__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;                   /* Icon containers keep radius — decorative */
  background: rgba(37,99,235,0.22);
  border: 1px solid rgba(37,99,235,0.35);
  color: #93c5fd;
  margin: 0 auto 24px;
  transition: background-color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.features__card:hover .features__icon { background: rgba(37,99,235,0.35); }

.features__card-title {
  font-size: var(--cds-heading-02);    /* 16px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: 0.01em;
}

.features__card-desc {
  font-size: var(--cds-body-01);      /* 14px */
  font-family: var(--font-sans);
  color: rgba(255,255,255,0.60);
  line-height: 1.65;
  margin: 0;
}

/* =============================================================================
   RESPONSIVE — Sections 1, 2 & 3
   ============================================================================= */

@media (max-width: 1024px) {
  .about__inner    { padding: 0 32px; }
  .about           { padding: 64px 0; }
  .features        { padding: 64px 0; background-attachment: scroll; }  /* Disable parallax on tablet */
  .features__inner { padding: 0 32px; }
}

@media (max-width: 768px) {
  .about           { padding: 48px 0; }
  .about__inner    { padding: 0 24px; gap: 28px; }
  .about__heading  { font-size: 22px; }

  .features        { padding: 52px 0; }
  .features__inner { padding: 0 24px; }
  .features__header { margin-bottom: 36px; }
  .features__heading { font-size: 22px; }

  /* Two columns on tablet */
  .features__grid  { grid-template-columns: repeat(2, 1fr); gap: 16px; }
  .features__card  { padding: 28px 20px 24px; }
}

@media (max-width: 560px) {
  .about           { padding: 40px 0; }
  .about__inner    { padding: 0 20px; gap: 24px; }
  .about__heading  { font-size: 20px; }

  .features        { padding: 40px 0; }
  .features__inner { padding: 0 20px; }

  /* Single column on mobile */
  .features__grid  { grid-template-columns: 1fr; }
  .features__card  { padding: 24px 20px; text-align: left; }
  .features__icon  { margin: 0 0 16px; }
}

@media (max-width: 400px) {
  .about__inner    { padding: 0 16px; }
  .features__inner { padding: 0 16px; }
}

/* =============================================================================
   HOMEPAGE — GRADIENT HERO  (replaces the old video hero)
   Royal blue arcing down into the footer beige (#f5f0e8). The hero slides up
   under the transparent nav (margin-top: -88px = nav height) so the gradient
   sits behind it. Header.tsx toggles .header--overlay for the matching nav look.
============================================================================= */

/* The homepage body is one white canvas; the guide thread sits on it (z-index 0)
   and the section content sits above it (z-index 1) with transparent backgrounds,
   so the thread shows through the whitespace and passes behind cards/text. */
.home-main {
  position: relative;
  background: #ffffff;
}

/* Decorative guide thread — desktop only, never interactive. Traces the exact
   hand-drawn route down from the header, then back up again, on a continuous
   loop (stroke-dashoffset animated 1 → 0 → 1; the path/gradient are untouched,
   only the reveal animates). */
.home-thread {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  overflow: visible;
}
@media (max-width: 1023px) {
  .home-thread { display: none; }
}

.home-thread__path {
  stroke-dashoffset: var(--path-len, 0);
  animation: home-thread-trace 16s ease-in-out infinite alternate;
}
@keyframes home-thread-trace {
  from { stroke-dashoffset: var(--path-len, 0); }
  to   { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-thread__path { animation: none; stroke-dashoffset: 0; }
}

.home-hero {
  /* Clean intro block over the white canvas. */
  padding: 96px 24px 100px;
  min-height: 62vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background: transparent;
  position: relative;
  z-index: 1;
}

.home-hero__inner {
  max-width: 940px;
  text-align: center;
}

.home-hero__eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--color-blue); margin: 0 0 20px; font-family: var(--font-sans);
}

.home-hero__title {
  font-size: clamp(46px, 7vw, 80px); font-weight: 800; line-height: 1.06;
  letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 26px; font-family: var(--font-sans);
}

.home-hero__sub {
  font-size: clamp(17px, 2.3vw, 23px); line-height: 1.6; color: var(--color-text-muted);
  max-width: 680px; margin: 0 auto; font-family: var(--font-sans);
}

/* Blue underline accent between the description and the CTA */
.home-hero__underline {
  display: block;
  width: 96px;
  height: 4px;
  background: var(--color-blue);
  margin: 30px auto 34px;
}

.home-hero__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.home-hero__btn-primary {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 30px;
  background: var(--color-navy); color: #ffffff; font-size: 16px; font-weight: 700;
  border-radius: 30px; text-decoration: none; font-family: var(--font-sans);
  box-shadow: 0 8px 24px rgba(19,30,54,0.20);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-hero__btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.24); }

.home-hero__btn-secondary {
  display: inline-flex; align-items: center; height: 52px; padding: 0 28px;
  background: transparent; color: #ffffff; font-size: 16px; font-weight: 700;
  border: 1.5px solid rgba(255,255,255,0.6); border-radius: 30px; text-decoration: none;
  font-family: var(--font-sans); transition: background-color 120ms ease;
}
.home-hero__btn-secondary:hover { background: rgba(255,255,255,0.12); }

/* =============================================================================
   HOMEPAGE — FEATURED CATEGORIES  (3D organic blob shapes; no yellow)
============================================================================= */

/* =============================================================================
   SECTION 2 — CREDENTIALS (compliance · RTO · CRICOS)
   Three concise trust lines on a light Carbon-grey band. Icon + label + line.
============================================================================= */
.home-cred { background: transparent; padding: 44px 24px; position: relative; z-index: 1; }
.home-cred__inner {
  max-width: 760px; margin: 0 auto;
  display: flex; flex-direction: column;
}
.home-cred__item {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 22px 8px;
}
/* No dividers between the three credential lines — one clean block. */
.home-cred__icon {
  display: flex; align-items: center; justify-content: center;
  width: 48px; height: 48px; flex-shrink: 0;
  background: #e8f0fe;            /* subtle blue tint — Carbon icon tile */
  color: var(--color-blue);
}
.home-cred__icon svg { display: block; }
.home-cred__label {
  font-size: 16px; font-weight: 700; color: var(--color-navy); margin: 0 0 4px;
  letter-spacing: 0.01em; font-family: var(--font-sans);
}
.home-cred__text { font-size: 14px; color: var(--color-text-muted); line-height: 1.6; margin: 0; font-family: var(--font-sans); }

/* =============================================================================
   SECTION 3 — STUDY AREAS (clean Carbon cards: photo · title · "Find out")
============================================================================= */
.home-areas { background: transparent; padding: 84px 24px 88px; position: relative; z-index: 1; }
.home-areas__inner { max-width: 1180px; margin: 0 auto; }
.home-areas__header { max-width: 760px; margin: 0 0 48px; }
.home-areas__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-blue); margin: 0 0 12px; font-family: var(--font-sans);
}
.home-areas__heading {
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--color-navy);
  margin: 0 0 12px; letter-spacing: -0.02em; line-height: 1.15; font-family: var(--font-sans);
}
.home-areas__sub { font-size: 17px; color: var(--color-text-muted); line-height: 1.6; margin: 0; font-family: var(--font-sans); }

.home-areas__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

/* Card — white, square Carbon corners, hairline border, photo on top */
.home-area-card {
  display: flex; flex-direction: column;
  background: #ffffff; border: 1px solid #e0e0e0; border-bottom: 3px solid var(--color-navy);
  text-decoration: none; overflow: hidden;
  transition: transform 140ms ease, box-shadow 140ms ease, border-color 140ms ease;
}
.home-area-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(19,30,54,0.16);
  border-bottom-color: var(--color-blue);
}
.home-area-card__media {
  position: relative; width: 100%; aspect-ratio: 4 / 3; background: #eef1f6;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.home-area-card__icon { color: var(--color-navy); opacity: 0.85; }
.home-area-card__body { padding: 22px 24px 26px; display: flex; flex-direction: column; gap: 6px; }
.home-area-card__title { font-size: 21px; font-weight: 700; color: var(--color-navy); margin: 0; letter-spacing: -0.01em; font-family: var(--font-sans); }
.home-area-card__desc { font-size: 15px; color: var(--color-text-muted); line-height: 1.55; margin: 0; font-family: var(--font-sans); }
.home-area-card__link {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 10px;
  font-size: 15px; font-weight: 700; color: var(--color-blue); font-family: var(--font-sans);
  transition: gap 120ms ease;
}
.home-area-card:hover .home-area-card__link { gap: 12px; }

.home-areas__foot { margin-top: 48px; text-align: center; }
.home-areas__all {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 30px;
  background: var(--color-navy); color: #fff; font-size: 16px; font-weight: 700;
  border-radius: 30px; text-decoration: none; font-family: var(--font-sans);
  box-shadow: 0 8px 24px rgba(19,30,54,0.20);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.home-areas__all:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(19,30,54,0.26); }

/* =============================================================================
   SECTION 4 — REACH OUT (navy contact band)
============================================================================= */
.home-contact { background: transparent; padding: 80px 24px 84px; position: relative; z-index: 1; }
.home-contact__inner {
  max-width: 720px; margin: 0 auto; text-align: center;
}
.home-contact__eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--color-blue); margin: 0 0 14px; font-family: var(--font-sans);
}
.home-contact__heading {
  font-size: clamp(28px, 4vw, 40px); font-weight: 800; color: var(--color-navy);
  margin: 0 0 16px; letter-spacing: -0.02em; line-height: 1.15; font-family: var(--font-sans);
}
.home-contact__text { font-size: 17px; color: var(--color-text-muted); line-height: 1.7; margin: 0 auto 28px; max-width: 560px; font-family: var(--font-sans); }
.home-contact__btn {
  display: inline-flex; align-items: center; gap: 8px; height: 52px; padding: 0 30px;
  background: var(--color-blue); color: #ffffff; font-size: 16px; font-weight: 700;
  border-radius: 0; text-decoration: none; font-family: var(--font-sans);
  transition: background-color 120ms ease;
}
.home-contact__btn:hover { background: #1d4ed8; }

/* =============================================================================
   HOMEPAGE — responsive
============================================================================= */
@media (max-width: 900px) {
  .home-hero { min-height: 56vh; padding: 72px 24px 76px; }
  .home-cred__inner { grid-template-columns: 1fr; gap: 0; }
  .home-cred__item { padding: 18px 8px; }
  .home-areas__grid { grid-template-columns: 1fr; gap: 24px; max-width: 420px; margin: 0 auto; }
  .home-contact__inner { grid-template-columns: 1fr; gap: 36px; }
}

}

/* ============================================================
   welcome-overlay.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* app/styles/welcome-overlay.css
   ────────────────────────────────────────────────────────────────────────────
   One-time homepage welcome overlay (components/layout/WelcomeOverlay.tsx).
   ──────────────────────────────────────────────────────────────────────────── */

.welcome-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--cds-spacing-05, 16px);
}

.welcome-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(17, 27, 51, 0.6);
}

.welcome-overlay__panel {
  position: relative;
  width: 100%;
  max-width: 760px;
  background: var(--color-surface);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg);
  padding: 48px 44px 40px;
  font-family: var(--font-sans);
}

.welcome-overlay__close-wrap {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
}

.welcome-overlay__close-ring {
  position: absolute;
  inset: 0;
  width: 36px;
  height: 36px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.welcome-overlay__close-ring circle {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100.53096;
  stroke-dashoffset: 0;
  animation: welcome-overlay-countdown 5s linear forwards;
}

@keyframes welcome-overlay-countdown {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100.53096; }
}

@media (prefers-reduced-motion: reduce) {
  .welcome-overlay__close-ring circle {
    animation: none;
  }
}

.welcome-overlay__close {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--color-blue);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: color 0.15s ease, background 0.15s ease;
}

.welcome-overlay__close:hover,
.welcome-overlay__close:focus-visible {
  background: var(--color-bg);
  color: var(--color-blue-hover);
}

.welcome-overlay__header {
  text-align: center;
  margin: 0 0 24px;
}

.welcome-overlay__logo {
  display: block;
  height: 40px;
  width: auto;
  margin: 0 auto 20px;
}

.welcome-overlay__title {
  margin: 0 0 8px;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-navy);
}

.welcome-overlay__meta {
  margin: 0 0 10px;
  font-size: var(--font-size-base);
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--color-navy);
}

.welcome-overlay__intro {
  margin: 0;
  font-size: var(--font-size-base);
  color: var(--color-text);
}

.welcome-overlay__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.welcome-overlay__tile {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 22px 36px 22px 22px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  color: var(--color-text);
  text-decoration: none;
  background: var(--color-bg);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.welcome-overlay__tile:hover,
.welcome-overlay__tile:focus-visible {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: #ffffff;
}

.welcome-overlay__tile-label {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-navy);
  transition: color 0.15s ease;
}

.welcome-overlay__tile:hover .welcome-overlay__tile-label,
.welcome-overlay__tile:focus-visible .welcome-overlay__tile-label {
  color: #ffffff;
}

.welcome-overlay__tile-desc {
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  line-height: 1.4;
  transition: color 0.15s ease;
}

.welcome-overlay__tile:hover .welcome-overlay__tile-desc,
.welcome-overlay__tile:focus-visible .welcome-overlay__tile-desc {
  color: rgba(255, 255, 255, 0.9);
}

.welcome-overlay__tile-arrow {
  position: absolute;
  bottom: 20px;
  right: 18px;
  color: var(--color-blue);
  transition: color 0.15s ease, transform 0.15s ease;
}

.welcome-overlay__tile:hover .welcome-overlay__tile-arrow,
.welcome-overlay__tile:focus-visible .welcome-overlay__tile-arrow {
  color: #ffffff;
  transform: scale(1.35);
}

@media (max-width: 560px) {
  .welcome-overlay__grid {
    grid-template-columns: 1fr;
  }

  .welcome-overlay__panel {
    padding: 32px 20px 24px;
  }
}

}

/* ============================================================
   contact.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Contact Page Styles
   src/app/styles/contact.css

   DESIGN TOKENS used here (all defined in globals.css):
     --color-navy        #1a2744   section backgrounds, borders, CTAs
     --color-navy-dark   #111b33   hover states
     --color-blue        #2563eb   accents, focus, active states
     --color-bg          #f5f6f8   alternating section background
     --color-surface     #ffffff   cards, form panels
     --color-border      #e2e6ee   dividers, input borders
     --color-text        #111827   primary body text
     --color-text-muted  #6b7280   secondary / helper text
     --font-sans                   Source Sans 3
     --cds-spacing-*               4px grid (Carbon)
     --shadow-md / --shadow-lg     elevation

   SECTION MAP:
     .contact-hero       navy page-title band
     .contact-enquire    two-col: left copy + right form
     .contact-locations  two-col: left hours | right side-by-side maps
     .contact-faq        wide centred accordion

   RULES:
     border-radius: 0 on every interactive / structural element (Carbon)
     48px side padding matching header + footer exactly
     All font-family via var(--font-sans) — never hard-coded
     Carbon motion: 70ms cubic-bezier(0.2,0,0.38,0.9) on micro, 150ms on panels
   ============================================================================= */

/* =============================================================================
   1. PAGE HERO BAND
   Navy, matching the footer's navy block. Title left, breadcrumb right.
   Blue 3px bar above the title — same accent used in the dropdown footer.
   ============================================================================= */

.contact-hero {
  background-color: var(--color-navy);
  padding: var(--cds-spacing-09) 0;   /* 48px top/bottom */
}

.contact-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cds-spacing-06);
}

.contact-hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

/* Blue accent rule above the title — mirrors the dropdown footer CTA */
.contact-hero__title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-blue);
  margin-bottom: 14px;
}

/* Breadcrumb — right-aligned, muted */
.contact-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-size: var(--cds-label-01);   /* 12px */
  font-family: var(--font-sans);
  color: #94a3b8;
  white-space: nowrap;
  padding-bottom: 4px;              /* optical alignment with title baseline */
}

.contact-hero__breadcrumb a        { color: #94a3b8; transition: color 70ms ease; }
.contact-hero__breadcrumb a:hover  { color: #ffffff; }
.contact-hero__breadcrumb-sep      { opacity: 0.35; font-size: 14px; }
.contact-hero__breadcrumb-current  { color: #cbd5e1; }

/* =============================================================================
   2. ENQUIRE SECTION
   White background (same as About section on homepage).
   Left: eyebrow + large heading + body copy + four contact detail rows.
   Right: enquiry form card — navy top border, same as the hours card.

   Column ratio 5:7 gives the form more room than equal halves.
   ============================================================================= */

.contact-enquire {
  background-color: var(--color-surface);
  padding: 80px 0;
  transition: background-color 150ms ease;
}

.contact-enquire__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 72px;
  align-items: start;
}

/* ── Left: copy ── */
.contact-enquire__left { padding-top: 4px; }

/* Eyebrow label — same pattern as hero__tag: blue line + caps text */
.contact-enquire__eyebrow {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-blue);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--cds-spacing-05);  /* 16px */
}

.contact-enquire__eyebrow-line {
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* Large heading — same weight/tracking as footer brand name */
.contact-enquire__heading {
  font-size: clamp(1.9375rem, 1.76rem + 0.76vw, 2.6875rem);  /* 31px → 38px (~1400px) → 43px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 var(--cds-spacing-06);  /* 0 0 24px */
}

/* Body copy — same size/line-height as footer link text */
.contact-enquire__desc {
  font-size: var(--fs-hero-sub);  /* same fluid 16px-baseline lead-text scale used sitewide */
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0 0 var(--cds-spacing-08);  /* 0 0 40px */
}

/* Contact detail rows — same icon-tile pattern as footer contact column */
.contact-enquire__details {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid var(--color-border);
}

.contact-enquire__detail {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-05);          /* 16px */
  padding: var(--cds-spacing-05) 0;    /* 16px top/bottom */
  border-bottom: 1px solid var(--color-border);
}

/* Icon — no box, no background. Just the icon itself, black. */
.contact-enquire__detail-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-text);
  margin-top: 2px;   /* optical alignment with first line of text */
}

.contact-enquire__detail-body { flex: 1; min-width: 0; }

/* Label: uppercase, muted — same as footer__col-heading but smaller */
.contact-enquire__detail-label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin: 0 0 4px;
}

/* Value: same size as footer__link */
.contact-enquire__detail-value {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text);
  margin: 0;
  line-height: 1.55;
}

.contact-enquire__detail-value a {
  color: var(--color-blue);
  transition: color 70ms ease;
}
.contact-enquire__detail-value a:hover { color: var(--color-blue-hover); }

/* ── Right: form card ── */
.contact-form {
  background-color: var(--color-bg);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);  /* same navy top-border as hours card */
  padding: var(--cds-spacing-08) 40px 40px; /* 40px all around */
  transition: background-color 150ms ease, border-color 150ms ease;
}

.contact-form__title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--cds-spacing-02);
  letter-spacing: -0.01em;
}

.contact-form__subtitle {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0 0 var(--cds-spacing-07);  /* 32px */
  line-height: 1.6;
}

/* Field group — label + input stacked */
.contact-form__group {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-02);          /* 4px */
  margin-bottom: var(--cds-spacing-06); /* 24px */
}

/* Two fields side-by-side (first + last name) */
.contact-form__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-05);           /* 16px */
  margin-bottom: var(--cds-spacing-06);
}

.contact-form__label {
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text);
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.contact-form__required { color: #dc2626; margin-left: 2px; }

/* Carbon text field — solid bottom border highlights on focus */
.contact-form__input,
.contact-form__select,
.contact-form__textarea {
  width: 100%;
  padding: var(--cds-spacing-03) var(--cds-spacing-04);  /* 8px 12px */
  background-color: var(--color-surface);
  border: none;
  border-bottom: 2px solid var(--color-border);
  border-radius: 0;
  outline: none;
  font-size: var(--cds-body-02);  /* 16px */
  font-family: var(--font-sans);
  color: var(--color-text);
  transition: border-color 70ms cubic-bezier(0.2,0,0.38,0.9),
              background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
  -webkit-appearance: none;
  appearance: none;
}

/* Carbon active state — blue bottom border */
.contact-form__input:focus,
.contact-form__select:focus,
.contact-form__textarea:focus {
  border-bottom-color: var(--color-blue);
  background-color: #f8faff;
}

.contact-form__input::placeholder,
.contact-form__textarea::placeholder { color: var(--color-text-light); }

.contact-form__textarea {
  resize: vertical;
  min-height: 128px;
  padding-top: var(--cds-spacing-04);
}

/* Select chevron */
.contact-form__select-wrap { position: relative; }

.contact-form__select-wrap::after {
  content: "";
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-muted);
  pointer-events: none;
}

/* Submit — full-width navy, same height as header CTA */
.contact-form__submit {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--cds-spacing-03);
  width: 100%;
  height: 52px;
  margin-top: var(--cds-spacing-03);
  background-color: var(--color-navy);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  border: none;
  border-radius: 0;
  cursor: pointer;
  transition: background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.contact-form__submit:hover    { background-color: var(--color-navy-dark); }
.contact-form__submit:disabled { opacity: 0.7; cursor: not-allowed; }

/* Success state */
.contact-form__success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-10) var(--cds-spacing-06);
  text-align: center;
}

.contact-form__success-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 56px; height: 56px;
  border-radius: 50%;
  background-color: rgba(37,99,235,0.10);
  color: var(--color-blue);
}

.contact-form__success-title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.contact-form__success-msg {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.65;
  max-width: 360px;
}

/* =============================================================================
   3. HOURS & MAPS SECTION
   Grey background (#f5f6f8) — alternates with white, same as homepage features.
   Left: sticky office hours card.
   Right: TWO campus cards side-by-side (equal columns).
   ============================================================================= */

.contact-locations {
  background-color: var(--color-bg);
  padding: 80px 0;
  transition: background-color 150ms ease;
}

.contact-locations__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 56px;
  align-items: start;
}

/* Section heading — reused above both the hours card and maps grid */
.contact-locations__heading {
  font-size: var(--cds-heading-03);   /* 20px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--cds-spacing-06);
  letter-spacing: -0.01em;
}

/* ── Left: Office hours card ── */
.contact-hours {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);  /* navy top-border — same as form card */
  padding: var(--cds-spacing-07) var(--cds-spacing-07) var(--cds-spacing-08);
  position: sticky;
  top: 104px;     /* clears the sticky header (88px) + 16px breathing room */
  transition: background-color 150ms ease, border-color 150ms ease;
}

/* Each day/time row — same border-bottom rhythm as footer contact items */
.contact-hours__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cds-spacing-04) 0;   /* 12px top/bottom */
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  font-family: var(--font-sans);
}

.contact-hours__row:last-of-type { border-bottom: none; }

.contact-hours__day  { color: var(--color-text); font-weight: 500; }
.contact-hours__time { color: var(--color-text-muted); }

/* Red "Closed" text */
.contact-hours__time--closed {
  color: #dc2626;
  font-weight: 600;
}

/* Light grey note with a subtle left rule — no blue highlight */
.contact-hours__note {
  margin-top: var(--cds-spacing-05);  /* 16px */
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background-color: #f0f2f5;          /* same light grey as icon tiles */
  border-left: 3px solid var(--color-border);
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* ── Right: Maps grid — TWO cards side by side ── */
.contact-maps { display: flex; flex-direction: column; }

/* The two campus cards sit in a 2-column grid */
.contact-maps__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-06);  /* 24px */
}

/* Individual campus card */
.contact-campus {
  background-color: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 150ms cubic-bezier(0.2,0,0.38,0.9),
              border-color 150ms ease;
}

.contact-campus:hover {
  box-shadow: var(--shadow-md);
  border-top-color: var(--color-blue);
}

/* Map area — Google Maps iframe with CSS grayscale filter.
   filter: grayscale(100%) makes it fully black & white.
   No API key needed for basic embeds. */
.contact-campus__map {
  width: 100%;
  height: 200px;
  overflow: hidden;
  flex-shrink: 0;
  background-color: #f0f2f5;   /* fallback while iframe loads */
}

.contact-campus__map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  /* Full greyscale — matches the black & white aesthetic */
  filter: grayscale(100%);
  transition: filter 200ms ease;
}

/* Lift greyscale slightly on card hover — subtle interaction cue */
.contact-campus:hover .contact-campus__map iframe {
  filter: grayscale(60%);
}

/* Card info below the map */
.contact-campus__info {
  padding: var(--cds-spacing-05) var(--cds-spacing-06) var(--cds-spacing-06);
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);
  flex: 1;
}

.contact-campus__name {
  font-size: var(--cds-heading-02);  /* 16px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.contact-campus__address {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.6;
}

/* Directions button — full-width, navy, same 0-radius as all CTAs.
   Opens native maps app on mobile, Google Maps on desktop.
   No icon — the label is self-explanatory and the full card is the CTA. */
.contact-campus__directions {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 40px;
  margin-top: auto;
  background-color: var(--color-navy);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.contact-campus__directions:hover { background-color: var(--color-navy-dark); }

/* =============================================================================
   4. FAQ SECTION
   White background. Wide centred accordion — max-width 960px.
   Native <details>/<summary> — zero JS.
   Carbon accordion pattern: full-width rows, bottom-border dividers.
   ============================================================================= */

.contact-faq {
  background-color: var(--color-surface);
  padding: 80px 0;
  transition: background-color 150ms ease;
}

.contact-faq__inner {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 48px;
}

.contact-faq__header {
  text-align: center;
  margin-bottom: var(--cds-spacing-09);  /* 48px */
}

/* Eyebrow — lines either side (FAQ centred between two rules) */
.contact-faq__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-blue);
  letter-spacing: 0.13em;
  text-transform: uppercase;
  margin-bottom: var(--cds-spacing-05);
}

.contact-faq__eyebrow-line {
  width: 24px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

.contact-faq__heading {
  font-size: clamp(1.625rem, 1.48rem + 0.635vw, 2.25rem);  /* 26px → 32px (~1400px) → 36px */
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--cds-spacing-04);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.contact-faq__sub {
  font-size: var(--cds-body-02);  /* 16px */
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.65;
}

/* Accordion list — top border, then each item has a bottom border */
.contact-faq__list {
  border-top: 1px solid var(--color-border);
}

/* Native <details> item */
.contact-faq__item {
  border-bottom: 1px solid var(--color-border);
}

/* <summary> — the clickable question row */
.contact-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-06) 0;  /* 24px top/bottom */
  list-style: none;
  cursor: pointer;
  font-size: var(--cds-body-02);     /* 16px */
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-navy);
  transition: color 70ms ease;
  user-select: none;
}

/* Remove browser default arrow on summary */
.contact-faq__question::-webkit-details-marker { display: none; }
.contact-faq__question::marker                 { display: none; }

details[open] > .contact-faq__question { color: var(--color-blue); }

/* Carbon Add icon — black, rotates 45° to × when open */
.contact-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  flex-shrink: 0;
  color: var(--color-text);    /* black — no colour highlight */
  transition: transform 150ms cubic-bezier(0.2,0,0.38,0.9);
}

/* Rotate the Add icon 45° to become a Close icon when open */
details[open] > .contact-faq__question .contact-faq__icon {
  transform: rotate(45deg);
}

/* Answer paragraph */
.contact-faq__answer {
  padding: 0 var(--cds-spacing-08) var(--cds-spacing-07) 0;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.75;
  margin: 0;
  max-width: 800px;
}

/* Bottom CTA strip */
.contact-faq__cta {
  margin-top: var(--cds-spacing-09);  /* 48px */
  text-align: center;
}

.contact-faq__cta-text {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0 0 var(--cds-spacing-06);
}

/* Ghost button variant — navy outline */
.contact-faq__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  height: 52px;
  padding: 0 var(--cds-spacing-08);
  background-color: var(--color-navy);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.03em;
  border-radius: 0;
  text-decoration: none;
  transition: background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.contact-faq__cta-btn:hover { background-color: var(--color-navy-dark); }

/* =============================================================================
   RESPONSIVE
   Breakpoints mirror the header/footer pattern exactly.
   ============================================================================= */

/* ── ≤1024px — tighten side padding ── */
@media (max-width: 1024px) {
  .contact-hero__inner,
  .contact-enquire__inner,
  .contact-locations__inner,
  .contact-faq__inner       { padding: 0 32px; }

  .contact-locations__inner { grid-template-columns: 300px 1fr; gap: 40px; }
}

/* ── ≤900px — stack enquire + stack hours above maps ── */
@media (max-width: 900px) {
  .contact-enquire__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }

  .contact-enquire__heading { font-size: 30px; }

  .contact-locations__inner {
    grid-template-columns: 1fr;
    gap: 32px;
  }

  .contact-hours { position: static; }
}

/* ── ≤768px — stack the two campus cards vertically ── */
@media (max-width: 768px) {
  .contact-hero          { padding: 36px 0; }
  .contact-hero__inner   { flex-direction: column; align-items: flex-start; gap: 12px; }
  .contact-hero__title   { font-size: 28px; }

  .contact-enquire,
  .contact-locations,
  .contact-faq           { padding: 56px 0; }

  .contact-form          { padding: 28px 24px 32px; }
  .contact-form__row     { grid-template-columns: 1fr; gap: 0; margin-bottom: 0; }
  .contact-form__row .contact-form__group { margin-bottom: var(--cds-spacing-06); }

  /* Maps stack to single column on tablet */
  .contact-maps__grid    { grid-template-columns: 1fr; }
  .contact-campus__map   { height: 220px; }

  .contact-faq__heading  { font-size: 26px; }
}

/* ── ≤600px — minimal padding ── */
@media (max-width: 600px) {
  .contact-hero__inner,
  .contact-enquire__inner,
  .contact-locations__inner,
  .contact-faq__inner       { padding: 0 20px; }

  .contact-enquire__heading { font-size: 26px; }
}

/* ── ≤400px — absolute minimum ── */
@media (max-width: 400px) {
  .contact-hero__inner,
  .contact-enquire__inner,
  .contact-locations__inner,
  .contact-faq__inner       { padding: 0 16px; }
}

}

/* ============================================================
   dashboard.css (login styles only — admin dashboard styles removed)
   ============================================================ */
@layer utilities {
/* =============================================================================
   CARBON COLOR TOKENS (dashboard-scoped)
   Gray 10 theme — matches Carbon's g10 shell.
   Reference: carbondesignsystem.com/elements/color/tokens
   ============================================================================= */

.dashboard-root {
  /* Shell */
  --dash-bg:           #f4f4f4;   /* Carbon Gray 10 — page background */

  /* Text */
  --dash-text-primary:   #161616; /* Carbon Gray 100 */

  /* Interactive */

  /* Sidebar */

  /* Header */

  /* Status colours — Carbon semantic tokens */
  --status-blue:   #0f62fe;
  --status-purple: #8a3ffc;
  --status-green:  #24a148;
  --status-red:    #da1e28;
  --status-gray:   #8d8d8d;

  /* Status bg (light fills for badges) */
  --status-blue-bg:   #edf5ff;
  --status-purple-bg: #f6f2ff;
  --status-green-bg:  #defbe6;
  --status-red-bg:    #fff1f1;
  --status-gray-bg:   #f4f4f4;

  /* Neutral interactive-state fills — table/card/button hover. Separate from
     --dash-surface-2 so the two hover intensities (subtle vs. header-level)
     stay distinguishable once dark mode's contrast budget is much smaller. */

  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
  background-color: var(--dash-bg);
  color: var(--dash-text-primary);
  min-height: 100vh;
}


/* =============================================================================
   A — LOGIN PAGE
   Dark full-viewport background with subtle grid overlay and glow orbs.
   Login form is a floating card positioned left-of-centre.
   ============================================================================= */

/* Full-viewport container */
.login-root {
  min-height: 100vh;
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  background: #faf9f7;
  font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
}

/* Carbon-style grid lines on beige */
.login-root::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(0, 0, 0, 0.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 0, 0, 0.028) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
  z-index: 0;
}


/* Orb elements kept in markup but hidden */
.lv-orb { display: none; }

/* Card wrap — left column */
.login-card-wrap {
  position: relative;
  z-index: 1;
  padding: 48px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}

/* Right panel — Management Console wordmark */
.login-right {
  position: relative;
  z-index: 1;
  padding: 48px 64px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 24px;
  border-left: 1px solid rgba(0,0,0,0.08);
  min-height: 100vh;
}

.login-right__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #8d8d8d;
  font-family: 'IBM Plex Sans', sans-serif;
}

.login-right__title {
  font-size: clamp(40px, 5vw, 72px);
  font-weight: 300;
  color: #1a2744;
  font-family: 'IBM Plex Sans', sans-serif;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0;
}

.login-right__title strong {
  font-weight: 600;
  display: block;
}

/* Typewriter cursor — blinks alongside the "Console." typing effect */
.login-right__cursor {
  display: inline-block;
  width: 4px;
  height: 0.8em;
  margin-left: 4px;
  background: currentColor;
  vertical-align: -0.1em;
  animation: login-cursor-blink 1s step-end infinite;
}
@keyframes login-cursor-blink { 50% { opacity: 0; } }

.login-right__rule {
  width: 48px;
  height: 3px;
  background: #0f62fe;
}

/* Floating login card */
.login-card {
  width: 440px;
  background: #ffffff;
  border-top: 3px solid #0f62fe;
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.07),
    0 12px 40px rgba(0, 0, 0, 0.10);
  display: flex;
  flex-direction: column;
}

/* Card header — product brand */
.login-card__header {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 72px;
  padding: 0 32px;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
}

.login-card__brand {
  font-size: 14px;
  color: #1a2744;
  font-weight: 400;
}

.login-card__brand strong { font-weight: 700; }

/* Card body — form content */
.login-card__body {
  padding: 36px 32px 28px;
  display: flex;
  flex-direction: column;
}

.login-card__title {
  font-size: 2rem;
  font-weight: 300;
  color: #161616;
  margin: 0 0 8px;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.login-card__subtitle {
  font-size: 14px;
  color: #6f6f6f;
  margin: 0 0 28px;
  line-height: 1.55;
}

/* Dev prefill button */
.login-dev-btn {
  width: 100%;
  height: 40px;
  margin-top: 10px;
  background: #f1c21b;
  color: #161616;
  border: none;
  border-radius: 0;
  font-size: 12px;
  font-weight: 700;
  font-family: inherit;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 70ms ease;
}

.login-dev-btn:hover { background: #d4a017; }

/* Logo click target (4x reveals the master-phrase panel) */
.login-logo-btn {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
  line-height: 0;
}

/* Master-phrase panel — revealed by clicking the logo 4x */
.login-master {
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--color-border);
}

.login-master__row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
}

.login-master__row .login-field__input { flex: 1; }

.login-master__btn {
  height: 40px;
  padding: 0 16px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 70ms ease;
}

.login-master__btn:hover { background: var(--color-navy-light); }
.login-master__btn:disabled { opacity: 0.6; cursor: default; }

/* Production-only master-phrase success flourish (~2s before redirect).
   Emoji use here is an explicit, narrowly-scoped exception to the no-emoji
   rule — see CLAUDE.md §4 "Emoji exceptions". */
.login-success-overlay {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: var(--color-navy);
  color: #fff;
  animation: login-success-fade 2s ease forwards;
}

.login-success-overlay__emoji {
  font-size: 96px;
  line-height: 1;
}

.login-success-overlay p {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
}

@keyframes login-success-fade {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  90%  { opacity: 1; }
  100% { opacity: 0; }
}

/* Form fields */
.login-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 20px;
}

.login-field__label {
  font-size: 12px;
  font-weight: 600;
  color: #525252;
  letter-spacing: 0.04em;
}

.login-field__input {
  height: 48px;
  padding: 0 16px;
  background: #f4f4f4;
  border: none;
  border-bottom: 2px solid #8d8d8d;
  border-radius: 0;
  outline: none;
  font-size: 14px;
  font-family: inherit;
  color: #161616;
  width: 100%;
  transition: border-color 70ms ease, background-color 70ms ease;
}

.login-field__input:focus {
  background: #e8e8e8;
  border-bottom-color: #0f62fe;
}

.login-field__input::placeholder { color: #a8a8a8; }

/* Error message */
.login-error {
  font-size: 12px;
  color: #da1e28;
  margin: -8px 0 16px;
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Submit button */
.login-submit {
  width: 100%;
  height: 48px;
  background: #0f62fe;
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 14px;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  letter-spacing: 0.01em;
  transition: background-color 70ms cubic-bezier(0.2, 0, 0.38, 0.9);
  margin-top: 8px;
}

.login-submit:hover    { background: #0043ce; }
.login-submit:disabled { background: #c6c6c6; cursor: not-allowed; color: #8d8d8d; }

/* Or divider */
.login-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 24px 0 16px;
  color: #8d8d8d;
  font-size: 12px;
}

.login-divider::before,
.login-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: #e5e7eb;
}

/* Microsoft SSO button */
.login-sso-btn {
  width: 100%;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #ffffff;
  color: #161616;
  border: 1px solid #e5e7eb;
  border-radius: 0;
  font-size: 14px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background-color 70ms ease, border-color 70ms ease;
}

.login-sso-btn:hover {
  background: #f4f4f4;
  border-color: #8d8d8d;
}

/* Card footer — back link */
.login-card__footer {
  padding: 16px 32px 24px;
  border-top: 1px solid #e5e7eb;
}

.login-back {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #8d8d8d;
  text-decoration: none;
  transition: color 70ms ease;
}

.login-back:hover { color: #1a2744; }

/* Tablet — stack to single column */
@media (max-width: 900px) {
  .login-root { grid-template-columns: 1fr; }
  .login-right { display: none; }
  .login-card-wrap { justify-content: center; padding: 32px 24px; }
}

/* Mobile — full-width card */
@media (max-width: 480px) {
  .login-card-wrap { padding: 16px; }
  .login-card      { width: 100%; }
}



}

/* ============================================================
   enrolment.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Enrolment Form Styles
   src/app/styles/enrolment.css

   DESIGN PHILOSOPHY:
     Calm, focused environment for a long multi-section form.
     Warm off-white/beige palette scoped to this page only — does not
     affect the rest of the site. Reduces form anxiety on long flows.

   COLOUR PALETTE (enrolment-scoped):
     Page background:    #f4f4f4   warm off-white
     Section cards:      #ffffff   pure white — slight lift from bg
     Sidebar background: #f4f4f4   warm beige
     Borders:            #e0e0e0   warm grey-beige
     Text primary:       var(--color-text)      #111827
     Text muted:         var(--color-text-muted) #6b7280
     Accent:             var(--color-navy)       #1a2744
     Active/focus:       var(--color-blue)       #2563eb
     Complete (green):   #16a34a   Carbon Green 60
     Invalid (red):      #dc2626   Carbon Red 60
     Current (blue):     #2563eb   Carbon Blue 60
     Incomplete (grey):  #9ca3af   Carbon Gray 40

   SECTIONS:
     A — Page shell (background, layout grid)
     B — Carbon Progress Indicator sidebar (left)
     C — Form area (right)
     D — Student type selector (domestic / international tiles)
     E — Form sections (accordion panels)
     F — Field primitives (Field, FileUpload)
     G — Tooltip (question mark popover)
     H — Auto-save indicator
     I — Review modal
     J — Cancel modal
     K — Success screen + PDF print template
     L — Dev toolbar
     M — Action buttons (Submit, Cancel)
     N — Responsive

   CARBON TOKENS USED:
     --cds-spacing-*   4px grid
     --cds-duration-*  motion tokens
     --cds-ease-*      easing curves
     All defined in globals.css :root block.
   ============================================================================= */

/* =============================================================================
   A — PAGE SHELL
   Warm off-white background. Two-column grid: sidebar left, form right.
   ============================================================================= */

.enrol-page {
  min-height: 100vh;
  background-color: #ffffff;
  font-family: var(--font-sans);
}

/* Hero band — same navy as contact page for consistency */
.enrol-hero {
  background-color: var(--color-navy);
  padding: var(--cds-spacing-09) 0;
}

.enrol-hero__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 48px;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--cds-spacing-06);
}

.enrol-hero__title {
  font-size: 34px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  margin: 0;
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.enrol-hero__title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-blue);
  margin-bottom: 14px;
}

.enrol-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-size: 13px;
  font-family: var(--font-sans);
  color: #94a3b8;
  white-space: nowrap;
  padding-bottom: 4px;
}

.enrol-hero__breadcrumb a       { color: #94a3b8; transition: color 70ms ease; }
.enrol-hero__breadcrumb a:hover { color: #ffffff; }
.enrol-hero__breadcrumb-sep     { opacity: 0.35; }
.enrol-hero__breadcrumb-current { color: #cbd5e1; }

/* Body layout — sidebar + form */
.enrol-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: 48px 48px 120px;
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 48px;
  align-items: start;
}

/* =============================================================================
   B — CARBON PROGRESS INDICATOR SIDEBAR
   Left column. Sticky so it stays visible while the form scrolls.
   Follows Carbon's vertical Progress Indicator pattern exactly.
   Reference: carbondesignsystem.com/components/progress-indicator/usage

   Step states:
     .step--incomplete  grey   — not yet visited
     .step--current     blue   — currently scrolled into view
     .step--complete    green  — all required fields filled
     .step--invalid     red    — visited but required fields still empty
   ============================================================================= */

.enrol-sidebar {
  position: sticky;
  /* 88px sticky header height + 24px breathing room = 112px.
     Without this the sidebar scrolls under the header. */
  top: 112px;
  background-color: #f4f4f4;
  border: 1px solid #e0e0e0;
  padding: var(--cds-spacing-06);
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Melbourne clock at the top of the sidebar */
.enrol-sidebar__clock {
  padding-bottom: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-05);
  border-bottom: 1px solid #e0e0e0;
}

.enrol-sidebar__clock-date {
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}

.enrol-sidebar__clock-time {
  font-size: 30px;
  font-weight: 500;
  font-family: var(--font-sans);
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}

/* Auto-save indicator below the clock */
.enrol-sidebar__autosave {
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin-top: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}

.enrol-sidebar__autosave-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
}

/* Progress indicator label */
.enrol-sidebar__label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: var(--cds-spacing-04);
}

/* ── Carbon Progress Indicator list ── */
.enrol-progress { list-style: none; padding: 0; margin: 0; }

/* Each step row */
.enrol-step {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  position: relative;
  padding-bottom: 0;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
}

/* Vertical connector line between steps — Carbon pattern */
.enrol-step:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;             /* centres on the 24px indicator circle */
  top: 24px;
  width: 2px;
  height: calc(100% - 8px);
  background-color: #e0e0e0;
  transition: background-color 150ms ease;
}

/* Connector turns green when the step above is complete */
.enrol-step--complete:not(:last-child)::after  { background-color: #16a34a; }
.enrol-step--invalid:not(:last-child)::after   { background-color: #e0e0e0; }

/* Step indicator circle */
.enrol-step__indicator {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid #9ca3af;
  background: #ffffff;
  margin-top: 10px;
  transition:
    border-color     150ms ease,
    background-color 150ms ease;
  position: relative;
  z-index: 1;
}

/* Step label + optional tag */
.enrol-step__content {
  padding: 8px 0 20px;
  flex: 1;
}

.enrol-step__label {
  font-size: 14px;
  font-weight: 400;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.3;
  transition: color 150ms ease, font-weight 150ms ease;
}

.enrol-step__tag {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 1px 6px;
  margin-top: 3px;
  border-radius: 0;
}

/* ── Step state: incomplete (default) ── */
.enrol-step--incomplete .enrol-step__indicator {
  border-color: #9ca3af;
  background: #ffffff;
}
.enrol-step--incomplete .enrol-step__label { color: var(--color-text-muted); }

/* ── Step state: current (blue — Carbon active) ── */
.enrol-step--current .enrol-step__indicator {
  border-color: var(--color-blue);
  background: var(--color-blue);
}
.enrol-step--current .enrol-step__label {
  color: var(--color-navy);
  font-weight: 600;
}
/* Carbon: filled blue circle with white inner dot for current step */
.enrol-step--current .enrol-step__indicator::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

/* ── Step state: complete — filled green dial (same as the blue current dial) ── */
.enrol-step--complete .enrol-step__indicator {
  border-color: #16a34a;
  background: #16a34a;        /* filled — identical treatment to the current step, just green */
}
.enrol-step--complete .enrol-step__label {
  color: var(--color-text);
  font-weight: 600;
}
/* White inner dot — mirrors the current step's dial */
.enrol-step--complete .enrol-step__indicator::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #ffffff;
}

/* ── Step state: invalid — outlined red circle + red exclamation (not filled) ── */
.enrol-step--invalid .enrol-step__indicator {
  border-color: #dc2626;
  background: transparent;   /* outline only */
}
.enrol-step--invalid .enrol-step__label { color: #dc2626; }
/* Red exclamation inside the outlined circle */
.enrol-step--invalid .enrol-step__indicator::after {
  content: "!";
  font-size: 14px;
  font-weight: 900;
  color: #dc2626;   /* red, not white */
  line-height: 1;
  font-family: var(--font-sans);
}

/* Optional step tag colours */
.enrol-step__tag--optional {
  background: #f0f2f5;
  color: var(--color-text-muted);
}
.enrol-step__tag--intl {
  background: rgba(37,99,235,0.08);
  color: var(--color-blue);
}

/* =============================================================================
   C — FORM AREA (right column)
   ============================================================================= */

.enrol-form-area {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Required field legend */
.enrol-form-area__legend {
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin-bottom: var(--cds-spacing-06);
}

.enrol-form-area__legend span { color: #dc2626; }

/* =============================================================================
   D — STUDENT TYPE SELECTOR
   Two large Carbon-style tile buttons: Domestic / International.
   Appears above the form sections. Sets context for conditional fields.
   ============================================================================= */

.student-type-selector {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-05);
  margin-bottom: var(--cds-spacing-07);
}

.student-type-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-06) var(--cds-spacing-06) var(--cds-spacing-07);
  background: #ffffff;
  border: 2px solid #e0e0e0;
  border-radius: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--font-sans);
  transition:
    border-color     150ms ease,
    background-color 150ms ease;
}

.student-type-tile:hover {
  border-color: var(--color-navy);
  background: #f4f4f4;
}

.student-type-tile--selected {
  border-color: var(--color-navy);
  background: #ffffff;
  border-top: 3px solid var(--color-navy);
}

/* Icon renders as bare SVG — no container box or background.
   Size is controlled by the SVG width/height attribute in the component. */
.student-type-tile__icon {
  display: flex;
  align-items: center;
  color: var(--color-navy);
  flex-shrink: 0;
  opacity: 0.85;
}

.student-type-tile--selected .student-type-tile__icon {
  opacity: 1;
}

.student-type-tile__title {
  font-size: 18px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.student-type-tile__desc {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0;
  line-height: 1.55;
}

.student-type-tile__check {
  margin-left: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 2px solid #e0e0e0;
  flex-shrink: 0;
  align-self: flex-start;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.student-type-tile--selected .student-type-tile__check {
  background: var(--color-navy);
  border-color: var(--color-navy);
}

/* =============================================================================
   E — FORM SECTIONS (accordion panels)
   Each section is a collapsible card with a header trigger and body.
   Scroll-spy adds .enrol-section--active when the section is in view.
   ============================================================================= */

.enrol-section {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-left: 5px solid #e0e0e0;   /* thicker for better visibility */
  margin-bottom: var(--cds-spacing-03);
  transition:
    border-left-color 150ms ease,
    box-shadow        150ms ease;
}

/* Current section — blue left border */
.enrol-section--current {
  border-left-color: var(--color-blue);
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
}

/* Complete section — green left border */
.enrol-section--complete { border-left-color: #16a34a; }

/* Invalid section — red left border */
.enrol-section--invalid  { border-left-color: #dc2626; }

/* Section header — clickable accordion trigger */
.enrol-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  font-family: var(--font-sans);
  gap: var(--cds-spacing-05);
  transition: background-color 70ms ease;
}

.enrol-section__header:hover { background-color: #f4f4f4; }

.enrol-section__header-left {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  flex: 1;
}

/* Standalone numeral (no bubble) — the digit itself carries the state colour,
   matching the tall numerals on the How to Apply page. */
.enrol-section__number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  font-size: 34px;
  font-weight: 800;
  line-height: 1;
  font-family: var(--font-sans);
  color: var(--color-navy);          /* default / incomplete */
  flex-shrink: 0;
  transition: color 150ms ease;
}

/* The number changes colour by state — no bubble. */
.enrol-section--current  .enrol-section__number { color: var(--color-blue); }
.enrol-section--complete .enrol-section__number { color: #16a34a; }
.enrol-section--invalid  .enrol-section__number { color: #dc2626; }

.enrol-section__title {
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.enrol-section__subtitle {
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0;
}

.enrol-section__badges {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  flex-shrink: 0;
}

.enrol-section__badge {
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 0;
}

.enrol-section__badge--optional {
  background: #f0f2f5;
  color: var(--color-text-muted);
}

.enrol-section__badge--intl {
  background: rgba(37,99,235,0.08);
  color: var(--color-blue);
}

/* Chevron — rotates when open */
.enrol-section__chevron {
  display: flex;
  align-items: center;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: transform 150ms cubic-bezier(0.2,0,0.38,0.9);
}

.enrol-section--open .enrol-section__chevron {
  transform: rotate(180deg);
}

/* Section body — shown when open */
.enrol-section__body {
  padding: 0 var(--cds-spacing-06) var(--cds-spacing-07);
  border-top: 1px solid #e0e0e0;
  animation: section-expand 150ms cubic-bezier(0,0,0.38,0.9);
}

@keyframes section-expand {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Optional section note */
.enrol-section__optional-note {
  margin: var(--cds-spacing-05) 0 var(--cds-spacing-06);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: #f4f4f4;
  border-left: 3px solid #e0e0e0;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.55;
}

/* Two-column field grid inside a section */
.enrol-section__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-06) var(--cds-spacing-07);
  margin-top: var(--cds-spacing-06);
}

.enrol-section__grid--full { grid-template-columns: 1fr; }
.enrol-section__grid--3col { grid-template-columns: 1fr 1fr 1fr; }

/* =============================================================================
   F — FIELD PRIMITIVES
   <Field> wraps label + input + error + tooltip.
   Consistent with Carbon's form field pattern.
   ============================================================================= */

.enrol-field { display: flex; flex-direction: column; gap: var(--cds-spacing-02); }

/* Label row — label text + optional tooltip trigger */
.enrol-field__label-row {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-02);
}

.enrol-field__label {
  font-size: 12.5px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.enrol-field__required { color: #dc2626; margin-left: 2px; }

/* Carbon text input */
.enrol-field__input,
.enrol-field__select,
.enrol-field__textarea {
  width: 100%;
  height: 48px;
  padding: 0 var(--cds-spacing-05);
  background-color: #f4f4f4;
  border: none;
  border-bottom: 2px solid #8d8d8d;
  border-radius: 0;
  outline: none;
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--color-text);
  transition:
    border-color     70ms cubic-bezier(0.2,0,0.38,0.9),
    background-color 70ms ease;
  -webkit-appearance: none;
  appearance: none;
}

.enrol-field__input:focus,
.enrol-field__select:focus,
.enrol-field__textarea:focus {
  border-bottom-color: var(--color-blue);
  background-color: #ffffff;
}

.enrol-field__input::placeholder,
.enrol-field__textarea::placeholder { color: var(--color-text-light); }

/* Error state */
.enrol-field__input--error,
.enrol-field__select--error,
.enrol-field__textarea--error {
  border-bottom-color: #dc2626;
  background-color: #fff5f5;
}

.enrol-field__textarea {
  height: auto;
  min-height: 120px;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  resize: vertical;
}

/* Select wrapper + chevron */
.enrol-field__select-wrap { position: relative; }

.enrol-field__select-wrap::after {
  content: "";
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 0; height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--color-text-muted);
  pointer-events: none;
}

/* Error message */
.enrol-field__error {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-02);
  font-size: 12px;
  font-family: var(--font-sans);
  color: #dc2626;
  line-height: 1.4;
}

/* Helper text (non-error) */
.enrol-field__helper {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.4;
}

/* ── Carbon file uploader ── */
.enrol-file-upload {
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);
}

.enrol-file-upload__drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--cds-spacing-03);
  padding: var(--cds-spacing-07) var(--cds-spacing-06);
  background: #f4f4f4;
  border: 1px dashed #8d8d8d;
  border-radius: 0;
  cursor: pointer;
  text-align: center;
  transition: border-color 150ms ease, background-color 150ms ease;
}

.enrol-file-upload__drop:hover,
.enrol-file-upload__drop--dragover {
  border-color: var(--color-blue);
  background: rgba(37,99,235,0.04);
}

.enrol-file-upload__drop input[type="file"] {
  position: absolute;
  width: 0; height: 0;
  opacity: 0;
  pointer-events: none;
}

.enrol-file-upload__icon {
  color: var(--color-text-muted);
  display: flex;
}

.enrol-file-upload__text {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text);
}

.enrol-file-upload__text span {
  color: var(--color-blue);
  font-weight: 600;
}

.enrol-file-upload__hint {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
}

/* Uploaded file row */
.enrol-file-upload__file {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: #ffffff;
  border: 1px solid #e0e0e0;
}

.enrol-file-upload__file-name {
  flex: 1;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enrol-file-upload__file-size {
  font-size: 12px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  flex-shrink: 0;
}

.enrol-file-upload__file-remove {
  display: flex;
  align-items: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  padding: 4px;
  flex-shrink: 0;
  transition: color 70ms ease;
}

.enrol-file-upload__file-remove:hover { color: #dc2626; }

/* =============================================================================
   F.1 — 100-POINT IDENTIFICATION CHECK (points meter + supporting documents)
   ============================================================================= */

.enrol-points-meter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: rgba(37,99,235,0.06);
  border: 1px solid var(--color-blue);
  border-left-width: 4px;
}

.enrol-points-meter--complete {
  background: rgba(22,163,74,0.06);
  border-color: #16a34a;
}

.enrol-points-meter__label {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-navy);
}

.enrol-points-meter:not(.enrol-points-meter--complete) .enrol-points-meter__label { color: var(--color-blue); }
.enrol-points-meter--complete .enrol-points-meter__label { color: #16a34a; }

.enrol-points-meter__value {
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-text);
}

.enrol-id-disclaimer {
  display: flex;
  align-items: flex-start;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05);
  margin-top: var(--cds-spacing-05);
  background: rgba(37,99,235,0.06);
  border: 1px solid var(--color-blue);
  border-left-width: 4px;
}

.enrol-id-disclaimer__icon {
  flex-shrink: 0;
  color: var(--color-blue);
  display: flex;
}

.enrol-id-disclaimer__text {
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text);
  line-height: 1.55;
}

/* Confirmation row shown once an ID document slot has an uploaded file */
.enrol-id-doc-confirm {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: rgba(22,163,74,0.06);
  border: 1px solid #16a34a;
  border-left-width: 4px;
}

.enrol-id-doc-confirm__icon {
  flex-shrink: 0;
  color: #16a34a;
  display: flex;
}

.enrol-id-doc-confirm__text {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-navy);
  flex-shrink: 0;
}

.enrol-id-doc-confirm__file {
  flex: 1;
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.enrol-id-doc-confirm__change {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-blue);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: underline;
}

.enrol-id-doc-confirm__remove {
  flex-shrink: 0;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: underline;
  transition: color 70ms ease;
}

.enrol-id-doc-confirm__remove:hover { color: #dc2626; }

/* =============================================================================
   G — TOOLTIP (question mark popover)
   ============================================================================= */

.enrol-tooltip {
  position: relative;
  display: inline-flex;
}

.enrol-tooltip__trigger {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #e0e0e0;
  color: var(--color-text-muted);
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  flex-shrink: 0;
  transition: background-color 70ms ease, color 70ms ease;
}

.enrol-tooltip__trigger:hover {
  background: var(--color-navy);
  color: #ffffff;
}

.enrol-tooltip__popover {
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 280px;
  background: var(--color-navy);
  color: #cbd5e1;
  font-size: 13px;
  font-family: var(--font-sans);
  line-height: 1.6;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  border-radius: 0;
  z-index: 50;
  box-shadow: var(--shadow-lg);
  animation: tooltip-in 110ms cubic-bezier(0,0,0.38,0.9);
  pointer-events: none;
}

/* Tooltip arrow */
.enrol-tooltip__popover::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--color-navy);
}

@keyframes tooltip-in {
  from { opacity: 0; transform: translateX(-50%) translateY(4px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* =============================================================================
   H — AUTO-SAVE INDICATOR
   Appears in the sidebar below the clock. Updates every save.
   ============================================================================= */

.enrol-autosave { display: flex; align-items: center; gap: 6px; }

.enrol-autosave__text {
  font-size: 11px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
}

.enrol-autosave__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #16a34a;
  flex-shrink: 0;
  animation: pulse 2s ease infinite;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.4; }
}

/* =============================================================================
   I — REVIEW MODAL
   Read-only summary of the entire form before final submission.
   Each section shown as a collapsible card with an Edit button.
   ============================================================================= */

.enrol-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  animation: fade-in-overlay 150ms ease;
}

@keyframes fade-in-overlay {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.enrol-modal {
  background: #ffffff;
  width: 100%;
  max-width: 760px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  border-top: 3px solid var(--color-navy);
  animation: modal-slide-in 150ms cubic-bezier(0.2,0,0.38,0.9);
}

@keyframes modal-slide-in {
  from { opacity: 0; transform: translateY(-12px); }
  to   { opacity: 1; transform: translateY(0); }
}

.enrol-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cds-spacing-06) var(--cds-spacing-07);
  border-bottom: 1px solid #e0e0e0;
  flex-shrink: 0;
}

.enrol-modal__title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.enrol-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-muted);
  transition: background-color 70ms ease;
}

.enrol-modal__close:hover { background: #f4f4f4; }

.enrol-modal__body {
  overflow-y: auto;
  padding: var(--cds-spacing-06) var(--cds-spacing-07);
  flex: 1;
}

.enrol-modal__intro {
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin: 0 0 var(--cds-spacing-06);
  line-height: 1.65;
}

/* Review section card */
.review-section {
  border: 1px solid #e0e0e0;
  margin-bottom: var(--cds-spacing-04);
}

.review-section__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cds-spacing-04) var(--cds-spacing-05);
  background: #f4f4f4;
  border-bottom: 1px solid #e0e0e0;
}

.review-section__title {
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0;
}

.review-section__edit {
  font-size: 13px;
  font-family: var(--font-sans);
  color: var(--color-blue);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 70ms ease;
}

.review-section__edit:hover { color: var(--color-blue-hover); }

.review-section__body {
  padding: var(--cds-spacing-05);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--cds-spacing-04) var(--cds-spacing-06);
}

.review-field__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  margin-bottom: 2px;
}

.review-field__value {
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--color-text);
}

.enrol-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05) var(--cds-spacing-07);
  border-top: 1px solid #e0e0e0;
  flex-shrink: 0;
}

/* =============================================================================
   J — CANCEL MODAL
   "Are you sure?" prompt. Smaller than the review modal.
   ============================================================================= */

.cancel-modal {
  background: #ffffff;
  width: 100%;
  max-width: 480px;
  border-top: 3px solid #dc2626;
  animation: modal-slide-in 150ms cubic-bezier(0.2,0,0.38,0.9);
}

.cancel-modal__header {
  padding: var(--cds-spacing-06) var(--cds-spacing-07) var(--cds-spacing-04);
}

.cancel-modal__title {
  font-size: 20px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--cds-spacing-03);
}

.cancel-modal__body {
  padding: 0 var(--cds-spacing-07) var(--cds-spacing-06);
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.65;
}

.cancel-modal__footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--cds-spacing-04);
  padding: var(--cds-spacing-05) var(--cds-spacing-07);
  border-top: 1px solid #e0e0e0;
}

/* =============================================================================
   K — SUCCESS SCREEN
   Shown after successful submission. Application number + PDF download.
   ============================================================================= */

.enrol-success {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  padding: var(--cds-spacing-10) var(--cds-spacing-07);
  text-align: center;
  background: #f4f4f4;
}

.enrol-success__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(22,163,74,0.10);
  color: #16a34a;
  margin-bottom: var(--cds-spacing-06);
}

.enrol-success__title {
  font-size: 32px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
  margin: 0 0 var(--cds-spacing-04);
  letter-spacing: -0.02em;
}

.enrol-success__number {
  font-size: 28px;
  font-weight: 300;
  font-family: var(--font-sans);
  color: var(--color-blue);
  letter-spacing: 0.04em;
  margin: 0 0 var(--cds-spacing-04);
}

.enrol-success__message {
  font-size: 16px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 var(--cds-spacing-08);
  max-width: 520px;
}

.enrol-success__actions {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);
  flex-wrap: wrap;
  justify-content: center;
}

/* ── PDF print template ──
   Hidden on screen, only visible when printing.
   @media print shows this and hides everything else. */
.enrol-print-template {
  display: none;
}

@media print {
  body > *:not(.enrol-print-template) { display: none !important; }

  .enrol-print-template {
    display: block;
    padding: 48px;
    font-family: 'Source Sans 3', Arial, sans-serif;
    color: #111827;
  }

  .print__logo {
    display: flex;
    justify-content: center;
    margin-bottom: 32px;
  }

  .print__divider {
    border: none;
    border-top: 2px solid #1a2744;
    margin: 24px 0;
  }

  .print__title {
    font-size: 24px;
    font-weight: 700;
    color: #1a2744;
    text-align: center;
    margin: 0 0 8px;
  }

  .print__number {
    font-size: 20px;
    font-weight: 300;
    color: #2563eb;
    text-align: center;
    letter-spacing: 0.06em;
    margin: 0 0 32px;
  }

  .print__fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px 32px;
    margin-bottom: 32px;
  }

  .print__field-label {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: #6b7280;
    margin-bottom: 2px;
  }

  .print__field-value {
    font-size: 14px;
    color: #111827;
  }

  .print__message {
    font-size: 14px;
    line-height: 1.75;
    color: #374151;
    background: #f5f6f8;
    padding: 20px 24px;
    margin-bottom: 48px;
    border-left: 3px solid #1a2744;
  }

  .print__footer {
    text-align: center;
    font-size: 12px;
    color: #9ca3af;
    border-top: 1px solid #e2e6ee;
    padding-top: 16px;
  }
}

/* =============================================================================
   L — DEV TOOLBAR
   Fixed bottom-left. Only renders in development (NODE_ENV check in component).
   Collapses to a tab when not hovered.
   ============================================================================= */

.dev-toolbar--enrol {
  position: fixed;
  bottom: 24px;
  left: 24px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: var(--color-navy);
  border: 2px solid #f1c21b;   /* amber — DEV warning colour */
  box-shadow: var(--shadow-lg);
  max-width: 220px;
  transition: opacity 150ms ease;
}

.dev-toolbar--enrol .dev-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f1c21b;
  cursor: pointer;
}

.dev-toolbar--enrol .dev-toolbar__label {
  font-size: 11px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #111827;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.dev-toolbar--enrol .dev-toolbar__body {
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.dev-toolbar--enrol .dev-toolbar__btn {
  display: block;
  width: 100%;
  padding: 8px 12px;
  background: rgba(255,255,255,0.08);
  border: none;
  color: #f4f4f4;
  font-size: 12px;
  font-family: var(--font-sans);
  text-align: left;
  cursor: pointer;
  border-radius: 0;
  transition: background-color 70ms ease;
}

.dev-toolbar--enrol .dev-toolbar__btn:hover { background: rgba(255,255,255,0.18); }

/* =============================================================================
   M — ACTION BUTTONS
   Submit and Cancel sit at the bottom of the form — larger than standard.
   ============================================================================= */

.enrol-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-05);
  padding: var(--cds-spacing-07) var(--cds-spacing-08);
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-top: 3px solid var(--color-navy);
  margin-top: var(--cds-spacing-06);
}

.enrol-actions__left { display: flex; align-items: center; gap: var(--cds-spacing-04); }
.enrol-actions__right { display: flex; align-items: center; gap: var(--cds-spacing-04); }

/* Large Cancel button */
.enrol-btn-cancel {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  height: 60px;
  padding: 0 var(--cds-spacing-08);
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid #e0e0e0;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 70ms ease, border-color 70ms ease, color 70ms ease;
}

.enrol-btn-cancel:hover {
  background: #f4f4f4;
  border-color: #8d8d8d;
  color: var(--color-text);
}

/* Large Submit button */
.enrol-btn-submit {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-03);
  height: 60px;
  padding: 0 var(--cds-spacing-09);
  background: var(--color-navy);
  color: #ffffff;
  border: none;
  border-radius: 0;
  font-size: 16px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background-color 70ms cubic-bezier(0.2,0,0.38,0.9);
}

.enrol-btn-submit:hover    { background: var(--color-navy-dark); }
.enrol-btn-submit:disabled { background: #c6c6c6; cursor: not-allowed; }

/* =============================================================================
   N — RESPONSIVE
   ============================================================================= */

/* ≤1024px — sidebar moves to top horizontal bar */
@media (max-width: 1024px) {
  .enrol-body {
    grid-template-columns: 1fr;
    gap: 24px;
    padding: 24px 32px 100px;
  }

  .enrol-sidebar {
    position: static;
    /* Switch to horizontal scroll on tablet */
    overflow-x: auto;
  }

  /* Progress indicator becomes horizontal */
  .enrol-progress {
    display: flex;
    flex-direction: row;
    gap: 0;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .enrol-step { flex-direction: column; align-items: center; min-width: 80px; }
  .enrol-step:not(:last-child)::after {
    top: 12px;
    left: calc(50% + 12px);
    width: calc(100% - 24px);
    height: 2px;
  }
  .enrol-step__content { padding: 6px 0 0; text-align: center; }
  .enrol-step__label   { font-size: 11px; }
  .enrol-step__indicator { margin-top: 0; }
}

@media (max-width: 768px) {
  .enrol-hero__inner { flex-direction: column; align-items: flex-start; gap: 12px; }
  .enrol-hero__title { font-size: 28px; }
  .enrol-body        { padding: 16px 20px 100px; }
  .student-type-selector { grid-template-columns: 1fr; }
  .enrol-section__grid { grid-template-columns: 1fr; }
  .enrol-section__grid--3col { grid-template-columns: 1fr; }
  .review-section__body { grid-template-columns: 1fr; }
  .enrol-actions { flex-direction: column-reverse; }
  .enrol-actions__left,
  .enrol-actions__right { width: 100%; }
  .enrol-btn-cancel,
  .enrol-btn-submit { width: 100%; justify-content: center; }
}

@media (max-width: 600px) {
  .enrol-hero__inner { padding: 0 20px; }
  .enrol-body        { padding: 16px 16px 100px; }
}

}

/* ============================================================
   newsroom.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Newsroom Page Styles
   app/styles/newsroom.css

   DESIGN TOKENS used here (all defined in globals.css):
     --color-navy        #1a2744   hero bg, active filter, badges, headings
     --color-navy-dark   #111b33   hover states
     --color-bg          #f5f6f8   page background
     --color-surface     #ffffff   cards
     --color-border      #e2e6ee   card borders, filter strip border
     --color-text        #111827   primary body text
     --color-text-muted  #6b7280   secondary / date text
     --color-text-light  #9ca3af   empty state text
     --font-sans                   Source Sans 3
     --cds-spacing-*               4px Carbon spacing grid
     --shadow-md / --shadow-sm     elevation
     --radius-sm: 2px              cards (Carbon container style)
     --radius-full: 9999px         filter pills

   SECTION MAP:
     .newsroom-hero          IBM Carbon leadspace-inspired navy banner
     .newsroom-filter-wrap   Sticky pill-tab category filter
     .newsroom-carousel-section  Large auto-rotating banner (+ .newsroom-carousel)
     .newsroom-content       Main post area (featured + grid, max 6) + sidebar
     .newsroom-sidebar       "Latest News & Trends" — spaced-out card list
     .newsroom-featured      Large split featured post card
     .post-grid              3-column responsive grid
     .post-card              Standard article card
     .post-visual            Gradient image placeholder (+ category colour vars)
     .newsroom-rail-section  "More from the Newsroom" — sidescrolling rail band
     .newsroom-rail          Snap-scroll track (+ .rail-card)
     .post-badge             Category label chip
     .post-date              Article date
     .post-readmore          "Read more / Read article" CTA link

   RULES:
     border-radius: 0 on buttons (Carbon interactive), 2px on cards
     48px side padding matching header + footer exactly
     Filter strip: sticky top: 88px (header height)
     All font-family via var(--font-sans) — never hard-coded
     Carbon motion: 140ms cubic-bezier(0.2,0,0.38,0.9) on transitions
   ============================================================================= */

/* =============================================================================
   1. PAGE WRAPPER
   ============================================================================= */

.newsroom-page {
  min-height: 100vh;
  background: var(--color-bg);
}

/* =============================================================================
   2. HERO BANNER
   IBM Carbon "leadspace" pattern: solid navy, typographic hierarchy,
   subtle grid line pattern for depth. No background image needed.
   ============================================================================= */

.newsroom-hero {
  background-color: var(--color-navy);
  padding: var(--cds-spacing-11) var(--page-side) var(--cds-spacing-10); /* 80px top, 64px bottom */
  position: relative;
  overflow: hidden;
}

/* Subtle Carbon-style grid line overlay */
.newsroom-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

/* Accent line — matches the blue accent used across the site */
.newsroom-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-blue);
}

.newsroom-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
}

/* Typography matches the shared course/resource banner template. */
.newsroom-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ecf0f6;
  margin: 0 0 10px 0;
  font-family: var(--font-sans);
}

.newsroom-hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 0 0 8px 0;
  font-family: var(--font-sans);
}

.newsroom-hero__subtitle {
  font-size: var(--fs-hero-sub);
  color: #ecf0f6;
  max-width: 540px;
  line-height: 1.55;
  margin: 0;
  font-family: var(--font-sans);
}

/* =============================================================================
   3. CATEGORY FILTER STRIP
   Sticky below the 88px header. Horizontal pill tabs — active: navy fill,
   inactive: light grey. Matches UNSW Newsroom filter pattern.
   ============================================================================= */

.newsroom-filter-wrap {
  position: sticky;
  top: 88px;    /* header height */
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.newsroom-filter {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--cds-spacing-04) var(--page-side);   /* 12px, fluid sides */
  display: flex;
  gap: var(--cds-spacing-03);            /* 8px */
  overflow-x: auto;
  scrollbar-width: none;
}

.newsroom-filter::-webkit-scrollbar {
  display: none;
}

.newsroom-filter__pill {
  flex-shrink: 0;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);  /* 8px 16px */
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);    /* 14px */
  font-weight: 500;
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition:
    background var(--cds-duration-fast-02) var(--cds-ease-standard),
    color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
  white-space: nowrap;
  line-height: 1;
  font-family: var(--font-sans);
}

.newsroom-filter__pill:hover {
  background: var(--color-border);
  color: var(--color-text);
  border-color: #c8cdd6;
}

.newsroom-filter__pill--active {
  background: var(--color-navy);
  color: #ffffff;
  font-weight: 600;
  border-color: var(--color-navy);
}

.newsroom-filter__pill--active:hover {
  background: var(--color-navy-dark);
  border-color: var(--color-navy-dark);
  color: #ffffff;
}

/* =============================================================================
   4. HERO CAROUSEL
   Large auto-rotating banner between the filter strip and the main feed.
   Slides are full-bleed (reuse the `.cat--*` category gradients + `.post-*`
   atoms), with prev/next arrows and a dot rail. Independent of the active
   category filter — always shows the most recent posts.
   ============================================================================= */

.newsroom-carousel-section {
  padding: var(--cds-spacing-09) var(--page-side) 0;   /* fluid sides — matches hero/filter/content gutters */
}

.newsroom-carousel {
  position: relative;
  overflow: hidden;
  height: 420px;
  max-width: var(--page-max);
  margin: 0 auto;
}

.newsroom-carousel__track {
  display: flex;
  height: 100%;
  transition: transform 550ms cubic-bezier(0.2, 0, 0.38, 0.9);
}

.newsroom-carousel__slide {
  flex: 0 0 100%;
  position: relative;
  display: flex;
  align-items: flex-end;
  height: 100%;
  text-decoration: none;
  overflow: hidden;
}

.newsroom-carousel__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0.28) 55%, transparent 85%);
}

.newsroom-carousel__content {
  position: relative;
  z-index: 1;
  max-width: 640px;
  padding: var(--cds-spacing-09) var(--cds-spacing-08);  /* 48px 40px */
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-04);  /* 12px */
}

.newsroom-carousel__title {
  font-size: clamp(1.625rem, 1.48rem + 0.635vw, 2.25rem);  /* 26px → 32px (~1400px) → 36px */
  font-weight: 700;
  color: #ffffff;
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: var(--cds-spacing-03) 0 0;
  font-family: var(--font-sans);
}

.newsroom-carousel__excerpt {
  font-size: 1rem;
  color: #ecf0f6;
  line-height: 1.65;
  margin: 0;
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.newsroom-carousel__footer {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-06);  /* 24px */
  margin-top: var(--cds-spacing-02);
}

.newsroom-carousel__date {
  font-size: 0.8125rem;
  color: #cbd5e1;
  font-family: var(--font-sans);
}

.newsroom-carousel__cta {
  color: #ffffff !important;
}
.newsroom-carousel__cta:hover { color: #93c5fd !important; }

/* Prev/next arrows */
.newsroom-carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: rgba(255, 255, 255, 0.14);
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.4);
  border-radius: 50%;
  cursor: pointer;
  backdrop-filter: blur(4px);
  transition: background var(--cds-duration-fast-02) var(--cds-ease-standard),
              border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.newsroom-carousel__arrow:hover {
  background: #ffffff;
  color: var(--color-navy);
  border-color: #ffffff;
}

.newsroom-carousel__arrow--prev { left: var(--cds-spacing-06); }
.newsroom-carousel__arrow--next { right: var(--cds-spacing-06); }

/* Dot nav */
.newsroom-carousel__dots {
  position: absolute;
  bottom: var(--cds-spacing-05);   /* 16px */
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 8px;
}

.newsroom-carousel__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.4);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background var(--cds-duration-fast-02) var(--cds-ease-standard),
              width var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.newsroom-carousel__dot--active {
  background: #ffffff;
  width: 22px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .newsroom-carousel__track { transition: none; }
}

/* =============================================================================
   5. CONTENT AREA
   ============================================================================= */

.newsroom-content {
  padding: var(--cds-spacing-10) var(--page-side) var(--cds-spacing-12);  /* 64px, fluid sides, 96px */
}

.newsroom-content__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 56px;
  align-items: start;
}

.newsroom-main {
  min-width: 0;
}

.newsroom-empty {
  text-align: center;
  color: var(--color-text-light);
  padding: var(--cds-spacing-10) 0;
  font-size: var(--font-size-base);
  font-family: var(--font-sans);
}

/* =============================================================================
   SIDEBAR — Latest News & Trends
   Sticky right column, always shows most recent 5 posts regardless of filter.
   Each item is its own separated card (not a hairline-divided list) so the
   column reads as spacious rather than cramped.
   ============================================================================= */

.newsroom-sidebar {
  position: sticky;
  top: 104px;
  min-width: 0;
}

.newsroom-sidebar__head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 4px 4px 18px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.newsroom-sidebar__head-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--color-navy);
  color: #ffffff;
}

.newsroom-sidebar__body {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.sidebar-news-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
  border-radius: var(--radius-sm);
  text-decoration: none;
  transition:
    box-shadow var(--cds-duration-moderate-01) var(--cds-ease-standard),
    border-color var(--cds-duration-moderate-01) var(--cds-ease-standard),
    transform var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

.sidebar-news-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--color-navy);
  transform: translateY(-2px);
}

.sidebar-news-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.sidebar-news-card__title {
  font-size: 15px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.5;
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.sidebar-news-card__footer {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  padding-top: 4px;
  transition: color 70ms ease, gap 70ms ease;
}

.sidebar-news-card:hover .sidebar-news-card__footer {
  color: var(--color-blue);
  gap: 9px;
}

/* =============================================================================
   6. FEATURED POST CARD
   Split layout: left gradient visual, right editorial body.
   Only shown on "Latest" (all posts) view.
   ============================================================================= */

.newsroom-featured {
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--cds-spacing-09);   /* 48px */
  min-height: 380px;
  transition: box-shadow var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

.newsroom-featured:hover {
  box-shadow: var(--shadow-md);
}

.newsroom-featured__visual {
  min-height: 320px;
  min-width: 0;
}

.newsroom-featured__body {
  padding: var(--cds-spacing-09) var(--cds-spacing-08);   /* 48px 40px */
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--cds-spacing-04);  /* 12px */
  min-width: 0;
}

.newsroom-featured__meta {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-04);  /* 12px */
}

.newsroom-featured__title {
  font-size: 1.625rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.25;
  margin: var(--cds-spacing-02) 0 var(--cds-spacing-03);
  font-family: var(--font-sans);
}

.newsroom-featured__excerpt {
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  flex: 1;
  font-family: var(--font-sans);
}

/* =============================================================================
   7. POST GRID
   3-column responsive grid. Each card is equal height via flex column.
   ============================================================================= */

.post-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--cds-spacing-06);  /* 24px */
}

/* =============================================================================
   8. POST CARD
   ============================================================================= */

.post-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
  transition:
    box-shadow var(--cds-duration-moderate-01) var(--cds-ease-standard),
    border-color var(--cds-duration-moderate-01) var(--cds-ease-standard),
    transform var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

.post-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #c8cdd6;
  transform: translateY(-2px);
}

.post-card__visual {
  height: 200px;
  flex-shrink: 0;
}

.post-card__body {
  padding: var(--cds-spacing-06) var(--cds-spacing-05) var(--cds-spacing-05);  /* 24px 16px 16px */
  display: flex;
  flex-direction: column;
  gap: var(--cds-spacing-03);  /* 8px */
  flex: 1;
}

.post-card__meta {
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);  /* 8px */
  flex-wrap: wrap;
}

.post-card__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin: var(--cds-spacing-01) 0 var(--cds-spacing-02);
  font-family: var(--font-sans);
}

.post-card__excerpt {
  font-size: var(--font-size-sm);   /* 14px */
  color: var(--color-text-muted);
  line-height: 1.65;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 1;
  font-family: var(--font-sans);
}

/* =============================================================================
   9. GRADIENT VISUAL PLACEHOLDER
   Category-coded gradients used until real photography is added.
   Each post-visual fills with a gradient + a large Carbon icon.
   TO ADD IMAGES: wrap a <next/image> inside .post-visual and remove the gradient.
   ============================================================================= */

.post-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
}

.post-visual__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(255, 255, 255, 0.3);
  flex-shrink: 0;
}

/* Category gradient map — sourced from brand navy and complementary hues */
.cat--security    { background: linear-gradient(150deg, #1a2744 0%, #2d4a82 100%); }
.cat--it          { background: linear-gradient(150deg, #0f3460 0%, #1565c0 100%); }
.cat--business    { background: linear-gradient(150deg, #243157 0%, #374151 100%); }
.cat--community   { background: linear-gradient(150deg, #1b4332 0%, #2d6a4f 100%); }
.cat--firstaid    { background: linear-gradient(150deg, #7f1d1d 0%, #b91c1c 100%); }
.cat--hospitality { background: linear-gradient(150deg, #451a03 0%, #92400e 100%); }
.cat--general     { background: linear-gradient(150deg, #1f2937 0%, #4b5563 100%); }

/* =============================================================================
   10. SIDESCROLLING RAIL — "More from the Newsroom"
   A full-width band below the main content, distinct light-grey background so
   it reads as its own section. Horizontally snap-scrolling row of compact
   cards, independent of the category filter above.
   ============================================================================= */

.newsroom-rail-section {
  background: #f0f2f5;
  border-top: 1px solid var(--color-border);
  padding: var(--cds-spacing-10) var(--page-side);  /* 64px, fluid sides */
}

.newsroom-rail-section__inner {
  max-width: var(--page-max);
  margin: 0 auto;
}

.newsroom-rail-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.newsroom-rail-head__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 6px;
  font-family: var(--font-sans);
}

.newsroom-rail-head__title {
  font-size: clamp(1.25rem, 1.15rem + 0.44vw, 1.6875rem);  /* 20px → 24px (~1400px) → 27px */
  font-weight: 700;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  margin: 0;
  font-family: var(--font-sans);
}

.newsroom-rail-nav {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}

.newsroom-rail-nav__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  background: var(--color-surface);
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  border-radius: 50%;
  cursor: pointer;
  transition:
    background var(--cds-duration-fast-02) var(--cds-ease-standard),
    color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}

.newsroom-rail-nav__btn:hover:not(:disabled) {
  background: var(--color-navy);
  color: #ffffff;
  border-color: var(--color-navy);
}

.newsroom-rail-nav__btn:disabled {
  color: var(--color-text-light);
  cursor: not-allowed;
  opacity: 0.5;
}

.newsroom-rail {
  display: flex;
  gap: 20px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
  padding-bottom: 4px;
  /* Bleed to the section's own edges — must exactly cancel .newsroom-rail-section's
     side padding above, hence referencing the same --page-side token. */
  margin-inline: calc(var(--page-side) * -1);
  padding-inline: var(--page-side);
}

.newsroom-rail::-webkit-scrollbar { display: none; }

.rail-card {
  flex: 0 0 auto;
  width: 268px;
  scroll-snap-align: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  transition:
    box-shadow var(--cds-duration-moderate-01) var(--cds-ease-standard),
    transform var(--cds-duration-moderate-01) var(--cds-ease-standard),
    border-color var(--cds-duration-moderate-01) var(--cds-ease-standard);
}

.rail-card:hover {
  box-shadow: var(--shadow-md);
  border-color: #c8cdd6;
  transform: translateY(-3px);
}

.rail-card__visual { height: 140px; flex-shrink: 0; }

.rail-card__body {
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.rail-card__meta {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.rail-card__title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.45;
  margin: 0;
  font-family: var(--font-sans);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* =============================================================================
   11. SHARED ATOMS: badge, date, read-more CTA
   ============================================================================= */

/* Category label badge */
.post-badge {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--color-navy);
  color: #ffffff;
  padding: 3px 8px;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.post-badge--sm {
  font-size: 0.625rem;
}

/* Article date */
.post-date {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
  font-family: var(--font-sans);
}

/* Read more / Read article link */
.post-readmore {
  display: inline-flex;
  align-items: center;
  gap: var(--cds-spacing-02);   /* 4px */
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  margin-top: auto;
  padding-top: var(--cds-spacing-03);
  transition: gap var(--cds-duration-fast-02) var(--cds-ease-standard),
              color var(--cds-duration-fast-02) var(--cds-ease-standard);
  font-family: var(--font-sans);
}

.post-readmore:hover {
  gap: var(--cds-spacing-03);   /* 8px — arrow slides right */
  color: var(--color-blue);
}

.post-readmore--lg {
  font-size: 0.9375rem;
}

/* =============================================================================
   12. RESPONSIVE
   ============================================================================= */

/* Match filter sticky top to reduced header height */
@media (max-width: 1024px) {
  .newsroom-filter-wrap { top: 72px; }
}

/* Tablet — 1100px: sidebar drops below main content, cards become a
   horizontally scrollable row (each keeps its own card styling). */
@media (max-width: 1100px) {
  .newsroom-content__inner {
    grid-template-columns: 1fr;
  }
  .newsroom-sidebar {
    position: static;
  }
  .newsroom-sidebar__body {
    flex-direction: row;
    gap: 16px;
    overflow-x: auto;
    padding-bottom: 4px;
    scrollbar-width: none;
  }
  .newsroom-sidebar__body::-webkit-scrollbar { display: none; }
  .sidebar-news-card {
    min-width: 260px;
    flex-shrink: 0;
  }
}

/* Tablet — 960px */
@media (max-width: 960px) {
  .newsroom-hero {
    padding: var(--cds-spacing-10) 32px var(--cds-spacing-09);
  }

  .newsroom-filter {
    padding: var(--cds-spacing-04) 32px;
  }

  .newsroom-carousel-section { padding: var(--cds-spacing-08) 32px 0; }
  .newsroom-carousel { height: 340px; }
  .newsroom-carousel__content { padding: var(--cds-spacing-07) var(--cds-spacing-06); }
  .newsroom-carousel__title { font-size: 1.5rem; }

  .newsroom-content {
    padding: var(--cds-spacing-09) 32px var(--cds-spacing-10);
  }

  .newsroom-featured {
    grid-template-columns: 1fr;
  }

  .newsroom-featured__visual {
    min-height: 240px;
  }

  .newsroom-featured__body {
    padding: var(--cds-spacing-07) var(--cds-spacing-06);
  }

  .post-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .newsroom-rail-section { padding: var(--cds-spacing-09) 32px; }
  .newsroom-rail { margin: 0 -32px; padding-left: 32px; padding-right: 32px; }
}

/* Mobile — 640px */
@media (max-width: 640px) {
  .newsroom-hero {
    padding: var(--cds-spacing-09) 20px var(--cds-spacing-08);
  }

  .newsroom-filter {
    padding: var(--cds-spacing-04) 20px;
  }

  .newsroom-content {
    padding: var(--cds-spacing-08) 20px var(--cds-spacing-09);
  }

  .newsroom-featured__body {
    padding: var(--cds-spacing-06) 20px;
  }

  .post-grid {
    grid-template-columns: 1fr;
    gap: var(--cds-spacing-05);
  }

  .post-card__visual {
    height: 160px;
  }

  .newsroom-rail-section { padding: var(--cds-spacing-08) 20px; }
  .newsroom-rail { margin: 0 -20px; padding-left: 20px; padding-right: 20px; }
  .newsroom-rail-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .rail-card { width: 240px; }

  .newsroom-carousel-section { padding: var(--cds-spacing-07) 20px 0; }
  .newsroom-carousel { height: 300px; }
  .newsroom-carousel__overlay {
    background: linear-gradient(0deg, rgba(0,0,0,0.68) 0%, rgba(0,0,0,0.2) 60%, transparent 100%);
  }
  .newsroom-carousel__content { max-width: 100%; padding: var(--cds-spacing-06) 20px; gap: var(--cds-spacing-03); }
  .newsroom-carousel__title { font-size: 1.25rem; }
  .newsroom-carousel__excerpt { display: none; }
  .newsroom-carousel__arrow { width: 38px; height: 38px; }
  .newsroom-carousel__arrow--prev { left: var(--cds-spacing-03); }
  .newsroom-carousel__arrow--next { right: var(--cds-spacing-03); }
}

}

/* ============================================================
   lln.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — LLN Assessment Styles
   app/styles/lln.css
   Design: matches agents/course editorial layout — full-width, open, no heavy boxing.
============================================================================= */

/* ── Hero band ───────────────────────────────────────────────────────────────
   Unchanged — navy leadspace with grid overlay + blue bottom accent.           */

.lln-hero {
  background-color: var(--color-navy);
  padding: var(--cds-spacing-11) 0 var(--cds-spacing-10);
  position: relative;
  overflow: hidden;
}

.lln-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.lln-hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-blue);
}

.lln-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
  position: relative;
}

.lln-hero__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  color: #ecf0f6;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  margin-bottom: 18px;
  font-family: var(--font-sans);
}

.lln-hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1.25;
}

.lln-hero__desc {
  font-size: var(--fs-hero-sub);
  color: #ecf0f6;
  line-height: 1.7;
  margin: 0 0 22px;
  max-width: 580px;
  font-family: var(--font-sans);
}

.lln-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #ecf0f6;
  font-family: var(--font-sans);
}

.lln-hero__breadcrumb a { color: #ecf0f6; transition: color 70ms ease; }
.lln-hero__breadcrumb a:hover { color: #ffffff; }

/* ── Page body ───────────────────────────────────────────────────────────────
   Full-width, 1280px centred, 48px side padding — matches agents-page.         */

.lln-page {
  background: var(--color-bg);
  min-height: 60vh;
}

.lln-wrap {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 64px var(--page-side) 80px;
}

/* ── Scroll reveal ───────────────────────────────────────────────────────────
   Same pattern as agents page.                                                  */

.lln-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms var(--cds-ease-standard, ease),
              transform 550ms var(--cds-ease-standard, ease);
}

.lln-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .lln-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── Welcome: intro split ────────────────────────────────────────────────────
   Left: eyebrow + title + desc + 3-tile grid + CTA.
   Right: "How it works" sidebar card + help callout.                           */

.lln-intro-split {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 72px;
  align-items: start;
  padding-bottom: 64px;
  margin-bottom: 64px;
  border-bottom: 1px solid var(--color-border);
}

/* Eyebrow — matches cx-eyebrow with the blue rule prefix */
.lln-eyebrow {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
}

.lln-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  display: inline-block;
  flex-shrink: 0;
}

.lln-intro-title {
  font-size: clamp(2.6875rem, 2.46rem + 0.95vw, 3.625rem);  /* 43px → 52px (~1400px) → 58px */
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.025em;
  line-height: 1.08;
  margin-bottom: 20px;
  font-family: var(--font-sans);
}

.lln-intro-desc {
  font-size: 19px;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 54ch;
  margin-bottom: 36px;
  font-family: var(--font-sans);
}

/* ── 3-tile feature grid ─────────────────────────────────────────────────── */

.lln-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  margin-bottom: 40px;
}

.lln-tile {
  background: var(--color-surface);
  padding: 28px 24px;
  transition: background var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.lln-tile:hover { background: #f8f9fa; }

.lln-tile__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 14px;
  flex-shrink: 0;
  color: var(--color-navy);
}

.lln-tile__icon svg {
  width: 32px;
  height: 32px;
  display: block;
}

.lln-tile__title {
  font-size: 19px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 7px;
  font-family: var(--font-sans);
}

.lln-tile__desc {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-family: var(--font-sans);
}

/* ── CTA row — centred Begin assessment button ───────────────────────────── */

.lln-cta-row {
  display: flex;
  justify-content: center;
}

/* ── Shared buttons ──────────────────────────────────────────────────────── */

.lln-btn-primary {
  background: var(--color-navy);
  color: #fff;
  padding: 18px 60px;
  font-size: 18px;
  font-weight: 700;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-sans);
  letter-spacing: 0.01em;
  transition: background var(--cds-duration-fast-01) var(--cds-ease-standard);
  text-decoration: none;
}

.lln-btn-primary:hover { background: var(--color-navy-dark); }
.lln-btn-primary:disabled { background: #c6c6c6; cursor: not-allowed; }

.lln-btn-ghost {
  background: var(--color-surface);
  color: var(--color-navy);
  padding: 12px 24px;
  font-size: 15px;
  font-weight: 700;
  border: 1px solid var(--color-border);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
  transition: border-color var(--cds-duration-fast-01) var(--cds-ease-standard),
              background var(--cds-duration-fast-01) var(--cds-ease-standard);
  text-decoration: none;
}

.lln-btn-ghost:hover { border-color: var(--color-navy); background: var(--color-bg); }

/* ── Right rail ──────────────────────────────────────────────────────────── */

.lln-rail { display: flex; flex-direction: column; gap: 16px; }

.lln-rail-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
}

.lln-rail-card__head {
  background: var(--color-navy);
  padding: 16px 22px;
  border-bottom: 4px solid var(--color-blue);
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-family: var(--font-sans);
}

.lln-rail-card__body { padding: 6px 20px 14px; }

.lln-rail-step {
  display: flex;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid var(--color-border);
}

.lln-rail-step:last-child { border-bottom: none; }

.lln-rail-step__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  font-family: var(--font-sans);
}

.lln-rail-step__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 3px;
  font-family: var(--font-sans);
}

.lln-rail-step__desc {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-family: var(--font-sans);
}

/* ── Help callout ────────────────────────────────────────────────────────── */

/* Cream callout — mirrors course template `.cx-callout` (never yellow) */
.lln-help-card {
  background: #f5f0e8;
  border: 1px solid #e7dfd0;
  border-left: 4px solid var(--color-blue);
  padding: 20px 22px;
}

.lln-help-card__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 8px;
  font-family: var(--font-sans);
}

.lln-help-card__desc {
  font-size: 16px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-bottom: 16px;
  font-family: var(--font-sans);
}

.lln-btn-contact {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 14px 22px;
  background: var(--color-navy);
  color: #fff;
  font-size: 16px;
  font-weight: 700;
  font-family: var(--font-sans);
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.lln-btn-contact:hover { background: var(--color-navy-dark); }

/* ── About strip — flows directly under intro desc, no separate section ─────
   Navy top border acts as the divider; 3 columns separated by hairlines.       */

.lln-about-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  margin: 32px 0 36px;
  border-top: 2px solid var(--color-navy);
}

.lln-about-item {
  padding: 24px 24px 24px 0;
  border-right: 1px solid var(--color-border);
}

.lln-about-item:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 24px;
}

.lln-about-item:nth-child(2) {
  padding-left: 24px;
}

.lln-about-item__num {
  font-size: 64px;
  font-weight: 800;
  color: d0d5dd;
  line-height: 1;
  margin-bottom: 10px;
  letter-spacing: -0.03em;
  font-family: var(--font-sans);
}

.lln-about-item__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
  font-family: var(--font-sans);
}

.lln-about-item__desc {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.65;
  font-family: var(--font-sans);
}

/* ── Step indicator (steps 1–4) ──────────────────────────────────────────── */

.lln-step-indicator {
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 16px 24px;
  margin-bottom: 24px;
}

.lln-step {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  font-size: 15px;
  font-family: var(--font-sans);
  color: var(--color-text-muted);
  position: relative;
}

.lln-step:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: 0;
  color: var(--color-border);
  font-size: 14px;
}

.lln-step__dot {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #e5e7eb;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
}

.lln-step--active { color: var(--color-navy); font-weight: 600; }
.lln-step--active .lln-step__dot { background: var(--color-navy); color: #fff; }
.lln-step--done { color: #16a34a; }
.lln-step--done .lln-step__dot { background: #16a34a; color: #fff; }

/* ── Step page body (steps 1, 2, confirm) ────────────────────────────────── */

.lln-body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--page-side) 100px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* ── Cards (used in step pages) ──────────────────────────────────────────── */

.lln-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
}

.lln-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px;
  background: var(--color-navy);
  border-bottom: 4px solid var(--color-blue);
}

.lln-card__title {
  font-size: 21px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-sans);
}

.lln-card__required {
  font-size: 14px;
  color: var(--color-text-muted);
  font-style: italic;
  font-family: var(--font-sans);
}

.lln-card__body { padding: 24px; }

/* ── Two-column layout (area/course selection) ───────────────────────────── */

.lln-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}

.lln-detail-desktop { display: block; }
.lln-detail-mobile  { display: none; }

/* ── Instruction text ────────────────────────────────────────────────────── */

.lln-instruct {
  font-size: 17px;
  color: var(--color-text-muted);
  line-height: 1.7;
  margin: 0 0 16px;
  font-family: var(--font-sans);
}

/* ── Nav bar (steps) ─────────────────────────────────────────────────────── */

.lln-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  border-top: 1px solid var(--color-border);
  background: var(--color-surface);
}

.lln-btn-back {
  font-size: 16px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 14px 28px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.lln-btn-back:hover { background: #f5f5f5; }

.lln-btn-next {
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  background: var(--color-navy);
  border: none;
  padding: 14px 32px;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.lln-btn-next:hover    { background: var(--color-navy-dark); }
.lln-btn-next:disabled { background: #c6c6c6; cursor: not-allowed; }

/* ── Side panel (step pages) ─────────────────────────────────────────────── */

.lln-body--with-side {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--page-side) 100px;
}

.lln-main { display: flex; flex-direction: column; gap: 24px; }

.lln-side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  position: sticky;
  top: 104px;
}

.lln-side-card__head {
  padding: 16px;
  font-size: 13px;
  font-weight: 700;
  color: #ffffff;
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-navy);
  border-bottom: 4px solid var(--color-blue);
}

.lln-side-card__body { padding: 14px 16px; }

.lln-side-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 15px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.lln-side-item:last-child { border-bottom: none; }

.lln-side-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-navy);
  flex-shrink: 0;
  margin-top: 5px;
}

/* ── Quiz header ─────────────────────────────────────────────────────────── */

.lln-quiz-hdr {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 16px 48px;
}

.lln-quiz-hdr--sticky {
  position: sticky;
  top: 0;
  z-index: 20;
}

.lln-quiz-hdr__inner {
  max-width: 860px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}

.lln-quiz-label {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.lln-quiz-domain {
  font-size: 26px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
}

.lln-quiz-counter {
  font-size: 14px;
  font-weight: 700;
  color: var(--color-text-muted);
  background: #f5f6f7;
  border: 1px solid var(--color-border);
  padding: 8px 18px;
  font-family: var(--font-sans);
}

/* ── Form inputs ─────────────────────────────────────────────────────────── */

.lln-form-label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}

.lln-input {
  width: 100%;
  padding: 9px 12px;
  font-size: 15px;
  border: 1px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  outline: none;
  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
  transition: border-color 70ms ease;
}

.lln-input:focus { border-bottom-color: var(--color-blue); }

/* ── Results nav bar — outside the grid, full width, never covered ───────── */

.lln-results-nav {
  grid-column: 1 / -1;
  position: relative;
  z-index: 10;
}

/* Results body: grid ends, nav bar sits below as a separate full-width row */
.lln-results-body {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 32px;
  align-items: start;
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 48px var(--page-side) 0;
}

.lln-results-footer {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side) 80px;
}

/* ── Dev toolbar ─────────────────────────────────────────────────────────── */

.dev-toolbar--lln {
  position: fixed;
  bottom: 16px;
  left: 16px;
  z-index: 999;
  background: #1a1a1a;
  border: 1px solid #333;
  font-family: monospace;
  font-size: 12px;
  min-width: 180px;
}

.dev-toolbar--lln .dev-toolbar__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  cursor: pointer;
  background: none;
  border: none;
  color: #fff;
  width: 100%;
  font-family: monospace;
  font-size: 12px;
}

.dev-toolbar--lln .dev-toolbar__label { color: #facc15; font-weight: 700; }

.dev-toolbar--lln .dev-toolbar__body {
  display: flex;
  flex-direction: column;
  border-top: 1px solid #333;
}

.dev-toolbar--lln .dev-toolbar__btn {
  padding: 7px 12px;
  background: none;
  border: none;
  border-bottom: 1px solid #2a2a2a;
  color: #ccc;
  text-align: left;
  cursor: pointer;
  font-family: monospace;
  font-size: 12px;
}

.dev-toolbar--lln .dev-toolbar__btn:hover { background: #2a2a2a; color: #fff; }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .lln-side-card      { top: 88px; }
}

@media (max-width: 900px) {
  .lln-intro-split {
    grid-template-columns: 1fr;
    gap: 40px;
    padding-bottom: 48px;
    margin-bottom: 48px;
  }
  .lln-body--with-side {
    grid-template-columns: 1fr;
    padding: 24px 24px 80px;
  }
  .lln-side { order: -1; }
}

@media (max-width: 768px) {
  .lln-wrap          { padding: 40px 24px 64px; }
  .lln-hero__inner   { padding: 0 24px; }
  .lln-hero__title   { font-size: 26px; }
  .lln-intro-title   { font-size: 36px; }
  .lln-tiles                        { grid-template-columns: 1fr; }
  .lln-about-strip                  { grid-template-columns: 1fr; border-top-width: 2px; }
  .lln-about-item                   { padding: 20px 0; border-right: none; border-bottom: 1px solid var(--color-border); }
  .lln-about-item:last-child        { border-bottom: none; padding-left: 0; }
  .lln-about-item:nth-child(2)      { padding-left: 0; }
  .lln-body          { padding: 24px 20px 80px; }
  .lln-step-indicator { gap: 4px; padding: 12px 16px; }
  .lln-step span     { display: none; }
  .lln-two-col       { grid-template-columns: 1fr; gap: 16px; }
  .lln-detail-desktop { display: none; }
  .lln-detail-mobile  { display: block; margin-top: 12px; }
}

@media (max-width: 480px) {
  .lln-wrap          { padding: 32px 16px 48px; }
  .lln-hero__inner   { padding: 0 16px; }
  .lln-body          { padding: 16px 16px 80px; }
}

/* ── Quiz responsive ─────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .lln-quiz-body .lln-side { display: none; }
}

/* ── Results responsive ──────────────────────────────────────────────────── */

@media (min-width: 901px) {
  .lln-results-body .lln-side { position: sticky; top: 24px; }
}

@media (max-width: 900px) {
  .lln-results-body            { grid-template-columns: 1fr; padding: 24px 24px 0; }
  .lln-results-body .lln-main  { order: 0 !important; }
  .lln-results-body .lln-side  { order: 1 !important; }
  .lln-results-footer          { padding: 0 24px 64px; }
  .lln-results-body            { overflow-x: hidden; }
  .lln-results-body .lln-card  { max-width: 100%; overflow: hidden; }
  .lln-results-body table      { table-layout: fixed; width: 100%; }
  .lln-bars                    { gap: 4px !important; }
}

@media (min-width: 769px) {
  .lln-info-side { position: sticky; top: 24px; }
}
}

/* ============================================================
   rpl.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — RPL (Recognition of Prior Learning) styles
   app/styles/rpl.css

   The RPL pages reuse the shared `lln-*` chrome (hero, cards, nav bar, inputs,
   side panel, results grid). This file adds ONLY the RPL-specific pieces:
   the landing layout, "is / is not" split, Rules-of-Evidence grid, pathway
   timeline, outcomes, FAQ, qualification picker, and self-check controls.

   Palette: navy / blue tokens only. NO yellow/amber/gold anywhere.
============================================================================= */

/* Course-template alignment tokens (mirror course-detail.css `.cx`).
   Cream accent — the course template's signature callout colour (never yellow).
   Container width/gutter now come from the shared sitewide fluid tokens (see
   globals.css --page-max/--page-side) so RPL, course-detail and every other
   page breathe the same amount at the same viewport widths.                    */
.rpl-body,
.rpl-cream {
  --rpl-cream:      var(--color-cream);
  --rpl-cream-line: var(--color-cream-line);
  --rpl-max:        var(--page-max);
  --rpl-side:       var(--page-side);
}

/* ── Sub-nav — tab strip linking the four RPL pages ──────────────────────── */

.rpl-subnav {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  /* Not nested inside .rpl-body/.rpl-cream, so the --rpl-max/--rpl-side
     aliases (scoped to those classes) aren't in scope here — use the global
     fluid-container tokens directly instead (see globals.css). */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 20px var(--page-side) 0;
  border-bottom: 1px solid var(--color-border);
}

.rpl-subnav__link {
  padding: 12px 18px;
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-muted);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
  font-family: var(--font-sans);
  transition: color 100ms ease, border-color 100ms ease;
}

.rpl-subnav__link:hover { color: var(--color-navy); }

.rpl-subnav__link--active {
  color: var(--color-navy);
  border-bottom-color: var(--color-blue);
}

@media (max-width: 768px) {
  .rpl-subnav { padding: 16px 20px 0; gap: 0; }
  .rpl-subnav__link { padding: 10px 12px; font-size: 0.875rem; }
}

/* ── Landing layout: content + sticky sidebar ────────────────────────────── */

.rpl-body {
  max-width: var(--rpl-max);
  margin: 0 auto;
  padding: 56px var(--rpl-side) 96px;
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 300px;
  gap: 48px;
  align-items: start;
}

.rpl-main { min-width: 0; display: flex; flex-direction: column; gap: 64px; }

/* Variant for pages with no TOC column (e.g. Apply) — main + sidebar only.
   Falls back to the same single-column stack as .rpl-body below 1080px. */
.rpl-body--no-toc { grid-template-columns: minmax(0, 1fr) 300px; }

/* ── On-this-page nav ────────────────────────────────────────────────────── */

.rpl-toc { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 2px; }

.rpl-toc__label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-text-muted);
  margin-bottom: 10px;
  font-family: var(--font-sans);
}

.rpl-toc__link {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  padding: 7px 0 7px 14px;
  border-left: 2px solid var(--color-border);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: color 90ms ease, border-color 90ms ease;
}

.rpl-toc__link:hover { color: var(--color-navy); border-left-color: var(--color-navy); }

/* ── Section headings ────────────────────────────────────────────────────── */

.rpl-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
}

.rpl-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

.rpl-h2 {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 12px 0 16px;
  font-family: var(--font-sans);
}

.rpl-lead {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  max-width: 68ch;
  margin: 0 0 28px;
  font-family: var(--font-sans);
}

/* ── Reveal ──────────────────────────────────────────────────────────────── */

.rpl-reveal {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity 550ms ease, transform 550ms ease;
}
.rpl-reveal.is-visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .rpl-reveal { opacity: 1; transform: none; transition: none; }
}

/* ── "RPL is / is not" split ─────────────────────────────────────────────── */

.rpl-isnot-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.rpl-isnot-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 22px 24px;
}
.rpl-isnot-card--is    { border-top: 3px solid var(--color-blue); }
.rpl-isnot-card--isnot { border-top: 3px solid var(--color-navy); }

.rpl-isnot-card__head {
  font-size: 0.8125rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-navy);
  margin-bottom: 14px;
  font-family: var(--font-sans);
}

.rpl-isnot-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--color-text);
  font-family: var(--font-sans);
  border-top: 1px solid var(--color-border);
}
.rpl-isnot-row:first-of-type { border-top: none; }

.rpl-isnot-row__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.rpl-isnot-row__icon--yes { color: var(--color-blue); }
.rpl-isnot-row__icon--no {
  position: relative;
}
.rpl-isnot-row__icon--no::before,
.rpl-isnot-row__icon--no::after {
  content: "";
  position: absolute;
  width: 14px;
  height: 2px;
  background: var(--color-text-muted);
  top: 9px;
  left: 3px;
}
.rpl-isnot-row__icon--no::before { transform: rotate(45deg); }
.rpl-isnot-row__icon--no::after  { transform: rotate(-45deg); }

/* ── Rules of Evidence grid ──────────────────────────────────────────────── */

.rpl-rules { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--color-border); }

/* Single-column variant — for lists with an odd item count, where a 2-col
   grid would leave a visible empty cell (e.g. the 3-item fee factors list). */
.rpl-rules--single { grid-template-columns: 1fr; }

.rpl-rule {
  background: var(--color-surface);
  padding: 22px 24px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}

.rpl-rule__num {
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  background: var(--color-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
  font-weight: 700;
  font-family: var(--font-sans);
}

.rpl-rule__title { font-size: 1.125rem; font-weight: 700; color: var(--color-navy); margin-bottom: 4px; font-family: var(--font-sans); }
.rpl-rule__body  { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.6; font-family: var(--font-sans); }

/* ── Pathway timeline ────────────────────────────────────────────────────── */

.rpl-timeline { position: relative; display: flex; flex-direction: column; gap: 0; }

.rpl-timeline::before {
  content: "";
  position: absolute;
  left: 17px;
  top: 8px;
  bottom: 8px;
  width: 2px;
  background: var(--color-border);
}

.rpl-tl-step { display: flex; gap: 20px; padding: 12px 0; position: relative; }

.rpl-tl-step__dot {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  background: var(--color-navy);
  color: #fff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--font-sans);
  position: relative;
  z-index: 1;
}

.rpl-tl-step__card {
  flex: 1;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-blue);
  padding: 16px 20px;
}

.rpl-tl-step__title {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 6px;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.rpl-tl-step__led {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
  padding: 3px 8px;
  white-space: nowrap;
  flex-shrink: 0;
}

.rpl-tl-step__body { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.65; font-family: var(--font-sans); }

/* ── Outcomes ────────────────────────────────────────────────────────────── */

.rpl-outcomes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 24px; }

.rpl-outcome {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
  padding: 20px 22px;
}

.rpl-outcome__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); margin-bottom: 8px; font-family: var(--font-sans); }
.rpl-outcome__body  { font-size: 0.9062rem; color: var(--color-text-muted); line-height: 1.65; font-family: var(--font-sans); }

/* Cream callout — mirrors course template `.cx-callout` */
.rpl-rights {
  background: var(--rpl-cream);
  border: 1px solid var(--rpl-cream-line);
  border-left: 4px solid var(--color-blue);
  padding: 20px 24px;
}
.rpl-rights__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); margin-bottom: 8px; font-family: var(--font-sans); }
.rpl-rights__body  { font-size: 0.9375rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; font-family: var(--font-sans); }
.rpl-rights__body a { color: var(--color-blue); font-weight: 600; }

/* Credit Transfer note — cream callout on the landing "what" section */
.rpl-ct-note {
  margin: 24px 0 0;
  background: var(--rpl-cream);
  border: 1px solid var(--rpl-cream-line);
  border-left: 4px solid var(--color-navy);
  padding: 16px 20px;
  font-size: 0.9375rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  font-family: var(--font-sans);
}
.rpl-ct-note strong { color: var(--color-navy); }
.rpl-ct-note a { color: var(--color-blue); font-weight: 600; }

/* ── Single-column layout — pages with no TOC/sidebar split (Prices) ─────── */

.rpl-body--single {
  /* Full-bleed fluid container (matches the hero/subnav left edge) — NOT
     nested inside .rpl-body/.rpl-cream, so use the global tokens directly
     rather than the --rpl-max/--rpl-side aliases (see .rpl-subnav above for
     the same fix — those aliases silently invalidate the whole shorthand,
     including the padding-bottom, when referenced out of scope). */
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 56px var(--page-side) 96px;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

/* Cap reading width on direct children so lines don't stretch the full fluid
   container width, while staying left-aligned under the same padding as
   every other section on the page (rather than centering as its own
   narrower column). */
.rpl-body--single > * { max-width: 760px; }

.rpl-fee-cards { display: flex; gap: 16px; flex-wrap: wrap; }
.rpl-fee-cards .rpl-side-card { flex: 1 1 260px; }

/* ── Evidence types — read-only informational grid (Evidence page) ──────── */

.rpl-evtype-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }

.rpl-evtype {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-blue);
  padding: 20px 22px;
}
.rpl-evtype__title { font-size: 1rem; font-weight: 700; color: var(--color-navy); margin-bottom: 8px; font-family: var(--font-sans); }
.rpl-evtype__desc  { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; font-family: var(--font-sans); }

@media (max-width: 768px) {
  .rpl-evtype-grid { grid-template-columns: 1fr; }
}

/* ── Qualification picker ────────────────────────────────────────────────── */

.rpl-qual-list { display: flex; flex-direction: column; gap: 0; margin-bottom: 24px; }

.rpl-qual {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 18px 22px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  border-top: none;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 120ms ease, border-color 120ms ease;
}
.rpl-qual:first-child { border-top: 1px solid var(--color-border); }
.rpl-qual:hover { background: #f8f9fa; border-left-color: var(--color-navy); }
.rpl-qual--selected { background: #f0f4fb; border-left-color: var(--color-navy); }

.rpl-qual__check {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  margin-top: 2px;
}
.rpl-qual--selected .rpl-qual__check { background: var(--color-navy); border-color: var(--color-navy); }

.rpl-qual__text { display: flex; flex-direction: column; gap: 3px; }
.rpl-qual__code { font-size: 0.75rem; font-weight: 700; font-family: monospace; color: var(--color-blue); }
.rpl-qual__name { font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); }
.rpl-qual__field { font-size: 0.875rem; color: var(--color-text-muted); }

.rpl-start-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.rpl-start-note { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin: 0; max-width: 46ch; font-family: var(--font-sans); }
.rpl-start-note a { color: var(--color-blue); font-weight: 600; }

/* ── FAQ — full-width band (outside the 3-column shell, mirrors course `.cx-faq`) ── */

.rpl-faq-band {
  background: var(--color-surface);
  border-top: 1px solid var(--color-border);
  padding-block: clamp(48px, 7vw, 88px);
}
.rpl-faq-band__inner {
  max-width: 860px;
  margin: 0 auto;
  padding-inline: clamp(20px, 5vw, 48px);
}
.rpl-faq-band__header { text-align: center; margin-bottom: clamp(28px, 4vw, 48px); }
.rpl-faq-band__header .rpl-eyebrow { justify-content: center; }

.rpl-faq { border-top: 1px solid var(--color-border); }

.rpl-faq__item { border-bottom: 1px solid var(--color-border); }

.rpl-faq__q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  padding: 20px 4px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
}

.rpl-faq__chevron { color: var(--color-text-muted); transition: transform 180ms ease; flex-shrink: 0; }
.rpl-faq__item--open .rpl-faq__chevron { transform: rotate(180deg); }

.rpl-faq__a {
  padding: 0 40px 22px 4px;
  font-size: 0.9688rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-family: var(--font-sans);
}

/* ── Landing sidebar ─────────────────────────────────────────────────────── */

.rpl-sidebar { position: sticky; top: 104px; display: flex; flex-direction: column; gap: 16px; }

.rpl-side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
}
.rpl-side-card__head {
  padding: 14px 18px;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #fff;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  background: var(--color-navy);
  border-bottom: 4px solid var(--color-blue);
  font-family: var(--font-sans);
}
.rpl-side-card__body { padding: 16px 18px; }

.rpl-glance { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.rpl-glance:last-child { border-bottom: none; }
.rpl-glance__icon { color: var(--color-navy); flex-shrink: 0; margin-top: 2px; }
.rpl-glance__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); font-family: var(--font-sans); }
.rpl-glance__desc  { font-size: 0.8438rem; color: var(--color-text-muted); line-height: 1.55; font-family: var(--font-sans); }

.rpl-side-note { font-size: 0.9062rem; color: var(--color-text-muted); line-height: 1.65; margin: 0 0 14px; font-family: var(--font-sans); }

.rpl-side-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 18px;
  background: var(--color-navy);
  color: #fff;
  font-size: 0.9375rem;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background 120ms ease;
}
.rpl-side-btn:hover { background: var(--color-navy-dark); }

.rpl-side-contact { margin-top: 14px; font-size: 0.875rem; color: var(--color-navy); font-weight: 600; display: flex; flex-direction: column; gap: 2px; }

/* ── Assessment: details-stage side column — reuses .rpl-side-card ────────── */

.rpl-detail-side { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 769px) { .rpl-detail-side { position: sticky; top: 24px; align-self: start; } }

.rpl-detail-side__name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--color-navy);
  line-height: 1.3;
  margin-top: 10px;
  font-family: var(--font-sans);
}

/* ── Self-check questions ────────────────────────────────────────────────── */

.rpl-q { padding: 22px 0; border-top: 1px solid var(--color-border); }
.rpl-q:first-of-type { border-top: none; padding-top: 4px; }

.rpl-q__num { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin-bottom: 8px; font-family: var(--font-sans); }
.rpl-q__text { font-size: 1.0625rem; font-weight: 700; color: var(--color-text); line-height: 1.5; margin-bottom: 6px; font-family: var(--font-sans); }
.rpl-q__help { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; margin-bottom: 14px; font-family: var(--font-sans); }
.rpl-q__options { display: flex; flex-direction: column; gap: 8px; }

.rpl-opt {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  font-size: 0.9375rem;
  color: var(--color-text);
  font-family: var(--font-sans);
  transition: background 100ms ease, border-color 100ms ease;
}
.rpl-opt:hover { background: #f8f9fa; }
.rpl-opt--selected { background: #e8f0fb; border-left-color: var(--color-navy); }

.rpl-opt__radio {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border-radius: 50%;
  border: 2px solid #bbb;
  transition: border-color 100ms ease, background 100ms ease;
}
.rpl-opt--selected .rpl-opt__radio { border-color: var(--color-navy); background: var(--color-navy); box-shadow: inset 0 0 0 3px var(--color-surface); }

/* ── Evidence checklist ──────────────────────────────────────────────────── */

.rpl-evidence { margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--color-border); }
.rpl-evidence__title { font-size: 1.0625rem; font-weight: 700; color: var(--color-navy); margin-bottom: 6px; font-family: var(--font-sans); }

.rpl-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  width: 100%;
  text-align: left;
  padding: 12px 16px;
  margin-bottom: 8px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid transparent;
  cursor: pointer;
  font-family: var(--font-sans);
  transition: background 100ms ease, border-color 100ms ease;
}
.rpl-check:hover { background: #f8f9fa; }
.rpl-check--on { background: #e8f0fb; border-left-color: var(--color-navy); }

.rpl-check__box {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  border: 2px solid #bbb;
  margin-top: 2px;
  transition: border-color 100ms ease, background 100ms ease;
  position: relative;
}
.rpl-check--on .rpl-check__box { border-color: var(--color-navy); background: var(--color-navy); }
.rpl-check--on .rpl-check__box::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 0px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.rpl-check__label { display: block; font-size: 0.9375rem; font-weight: 700; color: var(--color-text); }
.rpl-check__desc  { display: block; font-size: 0.8125rem; color: var(--color-text-muted); margin-top: 2px; }

/* ── Results: indicative summary + notice ────────────────────────────────── */

.rpl-summary {
  background: var(--rpl-cream);
  border: 1px solid var(--rpl-cream-line);
  border-left: 4px solid var(--color-blue);
  padding: 20px 24px;
  margin-bottom: 18px;
}
.rpl-summary__title { font-size: 1.1875rem; font-weight: 700; color: var(--color-navy); margin-bottom: 8px; font-family: var(--font-sans); }
.rpl-summary__body  { font-size: 0.9688rem; color: var(--color-text-muted); line-height: 1.7; margin: 0; font-family: var(--font-sans); }

.rpl-notice {
  font-size: 0.875rem;
  color: var(--color-text-muted);
  line-height: 1.7;
  padding: 14px 18px;
  background: var(--color-bg);
  border: 1px dashed var(--color-border);
  font-family: var(--font-sans);
}
.rpl-notice strong { color: var(--color-navy); }

.rpl-next { display: flex; flex-direction: column; gap: 0; }
.rpl-next__item { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--color-border); }
.rpl-next__item:last-child { border-bottom: none; }
.rpl-next__icon { color: var(--color-blue); flex-shrink: 0; margin-top: 2px; }
.rpl-next__title { font-size: 0.9375rem; font-weight: 700; color: var(--color-navy); font-family: var(--font-sans); }
.rpl-next__body  { font-size: 0.875rem; color: var(--color-text-muted); line-height: 1.6; font-family: var(--font-sans); }

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .rpl-body { grid-template-columns: 1fr; gap: 40px; }
  .rpl-toc { display: none; }
  .rpl-sidebar { position: static; grid-row: 3; }
}

@media (max-width: 768px) {
  .rpl-body { padding: 40px 24px 72px; }
  .rpl-h2 { font-size: 1.625rem; }
  .rpl-isnot-grid,
  .rpl-rules,
  .rpl-outcomes { grid-template-columns: 1fr; }
  .rpl-tl-step__title { flex-direction: column; align-items: flex-start; gap: 6px; }
  .rpl-start-row { flex-direction: column; align-items: stretch; }
  .rpl-start-row .lln-btn-primary { justify-content: center; }
}

@media (max-width: 480px) {
  .rpl-body { padding: 32px 16px 56px; }
}

}

/* ============================================================
   course.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {

/* =============================================================================
   ALIT — Course Page Styles
   Covers both the courses landing page (/courses) and individual course pages.
============================================================================= */

/* =============================================================================
   COURSES LANDING — /courses
   Category jump nav + section headers + 3-column card grid
   All content sourced from COURSE_CATEGORIES in lib/nav-data.ts.
============================================================================= */

.courses-landing {
  background: var(--color-bg);
  min-height: 100vh;
}

/* ── Jump navigation ──
   Contained to the same 1280px column as the body (NOT edge-to-edge).
   Sits in a larger gap below the prospectus banner (separation) and tight
   above the course cards, so the filter + cards read as one unit. */
/* Sticky category filter — full-width surface strip attached directly beneath
   the hero, sticking under the header on scroll (same pattern as the Newsroom
   filter). */
.courses-jumpnav {
  position: sticky;
  top: 88px;    /* header height */
  z-index: 20;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
}

.courses-jumpnav__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: var(--cds-spacing-04) var(--page-side);   /* 12px, fluid sides */
  display: flex;
  align-items: center;
  gap: var(--cds-spacing-03);            /* 8px */
  overflow-x: auto;
  scrollbar-width: none;
}
.courses-jumpnav__inner::-webkit-scrollbar { display: none; }

/* Pill tabs — matched to the Newsroom category filter. */
.courses-jumpnav__link {
  flex-shrink: 0;
  padding: var(--cds-spacing-03) var(--cds-spacing-05);  /* 8px 16px */
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);        /* 14px */
  font-weight: 500;
  font-family: var(--font-sans);
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  text-decoration: none;
  white-space: nowrap;
  line-height: 1;
  transition:
    background var(--cds-duration-fast-02) var(--cds-ease-standard),
    color var(--cds-duration-fast-02) var(--cds-ease-standard),
    border-color var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.courses-jumpnav__link:hover {
  background: var(--color-border);
  color: var(--color-text);
  border-color: #c8cdd6;
}

/* ── Body wrapper ──
   Tight top padding so the cards group with the filter bar above them. */
.courses-body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 24px var(--page-side) 96px;
  display: flex;
  flex-direction: column;
  gap: 64px;
}

/* ── Category section ──
   Plain horizontal header — title + course count on one line, above the
   grid, with a navy rule underneath as the section divider.
   scroll-margin-top clears the sticky header (88px) + sticky jump-nav
   (~60px) so jumping to a category via the filter pills stops with the
   section's own top edge in view, instead of landing with the sticky bars
   overlapping the header/first card row. */
.courses-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
  scroll-margin-top: 164px;
}

/* Per-category accent — drives the card banner icon and the course-code
   chip (both read var(--cat-accent) against a white/light background).
   Dark-mode overrides below lighten the darkest ones (Security, Business)
   so they stay visible against the dark card/banner surface. */
.courses-section--business      { --cat-accent: #4338ca; } /* indigo — distinct from IT's blue */
.courses-section--community     { --cat-accent: #15803d; } /* green */
.courses-section--firstaid      { --cat-accent: #dc2626; } /* red — universal medical association */
.courses-section--it            { --cat-accent: #1565c0; } /* blue */
.courses-section--security      { --cat-accent: #1e293b; } /* near-black slate — distinct from IT's blue */
.courses-section--hospitality   { --cat-accent: #c2410c; } /* burnt orange (not amber — house rule bans yellow/amber/gold) */
.courses-section--general       { --cat-accent: #475569; } /* fallback for any uncategorised entry */

.courses-section__label {
  display: flex;
  align-items: baseline;
  gap: 12px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-navy);
}

.courses-section__title {
  font-size: clamp(1.5625rem, 1.43rem + 0.57vw, 2.125rem);  /* 25px → 30px (~1400px) → 34px */
  font-weight: 800;
  color: var(--color-navy);
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0;
}

.courses-section__count {
  font-size: 11px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
  flex-shrink: 0;
}

/* ── Course card grid — 4 columns ── */
.courses-grid {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  align-content: start;
}

/* ── Course card ── */
/* ── Course card (landing page grid) ── */
.courses-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  display: flex;
  flex-direction: column;
  transition: box-shadow 110ms ease, border-color 110ms ease;
}
.courses-card:hover {
  box-shadow: 0 4px 16px rgba(26, 39, 68, 0.10);
  border-color: #c4cfe0;
}

.courses-card__banner {
  height: 140px;
  flex-shrink: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Colour comes from --cat-accent, set once per category on .courses-section
   (see CATEGORY_ACCENT in page.tsx) — shared with the title's drop-cap and
   the course-code chip below. */
.courses-card__banner-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--cat-accent, #4b5563);
}

.courses-card__body {
  padding: 18px 16px 14px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-height: 96px;
}

.courses-card__code {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--cat-accent, var(--color-navy));
  background: #edf1f8;
  padding: 2px 7px;
  font-family: var(--font-sans);
  align-self: flex-start;
  border: 1px solid #d0d9eb;
}

.courses-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
  font-family: var(--font-sans);
  flex: 1;
}

.courses-card__footer {
  padding: 10px 16px;
  border-top: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.courses-card__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: gap 70ms ease, color 70ms ease;
}
.courses-card__cta:hover {
  gap: 10px;
  color: var(--color-blue);
}

/* ── Responsive ── */
@media (max-width: 1280px) {
  .courses-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .courses-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .courses-body { padding: 32px 24px 80px; gap: 48px; }
  .courses-jumpnav__inner { padding: 0 24px; }
}

@media (max-width: 480px) {
  .courses-body { padding: 24px 16px 64px; }
  .courses-jumpnav__inner { padding: 0 16px; }
  .courses-grid { grid-template-columns: 1fr; }
}

.course-hero {
  background-color: var(--color-navy);
  padding: 48px 0;
}

.course-hero__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side);
}

.course-hero__eyebrow {
  font-size: 11px;
  font-weight: 700;
  color: #b8c2d4;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}

.course-hero__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 8px;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.course-hero__title::before {
  content: "";
  display: block;
  width: 40px;
  height: 3px;
  background: var(--color-blue);
  margin-bottom: 14px;
}

.course-hero__sub {
  font-size: 14px;
  color: #b8c2d4;
  font-family: var(--font-sans);
  margin-bottom: 14px;
}

.course-hero__breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: #b8c2d4;
  font-family: var(--font-sans);
}

.course-hero__breadcrumb a { color: #b8c2d4; transition: color 70ms ease; }
.course-hero__breadcrumb a:hover { color: #ffffff; }

/* ── Landing hero: text + merged prospectus actions ─────────────────────────── */
.courses-hero__inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  flex-wrap: wrap;
}
.courses-hero__text { max-width: 640px; }
.courses-hero__text .course-hero__sub { margin-bottom: 0; }
.courses-hero__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

/* ── Leadspace variant ───────────────────────────────────────────────────────
   Carbon "leadspace" banner — navy with a subtle grid overlay, a full-width
   blue accent line at the bottom, and the taller 80/64 spacing. Matches the
   Newsroom hero; reuses the course-hero typography. Used by the Resources pages. */
.course-hero--leadspace {
  padding: var(--cds-spacing-11) 0 var(--cds-spacing-10);   /* 80px top, 64px bottom */
  position: relative;
  overflow: hidden;
}

.course-hero--leadspace::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.course-hero--leadspace::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-blue);
}

.course-hero--leadspace .course-hero__inner { position: relative; }

/* The full-width bottom accent replaces the small bar above the title. */
.course-hero--leadspace .course-hero__title::before { display: none; }

/* Roomier vertical rhythm between the banner's text elements. */
.course-hero--leadspace .course-hero__eyebrow { margin-bottom: 18px; }
.course-hero--leadspace .course-hero__title   { margin-bottom: 18px; line-height: 1.25; }
.course-hero--leadspace .course-hero__sub     { margin-bottom: 22px; line-height: 1.7; }

/* Stats strip */
.course-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--color-border);
  border-bottom: 1px solid var(--color-border);
}

.course-stat {
  background: var(--color-surface);
  padding: 18px 24px;
}

.course-stat__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.course-stat__value {
  font-size: 18px;
  font-weight: 600;
  color: var(--color-navy);
  font-family: var(--font-sans);
}

/* Body layout — 3 columns: TOC | content | sidebar */
.course-body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 40px var(--page-side) 100px;
  display: grid;
  grid-template-columns: 200px 1fr 260px;
  gap: 32px;
  align-items: start;
  background: var(--color-bg);
}

.course-main { display: flex; flex-direction: column; gap: 16px; min-width: 0; }

/* Table of contents */
.course-toc {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.course-toc__label {
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-family: var(--font-sans);
  padding: 0 0 12px 0;
  border-bottom: 2px solid var(--color-navy);
  margin-bottom: 6px;
}

.course-toc__link {
  display: block;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  font-family: var(--font-sans);
  text-decoration: none;
  padding: 9px 12px;
  border-left: 3px solid transparent;
  line-height: 1.4;
  transition: color 70ms ease, border-color 70ms ease, background 70ms ease;
}

.course-toc__link-text { pointer-events: none; }

.course-toc__link:hover {
  color: var(--color-navy);
  border-left-color: var(--color-navy);
  background: rgba(26, 39, 68, 0.04);
}

/* Cards */
.course-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
}

.course-card__head {
  padding: 14px 20px;
  border-bottom: 1px solid var(--color-border);
  background: #f8f9fa;
}

.course-card__title {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.course-card__body { padding: 20px; }

.course-card__text {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-family: var(--font-sans);
}

/* Careers */
.course-careers {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.course-career-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  color: var(--color-text-muted);
  padding: 8px 12px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

.course-career-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-navy);
  flex-shrink: 0;
}

/* Entry requirements */
.course-req-item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 14px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  line-height: 1.6;
}

.course-req-item:last-child { border-bottom: none; }

.course-req-num {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--color-navy);
  color: #fff;
  font-size: 12px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}

/* Units table */
.course-units-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--font-sans);
}

.course-units-table thead tr { background: var(--color-navy); }

.course-units-table th {
  padding: 10px 16px;
  font-size: 11px;
  font-weight: 700;
  color: #fff;
  text-align: left;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.course-units-table td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-muted);
  vertical-align: middle;
}

.course-units-table tbody tr:nth-child(even) td { background: #f8f9fa; }

.course-unit-code {
  font-family: monospace;
  font-size: 13px;
  color: var(--color-navy) !important;
  font-weight: 700;
  white-space: nowrap;
}

.course-unit-badge {
  font-size: 11px;
  font-weight: 700;
  padding: 2px 8px;
  white-space: nowrap;
}

.course-unit-badge--core {
  background: #e8f0fb;
  color: var(--color-navy);
  border: 1px solid #bfdbfe;
}

.course-unit-badge--elective {
  background: var(--color-bg);
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}

/* Fees table */
.course-fees-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  font-family: var(--font-sans);
}

.course-fees-table th {
  padding: 10px 16px;
  background: #f8f9fa;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text-muted);
  text-align: left;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
}

.course-fees-table td {
  padding: 11px 16px;
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text);
}

.course-fee-amount {
  font-weight: 700;
  color: var(--color-navy) !important;
  text-align: right;
}

.course-fees-note {
  font-size: 12px;
  color: var(--color-text-muted);
  padding: 12px 16px;
  line-height: 1.6;
  font-family: var(--font-sans);
}

/* Sidebar */
.course-sidebar {
  position: sticky;
  top: 104px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.course-side-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 3px solid var(--color-navy);
}

.course-side-card__head {
  padding: 12px 16px;
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  font-family: var(--font-sans);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-bottom: 1px solid var(--color-border);
  background: #f8f9fa;
}

.course-side-card__body { padding: 16px; }

.course-form-label {
  display: block;
  font-size: 11px;
  font-weight: 700;
  color: var(--color-text);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 4px;
  font-family: var(--font-sans);
}

.course-form-input {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  background: var(--color-bg);
  border: none;
  border-bottom: 2px solid var(--color-border);
  font-size: 14px;
  font-family: var(--font-sans);
  color: var(--color-text);
  outline: none;
  transition: border-color 70ms ease;
}

.course-form-input:focus { border-bottom-color: var(--color-blue); }

.course-btn-enquire {
  width: 100%;
  height: 44px;
  background: var(--color-navy);
  color: #fff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: background 70ms ease;
  margin-top: 4px;
}

.course-btn-enquire:hover { background: var(--color-navy-dark); }

.course-btn-apply {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 44px;
  background: var(--color-blue);
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background 70ms ease;
}

.course-btn-apply:hover { background: var(--color-blue-hover); }

/* Highlights at top of key details card */
.course-key-highlight {
  display: flex;
  align-items: flex-start;        /* top-align the icon with the label */
  gap: 12px;
  padding: 13px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

/* Icon: fixed 22px box, navy, top-aligned. The inner SVG is pinned to 20px so
   every Carbon glyph sits at the same optical size regardless of its viewBox. */
.course-key-highlight__icon {
  width: 22px;
  height: 22px;
  color: var(--color-navy);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}
.course-key-highlight__icon svg { width: 20px; height: 20px; display: block; }

.course-key-highlight__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  line-height: 1.3;
}

.course-key-highlight__value {
  font-size: 14px;
  color: var(--color-text);        /* readable dark, not muted grey */
  margin-top: 3px;
  line-height: 1.45;
}

.course-key-divider {
  height: 1px;
  background: var(--color-border);
  margin: 8px 0 4px;
}

.course-key-detail {
  display: flex;
  align-items: baseline;           /* line up label + value on their baseline */
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--color-border);
  font-family: var(--font-sans);
}

.course-key-detail:last-child { border-bottom: none; }

.course-key-detail__label {
  color: var(--color-text-muted);
  width: 78px;
  flex-shrink: 0;
}

.course-key-detail__value {
  color: var(--color-navy);        /* navy + bold for clear contrast */
  font-weight: 700;
}

.course-pathway-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
  font-size: 13px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  line-height: 1.5;
}

.course-pathway-item:last-child { border-bottom: none; }

.course-pathway-arrow {
  color: var(--color-blue);
  font-weight: 700;
  flex-shrink: 0;
}

/* Responsive */
@media (max-width: 1280px) {
  .course-body {
    grid-template-columns: 180px 1fr 240px;
    padding: 32px 32px 80px;
    gap: 24px;
  }
}

@media (max-width: 1024px) {
  /* Drop TOC, stack sidebar below content */
  .course-body {
    grid-template-columns: 1fr 240px;
    padding: 28px 24px 80px;
  }
  .course-toc { display: none; }
  .course-sidebar { position: static; }
  .course-hero__inner { padding: 0 24px; }
}

@media (max-width: 768px) {
  .course-hero__title { font-size: 26px; }
  .course-body {
    grid-template-columns: 1fr;
    padding: 20px 20px 80px;
  }
  .course-careers { grid-template-columns: 1fr; }
  .course-hero__inner { padding: 0 20px; }
}

@media (max-width: 480px) {
  .course-hero__inner { padding: 0 16px; }
  .course-body { padding: 16px 16px 80px; }
}

/* Highlight strip */
.course-highlights {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--color-border);
  border: 1px solid var(--color-border);
}

.course-highlight {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
  background: var(--color-surface);
}

.course-highlight__icon {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
}

.course-highlight__label {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-navy);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-sans);
}

.course-highlight__value {
  font-size: 13px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  margin-top: 2px;
}

/* Intro two-column */
.course-intro {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  align-items: stretch;
}

.course-intro__image { overflow: hidden; }
.course-intro__text { height: 100%; }

/* Collapse button */
.course-collapse-btn {
  width: 100%;
  padding: 12px 16px;
  background: #f8f9fa;
  border: none;
  border-top: 1px solid var(--color-border);
  font-size: 13px;
  font-weight: 700;
  color: var(--color-blue);
  cursor: pointer;
  font-family: var(--font-sans);
  text-align: center;
  transition: background 70ms ease;
}

.course-collapse-btn:hover { background: #f0f4ff; }

/* =============================================================================
   PROSPECTUS CARD — /courses page strip
   Wide card between the hero and the jump-nav. Not edge-to-edge — the
   .prosp-wrap container provides the same horizontal margins as .courses-body.
   ============================================================================= */

.prosp-wrap {
  background: var(--color-bg);
  padding: 28px var(--page-side) 0;
  max-width: var(--page-max);
  margin: 0 auto;
}

.prosp-card {
  display: flex;
  align-items: center;
  gap: 28px;
  background: var(--color-navy);
  padding: 26px 32px;
}

.prosp-card__icon {
  flex-shrink: 0;
  color: rgba(255, 255, 255, 0.45);
  display: flex;
}

.prosp-card__body {
  flex: 1;
  min-width: 0;
}

.prosp-card__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  padding: 2px 8px;
  margin-bottom: 10px;
  font-family: var(--font-sans);
}

.prosp-card__title {
  font-size: 19px;
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 5px;
  font-family: var(--font-sans);
  line-height: 1.25;
}

.prosp-card__desc {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.62);
  margin: 0;
  font-family: var(--font-sans);
  line-height: 1.5;
}

.prosp-card__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.prosp-card__btn-view {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.45);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background 70ms ease, border-color 70ms ease;
}
.prosp-card__btn-view:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.8);
}

.prosp-card__btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 40px;
  padding: 0 18px;
  background: #ffffff;
  border: 1px solid #ffffff;
  color: var(--color-navy);
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  white-space: nowrap;
  transition: background 70ms ease;
}
.prosp-card__btn-download:hover { background: #dce5f5; }

@media (max-width: 900px) {
  .prosp-wrap { padding: 20px 28px 0; }
  .prosp-card { gap: 20px; padding: 22px 24px; }
  .courses-jumpnav__inner { padding: var(--cds-spacing-04) 28px; }
}

@media (max-width: 640px) {
  .courses-hero__actions { width: 100%; flex-direction: column; }
  .prosp-card__btn-view,
  .prosp-card__btn-download { width: 100%; justify-content: center; }
  .courses-jumpnav__inner { padding: var(--cds-spacing-04) 20px; }
  .courses-body { padding: 20px 20px 60px; }
}

/* =============================================================================
   PROSPECTUS VIEWER — /prospectus page
   ============================================================================= */

.prosp-page { background: var(--color-bg); min-height: 100vh; }

/* Leadspace banner — matches the Resources pages (navy + grid overlay,
   full-width blue bottom accent, 80/64 spacing, shared banner typography). */
.prosp-page__hero {
  background: var(--color-navy);
  padding: var(--cds-spacing-11) 48px var(--cds-spacing-10);   /* 80px top, 64px bottom */
  position: relative;
  overflow: hidden;
}

.prosp-page__hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.03) 1px, transparent 1px);
  background-size: 64px 64px;
  pointer-events: none;
}

.prosp-page__hero::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: var(--color-blue);
}

.prosp-page__hero-inner {
  max-width: var(--page-max);
  margin: 0 auto;
  position: relative;
}

.prosp-page__eyebrow {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: #ecf0f6;
  margin: 0 0 18px;
  font-family: var(--font-sans);
}

.prosp-page__title {
  font-size: var(--fs-hero-title);
  font-weight: 700;
  color: #ffffff;
  margin: 0 0 18px;
  font-family: var(--font-sans);
  line-height: 1.25;
}

.prosp-page__meta {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.prosp-page__year-badge {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.28);
  color: #ffffff;
  padding: 3px 10px;
  font-family: var(--font-sans);
}

.prosp-page__meta-text {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.55);
  font-family: var(--font-sans);
}

.prosp-page__body {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 36px var(--page-side) 96px;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.prosp-page__actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}

.prosp-page__btn-download {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 22px;
  background: var(--color-navy);
  color: #ffffff;
  border: none;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  cursor: pointer;
  transition: background 70ms ease;
}
.prosp-page__btn-download:hover { background: var(--color-navy-dark); }

.prosp-page__btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-navy);
  border: 1px solid var(--color-border);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  cursor: pointer;
  transition: border-color 70ms ease;
}
.prosp-page__btn-print:hover { border-color: var(--color-navy); }

.prosp-page__viewer {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  overflow: hidden;
}

.prosp-page__viewer object,
.prosp-page__viewer iframe {
  display: block;
  width: 100%;
  height: 820px;
  border: none;
}

.prosp-page__fallback {
  padding: 80px 40px;
  text-align: center;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.prosp-page__fallback-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 8px;
  font-family: var(--font-sans);
}

.prosp-page__fallback-text {
  font-size: 14px;
  color: var(--color-text-muted);
  margin: 0 0 24px;
  font-family: var(--font-sans);
}

@media (max-width: 768px) {
  .prosp-page__hero { padding: 36px 20px 32px; }
  .prosp-page__body { padding: 24px 20px 60px; }
  .prosp-page__viewer object,
  .prosp-page__viewer iframe { height: 500px; }
}

/* Responsive updates */
@media (max-width: 768px) {
  .course-intro { grid-template-columns: 1fr; }
  .course-highlights { grid-template-columns: 1fr; }
}
/* =============================================================================
   BODY-PAGE TEMPLATE — the standard treatment for every course/resource page.
   Applies site-wide to all pages built on the course-* classes (course
   catalogue, course detail, How to Apply, Student Support).
   Larger type, more line spacing, near-white text on the navy hero, navy-filled
   section headers with a blue accent bar, and tall numerals for step lists.
   (Promoted from the /resources/how-to-apply prototype.)
============================================================================= */

/* Navy hero — near-white, like the footer */
.course-hero__eyebrow            { font-size: 12.5px; color: #ecf0f6; letter-spacing: 0.09em; }
.course-hero__sub                { font-size: var(--fs-hero-sub); color: #ecf0f6; line-height: 1.55; }
.course-hero__breadcrumb,
.course-hero__breadcrumb a,
.course-hero__breadcrumb span    { color: #ecf0f6; }

/* Light content — bigger + more spacing (text stays dark for contrast) */
.course-card__title              { font-size: 15.5px; }
.course-card__text               { font-size: 16.5px; line-height: 1.85; }
.course-req-item                 { font-size: 16px; padding: 16px 0; gap: 16px; line-height: 1.6; }
.course-pathway-item             { font-size: 15.5px; padding: 13px 0; gap: 14px; line-height: 1.6; }

/* Sidebar + TOC */
.course-toc__link                { font-size: 15px; padding: 11px 12px; line-height: 1.5; }
.course-side-card__head          { font-size: 13px; }
.course-key-detail__label        { font-size: 13px; }
.course-key-detail__value        { font-size: 15px; }

/* ── Card accent under the title + TOC affordances ── */

/* Section header: NAVY-filled bar (thicker + more spaced) with a white title and
   a BLUE accent bar under it (matching the Apply Now button). */
.course-card        { border-left: 1px solid var(--color-border); }
.course-card__head  {
  background: var(--color-navy);
  padding: 20px 24px;                       /* thicker + more spaced */
  border-bottom: 4px solid var(--color-blue);
}
.course-card__title {
  color: #ffffff;                           /* white on the navy fill */
  font-size: 16px;
  letter-spacing: 0.1em;                    /* a touch more spaced */
}

/* Sidebar cards: same navy-filled header + blue bar for consistency. */
.course-side-card        { border-top: 1px solid var(--color-border); }
.course-side-card__head  {
  color: #ffffff;
  background: var(--color-navy);
  padding: 16px 20px;
  border-bottom: 4px solid var(--color-blue);
}

/* Step numbers: tall, bold navy numerals down the left margin — no bubble. */
.course-req-item    { gap: 20px; }
.course-req-num {
  width: 44px;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--color-navy);
  font-size: 46px;
  font-weight: 800;
  line-height: 1;
  text-align: center;
  margin-top: -4px;                         /* optically align with the title */
}

/* TOC: larger "On this page" label (proportionate to the body) */
.course-toc         { gap: 6px; }
.course-toc__label  { font-size: 13px; padding-bottom: 14px; margin-bottom: 8px; }

/* TOC links: persistent subtle capsule shade (tappable) + blue outline on hover.
   Default transparent border keeps the size stable when it turns blue. */
.course-toc__link {
  background: #eef1f6;
  border: 1.5px solid transparent;
  border-radius: 8px;
}
.course-toc__link:hover {
  background: #e1e7f1;
  border-color: var(--color-navy);   /* navy, matching the Apply Now button */
  color: var(--color-navy);
}

/* Required-documents list items are real content, not helper text — give them
   the primary (darker) text colour so they don't recede like muted prose. */
.course-pathway-item { color: var(--color-text); }

/* =============================================================================
   HOW TO APPLY — Timeline
   Covers /resources/how-to-apply. Reuses .course-* layout classes above;
   these .hta-* classes are the page-specific step timeline / phase markers.
============================================================================= */

/* ── Overview editorial heading — matches agents/lln/course style ─────────── */

.hta-section-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-sans);
}

.hta-section-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
  display: inline-block;
  flex-shrink: 0;
}

.hta-section-title {
  font-size: 36px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 16px;
  font-family: var(--font-sans);
}

.hta-section-desc {
  font-size: 17px;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-family: var(--font-sans);
}

/* ── Animated step arrow ─────────────────────────────────────────────────── */

.hta-step-wrap { position: relative; }

.hta-step-arrow {
  position: absolute;
  left: -48px;
  top: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 2;
  pointer-events: none;
  height: 28px;
}

.hta-step-arrow__track {
  width: 4px;
  height: 22px;
  background: var(--color-border);
  overflow: hidden;
  position: relative;
}

.hta-step-arrow__fill {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: var(--color-navy);
  transition: height 500ms var(--cds-ease-standard, ease);
}

.hta-step-arrow__tip {
  font-size: 11px;
  color: var(--color-navy);
  line-height: 1;
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 250ms ease 450ms, transform 250ms ease 450ms;
}

.hta-step-arrow--visible .hta-step-arrow__fill  { height: 100%; }
.hta-step-arrow--visible .hta-step-arrow__tip   { opacity: 1; transform: translateY(0); }

.hta-step-arrow:not(.hta-step-arrow--visible) .hta-step-arrow__fill {
  height: 0%;
  transition: height 300ms ease;
}
.hta-step-arrow:not(.hta-step-arrow--visible) .hta-step-arrow__tip {
  opacity: 0;
  transform: translateY(-3px);
  transition: opacity 150ms ease, transform 150ms ease;
}

@media (prefers-reduced-motion: reduce) {
  .hta-step-arrow__fill, .hta-step-arrow__tip { transition: none; }
}

/* ── Phase header ─────────────────────────────────────────────────────────── */

.hta-phase-header {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 40px 0 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--color-navy);
}

.hta-phase-badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  background: var(--color-navy);
  padding: 5px 12px;
  flex-shrink: 0;
  font-family: var(--font-sans);
}

.hta-phase-title {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  font-family: var(--font-sans);
}

/* ── Timeline container ───────────────────────────────────────────────────── */

.hta-timeline {
  position: relative;
  padding-left: 56px;
  margin-bottom: 8px;
}

/* Grey track — full height */
.hta-timeline::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 20px;
  bottom: 20px;
  width: 4px;
  background: var(--color-border);
  border-radius: 2px;
  z-index: 0;
}

/* Remove ::after — we use a real div .hta-timeline__fill instead */
.hta-timeline::after { display: none; }

/* Real fill div — controlled by JS via --fill-pct */
.hta-timeline__fill {
  position: absolute;
  left: 19px;
  top: 20px;
  width: 4px;
  height: var(--fill-pct, 0%);
  background: var(--color-navy);
  border-radius: 2px;
  z-index: 0;
  transition: height 80ms linear;
  pointer-events: none;
}

/* ── Individual step ─────────────────────────────────────────────────────── */

.hta-step {
  position: relative;
  margin-bottom: 20px;
  opacity: 0;
  transform: translateX(-20px);
  transition:
    opacity 500ms var(--cds-ease-standard, ease),
    transform 500ms var(--cds-ease-standard, ease);
}

.hta-step--visible {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .hta-step { opacity: 1; transform: none; transition: none; }
}

/* Step number dot */
.hta-step__dot {
  position: absolute;
  left: -56px;
  top: 18px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 800;
  color: var(--color-navy);
  font-family: var(--font-sans);
  z-index: 2;
  transition:
    background var(--cds-duration-fast-01) var(--cds-ease-standard),
    color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.hta-step:hover .hta-step__dot {
  background: var(--color-navy);
  color: #ffffff;
}

/* Step card */
.hta-step__card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-border);
  padding: 20px 24px;
  transition:
    border-left-color var(--cds-duration-fast-01) var(--cds-ease-standard),
    transform var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.hta-step:hover .hta-step__card {
  border-left-color: var(--color-blue);
  transform: translateX(4px);
}

.hta-step__title {
  font-size: 17px;
  font-weight: 700;
  color: var(--color-navy);
  margin-bottom: 7px;
  font-family: var(--font-sans);
}

.hta-step__body {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.75;
  font-family: var(--font-sans);
}

/* ── Phase connector arrow ───────────────────────────────────────────────── */

.hta-connector {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 32px 0 8px;
  color: var(--color-blue);
}

.hta-connector__line {
  flex: 1;
  height: 1px;
  background: var(--color-blue);
  opacity: 0.3;
}

.hta-connector__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  font-family: var(--font-sans);
  white-space: nowrap;
}

.hta-connector__arrow { display: none; }

}

/* ============================================================
   course-detail.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* ============================================================================
   course-detail.css  →  Course detail template (app/courses/[category]/[course])
   ----------------------------------------------------------------------------
   Fully isolated under the `.cx` namespace so it can carry a bolder editorial
   type scale WITHOUT touching the shared `.course-*` classes (still used by the
   resources / agents / listing pages). Uses global design tokens; adds a warm
   cream accent locally (never yellow — see the no-yellow rule).
   ========================================================================== */

.cx {
  --cx-cream:      var(--color-cream);
  --cx-cream-line: var(--color-cream-line);
  --cx-max:        var(--page-max);   /* shared sitewide fluid container — see globals.css */
  --cx-side:       var(--page-side);
  --cx-ease:       cubic-bezier(0.2, 0, 0.38, 0.9);
  --cx-fast:       110ms;
  --cx-mod:        240ms;

  font-family: var(--font-sans);
  color: var(--color-text);
  background: var(--color-surface);
}

.cx-wrap {
  max-width: var(--cx-max);
  margin-inline: auto;
  padding-inline: var(--cx-side);
  width: 100%;
}

/* ── Shared editorial atoms ─────────────────────────────────────────────── */

.cx-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
}
.cx-eyebrow::before {
  content: "";
  width: 22px;
  height: 2px;
  background: var(--color-blue);
}
.cx-title {
  font-size: clamp(1.7rem, 3.2vw, 2.4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin: 12px 0 0;
  color: var(--color-navy);
}

.cx-lead {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text-muted);
  max-width: 68ch;
  margin-top: 16px;
}

/* ── Buttons ────────────────────────────────────────────────────────────── */

.cx-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 600;
  font-size: 1rem;
  padding: 13px 24px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: background var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease);
}
.cx-btn svg { transition: transform var(--cx-fast) var(--cx-ease); }
.cx-btn:hover svg { transform: translateX(4px); }
.cx-btn--block { width: 100%; justify-content: center; }
.cx-btn--primary { background: var(--color-blue); color: #fff; }
.cx-btn--primary:hover { background: var(--color-blue-hover); }
.cx-btn--ghost { background: transparent; color: var(--color-navy); border-color: var(--color-border); }
.cx-btn--ghost:hover { border-color: var(--color-navy); background: var(--color-bg); }
.cx-btn--dark { background: var(--color-navy); color: #fff; }
.cx-btn--dark:hover { background: var(--color-navy-dark); }

/* ── 1. Hero ────────────────────────────────────────────────────────────── */

.cx-hero {
  position: relative;
  color: #ffffff;
  overflow: hidden;
  background: var(--color-navy);
}

.cx-hero__inner {
  position: relative;
  padding-block: var(--cds-spacing-10) var(--cds-spacing-09);
}

.cx-hero__content { position: relative; z-index: 1; }
.cx-hero--with-media .cx-hero__content { max-width: 640px; }

/* Category photo — confined to the right ~44% of `.cx-hero__inner`, which is
   the SAME centred, capped `.cx-wrap` column the quick-facts bar and body
   content below use (not a raw viewport percentage) — so the photo's right
   edge, and the point where it fades into the navy, land at the same spot on
   every screen width/aspect ratio instead of bleeding to the literal browser
   edge on some screens and leaving a gap on others. */
.cx-hero__media {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  width: 44%;
  z-index: 0;
  pointer-events: none;
}
.cx-hero__media img {
  object-fit: cover;
  object-position: center;
  opacity: 0.65;
  /* Fades in from the left (clear of the text column) AND out again before
     its own right edge, so the photo dissolves into the surrounding navy on
     both sides instead of ending in a hard vertical line where the box
     boundary sits. */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 55%, black 62%, transparent 100%);
          mask-image: linear-gradient(to right, transparent 0%, black 55%, black 62%, transparent 100%);
}
.cx-hero__media::after {
  /* Navy tint so the photo reads as part of the hero, not a pasted-on image */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, rgba(26, 39, 68, 0.6) 0%, rgba(26, 39, 68, 0.2) 45%, transparent 75%);
}

.cx-crumb {
  font-size: 0.85rem;
  color: rgba(255, 255, 255, 0.65);
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.cx-crumb a:hover { color: #ffffff; text-decoration: underline; }
.cx-crumb span { opacity: 0.55; }
.cx-hero__title {
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.06;
  margin: 18px 0 0;
  max-width: 20ch;
  padding-left: 22px;
  position: relative;
  color: #ffffff;
}
.cx-hero__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 8px;
  bottom: 8px;
  width: 6px;
  background: var(--color-blue);
}
.cx-hero__sub {
  margin-top: 18px;
  font-size: 1.15rem;
  color: rgba(255, 255, 255, 0.78);
  max-width: 60ch;
  line-height: 1.6;
}
.cx-pills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.cx-pill {
  font-size: 0.82rem;
  font-weight: 600;
  padding: 7px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
}
.cx-hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 28px; }

/* Ghost button reads dark-on-light everywhere else on the page; on the navy
   hero it needs the inverse (scoped here, not touching `.cx-btn--ghost`
   elsewhere). */
.cx-hero .cx-btn--ghost {
  color: #ffffff;
  border-color: rgba(255, 255, 255, 0.5);
}
.cx-hero .cx-btn--ghost:hover {
  border-color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
}

@media (max-width: 960px) {
  .cx-hero__media { display: none; }
}

/* ── 2. Quick facts ─────────────────────────────────────────────────────── */

.cx-facts {
  background: var(--color-navy-dark);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}
.cx-facts__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  color: #fff;
}
.cx-fact { padding: 20px var(--cds-spacing-05); border-left: 1px solid rgba(255, 255, 255, 0.1); }
.cx-fact:first-child { border-left: 0; padding-left: 0; }
.cx-fact__k {
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8fa0c4;
  font-weight: 700;
}
.cx-fact__v { font-size: 1.1rem; font-weight: 700; margin-top: 6px; }

/* ── 3. Three-column region ─────────────────────────────────────────────── */

.cx-shell {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr) 280px;
  gap: 32px;
  padding-block: var(--cds-spacing-10);
}
.cx-main { min-width: 0; display: flex; flex-direction: column; gap: var(--cds-spacing-10); }
.cx-section { scroll-margin-top: 96px; }

/* Left TOC */
.cx-toc {
  position: sticky;
  top: 96px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.cx-toc__label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-light);
  padding: 0 12px 12px;
  margin-bottom: 6px;
  border-bottom: 1px solid var(--color-border);
}
.cx-toc__link {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-text-muted);
  padding: 10px 12px;
  border-left: 2px solid transparent;
  transition: color var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease),
    background var(--cx-fast) var(--cx-ease);
}
.cx-toc__link:hover { color: var(--color-text); background: var(--color-bg); }
.cx-toc__link.is-active {
  color: var(--color-navy);
  border-left-color: var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 8%, transparent);
}

/* ── 4. Overview + what you'll learn ────────────────────────────────────── */

.cx-learn {
  margin-top: var(--cds-spacing-07);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-top: 4px solid var(--color-blue);
  padding: var(--cds-spacing-07);
}
.cx-learn h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: 16px; color: var(--color-navy); }
.cx-learn ul { list-style: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px 24px; }
.cx-learn li { display: flex; gap: 12px; font-size: 0.98rem; line-height: 1.5; }
.cx-learn li svg { flex: none; margin-top: 2px; color: var(--color-blue); }

/* ── 5. Units accordion ─────────────────────────────────────────────────── */

.cx-units { display: grid; gap: 14px; margin-top: var(--cds-spacing-07); }
.cx-acc { border: 1px solid var(--color-border); background: var(--color-surface); }
.cx-acc__head {
  width: 100%;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px var(--cds-spacing-06);
  cursor: pointer;
  background: none;
  border: 0;
  font: inherit;
  color: inherit;
}
.cx-acc__head:hover { background: var(--color-bg); }
.cx-acc__tag {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 5px 10px;
  color: #fff;
  background: var(--color-navy);
}
.cx-acc__tag--elective { background: var(--color-blue); }
.cx-acc__title { font-weight: 700; font-size: 1.1rem; flex: 1; }
.cx-acc__count { font-size: 0.9rem; color: var(--color-text-muted); }
.cx-acc__chev { color: var(--color-text-muted); transition: transform var(--cx-mod) var(--cx-ease); }
.cx-acc.is-open .cx-acc__chev { transform: rotate(180deg); }
.cx-acc__body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--cx-mod) var(--cx-ease); }
.cx-acc.is-open .cx-acc__body { grid-template-rows: 1fr; }
.cx-acc__inner { overflow: hidden; }
.cx-acc__list { list-style: none; padding: 0 var(--cds-spacing-06) 8px; }
.cx-unit { display: flex; gap: 16px; padding: 14px 0; border-top: 1px solid var(--color-border); }
.cx-unit__code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue);
  min-width: 120px;
}
.cx-unit__name { font-size: 0.98rem; }

/* ── 6. Fees ────────────────────────────────────────────────────────────── */

.cx-fees { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: var(--cds-spacing-07); }
.cx-fee { background: var(--color-surface); border: 1px solid var(--color-border); padding: var(--cds-spacing-07); position: relative; }
.cx-fee--featured { border-color: var(--color-blue); box-shadow: 0 0 0 1px var(--color-blue); }
.cx-fee__tag {
  position: absolute;
  top: -1px;
  right: -1px;
  background: var(--color-blue);
  color: #fff;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 12px;
}
.cx-fee__k { font-size: 0.92rem; font-weight: 700; color: var(--color-text-muted); }
.cx-fee__price { font-size: 2.2rem; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 2px; color: var(--color-navy); }
.cx-fee__price small { font-size: 0.9rem; font-weight: 600; color: var(--color-text-muted); }
.cx-fee__note { font-size: 0.9rem; color: var(--color-text-muted); }
.cx-fee__plan { font-size: 0.85rem; font-weight: 600; color: var(--color-blue); margin-bottom: 6px; }
.cx-fee ul { list-style: none; margin-top: 16px; display: grid; gap: 10px; }
.cx-fee li { display: flex; gap: 10px; font-size: 0.92rem; align-items: flex-start; }
.cx-fee li svg { flex: none; color: var(--color-blue); margin-top: 2px; }
.cx-fee__rows li { justify-content: space-between; }
.cx-fee__rows b { color: var(--color-navy); font-weight: 700; }

.cx-callout {
  margin-top: 22px;
  background: var(--cx-cream);
  border: 1px solid var(--cx-cream-line);
  border-left: 4px solid var(--color-blue);
  padding: 18px var(--cds-spacing-06);
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.cx-callout svg { flex: none; color: var(--color-blue); margin-top: 2px; }
.cx-callout b { font-weight: 700; display: block; }
.cx-callout span { display: block; color: var(--color-text-muted); margin-top: 4px; font-size: 0.95rem; }

/* ── Upcoming intakes ──────────────────────────────────────────── */
.cx-intakes { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }

.cx-intake {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
}

.cx-intake__date { display: flex; align-items: center; gap: 12px; }
.cx-intake__date svg { color: var(--color-blue); flex: none; }
.cx-intake__label { font-weight: 700; color: var(--color-navy); }
.cx-intake__sub { font-size: 0.88rem; color: var(--color-text-muted); margin-top: 2px; }
.cx-intake__apply { flex: none; }

.cx-intake__waitlist-trigger { flex: none; }

.cx-intake__waitlist-form {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.cx-intake__waitlist-form input {
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--color-border);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: 0.88rem;
  min-width: 160px;
}

.cx-intake__waitlist-form input:focus { outline: 2px solid var(--color-blue); outline-offset: -2px; }

.cx-intake__waitlist-actions { display: flex; gap: 8px; }

.cx-intake__waitlist-error {
  flex-basis: 100%;
  font-size: 0.85rem;
  color: #da1e28;
  margin: 0;
}

.cx-intake__waitlist-done {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--color-navy);
}

.cx-intake__waitlist-done svg { color: #198038; flex: none; }

/* ── 7. Entry requirements ──────────────────────────────────────────────── */

.cx-reqs { list-style: none; display: grid; gap: 14px; margin-top: var(--cds-spacing-06); }
.cx-reqs--wide { max-width: 72ch; }
.cx-reqs li { display: flex; gap: 14px; align-items: flex-start; }
.cx-reqs__num {
  flex: none;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--color-navy);
  color: #fff;
  font-weight: 700;
  font-size: 0.85rem;
}
.cx-reqs li span:last-child { line-height: 1.5; }

/* ── 8. Pathways ────────────────────────────────────────────────────────── */

.cx-pathway { display: flex; align-items: stretch; gap: 14px; flex-wrap: wrap; margin-top: var(--cds-spacing-07); }
.cx-path-step { display: flex; align-items: center; gap: 14px; }
.cx-path-node { background: var(--color-surface); border: 1px solid var(--color-border); padding: 16px 20px; min-width: 200px; display: flex; flex-direction: column; justify-content: center; }
.cx-path-node small { display: block; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-text-muted); font-weight: 700; }
.cx-path-node b { font-size: 1rem; margin-top: 4px; }
.cx-path-node--now { border-color: var(--color-navy); background: var(--color-navy); color: #fff; }
.cx-path-node--now small { color: #9db4ff; }
.cx-path-arrow { color: var(--color-blue); flex: none; }

/* ── 9. Right rail: Enquire + Apply ─────────────────────────────────────── */

.cx-rail { position: sticky; top: 96px; align-self: start; display: flex; flex-direction: column; gap: 16px; }

.cx-apply { border: 1px solid var(--color-border); background: var(--color-surface); border-top: 4px solid var(--color-blue); }
.cx-apply--enquire { border-top-color: var(--color-navy); }
.cx-apply__head { padding: 16px var(--cds-spacing-06) 0; font-weight: 700; font-size: 1.05rem; color: var(--color-navy); }
.cx-apply__body { padding: 14px var(--cds-spacing-06) var(--cds-spacing-06); }
.cx-apply__note { font-size: 0.85rem; color: var(--color-text-muted); margin-top: 10px; line-height: 1.5; }

/* ── Your journey — vertical timeline (middle column, light theme) ──────── */

.cx-jrny { list-style: none; display: grid; margin-top: var(--cds-spacing-07); }
.cx-jrny__step { position: relative; padding: 0 0 22px 32px; }
.cx-jrny__step::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 6px;
  bottom: 0;
  width: 2px;
  background: var(--color-border);
}
.cx-jrny__step:last-child { padding-bottom: 0; }
.cx-jrny__step:last-child::before { display: none; }
.cx-jrny__dot {
  position: absolute;
  left: 0;
  top: 3px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  z-index: 1;
}
.cx-jrny__n { font-size: 0.7rem; font-weight: 700; letter-spacing: 0.1em; color: var(--color-text-light); }
.cx-jrny__t { font-size: 1.05rem; font-weight: 700; color: var(--color-navy); margin-top: 2px; }
.cx-jrny__d { font-size: 0.92rem; color: var(--color-text-muted); margin-top: 3px; line-height: 1.5; max-width: 62ch; }
.cx-jrny__badge {
  display: inline-block;
  margin-top: 8px;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--color-blue) 30%, transparent);
  padding: 3px 9px;
}

/* ── 10. Careers + related (in-column sections) ─────────────────────────── */

.cx-careers { display: grid; grid-template-columns: repeat(auto-fill, minmax(165px, 1fr)); gap: 14px; margin-top: var(--cds-spacing-07); }
.cx-role {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: var(--cds-spacing-06);
  transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-fast) var(--cx-ease), border-color var(--cx-fast) var(--cx-ease);
}
.cx-role:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(26, 39, 68, 0.4); border-color: #c9d3e6; }
.cx-role__icon { width: 44px; height: 44px; display: grid; place-items: center; background: var(--color-navy); color: #fff; margin-bottom: 14px; }
.cx-role h3 { font-size: 1.05rem; font-weight: 700; }

.cx-related { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: var(--cds-spacing-07); }
.cx-rcard {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  display: flex;
  flex-direction: column;
  transition: transform var(--cx-fast) var(--cx-ease), box-shadow var(--cx-fast) var(--cx-ease);
}
.cx-rcard:hover { transform: translateY(-4px); box-shadow: 0 14px 30px -18px rgba(26, 39, 68, 0.4); }
.cx-rcard__top { background: var(--color-navy); color: #fff; padding: var(--cds-spacing-06); border-bottom: 4px solid var(--color-blue); }
.cx-rcard__code { font-family: var(--font-mono, ui-monospace, Menlo, monospace); font-size: 0.8rem; color: #9db4ff; font-weight: 600; }
.cx-rcard__top h3 { font-size: 1.05rem; font-weight: 700; margin-top: 6px; }
.cx-rcard__body { padding: var(--cds-spacing-06); display: flex; flex-direction: column; flex: 1; }
.cx-rcard__body p { font-size: 0.92rem; color: var(--color-text-muted); }
.cx-rcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: auto; padding-top: 16px; font-weight: 600; color: var(--color-blue); }
.cx-rcard:hover .cx-rcard__link svg { transform: translateX(4px); }
.cx-rcard__link svg { transition: transform var(--cx-fast) var(--cx-ease); }

/* ── FAQ (own section — full-width band, not part of the 3-column shell) ── */

.cx-faq { background: var(--color-surface); padding-block: var(--cds-spacing-11); }

.cx-faq__inner { max-width: 860px; }

.cx-faq__header { text-align: center; margin-bottom: var(--cds-spacing-08); }
.cx-faq__header .cx-eyebrow { justify-content: center; }
.cx-faq__header .cx-title { margin-inline: auto; }
.cx-faq__header .cx-lead { margin-inline: auto; }

.cx-faq__list { border-top: 1px solid var(--color-border); }

.cx-faq__item { border-bottom: 1px solid var(--color-border); }

.cx-faq__question {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--cds-spacing-06);
  padding: var(--cds-spacing-06) 0;
  list-style: none;
  cursor: pointer;
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--color-navy);
  transition: color var(--cx-fast) var(--cx-ease);
  user-select: none;
}
.cx-faq__question::-webkit-details-marker { display: none; }
.cx-faq__question::marker { display: none; }

details[open] > .cx-faq__question { color: var(--color-blue); }

.cx-faq__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-text-muted);
  transition: transform var(--cx-mod) var(--cx-ease);
}
details[open] > .cx-faq__question .cx-faq__icon { transform: rotate(45deg); color: var(--color-blue); }

.cx-faq__answer {
  padding: 0 var(--cds-spacing-08) var(--cds-spacing-07) 0;
  font-size: 0.95rem;
  color: var(--color-text-muted);
  line-height: 1.75;
  max-width: 68ch;
}

/* ── Full-width final CTA band ──────────────────────────────────────────── */

.cx-band { padding-block: var(--cds-spacing-11); }

.cx-cta { text-align: center; }
.cx-cta .cx-eyebrow { justify-content: center; }
.cx-cta .cx-title { margin-inline: auto; }
.cx-cta .cx-lead { margin-inline: auto; }
.cx-cta .cx-hero__cta { justify-content: center; margin-top: 28px; }

/* ── Responsive ─────────────────────────────────────────────────────────── */

@media (max-width: 1080px) {
  .cx-shell { grid-template-columns: minmax(0, 1fr) 280px; }
  .cx-toc { display: none; }
}
@media (max-width: 860px) {
  .cx-shell { grid-template-columns: 1fr; gap: var(--cds-spacing-08); }
  .cx-rail { position: static; }
  .cx-facts__grid { grid-template-columns: repeat(2, 1fr); }
  .cx-fact { border-left: 1px solid rgba(255, 255, 255, 0.1); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-left: var(--cds-spacing-05); }
  .cx-fact:first-child { padding-left: var(--cds-spacing-05); }
  .cx-fact:nth-child(1), .cx-fact:nth-child(2) { border-top: 0; }
  .cx-fact:nth-child(odd) { border-left: 0; }
  .cx-learn ul { grid-template-columns: 1fr; }
  .cx-fees, .cx-careers, .cx-related { grid-template-columns: 1fr; }
  .cx-faq__answer { padding-right: var(--cds-spacing-06); }
}
@media (max-width: 520px) {
  .cx-facts__grid { grid-template-columns: 1fr; }
  .cx-fact { border-left: 0 !important; }
  .cx-fact:first-child { border-top: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .cx-btn svg, .cx-acc__chev, .cx-role, .cx-rcard, .cx-rcard__link svg { transition: none; }
}

/* =============================================================================
   COURSE DETAIL — PHOTO ADDITIONS
   Two new sections added to the course detail page layout.
   All existing .cx-* classes are unchanged — these are additive only.

   1. .cx-learn-split  — "What you'll learn" checklist + course photo side by side
   2. .cx-gallery      — "Training in action" 4-photo horizontal strip
============================================================================= */


/* ── 1. Learn split panel ───────────────────────────────────────────────────
   Sits between the overview text and the existing learn-points grid.
   Two columns: checklist left, photo right.
   Collapses to single column below 860px (matches existing .cx-shell breakpoint).
──────────────────────────────────────────────────────────────────────────── */

.cx-learn-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 28px;
  align-items: start;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  padding: 28px;
  margin: 28px 0 0;
}

/* Label above the checklist — matches existing .cx-eyebrow pattern */
.cx-learn-split__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  font-family: var(--font-sans);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-learn-split__label::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* Checklist — unstyled list, each row is icon + text */
.cx-learn-split__checks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.cx-learn-split__check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

/* Blue circle check icon */
.cx-learn-split__check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E6F1FB;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
  color: var(--color-blue);
}

.cx-learn-split__check-text {
  font-size: 14px;
  color: var(--color-text);
  line-height: 1.55;
  font-family: var(--font-sans);
}

/* Right column: photo — uses position relative + fill Image */
.cx-learn-split__photo {
  position: relative;
  height: 280px;
  overflow: hidden;
}

/* Mobile: stack to single column */
@media (max-width: 860px) {
  .cx-learn-split {
    grid-template-columns: 1fr;
    padding: 20px;
    gap: 20px;
  }
  .cx-learn-split__photo {
    height: 220px;
  }
}


/* ── 2. Gallery strip ───────────────────────────────────────────────────────
   Sits between entry requirements and units accordion.
   Full-width band — 4 photos in a grid with caption overlays.
   No border or card wrapper — sits as a clean break between sections.
──────────────────────────────────────────────────────────────────────────── */

.cx-gallery {
  margin: 0 0 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

/* Eyebrow label — matches existing section eyebrow pattern */
.cx-gallery__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  font-family: var(--font-sans);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-gallery__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* 4-column photo grid */
.cx-gallery__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

/* Each photo card */
.cx-gallery__item {
  border-radius: 0;
  overflow: hidden;
}

/* Relative wrapper for next/image fill + caption overlay */
.cx-gallery__img-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
}

/* Subtle scale on hover — gives the grid life */
.cx-gallery__img-wrap img {
  transition: transform 0.3s ease;
}
.cx-gallery__item:hover .cx-gallery__img-wrap img {
  transform: scale(1.04);
}

/* Caption overlay — dark gradient at bottom, white text */
.cx-gallery__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10, 18, 40, 0.80));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  padding: 24px 10px 8px;
  pointer-events: none;
}

/* Mobile: 2 columns */
@media (max-width: 860px) {
  .cx-gallery__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cx-gallery__img-wrap {
    height: 140px;
  }
}

/* Very small screens: 1 column */
@media (max-width: 480px) {
  .cx-gallery__grid {
    grid-template-columns: 1fr;
  }
}


/* ── 3. Auto-scrolling carousel (replaces static gallery grid) ───────────────
   Sits between units accordion and "Your journey" section.
   Photos scroll right-to-left continuously. Pauses on hover.
──────────────────────────────────────────────────────────────────────────── */

.cx-carousel {
  margin: 0 0 48px;
  padding-top: 40px;
  border-top: 1px solid var(--color-border);
}

.cx-carousel__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-blue);
  font-family: var(--font-sans);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.cx-carousel__eyebrow::before {
  content: '';
  display: block;
  width: 24px;
  height: 2px;
  background: var(--color-blue);
  flex-shrink: 0;
}

/* Clips the track so photos outside the viewport are hidden */
.cx-carousel__mask {
  overflow: hidden;
  width: 100%;
}

/* The scrolling track — contains doubled photos for seamless loop */
.cx-carousel__track {
  display: flex;
  gap: 12px;
  width: max-content;
  animation: cx-scroll linear infinite;
}

/* Pause on hover so users can look at a photo */
.cx-carousel__mask:hover .cx-carousel__track {
  animation-play-state: paused;
}

/* Keyframe: moves left by exactly half the track width (the original set) */
@keyframes cx-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* Respect reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  .cx-carousel__track {
    animation: none;
  }
  .cx-carousel__mask {
    overflow-x: auto;
  }
}

/* Each photo card */
.cx-carousel__item {
  flex-shrink: 0;
  width: 320px;
}

.cx-carousel__img-wrap {
  position: relative;
  height: 240px;
  overflow: hidden;
  border-radius: 0;
}

/* Subtle scale on hover */
.cx-carousel__img-wrap img {
  transition: transform 0.3s ease;
}
.cx-carousel__item:hover .cx-carousel__img-wrap img {
  transform: scale(1.04);
}

/* Caption overlay */
.cx-carousel__caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(transparent, rgba(10, 18, 40, 0.80));
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.04em;
  padding: 24px 12px 10px;
  pointer-events: none;
}

@media (max-width: 860px) {
  .cx-carousel__item {
    width: 260px;
  }
  .cx-carousel__img-wrap {
    height: 200px;
  }
}
}

/* ============================================================
   course-compare.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* app/styles/course-compare.css
 * ─────────────────────────────────────────────────────────────────────────
 * Course comparison tool: the CompareCheckbox toggle (course cards + course
 * detail hero), the floating CompareTray, and the /courses/compare page.
 * Namespaced .cmp-* (matches the file's own feature, not shared with .cx-*).
 * ───────────────────────────────────────────────────────────────────────── */

/* ── Compare toggle button ─────────────────────────────────────────────── */
.cmp-check {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 32px;
  padding: 0 12px;
  font-size: 12px;
  font-weight: 600;
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color var(--cds-duration-fast-01) var(--cds-ease-standard),
    color var(--cds-duration-fast-01) var(--cds-ease-standard);
}

.cmp-check:hover:not(:disabled) { border-color: var(--color-navy); color: var(--color-navy); }

.cmp-check--active {
  border-color: var(--color-blue);
  color: var(--color-blue);
  background: color-mix(in srgb, var(--color-blue) 8%, transparent);
}

.cmp-check:disabled { opacity: 0.5; cursor: not-allowed; }

.cx-hero__compare { align-self: center; }

/* ── Floating comparison tray ──────────────────────────────────────────── */
/* Carbon Teal 70 / 80 — https://carbondesignsystem.com/guidelines/color/tags */
.cmp-tray {
  --cmp-teal-70: #005d5d;
  --cmp-teal-80: #004144;

  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  background: var(--cmp-teal-70);
  border-top: 1px solid var(--cmp-teal-80);
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.15);
}

.cmp-tray__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 20px var(--cds-spacing-09);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.cmp-tray__items { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }

.cmp-tray__chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 10px 0 16px;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  background: var(--cmp-teal-80);
}

.cmp-tray__chip button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.7);
  background: transparent;
  border: none;
  cursor: pointer;
}

.cmp-tray__chip button:hover { color: #fff; }

.cmp-tray__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 48px;
  padding: 0 26px;
  font-size: 15px;
  font-weight: 700;
  color: var(--cmp-teal-70);
  background: #fff;
  flex-shrink: 0;
}

.cmp-tray__cta:hover { background: var(--color-bg); }

/* ── /courses/compare page ─────────────────────────────────────────────── */
.cmp-hero {
  background: var(--color-navy);
  color: #fff;
  padding: var(--cds-spacing-11) var(--cds-spacing-09) var(--cds-spacing-09);
}

.cmp-hero__inner { max-width: 900px; margin: 0 auto; }
.cmp-hero__eyebrow { font-size: 0.85rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-blue); }
.cmp-hero__title { font-size: 2.4rem; font-weight: 800; margin: 8px 0 12px; }
.cmp-hero__sub { color: rgba(255, 255, 255, 0.75); max-width: 640px; }

.cmp-body {
  max-width: 1280px;
  margin: 0 auto;
  padding: var(--cds-spacing-09);
  padding-bottom: 96px; /* clears the fixed tray if it's still visible */
}

.cmp-empty {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: var(--cds-spacing-10) 0;
}

.cmp-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); }

.cmp-table { width: 100%; border-collapse: collapse; min-width: 640px; }

.cmp-table th, .cmp-table td {
  padding: var(--cds-spacing-05) var(--cds-spacing-06);
  border-bottom: 1px solid var(--color-border);
  vertical-align: top;
  text-align: left;
}

.cmp-table thead th { background: var(--color-bg); vertical-align: top; }

.cmp-table__rowhead {
  width: 200px;
  font-weight: 700;
  color: var(--color-navy);
  background: var(--color-bg);
  white-space: nowrap;
}

.cmp-table__col { min-width: 220px; }

.cmp-table__col-head { display: flex; flex-direction: column; gap: 4px; }
.cmp-table__code { font-size: 0.8rem; font-weight: 700; color: var(--color-blue); }
.cmp-table__title { font-size: 1.05rem; margin: 0; color: var(--color-navy); }

.cmp-table__actions { display: flex; align-items: center; gap: 12px; margin-top: 6px; }
.cmp-table__view { font-size: 0.82rem; font-weight: 600; color: var(--color-blue); }
.cmp-table__remove {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.82rem;
  color: var(--color-text-muted);
}
.cmp-table__remove:hover { color: #da1e28; }

.cmp-table__list { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 0.88rem; }

.cmp-add { margin-top: var(--cds-spacing-09); }
.cmp-add__title { font-size: 1.15rem; margin-bottom: 12px; color: var(--color-navy); }
.cmp-add__categories { display: flex; flex-direction: column; gap: 1px; border: 1px solid var(--color-border); }

.cmp-add__cat { background: var(--color-surface); }
.cmp-add__cat + .cmp-add__cat { border-top: 1px solid var(--color-border); }

.cmp-add__cat summary {
  cursor: pointer;
  padding: 14px 16px;
  font-weight: 700;
  color: var(--color-navy);
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
}
.cmp-add__cat summary::-webkit-details-marker { display: none; }

.cmp-add__count { font-size: 0.8rem; font-weight: 500; color: var(--color-text-muted); }

.cmp-add__links {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 4px;
  padding: 0 16px 16px;
}

.cmp-add__link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 10px;
  font-size: 0.85rem;
  color: var(--color-text);
  border: 1px solid var(--color-border);
}
.cmp-add__link:hover { border-color: var(--color-blue); color: var(--color-blue); }
.cmp-add__link svg { flex: none; color: var(--color-blue); }

@media (max-width: 640px) {
  .cmp-hero__title { font-size: 1.8rem; }
  .cmp-tray__inner { padding: 12px var(--cds-spacing-05); }
}

}

/* ============================================================
   course-finder.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* app/styles/course-finder.css
   ────────────────────────────────────────────────────────────────────────────
   "Find your course" tree (components/ui/CourseFinder.tsx) — sits below the
   category card grid on /courses. Category colours come from the same
   --cat-accent custom property set by the `courses-section--*` classes in
   course.css (applied directly as classNames in the component), so this
   section can never fall out of sync with the card grid above it.
   ──────────────────────────────────────────────────────────────────────────── */

.cf {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 0 var(--page-side) 96px;
}

.cf__intro { max-width: 640px; margin: 0 0 32px; }

.cf-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-blue);
  margin: 0 0 10px;
  font-family: var(--font-sans);
}

.cf-title {
  font-size: clamp(1.5625rem, 1.43rem + 0.57vw, 2.125rem);
  font-weight: 800;
  color: var(--color-navy);
  letter-spacing: -0.01em;
  line-height: 1.15;
  margin: 0 0 12px;
  font-family: var(--font-sans);
}

.cf-sub {
  font-size: 1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
  margin: 0;
  font-family: var(--font-sans);
}

.cf-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Question panel ── */
.cf-panel {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 26px;
  position: sticky;
  top: 104px; /* clears the sticky header (88px) + a little breathing room */
}

.cf-step { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; }
.cf-step:not(:first-child) { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border); }

.cf-step__num {
  width: 24px;
  height: 24px;
  border-radius: var(--radius-full);
  background: var(--color-navy);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  font-family: var(--font-sans);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cf-step__num--done { background: var(--color-blue); }

.cf-step__title { font-size: 16px; font-weight: 700; color: var(--color-navy); font-family: var(--font-sans); }

.cf-opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.cf-opt {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 84px;
  text-align: left;
  padding: 14px 40px 14px 14px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    background var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cf-opt:hover { border-color: var(--cat-accent, var(--color-blue)); }
.cf-opt--active {
  background: color-mix(in srgb, var(--cat-accent, var(--color-blue)) 10%, white);
  border-color: var(--cat-accent, var(--color-blue));
}

.cf-opt__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-text);
}
.cf-opt--active .cf-opt__text { color: var(--cat-accent, var(--color-blue)); }

.cf-opt__count { font-weight: 500; color: var(--color-text-light); font-size: 12.5px; }

.cf-opt__arrow {
  position: absolute;
  right: 12px;
  bottom: 12px;
  color: var(--cat-accent, var(--color-blue));
  transition: transform var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cf-opt:hover .cf-opt__arrow,
.cf-opt--active .cf-opt__arrow { transform: scale(1.25); }

.cf-placeholder {
  font-size: 14.5px;
  color: var(--color-text-light);
  font-style: italic;
  font-family: var(--font-sans);
  margin: 0;
}

.cf-course-list { display: flex; flex-direction: column; gap: 8px; }

.cf-course-opt {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  width: 100%;
  padding: 12px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  background: var(--color-bg);
  cursor: pointer;
  font-family: var(--font-sans);
  transition: border-color var(--cds-duration-fast-02) var(--cds-ease-standard),
    background var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cf-course-opt:hover { border-color: var(--cat-accent, var(--color-blue)); }
.cf-course-opt--active {
  background: color-mix(in srgb, var(--cat-accent, var(--color-blue)) 8%, white);
  border-color: var(--cat-accent, var(--color-blue));
}

.cf-course-opt__level {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--cat-accent, var(--color-blue));
}
.cf-course-opt__name { font-size: 15px; font-weight: 700; color: var(--color-navy); line-height: 1.3; }

.cf-result { margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--color-border); }

.cf-result__label {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-text-light);
  margin: 0 0 10px;
  font-family: var(--font-sans);
}

.cf-result__card {
  border: 1px solid var(--cat-accent, var(--color-blue));
  border-left-width: 3px;
  border-radius: var(--radius-sm);
  padding: 16px;
  background: color-mix(in srgb, var(--cat-accent, var(--color-blue)) 6%, white);
}

.cf-result__code {
  font-size: 12.5px;
  font-weight: 700;
  color: var(--cat-accent, var(--color-blue));
  letter-spacing: 0.04em;
  font-family: var(--font-sans);
}

.cf-result__name {
  font-size: 18px;
  font-weight: 800;
  color: var(--color-navy);
  margin: 4px 0 12px;
  line-height: 1.3;
  font-family: var(--font-sans);
}

.cf-result__cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 14.5px;
  font-weight: 700;
  color: #fff;
  background: var(--color-navy);
  padding: 10px 16px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: gap var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cf-result__cta:hover { gap: 10px; }

.cf-result__reset {
  display: block;
  margin-top: 14px;
  font-size: 13.5px;
  color: var(--color-text-light);
  background: none;
  border: none;
  font-family: var(--font-sans);
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
}

/* ── Tree canvas ── */
.cf-tree-wrap {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-sm);
  padding: 16px;
  overflow-x: auto;
}

.cf-tree { display: block; }

.cf-root circle { fill: var(--color-navy); }
.cf-root text { fill: #fff; font-size: 15px; font-weight: 700; font-family: var(--font-sans); }

.cf-branch {
  fill: none;
  stroke: #d7dbe4;
  stroke-width: 2.5;
  stroke-linecap: round;
  transition: stroke var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    stroke-width var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-branch--lit { stroke: var(--cat-accent); stroke-width: 4; }

.cf-twig {
  fill: none;
  stroke: var(--color-border);
  stroke-width: 2;
  stroke-linecap: round;
  transition: stroke var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    stroke-width var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    opacity var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-twig--lit { stroke: var(--cat-accent); stroke-width: 3; }
.cf-twig--dim { opacity: 0.35; }

.cf-cat-node { cursor: pointer; }
.cf-cat-node circle {
  fill: #fff;
  stroke: #cbd2e0;
  stroke-width: 2.5;
  transition: stroke var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    fill var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-cat-node--lit circle { stroke: var(--cat-accent); fill: color-mix(in srgb, var(--cat-accent) 14%, white); }

.cf-cat-node__label {
  font-size: 17px;
  font-weight: 700;
  fill: var(--color-text-muted);
  font-family: var(--font-sans);
  transition: fill var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-cat-node--lit .cf-cat-node__label { fill: var(--cat-accent); }

.cf-cat-node__count { font-size: 13px; fill: var(--color-text-light); font-family: var(--font-sans); }

.cf-leaf { cursor: pointer; }
.cf-leaf circle {
  fill: #fff;
  stroke: var(--color-border);
  stroke-width: 2;
  transition: stroke var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    fill var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-leaf text {
  font-size: 14.5px;
  fill: var(--color-text-light);
  font-weight: 500;
  font-family: var(--font-sans);
  transition: fill var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard),
    font-weight var(--cds-duration-fast-03, 200ms) var(--cds-ease-standard);
}
.cf-leaf--dim { opacity: 0.35; }
.cf-leaf--active circle { stroke: var(--cat-accent); fill: var(--cat-accent); }
.cf-leaf--active text { fill: var(--color-navy); font-weight: 700; }
.cf-leaf--selected circle { stroke: var(--cat-accent); stroke-width: 3; fill: var(--cat-accent); }
.cf-leaf--selected text { fill: var(--color-navy); font-weight: 700; }

.cf-pulse {
  fill: none;
  stroke: var(--cat-accent);
  stroke-width: 2.5;
  animation: cf-pulse-ring 1.8s ease-out infinite;
}

@keyframes cf-pulse-ring {
  0% { r: 9; stroke-opacity: 0.6; }
  100% { r: 22; stroke-opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
  .cf-pulse { animation: none; }
}

@media (max-width: 860px) {
  .cf-grid { grid-template-columns: 1fr; }
  .cf-panel { position: static; }
}

@media (max-width: 480px) {
  .cf { padding: 0 16px 64px; }
  .cf-opt-grid { grid-template-columns: 1fr; }
}

}

/* ============================================================
   courses-offer-banner.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* app/styles/courses-offer-banner.css
   ────────────────────────────────────────────────────────────────────────────
   Offers banner (components/ui/CoursesOfferBanner.tsx) — course pages only
   (the /courses landing page and each course detail page), sits above the
   hero. Pops in, auto-dismisses after 10s with a countdown ring around the
   close button (same interaction as WelcomeOverlay's close button). Carbon
   Cyan 20 (#bae6ff) — a light fill, so text/icons here are navy rather than
   the white used on darker banner treatments.
   ──────────────────────────────────────────────────────────────────────────── */

.cob {
  background: #bae6ff; /* Carbon Cyan 20 */
  overflow: hidden;
  animation: cob-pop-in 0.35s var(--cds-ease-standard, ease) both;
}

@keyframes cob-pop-in {
  from { transform: translateY(-100%); opacity: 0; }
  to { transform: translateY(0); opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .cob { animation: none; }
}

.cob__inner {
  max-width: var(--page-max);
  margin: 0 auto;
  padding: 12px var(--page-side);
  display: flex;
  align-items: center;
  gap: 12px;
}

.cob__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-navy);
  flex-shrink: 0;
}

.cob__badge {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-navy);
  background: rgba(26, 39, 68, 0.1);
  padding: 4px 10px;
  border-radius: var(--radius-full);
  font-family: var(--font-sans);
}

.cob__message {
  flex: 1;
  min-width: 0;
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--color-navy);
  font-family: var(--font-sans);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cob__cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  background: var(--color-navy);
  padding: 7px 14px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-family: var(--font-sans);
  transition: gap var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cob__cta:hover { gap: 9px; }

/* ── Close button + countdown ring — matches WelcomeOverlay's close button ── */
.cob__close-wrap {
  position: relative;
  width: 32px;
  height: 32px;
  flex-shrink: 0;
}

.cob__close-ring {
  position: absolute;
  inset: 0;
  width: 32px;
  height: 32px;
  transform: rotate(-90deg);
  pointer-events: none;
}

.cob__close-ring circle {
  fill: none;
  stroke: rgba(26, 39, 68, 0.65);
  stroke-width: 3.5;
  stroke-linecap: round;
  stroke-dasharray: 100.53096;
  stroke-dashoffset: 0;
  animation: cob-countdown 10s linear forwards;
}

@keyframes cob-countdown {
  from { stroke-dashoffset: 0; }
  to { stroke-dashoffset: 100.53096; }
}

@media (prefers-reduced-motion: reduce) {
  .cob__close-ring circle { animation: none; }
}

.cob__close {
  position: absolute;
  top: 2px;
  left: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border: none;
  background: transparent;
  color: var(--color-navy);
  cursor: pointer;
  border-radius: var(--radius-full);
  transition: background var(--cds-duration-fast-02) var(--cds-ease-standard);
}
.cob__close:hover,
.cob__close:focus-visible { background: rgba(26, 39, 68, 0.08); }

@media (max-width: 768px) {
  .cob__badge { display: none; }
}

@media (max-width: 560px) {
  .cob__inner { padding: 10px 16px; gap: 8px; }
  .cob__icon { display: none; }
  .cob__message { font-size: 13px; }
  .cob__cta span { display: none; }
}

}

/* ============================================================
   documents.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Document library (public Forms, Policy/Procedures & All Documents)
   Used by components/resources/DocumentLibrary.tsx.

   The page shell (hero, TOC, course-card, sidebar) is the shared `course-*`
   system from course.css — this file only styles what's specific to a
   document row: the list, the row itself, and its View/Download buttons.
   ============================================================================= */

/* ── Category section spacing (combined "All documents" page only) ── */
.doc-category + .doc-category { margin-top: 40px; }

/* ── Category heading (combined "All documents" page only) ── */
.doc-section__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-navy);
  margin: 0 0 16px;
  padding-bottom: 12px;
  border-bottom: 2px solid var(--color-navy);
}

.doc-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Document row ── */
.doc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 20px;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-navy);
  transition: border-color 120ms ease, box-shadow 120ms ease, transform 120ms ease;
}

.doc-row:hover {
  border-color: var(--color-blue);
  border-left-color: var(--color-blue);
  box-shadow: 0 6px 18px rgba(26, 39, 68, 0.08);
}

.doc-row__main {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.doc-row__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--color-blue);
}

.doc-row__name {
  font-size: 16.5px;
  font-weight: 600;
  color: var(--color-navy);
  line-height: 1.4;
}

/* ── Actions ── */
.doc-row__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.doc-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 16px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  border: 1px solid var(--color-navy);
  color: var(--color-navy);
  background: transparent;
  white-space: nowrap;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}

.doc-btn:hover {
  background: var(--color-navy);
  color: #ffffff;
}

.doc-btn--primary {
  border-color: var(--color-blue);
  background: var(--color-blue);
  color: #ffffff;
}

.doc-btn--primary:hover {
  background: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
  color: #ffffff;
}

/* ── Empty state ── */
.doc-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 64px 24px;
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border);
}

.doc-empty p { margin: 0; font-size: 16px; }

/* ── Responsive ── */
@media (max-width: 640px) {
  .doc-row {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }
  .doc-row__actions { width: 100%; }
  .doc-btn { flex: 1; justify-content: center; }
}

}

/* ============================================================
   agents.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Education Agents (public /agents + /agents/apply)
   ============================================================================= */

.agents-page { max-width: var(--page-max); margin: 0 auto; padding: 56px 24px 88px; }

/* ── Hero CTA: Agent application button ── */
.agents-hero__cta { margin-top: 22px; }

/* ── Global network section (interactive globe with context) ── */
.agents-globe-section { max-width: var(--page-max); margin: 0 auto 40px; width: 100%; }

.agents-globe-grid {
  display: grid; grid-template-columns: minmax(0, 460px) 1fr; gap: 56px;
  align-items: center;
}

.agents-globe-visual { display: flex; flex-direction: column; align-items: center; }
.agents-globe-section__viz { width: 100%; display: flex; justify-content: center; }
.agents-globe-visual__caption {
  margin: 16px 0 0; font-size: 13.5px; color: var(--color-text-muted); text-align: center;
}
.agents-globe-visual__caption strong { color: var(--color-navy); font-weight: 700; }

.agent-globe {
  width: min(400px, 100%); height: auto; aspect-ratio: 1 / 1;
  display: block; margin: 0 auto; cursor: grab; touch-action: none;
}
.agent-globe:active { cursor: grabbing; }

.agents-globe-content { display: flex; flex-direction: column; }
.agents-globe-section__eyebrow {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-blue); margin: 0 0 10px;
}
.agents-globe-section__title {
  font-size: clamp(26px, 3vw, 34px); font-weight: 800; letter-spacing: -0.01em;
  color: var(--color-navy); margin: 0;
}
.agents-globe-section__desc {
  font-size: 15.5px; line-height: 1.7; color: var(--color-text-muted);
  margin: 12px 0 0; max-width: 52ch;
}

.agents-stats {
  display: grid; grid-template-columns: 1fr 1fr; gap: 16px 24px; margin-top: 28px;
}
.agents-stat {
  padding: 4px 0 4px 16px; border-left: 3px solid var(--color-blue);
  display: flex; flex-direction: column; gap: 2px;
}
.agents-stat__num { font-size: 30px; font-weight: 800; color: var(--color-navy); line-height: 1.1; }
.agents-stat__label { font-size: 13px; color: var(--color-text-muted); }

/* ── Partnership CTA band — bridges globe overview and the directory ── */
.agents-partners-cta {
  background: #eef3fc; border: 1px solid var(--color-border);
  margin: 0 0 56px;
}
.agents-partners-cta__inner {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
  gap: 24px; padding: 36px 40px;
}
.agents-partners-cta__eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-blue); margin: 0 0 8px;
}
.agents-partners-cta__title { font-size: 22px; font-weight: 800; color: var(--color-navy); margin: 0; }
.agents-partners-cta__desc {
  font-size: 14.5px; line-height: 1.6; color: var(--color-text-muted);
  margin: 8px 0 0; max-width: 52ch;
}
.agents-partners-cta__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.agents-partners-cta__ghost {
  display: inline-flex; align-items: center; height: 48px; padding: 0 22px;
  font-size: 15px; font-weight: 700; font-family: var(--font-sans);
  color: var(--color-navy); background: transparent; border: 1px solid var(--color-border);
  text-decoration: none; transition: border-color 120ms ease, background 120ms ease;
}
.agents-partners-cta__ghost:hover { border-color: var(--color-navy); background: rgba(26, 39, 68, 0.04); }

/* Shared button (hero CTA + apply form submit). */
.agents-cta__btn {
  display: inline-flex; align-items: center; gap: 8px; flex-shrink: 0;
  padding: 14px 24px; font-size: 15px; font-weight: 700; font-family: var(--font-sans);
  background: var(--color-blue); color: #fff; text-decoration: none; border: none; cursor: pointer;
  transition: background-color 120ms ease;
}
.agents-cta__btn:hover { background: var(--color-blue-hover); }
.agents-cta__btn:disabled { opacity: 0.6; cursor: not-allowed; }

.agents-section-title {
  font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em;
  color: var(--color-blue); margin: 0 0 18px;
}
.agents-msg { color: var(--color-text-muted); font-size: 16px; padding: 24px 2px; }

/* ── Explorer: toolbar (search + filters) + master-detail ── */
.agents-explorer { display: flex; flex-direction: column; gap: 20px; }

.agents-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;
  padding: 16px 20px; background: var(--color-bg); border: 1px solid var(--color-border);
}

.agents-search {
  display: flex; align-items: center; gap: 10px; flex: 1 1 280px; min-width: 220px;
  height: 42px; padding: 0 14px; background: var(--color-surface);
  border: 1px solid var(--color-border); color: var(--color-text-muted);
}
.agents-search:focus-within { border-color: var(--color-blue); color: var(--color-text); }
.agents-search input {
  flex: 1; border: 0; outline: none; background: none; font-size: 14px;
  font-family: var(--font-sans); color: var(--color-text);
}

.agents-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; }
.agents-filters__label {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--color-text-muted);
}
.agents-filter { display: flex; align-items: center; gap: 8px; }
.agents-filter__label {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 13px; font-weight: 600; color: var(--color-navy); white-space: nowrap;
}
.agents-filter select {
  height: 36px; padding: 0 10px; font-size: 13.5px; font-family: var(--font-sans);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); cursor: pointer;
}
.agents-filter select:focus { border-color: var(--color-blue); outline: none; }
.agents-filter__clear {
  height: 36px; padding: 0 14px; font-size: 13px; font-weight: 600;
  color: var(--color-blue); background: none; border: 1px solid var(--color-border);
  cursor: pointer; transition: border-color 120ms ease, background 120ms ease;
}
.agents-filter__clear:hover { border-color: var(--color-blue); background: rgba(37, 99, 235, 0.06); }

/* ── Master (list) + detail ── */
.agents-master-detail {
  display: grid; grid-template-columns: 300px 1fr; gap: 20px;
  align-items: start;
}

.agents-list {
  display: flex; flex-direction: column; gap: 8px;
  max-height: 640px; overflow-y: auto; padding-right: 4px;
}
.agents-list__card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; text-align: left; cursor: pointer;
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-left: 3px solid transparent; font-family: var(--font-sans);
  transition: border-color 120ms ease, background 120ms ease;
}
.agents-list__card:hover { border-color: var(--color-blue); background: rgba(37, 99, 235, 0.04); }
.agents-list__card.is-selected {
  border-color: var(--color-blue); border-left-color: var(--color-blue);
  background: rgba(37, 99, 235, 0.07);
}
.agents-list__avatar { color: var(--color-blue); flex-shrink: 0; margin-top: 2px; }
.agents-list__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.agents-list__agency { font-size: 15px; font-weight: 700; color: var(--color-navy); line-height: 1.3; }
.agents-list__name { font-size: 13px; color: var(--color-text); }
.agents-list__country {
  display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
  font-size: 12px; color: var(--color-text-muted);
}

.agents-detail {
  min-height: 320px; padding: 36px; background: var(--color-surface);
  border: 1px solid var(--color-border); border-top: 4px solid var(--color-blue);
}
.agents-detail__avatar { color: var(--color-blue); display: block; margin-bottom: 14px; }
.agents-detail__agency { font-size: 26px; font-weight: 800; color: var(--color-navy); margin: 0 0 4px; }
.agents-detail__name { font-size: 16px; color: var(--color-text); margin: 0; }
.agents-detail__country {
  display: inline-flex; align-items: center; gap: 6px; margin: 12px 0 0;
  font-size: 14px; color: var(--color-text-muted);
}
.agents-detail__languages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.agents-detail__lang-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; font-size: 12.5px; font-weight: 600;
  color: var(--color-navy); background: var(--color-bg); border: 1px solid var(--color-border);
}
.agents-detail__about { margin: 18px 0 0; font-size: 15.5px; line-height: 1.65; color: var(--color-text); max-width: 62ch; }
.agents-detail__contacts { margin-top: 24px; display: flex; flex-direction: column; gap: 10px; }
.agents-detail__contact {
  display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px;
  color: var(--color-blue); text-decoration: none;
}
.agents-detail__contact:hover { text-decoration: underline; }
.agents-detail__nocontact { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }
.agents-detail__nocontact a { color: var(--color-blue); }

/* ── Apply page ── */
.agents-apply { max-width: 760px; margin: 0 auto; padding: 48px 24px 88px; }
.agents-apply__back {
  display: inline-flex; align-items: center; gap: 6px; margin-bottom: 28px;
  font-size: 13px; font-weight: 600; color: var(--color-text-muted); text-decoration: none;
}
.agents-apply__back:hover { color: var(--color-navy); }

.agents-form { display: flex; flex-direction: column; gap: 22px; }
.agents-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
.agents-field {
  display: flex; flex-direction: column; gap: 7px;
  font-size: 13px; font-weight: 600; color: var(--color-navy);
}
.agents-req { color: var(--color-blue); margin-left: 2px; }
.agents-input {
  height: 46px; padding: 0 14px; font-size: 15px; font-family: var(--font-sans);
  color: var(--color-text); background: var(--color-surface);
  border: 1px solid var(--color-border); border-radius: 0; outline: none;
  transition: border-color 120ms ease;
}
.agents-input:focus { border-color: var(--color-blue); }
.agents-textarea { height: auto; padding: 12px 14px; line-height: 1.5; resize: vertical; }
.agents-form__error {
  display: flex; align-items: center; gap: 6px; margin: 0;
  color: #b81922; font-size: 14px; font-weight: 500;
}
.agents-form__actions { display: flex; justify-content: flex-end; }

.agents-apply__done { text-align: center; padding: 48px 24px; }
.agents-apply__done-icon { color: #24a148; display: inline-flex; margin-bottom: 14px; }
.agents-apply__done h2 { font-size: 24px; font-weight: 800; color: var(--color-navy); margin: 0 0 10px; }
.agents-apply__done p { font-size: 16px; line-height: 1.6; color: var(--color-text); max-width: 520px; margin: 0 auto 24px; }

/* ── Apply page: compliance / disclosure / next steps / CTA ── */
.agents-apply-info { max-width: var(--page-max); margin: 24px auto 0; padding: 0 24px 88px; }

.agents-apply-info__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 48px;
}
.agents-info-card {
  padding: 28px 32px; background: #eef3fc; border-left: 4px solid var(--color-blue);
}
.agents-info-card__eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--color-blue); margin: 0 0 8px;
}
.agents-info-card__title { font-size: 22px; font-weight: 800; color: var(--color-navy); margin: 0 0 18px; }
.agents-info-card__desc {
  font-size: 14.5px; line-height: 1.65; color: var(--color-text); margin: 0 0 14px;
}
.agents-info-card__desc:last-child { margin-bottom: 0; }
.agents-info-card__desc a { color: var(--color-blue); text-decoration: none; }
.agents-info-card__desc a:hover { text-decoration: underline; }
.agents-info-card__list {
  margin: 0 0 14px; padding-left: 18px; font-size: 14.5px; line-height: 1.65; color: var(--color-text);
}
.agents-info-card__list li { margin-bottom: 6px; }

.agents-next { background: var(--color-navy); color: #fff; padding: 48px; margin-bottom: 0; }
.agents-next__eyebrow {
  font-size: 12.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
  color: #93c5fd; margin: 0 0 10px;
}
.agents-next__title { font-size: 28px; font-weight: 800; margin: 0 0 18px; }
.agents-next__title::after {
  content: ""; display: block; width: 48px; height: 3px; background: var(--color-blue); margin-top: 14px;
}
.agents-next__desc { font-size: 15px; line-height: 1.7; color: #cbd5e1; max-width: 68ch; margin: 18px 0 0; }

.agents-next__steps {
  display: flex; align-items: flex-start; gap: 0; margin-top: 40px;
}
.agents-next__step { display: flex; flex-direction: column; align-items: center; text-align: center; width: 220px; flex-shrink: 0; }
.agents-next__num {
  display: flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid #fff;
  font-size: 15px; font-weight: 700; flex-shrink: 0;
}
.agents-next__step p { font-size: 13.5px; line-height: 1.55; color: #cbd5e1; margin: 14px 0 0; }
.agents-next__connector { flex: 1; height: 1.5px; background: rgba(255, 255, 255, 0.35); margin-top: 20px; min-width: 24px; }

.agents-next-cta {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px;
  padding: 36px 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-top: none;
}
.agents-next-cta__text h2 { font-size: 19px; font-weight: 800; color: var(--color-navy); margin: 0 0 6px; }
.agents-next-cta__text p { font-size: 14px; color: var(--color-text-muted); margin: 0; max-width: 60ch; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .agents-globe-grid { grid-template-columns: 1fr; gap: 32px; }
  .agents-globe-content { text-align: center; align-items: center; }
  .agents-globe-section__desc { max-width: 60ch; }
  .agents-stats { max-width: 420px; }
  .agents-partners-cta__inner { justify-content: center; text-align: center; }
  .agents-partners-cta__desc { margin-inline: auto; }
}
@media (max-width: 860px) {
  .agents-master-detail { grid-template-columns: 1fr; }
  .agents-list { max-height: 360px; }
}
@media (max-width: 720px) {
  .agents-form__row { grid-template-columns: 1fr; }
  .agents-toolbar { flex-direction: column; align-items: stretch; }
  .agents-filters { flex-direction: column; align-items: stretch; }
  .agents-filter { justify-content: space-between; }
  .agents-filter select { flex: 1; min-width: 0; }
  .agents-stats { grid-template-columns: 1fr 1fr; }
  .agents-partners-cta__inner { padding: 28px 24px; }
}
@media (max-width: 480px) {
  .agents-stats { grid-template-columns: 1fr; }
}
@media (max-width: 800px) {
  .agents-apply-info__grid { grid-template-columns: 1fr; gap: 24px; }
  .agents-next { padding: 36px 28px; }
  .agents-next__steps { flex-direction: column; align-items: stretch; gap: 20px; }
  .agents-next__step { width: 100%; flex-direction: row; text-align: left; align-items: flex-start; gap: 16px; }
  .agents-next__step p { margin: 4px 0 0; }
  .agents-next__connector { display: none; }
  .agents-next-cta { flex-direction: column; align-items: flex-start; padding: 28px; }
}

}

/* ============================================================
   focus-mode.css (inlined, layer: utilities)
   ============================================================ */
@layer utilities {
/* =============================================================================
   ALIT — Focus mode (enlarge form)
   app/styles/focus-mode.css

   Lets long forms (enrolment, LLN) hide the header/footer/dev banner and take
   the full viewport. Four pieces:
     .focus-banner        → prominent strip directly under the page hero, inviting
                             the visitor into focus mode (components/ui/FocusModeBanner.tsx)
     .focus-hero--compact → added to the page's own hero (.enrol-hero / .lln-hero)
                             while focus mode is on, trading its decorative height
                             for form real estate
     .focus-bar           → replaces the header/footer while focus mode is on,
                             each showing a "Full-screen view is on" status
                             plus an exit button (components/layout/PageShell.tsx).
                             .focus-banner renders nothing while focus mode is
                             on, so this status isn't shown three times over.
   The accessibility widget is unaffected — it's fixed-position with a higher
   z-index (--z-modal) than this chrome, so it stays reachable regardless.
   ============================================================================= */

/* ── Compact hero — active while focus mode is on ──────────────────────────
   Collapses the tall decorative hero (grid overlay, eyebrow, description,
   generous padding) down to a slim title + breadcrumb strip. */
.focus-hero--compact {
  padding: 18px 0 !important;
}

.focus-hero--compact::before,
.focus-hero--compact::after {
  display: none;
}

.focus-hero--compact .lln-hero__eyebrow,
.focus-hero--compact .lln-hero__desc {
  display: none;
}

.focus-hero--compact .enrol-hero__title,
.focus-hero--compact .lln-hero__title {
  font-size: 20px;
  margin: 0;
}

.focus-hero--compact .enrol-hero__title::before {
  display: none;
}

.focus-hero--compact .enrol-hero__inner,
.focus-hero--compact .lln-hero__inner {
  align-items: center;
}

.focus-hero--compact .enrol-hero__breadcrumb,
.focus-hero--compact .lln-hero__breadcrumb {
  font-size: 12px;
  padding-bottom: 0;
}

.focus-banner {
  background-color: rgba(37,99,235,0.06);
  border-bottom: 1px solid var(--color-border);
  border-left: 4px solid var(--color-blue);
}

.focus-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 18px 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 16px;
}

.focus-banner__text {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 1.5;
}

.focus-banner__icon {
  flex-shrink: 0;
  color: var(--color-blue);
  display: flex;
}

.focus-banner__title {
  font-weight: 700;
  color: var(--color-navy);
}

.focus-banner__desc { color: var(--color-text-muted); }

.focus-banner__btn {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: #ffffff;
  background-color: var(--color-navy);
  border: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 120ms ease;
}

.focus-banner__btn:hover { background-color: var(--color-navy-dark); }

@media (max-width: 600px) {
  .focus-banner__inner { padding: 16px 20px; }
  .focus-banner__btn { width: 100%; justify-content: center; }
}

/* ── Chrome shown while focus mode is on ── */
.focus-bar {
  z-index: var(--z-header);
  background-color: var(--color-header-bg);
  border-bottom: 1px solid var(--color-border);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 24px;
}

.focus-bar--top {
  position: sticky;
  top: 0;
}

.focus-bar--bottom {
  border-bottom: none;
  border-top: 1px solid var(--color-border);
}

.focus-bar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: 100%;
  max-width: 460px;
  flex-wrap: wrap;
}

.focus-bar__status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 700;
  font-family: var(--font-sans);
  color: var(--color-navy);
}

.focus-bar__status svg { color: var(--color-blue); }

.focus-bar__exit {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  color: #ffffff;
  background-color: #4589ff;   /* Carbon Blue 50 — matches dropdown/footer accent */
  border: 1px solid #4589ff;
  cursor: pointer;
  transition: background-color 120ms ease, border-color 120ms ease;
}

.focus-bar__exit:hover {
  background-color: var(--color-blue-hover);
  border-color: var(--color-blue-hover);
}

.focus-main {
  min-height: 100vh;
}

}

/* ============================================================
   promo.css (inlined, layer: components)
   ============================================================ */
@layer components {
/* =============================================================================
   PROMO POPUP + RAIL CARD
   Only renders when promoBanner.enabled === true on a course.
   All other courses are completely unaffected.
============================================================================= */

/* ── Overlay backdrop ─────────────────────────────────────────────────────── */

.promo-overlay {
  position: fixed;
  inset: 0;
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.promo-overlay__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(6, 12, 28, 0.80);
  backdrop-filter: blur(4px);
  animation: promo-fade-in 220ms ease forwards;
}

@keyframes promo-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* ── Modal — Option B: full bleed background image ───────────────────────── */

.promo-modal--bg {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 500px;
  min-height: 420px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  animation: promo-slide-up 300ms cubic-bezier(0.2, 0, 0.38, 0.9) forwards;
}

@keyframes promo-slide-up {
  from { opacity: 0; transform: translateY(28px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .promo-overlay__backdrop,
  .promo-modal--bg { animation: none; }
}

/* Background image layer */
.promo-modal__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}

/* Gradient overlay — navy at bottom where text lives, transparent at top */
.promo-modal__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    to bottom,
    rgba(10, 18, 40, 0.25) 0%,
    rgba(10, 18, 40, 0.55) 35%,
    rgba(10, 18, 40, 0.90) 65%,
    rgba(10, 18, 40, 0.97) 100%
  );
}

/* Close button — light version for dark background */
.promo-modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 3;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.25);
  cursor: pointer;
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6px;
  transition: background 70ms ease;
}
.promo-modal__close:hover { background: rgba(255, 255, 255, 0.22); }

/* Content sits above image + overlay */
.promo-modal__content {
  position: relative;
  z-index: 2;
  padding: 32px 32px 26px;
}

/* Badge */
.promo-modal__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  background: var(--color-blue);
  color: #fff;
  padding: 4px 12px;
  margin-bottom: 14px;
  font-family: var(--font-sans);
}

/* Heading — large, white, bold */
.promo-modal__heading {
  font-size: 42px;
  font-weight: 800;
  color: #ffffff;
  letter-spacing: -0.03em;
  line-height: 1.0;
  font-family: var(--font-sans);
  margin-bottom: 6px;
}

/* Course name */
.promo-modal__sub {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.70);
  font-family: var(--font-sans);
  margin-bottom: 10px;
}

/* Body copy */
.promo-modal__body {
  font-size: 14px;
  color: rgba(255, 255, 255, 0.70);
  line-height: 1.6;
  font-family: var(--font-sans);
  margin-bottom: 18px;
  max-width: 38ch;
}

/* Price row — light version */
.promo-modal__price-row--light {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 20px;
  padding: 14px 18px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.18);
  backdrop-filter: blur(4px);
}

.promo-modal__original {
  font-size: 16px;
  color: rgba(255, 255, 255, 0.50);
  text-decoration: line-through;
  font-family: var(--font-sans);
}

.promo-modal__promo {
  font-size: 32px;
  font-weight: 800;
  color: #ffffff;
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

/* CTA button — blue on dark bg */
.promo-modal__cta--blue {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 15px 20px;
  background: var(--color-blue);
  color: #fff;
  font-size: 15px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background 70ms ease;
  margin-bottom: 12px;
  border: none;
  cursor: pointer;
}
.promo-modal__cta--blue:hover { background: var(--color-blue-hover); }
.promo-modal__cta--blue svg { transition: transform 70ms ease; flex-shrink: 0; }
.promo-modal__cta--blue:hover svg { transform: translateX(4px); }

/* Terms — light */
.promo-modal__terms--light {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.40);
  font-family: var(--font-sans);
  text-align: center;
  margin: 0;
}

/* ── Right rail card ──────────────────────────────────────────────────────── */

.promo-rail {
  border: 1px solid var(--color-blue);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-blue);
  overflow: hidden;
}

.promo-rail__head {
  background: var(--color-navy);
  padding: 16px 20px;
  border-bottom: 4px solid var(--color-blue);
}

.promo-rail__badge {
  display: inline-block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: var(--color-blue);
  color: #fff;
  padding: 3px 8px;
  margin-bottom: 8px;
  font-family: var(--font-sans);
}

.promo-rail__heading {
  font-size: 17px;
  font-weight: 800;
  color: #fff;
  font-family: var(--font-sans);
  letter-spacing: -0.01em;
  line-height: 1.2;
}

.promo-rail__body { padding: 16px 20px; }

.promo-rail__price-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 10px;
}

.promo-rail__original {
  font-size: 13px;
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-family: var(--font-sans);
}

.promo-rail__promo {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-navy);
  font-family: var(--font-sans);
  letter-spacing: -0.02em;
}

.promo-rail__desc {
  font-size: 12px;
  color: var(--color-text-muted);
  line-height: 1.55;
  font-family: var(--font-sans);
  margin-bottom: 14px;
}

.promo-rail__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  padding: 11px 16px;
  background: var(--color-blue);
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  font-family: var(--font-sans);
  text-decoration: none;
  transition: background 70ms ease;
  margin-bottom: 8px;
}
.promo-rail__cta:hover { background: var(--color-blue-hover); }
.promo-rail__cta svg { transition: transform 70ms ease; }
.promo-rail__cta:hover svg { transform: translateX(3px); }

.promo-rail__terms {
  font-size: 10px;
  color: var(--color-text-muted);
  font-family: var(--font-sans);
  text-align: center;
  margin: 0;
}

/* ── Responsive ───────────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  .promo-modal__content { padding: 24px 20px 20px; }
  .promo-modal__heading { font-size: 32px; }
  .promo-modal__promo   { font-size: 26px; }
  .promo-modal--bg      { min-height: 380px; }
}
}


/* ─────────────────────────────────────────────────────────────────────────────
   LAYER: BASE
   Tokens and resets always load first (lowest specificity).
   ───────────────────────────────────────────────────────────────────────────── */
@layer base {

/* =============================================================================
   1. DESIGN TOKENS
   All CSS custom properties for the ALIT design system.
   Editing values here rethemes the entire site in one place.
   ============================================================================= */

:root {

  /* ── Brand colours ──────────────────────────────────────────────────────── */
  --color-navy:        #1a2744;   /* Primary — header bg (light), footer, accents */
  --color-navy-dark:   #111b33;   /* Darker navy — hover states */
  --color-navy-light:  #243157;   /* Lighter navy — card / dropdown hover bg */
  --color-blue:        #2563eb;   /* Active/CTA blue — active nav, Apply Now, links */
  --color-blue-hover:  #1d4ed8;   /* Hover state for blue elements */

  /* ── Neutral palette (light mode) ──────────────────────────────────────── */
  --color-bg:          #f5f6f8;   /* Page background */
  --color-surface:     #ffffff;   /* Cards, panels, modals */
  --color-border:      #e2e6ee;   /* Dividers, input borders */
  --color-text:        #111827;   /* Primary body text */
  --color-text-muted:  #4b5563;   /* Secondary / helper text — darkened for legibility */
  --color-text-light:  #6b7280;   /* Tertiary / placeholder — darkened for legibility */
  --color-cream:       #f5f0e8;   /* Warm callout accent (course template, RPL, footer) — never yellow */
  --color-cream-line:  #e7dfd0;   /* Border/divider paired with --color-cream */

  /* ── Top bar ────────────────────────────────────────────────────────────── */
  --color-topbar-bg:   #1a2744;
  --color-topbar-text: #cbd5e1;

  /* ── Header / nav ───────────────────────────────────────────────────────── */
  --color-header-bg:     #ffffff;
  --color-header-border: #e2e6ee;
  --color-nav-text:      #374151;
  --color-nav-hover:     #1a2744;

  /* ── Footer ─────────────────────────────────────────────────────────────── */
  --color-footer-bg:         #1a2744;
  --color-footer-text:       #cbd5e1;
  --color-footer-heading:    #ffffff;
  --color-footer-link-hover: #93c5fd;
  --color-footer-bottom-bg:  #111b33;

  /* ── Mega-menu dropdown ─────────────────────────────────────────────────── */
  --color-dropdown-bg:          #1a2744;
  --color-dropdown-text:        #cbd5e1;
  --color-dropdown-active-bg:   #2563eb;
  --color-dropdown-active-text: #ffffff;
  --color-dropdown-hover-bg:    #243157;

  /* ── Buttons ────────────────────────────────────────────────────────────── */
  --color-btn-primary-bg:    #2563eb;
  --color-btn-primary-text:  #ffffff;
  --color-btn-primary-hover: #1d4ed8;

  /* ── Spacing aliases (map to Carbon tokens below) ───────────────────────── */
  --space-xs:  0.25rem;   /* 4px  */
  --space-sm:  0.5rem;    /* 8px  */
  --space-md:  1rem;      /* 16px */
  --space-lg:  1.5rem;    /* 24px */
  --space-xl:  2rem;      /* 32px */
  --space-2xl: 3rem;      /* 48px */

  /* ── Fluid page container ────────────────────────────────────────────────
     Shared by every page's outer wrap (course/course-detail/lln/rpl/newsroom/
     homepage). Flat at today's values up to ~1660px viewport (typical
     laptops, unchanged), then grows gently for large external monitors,
     capping at 1680px so it never gets uncomfortably wide. Every page used to
     hardcode its own max-width (1280 in most files, 1360 in the newest ones)
     and its own breakpoint-stepped side padding — this is the one shared
     source of truth going forward. See PENDING_FIXES-style note: not yet
     applied to dashboard/admin, contact, or agents pages (follow-up). */
  --page-max:  clamp(1360px, 82vw, 1680px);
  --page-side: clamp(20px, 5vw, 48px);

  /* ── Fluid hero type ──────────────────────────────────────────────────────
     `.course-hero__title`, `.lln-hero__title` and `.newsroom-hero__title` all
     independently ship at exactly 34px today (and their sub/desc text all at
     16px) — a real existing consistency worth keeping, just made fluid. Both
     land within ~0.5px of today's fixed value at a ~1400px viewport (i.e. no
     visible change at the common laptop width), shrink a little on mobile,
     and grow a little for large external monitors. */
  --fs-hero-title: clamp(1.75rem, 1.6rem + 0.64vw, 2.375rem);    /* 28px → 34px (~1400px) → 38px */
  --fs-hero-sub:   clamp(0.8125rem, 0.7375rem + 0.32vw, 1.125rem); /* 13px → 16px (~1400px) → 18px */

  /* ── Typography ─────────────────────────────────────────────────────────── */
  --font-sans:      var(--font-source-sans, 'Source Sans 3'), 'Helvetica Neue', Arial, sans-serif;
  --font-size-xs:   0.75rem;    /* 12px */
  --font-size-sm:   0.875rem;   /* 14px */
  --font-size-base: 1rem;       /* 16px */
  --font-size-lg:   1.125rem;   /* 18px */
  --font-size-xl:   1.25rem;    /* 20px */

  /* ── Shadows ─────────────────────────────────────────────────────────────── */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.08);
  --shadow-md: 0 4px 12px rgba(0,0,0,0.12);
  --shadow-lg: 0 8px 24px rgba(0,0,0,0.16);

  /* ── Border radius ───────────────────────────────────────────────────────── */
  /* Carbon design system uses 0px on interactive elements (buttons, inputs,
     dropdowns) and 2px on containers. Only badges/pills use radius-full. */
  --radius-none: 0;        /* Buttons, inputs, dropdowns — Carbon interactive */
  --radius-sm:   2px;      /* Cards, tiles — Carbon container */
  --radius-md:   2px;
  --radius-lg:   2px;
  --radius-full: 9999px;   /* Badges and pills only */

  /* ── Carbon spacing scale (4px grid) ────────────────────────────────────── */
  /* Reference: carbondesignsystem.com/elements/spacing */
  --cds-spacing-01: 2px;
  --cds-spacing-02: 4px;
  --cds-spacing-03: 8px;
  --cds-spacing-04: 12px;
  --cds-spacing-05: 16px;
  --cds-spacing-06: 24px;
  --cds-spacing-07: 32px;
  --cds-spacing-08: 40px;
  --cds-spacing-09: 48px;
  --cds-spacing-10: 64px;
  --cds-spacing-11: 80px;
  --cds-spacing-12: 96px;
  --cds-spacing-13: 160px;

  /* ── Carbon motion tokens ────────────────────────────────────────────────── */
  /* Reference: carbondesignsystem.com/elements/motion */
  --cds-duration-fast-01:     70ms;    /* Micro-interactions (icon hover) */
  --cds-duration-fast-02:     110ms;   /* Small element enters */
  --cds-duration-moderate-01: 150ms;   /* Medium transitions */
  --cds-duration-moderate-02: 240ms;   /* Large element transitions */
  --cds-ease-standard: cubic-bezier(0.2, 0, 0.38, 0.9);
  --cds-ease-entrance:  cubic-bezier(0, 0, 0.38, 0.9);
  --cds-ease-exit:      cubic-bezier(0.2, 0, 1, 0.9);

  /* ── Carbon type scale ───────────────────────────────────────────────────── */
  --cds-body-01:        14px;
  --cds-body-02:        16px;
  --cds-label-01:       12px;
  --cds-helper-text-01: 12px;
  --cds-heading-01:     14px;   /* font-weight 600 */
  --cds-heading-02:     16px;
  /* Fluid — its only consumer is contact.css (verified), so this is safe to
     convert without touching any other Carbon heading token. */
  --cds-heading-03:     clamp(1rem, 0.91rem + 0.38vw, 1.375rem);  /* 16px → 20px (~1400px) → 22px */
  /* Fluid — its only 2 consumers are both in homepage.css (verified), so this
     is safe to convert without touching any other Carbon heading token. */
  --cds-heading-04:     clamp(1.4375rem, 1.32rem + 0.51vw, 1.9375rem);  /* 23px → 28px (~1400px) → 31px */
  --cds-heading-05:     36px;

  /* ── Transition aliases (backward-compat, prefer --cds-duration-* for new) ─ */
  --transition-fast:   var(--cds-duration-fast-02)     var(--cds-ease-standard);
  --transition-normal: var(--cds-duration-moderate-01) var(--cds-ease-standard);
  --transition-slow:   var(--cds-duration-moderate-02) var(--cds-ease-standard);

  /* ── Z-index layers ──────────────────────────────────────────────────────── */
  --z-dropdown: 50;
  --z-header:   40;
  --z-modal:    100;
}


/* =============================================================================
   2. BASE RESET & DEFAULTS
   ============================================================================= */

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

html {
  scroll-behavior: smooth;
  /* Prevent layout shift when the scrollbar appears on content-heavy pages */
  overflow-y: scroll;
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: var(--font-size-base);
  line-height: 1.6;
  /* Smooth colour transition when toggling dark/light mode */
  transition:
    background-color var(--transition-normal),
    color var(--transition-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Remove default list styling — used throughout nav and footer */
ul, ol {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Strip link decoration by default — hover/focus states are styled per component */
a {
  color: inherit;
  text-decoration: none;
}

/* Media never overflow their containers, and always keep their aspect
   ratio when CSS shrinks them below their width/height attributes (avoids
   Next.js's "width or height modified, but not the other" warning, and
   stops any image with explicit dimensions from ever looking stretched). */
img, video {
  max-width: 100%;
  height: auto;
}

/* Block display for SVGs prevents the inline baseline gap */
img, svg {
  display: block;
  max-width: 100%;
}

button {
  cursor: pointer;
  border: none;
  background: none;
  font-family: inherit;
}


/* =============================================================================
   3. LAYOUT UTILITIES
   Thin wrappers used across all pages for consistent max-width and side padding.
   These match the 48px side padding used in the header and footer.
   ============================================================================= */

/* Centres content and constrains to 1280px with consistent horizontal padding */
.container {
  max-width: 1280px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 48px;
  padding-right: 48px;
}

/* Standard vertical section padding */
.section {
  padding-top: var(--space-2xl);
  padding-bottom: var(--space-2xl);
}

@media (max-width: 1024px) {
  .container { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 600px) {
  .container { padding-left: 20px; padding-right: 20px; }
  .section   { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
}

@media (max-width: 400px) {
  .container { padding-left: 16px; padding-right: 16px; }
}


/* =============================================================================
   4. FOCUS STYLES (Accessibility)
   Visible focus ring for keyboard navigation.
   Uses the brand blue so it's clearly visible on all backgrounds.
   ============================================================================= */

:focus-visible {
  outline: 2px solid var(--color-blue);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

} /* end @layer base */

/* =============================================================================
   ACCESSIBILITY WIDGET — FUNCTIONAL OVERRIDES
   Deliberately UNLAYERED (not inside @layer base/utilities): every component
   stylesheet is imported into `layer(utilities)`, and the tokens above live in
   `layer(base)` — since "base" is declared after "utilities" in this file it
   already wins in a plain layer-vs-layer fight, but an unlayered rule beats
   *both* layers outright regardless of declaration order or selector
   specificity. Putting these here means the three toggles always win, full
   stop, no matter what a future component stylesheet does.

   Toggled by components/ui/AccessibilityWidget.tsx, which just adds/removes
   these three class names on <html>.
   ============================================================================= */

/* ── High Contrast ── Every `--color-text-muted` / `--color-text-light` usage
   site-wide currently renders low-contrast grey secondary text; forcing it to
   the primary text colour, and hairline borders to solid black, is a real,
   sitewide contrast boost because those tokens are consumed via var()
   virtually everywhere (not re-declared per component). */
html.a11y-high-contrast {
  --color-text-muted: var(--color-text);
  --color-text-light: var(--color-text);
  --color-border:     #000000;
}

/* ── Large Text ── The design system is authored in `px`, not `rem`, so a
   root `font-size` percentage bump (the usual trick) would do nothing for
   almost all type on this site. `zoom` scales the actual rendered layout —
   text, spacing, icons — together, the same way browser-native zoom does, so
   it works regardless of what unit any given component happens to use.
   Chromium/WebKit-only (no effect in Firefox — Firefox users simply see the
   page at 100%, not a broken one). The widget itself is excluded so its
   controls stay a consistent, usable size regardless of the page zoom the
   visitor has chosen. */
html.a11y-large-text {
  zoom: 1.15;
}
html.a11y-large-text .a11y-widget,
html.a11y-large-text .a11y-panel {
  zoom: 1;
}

/* ── Focus Indicators ── Stronger than the sitewide baseline 2px blue ring
   (defined above, inside @layer base): a thicker Magenta outline plus a white
   inner ring so it stays visible against light AND dark backgrounds (navy
   header/footer, dark dashboard, etc.) alike. */
html.a11y-focus-mode :focus-visible {
  outline: 3px solid #d02670;
  outline-offset: 3px;
  box-shadow: 0 0 0 2px #ffffff, 0 0 0 5px #d02670;
  border-radius: 0;
}

/* =============================================================================
   DEV BANNER — sitewide preview notice
   ============================================================================= */

.dev-banner {
  background: #1a2744;
  color: #e2e8f0;
  font-family: var(--font-sans);
  font-size: 13px;
  line-height: 1.5;
  border-bottom: 2px solid #f1c21b;
}

.dev-banner__inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 10px 48px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.dev-banner__badge {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  background: #f1c21b;
  color: #161616;
  padding: 2px 8px;
  flex-shrink: 0;
}

.dev-banner__text {
  flex: 1;
  margin: 0;
  color: #cbd5e1;
}

.dev-banner__close {
  background: none;
  border: none;
  color: #94a3b8;
  font-size: 20px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 100ms ease;
}

.dev-banner__close:hover { color: #ffffff; }

@media (max-width: 768px) {
  .dev-banner__inner { padding: 10px 20px; gap: 10px; }
  .dev-banner__text  { font-size: 12px; }
}

/* =============================================================================
   404 NOT FOUND PAGE
   ============================================================================= */

.not-found-page {
  min-height: 70vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 80px 48px;
  background: var(--color-bg);
  font-family: var(--font-sans);
}

.not-found-page__inner {
  max-width: 560px;
  width: 100%;
  text-align: center;
}

.not-found-page__code {
  font-size: clamp(80px, 14vw, 140px);
  font-weight: 300;
  color: var(--color-navy);
  line-height: 1;
  letter-spacing: -0.04em;
  margin: 0 0 8px;
}

.not-found-page__rule {
  width: 48px;
  height: 3px;
  background: var(--color-blue);
  margin: 0 auto 28px;
}

.not-found-page__title {
  font-size: 22px;
  font-weight: 600;
  color: var(--color-navy);
  margin: 0 0 12px;
}

.not-found-page__desc {
  font-size: 15px;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin: 0 0 36px;
}

.not-found-page__actions {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.not-found-page__btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 24px;
  background: var(--color-blue);
  color: #ffffff;
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color 110ms ease;
}

.not-found-page__btn-primary:hover { background: var(--color-blue-hover); }

.not-found-page__btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  padding: 0 20px;
  background: transparent;
  color: var(--color-navy);
  font-size: 14px;
  font-weight: 600;
  font-family: var(--font-sans);
  text-decoration: none;
  border: 1px solid var(--color-border);
  cursor: pointer;
  transition: border-color 110ms ease, color 110ms ease;
}

.not-found-page__btn-ghost:hover {
  border-color: var(--color-navy);
  color: var(--color-navy);
}


@media (max-width: 600px) {
  .not-found-page { padding: 60px 20px; }
  .not-found-page__actions { flex-direction: column; align-items: stretch; }
  .not-found-page__btn-primary,
  .not-found-page__btn-ghost { justify-content: center; }
}

/* ============================================================
   CSS-only mobile navigation (no JavaScript required)
   Toggled by the #nav-toggle checkbox; submenus use <details>.
   ============================================================ */
@layer utilities {
  .nav-toggle-checkbox {
    position: absolute;
    width: 1px; height: 1px;
    opacity: 0;
    pointer-events: none;
  }
  .nav-toggle-checkbox:checked ~ .mobile-nav { display: flex; }

  /* Hamburger icon swap (menu <-> close) */
  .header__hamburger .icon--close { display: none; }
  .nav-toggle-checkbox:checked ~ .header .icon--menu  { display: none; }
  .nav-toggle-checkbox:checked ~ .header .icon--close { display: block; }

  /* Keyboard focus: checkbox is focusable, ring shown on the hamburger */
  .nav-toggle-checkbox:focus-visible ~ .header .header__hamburger {
    outline: 2px solid var(--color-navy);
    outline-offset: 2px;
  }

  /* <details>-based submenus */
  .mobile-nav__group > summary { list-style: none; }
  .mobile-nav__group > summary::-webkit-details-marker { display: none; }
  .nav__chevron { transition: transform 150ms ease; }
  .mobile-nav__group[open] > summary .nav__chevron { transform: rotate(180deg); }

  /* Never show the panel on desktop, even if the checkbox was left checked */
  @media (min-width: 1025px) { .mobile-nav { display: none !important; } }
}

/* ============================================================
   Header site search (input + results dropdown; logic in main.js)
   ============================================================ */
@layer utilities {
  .header__search-input[hidden] { display: none; }
  .header__search--open .header__search-btn {
    position: absolute;
    right: 0; top: 0;
    color: var(--color-navy);
  }
  .search-results {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 300px;
    max-width: 90vw;
    max-height: 60vh;
    overflow-y: auto;
    background: #ffffff;
    border: 1px solid var(--color-header-border);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    z-index: 300;
  }
  .search-results[hidden] { display: none; }
  .search-results__link {
    display: block;
    padding: 10px 16px;
    font-size: 14px;
    line-height: 1.35;
    color: var(--color-text);
    border-left: 3px solid transparent;
  }
  .search-results__link:hover,
  .search-results__link:focus-visible {
    background: #f0f4f8;
    border-left-color: var(--color-navy);
    color: var(--color-navy);
  }
  .search-results__section {
    display: block;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-bottom: 2px;
  }
  .search-results__empty {
    padding: 14px 16px;
    font-size: 14px;
    color: var(--color-text-muted);
  }
  @media (max-width: 600px) {
    .search-results { min-width: 260px; }
  }
}

/* ============================================================
   Desktop nav dropdowns (Course / RPL / Resources)
   Opened on click via main.js, matching the original app design.
   Without JS the nav links simply navigate to their section pages.
   ============================================================ */
@layer utilities {
  .nav__dropdown { display: none; }
  .nav__item--open > .nav__dropdown { display: block; }
  /* simple-link rows contain two spans; make label/desc wrapper flexible */
  .dropdown__simple-link > span:first-child { flex: 1; min-width: 0; }
}

/* =============================================================================
   Blog (single post + dynamic newsroom) — RMIT-style article layout.
   Added with the news/blog migration; uses the design tokens above.
============================================================================= */

.blog-hero { width: 100%; max-height: 450px; overflow: hidden; background: var(--color-navy, #12263f); }
.blog-hero__img { width: 100%; height: 450px; object-fit: cover; display: block; }

.blog-wrap { max-width: 820px; margin: 0 auto; padding: 32px 24px 72px; }

.blog-crumb { display: flex; flex-wrap: wrap; gap: 8px; font-size: 13px; color: var(--color-text-muted, #5b6b7b); margin-bottom: 20px; }
.blog-crumb a { color: var(--color-blue, #2563eb); text-decoration: none; }
.blog-crumb a:hover { text-decoration: underline; }

.blog-title { font-family: var(--font-sans, 'Source Sans 3', sans-serif); font-size: clamp(30px, 4.5vw, 44px); line-height: 1.15; color: var(--color-navy, #12263f); margin: 0 0 18px; }

.blog-standfirst { font-size: clamp(18px, 2.2vw, 22px); line-height: 1.5; font-weight: 700; color: var(--color-navy, #12263f); margin: 0 0 18px; }

.blog-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 14px; font-style: italic; color: var(--color-text-muted, #5b6b7b); border-top: 1px solid #e3e8ee; border-bottom: 1px solid #e3e8ee; padding: 12px 0; margin-bottom: 32px; }
.blog-meta__sep { color: #c3cdd7; }
.blog-meta__cats { display: inline-flex; gap: 6px; margin-left: auto; font-style: normal; }

.blog-article { font-size: 17px; line-height: 1.75; color: #2c3a49; }
.blog-article h2, .blog-article h3, .blog-article h4 { font-family: var(--font-sans, 'Source Sans 3', sans-serif); color: var(--color-navy, #12263f); line-height: 1.25; margin: 2em 0 0.6em; }
.blog-article h2 { font-size: 28px; }
.blog-article h3 { font-size: 23px; }
.blog-article h4 { font-size: 19px; }
.blog-article p { margin: 0 0 1.2em; }
.blog-article a { color: var(--color-blue, #2563eb); }
.blog-article ul, .blog-article ol { margin: 0 0 1.4em; padding-left: 1.4em; }
.blog-article li { margin-bottom: 0.55em; }
.blog-article img { max-width: 100%; height: auto; border-radius: 6px; margin: 8px 0 16px; }
.blog-article blockquote { border-left: 4px solid var(--color-blue, #2563eb); margin: 1.6em 0; padding: 4px 0 4px 20px; color: var(--color-navy, #12263f); font-size: 19px; }
.blog-article figure { margin: 0 0 1.4em; }
.blog-article table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: 15px; }
.blog-article th, .blog-article td { border: 1px solid #e3e8ee; padding: 10px 12px; text-align: left; }

.blog-share { display: flex; align-items: center; gap: 10px; border-top: 1px solid #e3e8ee; margin-top: 44px; padding-top: 20px; }
.blog-share__label { font-weight: 700; font-size: 14px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-navy, #12263f); margin-right: 4px; }
.blog-share__link { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid #d5dde5; border-radius: 50%; color: var(--color-navy, #12263f); transition: all 0.15s ease; }
.blog-share__link:hover { background: var(--color-navy, #12263f); color: #fff; border-color: var(--color-navy, #12263f); }

.blog-footer-nav { margin-top: 28px; }

/* Newsroom visuals now carry photos. */
.post-visual img { display: block; }

/* Newsroom "Load more" button */
.newsroom-loadmore-wrap { display: flex; justify-content: center; margin: 44px 0 12px; }
.newsroom-loadmore {
  position: relative;
  display: inline-flex; align-items: center; gap: 10px;
  background: transparent; color: var(--color-navy, #12263f);
  border: 2px solid var(--color-navy, #12263f); border-radius: 999px;
  padding: 14px 34px;
  font-family: var(--font-sans, 'Source Sans 3', sans-serif);
  font-size: 15px; font-weight: 700; letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.newsroom-loadmore:hover {
  background: var(--color-navy, #12263f); color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(18, 38, 63, 0.22);
}
.newsroom-loadmore:focus-visible { outline: 3px solid var(--color-blue, #2563eb); outline-offset: 3px; }
.newsroom-loadmore:active { transform: translateY(0); box-shadow: 0 4px 10px rgba(18, 38, 63, 0.18); }
.newsroom-loadmore:disabled { cursor: wait; opacity: 0.85; transform: none; box-shadow: none; }
.newsroom-loadmore__icon { display: inline-flex; transition: transform 0.18s ease; }
.newsroom-loadmore:hover .newsroom-loadmore__icon { transform: translateY(2px); }
.newsroom-loadmore__spinner {
  display: none;
  width: 16px; height: 16px;
  border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%;
  animation: alit-spin 0.7s linear infinite;
}
.newsroom-loadmore--busy .newsroom-loadmore__spinner { display: inline-block; }
.newsroom-loadmore--busy .newsroom-loadmore__icon { display: none; }
@keyframes alit-spin { to { transform: rotate(360deg); } }

/* New cards fade in as they load */
.post-grid .post-card { animation: alit-card-in 0.35s ease both; }
@keyframes alit-card-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* RPL FAQ accordion: collapse closed items (state class was styled for the
   chevron only — answers were never hidden). */
.rpl-faq__item:not(.rpl-faq__item--open) .rpl-faq__a { display: none; }

/* Home page animated thread (ported from the ALIT Next.js build) */
.home-main { position: relative; }
.home-main > section { position: relative; z-index: 1; }
.home-thread {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 1;
}
.home-thread__path {
  stroke-dasharray: var(--path-len, 6626);
  stroke-dashoffset: var(--path-len, 6626);
  animation: 16s ease-in-out infinite alternate alit-home-thread-trace;
}
@keyframes alit-home-thread-trace {
  to { stroke-dashoffset: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .home-thread__path { stroke-dashoffset: 0; animation: none; }
}
@media (max-width: 1100px) {
  .home-thread { display: none; }
}

/* Notice bar (dashboard-managed: Customize → ALIT Theme Options → Notice Bar) */
.notice-bar { position: relative; z-index: 5; font-family: var(--font-sans, 'Source Sans 3', sans-serif); }
.notice-bar__inner { position: relative; max-width: 1440px; margin: 0 auto; padding: 9px 56px; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 6px 14px; font-size: 14px; line-height: 1.5; text-align: center; }
.notice-bar__icon { display: inline-flex; opacity: 0.85; }
.notice-bar__link { display: inline-flex; align-items: center; gap: 5px; font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.notice-bar__link:hover { opacity: 0.85; }
.notice-bar__close { position: absolute; top: 50%; right: 16px; transform: translateY(-50%); background: none; border: 0; padding: 6px; cursor: pointer; color: #fff; opacity: 0.85; display: inline-flex; }
.notice-bar__close:hover { opacity: 1; }
.notice-bar[hidden] { display: none; }
@media (max-width: 640px) {
  .notice-bar__inner { font-size: 13px; padding: 8px 44px; }
}

/* =============================================================================
   MEGA MENU — two-pane category dropdown (Course / Resources)
   Sidebar category tabs switch the visible pane on the right; only the
   active pane renders. Matches the reference design (navy panel, blue
   accent tab, footer CTA).
   ============================================================================= */

.dropdown__pane { display: none; }
.dropdown__pane--active {
  display: block;
  animation: dropdown-pane-in 110ms cubic-bezier(0, 0, 0.38, 0.9);
}

@keyframes dropdown-pane-in {
  from { opacity: 0; transform: translateX(6px); }
  to   { opacity: 1; transform: translateX(0); }
}

/* Cap the pane height so oversized categories never push the footer
   off-screen on short viewports. */
.dropdown__panes { min-width: 0; }
.dropdown__pane .dropdown__links {
  max-height: min(52vh, 460px);
  overflow-y: auto;
}

/* The simple (RPL) dropdown gained an eyebrow label above its links. */
.dropdown--simple .dropdown__categories-label { margin-bottom: 8px; }

/* =============================================================================
   COURSE STRUCTURE — units accordion (migrated course pages)
   The imported course content uses .units-accordion (native <details>)
   markup that shipped without styles. Dressed here to match the theme's
   .cx-acc design: bordered groups, bold header with chevron, and
   table-style rows (mono code column | unit name).
   ============================================================================= */

.units-accordion {
  display: grid;
  gap: 14px;
  margin-top: var(--cds-spacing-07, 32px);
}

.units-accordion__group {
  border: 1px solid var(--color-border);
  background: var(--color-surface);
}

.units-accordion__group > summary {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px var(--cds-spacing-06, 24px);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.1rem;
  color: var(--color-navy);
  transition: background-color 120ms ease;
  -webkit-user-select: none;
  user-select: none;
}

.units-accordion__group > summary::-webkit-details-marker { display: none; }
.units-accordion__group > summary::marker { content: ""; }

.units-accordion__group > summary:hover { background: var(--color-bg); }

/* Chevron — rotates when the group is open. */
.units-accordion__group > summary::after {
  content: "";
  margin-left: auto;
  width: 9px;
  height: 9px;
  flex: none;
  border-right: 2px solid var(--color-text-muted);
  border-bottom: 2px solid var(--color-text-muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform 150ms ease;
}

.units-accordion__group[open] > summary::after {
  transform: rotate(225deg) translateY(-2px);
}

/* Unit rows — two-column table rhythm: code | name. */
.units-accordion__group > ul {
  list-style: none;
  margin: 0;
  padding: 0 var(--cds-spacing-06, 24px) 8px;
}

.units-accordion__group li {
  display: flex;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid var(--color-border);
  font-size: 0.98rem;
  line-height: 1.5;
  color: var(--color-text);
}

.units-accordion__code {
  font-family: var(--font-mono, ui-monospace, "SF Mono", Menlo, monospace);
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--color-blue);
  min-width: 120px;
  flex: none;
  padding-top: 2px;
}

@media (max-width: 640px) {
  .units-accordion__group > summary { padding: 16px 18px; font-size: 1rem; }
  .units-accordion__group > ul { padding: 0 18px 6px; }
  .units-accordion__group li { flex-direction: column; gap: 4px; padding: 12px 0; }
  .units-accordion__code { min-width: 0; padding-top: 0; }
}