/* =========================================================================
   UA EDU MAP: stylesheet
   -------------------------------------------------------------------------
   Built for a student audience: quick to scan on a phone, forgiving to tap,
   and a little more energetic than a standard corporate directory. The
   layout logic below is organised the way it renders on the page, top to
   bottom, so you can follow along with the HTML while reading this.
   ========================================================================= */

/* Reset box-sizing everywhere so padding/border never blow out a width
   we've carefully set. This is the one rule we want applying globally. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

:root {
  /* Brand colours. Navy is the "serious institution" anchor colour, gold
     is the accent that says "UA" everywhere else on our sites. */
  --navy: #1C1D19;        /* ink, taken from the logo mark */
  --navy-mid: #33352C;
  --gold: #F7AD37;        /* the logo gold, sampled */
  --gold-pale: #FDF4E2;

  /* Interactive colour. UA's brand pair is navy + gold, so links, focus
     rings and active states are gold rather than the old blue. Raw gold on
     white is only 2.25:1, so anything that carries meaning as TEXT uses the
     deepened --accent below; the bright --gold stays for fills, where navy
     text sits on it at 7.5:1. */
  --accent: #8A6A00;        /* deep gold: links, focus, active states (5.07:1 on white) */
  --accent-dark: #6B5200;   /* pressed / hover state */
  --gold-deep: #A67C00;     /* borders, rings, dividers (non-text, 3.8:1) */

  /* Surfaces. --surface-alt got a light cool tint instead of near-white,
     so cards and panels visually separate from the page background
     without needing an extra border everywhere. */
  --bg: #F5F2EB;
  --surface: #ffffff;
  --surface-alt: #F0EDE4;

  --border: rgba(28, 29, 25, 0.13);
  --border-strong: rgba(28, 29, 25, 0.26);

  /* Text colours. --text-3 was darkened from the original #888 to #6B6F76:
     at that lighter grey, small labels on white/--surface-alt backgrounds
     were sitting right at the WCAG AA contrast floor (~3.5:1). #6B6F76
     clears 4.5:1 against both white and --surface-alt, so section labels,
     captions and meta text stay legible instead of washing out. */
  --text: #1C1D19;
  --text-2: #4A4C44;
  --text-3: #686B60;

  /* Status colours reused across the accommodation/calculator pages. */
  --success: #17915F;
  --success-bg: #EAF9F1;
  --warn: #C0392B;
  --warn-bg: #FFF1EF;
  --amber: #E67E22;
  --amber-bg: #FEF3E7;

  /* Slightly larger radii than the old 12px/7px: rounder corners read as
     friendlier and less "corporate directory", which is what we want for
     a student-facing tool. */
  --radius: 3px;
  --radius-sm: 2px;

  /* Minimum comfortable tap target per standard mobile HCI guidance
     (Apple HIG / Material Design both recommend ~44–48px). We reference
     this in a few places instead of hard-coding "44px" repeatedly. */
  --tap-min: 44px;

  --font: 'Inter', system-ui, Arial, sans-serif;
  --font-display: 'Plus Jakarta Sans', 'Inter', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --line: rgba(28, 29, 25, 0.13);
}

/* Bumped from 14px to 15px base and a slightly taller line-height. Small
   text was reading dense on mobile; this alone makes body copy noticeably
   easier to scan without changing the layout grid. */
html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: var(--accent);
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}

h1, h2, h3, h4 {
  font-weight: 600;
  letter-spacing: -0.015em;
}

/* A visible focus ring matters as much as tap-target size for HCI,
   keyboard and switch-device users need to see where they are. We rely on
   :focus-visible so mouse clicks don't get a distracting outline. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
}


/* =========================================================================
   HEADER: sticky top bar with logo, brand name, primary nav
   ========================================================================= */

.header {
  background: var(--navy);
  color: #fff;
  padding: 1rem 1.25rem;
  position: sticky;
  top: 0;
  z-index: 300;
  /* Two shadows: a hairline highlight on top (so the bar reads as a
     distinct layer against the browser chrome) plus the actual drop
     shadow that separates it from scrolling content. */
  box-shadow:
    0 1px 0 rgba(255, 255, 255, 0.06),
    0 4px 22px rgba(0, 0, 0, 0.28);
}

.header-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.6rem;
}

/* Logo: a real image file (logo.png) sitting in a white rounded badge, next
   to the wordmark. Kept as a flex row so the badge, name and tagline stay
   vertically centred no matter how the header wraps on small screens. */
.logo {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  text-decoration: none;
  cursor: pointer;
  transition: opacity 0.15s;
}
.logo:hover {
  opacity: 0.85;
}

.logo-badge {
  width: 44px;
  height: 44px;
  background: #fff;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  overflow: hidden;
}
.logo-badge img {
  width: 38px;
  height: 38px;
  object-fit: contain;
}

.logo-name {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.01em;
}
.logo-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Nav buttons. Padding increased from the original 5px/11px so every tab
   clears the ~44px tap-target guideline on a touchscreen, the old size
   was really only comfortable with a mouse. */
.nav {
  display: flex;
  gap: 0.2rem;
  flex-wrap: wrap;
}
.nav-btn {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: rgba(255, 255, 255, 0.8);
  padding: 11px 16px;
  min-height: var(--tap-min);
  border-radius: 3px;
  cursor: pointer;
  font-size: 13px;
  font-family: var(--font);
  font-weight: 500;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
}
.nav-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}
.nav-btn.active {
  border-color: var(--gold);
  color: var(--gold);
  background: rgba(212, 167, 10, 0.12);
}


/* =========================================================================
   PAGE LAYOUT: one <section class="page"> shown at a time via JS
   ========================================================================= */

.page {
  display: none;
  max-width: 1000px;
  margin: 0 auto;
  padding: 1.4rem 1rem 4rem;
}
.page.active {
  display: block;
}

/* Small uppercase eyebrow used above groups of content. The little gold
   tick before it is a cheap way to echo the brand accent without adding
   another image asset. */
.section-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-3);
  margin-top: 1.6rem;
  margin-bottom: 0.7rem;
}
.section-label::before {
  content: '';
  width: 14px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
  flex-shrink: 0;
}


/* =========================================================================
   AD SLOTS: WhatsApp banner, scholarship banner, paid placeholder
   ========================================================================= */

.ad-wa,
.ad-scholar {
  color: #fff;
  padding: 0.95rem 1.35rem;
  border-radius: var(--radius);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 1.2rem;
  position: relative;
}
.ad-wa {
  background: #0E5F52;
}
.ad-scholar {
  background: var(--navy);
}

.ad-wa-left,
.ad-scholar-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.ad-wa-icon,
.ad-scholar-icon {
  width: 42px;
  height: 42px;
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 22px;
}
.ad-wa-icon {
  background: rgba(255, 255, 255, 0.15);
}
.ad-scholar-icon {
  background: var(--gold);
  font-size: 20px;
}

.ad-wa-tag,
.ad-scholar-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 2px;
}
.ad-wa-tag {
  color: rgba(255, 255, 255, 0.55);
}
.ad-scholar-tag {
  color: rgba(255, 255, 255, 0.45);
}

.ad-wa-title,
.ad-scholar-title {
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
}
.ad-wa-sub,
.ad-scholar-sub {
  font-size: 11px;
  margin-top: 2px;
}
.ad-wa-sub {
  color: rgba(255, 255, 255, 0.7);
}
.ad-scholar-sub {
  color: rgba(255, 255, 255, 0.65);
}

/* CTA buttons on the two banners above. Padding increased slightly so the
   whole label sits comfortably clear of a 44px-tall tap target. */
.ad-wa-cta,
.ad-scholar-cta {
  padding: 10px 18px;
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ad-wa-cta {
  background: #fff;
  color: #075E54;
}
.ad-wa-cta:hover {
  background: #f0f0f0;
  text-decoration: none;
}
.ad-scholar-cta {
  background: var(--gold);
  color: var(--navy);
}
.ad-scholar-cta:hover {
  background: #b8930a;
  text-decoration: none;
}

.ad-label {
  position: absolute;
  top: 7px;
  right: 9px;
  font-size: 9px;
  color: rgba(255, 255, 255, 0.4);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: rgba(0, 0, 0, 0.15);
  padding: 1px 5px;
  border-radius: 3px;
}

/* Paid ad slot: dashed border marks it as an open/unsold placement so it
   reads as "space available" rather than a broken component. */
.ad-paid-slot {
  background: var(--surface);
  border: 2px dashed #cfd3da;
  border-radius: var(--radius);
  padding: 1rem 1.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.5rem;
  position: relative;
}
.ad-paid-slot-left {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.ad-paid-icon {
  width: 40px;
  height: 40px;
  background: var(--bg);
  border-radius: 3px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: var(--text-3);
  flex-shrink: 0;
}
.ad-paid-tag {
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--text-3);
  font-weight: 700;
  margin-bottom: 2px;
}
.ad-paid-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-2);
}
.ad-paid-sub {
  font-size: 11px;
  color: var(--text-3);
}
.ad-paid-cta {
  background: var(--navy);
  color: #fff;
  padding: 10px 16px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}
.ad-paid-cta:hover {
  background: var(--navy-mid);
  text-decoration: none;
}
.ad-paid-label {
  position: absolute;
  top: 7px;
  right: 9px;
  font-size: 9px;
  color: var(--text-3);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  background: var(--bg);
  padding: 1px 5px;
  border-radius: 3px;
  border: 1px solid var(--border);
}


/* =========================================================================
   HERO: the big navy banner at the top of the Institutions page
   ========================================================================= */

.hero {
  color: #fff;
  padding: 2rem 1.75rem;
  border-radius: var(--radius);
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
  /* Three-stop gradient reads with a bit more depth than a flat fill, and
     the two soft circles behind the text give it some visual energy
     without competing with the copy. */
  background: var(--navy);
  box-shadow: 0 8px 28px rgba(13, 27, 62, 0.22);
}
.hero::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 220px;
  height: 220px;
  border-radius: 2px;
  background: rgba(212, 167, 10, 0.10);
  pointer-events: none;
}
.hero::after {
  content: '';
  position: absolute;
  bottom: -70px;
  left: -50px;
  width: 230px;
  height: 230px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.04);
  pointer-events: none;
}
.hero h1 {
  font-size: 23px;
  margin-bottom: 0.4rem;
  letter-spacing: -0.025em;
  position: relative;
  z-index: 1;
}
.hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  max-width: 480px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}
.hero-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 1;
}
.hero-stat .n {
  font-size: 26px;
  font-weight: 700;
  color: var(--gold);
  text-shadow: 0 2px 10px rgba(212, 167, 10, 0.3);
}
.hero-stat .l {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.5);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}


/* =========================================================================
   FIND TOOLS: search box, region filter, shortlist toggle
   (This sits right under the hero, so it's the first interactive thing a
   visitor's eye lands on after reading the headline.)
   ========================================================================= */

.find-tools {
  margin-bottom: 1.3rem;
}

.search-wrap {
  position: relative;
  display: flex;
  align-items: center;
  margin-bottom: 0.7rem;
}
.search-wrap > i {
  position: absolute;
  left: 14px;
  color: var(--text-3);
  font-size: 18px;
  pointer-events: none;
}
/* Search input is the single most important control on the page, so it
   gets generous vertical padding (comfortably above the 44px tap-target
   floor) and a focus ring that actually stands out. */
.search-wrap input {
  width: 100%;
  padding: 14px 44px 14px 42px;
  min-height: var(--tap-min);
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 14px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  outline: none;
  box-shadow: 0 1px 3px rgba(13, 27, 62, 0.05);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.search-wrap input:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}
.search-clear {
  position: absolute;
  right: 8px;
  background: var(--surface-alt);
  border: none;
  width: 32px;
  height: 32px;
  border-radius: 2px;
  cursor: pointer;
  color: var(--text-3);
  font-size: 13px;
  line-height: 1;
}
.search-clear:hover {
  background: #F0E7CE;
  color: var(--text);
}

.region-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.region-label {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-3);
}
.region-row select {
  padding: 9px 12px;
  min-height: 40px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 12px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  cursor: pointer;
}
.region-row select:focus {
  outline: none;
  border-color: var(--accent);
}

/* Shortlist ("heart") toggle in the filter row. */
.shortlist-toggle {
  margin-left: auto;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 10px 14px;
  min-height: 40px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-2);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
}
.shortlist-toggle:hover {
  border-color: var(--gold);
  color: #7a5f00;
}
.shortlist-toggle.active {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--navy);
}
.shortlist-toggle i {
  font-size: 14px;
}
.sl-count {
  background: var(--navy);
  color: #fff;
  border-radius: 3px;
  min-width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  padding: 0 5px;
}
.shortlist-toggle.active .sl-count {
  background: var(--navy);
  color: var(--gold);
}

.search-empty {
  text-align: center;
  padding: 2.5rem 1rem;
  color: var(--text-3);
  font-size: 13px;
}
.search-empty i {
  font-size: 34px;
  display: block;
  margin-bottom: 0.6rem;
  color: #CFC3A0;
}
.match-note {
  font-size: 11px;
  color: #7a5f00;
  background: var(--gold-pale);
  border-radius: 4px;
  padding: 2px 7px;
  display: inline-block;
  margin-top: 0.5rem;
}
.results-count {
  font-size: 12px;
  color: var(--text-3);
  margin-bottom: 0.9rem;
}


/* =========================================================================
   INSTITUTION CARDS: the <article class="inst-card"> grid
   ========================================================================= */

.inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(228px, 1fr));
  gap: 0.85rem;
}

/* The whole card is a click target ("show detail"), so it gets noticeably
   more internal padding than the old 1.05rem, and the extra room makes the
   card itself easier to aim for on a touchscreen and lets the heading
   breathe a bit more. */
.inst-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(13, 27, 62, 0.04);
  transition:
    transform 0.16s cubic-bezier(0.4, 0, 0.2, 1),
    box-shadow 0.16s,
    border-color 0.16s;
}
.inst-card:hover {
  border-color: var(--border-strong);
  box-shadow: 0 8px 22px rgba(13, 27, 62, 0.1);
  transform: translateY(-2px);
}
.inst-card.pub {
  border-top: 3px solid var(--navy);
}
.inst-card.priv {
  border-top: 3px solid var(--gold);
}
.inst-card.other {
  border-top: 3px solid #999;
}

.type-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.55rem;
}
.tb-pub {
  background: #E7EAF2;
  color: var(--navy);
}
.tb-priv {
  background: var(--gold-pale);
  color: #7a5f00;
}
.tb-other {
  background: #efefef;
  color: #555;
}

.inst-card h3 {
  font-size: 13px;
  font-weight: 600;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.inst-card .abbr {
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 0.6rem;
}
.inst-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-2);
  margin-bottom: 3px;
}
.inst-meta i {
  font-size: 13px;
  color: #BDAE86;
}

/* Heart / shortlist button sitting on top of each card. Enlarged from the
   old 18px icon in ~24px of tappable padding up to a proper 36px hit area,
   which is the difference between "occasionally mis-tapped" and "reliable
   on a phone". event.stopPropagation() in the markup keeps it from also
   triggering the card's own click-through. */
.card-heart {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: #CFC3A0;
  font-size: 18px;
  line-height: 1;
  z-index: 2;
  transition: color 0.15s, transform 0.15s;
}
.card-heart:hover {
  color: var(--gold);
  transform: scale(1.15);
}
.card-heart.on {
  color: var(--gold);
}


/* =========================================================================
   INSTITUTION DETAIL PAGE
   ========================================================================= */

.detail-back {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--accent);
  cursor: pointer;
  margin-bottom: 1rem;
  background: none;
  border: none;
  padding: 8px 0;
  font-family: var(--font);
  font-weight: 500;
}
.detail-back:hover {
  text-decoration: underline;
}

.detail-header {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: 0.85rem;
}
.detail-header h2 {
  font-size: 19px;
  margin-bottom: 0.2rem;
}
.detail-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.8rem;
}
.detail-item label {
  display: block;
  font-size: 9px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-3);
  margin-bottom: 1px;
}
.detail-item span,
.detail-item a {
  font-size: 13px;
}

.campus-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 0.6rem;
  margin-top: 0.6rem;
}
.campus-pill {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 0.65rem 0.85rem;
}
.campus-pill i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
  color: var(--gold);
}
.c-name {
  font-size: 12px;
  font-weight: 600;
}
.c-loc {
  font-size: 11px;
  color: var(--text-3);
}

.prog-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.6rem;
}
.prog-tag {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 4px 9px;
  font-size: 11px;
  color: var(--text-2);
}

.go-calc-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 1rem;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 12px 18px;
  min-height: var(--tap-min);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.go-calc-btn:hover {
  background: var(--navy-mid);
}


/* =========================================================================
   CAMPUS MAP PAGE
   ========================================================================= */

.map-container {
  height: 500px;
  overflow: hidden;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: 0 2px 14px rgba(13, 27, 62, 0.08);
  margin-bottom: 0.85rem;
}
#gmap {
  width: 100%;
  height: 100%;
}

.filter-row {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 0.85rem;
}
/* Filter chips: padding widened so each chip is a full tap target rather
   than a thin sliver of text. */
.filter-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 9px 15px;
  min-height: 40px;
  cursor: pointer;
  font-size: 11.5px;
  font-weight: 600;
  font-family: var(--font);
  color: var(--text-2);
  transition: all 0.15s;
}
.filter-btn:hover,
.filter-btn.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.filter-btn.filter-accom {
  border-color: #E9B583;
  color: #B4661F;
}
.filter-btn.filter-accom i {
  margin-right: 2px;
  font-size: 13px;
  vertical-align: -2px;
}
.filter-btn.filter-accom:hover,
.filter-btn.filter-accom.active {
  background: var(--amber);
  border-color: var(--amber);
  color: #fff;
}

.map-legend {
  display: flex;
  gap: 0.9rem;
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: 0.75rem;
}
.map-legend-item {
  display: flex;
  align-items: center;
  gap: 0.35rem;
  font-size: 11px;
  color: var(--text-2);
}
.legend-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 1.5px solid rgba(0, 0, 0, 0.1);
}

.accom-note {
  display: flex;
  gap: 0.7rem;
  align-items: flex-start;
  background: var(--amber-bg);
  border: 1px solid #F5D5B8;
  border-left: 3px solid var(--amber);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
  margin-top: 0.9rem;
  font-size: 12px;
  color: #7a4410;
  line-height: 1.65;
}
.accom-note i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 18px;
  color: var(--amber);
}
.accom-note strong {
  color: #6b3a0d;
}


/* =========================================================================
   POINTS CALCULATOR PAGE
   ========================================================================= */

.calc-free-notice {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: var(--success-bg);
  border: 1px solid #A8DFC8;
  border-left: 3px solid var(--success);
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
}
.calc-free-notice i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 18px;
  color: var(--success);
}
.calc-free-notice p {
  margin: 0;
  font-size: 12px;
  color: #14614a;
  line-height: 1.6;
}
.calc-free-notice a {
  color: #14614a;
  font-weight: 700;
}

.calc-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
/* The institution tabs (UNAM / NUST / IUM / Triumphant) switch an entire
   panel of content, so getting the tap right matters. Padding went from
   6px/14px to a proper 13px/22px, which is the single biggest touch-target
   fix on the page, since these tabs sit right where a thumb naturally
   rests when scrolling. */
.calc-tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 13px 22px;
  min-height: var(--tap-min);
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  font-family: var(--font);
  transition: all 0.15s;
}
.calc-tab:hover {
  border-color: var(--border-strong);
}
.calc-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}

.calc-box {
  display: none;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  box-shadow: 0 1px 3px rgba(13, 27, 62, 0.05);
}
.calc-box.active {
  display: block;
}
.calc-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 1rem;
  padding: 0.65rem 0.9rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
  border-left: 3px solid var(--gold);
}

.subjects-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.subj-row {
  display: grid;
  grid-template-columns: 1fr 155px 120px;
  gap: 0.4rem;
  align-items: center;
}
.subj-row label {
  font-size: 12px;
  font-weight: 500;
  color: var(--text-2);
}
/* Grade dropdowns get a touch more vertical padding so the whole row is
   easier to tap accurately, matching the "Select" placeholder text we use
   instead of a bare dash while no grade has been chosen yet. */
.subj-row select {
  width: 100%;
  padding: 8px 8px;
  min-height: 38px;
  border: 1px solid var(--border);
  border-radius: 3px;
  font-size: 11px;
  font-family: var(--font);
  background: var(--surface);
  color: var(--text);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.subj-row select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(30, 136, 229, 0.15);
}

.pts-result {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.65rem;
  color: #fff;
  border-radius: var(--radius-sm);
  padding: 1.1rem 1.35rem;
  margin-top: 1rem;
  background: var(--navy);
  box-shadow: 0 4px 18px rgba(13, 27, 62, 0.2);
}
.pts-total {
  font-size: 40px;
  font-weight: 700;
  line-height: 1;
  color: var(--gold);
  text-shadow: 0 2px 12px rgba(212, 167, 10, 0.35);
}
.pts-label {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.55);
  margin-top: 3px;
}
.verdict-text {
  font-size: 13px;
  font-weight: 600;
  text-align: right;
}
.verdict-sub {
  font-size: 11px;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 2px;
  text-align: right;
}

.thresholds {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.threshold-card {
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.7rem 0.85rem;
  transition: border-color 0.15s, background 0.15s;
}
.t-prog {
  font-size: 11px;
  font-weight: 600;
  margin-bottom: 2px;
  line-height: 1.3;
}
.t-pts {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
}
.t-note {
  font-size: 10px;
  color: var(--text-3);
}
.threshold-card.met {
  background: var(--success-bg);
  border-color: var(--success);
}
.threshold-card.met .t-pts {
  color: var(--success);
}

.calc-disclaimer {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.65;
  margin-top: 0.85rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}


/* =========================================================================
   ACCOMMODATION PAGE
   ========================================================================= */

.accom-hero {
  color: #fff;
  border-radius: var(--radius);
  padding: 1.9rem 1.75rem;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
  background: #B4661F;
  box-shadow: 0 8px 26px rgba(180, 102, 31, 0.22);
}
.accom-hero::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 200px;
  height: 200px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.1);
  pointer-events: none;
}
.accom-hero h2 {
  font-size: 21px;
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}
.accom-hero p {
  color: rgba(255, 255, 255, 0.88);
  font-size: 13px;
  max-width: 500px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.accom-warning {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
  background: var(--warn-bg);
  border: 1px solid #F3C4BC;
  border-left: 3px solid var(--warn);
  border-radius: var(--radius-sm);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.2rem;
  font-size: 12.5px;
  color: #7a2a1e;
  line-height: 1.7;
}
.accom-warning i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 20px;
  color: var(--warn);
}
.accom-warning strong {
  color: #5c1f16;
}

.accom-filters {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-bottom: 1rem;
}
.accom-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(270px, 1fr));
  gap: 0.85rem;
}
.accom-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-top: 3px solid var(--amber);
  border-radius: var(--radius);
  padding: 1.2rem;
  box-shadow: 0 1px 3px rgba(13, 27, 62, 0.04);
  transition: transform 0.16s, box-shadow 0.16s;
}
.accom-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13, 27, 62, 0.09);
}
.accom-card.type-campus {
  border-top-color: var(--navy);
}
.accom-card.type-shortstay {
  border-top-color: #888;
}
.accom-type {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.55rem;
  background: #FDEEE0;
  color: #B4661F;
}
.accom-type.campus {
  background: #E7EAF2;
  color: var(--navy);
}
.accom-type.shortstay {
  background: #efefef;
  color: #555;
}
.accom-card h4 {
  font-size: 14px;
  font-weight: 600;
  margin-bottom: 0.2rem;
  line-height: 1.3;
}
.accom-area {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--text-3);
  margin-bottom: 0.5rem;
}
.accom-near {
  font-size: 11.5px;
  color: var(--text-2);
  margin-bottom: 0.5rem;
}
.accom-near strong {
  color: var(--navy);
}
.accom-desc {
  font-size: 12px;
  color: var(--text-2);
  line-height: 1.65;
  margin-bottom: 0.9rem;
}
.accom-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
/* Directions / call buttons: padding widened for touch, same treatment
   as every other primary action button on the page. */
.accom-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  padding: 10px 14px;
  min-height: 40px;
  border-radius: 3px;
  text-decoration: none;
  transition: all 0.15s;
}
.accom-btn-map {
  background: var(--navy);
  color: #fff;
}
.accom-btn-map:hover {
  background: var(--navy-mid);
  text-decoration: none;
}
.accom-btn-call {
  background: var(--surface-alt);
  color: var(--text-2);
  border: 1px solid var(--border);
}
.accom-btn-call:hover {
  background: #F0E7CE;
  text-decoration: none;
}


/* =========================================================================
   PARTNER ("LIST YOUR INSTITUTION") PAGE
   ========================================================================= */

.partner-hero {
  color: #fff;
  border-radius: var(--radius);
  padding: 2rem 1.75rem;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.partner-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 2px;
  background: rgba(212, 167, 10, 0.12);
  pointer-events: none;
}
.partner-hero h2 {
  font-size: 21px;
  margin-bottom: 0.4rem;
  position: relative;
  z-index: 1;
}
.partner-hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  max-width: 500px;
  line-height: 1.65;
  position: relative;
  z-index: 1;
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(218px, 1fr));
  gap: 0.85rem;
}
.tier-card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.3rem;
  transition: transform 0.16s, box-shadow 0.16s;
}
.tier-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(13, 27, 62, 0.09);
}
.tier-card.featured {
  border-color: var(--gold);
  border-width: 1.5px;
  box-shadow: 0 4px 20px rgba(212, 167, 10, 0.15);
}
.tier-badge {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  padding: 2px 7px;
  border-radius: 4px;
  display: inline-block;
  margin-bottom: 0.6rem;
}
.tier-free {
  background: #E7EAF2;
  color: var(--navy);
}
.tier-feat {
  background: var(--gold-pale);
  color: #7a5f00;
}
.tier-prem {
  background: var(--navy);
  color: var(--gold);
}
.tier-card h3 {
  font-size: 15px;
  font-weight: 700;
  margin-bottom: 0.2rem;
}
.tier-price {
  font-size: 20px;
  font-weight: 700;
  color: var(--navy);
  margin: 0.45rem 0 0.8rem;
}
.tier-price span {
  font-size: 12px;
  font-weight: 400;
  color: var(--text-3);
}
.tier-features {
  list-style: none;
  margin-bottom: 1rem;
}
.tier-features li {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 12px;
  color: var(--text-2);
  padding: 6px 0;
  border-bottom: 1px solid var(--border);
}
.tier-features li:last-child {
  border-bottom: none;
}
.tier-features li i {
  flex-shrink: 0;
  margin-top: 1px;
  font-size: 14px;
}
/* Tier CTAs: padding grew from 8px to a full 13px so each button clears the
   44px tap-target guideline, matching the primary action buttons above. */
.tier-cta {
  display: block;
  text-align: center;
  padding: 13px 8px;
  min-height: var(--tap-min);
  border-radius: 3px;
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  transition: all 0.15s;
}
.tier-cta-outline {
  border: 1.5px solid var(--navy);
  color: var(--navy);
}
.tier-cta-outline:hover {
  background: var(--navy);
  color: #fff;
  text-decoration: none;
}
.tier-cta-gold {
  background: var(--gold);
  color: var(--navy);
}
.tier-cta-gold:hover {
  background: #b8930a;
  text-decoration: none;
}
.tier-cta-navy {
  background: var(--navy);
  color: #fff;
}
.tier-cta-navy:hover {
  background: var(--navy-mid);
  text-decoration: none;
}
.featured-tag {
  position: absolute;
  top: -1px;
  right: 16px;
  background: var(--gold);
  color: var(--navy);
  font-size: 9px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 0 0 5px 5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Shared card style used for the free-form info blocks on the Partner and
   About pages (reach stats, "what happens next", org overview, etc). */
.info-block,
.about-block {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.35rem;
  margin-bottom: 0.85rem;
  box-shadow: 0 1px 3px rgba(13, 27, 62, 0.04);
}
.info-block h3,
.about-block h3 {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 15px;
  font-weight: 600;
  margin-bottom: 0.7rem;
}
.info-block h3 i,
.about-block h3 i {
  color: var(--gold);
  font-size: 18px;
}
.info-block p,
.info-block li,
.about-block p {
  font-size: 13px;
  color: var(--text-2);
  line-height: 1.7;
}
.info-block ul {
  padding-left: 1.2rem;
  margin-top: 0.4rem;
}
.info-block li {
  margin-bottom: 0.3rem;
}

.reach-stats {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(125px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.reach-stat {
  text-align: center;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.8rem 1rem;
}
.reach-stat .rn {
  font-size: 22px;
  font-weight: 700;
  color: var(--navy);
}
.reach-stat .rl {
  font-size: 11px;
  color: var(--text-3);
  margin-top: 2px;
}

.enquire-box {
  color: #fff;
  text-align: center;
  border-radius: var(--radius);
  padding: 1.5rem 1.75rem;
  margin-top: 1.2rem;
  background: var(--navy);
}
.enquire-box h3 {
  font-size: 17px;
  margin-bottom: 0.4rem;
}
.enquire-box p {
  font-size: 13px;
  color: rgba(255, 255, 255, 0.7);
  margin-bottom: 1rem;
}
/* Main call-to-action on the partner page: generous padding, since this is
   the single most important tap on the whole page. */
.enquire-email {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--gold);
  color: var(--navy);
  padding: 14px 26px;
  min-height: var(--tap-min);
  border-radius: var(--radius-sm);
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
}
.enquire-email:hover {
  background: #b8930a;
  text-decoration: none;
}


/* =========================================================================
   ABOUT PAGE
   ========================================================================= */

.ua-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--navy);
  color: #fff;
  padding: 5px 12px;
  border-radius: 3px;
  font-size: 11px;
  font-weight: 600;
  margin-top: 0.8rem;
}
.ua-badge .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--gold);
}


/* =========================================================================
   ASK UA CHATBOT PAGE + FLOATING CHAT BUBBLE
   ========================================================================= */

.chat-hero {
  color: #fff;
  border-radius: var(--radius);
  padding: 1.75rem;
  margin-bottom: 1.2rem;
  position: relative;
  overflow: hidden;
  background: var(--navy);
}
.chat-hero::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  border-radius: 2px;
  background: rgba(212, 167, 10, 0.12);
  pointer-events: none;
}
.chat-hero h2 {
  font-size: 20px;
  margin-bottom: 0.35rem;
  position: relative;
  z-index: 1;
}
.chat-hero p {
  color: rgba(255, 255, 255, 0.7);
  font-size: 13px;
  max-width: 520px;
  line-height: 1.6;
  position: relative;
  z-index: 1;
}

.chat-window {
  display: flex;
  flex-direction: column;
  height: 520px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.chat-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding: 1.1rem;
  background: var(--surface-alt);
}
.chat-msg {
  max-width: 80%;
  padding: 0.6rem 0.85rem;
  border-radius: 3px;
  font-size: 13px;
  line-height: 1.55;
}
.chat-msg.bot {
  align-self: flex-start;
  background: var(--surface);
  border: 1px solid var(--border);
  border-bottom-left-radius: 3px;
  color: var(--text);
}
.chat-msg.user {
  align-self: flex-end;
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.chat-msg.bot strong {
  color: var(--navy);
}
.chat-msg a {
  color: var(--accent);
  font-weight: 600;
}

.chat-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding: 0 1.1rem 0.9rem;
  background: var(--surface-alt);
}
.chat-suggest-btn {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  font-family: var(--font);
  transition: all 0.15s;
}
.chat-suggest-btn:hover {
  background: var(--gold-pale);
  border-color: var(--gold);
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.85rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.chat-input-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 11px 16px;
  font-size: 13px;
  font-family: var(--font);
  outline: none;
}
.chat-input-row input:focus {
  border-color: var(--accent);
}
.chat-input-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 16px;
}
.chat-input-row button:hover {
  background: var(--navy-mid);
}

.chat-disclaimer-bar {
  font-size: 11px;
  color: var(--text-3);
  line-height: 1.6;
  margin-top: 0.7rem;
  padding: 0.6rem 0.8rem;
  background: var(--surface-alt);
  border-radius: var(--radius-sm);
}

/* Floating chat bubble, shown on every page. Slightly gradient-filled and
   with a stronger shadow so it clearly floats above the page content. */
.fab-chat {
  position: fixed;
  bottom: 22px;
  right: 22px;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 24px;
  cursor: pointer;
  border: none;
  box-shadow: 0 6px 22px rgba(13, 27, 62, 0.4);
  transition: transform 0.15s;
  z-index: 500;
}
.fab-chat:hover {
  transform: scale(1.07);
}
.fab-chat.hidden {
  display: none;
}

.fab-panel {
  position: fixed;
  bottom: 90px;
  right: 22px;
  width: 340px;
  max-width: calc(100vw - 32px);
  height: 440px;
  display: none;
  flex-direction: column;
  overflow: hidden;
  background: var(--surface);
  border-radius: 3px;
  box-shadow: 0 12px 44px rgba(13, 27, 62, 0.28);
  z-index: 500;
}
.fab-panel.open {
  display: flex;
}
.fab-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--navy);
  color: #fff;
  padding: 0.85rem 1rem;
}
.fab-panel-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.fab-panel-header-left .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3DDC97;
}
.fab-panel-title {
  font-size: 13px;
  font-weight: 700;
}
.fab-panel-sub {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.55);
}
.fab-close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.7);
  font-size: 18px;
  line-height: 1;
  padding: 2px;
  cursor: pointer;
}
.fab-close:hover {
  color: #fff;
}
.fab-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  padding: 0.85rem;
  background: var(--surface-alt);
}
.fab-suggest-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  padding: 0 0.85rem 0.7rem;
  background: var(--surface-alt);
}
.fab-input-row {
  display: flex;
  gap: 0.4rem;
  padding: 0.65rem;
  border-top: 1px solid var(--border);
  background: var(--surface);
}
.fab-input-row input {
  flex: 1;
  border: 1px solid var(--border);
  border-radius: 3px;
  padding: 9px 14px;
  font-size: 12px;
  font-family: var(--font);
  outline: none;
}
.fab-input-row input:focus {
  border-color: var(--accent);
}
.fab-input-row button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 2px;
  cursor: pointer;
  flex-shrink: 0;
  font-size: 14px;
}


/* =========================================================================
   FOOTER
   ========================================================================= */

.footer {
  text-align: center;
  background: var(--navy);
  color: rgba(255, 255, 255, 0.5);
  padding: 1.75rem 1.25rem;
  font-size: 11px;
  line-height: 1.9;
  margin-top: 2.5rem;
}
.footer-mark {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.footer-mark img {
  width: 34px;
  height: 34px;
  object-fit: contain;
  background: #fff;
  border-radius: 3px;
  padding: 3px;
}
.footer-mark-text {
  font-size: 13px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.01em;
}
.footer-tagline {
  font-size: 11px;
  font-style: italic;
  color: var(--gold);
  margin-bottom: 0.5rem;
}
.footer a {
  color: rgba(255, 255, 255, 0.6);
}
.footer strong {
  color: var(--gold);
}


/* =========================================================================
   RESPONSIVE: small-screen adjustments
   (kept together at the end so it's obvious these are overrides, not the
   base rules for each component)
   ========================================================================= */

@media (max-width: 600px) {
  .hero h1 {
    font-size: 19px;
  }
  .detail-cols {
    grid-template-columns: 1fr;
  }
  .subj-row {
    grid-template-columns: 1fr 120px 90px;
  }
  .pts-result {
    flex-direction: column;
    gap: 0.5rem;
  }
  .verdict-text,
  .verdict-sub {
    text-align: left;
  }
  .map-container {
    height: 340px;
  }
  .ad-wa,
  .ad-scholar,
  .ad-paid-slot {
    flex-direction: column;
    align-items: flex-start;
  }
  .shortlist-toggle {
    margin-left: 0;
  }
  .accom-grid {
    grid-template-columns: 1fr;
  }
  .fab-panel {
    right: 12px;
    bottom: 80px;
    width: calc(100vw - 24px);
    height: 60vh;
  }
  .fab-chat {
    right: 14px;
    bottom: 14px;
  }
  .chat-window {
    height: 440px;
  }
}

/* =========================================================================
   v2 REFINEMENTS (Sept 2026)
   Appended deliberately at the end so every rule here overrides the base
   styles above without editing them. Grouped by what it fixes.
   ========================================================================= */

:root {
  --shadow-sm: 0 1px 2px rgba(13, 27, 62, .06), 0 1px 3px rgba(13, 27, 62, .05);
  --shadow-md: 0 4px 14px rgba(13, 27, 62, .09);
  --shadow-lg: 0 14px 34px rgba(13, 27, 62, .14);
  --header-h: 66px;
  --ring: 0 0 0 3px rgba(212, 167, 10, .45);
}

/* Respect users who ask the OS to reduce motion. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    transition-duration: .001ms !important;
  }
}

/* Skip link: first thing a keyboard/screen-reader user hits. */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--gold);
  color: var(--navy);
  font-weight: 700;
  padding: .7rem 1.1rem;
  border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
  left: 0;
  text-decoration: none;
}

.visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}



/* ── HEADER / NAV ─────────────────────────────────────────────────────────
   The old version put six tabs in a horizontally-scrolling rail, so on a
   phone you had to swipe sideways to discover half the site. Now:
     ≥ 1040px  all six links sit in a row
     640–1040  the links wrap onto two tidy centred rows, no scrolling
     < 640px   a Menu button opens a full-width stacked panel
   Nothing is ever hidden behind a horizontal scroll. */
.header {
  padding: .7rem 1.25rem;
  background: var(--navy);
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
}
.nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .3rem;
  overflow: visible;
}
.nav-btn {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: .45rem .85rem;
  border-radius: 2px;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  text-decoration: none;
  transition: background .18s ease, color .18s ease;
}
.nav-btn:hover { text-decoration: none; }
.nav-btn.active {
  box-shadow: 0 2px 10px rgba(212, 167, 10, .35);
}
.nav-toggle {
  display: none;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap-min);
  padding: .5rem .9rem;
  border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .28);
  background: rgba(255, 255, 255, .08);
  color: #fff;
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
}
.nav-toggle:hover { background: rgba(255, 255, 255, .16); }
.nav-toggle i { font-size: 17px; }

@media (max-width: 1040px) {
  .header-inner { justify-content: center; }
  .nav { justify-content: center; width: 100%; }
}

@media (max-width: 640px) {
  .header-inner { flex-wrap: wrap; justify-content: space-between; align-items: center; }
  .nav-toggle { display: inline-flex; }
  .nav {
    display: none;
    width: 100%;
    flex-direction: column;
    gap: .15rem;
    padding-top: .6rem;
    margin-top: .55rem;
    border-top: 1px solid rgba(255, 255, 255, .14);
  }
  .nav.open { display: flex; }
  .nav-btn {
    width: 100%;
    justify-content: flex-start;
    border-radius: var(--radius-sm);
    min-height: var(--tap-min);
    font-size: 14px;
  }
  .logo-sub { display: none; }
}

/* ── SEARCH / FILTER TOOLBAR ─────────────────────────────────────────────
   Sticks just under the header so the search box is always reachable while
   scrolling a long list of institutions. */
.find-tools {
  position: sticky;
  top: calc(var(--header-h) - 2px);
  z-index: 200;
  background: var(--bg);
  padding: .75rem 0 .85rem;
  margin-bottom: .2rem;
}
.find-tools::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 1px;
  background: var(--border);
}
.search-wrap input {
  min-height: var(--tap-min);
  box-shadow: var(--shadow-sm);
  transition: box-shadow .18s ease, border-color .18s ease;
}
.search-wrap input:focus {
  box-shadow: var(--ring);
}
.search-clear {
  display: none;
  align-items: center;
  justify-content: center;
  width: 30px; height: 30px;
  border-radius: 2px;
}
.region-row select,
.shortlist-toggle {
  min-height: var(--tap-min);
}
.shortlist-toggle {
  transition: background .18s ease, color .18s ease, border-color .18s ease;
}
.shortlist-toggle.active {
  box-shadow: var(--shadow-sm);
}
/* Small pop when something is added to the shortlist. */
@keyframes slpop { 0% { transform: scale(1); } 45% { transform: scale(1.35); } 100% { transform: scale(1); } }
.sl-count.bump { animation: slpop .32s ease; }

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .6rem;
  flex-wrap: wrap;
  margin: .9rem 0 .55rem;
}
.results-reset {
  background: none;
  border: 1px solid var(--border-strong);
  border-radius: 2px;
  color: var(--text-2);
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  padding: .35rem .8rem;
  min-height: 34px;
  cursor: pointer;
}
.results-reset:hover { background: var(--surface-alt); color: var(--navy); }

/* ── INSTITUTION CARDS ───────────────────────────────────────────────────
   Cards are now real buttons for assistive tech (role + tabindex set in the
   markup), so they need a visible keyboard state, not just a hover state. */
.inst-card {
  position: relative;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.inst-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.inst-card:active { transform: translateY(-1px); }
.inst-card:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  transform: translateY(-3px);
}
.inst-card h3 { padding-right: 2.6rem; }

.card-heart {
  width: var(--tap-min);
  height: var(--tap-min);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 2px;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}
.card-heart:hover { transform: scale(1.08); }
.card-heart.on {
  color: #E0245E;
  background: rgba(224, 36, 94, .10);
}

/* A shortlisted card gets a quiet gold edge so it reads as "saved" even
   before you look at the heart. */
.inst-card.saved {
  border-color: rgba(212, 167, 10, .55);
  box-shadow: 0 0 0 1px rgba(212, 167, 10, .3), var(--shadow-sm);
}

.match-note {
  background: var(--gold-pale);
  border-left: 3px solid var(--gold);
  padding: .45rem .6rem;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}
.match-note mark {
  background: rgba(212, 167, 10, .38);
  color: inherit;
  border-radius: 3px;
  padding: 0 2px;
}

/* ── DETAIL VIEW ─────────────────────────────────────────────────────────*/
.detail-back {
  min-height: var(--tap-min);
  position: sticky;
  top: calc(var(--header-h) + 4px);
  z-index: 150;
  box-shadow: var(--shadow-sm);
}
.detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  margin: .9rem 0 .2rem;
}
.detail-action {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  min-height: var(--tap-min);
  padding: .55rem 1rem;
  border-radius: 2px;
  border: 1px solid var(--border-strong);
  background: var(--surface);
  color: var(--navy);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  text-decoration: none;
}
.detail-action:hover { background: var(--surface-alt); text-decoration: none; }
.detail-action.on {
  background: var(--gold-pale);
  border-color: var(--gold);
}

/* ── MAP ─────────────────────────────────────────────────────────────────*/
.map-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  height: 100%;
  color: var(--text-3);
  text-align: center;
  padding: 1.2rem;
}
.map-state i { font-size: 38px; }
.map-state button {
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  min-height: var(--tap-min);
  padding: .5rem 1.1rem;
  border-radius: 2px;
  border: 0;
  background: var(--navy);
  color: #fff;
  cursor: pointer;
}
@keyframes spin { to { transform: rotate(360deg); } }
.map-spinner {
  width: 26px; height: 26px;
  border: 3px solid var(--border-strong);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin .9s linear infinite;
}
.filter-btn { min-height: 38px; }

/* ── TOAST ───────────────────────────────────────────────────────────────*/
.toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translate(-50%, 18px);
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 600;
  padding: .65rem 1.1rem;
  border-radius: 2px;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  z-index: 500;
  max-width: calc(100vw - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ── FOOTER ──────────────────────────────────────────────────────────────*/
.site-footer {
  margin-top: 2.4rem;
  padding: 1.6rem 1.25rem 2.4rem;
  background: var(--navy);
  color: rgba(255, 255, 255, .78);
  font-size: 13px;
}
.site-footer-inner {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  gap: 1.1rem;
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.site-footer h4 {
  color: #fff;
  font-size: 13px;
  margin-bottom: .45rem;
}
.site-footer a { color: var(--gold); }
.site-footer nav a { display: block; padding: .18rem 0; }
.site-footer-base {
  max-width: 1000px;
  margin: 1.3rem auto 0;
  padding-top: 1rem;
  border-top: 1px solid rgba(255, 255, 255, .12);
  font-size: 11.5px;
  color: rgba(255, 255, 255, .6);
  line-height: 1.7;
}

/* Campus pills are now links straight to Google Maps directions. */
a.campus-pill {
  color: inherit;
  text-decoration: none;
  transition: background .16s ease, border-color .16s ease, transform .16s ease;
}
a.campus-pill:hover {
  text-decoration: none;
  background: var(--surface-alt);
  border-color: var(--border-strong);
  transform: translateY(-1px);
}
a.campus-pill::after {
  content: "\ea9c";           /* tabler external-link glyph */
  font-family: "tabler-icons";
  margin-left: auto;
  font-size: 13px;
  color: var(--text-3);
}

/* type="search" gives iOS/Chrome their own clear button on top of ours. */
.search-wrap input[type="search"]::-webkit-search-decoration,
.search-wrap input[type="search"]::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
}

/* Keep the floating chat button clear of the toast on small screens. */
@media (max-width: 600px) {
  .toast { bottom: 84px; }
}


/* ── CARDS AS LINKS ──────────────────────────────────────────────────────
   Each institution has its own page, so the card title is a real <a>. The
   whole card is still clickable (JS), but the crawlable link is the title. */
.inst-card h3 a {
  color: var(--navy);
  text-decoration: none;
}
.inst-card h3 a:hover { text-decoration: underline; }
.inst-card { cursor: pointer; }

.logo, .logo:hover { text-decoration: none; color: inherit; }

/* Institution pages lead with an <h1>, not the <h2> the old in-page panel
   used, so it needs the same treatment. */
.detail-header h1 {
  font-size: 21px;
  line-height: 1.3;
  margin-bottom: 0.25rem;
}
@media (max-width: 600px) { .detail-header h1 { font-size: 19px; } }

/* ── BREADCRUMBS ─────────────────────────────────────────────────────────*/
.crumbs {
  font-size: 12px;
  color: var(--text-3);
  padding: .9rem 0 .2rem;
}
.crumbs a { color: var(--text-2); }
.crumbs span { margin: 0 .35rem; color: var(--border-strong); }

/* ── RELATED LINKS (internal linking for crawlers and for humans) ────────*/
.related {
  margin-top: 1.6rem;
  padding: 1.1rem 1.2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}
.related h3 { font-size: 14px; margin-bottom: .6rem; }
.related ul { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; }
.related a {
  display: inline-block;
  padding: .4rem .8rem;
  border-radius: 2px;
  background: var(--surface-alt);
  border: 1px solid var(--border);
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.related a:hover { border-color: var(--gold-deep); text-decoration: none; }


/* ═════════════════════════════════════════════════════════════════════════
   SLEEK PASS
   Hairlines instead of shadows, 3px corners instead of 14px, a continuous
   border-grid instead of floating tiles, and exactly one glossy surface.
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* The shadow scale is retired. Depth now comes from 1px lines, which is
     what makes a dense interface read as precise rather than plasticky. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 16px 48px rgba(28, 29, 25, .16);
}

/* Kill every remaining drop shadow in one place rather than hunting them
   through the base stylesheet. */
.inst-card,
.hero,
.accom-card,
.tier-card,
.search-wrap input,
.detail-back,
.shortlist-toggle,
.nav-btn.active,
.threshold-card,
.related,
.info-block,
.about-block,
.calc-box,
.map-container {
  box-shadow: none;
}

body {
  font-feature-settings: "cv05" 1, "ss01" 1;
}

/* ── TYPE ────────────────────────────────────────────────────────────────
   Headings tighten up and pick up the display face; numeric metadata moves
   to mono because it IS data (counts, years), not because small mono text
   looks technical. */
h1, h2, h3, h4,
.hero h1,
.logo-name,
.pts-total,
.hero-stat .n {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}
h1, .hero h1 { font-weight: 800; }
h2, h3, h4 { font-weight: 700; }

.abbr,
.hero-stat .n,
.pts-total,
.t-pts,
.results-count,
.crumbs {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
}
.abbr {
  font-size: 11px;
  letter-spacing: -0.01em;
  color: var(--text-3);
}

/* Sentence case with a rule that runs to the edge of the column: the label
   marks where a section starts without shouting it in tracked-out caps. */
.section-label {
  font-size: 12.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: -0.01em;
  color: var(--text-2);
  margin-top: 2.1rem;
  margin-bottom: 0.8rem;
}
.section-label::before {
  width: 3px;
  height: 13px;
  border-radius: 0;
  background: var(--gold);
}
.section-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--line);
}

/* ── HEADER ──────────────────────────────────────────────────────────────
   Flat ink with a single specular line along the top edge. That 1px is the
   only "gloss" on the page. */
.header {
  background: var(--navy);
  border-bottom: 1px solid rgba(255, 255, 255, .10);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .13);
}
.logo-badge {
  border-radius: 2px;
  background: var(--paper, #FFFCF7);
}
.logo-name { font-size: 16px; }
.logo-sub {
  font-family: var(--font-mono);
  font-size: 9.5px;
  letter-spacing: .04em;
  text-transform: none;
}
.nav-btn {
  border-radius: 2px;
  border-color: rgba(255, 255, 255, .14);
  font-weight: 500;
}
.nav-btn.active {
  background: var(--gold);
  color: #1C1D19;
  border-color: var(--gold);
  font-weight: 600;
}
.nav-toggle { border-radius: 2px; }

/* ── HERO ────────────────────────────────────────────────────────────────
   The decorative blobs are gone. What's left is a flat ink panel with a
   faint sheen from the top-left, a tight headline, and the three counts set
   in mono and separated by hairlines so they read as a data strip. */
.hero::before,
.hero::after,
.accom-hero::before,
.partner-hero::before,
.chat-hero::before {
  display: none;
}
.hero {
  background: var(--navy);
  background-image: linear-gradient(168deg, rgba(255, 255, 255, .055) 0%, rgba(255, 255, 255, 0) 42%);
  border-radius: 3px;
  padding: 2.4rem 2rem 2.1rem;
}
.hero h1 {
  font-size: clamp(26px, 4.4vw, 40px);
  line-height: 1.08;
  max-width: 17ch;
}
.hero p {
  max-width: 54ch;
  color: rgba(255, 255, 255, .72);
}
.hero-stats {
  gap: 0;
  margin-top: 1.7rem;
  border-top: 1px solid rgba(255, 255, 255, .14);
  padding-top: 1.1rem;
}
.hero-stat {
  padding-right: 1.9rem;
  margin-right: 1.9rem;
  border-right: 1px solid rgba(255, 255, 255, .14);
}
.hero-stat:last-child { border-right: 0; margin-right: 0; padding-right: 0; }
.hero-stat .n {
  font-size: 24px;
  text-shadow: none;
  letter-spacing: -0.04em;
}
.hero-stat .l {
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: rgba(255, 255, 255, .5);
}

/* ── COMMAND BAR ─────────────────────────────────────────────────────────
   Search and region filter share one bordered container, sticky under the
   header, so finding something is the first and most obvious action. */
.find-tools {
  background: var(--bg);
  padding: .8rem 0 1rem;
}
.find-tools::after { background: var(--line); }
.search-wrap { margin-bottom: 0; }
.search-wrap input {
  border-radius: 3px 3px 0 0;
  border: 1px solid var(--line);
  border-bottom: 0;
  background: var(--surface);
  font-size: 15px;
  height: 52px;
}
.search-wrap input:focus {
  box-shadow: none;
  border-color: var(--ink-line, var(--border-strong));
  outline: none;
}
.search-wrap:focus-within {
  outline: 2px solid var(--accent);
  outline-offset: 0;
  border-radius: 3px;
}
.search-wrap > i { color: var(--text-3); }
.search-clear { border-radius: 2px; }

.region-row {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 1px solid var(--line);
  border-radius: 0 0 3px 3px;
  background: var(--surface);
  padding: .5rem .55rem;
  flex-wrap: wrap;
}
.region-label {
  display: inline-flex;
  align-items: center;
  padding: 0 .65rem 0 .4rem;
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}

/* Segmented region control: wraps onto as many rows as it needs, never
   scrolls sideways. */
.seg {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  flex: 1;
  min-width: 0;
}
.seg-btn {
  appearance: none;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  font: inherit;
  font-size: 12.5px;
  font-weight: 500;
  padding: .4rem .62rem;
  min-height: 32px;
  border-radius: 2px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.seg-btn:hover { background: var(--surface-alt); color: var(--text); }
.seg-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.seg-btn.active::before {
  content: "";
  display: inline-block;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--gold);
  margin-right: .45rem;
  vertical-align: middle;
}
.shortlist-toggle {
  border-radius: 2px;
  border: 1px solid var(--line);
  margin-left: auto;
  font-weight: 600;
}
.shortlist-toggle.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
.sl-count {
  border-radius: 2px;
  font-family: var(--font-mono);
}

/* ── INSTITUTION BORDER-GRID ─────────────────────────────────────────────
   One continuous surface divided by 1px gaps, instead of 13 separate cards
   floating on the page. The grid background IS the divider colour. */
.inst-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(268px, 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 1.6rem;
}
.inst-card {
  background: var(--surface);
  border: 0;
  border-radius: 0;
  padding: 1.25rem 1.3rem 1.35rem;
  transition: background .14s ease;
}
.inst-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: transparent;
  transition: background .14s ease;
}
.inst-card.pub::before   { background: var(--navy); }
.inst-card.priv::before  { background: var(--gold); }
.inst-card.other::before { background: #B9B5A6; }
.inst-card.pub,
.inst-card.priv,
.inst-card.other { border-top: 0; }

.inst-card:hover,
.inst-card:focus-within {
  background: #FBFAF7;
  transform: none;
  box-shadow: none;
}
.inst-card:active { transform: none; }
.inst-card.saved {
  border: 0;
  box-shadow: inset 0 0 0 1px rgba(247, 173, 55, .55);
}
.inst-card h3 {
  font-size: 15px;
  line-height: 1.3;
  margin-bottom: .2rem;
}
.inst-meta span {
  font-size: 11.5px;
  color: var(--text-3);
}
.inst-meta i { color: #C2BCA9; }

.card-heart {
  border-radius: 2px;
  width: 36px;
  height: 36px;
  top: .8rem;
  right: .75rem;
}
.card-heart:hover { transform: none; background: var(--surface-alt); }
.card-heart.on { background: transparent; color: #C4362F; }

.type-badge {
  border-radius: 2px;
  font-size: 9.5px;
  font-weight: 600;
  letter-spacing: .02em;
  padding: .2rem .45rem;
  border: 1px solid transparent;
}
.tb-pub  { background: transparent; border-color: var(--border-strong); color: var(--text-2); }
.tb-priv { background: transparent; border-color: rgba(247, 173, 55, .8); color: #8A6A00; }
.tb-other{ background: transparent; border-color: var(--line); color: var(--text-3); }

.match-note {
  background: transparent;
  border-left: 2px solid var(--gold);
  border-radius: 0;
  padding: .3rem 0 .3rem .6rem;
  color: var(--text-2);
}
.match-note mark { background: rgba(247, 173, 55, .34); }

.results-bar { margin: 1.1rem 0 .7rem; }
.results-count {
  font-size: 11.5px;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
}
.results-reset { border-radius: 2px; }
.search-empty {
  border-radius: 3px;
  border: 1px solid var(--line);
  background: var(--surface);
}

/* ── BUTTONS, CHIPS, PANELS ──────────────────────────────────────────────*/
.filter-btn,
.detail-action,
.related a,
.accom-btn,
.calc-tab,
.map-state button,
.go-calc-btn,
.tier-cta,
.ad-wa-cta,
.ad-scholar-cta,
.ad-paid-cta,
.detail-back {
  border-radius: 2px;
}
.filter-btn {
  border: 1px solid var(--line);
  font-weight: 500;
}
.filter-btn:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
  font-weight: 600;
}
.prog-tag,
.campus-pill,
.threshold-card,
.accom-card,
.tier-card,
.info-block,
.about-block,
.calc-box,
.related,
.map-container,
.accom-note,
.accom-warning,
.calc-free-notice,
.calc-disclaimer,
.ad-wa,
.ad-scholar,
.ad-paid-slot,
.fab-panel,
.toast {
  border-radius: 3px;
}
.prog-tag {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--text-2);
  font-weight: 500;
}
.campus-pill { border: 1px solid var(--line); }
a.campus-pill:hover { transform: none; background: var(--surface-alt); }
.detail-action { border-color: var(--line); }
.detail-action.on { background: transparent; border-color: var(--gold); }
.related a { background: transparent; border-color: var(--line); font-weight: 500; }
.thresholds { gap: 1px; }
.threshold-card { border: 1px solid var(--line); }

/* ── ACCOMMODATION / TIERS: same border-grid treatment ───────────────────*/
.accom-grid,
.tiers-grid {
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: 3px;
  overflow: hidden;
}
.accom-card,
.tier-card {
  border: 0;
  border-radius: 0;
  background: var(--surface);
}
.accom-card:hover,
.tier-card:hover { transform: none; box-shadow: none; background: #FBFAF7; }
.tier-card.featured { box-shadow: inset 0 0 0 2px var(--gold); }
.accom-type { border-radius: 2px; }

/* ── COMMUNITY BANNER ────────────────────────────────────────────────────
   The emoji tile is replaced by a live status dot: the banner is about an
   active community, so a pulse says that better than a speech bubble. */
.ad-wa {
  background: #0E5F52;
  border-radius: 3px;
}
.ad-wa-icon {
  font-size: 0;
  width: auto;
  height: auto;
  background: transparent;
  display: flex;
  align-items: center;
  padding-right: .25rem;
}
.ad-wa-icon::after {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #4BE38A;
  box-shadow: 0 0 0 0 rgba(75, 227, 138, .55);
  animation: wa-pulse 2.4s ease-out infinite;
}
@keyframes wa-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(75, 227, 138, .55); }
  70%  { box-shadow: 0 0 0 9px rgba(75, 227, 138, 0); }
  100% { box-shadow: 0 0 0 0 rgba(75, 227, 138, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ad-wa-icon::after { animation: none; }
}
.ad-label,
.ad-paid-label {
  border-radius: 0 0 2px 0;
  font-family: var(--font-mono);
  letter-spacing: 0;
  text-transform: none;
  font-size: 9.5px;
}

/* ── CALCULATOR ──────────────────────────────────────────────────────────*/
.calc-tabs { gap: 2px; border-bottom: 1px solid var(--line); padding-bottom: .55rem; }
.calc-tab { border: 1px solid var(--line); font-weight: 500; }
.calc-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.subj-row select,
.region-row select {
  border-radius: 2px;
  border: 1px solid var(--line);
}
.pts-result { border-radius: 3px; }
.pts-total { font-size: 38px; letter-spacing: -0.045em; }

/* ── FOOTER ──────────────────────────────────────────────────────────────*/
.site-footer { background: var(--navy); border-top: 3px solid var(--gold); }
.site-footer h4 {
  font-family: var(--font-mono);
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255, 255, 255, .45);
  margin-bottom: .6rem;
}
.site-footer a { color: rgba(255, 255, 255, .82); }
.site-footer a:hover { color: var(--gold); }
.footer { background: var(--navy); }

/* ── CHAT ────────────────────────────────────────────────────────────────*/
.fab-chat { background: var(--navy); }
.fab-panel { border-radius: 3px; border: 1px solid var(--border-strong); }
.chat-msg, .chat-suggest-btn, .fab-input-row input, .fab-input-row button { border-radius: 2px; }

/* ── DETAIL PAGES ────────────────────────────────────────────────────────*/
.detail-header {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
  padding: 1.5rem 1.6rem 1.3rem;
}
.detail-header h1 { font-size: clamp(22px, 3.4vw, 30px); letter-spacing: -0.035em; }
.crumbs { font-size: 11px; }
.campus-list { gap: 1px; }

@media (max-width: 600px) {
  .hero { padding: 1.9rem 1.4rem 1.7rem; }
  .hero-stat { padding-right: 1.1rem; margin-right: 1.1rem; }
  .inst-grid { grid-template-columns: 1fr; }
  .region-row { padding: .45rem .4rem; }
}


/* ═════════════════════════════════════════════════════════════════════════
   EDITORIAL PASS
   Cream + ink + gold. No dark panels. One hairline between things instead
   of a box around them. Bigger, looser type.
   ═════════════════════════════════════════════════════════════════════════ */

body { background: var(--bg); }

/* ── HEADER ──────────────────────────────────────────────────────────────
   Flat white, separated from the cream page only by a hairline — no ink
   fill. The logo badge picks up a thin border since it can no longer rely
   on a dark background to read as a distinct chip. */
.header {
  background: #FFFFFF;
  border-bottom: 1px solid var(--line);
  box-shadow: none;
}
.logo-badge {
  background: var(--bg);
  border: 1px solid var(--line);
}
.logo-name { color: var(--text); }
.logo-sub { color: var(--text-3); }

.nav-btn {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-2);
  border-radius: 2px;
  position: relative;
}
.nav-btn:hover { background: var(--surface-alt); color: var(--text); }
.nav-btn.active {
  background: transparent;
  color: var(--text);
  font-weight: 700;
  box-shadow: none;
}
.nav-btn.active::after {
  content: "";
  position: absolute;
  left: .85rem;
  right: .85rem;
  bottom: 4px;
  height: 2px;
  background: var(--gold);
}
.nav-toggle {
  border-color: var(--line);
  background: transparent;
  color: var(--text);
}
.nav-toggle:hover { background: var(--surface-alt); }
@media (max-width: 640px) {
  .nav { border-top-color: var(--line); }
  .nav-btn.active::after { left: .9rem; }
}

/* ── HERO ────────────────────────────────────────────────────────────────
   No panel. The headline sits straight on the page, given real room, with
   a single hairline marking where the stats strip begins — the one
   structural device doing the job four decorative gradients used to. */
.hero {
  background: transparent;
  background-image: none;
  color: var(--text);
  padding: 3rem 0 2.2rem;
  border-radius: 0;
  box-shadow: none;
}
.hero h1 {
  font-size: clamp(32px, 5.6vw, 56px);
  line-height: 1.05;
  max-width: 15ch;
  color: var(--text);
}
.hero p {
  color: var(--text-2);
  font-size: 16px;
  max-width: 52ch;
  margin-top: .7rem;
}
.hero-stats {
  border-top-color: var(--line);
}
.hero-stat { border-right-color: var(--line); }
.hero-stat .n { color: var(--text); }
.hero-stat .l { color: var(--text-3); }

/* ── COMMAND BAR ─────────────────────────────────────────────────────────
   A big field with a bottom rule instead of a boxed container, and a plain
   inline list of regions instead of a bordered pill tray — the Raycast
   reference without the enclosing box, since a full command-bar chrome
   reads heavier than this page needs. */
.find-tools { background: var(--bg); padding: 1.1rem 0 1.3rem; }
.find-tools::after { display: none; }

.search-wrap input {
  border: 0;
  border-bottom: 1px solid var(--border-strong);
  border-radius: 0;
  background: transparent;
  padding: 12px 8px 12px 34px;
  font-size: 17px;
  height: auto;
}
.search-wrap > i { left: 4px; font-size: 17px; }
.search-wrap input:focus { border-color: var(--text); box-shadow: none; }
.search-wrap:focus-within { outline: none; border-radius: 0; }
.search-clear { background: transparent; border-radius: 2px; }
.search-clear:hover { background: var(--surface-alt); }

.region-row {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: .7rem 0 0;
  align-items: center;
}
.region-label { padding: 0 .6rem 0 0; color: var(--text-3); }

.seg { gap: 0; }
.seg-btn {
  border-radius: 0;
  padding: .35rem .6rem;
  font-weight: 500;
  color: var(--text-2);
  position: relative;
}
.seg-btn:hover { background: transparent; color: var(--text); }
.seg-btn.active {
  background: transparent;
  color: var(--text);
  font-weight: 700;
}
.seg-btn.active::before { background: var(--gold); }

.shortlist-toggle {
  border: 0;
  border-bottom: 1px solid transparent;
  background: transparent;
  color: var(--text-2);
  border-radius: 0;
  padding: .4rem .1rem;
}
.shortlist-toggle:hover { color: var(--text); }
.shortlist-toggle.active {
  color: var(--text);
  border-bottom-color: var(--gold);
  font-weight: 700;
}
.sl-count {
  background: var(--surface-alt);
  color: var(--text-2);
  border-radius: 2px;
}
.shortlist-toggle.active .sl-count { background: var(--gold); color: var(--text); }

/* ── SECTION LABEL ───────────────────────────────────────────────────────*/
.section-label { margin-top: 2.6rem; color: var(--text-3); }

/* ── INSTITUTION LIST ────────────────────────────────────────────────────
   The bento border-grid is gone. This is a plain list: one hairline between
   rows, title and metadata placed on a two-column grid using named
   selectors (no HTML changes needed), heart button pinned top-right. Reads
   as a directory, not a dashboard. */
.inst-grid {
  display: block;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--line);
  border-radius: 0;
  overflow: visible;
  margin-bottom: 2rem;
}
.inst-card {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 1.5rem;
  align-items: start;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  border-radius: 0;
  padding: 1.5rem 3rem 1.5rem 0;
  transition: background .12s ease;
}
.inst-card::before { display: none; }
.inst-card:hover, .inst-card:focus-within {
  background: transparent;
  transform: none;
}
.inst-card:hover h3 a { color: var(--accent); }
.inst-card.saved { box-shadow: none; background: var(--gold-pale); }

.inst-card .type-badge { grid-column: 1; grid-row: 1; margin-bottom: .3rem; }
.inst-card h3 { grid-column: 1; grid-row: 2; padding-right: 0; font-size: 18px; }
.inst-card .abbr { grid-column: 1; grid-row: 3; margin-top: .15rem; }
.inst-card .inst-meta {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .25rem;
  text-align: right;
  white-space: nowrap;
}
.inst-card .match-note {
  grid-column: 1 / -1;
  grid-row: 4;
  margin-top: .6rem;
}
.inst-card .card-heart {
  position: absolute;
  top: 1.5rem;
  right: 0;
  width: 34px;
  height: 34px;
  border-radius: 2px;
}
@media (max-width: 560px) {
  .inst-card {
    grid-template-columns: 1fr;
    padding: 1.3rem 2.6rem 1.3rem 0;
  }
  .inst-card .inst-meta {
    grid-column: 1;
    grid-row: 4;
    align-items: flex-start;
    text-align: left;
    margin-top: .35rem;
    white-space: normal;
  }
  .inst-card .match-note { grid-row: 5; }
}

/* Type label loses its box; a small dot in the type's colour replaces both
   the border chip and the old full-height left bar on the card. */
.type-badge {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
}
.type-badge::before {
  content: "";
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  margin-right: .5em;
  vertical-align: middle;
}
.tb-pub   { color: var(--text-2); }
.tb-priv  { color: #8A6A00; }
.tb-other { color: var(--text-3); }

.results-bar { margin: 1.4rem 0 .9rem; }
.results-reset { border: 0; border-bottom: 1px solid var(--line); border-radius: 0; color: var(--text-2); }
.results-reset:hover { border-bottom-color: var(--text); background: transparent; }
.search-empty { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding-top: 1.5rem; }

/* ── DETAIL PAGES ────────────────────────────────────────────────────────*/
.detail-header {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 0;
}
.detail-header h1 { font-size: clamp(26px, 4vw, 38px); }
.detail-actions { margin-top: 1.2rem; }
.detail-action {
  border: 1px solid var(--line);
  background: transparent;
}
.detail-action:hover { background: var(--surface-alt); }
.detail-action.on { background: var(--gold-pale); border-color: var(--gold); }
.detail-back {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding-left: 0;
  color: var(--text-2);
}
.detail-back:hover { color: var(--text); background: transparent; }
.campus-pill { border: 1px solid var(--line); background: transparent; }
.related { border: 0; border-top: 1px solid var(--line); border-radius: 0; padding: 1.3rem 0 0; }

/* ── ACCOMMODATION / TIERS ───────────────────────────────────────────────
   Individually bordered, spaced with real gutters — not the filled-grid
   table technique, since these are fewer, richer items than the directory
   list above. */
.accom-grid, .tiers-grid {
  display: grid;
  gap: 1.1rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  overflow: visible;
}
.accom-card, .tier-card {
  border: 1px solid var(--line);
  border-radius: 3px;
  background: var(--surface);
}
.accom-card:hover, .tier-card:hover { background: var(--surface); border-color: var(--border-strong); }
.tier-card.featured { box-shadow: inset 0 0 0 1px var(--gold); border-color: var(--gold); }
.accom-type { background: transparent; border: 1px solid var(--line); }

/* ── CALLOUTS: WhatsApp / scholarship / paid-ad banners ──────────────────
   One shared bordered-callout language, differentiated only by a 3px left
   accent bar, instead of three different solid-colour blocks. */
.ad-wa, .ad-scholar {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  border-left: 3px solid #0E5F52;
  border-radius: 3px;
  box-shadow: none;
}
.ad-scholar { border-left-color: var(--gold); }

.ad-wa-icon, .ad-scholar-icon {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 2px;
  color: var(--text);
}
.ad-wa-icon { border: 0; justify-content: flex-start; width: auto; }
.ad-wa-tag, .ad-scholar-tag {
  text-transform: none;
  letter-spacing: 0;
  color: var(--text-3);
  font-size: 11px;
}
.ad-wa-title, .ad-scholar-title { color: var(--text); }
.ad-wa-sub, .ad-scholar-sub { color: var(--text-2); }

.ad-wa-cta, .ad-scholar-cta {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
  border-radius: 2px;
}
.ad-wa-cta:hover, .ad-scholar-cta:hover { background: var(--text); color: #fff; }

.ad-label {
  background: transparent;
  color: var(--text-3);
  text-transform: none;
  letter-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 2px;
}
.ad-paid-label { text-transform: none; letter-spacing: 0; }
.ad-paid-tag { text-transform: none; letter-spacing: 0; }
.ad-paid-cta {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
}
.ad-paid-cta:hover { background: var(--text); color: #fff; }

/* ── BUTTONS: filters, calculator tabs ───────────────────────────────────
   Active state is a soft gold wash with ink text, never a solid dark fill —
   there is no ink-filled chip anywhere on the page any more. */
.filter-btn { border: 1px solid var(--line); background: transparent; color: var(--text-2); }
.filter-btn:hover { border-color: var(--border-strong); background: var(--surface-alt); }
.filter-btn.active {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--text);
  font-weight: 700;
}
.calc-tab { border: 1px solid var(--line); background: transparent; color: var(--text-2); }
.calc-tab.active {
  background: var(--gold-pale);
  border-color: var(--gold);
  color: var(--text);
  font-weight: 700;
}
.map-state button {
  background: transparent;
  border: 1px solid var(--text);
  color: var(--text);
}
.map-state button:hover { background: var(--text); color: #fff; }

/* ── FOOTER ──────────────────────────────────────────────────────────────
   Light, not ink. The gold top rule is the only accent doing the work of
   separating it from the page. */
.site-footer {
  background: var(--surface);
  color: var(--text-2);
  border-top: 3px solid var(--gold);
}
.site-footer h4 { color: var(--text-3); }
.site-footer a { color: var(--text-2); }
.site-footer a:hover { color: var(--accent); }
.site-footer-base { color: var(--text-3); border-top-color: var(--line); }
.footer { background: var(--surface); color: var(--text-2); border-top: 1px solid var(--line); }
.footer a { color: var(--accent); }
.footer strong { color: var(--text); }

/* ── CHAT ────────────────────────────────────────────────────────────────*/
.fab-chat { background: var(--gold); color: var(--text); box-shadow: 0 4px 16px rgba(28,29,25,.18); }
.fab-chat:hover { background: #E9A02C; }
.fab-panel { border: 1px solid var(--line); box-shadow: 0 16px 48px rgba(28,29,25,.16); }
.fab-panel-header { background: var(--surface); color: var(--text); border-bottom: 1px solid var(--line); }
.chat-msg.bot { background: var(--surface-alt); color: var(--text); }
.chat-msg.user { background: var(--gold-pale); color: var(--text); }
.chat-suggest-btn { border: 1px solid var(--line); background: transparent; color: var(--text-2); }
.fab-input-row button { background: var(--gold); color: var(--text); }

.toast { background: var(--text); }

/* ── REMAINING PANEL SWEEP ───────────────────────────────────────────────
   A handful of one-off components (points-total box, the partner/chat promo
   panels, pricing-tier CTAs, badges) still had their own hard-coded
   `background: var(--navy)` that the selector-by-selector passes above
   didn't reach because they don't share a class with anything already
   handled. Each gets an explicit, full override here — background AND
   color AND border, not just whichever property happened to collide —
   since leaving any one of those on its old value would bleed the
   dark-panel look right back in. */

.shortlist-toggle.active { background: transparent; }
.sl-count { background: var(--surface-alt); color: var(--text-2); }

.go-calc-btn {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--text);
  box-shadow: none;
}
.go-calc-btn:hover { background: var(--text); color: #fff; }

.pts-result {
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--line);
  box-shadow: none;
}
.pts-total { color: var(--text); text-shadow: none; }
.pts-label { color: var(--text-3); }
.verdict-sub { color: var(--text-3); }

.accom-btn-map { background: transparent; color: var(--text); border: 1px solid var(--text); }
.accom-btn-map:hover { background: var(--text); color: #fff; }

.partner-hero, .chat-hero {
  color: var(--text);
  background: transparent;
  border-radius: 0;
  padding: 0 0 1.4rem;
  box-shadow: none;
}
.partner-hero::before, .chat-hero::before { display: none; }
.partner-hero h2, .chat-hero h2 { color: var(--text); font-size: clamp(24px, 4vw, 34px); }
.partner-hero p, .chat-hero p { color: var(--text-2); }

.tier-prem { background: var(--gold-pale); color: var(--text); }
.tier-price { color: var(--text); }

.tier-cta-outline:hover { background: var(--text); color: #fff; }
.tier-cta-navy { background: transparent; color: var(--text); border: 1px solid var(--text); }
.tier-cta-navy:hover { background: var(--text); color: #fff; }
.tier-cta-gold:hover { background: #E9A02C; }

.enquire-box {
  color: var(--text);
  background: var(--surface-alt);
  border-radius: 3px;
  box-shadow: none;
}
.enquire-box p { color: var(--text-2); }

.ua-badge { background: transparent; color: var(--text); border: 1px solid var(--line); }

.chat-input-row button { background: var(--gold); color: var(--text); }
.chat-input-row button:hover { background: #E9A02C; }

/* ── TYPE RHYTHM ─────────────────────────────────────────────────────────
   A little more air between sections generally, to match "lots of white
   space" rather than the tighter utility spacing of the previous pass. */
.page { padding-top: .4rem; }
h2 { font-size: 22px; }
.detail-header p { font-size: 14.5px; }


/* ═════════════════════════════════════════════════════════════════════════
   YOUTH PASS — gutters, a working colour system, and motion
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  /* Institution-type colours. Each is checked at 4.5:1+ on white so it can
     carry text, not just fills. */
  --c-pub:    #0F8A7E;   /* teal    — public universities */
  --c-priv:   #6D4AC7;   /* violet  — private universities */
  --c-college:#C2512F;   /* coral   — colleges */
  --c-vtc:    #1E6FB8;   /* blue    — vocational training centres */

  --c-pub-soft:    #E4F4F1;
  --c-priv-soft:   #EFEAFB;
  --c-college-soft:#FBEBE5;
  --c-vtc-soft:    #E6F0F9;

  /* Gutters are stepped with media queries rather than clamp(). A clamp()
     value held INSIDE a custom property is "invalid at computed-value
     time" on older engines, which wipes the property to its initial value
     and overrides any earlier fallback declaration — i.e. zero padding,
     content flush to the edge. Plain lengths always resolve. */
  --gutter: 1.25rem;
  --measure: 1080px;
}

/* ── BACKGROUND ──────────────────────────────────────────────────────────
   The cream ground read heavy and a bit dusty at full-page scale. Lifted to
   a near-white warm off-white: it keeps the logo's warmth (it is not a cold
   grey-white) but gets out of the way of the content and lets the type
   colours read brighter. Cards go pure white so they separate cleanly from
   it, and the old cream drops back to being a tint for soft fills only. */
:root {
  --bg: #FBFAF7;
  --surface: #FFFFFF;
  --surface-alt: #F4F1E9;
  --line: rgba(28, 29, 25, 0.11);
  --border: rgba(28, 29, 25, 0.11);
  --border-strong: rgba(28, 29, 25, 0.22);
}

/* ── MORE COLOUR ─────────────────────────────────────────────────────────
   Each group of institutions gets its own accent on the section marker and
   the divider above it, so scrolling the directory moves through teal →
   violet → coral → blue rather than a single gold repeated four times. */
.section-label.c-1::before { background: var(--c-pub); }
.section-label.c-2::before { background: var(--c-priv); }
.section-label.c-3::before { background: var(--c-college); }
.section-label.c-4::before { background: var(--c-vtc); }
.section-label::before { width: 4px; height: 15px; border-radius: 1px; }

/* Map filter buttons carry the institution's own pin colour when active,
   so the button and the dots on the map agree. */
.filter-row .filter-btn.active { background: var(--surface-alt); }
.legend-dot { width: 9px; height: 9px; }

/* The search field picks up a gold underline as you type in it. */
.search-wrap input:focus { border-bottom-color: var(--gold); border-bottom-width: 2px; }

/* Shortlist chip in the header area, and the counter when it has items. */
.shortlist-toggle.active .sl-count { background: var(--gold); color: var(--text); }

@media (min-width: 640px)  { :root { --gutter: 2rem; } }
@media (min-width: 1024px) { :root { --gutter: 3rem; } }

/* ── 1. THE CONTAINER ────────────────────────────────────────────────────
   Everything on the page now aligns to one measure with real breathing
   room at the edges — on a phone that's 20px, on a desktop up to 48px. */
.wrap {
  max-width: var(--measure);
  margin: 0 auto;
  padding-left: 1.25rem;              /* fallback for browsers without clamp() */
  padding-right: 1.25rem;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  width: 100%;
}
main > .wrap { padding-top: .5rem; padding-bottom: 4rem; }

.header { padding-left: 0; padding-right: 0; }
.header-inner {
  max-width: var(--measure);
  padding-left: 1.25rem;
  padding-right: 1.25rem;
  padding-left: var(--gutter);
  padding-right: var(--gutter);
  margin: 0 auto;
}
.site-footer { padding-left: 0; padding-right: 0; }
.site-footer-inner,
.site-footer-base {
  max-width: var(--measure);
  padding-left: var(--gutter);
  padding-right: var(--gutter);
}
.site-footer-base { padding-top: 1rem; }
.footer { padding-left: var(--gutter); padding-right: var(--gutter); }

/* The sticky search bar spans the full width, so its own inner content
   needs to line up with the gutter too. */
.find-tools { padding-left: 0; padding-right: 0; }

/* ── 2. COLOUR ───────────────────────────────────────────────────────────
   Type colour is applied to the dot, the hover bar and the badge together,
   so the colour always means the same thing. */
.tb-pub   { color: var(--c-pub); }
.tb-priv  { color: var(--c-priv); }
.tb-other { color: var(--c-college); }

/* VTC rows say "NTA VTC" in their badge text; the list is grouped so the
   nth-of-type isn't reliable — colour them via the card class instead. */
.inst-card.other .type-badge { color: var(--c-college); }

.inst-card {
  position: relative;
  border-left: 3px solid transparent;
  padding-left: 1rem;
  transition: border-color .18s ease, background .18s ease, transform .18s ease;
}
.inst-card.pub:hover   { border-left-color: var(--c-pub);     background: var(--c-pub-soft); }
.inst-card.priv:hover  { border-left-color: var(--c-priv);    background: var(--c-priv-soft); }
.inst-card.other:hover { border-left-color: var(--c-college); background: var(--c-college-soft); }
.inst-card:hover { transform: translateX(3px); }
.inst-card:focus-within { border-left-color: var(--gold); }

.inst-card.pub:hover h3 a   { color: var(--c-pub); }
.inst-card.priv:hover h3 a  { color: var(--c-priv); }
.inst-card.other:hover h3 a { color: var(--c-college); }

/* Hero stats each get their own colour so the strip has some life. */
.hero-stat:nth-child(1) .n { color: var(--c-pub); }
.hero-stat:nth-child(2) .n { color: var(--c-priv); }
.hero-stat:nth-child(3) .n { color: var(--c-college); }

/* A hand-drawn-feeling highlight under the headline — the one playful
   flourish on the page, and the thing that most says "this is for you"
   to a sixteen-year-old without resorting to emoji or a gradient. */
.hero h1 .swash {
  position: relative;
  display: inline-block;
}
.hero h1 .swash::after {
  content: "";
  position: absolute;
  left: -2px;
  right: -2px;
  bottom: .06em;
  height: .34em;
  background: var(--gold);
  opacity: .42;
  border-radius: 2px;
  z-index: -1;
  transform: scaleX(0);
  transform-origin: left center;
  animation: swash-in .7s cubic-bezier(.2,.75,.3,1) .35s forwards;
}
@keyframes swash-in { to { transform: scaleX(1); } }

.section-label::before { background: var(--gold); }
.seg-btn.active { color: var(--text); }
.seg-btn.active::before { background: var(--c-pub); }

/* Shortlist heart: a small pop so saving something feels good. */
.card-heart.on i { animation: heart-pop .34s cubic-bezier(.2,.9,.3,1.4); }
@keyframes heart-pop {
  0% { transform: scale(1); }
  45% { transform: scale(1.4); }
  100% { transform: scale(1); }
}
.card-heart.on { color: #E0464A; }

.filter-btn.active { background: var(--c-vtc-soft); border-color: var(--c-vtc); color: var(--c-vtc); }
.calc-tab.active   { background: var(--c-pub-soft); border-color: var(--c-pub); color: var(--c-pub); }
.accom-type.student   { color: var(--c-pub); border-color: var(--c-pub); }
.accom-type.campus    { color: var(--c-priv); border-color: var(--c-priv); }
.accom-type.shortstay { color: var(--c-college); border-color: var(--c-college); }

.fab-chat { background: var(--gold); }
.fab-chat:hover { transform: scale(1.06); }

/* ── 3. MOTION ───────────────────────────────────────────────────────────
   .reveal is only added by JS once it has confirmed motion is allowed, so
   content is never hidden from a crawler or a no-JS visitor. */
.reveal {
  opacity: 0;
  transform: translateY(14px);
}
.reveal.shown {
  opacity: 1;
  transform: none;
  transition: opacity .5s ease, transform .5s cubic-bezier(.2,.7,.3,1);
}
.reveal-delay-1.shown { transition-delay: .05s; }
.reveal-delay-2.shown { transition-delay: .10s; }
.reveal-delay-3.shown { transition-delay: .15s; }
.reveal-delay-4.shown { transition-delay: .20s; }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.shown { opacity: 1; transform: none; transition: none; }
  .hero h1 .swash::after { animation: none; transform: scaleX(1); }
  .card-heart.on i { animation: none; }
  .inst-card:hover { transform: none; }
}

/* ── spacing, now that there are real gutters ────────────────────────────*/
.hero { padding: 3.2rem 0 2.4rem; }
.inst-card { padding-top: 1.6rem; padding-bottom: 1.6rem; }
.section-label { margin-top: 3rem; }

/* ── REGION DRAWER ───────────────────────────────────────────────────────
   Desktop: the summary is hidden and the buttons are always shown inline.
   Mobile: the summary becomes a one-line control and the buttons collapse
   behind it, so the region filter costs one row instead of four. */
.region-drop { flex: 1; min-width: 0; }
.rd-toggle {
  display: none;                      /* desktop: no toggle, buttons are inline */
  align-items: center;
  gap: .2rem;
  width: 100%;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--line);
  font: inherit;
  text-align: left;
  cursor: pointer;
  color: var(--text);
}
.region-drop > .seg { display: flex; }   /* desktop: always shown */

.rd-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  color: var(--text-3);
  margin-right: .55rem;
}
.rd-value { font-weight: 700; color: var(--text); }
.rd-toggle i {
  margin-left: auto;
  font-size: 15px;
  color: var(--text-3);
  transition: transform .18s ease;
}
.region-drop.open .rd-toggle i { transform: rotate(180deg); }

@media (max-width: 640px) {
  .region-row { flex-wrap: wrap; }
  .region-drop { flex: 1 0 100%; width: 100%; }
  .rd-toggle {
    display: flex;
    min-height: var(--tap-min);
    padding: .5rem .2rem;
  }
  .region-drop > .seg {
    display: none;
    padding: .5rem 0 .2rem;
  }
  .region-drop.open > .seg { display: flex; }
  .region-drop .seg-btn {
    border: 1px solid var(--line);
    border-radius: 2px;
  }
  .shortlist-toggle { margin-left: 0; margin-top: .5rem; }
  .seg { width: 100%; }
}

@media (max-width: 560px) {
  .hero { padding: 2.2rem 0 1.8rem; }
  .inst-card { padding-left: .85rem; }
}


/* ── LEAFLET MAP ─────────────────────────────────────────────────────────
   Leaflet ships its own chrome (popup bubbles, zoom buttons, attribution),
   all of it rounded and blue-grey by default. Restyled here to match the
   rest of the site rather than looking like a widget dropped in. */
#gmap { background: var(--surface-alt); }
.leaflet-container {
  font-family: var(--font);
  background: var(--surface-alt);
}
.leaflet-control-zoom a {
  border-radius: 2px !important;
  color: var(--text) !important;
  border-color: var(--line) !important;
  font-weight: 600;
}
.leaflet-control-zoom a:hover { background: var(--surface-alt) !important; }
.leaflet-control-attribution {
  background: rgba(255, 255, 255, .86) !important;
  font-size: 10px !important;
  color: var(--text-3) !important;
}
.leaflet-control-attribution a { color: var(--accent) !important; }
.leaflet-popup-content-wrapper {
  border-radius: 3px;
  box-shadow: 0 10px 30px rgba(28, 29, 25, .16);
  border: 1px solid var(--line);
}
.leaflet-popup-content { margin: 0; }
.leaflet-popup-tip { border: 1px solid var(--line); }
.leaflet-tooltip {
  border-radius: 2px;
  border: 1px solid var(--line);
  font-size: 11px;
  font-weight: 600;
  color: var(--text);
  box-shadow: none;
}

.map-pop { padding: .85rem .95rem .8rem; min-width: 190px; }
.map-pop-kicker {
  font-size: 10px;
  font-weight: 700;
  color: var(--c-pub);
  margin-bottom: .2rem;
}
.map-pop-kicker.accom { color: var(--c-college); }
.map-pop-title { font-size: 13.5px; font-weight: 700; color: var(--text); line-height: 1.25; }
.map-pop-sub { font-size: 11.5px; color: var(--text-3); margin-top: .15rem; }
.map-pop-near { font-size: 11.5px; color: var(--text-2); margin-top: .3rem; }
.map-pop-cta {
  display: inline-block;
  margin-top: .6rem;
  margin-right: .35rem;
  padding: .4rem .7rem;
  border-radius: 2px;
  border: 1px solid var(--text);
  background: var(--text);
  color: #fff !important;
  font-size: 11px;
  font-weight: 600;
  text-decoration: none !important;
}
.map-pop-cta.alt { background: transparent; color: var(--text) !important; }
.map-pop-cta.alt:hover { background: var(--surface-alt); }

.ua-pin {
  cursor: pointer;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, .35));
}

/* ── TAP-TO-LOAD GATE ────────────────────────────────────────────────────
   The static SVG preview it wraps costs nothing to show; the button is the
   only thing that triggers Leaflet and the first batch of map tiles. */
.map-gate {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.1rem;
  height: 100%;
  padding: 1.6rem 1rem;
}
/* .hero-art carries `display: none` sitewide (the old hero map graphic was
   retired). Reusing its SVG-building code here for the same near-zero-cost
   preview needs its own visibility, hence the extra selector specificity
   rather than relying on the shared class alone. */
.map-gate .map-preview-art.hero-art {
  display: block;
  max-width: 220px;
  pointer-events: none;
}
.map-preview-art svg { max-height: 220px; width: 100%; height: auto; }
.map-preview-art .hero-art-key { margin-top: .5rem; }
.map-load-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  border: 0;
  border-radius: 2px;
  background: var(--c-pub);
  color: #fff;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  padding: .8rem 1.6rem;
  cursor: pointer;
  min-height: var(--tap-min);
}
.map-load-btn:hover { background: var(--c-pub-soft-hover, #0A5F58); }
.map-load-btn i { font-size: 17px; margin-right: .35rem; }
.map-load-sub {
  font-size: 10.5px;
  font-weight: 500;
  color: rgba(255, 255, 255, .78);
}

/* OSM standard tiles are busier than the pale canvas this was designed
   against. A very slight desaturation calms them so the coloured campus
   pins stay the most prominent thing on the map. */
.leaflet-tile-pane { filter: saturate(.82) brightness(1.03); }


/* ── HERO GRAPHIC ────────────────────────────────────────────────────────
   Every campus in the directory, plotted at its real coordinates. The hero
   becomes two columns on desktop; on a phone the map drops below the text
   at a reduced size so it decorates without pushing the search out of
   reach. */
.hero-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
}
.hero-copy { flex: 1 1 380px; min-width: 0; }
.hero-art  { flex: 0 1 300px; }
.hero-art { position: relative; }
.hero-art svg {
  width: 100%;
  height: auto;
  max-height: 340px;
  display: block;
  overflow: visible;
}
.hm-dot {
  stroke: #FBFAF7;
  stroke-width: 1.6;
  transform-box: fill-box;
  transform-origin: center;
}
/* The pop-in only exists once JS has added .animate, matching how the scroll
   reveals work. The dots are therefore fully visible by default: an earlier
   version put the animation on .hm-dot directly and the map rendered blank
   anywhere the animation's start frame was what got painted. */
.hero-art.animate .hm-dot {
  animation: hm-pop .42s cubic-bezier(.2,.8,.3,1.3) backwards;
}
/* Dots land in sequence rather than all at once: the country fills up. */
.hero-art.animate .hm-dot:nth-child(4n)   { animation-delay: .30s; }
.hero-art.animate .hm-dot:nth-child(4n+1) { animation-delay: .42s; }
.hero-art.animate .hm-dot:nth-child(4n+2) { animation-delay: .54s; }
.hero-art.animate .hm-dot:nth-child(4n+3) { animation-delay: .66s; }
@keyframes hm-pop {
  from { opacity: 0; transform: scale(.2); }
  to   { opacity: 1; transform: scale(1); }
}
.hm-dot:hover { r: 6; cursor: help; }

.hero-art-key {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem .9rem;
  justify-content: center;
  margin-top: .6rem;
  font-size: 11px;
  color: var(--text-3);
}
.hero-art-key span {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  margin-right: .55rem;        /* fallback where flex gap is unsupported */
}
.hero-art-key i { margin-right: .28rem; }
.hero-art-key i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  display: inline-block;
}

@media (prefers-reduced-motion: reduce) {
  .hero-art.animate .hm-dot { animation: none; }
}
@media (max-width: 820px) {
  .hero-inner { gap: 1.2rem; }
  .hero-copy { flex: 1 1 100%; }
  .hero-art { flex: 1 1 100%; max-width: 230px; margin: 0 auto; }
}

/* ── PAIRED TOP BANNERS ──────────────────────────────────────────────────
   Both promos sit above the fold, side by side, each at about half the
   visual weight of the old full-width version. */
.banner-duo {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 1.1rem 0 .4rem;
}
.banner-duo > * { flex: 1 1 300px; min-width: 0; }
.banner-duo .ad-wa,
.banner-duo .ad-scholar {
  margin: 0;
  padding: .85rem 1rem;
  flex-direction: column;
  align-items: flex-start;
  gap: .55rem;
}
.banner-duo .ad-wa-left,
.banner-duo .ad-scholar-left { gap: .55rem; align-items: flex-start; }
.banner-duo .ad-wa-title,
.banner-duo .ad-scholar-title { font-size: 13px; }
.banner-duo .ad-wa-sub,
.banner-duo .ad-scholar-sub { font-size: 11px; }
.banner-duo .ad-wa-cta,
.banner-duo .ad-scholar-cta { padding: 8px 14px; font-size: 11.5px; }
.banner-duo .ad-label { display: none; }
.banner-duo .ad-scholar-icon {
  width: 34px;
  height: 34px;
  font-size: 17px;
}
@media (max-width: 720px) {
  .banner-duo { gap: .7rem; }
  .banner-duo > * { flex: 1 1 100%; }
}


/* ═════════════════════════════════════════════════════════════════════════
   VIBRANT PASS — white ground, one strong colour field, colour-coded list
   ═════════════════════════════════════════════════════════════════════════ */

:root {
  --bg: #FFFFFF;
  --surface: #FFFFFF;
  --surface-alt: #F5F6F4;
  --line: rgba(28, 29, 25, 0.12);
  --border: rgba(28, 29, 25, 0.12);

  --teal-deep: #0C6E66;
  --teal-ink:  #085C55;
}

body { background: var(--bg); }

/* ── HERO BAND ───────────────────────────────────────────────────────────
   Full-bleed teal: the negative margin pulls it out past the .wrap gutter,
   the matching padding puts the text back on the measure. */
.hero {
  background: var(--teal-deep);
  color: #fff;
  margin-left: calc(var(--gutter) * -1);
  margin-right: calc(var(--gutter) * -1);
  padding: 3rem var(--gutter) 2.6rem;
  border-radius: 0;
}
.hero h1 { color: #fff; max-width: 18ch; }
.hero p  { color: rgba(255, 255, 255, .84); }
.hero h1 .swash::after { background: var(--gold); opacity: .95; height: .28em; }

.hero-stats { border-top-color: rgba(255, 255, 255, .22); }
.hero-stat  { border-right-color: rgba(255, 255, 255, .22); }
.hero-stat .l { color: rgba(255, 255, 255, .62); }
.hero-stat:nth-child(1) .n,
.hero-stat:nth-child(2) .n,
.hero-stat:nth-child(3) .n { color: var(--gold); }

/* The outline map is retired; the hero is a single column again. */
.hero-inner { display: block; }
.hero-art { display: none; }

/* ── QUICK TILES ─────────────────────────────────────────────────────────
   Four coloured entry points, sitting half over the hero band so the page
   opens on something to press rather than something to read. */
.quick-tiles {
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  /* Sits below the band, not overlapping it: an overlap hid the coloured
     top border of whichever tile fell against the teal. */
  margin: 1.1rem 0 2.2rem;
}
.qt {
  flex: 1 1 200px;
  min-width: 0;
  display: block;
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-top: 3px solid var(--qt-c, var(--gold));
  border-radius: 3px;
  padding: 1rem 1.05rem 1.05rem;
  text-decoration: none;
  box-shadow: 0 2px 10px rgba(28, 29, 25, .07);
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.qt:hover {
  text-decoration: none;
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(28, 29, 25, .13);
}
.qt-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 3px;
  background: var(--qt-soft, #eee);
  color: var(--qt-c, var(--text));
  font-size: 19px;
  margin-bottom: .6rem;
}
.qt-title {
  display: block;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 14.5px;
  letter-spacing: -0.02em;
  color: var(--text);
}
.qt-sub {
  display: block;
  font-size: 11.5px;
  color: var(--text-3);
  margin-top: .12rem;
}
.qt-arrow {
  position: absolute;
  top: 1.05rem;
  right: 1rem;
  font-size: 15px;
  color: var(--qt-c, var(--text-3));
  opacity: .5;
  transition: transform .16s ease, opacity .16s ease;
}
.qt:hover .qt-arrow { opacity: 1; transform: translateX(3px); }

.tile-teal   { --qt-c: var(--c-pub);     --qt-soft: var(--c-pub-soft); }
.tile-violet { --qt-c: var(--c-priv);    --qt-soft: var(--c-priv-soft); }
.tile-coral  { --qt-c: var(--c-college); --qt-soft: var(--c-college-soft); }
.tile-blue   { --qt-c: var(--c-vtc);     --qt-soft: var(--c-vtc-soft); }

@media (max-width: 760px) {
  .quick-tiles { gap: .6rem; margin: .9rem 0 1.6rem; }
  .qt { flex: 1 1 calc(50% - .3rem); padding: .8rem .8rem .85rem; }
  .qt-icon { width: 30px; height: 30px; font-size: 16px; margin-bottom: .45rem; }
  .qt-title { font-size: 13px; }
  .qt-sub { display: none; }        /* on a phone the label alone is enough */
  .qt-arrow { display: none; }
}

/* ── SECTION HEADINGS AS COLOUR CHIPS ────────────────────────────────────*/
.section-label {
  display: inline-flex;
  align-items: center;
  gap: 0;
  padding: .32rem .7rem;
  border-radius: 2px;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  margin-top: 2.6rem;
  margin-bottom: .9rem;
}
.section-label::before,
.section-label::after { display: none; }
.section-label.c-1 { background: var(--c-pub); }
.section-label.c-2 { background: var(--c-priv); }
.section-label.c-3 { background: var(--c-college); }
.section-label.c-4 { background: var(--c-vtc); }
/* Headings outside the directory (detail pages, calculator) keep a quieter
   treatment — a colour chip on every heading would be noise. */
.detail-header ~ .section-label,
#page-calc .section-label,
.section-label:not([class*="c-"]) {
  background: transparent;
  color: var(--text-2);
  padding: 0;
  font-weight: 600;
}
.section-label:not([class*="c-"])::before {
  display: inline-block;
  content: "";
  width: 4px;
  height: 14px;
  background: var(--gold);
  margin-right: .5rem;
  border-radius: 1px;
}

/* ── LIST ROWS CARRY THEIR COLOUR ALWAYS ─────────────────────────────────*/
.inst-grid { border-top: 0; }
.inst-card {
  border-left-width: 3px;
  border-bottom: 1px solid var(--line);
  padding-left: 1.1rem;
}
.inst-card.pub   { border-left-color: var(--c-pub); }
.inst-card.priv  { border-left-color: var(--c-priv); }
.inst-card.other { border-left-color: var(--c-college); }
.inst-card.pub:hover   { background: var(--c-pub-soft); }
.inst-card.priv:hover  { background: var(--c-priv-soft); }
.inst-card.other:hover { background: var(--c-college-soft); }

/* ── SEARCH BAR ──────────────────────────────────────────────────────────*/
.search-wrap input {
  background: var(--surface-alt);
  border: 1px solid var(--line);
  border-radius: 3px;
  padding-left: 40px;
}
.search-wrap > i { left: 13px; }
.search-wrap input:focus {
  background: var(--surface);
  border-color: var(--c-pub);
  border-bottom-width: 1px;
}
.seg-btn.active {
  background: var(--c-pub);
  color: #fff;
  border-radius: 2px;
  padding: .35rem .7rem;
}
.seg-btn.active::before { background: var(--gold); }

/* ── FOOTER: a colour rule rather than a plain hairline ──────────────────*/
.site-footer {
  border-top: 0;
  background: var(--surface-alt);
}
.site-footer::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--c-pub) 0 25%, var(--c-priv) 25% 50%,
    var(--c-college) 50% 75%, var(--c-vtc) 75% 100%);
  margin-bottom: 1.6rem;
}
.site-footer-inner { padding-top: 0; }

/* Page titles on the section pages: the same weight as a hero headline
   without the colour band. */
.page-title {
  font-family: var(--font-display);
  font-size: clamp(24px, 3.6vw, 34px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.12;
  margin: .4rem 0 1rem;
  color: var(--text);
}

/* Map legend: margin fallback so the items never run together where flex
   gap isn't supported. */
.map-legend-item { margin-right: .9rem; }
.map-legend-item .legend-dot { margin-right: .35rem; }

.accom-btn-web {
  background: transparent;
  color: var(--c-pub);
  border: 1px solid var(--c-pub);
}
.accom-btn-web:hover { background: var(--c-pub-soft); text-decoration: none; }

/* ── CALLOUT BANNERS, now on the home page only ──────────────────────────*/
.ad-wa      { border-left-color: var(--c-pub); }
.ad-scholar { border-left-color: var(--gold); }


/* Calculator: dual totals + best-5 note */
.pts-totals { display: flex; align-items: flex-end; gap: 1.75rem; flex-wrap: wrap; }
.pts-total-sm { font-size: 26px; letter-spacing: -0.03em; opacity: 0.85; }
.pts-total-all { padding-left: 1.75rem; border-left: 1px solid rgba(255, 255, 255, 0.2); }
.pts-result .pts-total-all { border-left-color: var(--line); }
.calc-note-best5 {
  background: #FCF6E4;
  border: 1px solid #E6D08F;
  border-radius: var(--radius-sm);
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
}
.calc-note-best5 i { color: #8A6A00; font-size: 18px; flex-shrink: 0; margin-top: 1px; }
.calc-note-best5 p { font-size: 12px; color: #4A3B12; line-height: 1.6; margin: 0; }
@media (max-width: 640px) {
  .pts-totals { gap: 1rem; }
  .pts-total-all { padding-left: 1rem; }
}