/* =========================================================
   Components — one block per reusable piece of the Banani design.
   Naming: .block, .block__element, .block--modifier
   ========================================================= */

/* ---------- Buttons & links ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  border: 1px solid transparent; border-radius: var(--radius-pill);
  padding: 12px 32px; font-size: var(--text-sm); font-weight: 600; line-height: 1.4;
  transition: background-color .15s, opacity .15s; white-space: nowrap;
}
.btn--sm { padding: 8px 20px; }
.btn--xs { padding: 6px 20px; font-size: var(--text-xs); }
.btn--block { width: 100%; }
.btn--accent { background: var(--color-accent); color: var(--color-ink); }
.btn--accent:hover { background: #f7d04a; }
.btn--ink { background: var(--color-ink); color: var(--color-accent); }
.btn--ink:hover { background: #16294d; }
.btn--outline { border-color: var(--color-border); color: var(--color-foreground); font-weight: 500; }
.btn--outline:hover { background: var(--color-clay); }
.btn--white { background: #fff; color: var(--color-ink); }

.link-arrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: var(--text-sm); font-weight: 600; color: var(--color-accent);
}
.link-arrow:hover { opacity: .8; }
.link-arrow--ink { color: var(--color-ink); }
.back-link {
  display: inline-flex; align-items: center; gap: 4px; margin-bottom: 16px;
  font-size: var(--text-xs); font-weight: 600; color: var(--color-accent);
}
.actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.actions--center { justify-content: center; }
.actions--tight { gap: 12px; }

/* ---------- Eyebrow / Section heading ---------- */
.eyebrow { display: block; font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); letter-spacing: .02em; }
.eyebrow--caps { text-transform: uppercase; letter-spacing: .1em; }
.eyebrow--ink { color: var(--color-ink); }

.section-heading { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
.section-heading--center { align-items: center; text-align: center; }
.section-heading__title { font-size: var(--text-4xl); line-height: 1.15; letter-spacing: -.01em; color: var(--color-foreground); }
.section-heading__copy { max-width: 560px; margin-top: 4px; font-size: var(--text-lg); font-weight: 300; line-height: 1.6; color: var(--color-muted-foreground); }
.surface-dark .section-heading__title { color: var(--color-background); }
.surface-dark .section-heading__copy { color: var(--white-60); }

.section-bar { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }

/* ---------- Navbar (rendered by <site-navbar>) ---------- */
site-navbar, site-footer { display: block; }
.navbar { position: sticky; top: 0; z-index: 50; background: var(--color-dark); color: #fff; border-bottom: 1px solid var(--white-10); }
.navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 12px; }
.navbar__logo { flex-shrink: 0; }
.navbar__logo img { height: 44px; width: auto; mix-blend-mode: lighten; } /* logo has a black background; lighten lets the navy header show through */
@media (max-width: 560px) { .navbar__logo img { height: 36px; } }
.navbar__links { display: flex; align-items: center; gap: 28px; }
.navbar__links a { font-size: var(--text-xs); color: var(--white-80); }
.navbar__links a:hover, .navbar__links a[aria-current="page"] { color: var(--color-accent); }
.navbar__right { display: flex; align-items: center; gap: 20px; }
.navbar__icon-btn { display: inline-flex; padding: 4px; background: none; border: 0; color: var(--white-80); }
.navbar__toggle { display: none; }
@media (max-width: 900px) {
  .navbar__toggle { display: inline-flex; }
  .navbar__links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: flex-start; gap: 0;
    padding: 8px var(--gutter) 16px; background: var(--color-dark); border-bottom: 1px solid var(--white-10);
  }
  .navbar__links a { width: 100%; padding: 12px 0; font-size: var(--text-sm); }
  .navbar.is-open .navbar__links { display: flex; }
}

/* ---------- Footer (rendered by <site-footer>) ---------- */
.footer { background: var(--color-dark); color: #fff; border-top: 4px solid var(--color-accent); }
.footer__inner { padding-top: 48px; padding-bottom: 24px; }
.footer__cols { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 32px; padding-bottom: 40px; border-bottom: 1px solid var(--white-10); }
.footer__brand { margin-bottom: 12px; font-family: var(--font-headings); font-size: var(--text-base); font-weight: 600; }
.footer__text { max-width: 200px; font-size: var(--text-xs); line-height: 1.6; color: var(--white-60); }
.footer__social { display: flex; gap: 12px; margin-top: 16px; color: var(--white-50); --icon: 15px; }
.footer__title { margin-bottom: 12px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.footer__links { display: flex; flex-direction: column; gap: 8px; font-size: var(--text-xs); color: var(--white-60); }
.footer__links a:hover { color: #fff; }
.footer__form { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.footer__input {
  width: 100%; padding: 10px 12px; border: 1px solid var(--white-10); border-radius: var(--radius-lg);
  background: var(--color-dark-surface); font-size: var(--text-xs); color: #fff;
}
.footer__input::placeholder { color: var(--white-40); }
.footer__submit { padding: 10px; border: 0; border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-ink); font-size: var(--text-xs); font-weight: 600; }
.footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-top: 20px; font-size: var(--text-xs); color: var(--white-40); }
.footer__bottom nav { display: flex; gap: 20px; }
@media (max-width: 1000px) { .footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px)  { .footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer__cols > :first-child { grid-column: 1 / -1; } }

/* ---------- Page hero (inner pages) ---------- */
.page-hero { padding-block: var(--hero-y); }
.page-hero__content { max-width: 768px; }
.page-hero__content--narrow { max-width: 672px; }
.page-hero__title { margin: 12px 0 20px; font-size: var(--text-5xl); line-height: 1.15; letter-spacing: -.02em; }
.page-hero__tagline { margin-bottom: 24px; font-size: var(--text-lg); font-weight: 700; color: var(--color-accent); }
.page-hero__lead { font-size: var(--text-lg); font-weight: 300; line-height: 1.65; color: var(--white-60); }
.page-hero__lead + .actions { margin-top: 32px; }

/* ---------- Home hero (HeroPathways) ---------- */
.home-hero { overflow: hidden; }
.home-hero__main { display: flex; flex-direction: column; align-items: center; text-align: center; padding-top: var(--hero-y); padding-bottom: 80px; }
.home-hero__title { max-width: 860px; margin-top: 16px; font-size: var(--text-6xl); line-height: 1.05; letter-spacing: -.02em; }
.home-hero__lead { max-width: 560px; margin-top: 24px; font-size: var(--text-xl); font-weight: 300; line-height: 1.6; color: var(--white-60); }
.home-hero .actions { margin-top: 32px; }
.home-hero .btn, .home-hero .link-arrow { font-size: var(--text-base); }
.home-hero__stats { display: flex; flex-wrap: wrap; justify-content: center; gap: 32px 64px; margin-top: 64px; }
.stat { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.stat__value { font-family: var(--font-headings); font-size: var(--text-3xl); font-weight: 600; }
.stat__label { font-size: var(--text-xs); color: var(--white-50); }
.home-hero__media { max-height: 560px; overflow: hidden; }

/* ---------- Image placeholder (swap for real <img>) ---------- */
.media {
  position: relative; display: grid; place-items: center; width: 100%; overflow: hidden;
  background:
    radial-gradient(120% 90% at 20% 10%, rgba(245,197,24,.35), transparent 55%),
    radial-gradient(100% 80% at 90% 100%, rgba(255,255,255,.18), transparent 60%),
    linear-gradient(135deg, #1c2e52, #0b1a36);
  color: var(--white-50); --icon: 32px;
}
.media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.media--16x7 { aspect-ratio: 16 / 7; }
.media--16x9 { aspect-ratio: 16 / 9; }
.media--4x5 { aspect-ratio: 4 / 5; }
.media--rounded { border-radius: var(--radius-card); }

/* ---------- Partner strip ---------- */
.partner-strip { background: var(--color-clay); border-bottom: 1px solid var(--color-border); }
.partner-strip__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 40px; padding-block: 16px; }
.partner-strip__label { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.partner-strip__names { display: flex; flex-wrap: wrap; gap: 8px 40px; font-size: var(--text-sm); font-weight: 500; color: var(--ink-50); }

/* ---------- Icon tile ---------- */
.icon-tile { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: var(--radius-md); --icon: 22px; }
.icon-tile--sm { width: 40px; height: 40px; --icon: 18px; }
.icon-tile--xs { width: 24px; height: 24px; border-radius: var(--radius-sm); --icon: 14px; }
.icon-tile--accent { background: var(--color-accent); color: var(--color-ink); }
.icon-tile--soft { background: var(--accent-20); color: #b38e00; }
.icon-tile--ink { background: var(--color-ink); color: var(--color-accent); }
.icon-tile--surface { background: var(--color-dark-surface); color: var(--color-accent); }
.icon-tile--muted { background: var(--color-sage); color: var(--color-muted-foreground); }
.icon-tile--secondary { background: var(--color-secondary); color: var(--color-secondary-foreground); }
.icon-tile + h3, .icon-tile + h4 { margin-top: 16px; }
.icon-tile--center { margin-inline: auto; }

/* ---------- Card (generic container) ---------- */
.card { padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-clay); }
.card--white { background: var(--color-background); }
.card--dark { background: var(--color-dark-card); border-color: var(--white-10); color: #fff; }
.card--accent-soft { background: var(--accent-10); border-color: var(--accent-30); }
.card--secondary { background: var(--color-secondary); }
.card--compact { padding: 24px; }
.card--tight { padding: 16px; }
.card--center { text-align: center; }
.card--row { display: flex; gap: 24px; }
.card__title { font-size: var(--text-xl); margin-bottom: 8px; }
.card__title--lg { font-size: var(--text-2xl); }
.card__title--sm { font-size: var(--text-lg); }
.card__title--xs { font-size: var(--text-sm); margin-bottom: 4px; }
.card__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted-foreground); }
.card__text--strong { color: var(--color-foreground); }
.card--dark .card__title { color: #fff; }
.card--dark .card__text { color: var(--white-60); }
.card__text + .check-list { margin-top: 24px; }
.card__divider { margin-top: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.card__label { margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.card__fade { height: 128px; border-top: 1px solid var(--color-border); background: linear-gradient(to bottom, var(--accent-10), transparent); }
.card--flush { padding: 0; overflow: hidden; }
.card--flush > .card__body { padding: 32px; }

/* ---------- Lists ---------- */
.check-list { display: flex; flex-direction: column; gap: 8px; }
.check-list--roomy { gap: 12px; }
.check-list li { display: flex; align-items: flex-start; gap: 8px; font-size: var(--text-xs); color: var(--color-foreground); }
.check-list--sm li { font-size: var(--text-sm); }
.check-list li > .lucide { --icon: 14px; margin-top: 2px; color: var(--color-accent); }
.check-list--sm li > .lucide { --icon: 16px; }
.check-list--boxed li { gap: 12px; font-size: var(--text-sm); }
.check-list--boxed li > .icon-tile { margin-top: 1px; }

.feature-points { display: flex; flex-direction: column; gap: 16px; }
.feature-point { display: flex; gap: 12px; }
.feature-point > .lucide { --icon: 20px; margin-top: 2px; color: var(--color-accent); }
.feature-point__title { margin-bottom: 4px; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.feature-point__text { font-size: var(--text-sm); color: var(--color-muted-foreground); }

/* ---------- Pills & tags ---------- */
.pill-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); }
.pill--domain { padding: 8px 16px; border: 1px solid var(--color-border); background: var(--color-background); --icon: 14px; }
.pill--domain .lucide { color: #b38e00; }
.pill__label { font-size: var(--text-sm); font-weight: 500; }
.pill__meta { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.tag { padding: 4px 12px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 600; }

/* ---------- Programme grid / card ---------- */
.programme-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.programme-card {
  --pc-bg: var(--color-clay); --pc-fg: var(--color-foreground); --pc-muted: var(--color-muted-foreground);
  --pc-chip: var(--color-background); --pc-chip-fg: var(--color-muted-foreground); --pc-line: var(--color-border);
  position: relative; display: flex; flex-direction: column; padding: 28px; border-radius: var(--radius-card);
  background: var(--pc-bg); color: var(--pc-fg);
}
.programme-card--span { grid-column: span 2; }
.programme-card--dark {
  --pc-bg: var(--color-dark-card); --pc-fg: #fff; --pc-muted: var(--white-60);
  --pc-chip: var(--color-dark-surface); --pc-chip-fg: var(--white-70); --pc-line: var(--white-10);
}
.programme-card--yellow {
  --pc-bg: var(--color-accent); --pc-fg: var(--color-ink); --pc-muted: var(--ink-70);
  --pc-chip: var(--ink-10); --pc-chip-fg: var(--color-ink); --pc-line: var(--ink-15);
}
.programme-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 20px; }
.programme-card .tag { background: var(--ink-10); color: var(--color-ink); }
.programme-card--dark .tag { background: var(--accent-20); color: var(--color-accent); }
.programme-card__step { margin-bottom: 4px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--pc-muted); opacity: .8; }
.programme-card__title { margin-bottom: 12px; font-size: var(--text-2xl); }
.programme-card__desc { margin-bottom: 20px; font-size: var(--text-sm); line-height: 1.6; color: var(--pc-muted); }
.programme-card__info { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.programme-card--span .programme-card__info { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.info-chip { display: flex; align-items: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-md); background: var(--pc-chip); font-size: var(--text-sm); --icon: 14px; }
.info-chip__label { color: var(--pc-muted); }
.info-chip__value { font-weight: 600; }
.programme-card .pill { background: var(--pc-chip); color: var(--pc-chip-fg); }
.programme-card .pill-row { margin-bottom: 24px; }
.programme-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; padding-top: 20px; border-top: 1px solid var(--pc-line); }
.programme-card__price-label { margin-bottom: 2px; font-size: var(--text-xs); color: var(--pc-muted); }
.programme-card__price { font-family: var(--font-headings); font-size: var(--text-2xl); font-weight: 600; }
.programme-card__foot .btn { padding: 8px 20px; }
@media (max-width: 1100px) { .programme-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 760px) {
  .programme-grid { grid-template-columns: minmax(0, 1fr); }
  .programme-card--span { grid-column: auto; }
  .programme-card--span .programme-card__info { grid-template-columns: 1fr; }
}

/* ---------- Course card ---------- */
.course-card { display: flex; flex-direction: column; overflow: hidden; border-radius: var(--radius-xl); background: var(--color-background); }
.course-card .media { height: 192px; aspect-ratio: auto; }
.course-card__body { display: flex; flex: 1; flex-direction: column; gap: 12px; padding: 24px; }
.course-card__domain { font-size: var(--text-xs); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #b38e00; }
.course-card__title { font-size: var(--text-xl); line-height: 1.25; }
.course-card__copy { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted-foreground); }
.course-card__credits { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: #b38e00; --icon: 12px; }
.course-card__foot { display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding-top: 16px; }
.course-card__pace { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.course-card__buy { display: flex; align-items: center; gap: 8px; }
.course-card__price { font-family: var(--font-headings); font-size: var(--text-xl); font-weight: 600; }
.course-card__buy .link-arrow { color: var(--color-ink); text-decoration: underline; text-decoration-color: var(--color-accent); text-underline-offset: 4px; }

/* ---------- Numbered steps ---------- */
.steps { display: flex; flex-direction: column; gap: 16px; margin: 32px 0; }
.step { display: flex; gap: 16px; padding: 20px; border-radius: var(--radius-card); background: var(--color-dark-card); }
.step__num { width: 32px; margin-top: 2px; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; color: var(--color-accent); }
.step__title { font-size: var(--text-sm); font-weight: 600; }
.step__text { margin-top: 4px; font-size: var(--text-sm); color: var(--white-50); }

/* ---------- Testimonial ---------- */
.testimonial { display: flex; flex-direction: column; gap: 16px; padding: 28px; border-radius: var(--radius-card); background: var(--color-background); }
.testimonial__stars { font-size: var(--text-sm); letter-spacing: 2px; color: var(--color-accent); }
.testimonial__quote { font-size: var(--text-base); font-weight: 300; line-height: 1.65; }
.testimonial__person { display: flex; align-items: center; gap: 12px; margin-top: auto; padding-top: 16px; border-top: 1px solid var(--color-border); }
.avatar { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); font-size: var(--text-xs); font-weight: 700; }
.testimonial__name { font-size: var(--text-sm); font-weight: 600; }
.testimonial__role { font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* ---------- Price tiles (home tuition strip) ---------- */
.price-tile { padding: 20px; border-radius: var(--radius-card); background: var(--color-dark-card); }
.price-tile__label { margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-accent); }
.price-tile__value { margin-bottom: 4px; font-family: var(--font-headings); font-size: var(--text-3xl); font-weight: 600; }
.price-tile__note { font-size: var(--text-xs); color: var(--white-50); }
.price-tile--accent { background: var(--color-accent); color: var(--color-ink); }
.price-tile--accent .price-tile__label, .price-tile--accent .price-tile__note { color: var(--ink-70); }
.assurance { display: flex; align-items: center; gap: 8px; margin-top: 24px; font-size: var(--text-sm); color: var(--white-60); --icon: 15px; }

/* ---------- Stat card ---------- */
.stat-card { padding: 32px; border: 1px solid var(--white-10); border-radius: var(--radius-card); background: var(--color-dark-card); text-align: center; }
.stat-card__value { margin-bottom: 8px; font-family: var(--font-headings); font-size: var(--text-4xl); font-weight: 600; color: var(--color-accent); }
.stat-card__label { margin-bottom: 4px; font-size: var(--text-sm); font-weight: 600; }
.stat-card__note { font-size: var(--text-xs); color: var(--white-50); }

/* ---------- Highlight tile (icon + label, dark) ---------- */
.highlight { padding: 24px; border: 1px solid var(--white-10); border-radius: var(--radius-lg); background: var(--color-dark-card); text-align: center; --icon: 24px; }
.highlight > .lucide { margin: 0 auto 12px; color: var(--color-accent); }
.highlight--lg { padding: 32px; --icon: 28px; }
.highlight--lg > .lucide { margin-bottom: 16px; }
.highlight__title { margin-bottom: 4px; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.highlight--lg .highlight__title { margin-bottom: 12px; font-size: var(--text-lg); }
.highlight__text { font-size: var(--text-xs); color: var(--white-60); }
.highlight--lg .highlight__text { font-size: var(--text-sm); }

/* ---------- Forms ---------- */
.form { display: flex; flex-direction: column; gap: 24px; }
.form--compact { gap: 12px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .form__row { grid-template-columns: 1fr; } }
.field__label { display: block; margin-bottom: 8px; font-size: var(--text-sm); font-weight: 600; }
.field__control {
  width: 100%; padding: 12px 16px; border: 1px solid var(--color-border); border-radius: var(--radius-lg);
  background: var(--color-background); font-size: var(--text-sm); color: var(--color-foreground); outline: none;
}
.field__control::placeholder { color: var(--color-muted-foreground); }
.field__control:focus { border-color: var(--color-primary); box-shadow: 0 0 0 3px var(--accent-20); }
textarea.field__control { resize: none; }
select.field__control { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='none' stroke='%23999' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 14px center; padding-right: 40px; }
.form--dark .field__control { background-color: var(--color-dark-surface); border-color: var(--white-10); color: #fff; }
.form--dark .field__control::placeholder { color: var(--white-40); }
.form__note { text-align: center; font-size: var(--text-xs); color: var(--white-40); }

.contact-panel { padding: 32px; border-radius: var(--radius-card); background: var(--color-dark-card); }
.contact-panel__title { margin-bottom: 4px; font-size: var(--text-2xl); }
.contact-panel__sub { margin-bottom: 24px; font-size: var(--text-sm); color: var(--white-50); }

/* ---------- Tables ---------- */
.table-wrap { overflow-x: auto; }
.table-wrap--boxed { border: 1px solid var(--color-border); border-radius: var(--radius-lg); }
.data-table { width: 100%; min-width: 640px; }
.data-table th { padding: 16px; text-align: left; font-family: var(--font-headings); font-weight: 600; font-size: var(--text-base); }
.data-table td { padding: 16px; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.data-table tr { border-bottom: 1px solid var(--color-border); }
.data-table tbody tr:hover { background: rgba(244, 245, 248, .6); }
.data-table .is-strong { font-weight: 600; color: var(--color-foreground); }
.data-table .is-price { font-weight: 600; color: #a07f00; }
.data-table--striped { min-width: 520px; }
.data-table--striped th { padding: 16px 32px; font-size: var(--text-sm); background: var(--color-clay); }
.data-table--striped td { padding: 16px 32px; }
.data-table--striped td:first-child { color: var(--color-foreground); }
.data-table--striped tbody tr { border: 0; }
.data-table--striped tbody tr:nth-child(even) { background: rgba(244, 245, 248, .5); }

/* ---------- FAQ ---------- */
.faq-list { display: flex; flex-direction: column; gap: 16px; max-width: 768px; margin-inline: auto; }
.faq { padding: 24px; border: 1px solid var(--white-10); border-radius: var(--radius-lg); background: var(--color-dark-card); }
.faq__q { display: flex; gap: 12px; margin-bottom: 8px; font-size: var(--text-base); color: #fff; }
.faq__q span { flex-shrink: 0; font-weight: 700; color: var(--color-accent); }
.faq__a { margin-left: 28px; font-size: var(--text-sm); color: var(--white-70); }
.faq--light { border-color: var(--color-border); background: var(--color-clay); }
.faq--light .faq__q { margin-bottom: 12px; color: var(--color-foreground); }
.faq--light .faq__a { margin-left: 0; line-height: 1.6; color: var(--color-muted-foreground); }

/* ---------- CTA panel ---------- */
.cta-panel { padding: 48px; border: 1px solid var(--white-10); border-radius: var(--radius-card); background: var(--color-dark-card); color: #fff; text-align: center; }
.cta-panel--dark { background: var(--color-dark); border: 0; }
.cta-panel--light { background: var(--color-clay); border-color: var(--color-border); color: var(--color-foreground); }
.cta-panel--accent { background: var(--accent-10); border-color: var(--accent-30); color: var(--color-foreground); }
.cta-panel__title { margin: 12px 0 16px; font-size: var(--text-4xl); }
.cta-panel--light .cta-panel__title { margin-top: 0; font-size: var(--text-3xl); }
.cta-panel__text { max-width: 672px; margin: 0 auto 32px; font-size: var(--text-lg); color: var(--white-60); }
.cta-panel--light .cta-panel__text, .cta-panel--accent .cta-panel__text { color: var(--color-muted-foreground); }
.cta-panel--light .cta-panel__text { font-size: var(--text-base); }
@media (max-width: 560px) { .cta-panel { padding: 32px 20px; } }

/* ---------- Fee row (tuition) ---------- */
.fee-list { display: flex; flex-direction: column; gap: 24px; }
.fee { display: flex; align-items: center; gap: 24px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
.fee--white { background: var(--color-background); }
.fee__body { flex: 1; }
.fee__name { margin-bottom: 4px; font-size: var(--text-lg); }
.fee__desc { font-size: var(--text-sm); color: var(--color-muted-foreground); }
.fee__amount { font-family: var(--font-headings); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); white-space: nowrap; }
@media (max-width: 560px) { .fee { flex-wrap: wrap; padding: 24px; } .fee__amount { width: 100%; padding-left: 72px; } }

.summary { padding: 32px; border: 1px solid var(--accent-30); border-radius: var(--radius-lg); background: var(--accent-05); text-align: center; }
.summary--ink { border-color: var(--ink-15); background: var(--ink-05); }
.summary__label { margin-bottom: 8px; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.summary__value { font-family: var(--font-headings); font-size: var(--text-3xl); font-weight: 700; color: var(--color-ink); }
.summary__note { margin-top: 4px; font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* ---------- Plan card (Nomada pricing) ---------- */
.plan { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-clay); }
.plan--featured { background: var(--color-primary); border-color: rgba(245, 197, 24, .5); color: var(--color-ink); }
.plan__name { margin-bottom: 8px; font-size: var(--text-2xl); }
.plan__desc { margin-bottom: 16px; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.plan--featured .plan__desc, .plan--featured .plan__period { color: var(--ink-70); }
.plan__price { margin-bottom: 24px; }
.plan__amount { font-family: var(--font-headings); font-size: var(--text-4xl); font-weight: 700; }
.plan__period { font-size: var(--text-sm); color: var(--color-muted-foreground); }
.plan .btn { margin-bottom: 24px; }
.plan .check-list { flex: 1; gap: 12px; }
.plan .check-list li { font-size: var(--text-sm); }
.plan--featured .check-list li > .lucide { color: var(--color-ink); }

/* ---------- Split section (text + panel) ---------- */
.split__title { margin: 12px 0 24px; font-size: var(--text-4xl); line-height: 1.15; }
.split__text { margin-bottom: 24px; font-size: var(--text-base); line-height: 1.65; color: var(--color-muted-foreground); }
.split .feature-points { margin-bottom: 32px; }
.split__kicker { margin-bottom: 24px; font-size: var(--text-lg); font-weight: 600; color: #a07f00; }
.level-heading__title { margin: 12px 0 16px; font-size: var(--text-3xl); line-height: 1.2; }
.level-heading__text { font-size: var(--text-base); line-height: 1.6; color: var(--color-muted-foreground); }
.stack { display: flex; flex-direction: column; gap: 24px; }
.span-2 { grid-column: span 2; }
@media (max-width: 760px) { .span-2 { grid-column: auto; } }

.callout { display: flex; gap: 12px; align-items: flex-start; --icon: 20px; }
.callout > .lucide { margin-top: 2px; color: #a07f00; }
.callout__title { margin-bottom: 4px; font-size: var(--text-sm); font-weight: 600; }
.callout__text { font-size: var(--text-sm); color: var(--ink-70); }

.info-item { display: flex; gap: 16px; }
.info-item__title { margin-bottom: 4px; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.info-item__text { font-size: var(--text-sm); color: var(--color-muted-foreground); }
.contact-value { display: inline-block; margin-top: 16px; font-family: var(--font-headings); font-size: var(--text-base); font-weight: 700; color: var(--color-ink); word-break: break-all; border-bottom: 2px solid var(--color-accent); }
.contact-value--sm { font-size: var(--text-sm); }
@media (min-width: 761px) { .is-sticky { position: sticky; top: 96px; } }

/* =========================================================
   Programme-detail & catalogue pages
   ========================================================= */
.grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px)  { .grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px)  { .grid--5 { grid-template-columns: minmax(0, 1fr); } }

.section--tight { padding-block: 48px; }
.page-hero--compact { padding-block: 80px; }

/* Search input with leading icon */
.search-bar {
  display: flex; align-items: center; gap: 12px; width: 100%; max-width: 672px;
  padding: 12px 16px; border-radius: var(--radius-pill); background: var(--color-background);
  color: var(--color-muted-foreground); --icon: 18px;
}
.search-bar--clay { border-radius: var(--radius-md); background: var(--color-clay); --icon: 16px; }
.search-bar--sm { padding: 8px 12px; border-radius: var(--radius-md); --icon: 16px; }
.search-bar input { flex: 1; min-width: 0; border: 0; outline: none; background: transparent; font-size: var(--text-sm); color: var(--color-foreground); }
.search-bar input::placeholder { color: var(--color-muted-foreground); }
.search-bar:focus-within { box-shadow: 0 0 0 3px var(--accent-30); }
.page-hero .search-bar { margin-top: 32px; }

/* Stats strip on a dark hero */
.stats-strip { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; margin-top: 48px; }
.stats-strip .stat__value { font-weight: 700; color: var(--color-accent); }
.stats-strip .stat__label { color: var(--white-60); text-align: center; }
@media (max-width: 900px) { .stats-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 480px) { .stats-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Metric card: label / big number / note */
.metric-card { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); text-align: center; }
.metric-card--clay { background: var(--color-clay); }
.metric-card--dark { border-color: var(--white-10); background: var(--color-dark-card); }
.metric-card__label { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.metric-card__value { font-family: var(--font-headings); font-size: var(--text-4xl); font-weight: 700; line-height: 1.15; color: var(--color-ink); }
.metric-card__value--md { font-size: var(--text-3xl); }
.metric-card--dark .metric-card__value { color: var(--color-accent); }
.metric-card__title { font-size: var(--text-sm); font-weight: 600; }
.metric-card__note { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.metric-card--dark .metric-card__note { color: var(--white-60); }
.metric-card > .lucide { margin-top: 8px; color: #b38e00; }
a.metric-card:hover { border-color: var(--color-accent); }

.strip-note { margin-top: 32px; text-align: center; font-size: var(--text-sm); }
.strip-note strong { font-weight: 600; }
.strip-note .hl { font-weight: 600; color: #a07f00; }
.strip-note small { display: block; margin-top: 8px; font-size: var(--text-xs); color: var(--color-muted-foreground); }

.results-count { margin-bottom: 32px; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.results-count strong { font-weight: 600; color: var(--color-foreground); }

/* Small badge (EQF level, index number) */
.badge { flex-shrink: 0; padding: 4px 8px; border-radius: var(--radius-sm); background: var(--accent-20); font-family: var(--font-headings); font-size: var(--text-xs); font-weight: 700; color: #806500; }
.badge--ink { background: var(--ink-10); color: var(--color-ink); }

/* Key/value rows */
.kv { display: flex; flex-direction: column; gap: 12px; }
.kv__row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kv__key { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.kv__val { font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 700; text-align: right; }

/* Catalogue: sidebar + results */
.catalog { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 3fr); gap: 32px; align-items: start; }
@media (max-width: 900px) { .catalog { grid-template-columns: minmax(0, 1fr); } }

.domain-nav { border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
@media (min-width: 901px) { .domain-nav { position: sticky; top: 80px; } }
.domain-nav__head { display: flex; flex-direction: column; gap: 16px; padding: 24px; border-bottom: 1px solid var(--color-border); }
.domain-nav__title { font-size: var(--text-lg); }
.domain-nav__list { display: flex; flex-direction: column; gap: 8px; max-height: 384px; overflow-y: auto; padding: 16px; }
.domain-btn {
  display: flex; align-items: center; justify-content: space-between; gap: 8px; width: 100%;
  padding: 10px 16px; border: 0; border-radius: var(--radius-md); background: transparent;
  text-align: left; font-size: var(--text-sm); font-weight: 500; color: var(--color-foreground);
}
.domain-btn:hover { background: var(--color-sage); }
.domain-btn__count { font-size: var(--text-xs); font-weight: 600; color: var(--color-muted-foreground); }
.domain-btn.is-active { background: var(--color-primary); color: var(--color-ink); }
.domain-btn.is-active .domain-btn__count { color: var(--ink-70); }
.domain-nav__empty { padding: 16px 0; text-align: center; font-size: var(--text-sm); color: var(--color-muted-foreground); }

.results-title { margin-bottom: 8px; font-size: var(--text-2xl); }

/* Micro-credential card */
.cred-card { display: flex; flex-direction: column; padding: 20px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); transition: border-color .15s; }
.cred-card:hover { border-color: rgba(245, 197, 24, .6); }
.cred-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.cred-card__name { font-size: var(--text-sm); line-height: 1.3; }
.cred-card__desc { flex: 1; margin-bottom: 16px; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.cred-card__foot { display: flex; flex-direction: column; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.cred-card__ects { font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.cred-card .link-arrow, .pathway-card .link-arrow { font-size: var(--text-xs); --icon: 12px; }

.empty-state { padding: 48px 24px; border: 1px dashed var(--color-border); border-radius: var(--radius-lg); text-align: center; color: var(--color-muted-foreground); --icon: 24px; }
.empty-state .lucide { margin: 0 auto 12px; }
.empty-state p { font-size: var(--text-sm); }

/* Filter tabs */
.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 48px; padding-bottom: 24px; border-bottom: 1px solid var(--color-border); }
.tab { padding: 8px 24px; border: 0; border-radius: var(--radius-pill); background: var(--color-clay); font-size: var(--text-sm); font-weight: 600; color: var(--color-foreground); }
.tab:hover { background: var(--color-border); }
.tab__count { margin-left: 8px; color: var(--color-muted-foreground); }
.tab.is-active { background: var(--color-primary); color: var(--color-ink); }
.tab.is-active .tab__count { color: var(--ink-70); }

/* Degree pathway card */
.pathway-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
.pathway-card__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; margin-bottom: 16px; }
.pathway-card__name { font-size: var(--text-base); line-height: 1.3; }
.pathway-card .kv { flex: 1; margin-bottom: 16px; }
.pathway-card__foot { padding-top: 16px; border-top: 1px solid var(--color-border); }
.pathway-card__issuer { margin-bottom: 8px; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.pathway-card__fee { margin-bottom: 16px; font-size: var(--text-xs); font-weight: 600; }
[hidden] { display: none !important; }

/* Institutional programme card (top-up, masters) */
.program-card { display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-card); background: var(--color-clay); }
.program-card__index { margin-bottom: 8px; font-size: var(--text-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: #a07f00; }
.program-card__name { margin-bottom: 16px; font-size: var(--text-2xl); line-height: 1.2; }
.program-card__desc { flex: 1; margin-bottom: 24px; font-size: var(--text-sm); line-height: 1.65; color: var(--color-muted-foreground); }
.program-card .kv { margin-bottom: 24px; padding-top: 24px; border-top: 1px solid var(--color-border); }
.program-card .kv__val { font-weight: 600; }
.program-card__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.program-card__fee-label { margin-bottom: 4px; font-size: var(--text-xs); color: var(--color-muted-foreground); }
.program-card__fee { font-family: var(--font-headings); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.btn--soft { padding: 12px 16px; border-radius: var(--radius-md); background: var(--accent-20); color: var(--color-ink); font-size: var(--text-xs); --icon: 14px; }
.btn--soft:hover { background: var(--accent-30); }

/* Small centred feature tile (icon + title + one line) */
.mini-tile { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-background); text-align: center; }
.mini-tile .icon-tile { margin: 0 auto 12px; --icon: 20px; }
.mini-tile__title { margin-bottom: 4px; font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.mini-tile__text { font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* Numbered step card (light) */
.step-card { display: flex; flex-direction: column; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); text-align: center; }
.step-card--white { background: var(--color-background); padding: 32px; }
.step-card__num { margin-bottom: 12px; font-family: var(--font-headings); font-size: var(--text-3xl); font-weight: 700; color: #a07f00; }
.step-card__title { margin-bottom: 8px; font-size: var(--text-sm); }
.step-card--white .step-card__title { font-size: var(--text-lg); }
.step-card__text { font-size: var(--text-xs); color: var(--color-muted-foreground); }
.step-card--white .step-card__text { font-size: var(--text-sm); }

/* =========================================================
   Long-form pages (policies, contributors, sponsorship)
   ========================================================= */
.doc { max-width: 900px; margin-inline: auto; padding: 80px var(--gutter); }
.doc--flush-bottom { padding-bottom: 0; }
.doc__block + .doc__block { margin-top: 48px; }
.doc__block--rule { padding-top: 48px; border-top: 1px solid var(--color-border); }
.doc__block--rule-lg { margin-top: 80px !important; padding-top: 80px; border-top: 1px solid var(--color-border); }
.doc__h2 { margin-bottom: 16px; font-size: var(--text-2xl); }
.doc__h2--lg { margin-bottom: 24px; font-size: var(--text-3xl); }
.doc__h3 { margin-bottom: 12px; font-size: var(--text-xl); }
.doc__h4 { margin-bottom: 8px; font-size: var(--text-base); }
.doc__p { font-size: var(--text-base); line-height: 1.7; color: var(--color-muted-foreground); }
.doc__p--sm { font-size: var(--text-sm); }
.doc__p--strong { color: var(--color-foreground); }
.doc__p + .doc__p, .doc__p + .bullets, .doc__p + .doc-grid, .doc__p + .stack, .doc__p + .notice { margin-top: 16px; }
.doc__lead { margin-bottom: 32px; }
.doc__kicker { margin-top: 24px; font-family: var(--font-headings); font-size: var(--text-lg); font-weight: 600; color: var(--color-ink); }
.doc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.doc-grid--lg { gap: 24px; }
.doc-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
@media (max-width: 760px) { .doc-grid, .doc-grid--3 { grid-template-columns: minmax(0, 1fr); } }
.doc-updated { margin-top: 64px; padding-top: 32px; border-top: 1px solid var(--color-border); font-size: var(--text-xs); color: var(--color-muted-foreground); }

/* Bulleted and numbered text lists */
.bullets { display: flex; flex-direction: column; gap: 12px; }
.bullets li { display: flex; gap: 12px; font-size: var(--text-base); line-height: 1.7; color: var(--color-muted-foreground); }
.bullets li::before { content: "•"; flex-shrink: 0; color: #b38e00; }
.bullets--ol { counter-reset: n; gap: 8px; }
.bullets--ol li { font-size: var(--text-sm); color: var(--color-foreground); counter-increment: n; }
.bullets--ol li::before { content: counter(n) "."; width: 20px; font-weight: 600; }

/* Notice box */
.notice { padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
.notice--compact { padding: 24px; }
.notice--tight { padding: 16px; }
.notice--secondary { border-color: #f6e7a1; background: #fefaea; }
.notice--accent { border-color: var(--accent-30); background: var(--accent-10); }
.notice--white { border-color: transparent; background: rgba(255, 255, 255, .6); }
.notice--row { display: flex; gap: 16px; --icon: 24px; }
.notice--row > .lucide { color: #a07f00; }
.notice--row.notice--tight { gap: 12px; --icon: 18px; }
.notice > .doc__h2:last-child, .notice > .doc__h3:last-child { margin-bottom: 0; }
.notice .doc__p:last-child { margin-bottom: 0; }
.notice + .notice { margin-top: 16px; }

/* Contact details card (label / value pairs) */
.contact-card { display: flex; flex-direction: column; gap: 16px; padding: 32px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
.contact-card--ruled > * + * { padding-top: 16px; border-top: 1px solid var(--color-border); }
.contact-card__title { font-family: var(--font-headings); font-size: var(--text-sm); font-weight: 600; }
.contact-card__label { margin-bottom: 4px; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.contact-card__value { font-size: var(--text-base); font-weight: 600; }
a.contact-card__value { border-bottom: 2px solid var(--color-accent); }
.contact-line { display: flex; align-items: center; gap: 12px; --icon: 20px; }
.contact-line > .lucide { color: #a07f00; }
.contact-line .contact-card__label { margin-bottom: 0; font-size: var(--text-xs); }

/* Centered text + link CTA */
.text-cta { padding-block: 64px; text-align: center; }
.text-cta p { margin-bottom: 16px; font-size: var(--text-sm); color: var(--color-muted-foreground); }
.text-cta .link-arrow { font-size: var(--text-base); --icon: 16px; }

/* Full-width alert strip */
.alert-band { border-block: 1px solid var(--accent-30); background: var(--accent-10); }
.alert-band__inner { display: flex; gap: 16px; padding-block: 48px; --icon: 24px; }
.alert-band__inner > .lucide { color: #a07f00; }
.alert-band__title { margin-bottom: 8px; font-family: var(--font-headings); font-size: var(--text-base); font-weight: 600; }
.alert-band__text { font-size: var(--text-sm); color: var(--color-muted-foreground); }

/* Numbered item (circle number + content) */
.num-item { display: flex; gap: 16px; padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); transition: border-color .15s; }
.num-item:hover { border-color: rgba(245, 197, 24, .6); }
.num-item--gap-lg { gap: 24px; }
.num-badge { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; flex-shrink: 0; border-radius: 50%; background: var(--color-ink); color: var(--color-accent); font-family: var(--font-headings); font-weight: 600; }
.num-badge--lg { width: 64px; height: 64px; margin: 0 auto 16px; font-size: var(--text-xl); }
.num-item__title { margin-bottom: 8px; font-size: var(--text-lg); }
.num-item__text { font-size: var(--text-sm); line-height: 1.65; color: var(--color-muted-foreground); }
.num-item__text--base { font-size: var(--text-base); }
.num-item .notice { margin-top: 12px; }
.num-item .notice--tight { padding: 12px; font-size: var(--text-xs); }

/* Feature tile (big icon, title, text) */
.tile { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); --icon: 24px; }
.tile--white { background: var(--color-background); }
.tile--center { text-align: center; --icon: 28px; }
.tile > .lucide { margin-bottom: 12px; color: #a07f00; }
.tile--center > .lucide { margin-inline: auto; }
.tile--lg-icon { --icon: 28px; }
.tile__title { margin-bottom: 8px; font-size: var(--text-lg); }
.tile__title--sm { font-size: var(--text-base); }
.tile__text { font-size: var(--text-sm); line-height: 1.6; color: var(--color-muted-foreground); }
.tile__stat { margin-bottom: 8px; font-family: var(--font-headings); font-size: var(--text-2xl); font-weight: 700; color: var(--color-ink); }
.tile .check-list { margin-top: 16px; }

/* Rule card (check + heading, indented text) */
.rule { padding: 24px; border: 1px solid var(--color-border); border-radius: var(--radius-lg); background: var(--color-clay); }
.rule__head { display: flex; gap: 12px; margin-bottom: 12px; --icon: 20px; }
.rule__head > .lucide { margin-top: 2px; color: #a07f00; }
.rule__title { font-size: var(--text-base); }
.rule__text { margin-left: 32px; font-size: var(--text-sm); line-height: 1.65; color: var(--color-muted-foreground); }

/* Inline check chips */
.chip-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-pill); background: var(--color-background); font-size: var(--text-xs); --icon: 12px; }
.chip .lucide { color: #a07f00; }

/* Q&A list inside a notice */
.qa + .qa { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--color-border); }
.qa__q { margin-bottom: 8px; font-family: var(--font-headings); font-size: var(--text-base); font-weight: 600; }
.qa__a { font-size: var(--text-sm); color: var(--color-muted-foreground); }

/* Accent CTA band and hero panel */
.cta-band { background: var(--color-accent); color: var(--color-ink); }
.cta-band__inner { max-width: 600px; margin-inline: auto; padding-block: 80px; text-align: center; }
.cta-band__title { margin-bottom: 16px; font-size: var(--text-4xl); }
.cta-band__text { margin-bottom: 32px; font-size: var(--text-base); line-height: 1.65; color: var(--ink-70); }
.btn--lg { padding: 16px 32px; font-size: var(--text-base); --icon: 16px; }
.btn--ghost-ink { border-color: var(--ink-15); background: var(--ink-05); color: var(--color-ink); }
.btn--ghost-ink:hover { background: var(--ink-10); }
.hero-panel { padding: 48px; border-radius: var(--radius-lg); background: var(--color-accent); color: var(--color-ink); }
.hero-panel__title { margin-bottom: 16px; font-size: var(--text-4xl); line-height: 1.15; }
.hero-panel__text { font-size: var(--text-lg); line-height: 1.65; color: var(--ink-70); }
@media (max-width: 560px) { .hero-panel { padding: 32px 24px; } }

.quote { font-size: var(--text-base); line-height: 1.7; color: var(--color-muted-foreground); }
.quote cite { display: block; margin-top: 8px; font-style: normal; font-weight: 600; color: var(--color-foreground); }
.quote__tag { margin-top: 16px; font-size: var(--text-sm); font-weight: 600; color: #a07f00; }
.doc-grid > .notice, .grid > .notice { margin-top: 0; }
.doc__h2--spaced { margin-bottom: 24px; }
.contact-line > div { min-width: 0; }
.contact-card__value { overflow-wrap: anywhere; }
.avatar { object-fit: cover; }

/* ---------- Navbar dropdown (Programmes) ---------- */
.nav-menu { position: relative; display: flex; align-items: center; gap: 2px; }
.nav-menu__toggle { display: inline-flex; padding: 4px; border: 0; background: none; color: var(--white-80); --icon: 14px; }
.nav-menu__toggle .lucide { transition: transform .15s; }
.nav-menu.is-open .nav-menu__toggle .lucide { transform: rotate(180deg); }
.nav-menu__panel {
  position: absolute; top: calc(100% + 12px); left: -16px; z-index: 60;
  display: none; flex-direction: column; min-width: 280px; padding: 8px;
  border: 1px solid var(--white-10); border-radius: var(--radius-md);
  background: var(--color-dark-card); box-shadow: 0 16px 40px rgba(0, 0, 0, .35);
}
/* Invisible bridge so the menu stays open while the pointer moves down to it */
.nav-menu__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -14px; height: 14px; }
.navbar__links .nav-menu__panel a { padding: 10px 12px; border-radius: 8px; font-size: var(--text-sm); color: var(--white-80); white-space: nowrap; }
.navbar__links .nav-menu__panel a:hover, .navbar__links .nav-menu__panel a[aria-current="page"] { background: var(--color-dark-surface); color: var(--color-accent); }
.nav-menu.is-open .nav-menu__panel { display: flex; }
@media (min-width: 901px) and (hover: hover) {
  .nav-menu:hover .nav-menu__panel, .nav-menu:focus-within .nav-menu__panel { display: flex; }
}
@media (max-width: 900px) {
  .nav-menu { flex-wrap: wrap; width: 100%; }
  .nav-menu > a { flex: 1; }
  .nav-menu__toggle { padding: 12px; --icon: 18px; }
  .nav-menu__panel { position: static; width: 100%; min-width: 0; padding: 0 0 8px 16px; border: 0; background: none; box-shadow: none; }
  .nav-menu__panel::before { display: none; }
  .navbar__links .nav-menu__panel a { padding: 10px 0; white-space: normal; }
  .navbar__links .nav-menu__panel a:hover { background: none; }
}