/* =====================================================================
   ILAHIA TRUST — DESIGN SYSTEM  ·  components.css
   Reusable UI: buttons · badges · cards · nav · footer · forms ·
   hero · stats · tabs · accordion · testimonials · gallery · CTA
   ===================================================================== */

/* =========================== Buttons =============================== */
.btn {
  --btn-bg: var(--color-primary);
  --btn-fg: #fff;
  display: inline-flex; align-items: center; justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  line-height: 1;
  padding: 0.9rem 1.5rem;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  color: var(--btn-fg);
  border: 1.5px solid transparent;
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-fast) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
  white-space: nowrap;
}
.btn:hover { color: #fff; transform: translateY(-2px); box-shadow: var(--shadow-md); background: var(--color-primary-hover); }
.btn:active { transform: translateY(0); box-shadow: var(--shadow-xs); }

.btn svg { width: 1.15em; height: 1.15em; }
.btn .btn-arrow { transition: transform var(--dur-base) var(--ease-out); }
.btn:hover .btn-arrow { transform: translateX(3px); }

.btn--accent  { --btn-bg: var(--brand-accent); }
.btn--accent:hover { background: var(--brand-accent-ink); }

.btn--gold { --btn-bg: var(--gold-500); --btn-fg: var(--ink-900); }
.btn--gold:hover { background: var(--gold-600); color: var(--ink-900); }

.btn--outline {
  --btn-bg: transparent; --btn-fg: var(--color-primary);
  border-color: var(--line-300); box-shadow: none;
}
.btn--outline:hover {
  background: var(--green-50); color: var(--color-primary-active);
  border-color: var(--green-200);
}

.btn--ghost {
  --btn-bg: transparent; --btn-fg: var(--color-heading); box-shadow: none;
}
.btn--ghost:hover { background: var(--line-100); color: var(--color-heading); }

.btn--on-dark {
  --btn-bg: #fff; --btn-fg: var(--ink-900);
}
.btn--on-dark:hover { background: #fff; color: var(--ink-900); }
.btn--outline-on-dark {
  --btn-bg: rgba(255,255,255,0.08); --btn-fg: #fff;
  border-color: rgba(255,255,255,0.6); box-shadow: none;
}
.btn--outline-on-dark:hover { background: rgba(255,255,255,0.16); color:#fff; border-color: #fff; }

.btn--lg { padding: 1.05rem 1.9rem; font-size: var(--text-lg); }
.btn--sm { padding: 0.6rem 1.05rem; font-size: var(--text-sm); }
.btn--block { display: flex; width: 100%; }

/* text link with arrow */
.link-arrow {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display); font-weight: var(--weight-semibold);
  color: var(--brand-accent);
}
.link-arrow svg { width: 1.05em; height: 1.05em; transition: transform var(--dur-base) var(--ease-out); }
.link-arrow:hover { color: var(--brand-accent-ink); }
.link-arrow:hover svg { transform: translateX(4px); }

/* =========================== Badges =============================== */
.badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  font-family: var(--font-display);
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  padding: 0.4rem 0.75rem; border-radius: var(--radius-full);
  background: var(--green-50); color: var(--green-700);
  border: 1px solid var(--green-100);
}
/* A soft, credential-style pill. The old solid gold-300 fill read as a heavy
   mustard blob and out-shouted the headline it's meant to support; the pale
   tint + gold accent dot keeps the heritage colour but lets the h1 lead.
   (Lighter ground also lifts contrast on the same ink: ~7:1, AAA.) */
.badge--gold  {
  background: color-mix(in srgb, var(--gold-300) 32%, #fff);
  color: #6b4a14;
  border-color: color-mix(in srgb, var(--gold-500) 34%, transparent);
}
.badge--gold .badge-dot { background: var(--gold-500); }
.badge--accent{ background: var(--brand-accent-soft); color: var(--brand-accent-ink); border-color: transparent; }
.badge--glass {
  background: rgba(255,255,255,0.12); color: #fff;
  border-color: rgba(255,255,255,0.25); backdrop-filter: blur(6px);
}
.badge-dot { width: 0.45rem; height: 0.45rem; border-radius: 50%; background: currentColor; }

/* Pills row */
.pill {
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.55rem 1rem; border-radius:var(--radius-full);
  background:var(--surface); border:1px solid var(--line-200);
  font-size:var(--text-sm); font-weight:var(--weight-medium); color:var(--slate-600);
  box-shadow: var(--shadow-xs);
}
.pill svg { width:1.1em;height:1.1em;color:var(--brand-accent); }

/* =========================== Cards ================================ */
.card {
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out),
              box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out);
  overflow: hidden;
}
.card--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: var(--line-300); }
.card-body { padding: var(--space-6); }
.card-body-lg { padding: var(--space-8); }

/* Icon feature card */
.feature {
  padding: var(--space-8) var(--space-7);
  background: var(--surface);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  height: 100%;
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
  position: relative;
}
.feature--hover:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.feature-icon {
  display: grid; place-items: center;
  width: 3.25rem; height: 3.25rem; margin-bottom: var(--space-5);
  border-radius: var(--radius-md);
  background: var(--brand-accent-soft); color: var(--brand-accent);
}
.feature-icon svg { width: 1.6rem; height: 1.6rem; }
.feature h3 { font-size: var(--text-xl); margin-bottom: var(--space-3); }
.feature p { color: var(--slate-500); font-size: var(--text-base); line-height: var(--leading-relaxed); }

/* =========================== Header / Nav ========================= */
.site-header {
  position: sticky; top: 0; z-index: var(--z-header);
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(140%) blur(14px);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
  border-bottom: 1px solid transparent;
  transition: box-shadow var(--dur-base) var(--ease-out),
              border-color var(--dur-base) var(--ease-out),
              background var(--dur-base) var(--ease-out);
}
.site-header.is-scrolled {
  box-shadow: var(--shadow-sm);
  border-color: var(--line-200);
  background: rgba(255,255,255,0.94);
}
/* thin family ribbon above the nav */
.family-ribbon {
  background: var(--ink-900);
  color: rgba(255,255,255,0.72);
  font-size: var(--text-xs);
}
.family-ribbon .container { display:flex; align-items:center; justify-content:space-between; gap:1rem; height:2.4rem; }
.family-ribbon a { color: rgba(255,255,255,0.72); }
.family-ribbon a:hover { color:#fff; }
.family-ribbon .ribbon-links { display:flex; gap:1.25rem; align-items:center; }
.family-ribbon .ribbon-links .sep { width:1px;height:0.9rem;background:rgba(255,255,255,0.2); }
@media (max-width: 720px){ .family-ribbon .ribbon-contact { display:none; } }

.nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 4.6rem; }

.brand { display: inline-flex; align-items: center; gap: 0.7rem; flex-shrink: 0; }
.brand:hover { color: inherit; }
.brand-mark { width: 2.6rem; height: 2.6rem; flex-shrink: 0; }
.brand-text { display: flex; flex-direction: column; line-height: 1.05; }
.brand-name {
  font-family: var(--font-display); font-weight: var(--weight-extra);
  font-size: 1.12rem; color: var(--ink-900); letter-spacing: var(--tracking-tight);
}
.brand-sub { font-size: 0.68rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--slate-400); font-weight: var(--weight-semibold); }
/* The header/nav is capped by .container (~1200px); with a dense nav (ICET's
   7 links + search + Apply) the brand tagline pushes it to overflow. Drop the
   tagline in the bar — the mark + name carry the brand; the tagline still
   shows in the hero and footer. */
.site-header .brand-sub { display: none; }

.nav-menu { display: flex; align-items: center; gap: 0.25rem; }
.nav-menu > li { position: relative; }
.nav-link {
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-family: var(--font-display); font-weight: var(--weight-medium);
  font-size: 0.95rem; color: var(--ink-800);
  padding: 0.5rem 0.68rem; border-radius: var(--radius-sm);
  transition: background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out);
}
.nav-link:hover, .nav-link[aria-expanded="true"] { background: var(--green-50); color: var(--green-700); }
.nav-link[aria-current="page"] { color: var(--green-700); }
.nav-link .chev { width: 0.9rem; height: 0.9rem; transition: transform var(--dur-base) var(--ease-out); }
.nav-link[aria-expanded="true"] .chev { transform: rotate(180deg); }

/* Dropdown (institutions mega) */
.nav-dropdown {
  position: absolute; top: calc(100% + 0.55rem); left: 50%; transform: translateX(-50%) translateY(8px);
  width: min(43rem, 92vw);
  background: var(--surface); border: 1px solid var(--line-200);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-xl);
  padding: var(--space-4);
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base);
  z-index: var(--z-dropdown);
}
/* Invisible bridge across the trigger→panel gap so the menu never closes
   as the pointer travels to it (fixes the classic hover-gap problem). */
.nav-dropdown::before { content: ""; position: absolute; top: -0.75rem; left: -1.5rem; right: -1.5rem; height: 0.85rem; }
.nav-item.open .nav-dropdown,
.nav-dropdown:focus-within {
  opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0);
}
.nav-dropdown-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem 0.75rem; }
.nav-drop-link { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 0.75rem; border-radius: var(--radius-md); transition: background var(--dur-fast), box-shadow var(--dur-fast); }
.nav-drop-link:hover { background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-200); }
.nav-drop-ic { display:grid; place-items:center; width:2.5rem;height:2.5rem;border-radius:var(--radius-sm); background:var(--green-50); color:var(--green-600); flex-shrink:0; transition: background var(--dur-fast), color var(--dur-fast); }
.nav-drop-link:hover .nav-drop-ic { background:var(--green-100, #d7ede4); color:var(--green-700); }
.nav-drop-ic svg { width:1.3rem;height:1.3rem; }
/* Text column — the title and description spans were rendering inline and
   colliding on one line ("…TechnologyB.Tech…"); stack them explicitly. */
.nav-drop-link > span:not(.nav-drop-ic) { display:flex; flex-direction:column; gap:0.12rem; min-width:0; }
.nav-drop-t { display:block; font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:0.9rem; line-height:1.25; color:var(--ink-900); }
.nav-drop-d { display:block; font-size:0.76rem; line-height:1.4; color:var(--slate-500); }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }

.icon-btn {
  display:grid; place-items:center; width:2.6rem;height:2.6rem;
  border-radius:var(--radius-full); color:var(--ink-800);
  border:1px solid var(--line-200); background:var(--surface);
  transition: background var(--dur-fast), color var(--dur-fast);
}
.icon-btn:hover { background: var(--green-50); color: var(--green-700); }
.icon-btn svg { width:1.2rem;height:1.2rem; }

/* Prominent search affordance (icon + label + shortcut), collapses to icon on mobile */
.search-pill {
  display:inline-flex; align-items:center; gap:0.5rem; height:2.6rem; padding:0 0.9rem;
  border-radius:var(--radius-full); border:1px solid var(--field-border); background:var(--surface-2);
  color:var(--slate-500); font-family:var(--font-display); font-weight:var(--weight-medium); font-size:var(--text-sm);
  transition:background var(--dur-fast), border-color var(--dur-fast), color var(--dur-fast);
}
.search-pill:hover { background:var(--green-50); border-color:var(--green-200); color:var(--green-700); }
.search-pill svg { width:1.1rem; height:1.1rem; flex-shrink:0; }
.search-pill kbd { font-family:var(--font-mono); font-size:0.66rem; color:var(--slate-400); background:var(--surface); border:1px solid var(--field-border); border-bottom-width:2px; border-radius:5px; padding:0.05rem 0.35rem; }
/* Below 1300 the nav gets tight (esp. ICET's 7 links) — collapse the search
   pill to a compact icon; it still opens the same dialog and ⌘K still works. */
@media (max-width: 1300px) {
  .search-pill { width:2.6rem; padding:0; justify-content:center; gap:0; }
  .search-pill span, .search-pill kbd { display:none; }
}

/* Hamburger */
.nav-toggle { display:none; width:2.8rem;height:2.8rem; border-radius:var(--radius-sm); }
.nav-toggle span { display:block; width:1.35rem; height:2px; background:var(--ink-900); border-radius:2px; margin:0 auto; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-fast); }
.nav-toggle span + span { margin-top: 4px; }
.nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-6px) rotate(-45deg); }

/* ---- Mobile: a dedicated slide-in drawer (distinct from desktop nav) ---- */
@media (max-width: 1200px) {
  .nav-toggle { display:block; }
  /* The header's backdrop-filter makes it the containing block for any
     position:fixed descendant — which trapped the slide-in drawer (and its
     backdrop) inside the ~118px header instead of the viewport. Drop the
     filter on mobile so the drawer resolves against the viewport and fills
     the screen. The 0.96 background keeps the bar opaque without the blur. */
  .site-header { backdrop-filter: none; -webkit-backdrop-filter: none; background: rgba(255,255,255,0.96); }
  .site-header.is-scrolled { background: rgba(255,255,255,0.98); }
  .nav-menu-wrap {
    position: fixed; inset: 0 0 0 auto; width: min(24rem, 90vw);
    background: var(--surface); box-shadow: var(--shadow-xl);
    transform: translateX(100%); transition: transform var(--dur-slow) var(--ease-out);
    padding: 5.4rem 1.4rem 2rem; overflow-y: auto; z-index: var(--z-overlay);
    display: flex; flex-direction: column;
  }
  .nav-menu-wrap.open { transform: translateX(0); }
  .nav-menu { flex-direction: column; align-items: stretch; gap: 0; }
  .nav-menu > li { border-bottom: 1px solid var(--line-100); }
  .nav-link { font-size: 1.12rem; padding: 1.05rem 0.35rem; justify-content: space-between; border-radius: 0; }
  .nav-link:hover, .nav-link[aria-expanded="true"] { background: transparent; color: var(--green-700); }
  .nav-menu-wrap.open .nav-menu > li { animation: navItemIn var(--dur-base) var(--ease-out) backwards; }
  .nav-menu-wrap.open .nav-menu > li:nth-child(1){animation-delay:.05s}
  .nav-menu-wrap.open .nav-menu > li:nth-child(2){animation-delay:.09s}
  .nav-menu-wrap.open .nav-menu > li:nth-child(3){animation-delay:.13s}
  .nav-menu-wrap.open .nav-menu > li:nth-child(4){animation-delay:.17s}
  .nav-menu-wrap.open .nav-menu > li:nth-child(5){animation-delay:.21s}
  .nav-menu-wrap.open .nav-menu > li:nth-child(6){animation-delay:.25s}
  .nav-dropdown {
    position: static; transform: none; width: 100%; opacity: 1; visibility: visible;
    pointer-events: auto; box-shadow: none; border: none; padding: 0 0 0.75rem; display: none;
  }
  /* Override the desktop open-state rule (.nav-item.open .nav-dropdown) whose
     translateX(-50%) centering otherwise leaks into the mobile drawer and
     shoves the sub-menu off the left edge. */
  .nav-item.open .nav-dropdown { display: block; transform: none; }
  .nav-dropdown-grid { grid-template-columns: 1fr; gap: 0.15rem; }
  .nav-drop-link { padding: 0.7rem 0.6rem; }
  .nav-actions .btn { display: inline-flex; }   /* keep a visible Apply CTA */
  .nav-backdrop { position: fixed; inset:0; background: rgba(10,21,18,0.5); backdrop-filter: blur(2px); opacity:0; visibility:hidden; transition: opacity var(--dur-base); z-index: var(--z-overlay); }
  .nav-backdrop.open { opacity:1; visibility:visible; }
}
@keyframes navItemIn { from { opacity:0; transform: translateX(14px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){ .nav-menu-wrap.open .nav-menu > li { animation: none; } }
@media (max-width: 480px) {
  .brand-sub { display: none; }
  .nav-actions .btn { padding: 0.55rem 0.85rem; font-size: var(--text-sm); }
  .nav-actions .btn .btn-arrow { display: none; }
}

/* ---- Desktop: animated underline indicator + detail on the nav ---- */
@media (min-width: 1001px) {
  .nav-link { position: relative; }
  .nav-link:hover, .nav-link[aria-expanded="true"] { background: transparent; color: var(--green-700); }
  .nav-link::after {
    content:""; position:absolute; left: 0.85rem; right: 0.85rem; bottom: 0.32rem; height: 2px;
    background: currentColor; border-radius: 2px; transform: scaleX(0); transform-origin: center;
    opacity: 0; transition: transform var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
  }
  .nav-link:hover::after, .nav-link[aria-current="page"]::after, .nav-link[aria-expanded="true"]::after {
    transform: scaleX(1); opacity: 1;
  }
}

/* =========================== Hero ================================= */
.hero { position: relative; overflow: clip; isolation: isolate; }
.hero-decor { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.hero-pattern { position:absolute; inset:0; opacity:0.5; }
.hero-glow {
  position:absolute; width:60rem;height:60rem; border-radius:50%;
  filter: blur(10px);
  background: radial-gradient(circle at center, rgba(63,165,135,0.16), transparent 62%);
  top:-28rem; right:-18rem; z-index:-1;
}
.hero-glow.two { background: radial-gradient(circle at center, rgba(214,158,60,0.14), transparent 62%); top:auto; bottom:-30rem; left:-20rem; right:auto; }

/* =========================== Stat counters ======================== */
.stats { display:grid; grid-template-columns: repeat(4,1fr); gap: var(--space-6); }
@media (max-width:820px){ .stats{ grid-template-columns: repeat(2,1fr);} }
.stat { text-align:center; }
.stat-num {
  font-family:var(--font-display); font-weight:var(--weight-extra);
  font-size: var(--text-5xl); line-height:1; color: var(--color-heading);
  letter-spacing: var(--tracking-tight);
  display:flex; align-items:baseline; justify-content:center; gap:0.1rem;
}
.stat-num .suffix { color: var(--brand-accent); }
.stat-label { margin-top:var(--space-3); color:var(--slate-500); font-weight:var(--weight-medium); font-size:var(--text-sm); }
.section--ink .stat-label { color: rgba(255,255,255,0.66); }
.section--ink .stat-num { color:#fff; }

/* =========================== Institution cards ==================== */
.inst-card {
  display:flex; flex-direction:column; height:100%;
  background:var(--surface); border:1px solid var(--line-200);
  border-radius:var(--radius-lg); overflow:hidden; box-shadow:var(--shadow-sm);
  transition: transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out);
}
.inst-card:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.inst-media { position:relative; aspect-ratio: 16/10; overflow:hidden; }
.inst-media > svg, .inst-media > img { width:100%; height:100%; object-fit:cover; }
.inst-media .inst-tag {
  position:absolute; top:0.85rem; left:0.85rem;
}
.inst-logo-chip {
  position:absolute; bottom:-1.4rem; left:1.4rem;
  width:3.2rem;height:3.2rem;border-radius:var(--radius-md);
  background:#fff; box-shadow:var(--shadow-md); display:grid;place-items:center;
  border:1px solid var(--line-200);
}
.inst-logo-chip svg, .inst-logo-chip img { width:2rem;height:2rem; }
.inst-body { padding:2.2rem var(--space-6) var(--space-6); flex:1; display:flex; flex-direction:column; }
.inst-body h3 { font-size:var(--text-xl); margin-bottom:0.35rem; }
.inst-meta { font-size:var(--text-sm); color:var(--slate-400); margin-bottom:var(--space-4); }
.inst-body p { color:var(--slate-500); font-size:var(--text-sm); line-height:var(--leading-relaxed); margin-bottom:var(--space-5); }
.inst-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding-top:var(--space-4); border-top:1px solid var(--line-100); }
.inst-stat { font-size:var(--text-xs); color:var(--slate-400); }
.inst-stat b { color:var(--ink-800); font-family:var(--font-display); }

/* =========================== Program / list cards ================= */
.program {
  display:flex; gap:var(--space-4); padding:var(--space-5);
  background:var(--surface); border:1px solid var(--line-200); border-radius:var(--radius-md);
  transition: border-color var(--dur-base), box-shadow var(--dur-base), transform var(--dur-base);
}
.program:hover { border-color:var(--brand-accent); box-shadow:var(--shadow-md); transform:translateY(-3px); }
.program-ic { flex-shrink:0; display:grid;place-items:center; width:2.8rem;height:2.8rem;border-radius:var(--radius-sm); background:var(--brand-accent-soft); color:var(--brand-accent); }
.program-ic svg{ width:1.4rem;height:1.4rem; }
.program h4 { font-size:var(--text-base); margin-bottom:0.2rem; }
.program p { font-size:var(--text-sm); color:var(--slate-400); }

/* =========================== Faculty cards ======================== */
.faculty { text-align:center; }
.faculty-photo {
  width:100%; aspect-ratio:1; border-radius:var(--radius-lg); overflow:hidden;
  margin-bottom:var(--space-4); background:var(--green-50);
}
.faculty-photo svg, .faculty-photo img { width:100%;height:100%;object-fit:cover; }
.faculty h4 { font-size:var(--text-lg); margin-bottom:0.15rem; }
.faculty .role { color:var(--brand-accent); font-size:var(--text-sm); font-weight:var(--weight-semibold); }
.faculty .dept { color:var(--slate-400); font-size:var(--text-xs); margin-top:0.15rem; }

/* =========================== Message / leader ===================== */
.leader { display:grid; grid-template-columns: 0.85fr 1.15fr; gap:clamp(2rem,4vw,4rem); align-items:center; }
@media (max-width:860px){ .leader{ grid-template-columns:1fr; } }
.leader-portrait { position:relative; border-radius:var(--radius-xl); overflow:hidden; box-shadow:var(--shadow-lg); aspect-ratio: 4/5; }
.leader-portrait svg, .leader-portrait img { width:100%;height:100%;object-fit:cover; }
.leader-quote { font-family:var(--font-display); font-size:var(--text-2xl); line-height:var(--leading-snug); color:var(--ink-900); letter-spacing:var(--tracking-snug); font-weight:var(--weight-semibold); }
.leader blockquote { border:0; padding:0; margin:0; }
.leader-mark { font-family:var(--font-display); font-size:4rem; line-height:0.6; color:var(--brand-accent); opacity:0.35; }
.leader-sign { margin-top:var(--space-6); }
.leader-name { font-family:var(--font-display); font-weight:var(--weight-bold); color:var(--ink-900); font-size:var(--text-lg); }
.leader-title { color:var(--slate-400); font-size:var(--text-sm); }

/* =========================== Tabs ================================= */
.tabs-list { display:flex; flex-wrap:wrap; gap:0.4rem; border-bottom:1px solid var(--line-200); margin-bottom:var(--space-8); }
.tab {
  font-family:var(--font-display); font-weight:var(--weight-medium);
  padding:0.85rem 1.1rem; color:var(--slate-500); border-bottom:2px solid transparent;
  margin-bottom:-1px; transition:color var(--dur-fast), border-color var(--dur-fast);
}
.tab:hover { color:var(--ink-900); }
.tab[aria-selected="true"] { color:var(--brand-accent); border-color:var(--brand-accent); }
.tab-panel[hidden] { display:none; }

/* Mobile: wrapping turned the 5 tabs into a ragged ~240px-tall block. Make it
   a single-row, edge-to-edge scrolling strip (the familiar app tab bar), with
   a soft fade on the right hinting there's more. */
@media (max-width: 760px) {
  .tabs-list {
    flex-wrap: nowrap; overflow-x: auto; scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch; scrollbar-width: none;
    margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter);
    -webkit-mask-image: linear-gradient(to right, #000 88%, transparent 100%);
            mask-image: linear-gradient(to right, #000 88%, transparent 100%);
  }
  .tabs-list::-webkit-scrollbar { display: none; }
  .tab { flex: 0 0 auto; scroll-snap-align: start; white-space: nowrap; padding-inline: 0.85rem; }
}

/* =========================== Accordion / FAQ ====================== */
.accordion { border:1px solid var(--line-200); border-radius:var(--radius-lg); overflow:hidden; background:var(--surface); }
.acc-item + .acc-item { border-top:1px solid var(--line-200); }
.acc-trigger {
  width:100%; display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding:1.35rem var(--space-6); text-align:left;
  font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:var(--text-lg); color:var(--ink-900);
}
.acc-trigger:hover { background:var(--surface-2); }
.acc-icon { flex-shrink:0; width:1.6rem;height:1.6rem; display:grid;place-items:center; border-radius:50%; border:1.5px solid var(--line-300); color:var(--brand-accent); position:relative; transition:transform var(--dur-base) var(--ease-out); }
.acc-icon::before, .acc-icon::after { content:""; position:absolute; background:currentColor; border-radius:2px; }
.acc-icon::before { width:0.7rem; height:2px; }
.acc-icon::after  { width:2px; height:0.7rem; transition:transform var(--dur-base) var(--ease-out); }
.acc-trigger[aria-expanded="true"] .acc-icon { transform:rotate(180deg); }
.acc-trigger[aria-expanded="true"] .acc-icon::after { transform:scaleY(0); }
.acc-panel { overflow:hidden; height:0; transition:height var(--dur-slow) var(--ease-out); }
.acc-panel-inner { padding:0 var(--space-6) 1.5rem; color:var(--slate-500); line-height:var(--leading-relaxed); max-width:60ch; }

/* =========================== Testimonials ========================= */
.quote-card {
  padding:var(--space-8); background:var(--surface); border:1px solid var(--line-200);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); height:100%;
  display:flex; flex-direction:column;
}
.quote-stars { color:var(--gold-500); display:flex; gap:0.15rem; margin-bottom:var(--space-4); }
.quote-stars svg{ width:1.1rem;height:1.1rem; }
.quote-card blockquote { font-size:var(--text-lg); color:var(--ink-800); line-height:var(--leading-relaxed); border:0; padding:0; margin:0 0 var(--space-6); }
.quote-person { display:flex; align-items:center; gap:0.85rem; margin-top:auto; }
.quote-avatar { width:2.9rem;height:2.9rem;border-radius:50%; overflow:hidden; background:var(--green-50); flex-shrink:0; }
.quote-avatar svg, .quote-avatar img { width:100%;height:100%; }
.quote-name { font-family:var(--font-display); font-weight:var(--weight-semibold); color:var(--ink-900); font-size:var(--text-sm); }
.quote-role { color:var(--slate-400); font-size:var(--text-xs); }

/* =========================== News / events ======================== */
.news-card { display:flex; flex-direction:column; height:100%; }
.news-media { aspect-ratio:16/9; overflow:hidden; border-radius:var(--radius-md); margin-bottom:var(--space-4); }
.news-media svg, .news-media img { width:100%;height:100%;object-fit:cover; transition: transform var(--dur-slow) var(--ease-out); }
.news-card:hover .news-media img, .news-card:hover .news-media svg { transform:scale(1.05); }
.news-cat { font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-wide); text-transform:uppercase; color:var(--brand-accent); }
.news-card h3 { font-size:var(--text-lg); margin:0.5rem 0; }
.news-card h3 a:hover { color:var(--brand-accent); }
.news-date { font-size:var(--text-sm); color:var(--slate-400); margin-top:auto; display:flex; align-items:center; gap:0.4rem; }

.event-row { display:flex; gap:var(--space-5); align-items:center; padding:var(--space-5); border:1px solid var(--line-200); border-radius:var(--radius-md); background:var(--surface); transition:box-shadow var(--dur-base),transform var(--dur-base); }
.event-row:hover { box-shadow:var(--shadow-md); transform:translateY(-3px); }
.event-date { flex-shrink:0; width:4.6rem; text-align:center; padding:0.6rem 0; border-radius:var(--radius-sm); background:var(--brand-accent-soft); color:var(--brand-accent-ink); }
.event-date .d { font-family:var(--font-display); font-weight:var(--weight-extra); font-size:var(--text-2xl); line-height:1; }
.event-date .m { font-size:var(--text-xs); text-transform:uppercase; letter-spacing:var(--tracking-wide); font-weight:var(--weight-semibold); }
.event-info h4 { font-size:var(--text-base); margin-bottom:0.25rem; }
.event-info p { font-size:var(--text-sm); color:var(--slate-400); }

/* =========================== Logo wall ============================ */
.logo-wall { display:grid; grid-template-columns: repeat(6,1fr); gap:1px; background:var(--line-200); border:1px solid var(--line-200); border-radius:var(--radius-lg); overflow:hidden; }
@media (max-width:900px){ .logo-wall{ grid-template-columns: repeat(3,1fr);} }
@media (max-width:520px){ .logo-wall{ grid-template-columns: repeat(2,1fr);} }
.logo-cell { background:var(--surface); display:grid; place-items:center; padding:var(--space-6) var(--space-4); min-height:6.5rem; transition: background var(--dur-base); }
.logo-cell:hover { background:var(--surface-2); }
.logo-cell svg, .logo-cell img { max-height:2.6rem; width:auto; opacity:0.78; filter:grayscale(1); transition:opacity var(--dur-base), filter var(--dur-base); }
.logo-cell:hover svg, .logo-cell:hover img { opacity:1; filter:none; }
.logo-cell .logo-word { font-family:var(--font-display); font-weight:var(--weight-bold); color:var(--slate-400); letter-spacing:var(--tracking-snug); transition:color var(--dur-base); }
.logo-cell:hover .logo-word { color:var(--ink-800); }

/* ---- Partner marquee: monochrome wordmarks, edge-faded, hover-pauses ---- */
.marquee {
  --marquee-dur: 40s;
  display: flex; gap: clamp(2.5rem, 5vw, 4.5rem); overflow: hidden; user-select: none;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
}
.marquee-track {
  display: flex; align-items: center; gap: clamp(2.5rem, 5vw, 4.5rem);
  flex-shrink: 0; min-width: max-content;
  animation: marqueeScroll var(--marquee-dur) linear infinite;
}
.marquee:hover .marquee-track, .marquee:focus-within .marquee-track { animation-play-state: paused; }
@keyframes marqueeScroll { to { transform: translateX(calc(-100% - clamp(2.5rem, 5vw, 4.5rem))); } }
.brandmark {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(1.15rem, 1rem + 0.6vw, 1.5rem); letter-spacing: -0.015em;
  color: var(--slate-500); white-space: nowrap; opacity: 0.85;
  transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out);
}
.brandmark:hover { color: var(--ink-900); opacity: 1; }
.marquee--on-dark .brandmark { color: rgba(255,255,255,0.62); }
.marquee--on-dark .brandmark:hover { color: #fff; }
@media (prefers-reduced-motion: reduce) {
  .marquee { overflow-x: auto; -webkit-mask-image: none; mask-image: none; scrollbar-width: none; }
  .marquee::-webkit-scrollbar { display: none; }
  .marquee-track { animation: none; }
  .marquee-track[aria-hidden="true"] { display: none; }
}

/* =========================== Gallery ============================== */
.gallery { display:grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 11rem; gap:var(--space-3); }
@media (max-width:820px){ .gallery{ grid-template-columns: repeat(2,1fr);} }
/* Phones: the 2-up masonry stacked to ~1100px of tiles. Swipe it instead —
   same snap-carousel language as .swipe-row (breakpoint matches .swipe-cue). */
@media (max-width:760px){
  .gallery {
    display:flex; grid-template-columns:none; grid-auto-rows:auto; gap:var(--space-3);
    overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
    margin-inline: calc(-1 * var(--gutter)); padding:0.25rem var(--gutter) 1rem; scrollbar-width:none;
  }
  .gallery::-webkit-scrollbar { display:none; }
  .gallery-item, .gallery-item.tall, .gallery-item.wide {
    grid-row:auto; grid-column:auto; flex:0 0 72%; height:13rem; scroll-snap-align:center;
  }
}
.gallery-item { position:relative; overflow:hidden; border-radius:var(--radius-md); background:var(--green-50); }
.gallery-item.tall { grid-row: span 2; }
.gallery-item.wide { grid-column: span 2; }
.gallery-item svg, .gallery-item img { width:100%;height:100%;object-fit:cover; transition:transform var(--dur-slow) var(--ease-out); }
.gallery-item:hover img, .gallery-item:hover svg { transform:scale(1.07); }
.gallery-cap { position:absolute; inset:auto 0 0 0; padding:2rem 1rem 0.95rem; color:#fff; font-family:var(--font-display); font-size:var(--text-sm); font-weight:var(--weight-semibold); background:linear-gradient(transparent, rgba(10,21,18,0.72)); }

/* =========================== Forms =============================== */
.field { margin-bottom:var(--space-5); }
.field label:not(.checkbox) { display:block; font-family:var(--font-display); font-weight:var(--weight-medium); font-size:var(--text-sm); color:var(--ink-800); margin-bottom:0.45rem; }
.field .req { color:var(--error-600); }
.input, .textarea, .select {
  width:100%; padding:0.95rem 1.05rem; font-size:var(--text-base); line-height:1.4;
  background:var(--surface-2); color:var(--ink-900);
  border:1.5px solid var(--field-border); border-radius:var(--radius-md);
  transition:border-color var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), background var(--dur-base) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color:var(--slate-400); }
.input:hover, .textarea:hover, .select:hover { border-color:var(--slate-400); }
.input:focus, .textarea:focus, .select:focus {
  outline:none; background:var(--surface); border-color:var(--brand-accent); box-shadow: 0 0 0 4px var(--brand-accent-soft);
}
.textarea { min-height:7.5rem; resize:vertical; }
.select { appearance:none; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2346564f' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 1rem center; padding-right:2.75rem; }
.field-hint { font-size:var(--text-xs); color:var(--slate-400); margin-top:0.35rem; }
.field-error { display:none; font-size:var(--text-xs); color:var(--error-600); margin-top:0.4rem; font-weight:var(--weight-medium); }
.field.has-error .input, .field.has-error .textarea, .field.has-error .select { border-color:var(--error-600); background:var(--error-50); box-shadow:0 0 0 4px var(--error-50); }
.field.has-error .field-error { display:block; }
.checkbox { display:flex; gap:0.7rem; align-items:flex-start; font-size:var(--text-sm); line-height:1.45; color:var(--slate-600); padding:0.85rem 1rem; background:var(--surface-2); border:1.5px solid var(--field-border); border-radius:var(--radius-md); transition:border-color var(--dur-base); cursor:pointer; }
.checkbox:hover { border-color:var(--slate-400); }
.checkbox input { margin:0.1rem 0 0; width:1.2rem; height:1.2rem; accent-color:var(--brand-accent); flex-shrink:0; cursor:pointer; }
.checkbox span { display:inline-block; }

/* Form personality comes from the iconed header + tactile fields —
   deliberately NOT a coloured strip on top of the card. */
.form-head { display:flex; align-items:center; gap:0.9rem; margin-bottom:var(--space-6); padding-bottom:var(--space-5); border-bottom:1px solid var(--line-200); }

/* Programme-finder card: an integrated accent icon, not a top stripe */
.prog-ic { width:2.85rem; height:2.85rem; border-radius:var(--radius-md); display:grid; place-items:center; margin-bottom:var(--space-4); box-shadow:var(--shadow-sm); }
.prog-ic svg { width:1.5rem; height:1.5rem; color:#fff; }
.card--hover:hover .prog-ic { transform:scale(1.06); transition:transform var(--dur-base) var(--ease-out); }
.form-head-ic { display:grid; place-items:center; width:2.9rem; height:2.9rem; border-radius:var(--radius-md); background:var(--brand-accent-soft); color:var(--brand-accent); flex-shrink:0; }
.form-head-ic svg { width:1.45rem; height:1.45rem; }
.form-head h3 { font-size:var(--text-xl); margin:0; }
.form-head p { font-size:var(--text-sm); color:var(--slate-500); margin:0.15rem 0 0; }
.form-note { display:flex; gap:0.5rem; align-items:center; font-size:var(--text-xs); color:var(--slate-500); background:var(--surface-2); border:1px solid var(--line-200); border-radius:var(--radius-full); padding:0.55rem 0.9rem; }
.form-note svg { color:var(--brand-accent); }
.form-status { padding:1rem 1.25rem; border-radius:var(--radius-sm); font-size:var(--text-sm); font-weight:var(--weight-medium); display:none; align-items:center; gap:0.6rem; }
.form-status.is-success { display:flex; background:var(--success-50); color:var(--success-600); border:1px solid #bfe6d6; }
.form-status.is-error { display:flex; background:var(--error-50); color:var(--error-600); border:1px solid #f0c4c0; }

/* =========================== CTA band ============================= */
.cta-band {
  position:relative; overflow:hidden; border-radius:var(--radius-2xl);
  padding:clamp(2.5rem,4vw,4.5rem); color:#fff; isolation:isolate;
  background:
    radial-gradient(130% 150% at 100% 0%, var(--green-600), transparent 52%),
    radial-gradient(120% 140% at 0% 100%, var(--green-950), transparent 58%),
    linear-gradient(135deg, var(--green-800), var(--green-900));
}
/* Geometry: kept quiet so it never competes with the text. */
.cta-band::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:0.2;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48'%3E%3Cg fill='none' stroke='%23ffffff' stroke-width='1' stroke-opacity='0.5'%3E%3Ccircle cx='0' cy='0' r='24'/%3E%3Ccircle cx='48' cy='0' r='24'/%3E%3Ccircle cx='0' cy='48' r='24'/%3E%3Ccircle cx='48' cy='48' r='24'/%3E%3Ccircle cx='24' cy='24' r='24'/%3E%3Ccircle cx='24' cy='24' r='10'/%3E%3C/g%3E%3C/svg%3E");
  background-size: 48px 48px;
}
/* Scrim behind the (left-aligned) text so contrast is guaranteed over the pattern. */
.cta-band::after {
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  background: linear-gradient(102deg, rgba(4,20,15,0.55) 0%, rgba(4,20,15,0.22) 46%, transparent 78%);
}
.cta-band h2 { color:#fff; text-shadow:0 1px 12px rgba(4,18,14,0.4); }
.cta-band p { color:rgba(255,255,255,0.95); text-shadow:0 1px 8px rgba(4,18,14,0.35); }
.cta-band .cta-pattern { display:none; }   /* retired: replaced by ::before */

/* =========================== Breadcrumbs ========================= */
.breadcrumb { display:flex; flex-wrap:wrap; align-items:center; gap:0.45rem; font-size:var(--text-sm); color:var(--slate-400); }
.breadcrumb a { color:var(--slate-500); }
.breadcrumb a:hover { color:var(--brand-accent); }
.breadcrumb .sep { color:var(--line-300); }
.breadcrumb [aria-current="page"] { color:var(--ink-800); font-weight:var(--weight-medium); }

/* =========================== Alerts ============================== */
.alert { display:flex; gap:0.85rem; padding:1rem 1.25rem; border-radius:var(--radius-md); font-size:var(--text-sm); border:1px solid; }
.alert svg { width:1.3rem;height:1.3rem; flex-shrink:0; }
.alert--info { background:var(--info-50); color:var(--info-600); border-color:#c3dcf1; }
.alert--success { background:var(--success-50); color:var(--success-600); border-color:#bfe6d6; }
.alert--warning { background:var(--warning-50); color:var(--warning-600); border-color:#f0dcae; }

/* =============== Support / scholarship list (icon + title + note) === */
.support-list { list-style:none; margin:0; padding:0; display:grid; gap:0.65rem; }
.support-list li { display:flex; align-items:flex-start; gap:0.9rem; padding:0.7rem 0.85rem; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--line-200); transition:border-color var(--dur-fast), box-shadow var(--dur-fast); }
.support-list li:hover { border-color:var(--green-200); box-shadow:0 6px 18px -12px rgba(14,116,88,0.4); }
.support-ic { display:grid; place-items:center; width:2.5rem; height:2.5rem; border-radius:var(--radius-sm); background:var(--green-50); color:var(--green-600); flex-shrink:0; }
.support-ic svg { width:1.3rem; height:1.3rem; }
.support-txt { display:flex; flex-direction:column; gap:0.1rem; min-width:0; padding-top:0.15rem; }
.support-txt strong { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:1rem; color:var(--ink-900); line-height:1.25; }
.support-txt span { font-size:0.88rem; color:var(--slate-500); line-height:1.4; }

/* =========================== Footer ============================== */
.site-footer { background:var(--ink-950); color:rgba(255,255,255,0.62); font-size:var(--text-sm); }
.footer-top { padding-block: clamp(3.5rem,5vw,5rem) 3rem; }
.footer-grid { display:grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap:clamp(2rem,4vw,4rem); }
@media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:2.5rem;} }
@media (max-width:560px){ .footer-grid{ grid-template-columns:1fr; } }
.footer-brand .brand-name { color:#fff; }
.footer-brand .brand-sub { color:rgba(255,255,255,0.5); }
.footer-about { margin:1.25rem 0; max-width:32ch; line-height:var(--leading-relaxed); }
.footer-social { display:flex; gap:0.6rem; }
.footer-social a { display:grid; place-items:center; width:2.4rem;height:2.4rem; border-radius:var(--radius-sm); background:rgba(255,255,255,0.06); color:rgba(255,255,255,0.72); transition:background var(--dur-base),color var(--dur-base); }
.footer-social a:hover { background:var(--green-600); color:#fff; }
.footer-social svg { width:1.15rem;height:1.15rem; }
.footer-col h4 { color:#fff; font-size:var(--text-sm); letter-spacing:var(--tracking-wide); text-transform:uppercase; margin-bottom:1.15rem; }
.footer-col ul { display:flex; flex-direction:column; gap:0.7rem; }
.footer-col a { color:rgba(255,255,255,0.62); }
.footer-col a:hover { color:#fff; }
.footer-contact li { display:flex; gap:0.65rem; margin-bottom:0.9rem; line-height:1.5; }
.footer-contact svg { width:1.1rem;height:1.1rem; flex-shrink:0; margin-top:0.15rem; color:var(--green-400); }
.footer-recognitions { border-top:1px solid rgba(255,255,255,0.09); }
.footer-recognitions .container { display:flex; flex-wrap:wrap; align-items:center; gap:0.85rem 1.75rem; padding-block:1.5rem; }
.fr-label { font-family:var(--font-display); font-size:var(--text-xs); font-weight:var(--weight-bold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:rgba(255,255,255,0.5); }
.fr-badges { display:flex; flex-wrap:wrap; gap:0.5rem 0.6rem; }
.fr-badges li { font-family:var(--font-display); font-size:var(--text-xs); font-weight:var(--weight-semibold); color:rgba(255,255,255,0.82); background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.12); border-radius:var(--radius-full); padding:0.4rem 0.85rem; }
.footer-bottom { border-top:1px solid rgba(255,255,255,0.09); padding-block:1.5rem; }
.footer-bottom .container { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:1rem; }
.footer-legal { display:flex; flex-wrap:wrap; gap:1.25rem; }
.footer-legal a { color:rgba(255,255,255,0.5); }
.footer-legal a:hover { color:#fff; }

/* =========================== Scroll progress ===================== */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 3px; width: 0;
  background: linear-gradient(90deg, var(--brand-accent), var(--gold-500));
  z-index: calc(var(--z-header) + 1); border-radius: 0 3px 3px 0;
  transition: width 80ms linear; pointer-events: none;
}
@media (prefers-reduced-motion: reduce) { .scroll-progress { transition: none; } }

/* =========================== Quick links + video ================= */
.quicklink { display:flex; flex-direction:column; gap:0.15rem; padding:var(--space-5); background:var(--surface); border:1px solid var(--line-200); border-radius:var(--radius-md); box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out), box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-base); }
.quicklink:hover { transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--brand-accent); color:inherit; }
.ql-ic { width:2.6rem; height:2.6rem; border-radius:var(--radius-sm); display:grid; place-items:center; margin-bottom:0.75rem; }
.ql-ic svg { width:1.3rem; height:1.3rem; color:#fff; }
.ql-t { display:flex; align-items:center; gap:0.4rem; font-family:var(--font-display); font-weight:var(--weight-semibold); color:var(--ink-900); font-size:var(--text-base); }
.ql-ext { width:0.9rem; height:0.9rem; color:var(--slate-400); flex-shrink:0; transition:transform var(--dur-base) var(--ease-out), color var(--dur-base); }
.quicklink:hover .ql-ext { transform:translate(2px,-2px); color:var(--brand-accent); }
.ql-d { font-size:var(--text-sm); color:var(--slate-500); }
/* Phones: .grid-4 drops to one column at ≤620, which is right for big cards but
   turned these 8 compact icon-cards into a 2,180px stack. They read fine 2-up.
   Scoped with :has() so other .grid-4 sections keep the single-column stack. */
@media (max-width: 620px) {
  .grid-4:has(> .quicklink) { grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
  .grid-4:has(> .quicklink) .quicklink { padding: var(--space-4); }
  /* .ql-ic also carries .media (for the gradient), and .media's min-height:9rem
     floors it to 144px — which at 2-up renders as a narrow 35x144 bar. Clear the
     floor so the icon is the small square .ql-ic actually declares. */
  .grid-4:has(> .quicklink) .ql-ic { width: 2.4rem; height: 2.4rem; min-height: 0; margin-bottom: 0.55rem; border-radius: var(--radius-sm); }
  .grid-4:has(> .quicklink) .ql-ic svg { width: 1.15rem; height: 1.15rem; }
  .grid-4:has(> .quicklink) .ql-ic::before { display: none; }   /* drop the geometric overlay at icon size */
  .grid-4:has(> .quicklink) .ql-t { font-size: 0.9rem; }
  .grid-4:has(> .quicklink) .ql-d { font-size: 0.75rem; }
}

.video-card { position:relative; display:grid; place-items:center; aspect-ratio:21/7; min-height:12rem; border-radius:var(--radius-xl); overflow:hidden; margin-top:var(--space-6); box-shadow:var(--shadow-md); }
/* Click-to-play facade button fills the card and centres the play control. */
.video-trigger { position:absolute; inset:0; display:grid; place-items:center; width:100%; height:100%; padding:0; border:0; background:transparent; color:inherit; cursor:pointer; }
.video-trigger:focus-visible { outline:3px solid #fff; outline-offset:-4px; }
/* The loaded YouTube player fills the same 21/7 frame. */
.video-frame { position:absolute; inset:0; width:100%; height:100%; border:0; display:block; }
.video-scrim { position:absolute; inset:0; background: radial-gradient(75% 80% at 50% 45%, rgba(3,16,12,0.34), rgba(3,16,12,0.66)); }
.video-play { position:relative; z-index:2; display:grid; place-items:center; width:4.5rem; height:4.5rem; border-radius:50%; background:rgba(255,255,255,0.18); border:2px solid rgba(255,255,255,0.65); color:#fff; transition:transform var(--dur-base) var(--ease-out), background var(--dur-base); }
@supports (backdrop-filter: blur(6px)) { .video-play { backdrop-filter:blur(6px); } }
.video-play svg { width:1.8rem; height:1.8rem; margin-left:3px; }
.video-card:hover .video-play { transform:scale(1.1); background:rgba(255,255,255,0.3); }
.video-card .media-label { font-size:var(--text-base); }
.video-card .media-label svg { width:1.2rem; height:1.2rem; }

/* =========================== To-top button ======================= */
.to-top { position:fixed; right:1.5rem; bottom:1.5rem; z-index:var(--z-header); width:3rem;height:3rem; border-radius:50%; background:var(--ink-900); color:#fff; display:grid; place-items:center; box-shadow:var(--shadow-lg); opacity:0; transform:translateY(12px) scale(0.9); pointer-events:none; transition:opacity var(--dur-base),transform var(--dur-base); }
.to-top.show { opacity:1; transform:none; pointer-events:auto; }
.to-top:hover { background:var(--green-700); color:#fff; }
.to-top svg { width:1.3rem;height:1.3rem; }

/* =============== Sticky admissions CTA (bottom-left dock) ========= */
.apply-dock {
  position:fixed; left:1.5rem; bottom:1.5rem; z-index:var(--z-header);
  display:flex; align-items:center; gap:0.7rem;
  padding:0.65rem 1.15rem 0.65rem 0.65rem;
  background:var(--green-800); color:#fff; border-radius:var(--radius-full);
  box-shadow:0 12px 32px -10px rgba(4,30,22,0.6);
  text-decoration:none; opacity:0; transform:translateY(14px) scale(0.96);
  pointer-events:none; transition:opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), background var(--dur-fast);
}
.apply-dock.show { opacity:1; transform:none; pointer-events:auto; }
.apply-dock:hover { background:var(--green-900); color:#fff; }
.apply-dock:focus-visible { outline:3px solid var(--gold-400); outline-offset:3px; }
.apply-dock-ic { display:grid; place-items:center; width:2.3rem; height:2.3rem; border-radius:50%; background:rgba(255,255,255,0.15); flex-shrink:0; }
.apply-dock-ic svg { width:1.2rem; height:1.2rem; }
.apply-dock-txt { display:flex; flex-direction:column; line-height:1.15; }
.apply-dock-txt strong { font-family:var(--font-display); font-weight:var(--weight-semibold); font-size:0.92rem; }
.apply-dock-txt small { font-size:0.75rem; color:rgba(255,255,255,0.85); }
@media (max-width:600px){
  .apply-dock { left:0.9rem; bottom:0.9rem; padding:0.55rem 0.95rem 0.55rem 0.55rem; }
  .apply-dock-txt small { display:none; }
}
@media (prefers-reduced-motion: reduce){ .apply-dock { transform:none; } }

/* =========================== Misc utilities ====================== */
.divider-dot { width:4px;height:4px;border-radius:50%;background:var(--line-300); }
.overline { font-family:var(--font-display); font-size:var(--text-xs); font-weight:var(--weight-semibold); letter-spacing:var(--tracking-caps); text-transform:uppercase; color:var(--slate-400); }
.text-accent { color:var(--brand-accent); }
.text-gold { color:var(--gold-700); }

/* ---- QA / accessibility fixes ---- */
/* Stat suffix (+, k+) on the dark stats band: green fails contrast → gold. */
.section--ink .stat-num .suffix { color: var(--gold-400); }
/* Links inside running text must be distinguishable without colour (WCAG 1.4.1). */
.lede a, .prose a:not(.btn), .acc-panel-inner a, .footer-about a, .leader-quote a, .search-noresult a {
  text-decoration: underline; text-underline-offset: 0.15em; text-decoration-thickness: 1px;
}
.lede a:hover, .prose a:not(.btn):hover, .acc-panel-inner a:hover, .footer-about a:hover { text-decoration-thickness: 2px; }
/* Slightly larger tap area for footer nav links on touch (target-size). */
.footer-col a { display: inline-block; padding-block: 0.1rem; }
.max-60 { max-width:60ch; }
.mt-2{margin-top:var(--space-2)}.mt-4{margin-top:var(--space-4)}.mt-6{margin-top:var(--space-6)}.mt-8{margin-top:var(--space-8)}
.mb-0{margin-bottom:0}