/* ============================================================
   Vedas College — website design system
   Brand: navy #253670 + red #e02329, taken from the college logo.
   ============================================================ */

:root {
  --navy: #253670;
  --navy-700: #1c2a58;
  --navy-900: #131d3d;
  --red: #e02329;
  --red-700: #c11d22;

  --ink: #131826;
  --body: #4a5468;
  --muted: #7b8598;
  --line: #e4e7ee;
  --surface: #ffffff;
  --tint: #f5f7fb;
  --tint-2: #eef2fa;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(19, 29, 61, 0.06);
  --shadow: 0 10px 30px rgba(19, 29, 61, 0.08);
  --shadow-lg: 0 24px 60px rgba(19, 29, 61, 0.14);

  --header-h: 78px;
  --wrap: 1160px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--body);
  background: var(--surface);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  color: var(--ink);
  line-height: 1.18;
  margin: 0 0 0.5em;
  letter-spacing: -0.02em;
  font-weight: 800;
}
h1 { font-size: clamp(2rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.15rem, 2vw, 1.4rem); }
p { margin: 0 0 1rem; }

a { color: var(--navy); text-decoration: none; }
a:hover { color: var(--red); }

img { max-width: 100%; display: block; }
ul { margin: 0 0 1rem; padding-left: 1.15rem; }
li { margin-bottom: 0.4rem; }

/* Focus is visible on everything, offset so it reads on coloured buttons. */
:focus-visible {
  outline: 3px solid var(--red);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--navy);
  color: #fff;
  padding: 12px 18px;
  z-index: 999;
}
.skip-link:focus { left: 8px; top: 8px; color: #fff; }

/* ---------- Layout ---------- */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin: 0 auto;
  padding: 0 24px;
}

.section { padding: clamp(56px, 8vw, 104px) 0; }
.section--tint { background: var(--tint); }
.section--navy { background: var(--navy); color: rgba(255,255,255,.82); }
.section--navy h2, .section--navy h3 { color: #fff; }

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 12px;
}
.section--navy .eyebrow { color: #ff8a8e; }

.section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.lead { font-size: clamp(1rem, 1.6vw, 1.15rem); color: var(--body); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 50px;
  padding: 13px 26px;
  border-radius: 999px;
  border: 2px solid transparent;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
  transition: transform .12s ease, background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
  text-align: center;
}
.btn:active { transform: translateY(1px); }

.btn--primary { background: var(--red); color: #fff; box-shadow: 0 8px 22px rgba(224,35,41,.28); }
.btn--primary:hover { background: var(--red-700); color: #fff; box-shadow: 0 12px 28px rgba(224,35,41,.34); }

.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover { background: var(--navy-700); color: #fff; }

.btn--ghost { border-color: rgba(255,255,255,.5); color: #fff; }
.btn--ghost:hover { background: rgba(255,255,255,.12); border-color: #fff; color: #fff; }

.btn--outline { border-color: var(--line); color: var(--navy); background: #fff; }
.btn--outline:hover { border-color: var(--navy); color: var(--navy); background: var(--tint); }

.btn-row { display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Header ---------- */
.topbar {
  background: var(--navy-900);
  color: rgba(255,255,255,.78);
  font-size: 0.85rem;
}
.topbar .wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 22px;
  align-items: center;
  justify-content: flex-end;
  min-height: 42px;
}
.topbar a { color: rgba(255,255,255,.85); }
.topbar a:hover { color: #fff; }
.topbar .sep { opacity: .35; }

.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(255,255,255,.92);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: var(--header-h);
}
/* flex-shrink must be off: the nav is wide, and a shrinkable logo gets its
   width squeezed while height stays pinned at 52px — which distorts the mark.
   max-width:none overrides the global img rule for the same reason. */
.brand { display: flex; align-items: center; flex: 0 0 auto; }
.brand img { height: 52px; width: auto; max-width: none; flex: none; }

.nav { display: flex; align-items: center; gap: 28px; min-width: 0; }
.nav a:not(.btn) {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: 8px 0;
  font-weight: 500;
  font-size: 1rem;
  color: #1a1a1a;
  white-space: nowrap;
}
/* Red underline that wipes in from the left on hover and out to the right
   when the pointer leaves — the origin flip is what reverses the direction. */
.nav a:not(.btn)::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: 100% 100%;
  transition: transform .3s ease-out;
}
.nav a:not(.btn):hover { color: var(--red); }
.nav a:not(.btn):hover::after,
.nav a:not(.btn)[aria-current="page"]::after {
  transform: scaleX(1);
  transform-origin: 0 100%;
}
.nav a:not(.btn)[aria-current="page"] { color: var(--red); }

/* The "Student Login" pill keeps its button colors — .nav a's text-color
   rules above are more specific than .btn--primary's and would otherwise
   leave it with dark text on a red background. */
.nav a.btn,
.nav a.btn:hover { color: #fff; }
/* Sizing that used to be an inline style on every page's markup — in the CSS
   the drawer's media query can override it, which an inline style prevented. */
.nav a.btn { min-height: 42px; padding: 9px 20px; margin-left: 6px; }
/* Drawer-only furniture — no place in the desktop bar. */
.nav-head, .nav-close, .nav-socials { display: none; }

/* Programs dropdown */
.has-menu { position: relative; }
.has-menu > button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 14px;
  border: 0;
  border-radius: 999px;
  background: none;
  font: inherit;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--ink);
  cursor: pointer;
}
.has-menu > button:hover { background: var(--tint-2); color: var(--navy); }
.has-menu > button svg { transition: transform .18s ease; }
.has-menu.open > button svg { transform: rotate(180deg); }

.menu {
  position: absolute;
  top: calc(100% + 10px);
  left: 0;
  min-width: 240px;
  padding: 10px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: var(--shadow-lg);
  display: none;
  z-index: 5;
}
.has-menu.open .menu { display: block; }
.menu a {
  display: block;
  padding: 11px 14px;
  border-radius: 10px;
  font-weight: 600;
  color: var(--ink);
}
.menu a:hover { background: var(--tint); color: var(--navy); }
.menu small { display: block; font-weight: 500; color: var(--muted); font-size: .8rem; }

.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: #fff;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}

/* ---------- Hero ---------- */
/* Campus photo sits underneath a near-opaque navy wash — enough of the court
   and building reads through to give the hero depth, while the headline keeps
   full contrast against it. */
.hero {
  position: relative;
  background:
    radial-gradient(1100px 520px at 12% -10%, rgba(224,35,41,.20), transparent 60%),
    linear-gradient(150deg, rgba(37,54,112,.93) 0%, rgba(19,29,61,.88) 100%),
    url("/site/assets/img/hero-campus.jpg") center / cover no-repeat;
  color: rgba(255,255,255,.86);
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -55% 55%;
  height: 90%;
  background: radial-gradient(closest-side, rgba(255,255,255,.09), transparent);
  pointer-events: none;
}
/* Kept deliberately short so the stat cards and the section beneath them are
   visible without scrolling on a laptop screen. */
.hero .wrap {
  position: relative;
  padding-top: clamp(36px, 4vw, 56px);
  padding-bottom: clamp(56px, 6vw, 76px);
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: center;
}
/* The intro column is centred as a single focused block, and the type is a
   step smaller than the global h1/.lead so it reads as one unit rather than
   filling the whole column. */
.hero-intro { text-align: center; }
.hero-intro .btn-row { justify-content: center; }

.hero h1 {
  color: #fff;
  font-size: clamp(1.8rem, 3.6vw, 2.9rem);
  letter-spacing: -0.03em;
}
.hero h1 em {
  font-style: normal;
  color: #ff5056;
}
.hero .lead {
  color: rgba(255,255,255,.8);
  font-size: 1rem;
  max-width: 44ch;
  margin-left: auto;
  margin-right: auto;
}
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px 7px 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  font-size: .82rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 22px;
}
.hero-badge span {
  background: var(--red);
  padding: 3px 9px;
  border-radius: 999px;
  font-size: .72rem;
  letter-spacing: .04em;
}

/* The affiliation mark. Was the letters "TU" in a red pill; it is now the
   university's own logo, which is portrait, so the height is set and the width
   follows. The badge is inline-flex, so no vertical alignment is needed. */
.hero-badge img {
  height: 22px;
  width: auto;
  display: block;
}

/* Hero photographs. Sits opposite the intro column; the campus shot behind the
   hero is heavily washed, so these carry the actual picture. Five frames
   cross-fade on a 30s loop — 6s each, with the fade overlapping so there is
   never an empty frame. */
.hero-shot {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: var(--shadow-lg);
  /* Matches the source photographs (1600x1066), so object-fit has nothing to
     crop — a 4/3 panel was cutting a ninth off the sides of every frame. */
  aspect-ratio: 3 / 2;
  background: var(--navy-900);
}
.hero-shot img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0;
  transition: opacity .8s ease;
}
/* The incoming photo fades in on top; the one it replaces is held opaque
   underneath until the fade finishes, so the panel never shows through. */
.hero-shot img.is-on { opacity: 1; z-index: 2; }
.hero-shot img.is-prev { opacity: 1; z-index: 1; transition: none; }

/* Slideshow controls: one pill at the bottom centre — arrows either side of
   the dots. */
.shot-controls {
  position: absolute;
  z-index: 3;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 4px 6px;
  border-radius: 999px;
  background: rgba(19,29,61,.46);
  border: 1px solid rgba(255,255,255,.22);
  backdrop-filter: blur(6px);
}
.shot-nav {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 0;
  background: rgba(255,255,255,.14);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
  transition: background .2s ease, transform .15s ease;
}
/* Overrides the arrows' inline width/height so the glyph shrinks with the
   button rather than filling it. */
.shot-nav svg { width: 14px; height: 14px; }
.shot-nav:hover { background: var(--red); }
.shot-nav:active { transform: scale(.92); }

.shot-dots { display: flex; align-items: center; gap: 5px; }
.shot-dot {
  width: 6px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.45);
  cursor: pointer;
  transition: width .25s ease, background .25s ease;
}
.shot-dot:hover { background: rgba(255,255,255,.8); }
.shot-dot[aria-current="true"] { width: 16px; background: #fff; }

@media (max-width: 560px) {
  .shot-controls { gap: 6px; padding: 4px 5px; }
  .shot-nav { width: 22px; height: 22px; }
  .shot-nav svg { width: 13px; height: 13px; }
}

/* ---------- Stats ---------- */
/* Separate floating cards that just clip the bottom of the hero, each led by a
   round icon. The overlap is deliberately shallow — any deeper and the cards
   sit half in the navy, which reads as a misalignment rather than a layer. */
.stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: -22px;
  position: relative;
  z-index: 2;
}
.stat {
  display: flex;
  align-items: center;
  gap: 18px;
  /* Grid items default to min-width:auto, which lets a long label ("Of campus
     investment") hold the column wider than the screen and clip the card. */
  min-width: 0;
  background: #fff;
  border-radius: 16px;
  padding: 22px 24px;
  border: 1px solid var(--line);
  box-shadow: 0 14px 34px rgba(19,29,61,.14);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.stat:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(19,29,61,.18);
  border-color: var(--tint-2);
}
.stat-icon {
  width: 56px;
  height: 56px;
  flex: none;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(180deg, var(--tint-2), #e4ebf8);
  color: var(--navy-700);
}
.stat > div { min-width: 0; }
.stat b {
  display: block;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  line-height: 1.15;
}
.stat span { font-size: .9rem; color: var(--muted); font-weight: 500; }

/* The strip of at-a-glance admissions facts under the stat cards. */
.hero-facts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 16px 32px;
  padding: 20px 0 4px;
}
.hero-fact {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  color: var(--body);
}
.hero-fact svg { color: var(--navy); flex: none; }
.hero-fact b { color: var(--navy); font-weight: 700; }
.hero-fact .pill--open {
  display: inline-block;
  padding: 7px 18px;
  border-radius: 999px;
  background: var(--red);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
}

@media (max-width: 980px) and (min-width: 561px) {
  .stats { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}
@media (max-width: 560px) {
  .stats { grid-template-columns: 1fr; margin-top: -16px; }
  .hero-facts { flex-direction: column; align-items: flex-start; gap: 14px; }
}

/* ---------- Cards / grids ---------- */
.grid { display: grid; gap: 24px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 28px;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.card--link:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6dcea;
}
.card h3 { margin-bottom: 8px; }
.card p:last-child { margin-bottom: 0; }

.icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: var(--tint-2);
  color: var(--navy);
  margin-bottom: 18px;
}
.icon--red { background: rgba(224,35,41,.1); color: var(--red); }

/* Program card */
.prog {
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.prog:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.prog-top {
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: #fff;
}
.tag {
  display: inline-block;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 10px;
}
.prog-top .tag {
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.16);
  color: #fff;
}
.prog-top h3 { color: #fff; margin: 0; font-size: 1.35rem; }
.prog-top p { margin: 4px 0 0; color: rgba(255,255,255,.75); font-size: .88rem; }
.prog-body { padding: 22px 24px; flex: 1; display: flex; flex-direction: column; }
.prog-body p { font-size: .94rem; }
.prog-meta {
  display: flex;
  gap: 18px;
  flex-wrap: wrap;
  margin: 4px 0 16px;
  font-size: .84rem;
  color: var(--muted);
  font-weight: 600;
}
.prog-body .btn { margin-top: auto; align-self: flex-start; }

/* Program card — image with hover-to-reveal detail */
.prog-card {
  position: relative;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow-sm);
  transition: transform .18s ease, box-shadow .18s ease;
}
.prog-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.prog-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19,29,61,.88) 0%, rgba(19,29,61,.35) 45%, rgba(19,29,61,0) 75%);
  transition: opacity .22s ease;
}
.prog-card__basic {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 22px 24px;
  color: #fff;
  transition: opacity .18s ease;
}
.prog-card__basic h3 { color: #fff; margin: 6px 0 4px; font-size: 1.35rem; }
.prog-card__basic p { margin: 0; color: rgba(255,255,255,.85); font-size: .88rem; }
.prog-card__detail {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  padding: 28px 24px;
  background: #fff;
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
  transition: opacity .22s ease, transform .22s ease;
}
.prog-card__detail h3 { margin: 8px 0 14px; font-size: 1.35rem; }
.prog-card__detail p { font-size: .94rem; color: var(--body); flex: 1; }
.prog-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  margin-top: 16px;
  border-top: 1px solid var(--line);
  font-weight: 700;
}
.prog-card:hover::after { opacity: 0; }
.prog-card:hover .prog-card__basic { opacity: 0; }
.prog-card:hover .prog-card__detail { opacity: 1; transform: translateY(0); pointer-events: auto; }
.tag--card { background: rgba(255,255,255,.2); color: #fff; }

/* Detail block for a programme page section */
.detail {
  scroll-margin-top: calc(var(--header-h) + 24px);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 4vw, 40px);
  box-shadow: var(--shadow-sm);
}
.detail + .detail { margin-top: 26px; }
.detail-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 6px;
}
.pill {
  display: inline-block;
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--tint-2);
  color: var(--navy);
  font-size: .76rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.pill--red { background: rgba(224,35,41,.1); color: var(--red); }
.criteria {
  background: var(--tint);
  border-left: 3px solid var(--red);
  border-radius: 0 12px 12px 0;
  padding: 20px 22px;
  margin-top: 20px;
}
.criteria h4 { font-size: 1rem; margin-bottom: 10px; }
.criteria ul { margin-bottom: 0; }

/* Notices */
.notice-list { list-style: none; margin: 0; padding: 0; }
.notice-list li { margin: 0; border-bottom: 1px solid var(--line); }
.notice-list li:last-child { border-bottom: 0; }
.notice-list a {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 18px 4px;
  color: var(--ink);
  font-weight: 600;
}
.notice-list a:hover { color: var(--red); }
.notice-date {
  flex: 0 0 auto;
  font-size: .78rem;
  color: var(--muted);
  font-weight: 600;
  padding-top: 2px;
  min-width: 96px;
}

/* Person / team */
.person {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 20px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.person .avatar {
  width: 96px;
  height: 96px;
  margin: 0 auto 14px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: .02em;
  object-fit: cover; /* no-op on the initials div, crops photo avatars neatly */
}
.person b { display: block; color: var(--ink); font-size: .96rem; }
.person span { font-size: .82rem; color: var(--muted); }

.faculty-list {
  columns: 3;
  column-gap: 32px;
  list-style: none;
  padding: 0;
  margin: 0;
}
.faculty-list li {
  break-inside: avoid;
  padding: 10px 0;
  border-bottom: 1px solid var(--line);
  font-size: .93rem;
}
.faculty-list b { display: block; color: var(--ink); font-weight: 650; }
.faculty-list span { color: var(--muted); font-size: .82rem; }

/* Message / quote */
.message {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}
.message-photo {
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  border-radius: var(--radius);
  padding: 30px 24px;
  text-align: center;
  color: #fff;
}
.message-photo .avatar {
  width: 92px;
  height: 92px;
  margin: 0 auto 16px;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  border: 2px solid rgba(255,255,255,.28);
  display: grid;
  place-items: center;
  font-size: 1.7rem;
  font-weight: 800;
  object-fit: cover; /* no-op on the initials div, crops photo avatars neatly */
}
.message-photo b { display: block; font-size: 1.05rem; }
.message-photo span { font-size: .84rem; color: rgba(255,255,255,.7); }
/* A quote sets its own margins to nothing so a card can space it; the button
   underneath then needs its own gap, or it reads as the last line of the
   quotation rather than as the way out of it. */
.message .btn-row { margin-top: clamp(20px, 2.5vw, 28px); }

blockquote {
  margin: 0;
  font-size: clamp(1.02rem, 1.8vw, 1.2rem);
  color: var(--body);
}
blockquote::before {
  content: "\201C";
  display: block;
  font-size: 3.4rem;
  line-height: .6;
  color: var(--red);
  margin-bottom: 12px;
  font-family: Georgia, serif;
}

/* CTA band */
.cta {
  background: linear-gradient(135deg, var(--red) 0%, #b0181d 100%);
  color: #fff;
  border-radius: 22px;
  padding: clamp(32px, 5vw, 56px);
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 20px 50px rgba(224,35,41,.24);
}
.cta h2 { color: #fff; margin-bottom: 6px; }
.cta p { color: rgba(255,255,255,.88); margin: 0; max-width: 52ch; }

/* Forms */
.form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field.full { grid-column: 1 / -1; }
.field label { font-size: .85rem; font-weight: 700; color: var(--ink); }
.field .req { color: var(--red); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  font: inherit;
  font-size: .95rem;
  color: var(--ink);
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.field textarea { min-height: 130px; resize: vertical; }

/* A select carries the browser's own arrow, which is a different shape and
   weight on every platform and ignores the site's palette. Drawing our own
   keeps it the same chevron the rest of the site uses. The SVG is inlined as a
   data URI so a select needs no extra markup and no extra request.

   The right padding has to clear the arrow, or a long programme name runs
   underneath it. */
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 44px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%237b8598' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 20px 20px;
  cursor: pointer;
}
/* Darkens with the border it sits next to, so the whole control reacts as one. */
.field select:hover {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23253670' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.field select:focus {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23253670' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
/* Nothing to open, so it should not invite a click. */
.field select:disabled {
  cursor: not-allowed;
  color: var(--muted);
  background-color: var(--tint);
}
/* An unchosen select reads as placeholder text, like the inputs beside it. */
.field select:has(option[value=""]:checked) { color: var(--muted); }
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(37,54,112,.12);
}
.field .hint { font-size: .78rem; color: var(--muted); }
.form-note {
  margin-top: 16px;
  padding: 13px 16px;
  border-radius: 12px;
  background: var(--tint);
  border-left: 3px solid var(--navy);
  font-size: .85rem;
  color: var(--body);
}

/* Contact info tiles */
.info-tile {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: 22px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.info-tile .icon { margin: 0; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.info-tile b { display: block; color: var(--ink); }
.info-tile a, .info-tile span { font-size: .95rem; }

/* Page hero (inner pages) */
.page-hero {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%);
  color: rgba(255,255,255,.82);
  padding: clamp(48px, 7vw, 84px) 0;
  position: relative;
  overflow: hidden;
}
.page-hero::after {
  content: "";
  position: absolute;
  inset: -40% -20% auto 60%;
  height: 140%;
  background: radial-gradient(closest-side, rgba(224,35,41,.28), transparent);
}
.page-hero .wrap { position: relative; }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero p { color: rgba(255,255,255,.8); max-width: 60ch; margin: 0; }
/* An association's own mark beside the page title. The logo is drawn for light
   backgrounds, so it sits on a white tile rather than directly on the navy —
   and the tile is padded, because a logo pressed to the edge of its container
   reads as a cropped image. */
.assoc-head {
  display: flex;
  align-items: center;
  gap: clamp(18px, 3vw, 30px);
}
.assoc-logo {
  flex: none;
  /* Sized to the lockup, not to the file. The logo is a wide mark-plus-wordmark
     centred on a square canvas — measured, the artwork is 77% x 38% of it at
     roughly 2:1 — so a square tile would draw it at a third of the available
     height. The tile takes the artwork's proportions and the scale below zooms
     past the canvas margin, which crops white against white and so is
     invisible. */
  width: clamp(210px, 26vw, 290px);
  aspect-ratio: 2.1 / 1;
  border-radius: 18px;
  background: #fff;
  overflow: hidden;
  position: relative;
  box-shadow: 0 16px 40px rgba(6, 12, 34, .28);
}
.assoc-logo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  /* Leaves roughly 4% of the tile as clear space on every side — enough to read
     as padding, not enough to shrink the wordmark. */
  transform: scale(1.14);
}

/* The journal's mark arrives on a black canvas rather than a white one, so its
   tile is black — same idea, opposite ground. Measured, the artwork is 60% x 67%
   of the canvas at 3.6:1, sitting a shade left of and above centre, which is
   what the wider ratio and the nudged object-position below account for. */
.assoc-logo--dark {
  background: #000;
  aspect-ratio: 3.5 / 1;
  width: clamp(240px, 32vw, 360px);
  /* A hairline of light, so a black plaque on a navy hero reads as a plaque
     rather than as a hole punched in the gradient. */
  box-shadow: 0 16px 40px rgba(6, 12, 34, .34), inset 0 0 0 1px rgba(255, 255, 255, .16);
}
.assoc-logo--dark img {
  object-position: 47% 48%;
  /* 1.22 is the most this can zoom before the swoosh at the artwork's right edge
     (76.9% of the canvas) crosses the visible band, which at this scale ends at
     82%. */
  transform: scale(1.22);
}

@media (max-width: 560px) {
  /* Stacked, so neither the mark nor the title has to shrink to share a line. */
  .assoc-head { flex-direction: column; align-items: flex-start; gap: 18px; }
}

.crumbs { font-size: .84rem; color: rgba(255,255,255,.62); margin-bottom: 14px; }
.crumbs a { color: rgba(255,255,255,.82); }
.crumbs a:hover { color: #fff; }

/* Anchor chip nav */
.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 32px; }
.chips a {
  padding: 9px 16px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: #fff;
  font-weight: 700;
  font-size: .87rem;
  color: var(--navy);
}
.chips a:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* ---------- Footer ---------- */
.site-footer {
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: rgba(255,255,255,.72);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  gap: 48px;
  padding: clamp(48px, 6vw, 76px) 0 52px;
}
/* Column headings carry a short red rule underneath. */
.site-footer h4 {
  position: relative;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
  margin-bottom: 30px;
  padding-bottom: 14px;
}
.site-footer h4::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 40px;
  height: 3px;
  border-radius: 2px;
  background: var(--red);
}
.site-footer a { color: rgba(255,255,255,.78); }
.site-footer a:hover { color: #fff; text-decoration: none; }
.site-footer p { color: rgba(255,255,255,.72); font-size: .95rem; }

/* The mark is a dark-on-light lockup, so flatten it to pure white for the
   dark footer rather than shipping a second image. */
.footer-logo { display: inline-block; margin-bottom: 22px; }
.footer-logo img { height: 60px; filter: brightness(0) invert(1); }

.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: 14px; }
.footer-links a {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: .95rem;
  transition: transform .2s ease, color .2s ease;
}
.footer-links a::before {
  content: "";
  width: 7px;
  height: 7px;
  flex: none;
  border-right: 2px solid var(--red);
  border-top: 2px solid var(--red);
  transform: rotate(45deg);
}
.footer-links a:hover { transform: translateX(5px); }

.footer-contact { list-style: none; padding: 0; margin: 0; font-size: .95rem; }
.footer-contact li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 18px;
}
.footer-contact svg { color: var(--red); flex: none; margin-top: 2px; }

.socials { display: flex; gap: 14px; margin-top: 6px; }
.socials a,
.socials span {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255,255,255,.28);
  background: transparent;
  color: #fff;
  transition: background .2s ease, border-color .2s ease, transform .2s ease;
}
.socials a:hover {
  background: var(--red);
  border-color: var(--red);
  transform: translateY(-3px);
}

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.14);
  padding: 22px 0 28px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 24px;
  justify-content: space-between;
  font-size: .88rem;
  color: rgba(255,255,255,.6);
}
.footer-bottom b { color: #fff; font-weight: 700; }

/* ---------- Responsive ---------- */
@media (max-width: 1024px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .faculty-list { columns: 2; }
  .footer-top { grid-template-columns: 1fr 1fr; gap: 32px; }
  .hero .wrap { grid-template-columns: 1fr; }
  /* justify-self rather than auto margins: auto margins make a grid item size
     to its content, and every child here is absolutely positioned — which
     collapsed the panel to a few pixels wide. */
  .hero-shot { width: 100%; max-width: 520px; justify-self: center; }
}

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

  /* backdrop-filter makes an element a containing block for fixed-position
     descendants, which sized the drawer to the header (78px) instead of the
     viewport. Drop the decorative blur on mobile so the drawer can be full
     height again. */
  .site-header {
    backdrop-filter: none;
    background: var(--surface);
  }

  .nav {
    position: fixed;
    inset: 0 0 0 auto;
    height: 100vh;
    height: 100dvh;
    width: min(420px, 100vw);
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    background: #fff;
    padding: 22px 18px;
    box-shadow: var(--shadow-lg);
    transform: translateX(100%);
    transition: transform .24s ease;
    overflow-y: auto;
    z-index: 80;
  }
  .nav.open { transform: translateX(0); }
  /* Centred rows, each on its own rule line, so the drawer reads as a list
     rather than a ragged column. The child combinator matters: it keeps these
     row styles off the social icons nested in .nav-socials, which otherwise
     inherited the divider and the hover underline. */
  .nav > a, .has-menu > button {
    width: 100%;
    justify-content: center;
    text-align: center;
    padding: 15px 16px;
  }
  .nav > a:not(.btn) { border-bottom: 1px solid var(--line); }
  .nav > a:not(.btn):last-of-type { border-bottom: 0; }
  /* The current page keeps its red rule, drawn the full width of the row
     rather than under the word as it is in the desktop bar. */
  .nav > a:not(.btn)::after { left: 0; right: 0; width: auto; }
  .nav > a:not(.btn)[aria-current="page"] { color: var(--red); font-weight: 700; }

  /* Logo and close button, mirroring the header the drawer covers. */
  .nav-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 2px 16px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--line);
  }
  .nav-head img { height: 42px; width: auto; }
  .nav-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 10px;
    background: transparent;
    color: var(--navy);
    cursor: pointer;
  }
  .nav-close:hover { background: var(--tint); }

  .nav-socials {
    display: flex;
    justify-content: center;
    gap: 18px;
    margin-top: 22px;
  }
  .nav-socials a {
    width: auto;
    padding: 8px;
    color: var(--navy);
    border-bottom: 0;
  }
  .nav-socials a:hover { color: var(--red); }
  /* The nav-link hover underline has no business under an icon. */
  .nav-socials a::after { display: none; }
  /* Full-width call to action at the foot of the list — the inline pill was
     inheriting a desktop left margin and sat off-centre. */
  .nav > a.btn {
    width: 100%;
    margin: 14px 0 0;
    border-radius: 12px;
  }
  .has-menu { width: 100%; }
  /* On mobile the dropdown expands inline rather than floating. */
  .menu {
    position: static;
    box-shadow: none;
    border: 0;
    border-left: 2px solid var(--line);
    border-radius: 0;
    margin: 4px 0 4px 16px;
    padding: 0 0 0 8px;
    min-width: 0;
  }
  .nav-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(19,29,61,.5);
    /* Must sit BELOW .site-header (z-index 60). The drawer lives inside the
       header, so its own z-index is scoped to the header's stacking context —
       a backdrop above 60 would paint over the drawer itself. */
    z-index: 55;
    opacity: 0;
    pointer-events: none;
    transition: opacity .2s ease;
  }
  .nav-backdrop.show { opacity: 1; pointer-events: auto; }
  .message { grid-template-columns: 1fr; }
  .message-photo { max-width: 260px; }
}

@media (max-width: 720px) {
  /* Two columns for tablets only — below 561px the single-column rule further
     up must win, and this block would otherwise override it by coming later. */
  .stats { margin-top: 0; border-radius: 14px; }
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
  .faculty-list { columns: 1; }
  .form-grid { grid-template-columns: 1fr; }
  .footer-top { grid-template-columns: 1fr; }
  .topbar .wrap { flex-wrap: nowrap; justify-content: center; gap: 6px; padding: 8px 12px; font-size: 0.68rem; }
  .topbar .wrap > a, .topbar .wrap > span { white-space: nowrap; }
  .cta { flex-direction: column; align-items: flex-start; }
  .notice-list a { flex-direction: column; gap: 4px; }
  .notice-date { min-width: 0; }
  .btn { width: 100%; }
  .btn-row .btn { width: 100%; }
  .chips { gap: 8px; }
}


/* ---------- Gallery ---------- */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
}
.tile {
  position: relative;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  cursor: zoom-in;
  background: var(--tint-2);
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.tile img {
  width: 100%;
  height: 100%;
  /* cover, so mixed aspect ratios still tile evenly instead of distorting */
  object-fit: cover;
  transition: transform .35s ease;
}
.tile:hover img { transform: scale(1.06); }
.tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(19,29,61,.35), transparent 55%);
  opacity: 0;
  transition: opacity .25s ease;
}
.tile:hover::after { opacity: 1; }

/* Photo strip used on the homepage */
.photo-strip {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
.photo-strip a {
  display: block;
  border-radius: 14px;
  overflow: hidden;
  aspect-ratio: 4 / 3;
  box-shadow: var(--shadow-sm);
}
.photo-strip img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .35s ease;
}
.photo-strip a:hover img { transform: scale(1.06); }

/* Framed feature image */
.shot {
  border-radius: 18px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* ---------- Lightbox ---------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(10,14,28,.94);
  display: grid;
  place-items: center;
  padding: 4vh 6vw;
}
.lightbox[hidden] { display: none; }
.lightbox img {
  max-width: 100%;
  max-height: 92vh;
  border-radius: 10px;
  box-shadow: 0 30px 80px rgba(0,0,0,.6);
}
.lightbox-close,
.lightbox-nav {
  position: absolute;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.12);
  color: #fff;
  border-radius: 50%;
  width: 50px;
  height: 50px;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  display: grid;
  place-items: center;
}
.lightbox-close:hover,
.lightbox-nav:hover { background: rgba(255,255,255,.24); }
.lightbox-close { top: 20px; right: 20px; font-size: 1.5rem; }
.lightbox-nav.prev { left: 16px; }
.lightbox-nav.next { right: 16px; }

@media (max-width: 720px) {
  .gallery-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
  .photo-strip { grid-template-columns: repeat(2, 1fr); }
  .lightbox { padding: 2vh 2vw; }
  .lightbox-nav { width: 44px; height: 44px; }
  .lightbox-nav.prev { left: 6px; }
  .lightbox-nav.next { right: 6px; }
}

/* ---------- Scroll reveal & motion ---------- */
/* Elements marked [data-reveal] start shifted and transparent, then settle
   once they scroll into view. The .is-in class is added by site.js via an
   IntersectionObserver. */
[data-reveal] {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
[data-reveal="left"]  { transform: translateX(-32px); }
[data-reveal="right"] { transform: translateX(32px); }
[data-reveal="scale"] { transform: scale(.94); }
[data-reveal].is-in {
  opacity: 1;
  transform: none;
}

/* Children of a [data-stagger] container reveal one after another. */
[data-stagger] > * { transition-delay: calc(var(--i, 0) * 90ms); }

/* Hero entrance — runs on load rather than on scroll. */
.hero-in { animation: rise-in .85s cubic-bezier(.16,.84,.44,1) both; }
.hero-in:nth-child(2) { animation-delay: .1s; }
.hero-in:nth-child(3) { animation-delay: .2s; }
.hero-in:nth-child(4) { animation-delay: .3s; }
@keyframes rise-in {
  from { opacity: 0; transform: translateY(26px); }
  to   { opacity: 1; transform: none; }
}

/* Count-up figures hold their own width so the layout doesn't jitter as the
   digits change. */
.counting { font-variant-numeric: tabular-nums; }

/* Primary buttons pulse gently on hover. */
.btn--primary:hover { animation: pulse-glow 1.5s ease-in-out infinite; }
@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 8px 22px rgba(224,35,41,.28); }
  50%      { box-shadow: 0 0 20px 5px rgba(224,35,41,.32); }
}

/* Cards lift on hover. (.card--link already does this for linked cards; this
   extends it to the plain content cards and programme tiles.) */
.card:hover, .prog:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6dcea;
}

/* ---------- Career outcomes ---------- */
.outcomes {
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: #fff;
}
.outcomes .eyebrow { color: rgba(255,255,255,.72); }
.outcomes h2 { color: #fff; }
.outcomes .lead { color: rgba(255,255,255,.78); }
.outcome {
  text-align: center;
  padding: 30px 22px;
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.12);
  border-radius: var(--radius);
}
.outcome b {
  display: block;
  font-size: clamp(2rem, 4vw, 2.6rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.1;
}
.outcome span { display: block; margin-top: 8px; font-weight: 650; color: #fff; }
.outcome small { display: block; margin-top: 6px; font-size: .84rem; color: rgba(255,255,255,.68); }

/* ---------- Testimonials ---------- */
.stars { color: #f5a623; letter-spacing: 2px; margin-bottom: 12px; }
.quote-body { font-style: italic; color: var(--body); }
.quote-person { display: flex; align-items: center; gap: 12px; margin-top: 18px; }
.quote-person .avatar {
  width: 44px; height: 44px; flex: 0 0 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--navy), var(--navy-700));
  color: #fff; font-weight: 800; font-size: .9rem;
}
.quote-person b { display: block; color: var(--ink); font-size: .95rem; }
.quote-person span { font-size: .82rem; color: var(--muted); }

/* ---------- Admissions timeline ---------- */
.timeline { display: grid; gap: 18px; counter-reset: step; }
.timeline-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: 18px;
  align-items: start;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
}
.timeline-step .num {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--red);
  color: #fff;
  font-weight: 800;
  font-size: 1.1rem;
}
.timeline-step h3 { margin-bottom: 6px; }
.timeline-step p { margin: 0; font-size: .94rem; }

/* ---------- Accreditations & industry partners ---------- */
.partners-title {
  text-align: center;
  color: var(--muted);
  font-size: .875rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 600;
  margin-bottom: 48px;
}
.partner-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 32px;
  justify-content: center;
}
.partner {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 40px 24px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  min-height: 240px;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.partner:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow);
  border-color: #d6dcea;
}
.partner-logo {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
}
.partner-logo img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.partner h4 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  line-height: 1.4;
}

@media (max-width: 720px) {
  .timeline-step { grid-template-columns: 44px 1fr; gap: 14px; padding: 18px; }
  .timeline-step .num { width: 44px; height: 44px; font-size: 1rem; }
  .partner-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; }
  .partner { padding: 26px 14px; gap: 16px; min-height: 0; }
  .partner-logo { width: 72px; height: 72px; }
  .partner h4 { font-size: .95rem; }
}

/* ---------- FAQ accordion ---------- */
/* Built on <details>/<summary> so it opens and closes with no JavaScript. */
.faq { display: grid; gap: 14px; max-width: 760px; margin: 0 auto; }
.faq details {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm, 12px);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 22px;
  font-weight: 650;
  font-size: .96rem;
  color: var(--navy);
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  width: 10px;
  height: 10px;
  flex: none;
  border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted);
  transform: rotate(45deg) translateY(-2px);
  transition: transform .25s ease;
}
.faq details[open] summary { color: var(--red); }
.faq details[open] summary::after {
  transform: rotate(-135deg) translateY(-2px);
  border-color: var(--red);
}
.faq summary:hover { color: var(--red); }
.faq .faq-answer {
  padding: 0 22px 20px;
  margin: 0;
  font-size: .93rem;
  color: var(--body);
}

/* ---------- Hero contact pills ---------- */
.hero-pills { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.hero-pills a,
.hero-pills span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.28);
  background: rgba(255,255,255,.08);
  color: #fff;
  font-size: .92rem;
  font-weight: 600;
  transition: background .2s ease, border-color .2s ease;
}
.hero-pills a:hover { background: rgba(255,255,255,.18); border-color: #fff; color: #fff; }
.hero-pills svg { color: var(--red-300, #ff8a8e); flex: none; }

/* The same chips over a light band, for a heading that is centred on the tint
   rather than set on the navy: ink on white, and centred with the heading above
   them instead of ranged left under it. */
.hero-pills--ink { justify-content: center; }
.hero-pills--ink a,
.hero-pills--ink span {
  border-color: var(--line);
  background: #fff;
  color: var(--navy);
}
.hero-pills--ink a:hover { background: var(--navy); border-color: var(--navy); color: #fff; }
.hero-pills--ink a:hover svg { color: #fff; }
.hero-pills--ink svg { color: var(--red); }

/* ---------- Values ---------- */
.values {
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: #fff;
}
.values .eyebrow { color: rgba(255,255,255,.72); }
.values h2 { color: #fff; }
.values .lead { color: rgba(255,255,255,.78); }
.values-intro {
  border-left: 3px solid var(--red);
  padding-left: 22px;
}
.value-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0;
  margin-top: 42px;
}
.value {
  display: grid;
  grid-template-columns: 76px 1fr;
  gap: 18px;
  align-items: start;
  padding: 30px 26px;
  border-top: 1px solid rgba(255,255,255,.12);
}
/* The vertical rule between the two columns. */
.value:nth-child(odd) { border-right: 1px solid rgba(255,255,255,.12); }
.value .value-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--red);
  line-height: 1;
}
.value h3 {
  color: #fff;
  font-size: 1.05rem;
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.value h3::before {
  content: "";
  width: 18px;
  height: 2px;
  background: var(--red);
  flex: none;
}
.value p { margin: 0; font-size: .92rem; color: rgba(255,255,255,.72); }

/* ---------- Journey timeline ---------- */
.journey { position: relative; margin-top: 44px; }
/* The spine the year markers sit on. */
.journey::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 2px;
  margin-left: -1px;
  background: var(--line);
}
.journey-item {
  position: relative;
  width: 50%;
  padding: 0 42px 30px 0;
}
.journey-item:nth-child(even) {
  margin-left: 50%;
  padding: 0 0 30px 42px;
}
.journey-item .dot {
  position: absolute;
  top: 18px;
  right: -9px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--red);
  border: 3px solid #fff;
  box-shadow: 0 0 0 2px var(--line);
}
.journey-item:nth-child(even) .dot { right: auto; left: -9px; }
.journey-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 22px 24px;
  box-shadow: var(--shadow-sm);
  transition: transform .25s ease, box-shadow .25s ease;
}
.journey-card:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.journey-year {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: .8rem;
  font-weight: 700;
  margin-bottom: 12px;
}
.journey-card h3 { font-size: 1rem; margin-bottom: 6px; }
.journey-card p { margin: 0; font-size: .9rem; }

@media (max-width: 860px) {
  .value-grid { grid-template-columns: 1fr; }
  .value:nth-child(odd) { border-right: 0; }
  /* Collapse the alternating timeline onto a single left-hand spine. */
  .journey::before { left: 9px; }
  .journey-item,
  .journey-item:nth-child(even) {
    width: 100%;
    margin-left: 0;
    padding: 0 0 24px 38px;
  }
  .journey-item .dot,
  .journey-item:nth-child(even) .dot { left: 0; right: auto; }
}

/* ---------- Fixed social rail ---------- */
.social-rail {
  position: fixed;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  display: flex;
  flex-direction: column;
  box-shadow: 0 6px 18px rgba(0,0,0,.15);
}
.social-rail a {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  background: var(--red);
  color: #fff;
  border-bottom: 1px solid rgba(255,255,255,.2);
  transition: background .2s ease, padding-left .2s ease;
}
.social-rail a:first-child { border-top-right-radius: 12px; }
.social-rail a:last-child  { border-bottom: 0; border-bottom-right-radius: 12px; }
.social-rail a:hover { background: var(--red-700); color: #fff; }

@media (max-width: 720px) {
  /* A 52px column pinned to the side would sit on top of body copy on a phone,
     so the rail lies down instead: a short bar in the bottom-left corner, clear
     of the message button in the bottom-right. The footer gets matching bottom
     padding so the bar never covers the last line of the page. */
  .social-rail {
    top: auto;
    bottom: 16px;
    left: 12px;
    transform: none;
    flex-direction: row;
    border-radius: 12px;
    overflow: hidden;
  }
  .social-rail a {
    width: 40px;
    height: 40px;
    border-bottom: 0;
    border-right: 1px solid rgba(255,255,255,.2);
  }
  .social-rail a:first-child { border-radius: 0; }
  .social-rail a:last-child { border-right: 0; border-radius: 0; }
  .site-footer { padding-bottom: 76px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  /* Never leave revealed content stuck invisible when motion is off. */
  [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* ---------- Academic Programmes: flip cards ---------- */
/* The programmes grid shows a photo tile that turns over on hover (or on tap,
   see the `is-flipped` toggle in site.js) to reveal the summary and a link
   down to the full course detail. */
.offer-head {
  max-width: 720px;
  margin: 0 auto clamp(36px, 5vw, 64px);
  text-align: center;
}
.offer-head h1 {
  font-size: clamp(2.1rem, 5vw, 3.5rem);
  color: var(--navy);
  margin-bottom: 18px;
}
.head-rule {
  width: 80px;
  height: 4px;
  border-radius: 2px;
  background: var(--red);
  margin: 0 auto 22px;
}
.offer-head p {
  max-width: 650px;
  margin: 0 auto;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
}
/* Where the block opens a page rather than introducing a grid, nothing follows
   it inside its own section — so the gap it was leaving for that is dropped. */
.offer-head:only-child { margin-bottom: 0; }

.flip-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 320px), 1fr));
  gap: 40px;
}

.flip-card {
  height: 380px;
  perspective: 1500px;
  cursor: pointer;
}
.flip-card-inner {
  position: relative;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
  transition: transform .8s cubic-bezier(.175, .885, .32, 1.275);
}
.flip-card:hover .flip-card-inner,
.flip-card:focus-within .flip-card-inner,
.flip-card.is-flipped .flip-card-inner { transform: rotateY(180deg); }

.flip-card-front,
.flip-card-back {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* The face that is turned away must not swallow clicks meant for the other. */
.flip-card-front { z-index: 2; }
.flip-card-back { z-index: 1; }
.flip-card:hover .flip-card-front,
.flip-card:focus-within .flip-card-front,
.flip-card.is-flipped .flip-card-front { z-index: 1; pointer-events: none; }
.flip-card:hover .flip-card-back,
.flip-card:focus-within .flip-card-back,
.flip-card.is-flipped .flip-card-back { z-index: 2; pointer-events: auto; }

.flip-card-front {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 28px;
  color: #fff;
  background-position: center;
  background-size: cover;
}
.flip-card-front::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(19,29,61,.10) 0%, rgba(19,29,61,.48) 40%, rgba(19,29,61,.95) 100%);
}
.flip-card-front .fc-body { position: relative; z-index: 2; }
.flip-card-front .eyebrow {
  color: var(--red);
  margin-bottom: 10px;
  text-shadow: 0 1px 3px rgba(0,0,0,.5);
}
.flip-card-front h3 {
  margin: 0 0 6px;
  color: #fff;
  font-size: 1.75rem;
  text-shadow: 0 2px 4px rgba(0,0,0,.4);
}
.flip-card-front .fc-duration {
  font-size: .9rem;
  color: rgba(255,255,255,.9);
  text-shadow: 0 1px 2px rgba(0,0,0,.4);
}

.flip-card-back {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 30px;
  background: #fff;
  text-align: left;
  transform: rotateY(180deg);
}
.flip-card-back h3 {
  margin: 0 0 12px;
  color: var(--navy);
  font-size: 1.5rem;
}
.flip-card-back p { margin: 0; font-size: .95rem; }
.flip-card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.flip-card-foot b { color: var(--ink); font-size: .9rem; }
.flip-card-foot .btn {
  min-height: 40px;
  padding: 8px 16px;
  font-size: .85rem;
  border-radius: var(--radius-sm);
}

@media (max-width: 560px) {
  .flip-grid { gap: 22px; }
  /* A card only a phone wide has to fit the same summary in a much narrower
     column, so the face gets a little taller and the copy a little smaller —
     the longest one (BSc.CSIT) clipped its last line otherwise. */
  .flip-card { height: 372px; }
  .flip-card-front { padding: 22px; }
  .flip-card-front h3 { font-size: 1.55rem; }
  .flip-card-back { padding: 22px 20px; }
  .flip-card-back h3 { font-size: 1.35rem; margin-bottom: 10px; }
  .flip-card-back p { font-size: .92rem; }
  .flip-card-foot { padding-top: 14px; }
  /* "4 Years" broke over two lines once the button took its share. */
  .flip-card-foot b { white-space: nowrap; }
  .flip-card-foot .btn { padding: 8px 13px; }
}

/* ---------- Placement page ---------- */
/* A light split hero: the pitch on the left, the four headline numbers as a
   hairline-divided panel on the right. */
.plc-hero {
  background: #fff;
  border-bottom: 1px solid var(--line);
  padding: clamp(40px, 6vw, 76px) 0;
}
.plc-hero .wrap {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: center;
}
.crumbs--ink { color: var(--muted); }
.crumbs--ink a { color: var(--body); }
.crumbs--ink a:hover { color: var(--red); }

/* Eyebrow with the short red rule in front of it. */
.eyebrow--rule { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.eyebrow--rule::before {
  content: "";
  width: 36px;
  height: 4px;
  border-radius: 2px;
  background: var(--red);
  flex: none;
}
.plc-hero h1 { margin-bottom: 14px; }
/* Second headline line, drawn as an outline so the claim reads as a graphic. */
.outline-red {
  color: transparent;
  -webkit-text-stroke: 2px var(--red);
  text-stroke: 2px var(--red);
  paint-order: stroke fill;
}
.plc-hero .lead { max-width: 52ch; margin-bottom: 26px; }

.stat-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.stat-cell { background: #fff; padding: clamp(20px, 3vw, 30px); }
.stat-cell svg { color: var(--red); margin-bottom: 12px; }
.stat-cell b {
  display: block;
  font-size: clamp(1.7rem, 3vw, 2.2rem);
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.stat-cell span { display: block; margin-top: 8px; font-size: .85rem; color: var(--muted); font-weight: 600; }

/* Hiring partners marquee. The track is duplicated so the loop is seamless;
   the copy is aria-hidden so screen readers hear each company once. */
.marquee { overflow: hidden; position: relative; }
.marquee::before,
.marquee::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 90px;
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(90deg, var(--tint), transparent); }
.marquee::after { right: 0; background: linear-gradient(270deg, var(--tint), transparent); }
.marquee-track {
  display: flex;
  gap: 18px;
  width: max-content;
  animation: marquee 40s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.co-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 18px 26px;
  min-width: 190px;
  text-align: center;
  box-shadow: var(--shadow-sm);
}
.co-card img {
  width: 40px;
  height: 40px;
  object-fit: contain;
  margin: 0 auto 10px;
}
/* A stand-in for a logo the college doesn't hold a usable file for. Same box
   as the image it replaces, so a row of tiles keeps its rhythm — a hole in the
   middle of the row reads as a broken page, which is what a blank logo file
   was doing here. Replace it with an <img> as soon as there is one to use. */
.co-mark {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  margin: 0 auto 10px;
  border-radius: 10px;
  background: var(--brand-soft, #eef2ff);
  color: var(--brand, #2f4bab);
  font-size: 1.05rem;
  font-weight: 800;
}
.co-card b { display: block; color: var(--ink); font-size: .95rem; font-weight: 700; }
.co-card span { font-size: .78rem; color: var(--muted); }

/* Four-step process: sticky intro on the left, timeline on the right. */
.plc-steps {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: clamp(32px, 5vw, 64px);
  align-items: start;
}
.plc-steps-head { position: sticky; top: calc(var(--header-h) + 24px); }
.plc-steps-head .section-head { margin-bottom: 26px; }
.plc-timeline {
  position: relative;
  padding-left: 40px;
  display: grid;
  gap: 26px;
}
.plc-timeline::before {
  content: "";
  position: absolute;
  left: 0;
  top: 24px;
  bottom: 24px;
  width: 2px;
  background: var(--line);
}
.plc-step { position: relative; }
.plc-step .dot {
  position: absolute;
  left: -40px;
  top: 22px;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: #fff;
  border: 2px solid var(--line);
  color: var(--navy);
  font-weight: 800;
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
  transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.plc-step-card {
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  transition: background .25s ease, border-color .25s ease, transform .25s ease;
}
.plc-step:hover .dot { background: var(--red); border-color: var(--red); color: #fff; }
.plc-step:hover .plc-step-card { background: #fff; border-color: #d6dcea; transform: translateY(-2px); }
.plc-step-num {
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 8px;
}
.plc-step-card h3 { margin-bottom: 6px; }
.plc-step-card p { margin: 0; font-size: .94rem; }

/* Placement quote card: company name picked out in red. */
.quote-person .at { color: var(--red); font-weight: 650; }

/* Navy closing band with the soft off-canvas circles. Shared by the placement
   and careers pages. */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before,
.cta-band::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}
.cta-band::before { top: -120px; right: -100px; width: 400px; height: 400px; background: rgba(224,35,41,.14); }
.cta-band::after { bottom: -100px; left: -80px; width: 300px; height: 300px; background: rgba(255,255,255,.05); }
.cta-band .wrap {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  align-items: center;
  justify-content: space-between;
}
.cta-band p { margin: 0; color: rgba(255,255,255,.7); }

.closing { text-align: center; }
.closing h3 { margin-bottom: 6px; }
.closing p { color: var(--muted); }
.arrow-link { display: inline-flex; align-items: center; gap: 6px; font-weight: 700; color: var(--red); }
.arrow-link:hover { color: var(--red-700); }
.arrow-link svg { transition: transform .2s ease; }
.arrow-link:hover svg { transform: translateX(3px); }

@media (max-width: 980px) {
  .plc-hero .wrap { grid-template-columns: 1fr; }
  .plc-steps { grid-template-columns: 1fr; }
  .plc-steps-head { position: static; }
}
@media (max-width: 560px) {
  .stat-grid { grid-template-columns: 1fr; }
  .plc-timeline { padding-left: 30px; }
  .plc-step .dot { left: -30px; width: 36px; height: 36px; font-size: .85rem; }
  .plc-step-card { padding: 20px; }
  .co-card { min-width: 150px; padding: 14px 18px; }
}
@media (prefers-reduced-motion: reduce) {
  .marquee-track { animation: none; }
}

/* ---------- Contact page ---------- */
.contact-grid {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(24px, 4vw, 44px);
  align-items: start;
}
.contact-info .lead { margin-bottom: 26px; }

.contact-points { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.contact-points li {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin: 0;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  box-shadow: var(--shadow-sm);
  transition: border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.contact-points li:hover { border-color: #d6dcea; transform: translateY(-2px); box-shadow: var(--shadow); }
.contact-points .icon { margin: 0; width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; }
.contact-points b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 2px; }
.contact-points span { font-size: .94rem; color: var(--body); }
.contact-points a { color: var(--navy); font-weight: 650; }
.contact-points a:hover { color: var(--red); }

/* Opening hours sit under the contact rows as a quiet tinted note. */
.contact-hours {
  margin-top: 18px;
  background: var(--tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
}
.contact-hours b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: 6px; }
.contact-hours dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 16px; margin: 0; font-size: .92rem; }
.contact-hours dt { color: var(--muted); }
.contact-hours dd { margin: 0; color: var(--body); font-weight: 600; text-align: right; }

.contact-form-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(24px, 3.5vw, 38px);
  box-shadow: var(--shadow);
}
.contact-form-card h2 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); margin-bottom: 6px; }
.contact-form-card > p { color: var(--muted); font-size: .94rem; margin-bottom: 24px; }
.contact-form-card .form-grid { margin-bottom: 20px; }
.btn--block { width: 100%; }

.contact-map {
  margin-top: clamp(32px, 5vw, 56px);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
  background: var(--tint);
}
.contact-map iframe { filter: saturate(.92); }

@media (max-width: 900px) {
  .contact-grid { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .contact-points li { padding: 14px 16px; gap: 12px; }
  .contact-hours dl { grid-template-columns: 1fr; gap: 2px; }
  .contact-hours dd { text-align: left; }
}

/* ---------- Careers: current openings ---------- */
.job-list { display: grid; gap: 16px; max-width: 860px; margin: 0 auto; }
.job-card {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 24px 26px;
  box-shadow: var(--shadow-sm);
  color: var(--body);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.job-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
  border-color: #d6dcea;
  color: var(--body);
}
.job-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
/* Department chip: same shape as .pill but sentence case, so it reads as a
   label rather than a status. */
.pill--soft {
  background: rgba(37,54,112,.08);
  color: var(--navy);
  text-transform: none;
  letter-spacing: .01em;
  font-weight: 700;
}
.job-card h3 { font-size: clamp(1.05rem, 1.6vw, 1.2rem); margin: 0 0 10px; }
/* A line about the post, between its title and its location. Optional — the
   cards shipped without one, and most vacancies need no explaining. */
.job-blurb {
  margin: -4px 0 12px;
  font-size: .93rem;
  color: var(--muted);
  max-width: 60ch;
}
.job-meta { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: .88rem; color: var(--muted); }
.job-meta span { display: flex; align-items: center; gap: 7px; }
.job-meta svg { flex: none; color: var(--navy); opacity: .65; }
.job-go {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--line);
  display: grid;
  place-items: center;
  color: var(--navy);
  transition: background .25s ease, border-color .25s ease, color .25s ease;
}
.job-card:hover .job-go { background: var(--red); border-color: var(--red); color: #fff; }

@media (max-width: 560px) {
  .job-card { padding: 18px 18px; gap: 12px; }
  .job-go { width: 36px; height: 36px; }
}

/* ---------- Light page head ----------
   Used where the navy hero band would sit too heavily above a form or a list:
   centred, on white, with the title carrying the colour instead. */
.page-head {
  background: #fff;
  text-align: center;
  padding: clamp(44px, 6vw, 84px) 0 clamp(28px, 4vw, 48px);
}
.page-head .crumbs { color: var(--muted); margin-bottom: 16px; }
.page-head .crumbs a { color: var(--body); }
.page-head .crumbs a:hover { color: var(--red); }
.page-head h1 { color: var(--navy); margin-bottom: 14px; }
.page-head p { max-width: 62ch; margin: 0 auto; color: var(--body); }

/* ---------- Notices: cards + sidebar ---------- */
.notice-layout {
  display: grid;
  grid-template-columns: 1fr 330px;
  gap: clamp(24px, 3.5vw, 40px);
  align-items: start;
}
.notice-card {
  position: relative;
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 28px;
  box-shadow: var(--shadow-sm);
  color: var(--body);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.notice-card + .notice-card { margin-top: 16px; }
.notice-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); border-color: #d6dcea; color: var(--body); }
/* Thin accent along the top edge; the urgent variant turns it red. */
.notice-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--tint-2);
}
.notice-card--urgent { border-color: rgba(224,35,41,.3); }
.notice-card--urgent::before { background: linear-gradient(90deg, var(--red), #ff6b6b); }

.notice-top {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 12px;
}
.notice-tags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.notice-when { display: flex; align-items: center; gap: 7px; font-size: .85rem; color: var(--muted); }
.notice-when svg { flex: none; opacity: .7; }
.notice-card h3 { font-size: clamp(1.05rem, 1.7vw, 1.22rem); margin: 0 0 8px; }
.notice-card p { margin: 0; font-size: .94rem; }
/* Wraps a run of words that has no element of its own, so the college can edit
   it from the portal — see frontend/scripts/tag-site-content.js.

   It is a handle for text, never a box. Without this reset a page's own
   descendant selectors style it as though it were part of the design: the
   contact pills in a hero are ".hero-pills span", so a wrapper inside one
   became a second pill nested in the first. !important because those selectors
   are more specific than a single class. */
.cms-text,
.cms-text:hover {
  display: inline !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: none !important;
  box-shadow: none !important;
  width: auto !important;
  height: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  transform: none !important;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
}
.cms-text::before, .cms-text::after { content: none !important; }

/* A poster or scanned letter posted with the notice. Capped rather than left
   to fill the card: a page photographed portrait would otherwise push the rest
   of the board off the screen. */
.notice-image {
  display: block;
  width: 100%;
  max-height: 320px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--line, #e6e9f0);
  margin-top: 14px;
}

/* The file to take away — a routine, a form, the letter itself. A pill rather
   than a bare link, because it is an action among paragraphs of text. */
.notice-attachment {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 8px 14px;
  border: 1px solid var(--line, #e6e9f0);
  border-radius: 999px;
  background: var(--tint, #f6f7fb);
  color: var(--navy);
  font-size: .88rem;
  font-weight: 700;
  text-decoration: none;
  transition: border-color .2s ease, background .2s ease;
}
.notice-attachment:hover { border-color: var(--navy); background: #fff; color: var(--navy); }
.notice-attachment-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  flex: none;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: .78rem;
  line-height: 1;
}

.notice-more { display: inline-flex; align-items: center; gap: 6px; font-size: .88rem; font-weight: 700; color: var(--red); }
.notice-card:hover .notice-more svg { transform: translateX(3px); }
.notice-more svg { transition: transform .2s ease; }

/* Sidebar cards */
.side-card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 26px 24px;
  box-shadow: var(--shadow-sm);
}
.side-card + .side-card { margin-top: 20px; }
.side-card h3 { font-size: 1.15rem; margin-bottom: 16px; }
.side-card--navy {
  background: linear-gradient(140deg, var(--navy) 0%, var(--navy-900) 100%);
  border-color: transparent;
  color: rgba(255,255,255,.78);
}
.side-card--navy h3 { color: #fff; }

.event-row {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(255,255,255,.12);
}
.event-row:last-child { border-bottom: 0; padding-bottom: 0; }
.event-row .event-icon {
  width: 40px;
  height: 40px;
  border-radius: 11px;
  background: rgba(255,255,255,.1);
  display: grid;
  place-items: center;
  color: #fff;
  flex: none;
}
.event-row b { display: block; color: #fff; font-size: .92rem; font-weight: 650; }
.event-row span { font-size: .82rem; color: rgba(255,255,255,.62); }

.side-links { list-style: none; margin: 0; padding: 0; }
.side-links li { margin: 0; border-bottom: 1px solid var(--line); }
.side-links li:last-child { border-bottom: 0; }
.side-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 0;
  font-size: .92rem;
  font-weight: 600;
  color: var(--ink);
}
.side-links a:hover { color: var(--red); }
.side-links svg { flex: none; color: var(--red); }

@media (max-width: 900px) {
  .notice-layout { grid-template-columns: 1fr; }
}
@media (max-width: 560px) {
  .notice-card { padding: 20px 18px; }
}

/* The contact row in the top bar: icon then label, on one line.
   The separators are excluded from the flex rule — a bare "|" has nothing to
   sit beside and would gain a gap it does not want.
   The icons are 17px, not the 14 the markup asks for: these glyphs are drawn
   well inside their 24-unit viewBox, so a 14px box renders an 8px mark against
   a 10px cap height, which reads as floating rather than set with the text. At
   17 the drawn mark matches the cap height and needs no vertical nudging. */
.topbar a,
.topbar .wrap > span:not(.sep) {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.topbar svg {
  flex: none;
  opacity: .8;
  /* Sized in em, not px. The bar drops to 0.68rem below 720px, so a fixed 17px
     mark that sat correctly with the desktop text becomes far larger than it
     there. 1.25em is the same 17px at the desktop size and shrinks with the bar. */
  width: 1.25em;
  height: 1.25em;
}

@media (max-width: 720px) {
  /* The icons now do the separating, and with the pipes still in the row runs
     past the screen edge and clips "Lalitpur". */
  .topbar .sep { display: none; }
}

@media (max-width: 560px) {
  /* The last item still touched the screen edge on a 375px phone. A tighter
     gap and a slightly smaller mark buy back the few pixels. */
  .topbar a,
  .topbar .wrap > span:not(.sep) { gap: 4px; }
  .topbar svg { width: 1.15em; height: 1.15em; }
}