/* =========================================================
   KNLS Official Theme Inspired Full Website
   ---------------------------------------------------------
   Theme colours updated to KNLS requested Pantones:
   Pantone Blue 072 and Pantone Orange 021.
   Web approximations: #10069F and #FE5000.
   ========================================================= */

:root {
  --knls-blue-072: #10069F;
  --knls-orange-021: #FE5000;
  --knls-green: #10069F;
  --knls-green-dark: #06005C;
  --knls-green-soft: #eeedff;
  --knls-gold: #FE5000;
  --knls-gold-soft: #fff1e8;
  --knls-red: #ef4b2b;
  --knls-black: #111827;
  --knls-ink: #1f2937;
  --knls-muted: #65756c;
  --knls-border: #dfe8e2;
  --knls-bg: #f7f7ff;
  --knls-cream: #fff6ea;
  --white: #ffffff;
  --shadow: 0 20px 60px rgba(0, 75, 47, 0.12);
  --radius-lg: 28px;
  --radius-md: 18px;
  --container: 1180px;
  --header-height: 84px;
}

/* Keep the restored National Reading Day gallery title visible on its card. */
.event-news-grid > [data-event-section="national-reading-day-2026"] {
  order: -1;
}

.event-news-card[data-event-section="national-reading-day-2026"]
  .event-news-card__caption .sr-only {
  position: static !important;
  width: auto !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 0 .45rem !important;
  overflow: visible !important;
  clip: auto !important;
  white-space: normal !important;
  border: 0 !important;
}

/* Dynamic CMS cards and public-notice modal */
.dynamic-content-status {
  padding: 18px;
  border: 1px solid rgba(16, 6, 159, .12);
  border-radius: 16px;
  background: #fff;
  color: #536373;
  font-weight: 800;
}

.dynamic-content-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr));
  gap: 18px;
}

.dynamic-content-card {
  overflow: hidden;
  border: 1px solid rgba(16, 6, 159, .12);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 18px 44px rgba(16, 6, 159, .08);
}

.dynamic-content-card img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.dynamic-content-card__body { padding: 18px; }
.dynamic-content-card h3 { margin: 0 0 8px; color: #10069f; }
.dynamic-content-card p { color: #536373; line-height: 1.58; }

.dynamic-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  padding: 18px;
}

.dynamic-notice-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7, 17, 31, .62);
}

.dynamic-notice-modal__panel {
  position: relative;
  z-index: 1;
  width: min(100%, 620px);
  padding: clamp(22px, 4vw, 34px);
  border-radius: 22px;
  background: #fff;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .26);
}

.dynamic-notice-modal__panel img {
  display: block;
  width: 100%;
  max-height: 420px;
  object-fit: contain;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #f8f8ff;
}

.dynamic-notice-modal__panel h2 { margin: 0 0 10px; color: #10069f; }
.dynamic-notice-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 999px;
  background: #fe5000;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
}

body.dark-mode .dynamic-content-card,
body.dark-mode .dynamic-content-status,
body.dark-mode .dynamic-notice-modal__panel {
  background: #101b2f !important;
  border-color: rgba(148, 163, 184, .26) !important;
}

body.dark-mode .dynamic-content-card h3,
body.dark-mode .dynamic-notice-modal__panel h2 { color: #f8fafc !important; }

body.dark-mode .dynamic-content-card p,
body.dark-mode .dynamic-content-status,
body.dark-mode .dynamic-notice-modal__panel p { color: #cbd5e1 !important; }

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: var(--knls-bg);
  color: var(--knls-ink);
  line-height: 1.65;
}

img { max-width: 100%; display: block; }
a { color: inherit; }
button, input, textarea, select { font: inherit; }

.container {
  width: min(100% - 32px, var(--container));
  margin-inline: auto;
}

.skip-link {
  position: absolute;
  top: -80px;
  left: 16px;
  z-index: 9999;
  background: var(--knls-gold);
  color: var(--knls-black);
  padding: 10px 14px;
  border-radius: 12px;
  font-weight: 900;
  transition: top .2s ease;
}

.skip-link:focus { top: 14px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.kicker {
  color: var(--knls-green);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .13em;
  font-size: .78rem;
  margin: 0 0 10px;
}

.kicker--light { color: var(--knls-gold); }

h1, h2, h3 { margin: 0 0 12px; line-height: 1.1; color: var(--knls-black); }
h1 { font-size: clamp(2.5rem, 6vw, 5.7rem); letter-spacing: -.07em; }
h2 { font-size: clamp(2rem, 4vw, 3.2rem); letter-spacing: -.045em; }
h3 { font-size: 1.15rem; }
p { margin-top: 0; color: var(--knls-muted); }

/* Top strip */
.top-strip {
  background: var(--knls-green-dark);
  color: var(--white);
  font-size: .88rem;
}

.top-strip a { color: var(--white); text-decoration: none; }
.top-strip a:hover { text-decoration: underline; }

.top-strip__inner {
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.top-strip__contact,
.top-strip__links {
  display: flex;
  align-items: center;
  gap: 12px;
}

.top-strip__links { flex-wrap: wrap; justify-content: flex-end; }

/* Navigation */
.site-header {
  position: sticky;
  top: 0;
  z-index: 1000;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--knls-border);
}

.nav {
  min-height: var(--header-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  text-decoration: none;
}

.brand__crest {
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--knls-green), var(--knls-gold));
  display: grid;
  place-items: center;
  box-shadow: 0 10px 24px rgba(0,104,56,.22);
  position: relative;
  overflow: hidden;
}

.brand__crest::after {
  content: "";
  position: absolute;
  inset: auto -14px -18px auto;
  width: 42px;
  height: 42px;
  background: var(--knls-red);
  border-radius: 50%;
  opacity: .95;
}

.brand__book {
  width: 28px;
  height: 22px;
  border: 3px solid #fff;
  border-radius: 3px;
  position: relative;
  z-index: 1;
}

.brand__book::before {
  content: "";
  position: absolute;
  top: -3px; bottom: -3px;
  left: 50%;
  border-left: 3px solid #fff;
}

.brand__text strong {
  display: block;
  max-width: 220px;
  text-transform: lowercase;
  font-size: .95rem;
  line-height: 1.15;
  color: var(--knls-black);
}

.brand__text small {
  color: var(--knls-green);
  font-weight: 800;
}

.nav__list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.nav__list a,
.nav__trigger {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 42px;
  padding: 0 10px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--knls-ink);
  font-weight: 800;
  text-decoration: none;
  cursor: pointer;
  font-size: .91rem;
}

.nav__list a:hover,
.nav__list a.is-active,
.nav__trigger:hover {
  background: var(--knls-green-soft);
  color: var(--knls-green);
}

.nav__item--dropdown { position: relative; }

.dropdown {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--knls-border);
  border-radius: 20px;
  box-shadow: var(--shadow);
  list-style: none;
  padding: 12px;
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  visibility: hidden;
  pointer-events: none;
  transition: .2s ease;
}

.nav__item--dropdown:hover .dropdown,
.nav__item--dropdown:focus-within .dropdown,
.nav__item--dropdown.is-open .dropdown {
  opacity: 1;
  transform: translateY(0);
  visibility: visible;
  pointer-events: auto;
}

.dropdown a {
  width: 100%;
  justify-content: flex-start;
  border-radius: 12px;
}

.search-button,
.menu-toggle {
  border: 1px solid var(--knls-border);
  background: var(--white);
  color: var(--knls-black);
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  cursor: pointer;
}

.menu-toggle { display: none; }

.menu-toggle__line {
  display: block;
  width: 20px;
  height: 2px;
  background: var(--knls-black);
  border-radius: 99px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

.btn--green { background: var(--knls-green); color: var(--white); box-shadow: 0 14px 28px rgba(0,104,56,.22); }
.btn--gold { background: var(--knls-gold); color: var(--knls-black); }
.btn--outline { background: var(--white); color: var(--knls-green); border-color: var(--knls-border); }

.button-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }


/* Official KNLS homepage colour adaptation:
   The provided homepage screenshot uses a white utility/header area, deep blue/purple footer/nav accents,
   and bright orange subscription/CTA sections. */
.top-strip {
  background: var(--white);
  color: var(--knls-ink);
  border-bottom: 1px solid var(--knls-border);
}

.top-strip a {
  color: var(--knls-ink);
}

.top-strip a:hover {
  color: var(--knls-gold);
}

.site-header {
  border-bottom: 4px solid var(--knls-green);
}

.nav__list a:hover,
.nav__list a.is-active,
.nav__trigger:hover {
  background: var(--knls-gold-soft);
  color: var(--knls-gold);
}

.search-button,
.menu-toggle {
  border-color: rgba(68, 0, 153, .22);
}

.btn--blue {
  background: var(--knls-green);
  color: var(--white);
  box-shadow: 0 14px 28px rgba(68, 0, 153, .22);
}

.btn--orange {
  background: var(--knls-gold);
  color: var(--white);
  box-shadow: 0 14px 28px rgba(255, 89, 0, .24);
}

.section--soft-blue {
  background: #f3f3fb;
}

/* Hero */
.hero {
  position: relative;
  overflow: hidden;
  min-height: calc(100vh - var(--header-height));
  display: grid;
  align-items: center;
  background:
    linear-gradient(115deg, rgba(0,104,56,.98), rgba(0,75,47,.92)),
    url("../images/kenya-pattern.svg");
}

.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 90% 15%, rgba(244,180,0,.34), transparent 24%),
    radial-gradient(circle at 5% 90%, rgba(214,40,40,.20), transparent 22%);
}

.hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 1.02fr .98fr;
  gap: 54px;
  align-items: center;
  padding: 80px 0;
}

.hero .kicker,
.hero h1,
.hero h2 { color: var(--white); }

.hero__copy p {
  font-size: 1.15rem;
  color: rgba(255,255,255,.84);
  max-width: 720px;
}

.hero__visual {
  background: rgba(255,255,255,.92);
  border-radius: 34px;
  padding: 22px;
  box-shadow: 0 30px 80px rgba(0,0,0,.22);
}

.stats-card {
  margin-top: 14px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.stats-card div {
  background: var(--knls-cream);
  border-radius: 18px;
  padding: 14px;
}

.stats-card strong {
  display: block;
  color: var(--knls-green);
  font-size: 1.45rem;
}

.stats-card span {
  color: var(--knls-muted);
  font-size: .86rem;
  font-weight: 700;
}

.quick-actions {
  margin-top: -38px;
  position: relative;
  z-index: 5;
}

.quick-actions__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}

.quick-action {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px;
  background: var(--white);
  border: 1px solid var(--knls-border);
  border-radius: 20px;
  text-decoration: none;
  box-shadow: var(--shadow);
}

.quick-action span { font-size: 1.6rem; }
.quick-action strong { color: var(--knls-black); }

/* Sections */
.section { padding: 88px 0; }
.section--cream { background: var(--knls-cream); }
.section--green { background: var(--knls-green-dark); color: var(--white); }
.section--green h2, .section--green h3 { color: var(--white); }
.section--green p { color: rgba(255,255,255,.80); }

.section-title {
  max-width: 780px;
  margin-bottom: 34px;
}

.page-hero {
  background:
    linear-gradient(135deg, rgba(0,104,56,.94), rgba(0,75,47,.97)),
    url("../images/kenya-pattern.svg");
  color: var(--white);
  padding: 82px 0;
}

.page-hero h1,
.page-hero .kicker { color: var(--white); }

.page-hero p {
  color: rgba(255,255,255,.82);
  font-size: 1.08rem;
  max-width: 780px;
}


/* Data Centre page hero image */
.page-hero--data-center {
  background:
    linear-gradient(90deg, rgba(22, 20, 84, .78), rgba(22, 20, 84, .50)),
    url("../images/homepage-final/data-centre-hero.webp") center/cover no-repeat;
}

.page-hero__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 30px;
  align-items: end;
}

.breadcrumbs {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  background: rgba(255,255,255,.12);
  color: var(--white);
  border: 1px solid rgba(255,255,255,.24);
  padding: 10px 14px;
  border-radius: 999px;
  white-space: nowrap;
}

.breadcrumbs a { color: var(--white); text-decoration: none; }

.card-grid,
.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.link-card,
.feature-card,
.content-panel,
.side-panel,
.cta-card,
.contact-info,
.contact-form,
.faq-card {
  background: var(--white);
  border: 1px solid var(--knls-border);
  border-radius: var(--radius-md);
  padding: 24px;
  box-shadow: var(--shadow);
}

.link-card {
  display: flex;
  min-height: 245px;
  flex-direction: column;
}

.link-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, var(--knls-green-soft), var(--knls-gold-soft));
  font-size: 1.45rem;
  margin-bottom: 16px;
}

.link-card a,
.feature-card a {
  margin-top: auto;
  color: var(--knls-green);
  text-decoration: none;
  font-weight: 900;
}

.two-column,
.contact-layout,
.split-cta {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(320px, .8fr);
  gap: 34px;
  align-items: start;
}

.side-panel {
  border-top: 6px solid var(--knls-gold);
}

.check-list { list-style: none; padding: 0; margin: 0; }
.check-list li {
  position: relative;
  padding: 10px 0 10px 30px;
  color: var(--knls-muted);
}
.check-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--knls-green);
  font-weight: 900;
}

.number-list {
  margin: 0;
  padding-left: 20px;
  color: var(--knls-muted);
}

.download-list {
  display: grid;
  gap: 12px;
  margin-top: 22px;
}

.download-list a {
  display: block;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--knls-green-soft);
  color: var(--knls-green);
  text-decoration: none;
  font-weight: 900;
}

.cta-card {
  background: var(--white);
}
.cta-card h3 { color: var(--knls-black); }
.cta-card p { color: var(--knls-muted); }

/* Forms */
.contact-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.form-row--full { grid-column: 1 / -1; }

.form-row label {
  display: block;
  color: var(--knls-black);
  font-weight: 900;
  margin-bottom: 7px;
}

input, textarea, select {
  width: 100%;
  border: 1px solid var(--knls-border);
  border-radius: 14px;
  padding: 13px 14px;
  background: var(--white);
  color: var(--knls-ink);
}

input:focus, textarea:focus, select:focus {
  outline: 4px solid rgba(0,104,56,.14);
  border-color: var(--knls-green);
}

.error {
  display: block;
  min-height: 18px;
  color: var(--knls-red);
  font-weight: 800;
  font-size: .86rem;
  margin-top: 4px;
}

.form-message {
  color: var(--knls-green);
  font-weight: 900;
  margin: 8px 0 0;
}

.hours-card {
  margin-top: 24px;
  background: var(--knls-cream);
  padding: 20px;
  border-radius: 18px;
}

/* FAQ and gallery */
.faq-list {
  display: grid;
  gap: 14px;
  max-width: 900px;
}

.faq-card summary {
  cursor: pointer;
  font-weight: 900;
  color: var(--knls-black);
}

.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.gallery-item {
  min-height: 210px;
  border-radius: 24px;
  display: grid;
  place-items: end start;
  padding: 20px;
  background:
    linear-gradient(135deg, rgba(0,104,56,.86), rgba(0,75,47,.88)),
    url("../images/kenya-pattern.svg");
  color: var(--white);
  box-shadow: var(--shadow);
}

.gallery-item:nth-child(2n) {
  background:
    linear-gradient(135deg, rgba(244,180,0,.88), rgba(214,40,40,.80)),
    url("../images/kenya-pattern.svg");
}

.gallery-item span {
  font-weight: 900;
  font-size: 1.15rem;
}


/* Critical fix: keep the search modal hidden when the hidden attribute is present.
   Without this, .search-dialog { display: grid; } can override the browser's default hidden behavior. */
.search-dialog[hidden] {
  display: none !important;
}

/* Search */
.search-dialog {
  position: fixed;
  inset: 0;
  z-index: 5000;
  background: rgba(0,0,0,.55);
  padding: 88px 16px 16px;
  display: grid;
  place-items: start center;
}

.search-dialog__panel {
  width: min(760px, 100%);
  position: relative;
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 30px;
  box-shadow: 0 35px 90px rgba(0,0,0,.3);
}

.search-dialog__close {
  position: absolute;
  top: 18px; right: 18px;
  width: 42px; height: 42px;
  border-radius: 999px;
  border: 1px solid var(--knls-border);
  background: var(--white);
  cursor: pointer;
  font-size: 1.5rem;
}

.search-results {
  margin-top: 18px;
  display: grid;
  gap: 10px;
  max-height: 50vh;
  overflow: auto;
}

.search-result {
  display: block;
  padding: 14px;
  border-radius: 16px;
  background: var(--knls-bg);
  text-decoration: none;
}

.search-result strong { color: var(--knls-black); }
.search-result span { color: var(--knls-muted); }

/* Footer */
.site-footer {
  background: var(--knls-green-dark);
  color: var(--white);
}

.footer-newsletter {
  background: var(--knls-gold);
  padding: 42px 0;
}

.footer-newsletter__inner {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 480px);
  gap: 28px;
  align-items: center;
}

.footer-newsletter h2,
.footer-newsletter .kicker { color: var(--white); }

.newsletter {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 10px;
}

.footer-main {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1fr 1.1fr;
  gap: 28px;
  padding: 54px 0;
}

.brand--footer .brand__text strong,
.site-footer h3 { color: var(--white); }

.site-footer small,
.site-footer p,
.site-footer li,
.site-footer a {
  color: rgba(255,255,255,.78);
}

.site-footer ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.site-footer li { margin-bottom: 8px; }
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--knls-gold); }

.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.15);
  padding: 18px 0;
}

/* Animation */
.reveal {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Responsive */
@media (max-width: 1100px) {
  .top-strip__links { display: none; }
  .menu-toggle {
    display: inline-grid;
    gap: 4px;
  }

  .nav__list {
    position: fixed;
    top: calc(var(--header-height) + 44px);
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 130px);
    overflow: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    background: var(--white);
    border: 1px solid var(--knls-border);
    border-radius: 22px;
    box-shadow: var(--shadow);
  }

  .nav__list.is-open { display: flex; }
  .nav__list a, .nav__trigger { width: 100%; justify-content: space-between; }
  .dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: var(--knls-bg);
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin: 6px 0 8px;
  }
  .nav__item--dropdown.is-open .dropdown { display: block; }
}

@media (max-width: 900px) {
  .hero__grid,
  .two-column,
  .contact-layout,
  .split-cta,
  .page-hero__inner,
  .footer-newsletter__inner {
    grid-template-columns: 1fr;
  }

  .card-grid,
  .feature-grid,
  .gallery-grid,
  .footer-main,
  .quick-actions__grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .breadcrumbs { width: max-content; }
}

@media (max-width: 640px) {
  .section { padding: 62px 0; }
  .hero__grid { padding: 64px 0 92px; }
  .brand__text strong { max-width: 150px; font-size: .78rem; }
  .brand__text small { font-size: .75rem; }
  .card-grid,
  .feature-grid,
  .gallery-grid,
  .footer-main,
  .quick-actions__grid,
  .stats-card,
  .contact-form,
  .newsletter {
    grid-template-columns: 1fr;
  }
  .form-row--full { grid-column: auto; }
  .top-strip__inner { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; }
  .reveal { opacity: 1; transform: none; }
}


/* ---------- Refined homepage from uploaded KNLS homepage PDF ---------- */

.home-stage {
  background: var(--white);
  padding: 10px 0 0;
  border-bottom: 4px solid var(--knls-green);
}

.home-stage__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 330px;
  gap: 28px;
  align-items: stretch;
  padding: 6px 0;
}

.values-slide {
  min-height: 430px;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  background:
    linear-gradient(90deg, rgba(68, 0, 153, .82), rgba(68, 0, 153, .54)),
    url("../images/maktaba-values.svg");
  background-size: cover;
  background-position: center;
  box-shadow: var(--shadow);
}

.values-slide__overlay {
  min-height: 430px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(32px, 7vw, 72px);
}

.values-slide h1 {
  color: var(--knls-gold);
  font-size: clamp(3.2rem, 8vw, 6.4rem);
  letter-spacing: -.07em;
  text-transform: none;
  margin-bottom: 8px;
}

.values-slide p {
  color: var(--white);
  max-width: 720px;
  font-size: clamp(1.1rem, 2vw, 1.55rem);
  font-weight: 900;
  line-height: 1.25;
}

.slider-dots {
  display: flex;
  gap: 9px;
  margin-top: 42px;
}

.slider-dots span {
  width: 13px;
  height: 13px;
  border: 2px solid var(--white);
  border-radius: 999px;
  opacity: .92;
}

.slider-dots span.is-active {
  background: var(--white);
}

.vtabu-card {
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 430px;
  border: 1px solid var(--knls-border);
  background: var(--white);
  box-shadow: var(--shadow);
}

.vtabu-card__top {
  padding: 26px;
  background:
    radial-gradient(circle at 82% 18%, rgba(255, 89, 0, .25), transparent 30%),
    linear-gradient(135deg, #10069F, var(--knls-green-dark));
  color: var(--white);
}

.vtabu-card h2,
.vtabu-card p {
  color: var(--white);
}

.vtabu-card h2 {
  font-size: 1.45rem;
}

.plan-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  margin-top: 22px;
}

.plan-grid div {
  min-height: 82px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 10px;
  background: var(--white);
  color: var(--knls-green);
  border-radius: 50%;
  aspect-ratio: 1 / 1;
  box-shadow: 0 10px 22px rgba(0, 0, 0, .18);
}

.plan-grid strong {
  display: block;
  color: var(--knls-green);
  font-size: .98rem;
  line-height: 1.05;
}

.plan-grid span {
  display: block;
  color: var(--knls-black);
  font-size: .76rem;
  font-weight: 800;
}

.virtual-cta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 24px 26px;
  text-decoration: none;
  color: var(--knls-black);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.virtual-cta:hover {
  color: var(--knls-gold);
}

.welcome-block {
  background: var(--white);
  padding-top: 48px;
  padding-bottom: 44px;
}

.welcome-copy {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
}

.welcome-copy h2 {
  text-transform: uppercase;
  font-size: clamp(1.8rem, 3vw, 2.55rem);
  letter-spacing: -.03em;
}

.welcome-copy p {
  color: var(--knls-ink);
}

.social-row {
  margin-top: 20px;
  display: flex;
  justify-content: center;
  gap: 12px;
}

.social-row a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  background: var(--knls-green);
  color: var(--white);
  text-decoration: none;
  font-weight: 900;
}

.social-row a:hover {
  background: var(--knls-gold);
}

.service-preview {
  padding-top: 46px;
  padding-bottom: 58px;
}

.service-preview__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: var(--white);
  box-shadow: var(--shadow);
}

.home-service-card {
  padding: 48px clamp(22px, 3vw, 44px);
  border-right: 1px solid var(--knls-border);
}

.home-service-card:last-child {
  border-right: 0;
}

.home-service-card__icon {
  width: 58px;
  height: 58px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--knls-gold-soft);
  font-size: 1.6rem;
  margin: 0 auto 18px;
}

.home-service-card h3 {
  text-align: center;
  color: var(--knls-black);
  margin-bottom: 26px;
}

.home-service-card p {
  color: var(--knls-ink);
  font-size: .96rem;
}

.home-service-card a {
  display: inline-flex;
  margin-top: 10px;
  color: var(--knls-green);
  text-decoration: none;
  font-weight: 900;
}

.home-service-card a:hover {
  color: var(--knls-gold);
}

.author-publisher {
  padding-top: 48px;
  background: var(--white);
}

.author-publisher__panel {
  max-width: 1040px;
  margin-inline: auto;
  text-align: center;
  background:
    linear-gradient(135deg, rgba(68, 0, 153, .06), rgba(255, 89, 0, .10)),
    var(--white);
  border: 1px solid var(--knls-border);
  border-radius: var(--radius-lg);
  padding: clamp(30px, 5vw, 58px);
  box-shadow: var(--shadow);
}

.author-publisher__panel p {
  max-width: 920px;
  margin-inline: auto;
}

.author-publisher__panel .button-row {
  justify-content: center;
}

.home-directory {
  border-top: 1px solid var(--knls-border);
}

.footer-newsletter,
.footer-newsletter p,
.footer-newsletter .kicker {
  color: var(--knls-black);
}

.footer-newsletter h2 {
  color: var(--knls-black);
}

.footer-newsletter input {
  border-color: rgba(0, 0, 0, .35);
  background: transparent;
  color: var(--knls-black);
}

.footer-newsletter input::placeholder {
  color: rgba(0, 0, 0, .55);
}

.footer-newsletter .btn--gold {
  background: transparent;
  color: var(--knls-black);
  border-color: var(--white);
  border-width: 2px;
}

.footer-newsletter .btn--gold:hover {
  background: var(--white);
}

@media (max-width: 980px) {
  .home-stage__grid,
  .service-preview__grid {
    grid-template-columns: 1fr;
  }

  .home-service-card {
    border-right: 0;
    border-bottom: 1px solid var(--knls-border);
  }

  .home-service-card:last-child {
    border-bottom: 0;
  }

  .vtabu-card,
  .values-slide,
  .values-slide__overlay {
    min-height: 360px;
  }
}

@media (max-width: 640px) {
  .home-stage {
    padding-top: 0;
  }

  .values-slide h1 {
    font-size: 3.2rem;
  }

  .plan-grid {
    grid-template-columns: repeat(2, minmax(110px, 1fr));
  }

  .plan-grid div {
    border-radius: 22px;
    aspect-ratio: auto;
  }
}


/* =========================================================
   Modernised homepage using the uploaded KNLS homepage PDF
   Palette: deep KNLS blue/purple, bright orange, white, black.
   ========================================================= */

:root {
  --knls-blue: #10069F;
  --knls-blue-dark: #06005C;
  --knls-orange: #FE5000;
  --knls-orange-soft: #fff1e8;
  --knls-paper: #ffffff;
  --knls-soft-blue: #f2f2fb;
}

.btn--light {
  background: var(--white);
  color: var(--knls-blue);
}

.btn--hero-outline {
  background: rgba(255, 255, 255, .10);
  color: var(--white);
  border-color: rgba(255, 255, 255, .42);
}

.btn--hero-outline:hover {
  background: rgba(255, 255, 255, .18);
}

.modern-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: 720px;
  display: grid;
  align-items: center;
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 89, 0, .38), transparent 25%),
    linear-gradient(135deg, var(--knls-blue), var(--knls-blue-dark));
  color: var(--white);
}

.modern-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(68, 0, 153, .90), rgba(68, 0, 153, .72)),
    url("../images/knls-modern-building.svg");
  background-size: cover;
  background-position: center;
  opacity: .92;
}

.modern-hero::after {
  content: "";
  position: absolute;
  inset: auto -12% -30% auto;
  width: 640px;
  height: 640px;
  border-radius: 50%;
  background: rgba(255, 89, 0, .20);
  z-index: -1;
}

.modern-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(340px, .72fr);
  gap: 46px;
  align-items: center;
  padding: 86px 0;
}

.modern-hero h1 {
  color: var(--white);
  font-size: clamp(3.3rem, 7vw, 7rem);
  letter-spacing: -.08em;
  max-width: 780px;
}

.modern-hero__lead {
  max-width: 760px;
  color: rgba(255, 255, 255, .88);
  font-size: clamp(1.08rem, 2vw, 1.28rem);
}

.core-values-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 6px;
  max-width: 820px;
}

.core-values-strip span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: var(--white);
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.membership-panel {
  background: rgba(255, 255, 255, .96);
  color: var(--knls-black);
  border-radius: 32px;
  box-shadow: 0 28px 78px rgba(0, 0, 0, .28);
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .50);
}

.membership-panel__header {
  padding: 28px 28px 18px;
  background:
    radial-gradient(circle at 90% 0%, rgba(255, 89, 0, .25), transparent 34%),
    var(--white);
}

.panel-badge {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--knls-orange-soft);
  color: var(--knls-orange);
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
  margin-bottom: 14px;
}

.membership-panel h2 {
  font-size: clamp(1.6rem, 3vw, 2.25rem);
  color: var(--knls-blue);
  letter-spacing: -.04em;
}

.membership-panel p {
  color: var(--knls-muted);
}

.membership-plans {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 12px;
  padding: 0 28px 24px;
}

.membership-plans article {
  min-height: 108px;
  display: grid;
  place-items: center;
  text-align: center;
  padding: 14px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--knls-soft-blue), var(--white));
  border: 1px solid rgba(68, 0, 153, .10);
}

.membership-plans article:nth-child(5) {
  grid-column: 1 / -1;
  min-height: 88px;
  background: linear-gradient(135deg, var(--knls-orange), #FE5000);
}

.membership-plans article:nth-child(5) strong,
.membership-plans article:nth-child(5) span {
  color: var(--white);
}

.membership-plans strong {
  display: block;
  color: var(--knls-blue);
  font-size: 1.18rem;
  line-height: 1.05;
}

.membership-plans span {
  display: block;
  color: var(--knls-muted);
  font-size: .84rem;
  font-weight: 900;
}

.panel-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 22px 28px;
  background: var(--knls-blue);
  color: var(--white);
  font-weight: 900;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .02em;
}

.panel-link:hover {
  background: var(--knls-orange);
}

.homepage-intro {
  background: var(--white);
}

.intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, .72fr);
  gap: 34px;
  align-items: stretch;
}

.intro-card,
.facts-panel {
  background: var(--white);
  border: 1px solid var(--knls-border);
  border-radius: 30px;
  padding: clamp(28px, 5vw, 48px);
  box-shadow: var(--shadow);
}

.intro-card {
  border-top: 7px solid var(--knls-orange);
}

.intro-card h2 {
  color: var(--knls-blue);
}

.intro-card p {
  color: var(--knls-ink);
}

.intro-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

.intro-actions a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 16px;
  border-radius: 999px;
  background: var(--knls-soft-blue);
  color: var(--knls-blue);
  font-weight: 900;
  text-decoration: none;
}

.intro-actions a:hover {
  background: var(--knls-orange);
  color: var(--white);
}

.facts-panel {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .18), transparent 32%),
    var(--knls-blue);
}

.facts-panel h3 {
  color: var(--white);
  font-size: 1.5rem;
}

.facts-list {
  display: grid;
  gap: 14px;
  margin-top: 18px;
}

.facts-list div {
  background: rgba(255, 255, 255, .10);
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 18px;
  padding: 18px;
}

.facts-list strong {
  display: block;
  color: var(--knls-orange);
  font-size: 1.6rem;
  line-height: 1;
  margin-bottom: 8px;
}

.facts-list span {
  color: rgba(255, 255, 255, .86);
  font-weight: 700;
}

.section-title--center {
  text-align: center;
  margin-inline: auto;
}

.pathway-grid {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 22px;
  align-items: stretch;
}

.pathway-card {
  background: var(--white);
  border: 1px solid var(--knls-border);
  border-radius: 30px;
  padding: 30px;
  box-shadow: var(--shadow);
}

.pathway-card--large {
  grid-row: span 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background:
    linear-gradient(135deg, rgba(68, 0, 153, .92), rgba(37, 33, 112, .92)),
    url("../images/kenya-pattern.svg");
}

.pathway-card--large h3,
.pathway-card--large .kicker {
  color: var(--white);
}

.pathway-card--large p {
  color: rgba(255, 255, 255, .82);
}

.pathway-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  border-radius: 20px;
  background: var(--knls-orange-soft);
  font-size: 1.75rem;
  margin-bottom: 18px;
}

.pathway-card--large .pathway-card__icon {
  background: var(--knls-orange);
}

.pathway-card h3 {
  color: var(--knls-blue);
  font-size: clamp(1.5rem, 3vw, 2rem);
}

.pathway-card a {
  display: inline-flex;
  margin-top: 12px;
  color: var(--knls-orange);
  font-weight: 900;
  text-decoration: none;
}

.pathway-card:not(.pathway-card--large) a {
  color: var(--knls-blue);
}

.author-journey {
  background: var(--white);
}

.author-journey__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(360px, 1.05fr);
  gap: 34px;
  align-items: center;
}

.author-journey__copy h2 {
  color: var(--knls-blue);
}

.journey-steps {
  display: grid;
  gap: 14px;
}

.journey-steps a {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 14px;
  align-items: center;
  padding: 20px;
  border-radius: 22px;
  background: var(--knls-soft-blue);
  border: 1px solid rgba(68, 0, 153, .10);
  text-decoration: none;
}

.journey-steps a:hover {
  background: var(--knls-blue);
}

.journey-steps a:hover strong,
.journey-steps a:hover small {
  color: var(--white);
}

.journey-steps span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: var(--knls-orange);
  color: var(--white);
  font-weight: 900;
}

.journey-steps strong {
  display: block;
  color: var(--knls-blue);
  font-size: 1.05rem;
}

.journey-steps small {
  display: block;
  color: var(--knls-muted);
  font-weight: 700;
}

.quick-modern-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.quick-modern-card {
  display: grid;
  gap: 8px;
  padding: 26px;
  border-radius: 26px;
  background: var(--white);
  border: 1px solid var(--knls-border);
  text-decoration: none;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.quick-modern-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(68, 0, 153, .16);
}

.quick-modern-card span {
  font-size: 2rem;
}

.quick-modern-card strong {
  color: var(--knls-blue);
  font-size: 1.1rem;
}

.quick-modern-card small {
  color: var(--knls-muted);
  font-weight: 700;
}

.footer-newsletter {
  background: var(--knls-orange) !important;
}

.site-footer {
  background: var(--knls-blue) !important;
}

@media (max-width: 980px) {
  .modern-hero {
    min-height: auto;
  }

  .modern-hero__grid,
  .intro-grid,
  .pathway-grid,
  .author-journey__grid {
    grid-template-columns: 1fr;
  }

  .quick-modern-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .pathway-card--large {
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .modern-hero__grid {
    padding: 62px 0;
  }

  .membership-plans,
  .quick-modern-grid {
    grid-template-columns: 1fr;
  }

  .membership-plans article:nth-child(5) {
    grid-column: auto;
  }

  .journey-steps a {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Global refinement pass
   - Opening animation
   - Better navigation spacing
   - KNLS blue/orange theme applied globally
   - Logo and page image treatment
   ========================================================= */

:root {
  --knls-green: #10069F;
  --knls-green-dark: #06005C;
  --knls-green-soft: #efefff;
  --knls-gold: #FE5000;
  --knls-gold-soft: #fff1e8;
  --knls-red: #ef4b2b;
  --knls-bg: #f7f7ff;
  --knls-cream: #fff6ea;
  --shadow: 0 20px 60px rgba(68, 0, 153, 0.12);
}

/* Opening animation */
.page-loader {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  background:
    radial-gradient(circle at 72% 18%, rgba(255, 89, 0, .28), transparent 24%),
    linear-gradient(135deg, #10069F, #06005C);
  transition: opacity .55s ease, visibility .55s ease;
}

body.is-loaded .page-loader {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.page-loader__card {
  width: min(360px, calc(100% - 42px));
  display: grid;
  justify-items: center;
  gap: 18px;
  padding: 30px;
  border-radius: 30px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  animation: loaderEnter .65s cubic-bezier(.2,.7,.2,1) both;
}

.page-loader__card img {
  width: 220px;
  height: auto;
}

.page-loader__card p {
  color: #10069F;
  font-weight: 900;
  margin: 0;
  text-align: center;
}

.page-loader__bar {
  width: 100%;
  height: 8px;
  overflow: hidden;
  border-radius: 999px;
  background: #efefff;
}

.page-loader__bar span {
  display: block;
  width: 40%;
  height: 100%;
  border-radius: inherit;
  background: #FE5000;
  animation: loaderBar 1s ease-in-out infinite;
}

@keyframes loaderEnter {
  from { opacity: 0; transform: translateY(18px) scale(.96); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes loaderBar {
  0% { transform: translateX(-110%); }
  100% { transform: translateX(260%); }
}

/* Navigation spacing and logo */
.site-header {
  border-bottom: 4px solid #10069F;
}

.nav {
  min-height: 96px;
  gap: 22px;
}

.brand {
  gap: 14px;
  flex: 0 0 auto;
}

.brand__logo {
  width: 180px;
  max-width: 42vw;
  height: auto;
  display: block;
}

.brand__crest,
.brand__book {
  display: none !important;
}

.brand__text {
  display: none;
}

.nav__list {
  gap: 8px;
  margin-left: auto;
}

.nav__list a,
.nav__trigger {
  min-height: 46px;
  padding: 0 13px;
  font-size: .92rem;
  white-space: nowrap;
}

.dropdown {
  top: calc(100% + 14px);
}

.search-button {
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  color: #10069F;
  border-color: rgba(47,43,143,.25);
}

.top-strip {
  background: #ffffff;
  color: #1f2937;
  border-bottom: 1px solid #e3e3f3;
}

.top-strip a {
  color: #1f2937;
}

.top-strip a:hover {
  color: #FE5000;
}

/* Global theme consistency */
.page-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,89,0,.35), transparent 24%),
    linear-gradient(135deg, #10069F, #06005C),
    url("../images/kenya-pattern.svg");
}

.link-card__icon,
.pathway-card__icon,
.card-icon {
  background: linear-gradient(135deg, #fff1e8, #efefff);
}

.link-card a,
.feature-card a,
.service-row a,
.news-card a {
  color: #10069F;
}

.link-card a:hover,
.feature-card a:hover,
.service-row a:hover,
.news-card a:hover {
  color: #FE5000;
}

.btn--green {
  background: #10069F;
  color: #ffffff;
  box-shadow: 0 14px 28px rgba(47,43,143,.22);
}

.btn--green:hover {
  background: #06005C;
}

.btn--gold {
  background: #FE5000;
  color: #ffffff;
}

.side-panel {
  border-top-color: #FE5000;
}

.check-list li::before {
  color: #FE5000;
}

.download-list a {
  background: #efefff;
  color: #10069F;
}

.download-list a:hover {
  background: #fff1e8;
  color: #FE5000;
}

.footer-newsletter {
  background: #FE5000 !important;
}

.footer-newsletter h2,
.footer-newsletter .kicker,
.footer-newsletter p {
  color: #111827 !important;
}

.site-footer {
  background: #10069F !important;
}

.footer-bottom {
  border-top-color: rgba(255,89,0,.45);
}

/* Homepage and page visuals */
.intro-media-card {
  margin-top: 34px;
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(280px, .55fr);
  gap: 28px;
  align-items: center;
  padding: 24px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.intro-media-card img {
  border-radius: 24px;
  width: 100%;
}

.intro-media-card h3 {
  color: #10069F;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.about-image-band {
  background: #ffffff;
}

.about-image-band__grid {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(320px, .75fr);
  gap: 34px;
  align-items: center;
}

.about-image-band__image {
  border-radius: 32px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
}

.about-image-band__image img {
  width: 100%;
}

.about-image-band__copy {
  padding: 28px;
  border-radius: 28px;
  background: #efefff;
  border: 1px solid #e4e4f2;
}

.about-image-band__copy h2 {
  color: #10069F;
}

.contact-visual-card {
  margin: 24px 0 0;
  padding: 14px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.contact-visual-card img {
  border-radius: 18px;
  width: 100%;
}

.contact-visual-card figcaption {
  margin-top: 10px;
  color: #65756c;
  font-size: .9rem;
  font-weight: 700;
}

/* Responsive navigation refinement */
@media (max-width: 1280px) {
  .menu-toggle {
    display: inline-grid;
    gap: 4px;
  }

  .nav__list {
    position: fixed;
    top: calc(96px + 45px);
    left: 16px;
    right: 16px;
    max-height: calc(100vh - 150px);
    overflow: auto;
    display: none;
    flex-direction: column;
    align-items: stretch;
    padding: 16px;
    background: #ffffff;
    border: 1px solid #e4e4f2;
    border-radius: 22px;
    box-shadow: var(--shadow);
    margin-left: 0;
  }

  .nav__list.is-open {
    display: flex;
  }

  .nav__list a,
  .nav__trigger {
    width: 100%;
    justify-content: space-between;
  }

  .dropdown {
    position: static;
    width: 100%;
    box-shadow: none;
    border: 0;
    background: #f7f7ff;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    margin: 6px 0 8px;
  }

  .nav__item--dropdown.is-open .dropdown {
    display: block;
  }
}

@media (max-width: 760px) {
  .nav {
    min-height: 86px;
  }

  .brand__logo {
    width: 145px;
  }

  .intro-media-card,
  .about-image-band__grid {
    grid-template-columns: 1fr;
  }

  .page-loader__card img {
    width: 190px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .page-loader,
  .page-loader__card,
  .page-loader__bar span {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   Uploaded KNLS branding and image integration
   ========================================================= */

.brand__logo {
  width: 220px;
  max-width: 44vw;
  height: auto;
  object-fit: contain;
}

.page-loader__card img {
  width: 240px;
  max-width: 80%;
}

.modern-hero__bg {
  background:
    linear-gradient(90deg, rgba(68, 0, 153, .90), rgba(68, 0, 153, .70)),
    url("../images/knls-front-desk.webp") !important;
  background-size: cover !important;
  background-position: center !important;
}

.home-image-showcase {
  background: #ffffff;
  padding-top: 40px;
}

.home-image-showcase__grid {
  display: grid;
  grid-template-columns: 1.2fr .8fr;
  grid-template-rows: repeat(2, 260px);
  gap: 18px;
}

.showcase-card {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 30px;
  background: #10069F;
  box-shadow: var(--shadow);
}

.showcase-card--large {
  grid-row: span 2;
}

.showcase-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.showcase-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(37, 33, 112, .82), rgba(37, 33, 112, .08));
}

.showcase-card figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  color: #ffffff;
}

.showcase-card figcaption span {
  display: inline-flex;
  margin-bottom: 8px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.showcase-card figcaption strong {
  display: block;
  font-size: clamp(1.15rem, 2vw, 1.8rem);
  line-height: 1.15;
}

.showcase-card:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.about-image-band__image img,
.about-mobile-library__image img,
.contact-visual-card img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.about-mobile-library__grid {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, 1.1fr);
  gap: 34px;
  align-items: center;
}

.about-mobile-library__copy {
  padding: 32px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.about-mobile-library__copy h2 {
  color: #10069F;
}

.about-mobile-library__image {
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
}

.about-mobile-library__image img {
  width: 100%;
}

/* Board of Directors interactive photo grid */
.board-section {
  background: #ffffff;
}

.board-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.board-card {
  position: relative;
  overflow: hidden;
  min-height: 380px;
  border-radius: 30px;
  background: #f2f2fb;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
  isolation: isolate;
}

.board-card img {
  width: 100%;
  height: 100%;
  min-height: 380px;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.board-card__overlay {
  position: absolute;
  inset: auto 18px 18px 18px;
  z-index: 2;
  padding: 18px;
  border-radius: 22px;
  background: rgba(68, 0, 153, .92);
  border: 1px solid rgba(255, 255, 255, .18);
  color: #ffffff;
  transform: translateY(18px);
  opacity: 0;
  transition: transform .3s ease, opacity .3s ease;
  backdrop-filter: blur(12px);
}

.board-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(37, 33, 112, .58), transparent 55%);
  opacity: 0;
  transition: opacity .3s ease;
  z-index: 1;
}

.board-card__overlay h3 {
  color: #ffffff;
  margin-bottom: 4px;
  font-size: 1.2rem;
}

.board-card__overlay p {
  color: rgba(255, 255, 255, .86);
  margin: 0;
  font-weight: 700;
}

.board-card:hover img,
.board-card:focus-within img {
  transform: scale(1.06);
  filter: saturate(1.05);
}

.board-card:hover::after,
.board-card:focus-within::after,
.board-card:hover .board-card__overlay,
.board-card:focus-within .board-card__overlay {
  opacity: 1;
  transform: translateY(0);
}

/* Keyboard support: reveal overlay when card receives focus */
.board-card:focus-within {
  outline: 4px solid rgba(255, 89, 0, .35);
  outline-offset: 4px;
}

@media (max-width: 980px) {
  .home-image-showcase__grid,
  .about-mobile-library__grid,
  .board-grid {
    grid-template-columns: 1fr 1fr;
  }

  .home-image-showcase__grid {
    grid-template-rows: auto;
  }

  .showcase-card--large {
    grid-row: auto;
  }

  .showcase-card {
    min-height: 300px;
  }
}

@media (max-width: 640px) {
  .brand__logo {
    width: 170px;
  }

  .home-image-showcase__grid,
  .about-mobile-library__grid,
  .board-grid {
    grid-template-columns: 1fr;
  }

  .board-card,
  .board-card img {
    min-height: 340px;
  }
}


/* =========================================================
   Events page and official board member photo grid
   ========================================================= */

.page-hero--events,
.page-hero--board {
  background:
    radial-gradient(circle at 88% 12%, rgba(255, 89, 0, .34), transparent 24%),
    linear-gradient(135deg, #10069F, #06005C),
    url("../images/kenya-pattern.svg");
}

.board-grid--official {
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
}

.board-card--photo {
  min-height: auto;
  background: #f2f2f2;
  padding: 0 0 28px;
  border-radius: 0;
  border: 0;
  box-shadow: none;
  overflow: hidden;
}

.board-card--photo .board-card__image-wrap {
  margin: 0 auto;
  width: min(86%, 340px);
  border: 3px solid #10069F;
  background: #ffffff;
  overflow: hidden;
}

.board-card--photo img {
  width: 100%;
  height: 300px;
  min-height: 300px;
  object-fit: cover;
  object-position: top center;
  transition: transform .45s ease, filter .45s ease;
}

.board-card--photo .board-card__caption {
  padding: 24px 18px 8px;
  text-align: center;
}

.board-card--photo .board-card__caption h3 {
  color: #10069F;
  text-transform: uppercase;
  font-size: clamp(1.25rem, 2vw, 1.7rem);
  letter-spacing: -.03em;
  margin-bottom: 8px;
}

.board-card--photo .board-card__caption p {
  color: #111827;
  font-weight: 700;
  margin: 0;
}

.board-card--photo .board-card__overlay {
  inset: 16px;
  display: grid;
  align-content: end;
  border-radius: 0;
  background: linear-gradient(to top, rgba(68, 0, 153, .94), rgba(68, 0, 153, .10));
}

.board-card--photo:hover .board-card__image-wrap,
.board-card--photo:focus .board-card__image-wrap,
.board-card--photo:focus-within .board-card__image-wrap {
  border-color: #FE5000;
}

.board-card--photo:hover img,
.board-card--photo:focus img,
.board-card--photo:focus-within img {
  transform: scale(1.05);
}

.board-card--photo:focus {
  outline: 4px solid rgba(255, 89, 0, .35);
  outline-offset: 6px;
}

.events-feature {
  background: #ffffff;
}

.events-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, .85fr) minmax(320px, 1.1fr);
  gap: 34px;
  align-items: center;
}

.events-feature__copy {
  padding: clamp(28px, 5vw, 48px);
  border-radius: 30px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.events-feature__copy h2 {
  color: #10069F;
}

.events-feature__image {
  margin: 0;
  border-radius: 30px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
}

.events-feature__image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.event-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.event-card {
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease;
}

.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 26px 70px rgba(68, 0, 153, .16);
}

.event-card img {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.event-card__body {
  padding: 24px;
}

.event-card h3 {
  color: #10069F;
}

.event-tag {
  display: inline-flex;
  margin-bottom: 12px;
  padding: 6px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.event-meta {
  display: grid;
  gap: 6px;
  margin-top: 16px;
  color: #65756c;
  font-weight: 800;
  font-size: .92rem;
}

@media (max-width: 980px) {
  .board-grid--official,
  .event-grid,
  .events-feature__grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (max-width: 640px) {
  .board-grid--official,
  .event-grid,
  .events-feature__grid {
    grid-template-columns: 1fr;
  }

  .board-card--photo img {
    height: 320px;
  }
}


/* =========================================================
   Board hover correction
   Keep director photos sharp on hover. Do not blur, dim, or wash out the image.
   Only the name/title panel animates in.
   ========================================================= */

.board-card {
  background: #ffffff;
}

.board-card img {
  filter: none !important;
  opacity: 1 !important;
  transform: none;
}

.board-card:hover img,
.board-card:focus-within img {
  filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Remove full-image dark overlay that made photos look blurred/dimmed */
.board-card::after {
  display: none !important;
  opacity: 0 !important;
}

/* Keep overlay neat and readable without covering the full image */
.board-card__overlay {
  inset: auto 16px 16px 16px !important;
  background: rgba(68, 0, 153, 0.96) !important;
  border: 1px solid rgba(255, 255, 255, 0.28);
  box-shadow: 0 14px 36px rgba(0, 0, 0, 0.18);
  backdrop-filter: none !important;
}

.board-card:hover .board-card__overlay,
.board-card:focus-within .board-card__overlay {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

.board-card__overlay h3,
.board-card__overlay p {
  text-shadow: none;
}


/* =========================================================
   Downloadable documents
   Reusable cards for PDFs, forms, notices, tenders and reports.
   ========================================================= */

.documents-section {
  background: #ffffff;
}

.document-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 22px;
}

.document-grid--single {
  grid-template-columns: minmax(0, 760px);
}

.document-card {
  display: grid;
  grid-template-columns: 74px 1fr auto;
  gap: 18px;
  align-items: center;
  padding: 22px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.document-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 89, 0, .45);
  box-shadow: 0 24px 70px rgba(68, 0, 153, .16);
}

.document-card__icon {
  width: 64px;
  height: 64px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .04em;
}

.document-card h3 {
  color: #10069F;
  margin-bottom: 6px;
}

.document-card p {
  margin-bottom: 6px;
}

.document-card__meta {
  display: inline-flex;
  width: fit-content;
  padding: 4px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.download-guidance {
  margin-top: 34px;
  padding: 26px;
  border-radius: 26px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
}

.download-guidance h3 {
  color: #10069F;
}

.download-guidance code,
.documents-section code {
  padding: 2px 6px;
  border-radius: 6px;
  background: #fff1e8;
  color: #10069F;
  font-weight: 800;
}

.download-guidance ol {
  margin-bottom: 0;
  color: #65756c;
}

@media (max-width: 900px) {
  .document-grid {
    grid-template-columns: 1fr;
  }

  .document-card {
    grid-template-columns: 64px 1fr;
  }

  .document-card .btn {
    grid-column: 1 / -1;
    width: 100%;
  }
}

@media (max-width: 560px) {
  .document-card {
    grid-template-columns: 1fr;
    text-align: left;
  }
}


/* =========================================================
   Service Charter page refinement with video embeds
   ========================================================= */

.service-charter-hero {
  background:
    radial-gradient(circle at 88% 10%, rgba(255, 89, 0, .38), transparent 24%),
    linear-gradient(135deg, #10069F, #06005C),
    url("../images/kenya-pattern.svg");
}

.service-charter-nav-wrap {
  position: sticky;
  top: 96px;
  z-index: 80;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #e4e4f2;
}

.service-charter-nav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding: 12px 0;
  scrollbar-width: thin;
}

.service-charter-nav a {
  flex: 0 0 auto;
  display: inline-flex;
  min-height: 40px;
  align-items: center;
  justify-content: center;
  padding: 0 15px;
  border-radius: 999px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
  color: #10069F;
  font-weight: 900;
  text-decoration: none;
}

.service-charter-nav a:hover {
  background: #FE5000;
  border-color: #FE5000;
  color: #ffffff;
}

.service-charter-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(280px, .55fr);
  gap: 28px;
  align-items: stretch;
}

.charter-highlight {
  display: grid;
  align-content: center;
  justify-items: start;
  padding: 28px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .18), transparent 36%),
    #10069F;
  color: #ffffff;
  box-shadow: var(--shadow);
}

.charter-highlight img {
  width: 220px;
  max-width: 100%;
  margin-bottom: 20px;
  background: #ffffff;
  border-radius: 16px;
  padding: 10px;
}

.charter-highlight h3 {
  color: #ffffff;
  font-size: 1.6rem;
}

.charter-highlight p {
  color: rgba(255, 255, 255, .84);
}

.commitment-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.commitment-card {
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.commitment-card span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 900;
  margin-bottom: 18px;
}

.commitment-card h3 {
  color: #10069F;
}

.service-video-section {
  background: #ffffff;
}

.video-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.video-card {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.video-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 26px 80px rgba(68, 0, 153, .16);
}

.video-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #06005C;
}

.video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-card__body {
  padding: 22px;
}

.video-card__body h3 {
  color: #10069F;
}

.feedback-panel {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: 30px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.feedback-panel h2 {
  color: #10069F;
}

@media (max-width: 1100px) {
  .commitment-grid,
  .video-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-charter-nav-wrap {
    top: 86px;
  }
}

@media (max-width: 760px) {
  .service-charter-intro,
  .commitment-grid,
  .video-grid {
    grid-template-columns: 1fr;
  }

  .feedback-panel {
    align-items: flex-start;
    flex-direction: column;
  }
}


/* =========================================================
   Final content updates: management, strategy, organisation,
   partners, awards and careers
   ========================================================= */
.management-section,
.strategic-section,
.org-structure-section,
.partners-section,
.awards-section,
.careers-section { background: #ffffff; }

.management-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}
.management-card {
  text-align: center;
  padding: 24px 20px 26px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.management-card:hover { transform: translateY(-6px); border-color: rgba(255,89,0,.45); box-shadow: 0 24px 70px rgba(47,43,143,.16); }
.management-card__photo {
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f2f2fb;
  box-shadow: inset 0 0 0 1px #e4e4f2;
  background: #f7f7ff;
}
.management-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; }
.management-card h3 { color: #10069F; font-size: 1.25rem; margin-bottom: 8px; }
.management-card p { color: #FE5000; font-weight: 800; margin: 0; }

.org-chart-card {
  margin: 0;
  padding: 22px;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  overflow: auto;
}
.org-chart-card img { width: 100%; min-width: 860px; height: auto; border-radius: 18px; background: #fff; }
.org-chart-card figcaption { margin-top: 12px; color: #65756c; font-weight: 800; text-align: center; }

.partners-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.partner-card {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 22px;
  align-items: center;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}
.partner-card__logo {
  display: grid;
  place-items: center;
  width: 150px;
  height: 130px;
  padding: 14px;
  border-radius: 24px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
  transition: transform .2s ease, border-color .2s ease;
}
.partner-card__logo:hover { transform: translateY(-3px); border-color: #FE5000; }
.partner-card__logo img { max-width: 100%; max-height: 100%; object-fit: contain; }
.partner-card h3 { color: #10069F; }
.text-link { color: #FE5000; text-decoration: none; font-weight: 900; }

.awards-table-card { overflow-x: auto; border-radius: 28px; box-shadow: var(--shadow); border: 1px solid #e4e4f2; background: #ffffff; }
.awards-table { width: 100%; border-collapse: collapse; min-width: 760px; }
.awards-table th { background: #10069F; color: #ffffff; text-align: left; padding: 18px; font-size: .95rem; }
.awards-table td { padding: 18px; border-bottom: 1px solid #e4e4f2; vertical-align: top; color: #1f2937; }
.awards-table tr:nth-child(even) td { background: #f7f7ff; }
.award-type { display: inline-flex; padding: 7px 12px; border-radius: 999px; background: #fff1e8; color: #FE5000; font-weight: 900; }
.award-links { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; justify-content: center; }

.career-tabs { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-bottom: 26px; }
.career-tab { border: 1px solid #e4e4f2; background: #ffffff; color: #10069F; border-radius: 999px; padding: 13px 20px; font-weight: 900; cursor: pointer; transition: .2s ease; }
.career-tab:hover, .career-tab.is-active { background: #FE5000; color: #ffffff; border-color: #FE5000; }
.career-panels { max-width: 960px; margin: 0 auto; }
.career-panel { display: none; padding: 30px; border-radius: 28px; background: #ffffff; border: 1px solid #e4e4f2; box-shadow: var(--shadow); }
.career-panel.is-active { display: block; }
.career-panel h3 { color: #10069F; font-size: 1.8rem; }
.career-panel h4 { color: #10069F; margin: 22px 0 8px; }
.career-panel li { margin-bottom: 8px; color: #65756c; }
.career-note { padding: 14px 16px; border-left: 4px solid #FE5000; background: #fff1e8; border-radius: 12px; font-weight: 800; }

.download-guidance { display: none !important; }

@media (max-width: 980px) {
  .management-grid, .partners-grid { grid-template-columns: repeat(2, 1fr); }
  .partner-card { grid-template-columns: 1fr; }
  .partner-card__logo { width: 100%; }
}
@media (max-width: 640px) {
  .management-grid, .partners-grid { grid-template-columns: 1fr; }
  .management-card__photo { width: 190px; height: 190px; }
}


/* =========================================================
   National Library service pages: ISBN, KNB and Legal Deposit
   ========================================================= */
.service-detail__layout {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.service-page-nav {
  position: sticky;
  top: 128px;
  display: grid;
  gap: 10px;
  padding: 16px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.service-page-nav a {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  color: #10069F;
  text-decoration: none;
  font-weight: 900;
}

.service-page-nav a:hover {
  background: #fff1e8;
  color: #FE5000;
}

.service-detail__content {
  display: grid;
  gap: 24px;
}

.service-block {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.service-block h2,
.service-block h3 {
  color: #10069F;
}

.action-band {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.two-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

.pricing-table-wrap {
  overflow-x: auto;
}

.pricing-table {
  width: 100%;
  border-collapse: collapse;
  overflow: hidden;
  border-radius: 18px;
  background: #ffffff;
}

.pricing-table th {
  background: #10069F;
  color: #ffffff;
  text-align: left;
}

.pricing-table th,
.pricing-table td {
  padding: 15px 18px;
  border-bottom: 1px solid #e4e4f2;
}

.pricing-table tbody tr:nth-child(even) {
  background: #f7f7ff;
}

.faq-accordion {
  display: grid;
  gap: 12px;
}

.faq-accordion details {
  border: 1px solid #e4e4f2;
  border-radius: 18px;
  padding: 16px 18px;
  background: #f7f7ff;
}

.faq-accordion summary {
  cursor: pointer;
  color: #10069F;
  font-weight: 900;
}

.faq-accordion p {
  margin: 12px 0 0;
}

.process-list {
  display: grid;
  gap: 10px;
  padding-left: 24px;
  color: #65756c;
}

.process-list li::marker {
  color: #FE5000;
  font-weight: 900;
}

.notice-card {
  margin-top: 22px;
  padding: 18px;
  border-left: 6px solid #FE5000;
  border-radius: 18px;
  background: #fff1e8;
  color: #1f2937;
}

.requirements-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}

.requirements-grid article {
  padding: 22px;
  border-radius: 22px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
}

.requirements-grid span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  margin-bottom: 16px;
  border-radius: 16px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 900;
}

.knb-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.knb-resource-card {
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.knb-resource-card img {
  width: 100%;
  height: 250px;
  object-fit: cover;
  background: #10069F;
}

.knb-resource-card div {
  padding: 16px;
}

.knb-resource-card h3 {
  color: #10069F;
  font-size: 1rem;
}

@media (max-width: 1100px) {
  .service-detail__layout { grid-template-columns: 1fr; }
  .service-page-nav { position: static; grid-template-columns: repeat(2, 1fr); }
  .knb-resource-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 760px) {
  .service-page-nav,
  .two-list-grid,
  .requirements-grid,
  .knb-resource-grid {
    grid-template-columns: 1fr;
  }
  .action-band .btn { width: 100%; }
}


/* =========================================================
   Services dropdown refinement + nested National Library subtabs
   ========================================================= */

/* Desktop dropdowns: hover/focus only. This prevents old clicked menus from staying open. */
@media (min-width: 1281px) {
  .nav__item--dropdown > .dropdown {
    opacity: 0;
    transform: translateY(10px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  }

  .nav__item--dropdown:hover > .dropdown,
  .nav__item--dropdown:focus-within > .dropdown {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .nav__item--dropdown.is-open:not(:hover):not(:focus-within) > .dropdown {
    opacity: 0 !important;
    transform: translateY(10px) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }

  /* Hover bridge: allows cursor movement from tab to dropdown without premature closing. */
  .nav__item--dropdown::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 18px;
  }
}

.dropdown--services {
  width: 330px;
  padding: 14px;
}

.dropdown__group {
  display: block;
  margin-bottom: 6px;
}

.dropdown__group-title {
  font-weight: 900 !important;
  background: #efefff !important;
  color: #10069F !important;
}

.dropdown__sub {
  margin: 8px 0 10px 14px;
  padding: 8px 0 8px 12px;
  border-left: 3px solid #FE5000;
  list-style: none;
}

.dropdown__sub a {
  min-height: 36px !important;
  padding: 0 10px !important;
  font-size: .86rem !important;
  color: #65756c !important;
  background: transparent !important;
}

.dropdown__sub a:hover,
.dropdown__sub a:focus {
  color: #FE5000 !important;
  background: #fff1e8 !important;
}

/* =========================================================
   Service detail pages
   ========================================================= */

.service-detail-layout {
  display: grid;
  grid-template-columns: 290px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}

.service-side-nav {
  position: sticky;
  top: 132px;
  padding: 20px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.service-side-nav h2 {
  color: #10069F;
  font-size: 1.2rem;
  margin-bottom: 14px;
}

.service-side-nav a {
  display: block;
  padding: 11px 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #f7f7ff;
  color: #10069F;
  text-decoration: none;
  font-weight: 800;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}

.service-side-nav a:hover,
.service-side-nav a.is-current {
  background: #fff1e8;
  color: #FE5000;
  transform: translateX(2px);
}

.service-side-nav__nested {
  margin: 0 0 10px 12px;
  padding-left: 12px;
  border-left: 3px solid #FE5000;
}

.service-side-nav__nested a {
  font-size: .9rem;
  background: #ffffff;
  border: 1px solid #e4e4f2;
}

.service-detail-content {
  padding: clamp(24px, 4vw, 44px);
}

.service-detail-content h2,
.service-detail-content h3,
.service-detail-content h4 {
  color: #10069F;
}

.service-detail-content h3 {
  margin-top: 30px;
}

.service-detail-content p {
  color: #1f2937;
}

.service-intro-card {
  padding: clamp(22px, 4vw, 34px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255,89,0,.16), transparent 32%),
    #efefff;
  border: 1px solid #e4e4f2;
  margin-bottom: 24px;
}

.service-intro-card h2 {
  margin-bottom: 10px;
}

.service-feature-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 24px 0;
}

.service-feature-grid article,
.ecitizen-service-grid article {
  padding: 22px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 16px 42px rgba(47,43,143,.08);
}

.service-feature-grid h3,
.ecitizen-service-grid h4 {
  color: #10069F;
}

.service-detail-list {
  margin-top: 12px;
  margin-bottom: 22px;
}

.service-chip-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 14px 0 26px;
}

.service-chip-grid span {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  background: #fff1e8;
  color: #10069F;
  font-weight: 900;
}

.accordion-list {
  display: grid;
  gap: 14px;
  margin-top: 20px;
}

.accordion-list details {
  border: 1px solid #e4e4f2;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(47,43,143,.07);
  overflow: hidden;
}

.accordion-list summary {
  cursor: pointer;
  padding: 18px 20px;
  color: #10069F;
  font-weight: 900;
  list-style: none;
}

.accordion-list summary::-webkit-details-marker {
  display: none;
}

.accordion-list details[open] summary {
  background: #efefff;
}

.accordion-list details > ul {
  padding: 6px 20px 20px;
}

.service-contact-card {
  margin-top: 26px;
  padding: 24px;
  border-radius: 24px;
  background: #10069F;
  color: #ffffff;
}

.service-contact-card h3,
.service-contact-card p,
.service-contact-card a {
  color: #ffffff;
}

.service-contact-card .btn,
.service-contact-card a.btn {
  color: #ffffff;
}

.service-downloads {
  margin-top: 34px;
  padding-top: 24px;
  border-top: 1px solid #e4e4f2;
}

.mini-download-grid {
  display: grid;
  gap: 14px;
}

.mini-download-card {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 16px;
  border-radius: 18px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
}

.mini-download-card > span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
}

.mini-download-card strong {
  display: block;
  color: #10069F;
}

.mini-download-card small {
  color: #65756c;
  font-weight: 700;
}

.mini-download-card a {
  color: #FE5000;
  font-weight: 900;
  text-decoration: none;
}

.ecitizen-service-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
  margin: 22px 0 28px;
}

@media (max-width: 980px) {
  .service-detail-layout,
  .service-feature-grid,
  .ecitizen-service-grid {
    grid-template-columns: 1fr;
  }

  .service-side-nav {
    position: static;
  }

  .mini-download-card {
    grid-template-columns: 56px 1fr;
  }

  .mini-download-card a {
    grid-column: 1 / -1;
  }
}

@media (max-width: 640px) {
  .dropdown--services {
    width: 100%;
  }

  .dropdown__sub {
    margin-left: 8px;
  }
}


/* =========================================================
   Mobile compatibility pass
   Improves small-screen navigation, dropdowns, spacing, media and cards.
   ========================================================= */

/* Prevent accidental horizontal scrolling caused by wide elements */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

/* Make all embedded media scale safely */
iframe,
video,
embed,
object {
  max-width: 100%;
}

/* Responsive tables and wide content */
table {
  max-width: 100%;
}

.content-panel,
.service-detail-content,
.document-card,
.link-card,
.feature-card {
  min-width: 0;
}

/* Mobile navigation */
@media (max-width: 1280px) {
  .site-header {
    position: sticky;
    top: 0;
    z-index: 4000;
  }

  .nav {
    min-height: 78px;
    gap: 10px;
  }

  .brand {
    min-width: 0;
    flex: 1 1 auto;
  }

  .brand__logo {
    width: 155px;
    max-width: 58vw;
  }

  .menu-toggle {
    display: inline-grid !important;
    place-items: center;
    gap: 4px;
    flex: 0 0 44px;
    z-index: 4100;
  }

  .search-button {
    flex: 0 0 44px;
    width: 44px;
    height: 44px;
  }

  .nav__list {
    position: fixed !important;
    top: 78px !important;
    left: 12px !important;
    right: 12px !important;
    max-height: calc(100dvh - 96px) !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 8px !important;
    padding: 14px !important;
    margin: 0 !important;
    background: #ffffff !important;
    border: 1px solid #e4e4f2 !important;
    border-radius: 22px !important;
    box-shadow: 0 24px 70px rgba(68, 0, 153, .20) !important;
  }

  .nav__list.is-open {
    display: flex !important;
  }

  .nav__list > li {
    width: 100%;
  }

  .nav__list a,
  .nav__trigger {
    width: 100% !important;
    min-height: 46px !important;
    justify-content: space-between !important;
    padding: 0 14px !important;
    border-radius: 14px !important;
    white-space: normal !important;
    text-align: left !important;
  }

  /* Disable desktop hover positioning on mobile */
  .nav__item--dropdown::after {
    display: none !important;
  }

  .dropdown,
  .dropdown--services {
    position: static !important;
    width: 100% !important;
    max-width: 100% !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 6px 0 8px !important;
    padding: 10px !important;
    box-shadow: none !important;
    border: 1px solid #e4e4f2 !important;
    border-radius: 16px !important;
    background: #f7f7ff !important;
  }

  .nav__item--dropdown.is-open > .dropdown {
    display: block !important;
  }

  .dropdown li {
    width: 100%;
  }

  .dropdown a {
    width: 100% !important;
    display: flex !important;
    align-items: center !important;
    min-height: 42px !important;
    padding: 0 12px !important;
    border-radius: 12px !important;
  }

  .dropdown__group-title {
    background: #ffffff !important;
    color: #10069F !important;
  }

  .dropdown__sub {
    margin: 8px 0 8px 8px !important;
    padding: 6px 0 6px 10px !important;
    border-left: 3px solid #FE5000 !important;
  }

  .dropdown__sub a {
    min-height: 38px !important;
    font-size: .9rem !important;
    line-height: 1.25 !important;
  }

  .top-strip__inner {
    min-height: auto;
    padding: 8px 0;
  }

  .top-strip__contact {
    width: 100%;
    justify-content: center;
    flex-wrap: wrap;
    text-align: center;
    gap: 8px;
  }

  .top-strip__links {
    display: none !important;
  }
}

/* Phone-first layout fixes */
@media (max-width: 980px) {
  .container {
    width: min(100% - 24px, var(--container));
  }

  .section {
    padding: 56px 0;
  }

  .page-hero {
    padding: 56px 0;
  }

  .page-hero__inner,
  .hero__grid,
  .modern-hero__grid,
  .intro-grid,
  .service-detail-layout,
  .two-column,
  .contact-layout,
  .split-cta,
  .footer-newsletter__inner,
  .footer-main,
  .card-grid,
  .feature-grid,
  .service-feature-grid,
  .ecitizen-service-grid,
  .document-grid,
  .quick-modern-grid,
  .home-image-showcase__grid,
  .about-image-band__grid,
  .about-mobile-library__grid,
  .board-grid {
    grid-template-columns: 1fr !important;
  }

  .breadcrumbs {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
  }

  .modern-hero {
    min-height: auto;
  }

  .modern-hero__grid {
    padding: 56px 0;
  }

  .modern-hero h1,
  .hero h1,
  .page-hero h1 {
    font-size: clamp(2.35rem, 12vw, 4rem);
    letter-spacing: -0.055em;
  }

  .membership-panel,
  .intro-card,
  .facts-panel,
  .content-panel,
  .side-panel,
  .contact-form,
  .contact-info {
    border-radius: 22px;
  }

  .service-side-nav {
    position: static !important;
    top: auto !important;
    order: -1;
  }

  .service-side-nav__nested {
    margin-left: 6px;
  }

  .pathway-grid {
    grid-template-columns: 1fr !important;
  }

  .pathway-card--large {
    grid-row: auto !important;
  }

  .showcase-card,
  .showcase-card--large {
    min-height: 260px;
    grid-row: auto !important;
  }

  .footer-main {
    gap: 28px;
  }

  .newsletter {
    grid-template-columns: 1fr !important;
  }

  .contact-form {
    grid-template-columns: 1fr !important;
  }

  .form-row--full {
    grid-column: auto !important;
  }
}

/* Extra small phones */
@media (max-width: 560px) {
  .container {
    width: min(100% - 20px, var(--container));
  }

  .brand__logo {
    width: 135px;
    max-width: 52vw;
  }

  .nav {
    min-height: 72px;
  }

  .nav__list {
    top: 72px !important;
    left: 10px !important;
    right: 10px !important;
    max-height: calc(100dvh - 88px) !important;
    padding: 12px !important;
  }

  .search-button,
  .menu-toggle {
    width: 40px;
    height: 40px;
    flex-basis: 40px;
  }

  .section {
    padding: 44px 0;
  }

  .page-hero {
    padding: 44px 0;
  }

  .button-row,
  .hero__actions,
  .intro-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .btn,
  .button-row .btn,
  .service-button-row .btn {
    width: 100%;
  }

  .membership-plans,
  .stats-card,
  .hero-card__stats,
  .quick-actions__grid,
  .quick-modern-grid {
    grid-template-columns: 1fr !important;
  }

  .document-card,
  .mini-download-card {
    grid-template-columns: 1fr !important;
    text-align: left;
  }

  .document-card .btn,
  .mini-download-card a {
    width: 100%;
    grid-column: auto !important;
  }

  .board-card,
  .board-card img {
    min-height: 320px !important;
  }

  .board-card__overlay {
    position: static !important;
    opacity: 1 !important;
    transform: none !important;
    margin: 12px;
  }

  .board-card img {
    min-height: auto !important;
    aspect-ratio: 4 / 5;
  }

  .service-detail-content {
    padding: 20px !important;
  }

  .service-intro-card,
  .pathway-card,
  .link-card,
  .feature-card {
    padding: 20px !important;
    border-radius: 20px !important;
  }

  .search-dialog {
    padding: 72px 12px 12px !important;
  }

  .search-dialog__panel {
    padding: 22px !important;
    border-radius: 22px !important;
  }
}

/* Mobile menu body lock */
body.nav-open {
  overflow: hidden;
}


/* =========================================================
   Hamburger menu fix
   Ensures the mobile menu can open on tap/click and sits above page content.
   ========================================================= */

@media (max-width: 1280px) {
  .menu-toggle {
    display: inline-grid !important;
    position: relative;
    z-index: 9001 !important;
    pointer-events: auto !important;
    cursor: pointer;
  }

  .nav__list {
    z-index: 9000 !important;
  }

  .nav__list.is-open {
    display: flex !important;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  .menu-toggle.is-active .menu-toggle__line:nth-child(1) {
    transform: translateY(6px) rotate(45deg);
  }

  .menu-toggle.is-active .menu-toggle__line:nth-child(2) {
    opacity: 0;
  }

  .menu-toggle.is-active .menu-toggle__line:nth-child(3) {
    transform: translateY(-6px) rotate(-45deg);
  }

  .menu-toggle__line {
    transition: transform .2s ease, opacity .2s ease;
  }
}


/* =========================================================
   Newsletter: KNLS in the News
   ========================================================= */
.newsletter-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 86% 18%, rgba(255, 89, 0, .34), transparent 25%),
    linear-gradient(135deg, #10069F, #06005C);
  color: #fff;
  padding: clamp(72px, 10vw, 120px) 0;
}

.newsletter-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image: url("../images/kenya-pattern.svg");
  background-size: cover;
  opacity: .16;
}

.newsletter-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
  gap: 34px;
  align-items: center;
}

.newsletter-hero h1 {
  color: #fff;
  font-size: clamp(3rem, 7vw, 6.4rem);
  letter-spacing: -.075em;
}

.newsletter-hero p {
  color: rgba(255,255,255,.86);
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  max-width: 820px;
}

.newsletter-actions,
.newsletter-download-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 24px;
}

.newsletter-hero__panel {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: 10px;
  padding: 28px;
  border-radius: 30px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.newsletter-hero__panel img {
  width: min(230px, 80%);
  height: auto;
}

.newsletter-hero__panel strong {
  display: block;
  color: #FE5000;
  font-size: 4rem;
  line-height: 1;
}

.newsletter-hero__panel span {
  color: #10069F;
  font-weight: 900;
}

.newsletter-overview {
  background: #fff;
}

.newsletter-toolbar {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 24px;
  align-items: end;
  margin-bottom: 30px;
}

.newsletter-toolbar h2,
.newsletter-category__heading h2 {
  color: #10069F;
}

.newsletter-jump-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.newsletter-jump-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 12px;
  border-radius: 999px;
  background: #efefff;
  color: #10069F;
  text-decoration: none;
  font-weight: 900;
  font-size: .86rem;
}

.newsletter-jump-links a:hover {
  background: #fff1e8;
  color: #FE5000;
}

.featured-news-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.featured-news-card,
.news-mention-card {
  display: flex;
  flex-direction: column;
  min-height: 230px;
  padding: 24px;
  border-radius: 26px;
  background: #fff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  transition: transform .2s ease, box-shadow .2s ease;
}

.featured-news-card {
  background:
    radial-gradient(circle at 100% 0%, rgba(255,89,0,.16), transparent 32%),
    #f7f7ff;
}

.featured-news-card:hover,
.news-mention-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(47,43,143,.16);
}

.featured-news-card span,
.news-mention-card__source,
.news-mention-card__date {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 12px;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.news-mention-card__date {
  margin-top: -2px;
  background: #efefff;
  color: #10069F;
}

.featured-news-card h3,
.news-mention-card h3 {
  color: #10069F;
  font-size: 1.2rem;
}

.featured-news-card a,
.news-mention-card a {
  margin-top: auto;
  color: #FE5000;
  text-decoration: none;
  font-weight: 900;
}

.newsletter-download-strip {
  background: #fff1e8;
  padding: 48px 0;
}

.newsletter-download-strip__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.newsletter-download-strip h2 {
  color: #10069F;
}

.newsletter-content {
  background: #f7f7ff;
}

.newsletter-category {
  scroll-margin-top: 130px;
  margin-bottom: 64px;
}

.newsletter-category__heading {
  max-width: 780px;
  margin-bottom: 22px;
}

.news-mention-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.newsletter-highlight-strip {
  background: #fff1e8;
}

.newsletter-highlight-strip__inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}

@media (max-width: 980px) {
  .newsletter-hero__grid,
  .newsletter-toolbar,
  .featured-news-grid,
  .news-mention-grid,
  .newsletter-download-strip__inner,
  .newsletter-highlight-strip__inner {
    grid-template-columns: 1fr;
  }

  .newsletter-jump-links {
    justify-content: flex-start;
  }
}

@media (max-width: 560px) {
  .newsletter-hero {
    padding: 58px 0;
  }

  .newsletter-actions,
  .newsletter-download-buttons {
    flex-direction: column;
  }

  .newsletter-actions .btn,
  .newsletter-download-buttons .btn {
    width: 100%;
  }
}

/* =========================================================
   KNLS in the News image cards
   Images are rendered from the uploaded news presentation and placed on each story card.
   ========================================================= */

.featured-news-card__image,
.news-mention-card__image {
  position: relative;
  overflow: hidden;
  margin: -24px -24px 18px;
  border-radius: 26px 26px 18px 18px;
  background: #efefff;
  aspect-ratio: 16 / 10;
  border-bottom: 1px solid #e4e4f2;
}

.featured-news-card__image img,
.news-mention-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  transition: transform .35s ease, filter .35s ease;
}

.featured-news-card:hover .featured-news-card__image img,
.news-mention-card:hover .news-mention-card__image img {
  transform: scale(1.04);
  filter: saturate(1.05);
}

.featured-news-card__image::after,
.news-mention-card__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(47,43,143,.18), transparent 55%);
  pointer-events: none;
}

.news-mention-card,
.featured-news-card {
  overflow: hidden;
}

.news-mention-card h3,
.featured-news-card h3 {
  margin-top: 4px;
}

@media (max-width: 640px) {
  .featured-news-card__image,
  .news-mention-card__image {
    margin: -20px -20px 16px;
    border-radius: 22px 22px 16px 16px;
  }
}




/* =========================================================
   Persistent fixed navigation
   Keeps the utility bar and main navigation accessible at all scroll positions.
   ========================================================= */

:root {
  --top-strip-fixed-height: 44px;
  --site-header-fixed-height: 96px;
}

/* Add space so fixed bars do not cover page content */
body {
  padding-top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height));
}

/* Utility bar stays visible */
.top-strip {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 12000 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 14px rgba(68, 0, 153, 0.06);
}

/* Main nav stays directly below utility bar */
.site-header {
  position: fixed !important;
  top: var(--top-strip-fixed-height) !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  z-index: 11999 !important;
  background: rgba(255, 255, 255, 0.98) !important;
  backdrop-filter: blur(16px);
  box-shadow: 0 10px 30px rgba(68, 0, 153, 0.10);
}

/* Dropdowns must appear above page content */
.nav__list,
.dropdown,
.search-dialog {
  z-index: 13000 !important;
}

/* Anchor links should land below the fixed header stack */
section,
[id] {
  scroll-margin-top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height) + 24px);
}

/* Mobile menu opens below the fixed header stack */
@media (max-width: 1280px) {
  :root {
    --top-strip-fixed-height: 42px;
    --site-header-fixed-height: 78px;
  }

  .nav__list {
    top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height) + 8px) !important;
    max-height: calc(100dvh - var(--top-strip-fixed-height) - var(--site-header-fixed-height) - 24px) !important;
    z-index: 13000 !important;
  }
}

/* On very small screens, keep the nav compact but still accessible */
@media (max-width: 560px) {
  :root {
    --top-strip-fixed-height: 40px;
    --site-header-fixed-height: 72px;
  }

  body {
    padding-top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height));
  }

  .top-strip__inner {
    font-size: .78rem;
  }

  .nav__list {
    top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height) + 8px) !important;
  }

  section,
  [id] {
    scroll-margin-top: calc(var(--top-strip-fixed-height) + var(--site-header-fixed-height) + 18px);
  }
}


/* =========================================================
   KNLS Pension Handbook digital reader
   ========================================================= */
.pension-page {
  background: #f7f7ff;
}
.pension-hero {
  position: relative;
  overflow: hidden;
  padding: 84px 0;
  background:
    radial-gradient(circle at 88% 14%, rgba(255,89,0,.28), transparent 26%),
    linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
}
.pension-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: linear-gradient(45deg, rgba(255,255,255,.06) 25%, transparent 25%, transparent 50%, rgba(255,255,255,.06) 50%, rgba(255,255,255,.06) 75%, transparent 75%, transparent);
  background-size: 34px 34px;
  opacity: .18;
}
.pension-hero__grid {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(300px, 420px);
  gap: 48px;
  align-items: center;
}
.pension-hero h1 {
  color: #ffffff;
  font-size: clamp(2.7rem, 6vw, 5.5rem);
  max-width: 780px;
  letter-spacing: -.07em;
}
.pension-hero__lead {
  color: rgba(255,255,255,.88);
  font-size: 1.12rem;
  max-width: 760px;
}
.pension-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 28px;
}
.pension-cover-card {
  margin: 0;
  padding: 18px;
  border-radius: 34px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 30px 90px rgba(0,0,0,.28);
  backdrop-filter: blur(12px);
}
.pension-cover-card img {
  width: 100%;
  border-radius: 22px;
  box-shadow: 0 22px 60px rgba(0,0,0,.25);
}
.pension-cover-card figcaption {
  margin-top: 12px;
  color: rgba(255,255,255,.82);
  text-align: center;
  font-weight: 800;
}
.pension-overview__grid {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(360px, 1fr);
  gap: 28px;
  align-items: stretch;
}
.pension-summary-card,
.pension-stat-grid,
.pension-reader,
.pension-toc {
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  border-radius: 28px;
}
.pension-summary-card {
  padding: 30px;
  border-top: 7px solid #FE5000;
}
.pension-summary-card h2 {
  color: #10069F;
}
.pension-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  overflow: hidden;
}
.pension-stat-grid div {
  display: grid;
  place-content: center;
  text-align: center;
  min-height: 140px;
  padding: 18px;
  background: #ffffff;
}
.pension-stat-grid strong {
  color: #FE5000;
  font-size: 2rem;
  line-height: 1;
}
.pension-stat-grid span {
  color: #65756c;
  font-weight: 800;
  margin-top: 8px;
}
.pension-reader-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 30px;
  align-items: start;
}
.pension-toc {
  position: sticky;
  top: calc(var(--top-strip-fixed-height, 44px) + var(--site-header-fixed-height, 96px) + 20px);
  padding: 22px;
}
.pension-toc h2 {
  color: #10069F;
  font-size: 1.3rem;
}
.pension-toc a {
  display: block;
  padding: 10px 12px;
  margin-bottom: 8px;
  border-radius: 14px;
  background: #f7f7ff;
  color: #10069F;
  text-decoration: none;
  font-weight: 800;
  font-size: .92rem;
}
.pension-toc a:hover {
  background: #fff1e8;
  color: #FE5000;
}
.pension-toc .pension-download-mini {
  margin-top: 16px;
  background: #FE5000;
  color: #ffffff;
  text-align: center;
}
.pension-reader {
  padding: clamp(24px, 4vw, 42px);
}
.pension-reader__intro {
  padding-bottom: 26px;
  margin-bottom: 26px;
  border-bottom: 1px solid #e4e4f2;
}
.pension-reader__intro h2,
.pension-section h3,
.pension-section h4 {
  color: #10069F;
}
.pension-section {
  scroll-margin-top: calc(var(--top-strip-fixed-height, 44px) + var(--site-header-fixed-height, 96px) + 30px);
  padding: 28px 0;
  border-bottom: 1px solid #e4e4f2;
}
.pension-section:last-child {
  border-bottom: 0;
}
.pension-section__head {
  display: grid;
  grid-template-columns: 62px 1fr;
  gap: 16px;
  align-items: start;
  margin-bottom: 18px;
}
.pension-section__head > span {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
}
.pension-section__head p {
  margin-bottom: 0;
}
.pension-section__body p {
  color: #1f2937;
}
.handbook-list-line {
  padding-left: 14px;
  border-left: 3px solid #FE5000;
  font-weight: 600;
}
.handbook-pre {
  white-space: pre-wrap;
  word-break: break-word;
  overflow-wrap: anywhere;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
  border-radius: 18px;
  padding: 18px;
  color: #1f2937;
  line-height: 1.6;
  font-family: inherit;
}
@media (max-width: 980px) {
  .pension-hero__grid,
  .pension-overview__grid,
  .pension-reader-layout,
  .pension-stat-grid {
    grid-template-columns: 1fr;
  }
  .pension-toc {
    position: static;
  }
}
@media (max-width: 560px) {
  .pension-hero {
    padding: 54px 0;
  }
  .pension-hero__actions {
    flex-direction: column;
  }
  .pension-hero__actions .btn {
    width: 100%;
  }
  .pension-section__head {
    grid-template-columns: 1fr;
  }
}
@media print {
  .top-strip,
  .site-header,
  .search-dialog,
  .site-footer,
  .pension-toc,
  .pension-hero__actions {
    display: none !important;
  }
  body {
    padding-top: 0 !important;
    background: #ffffff !important;
  }
  .pension-hero {
    padding: 24px 0;
    background: #10069F !important;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .pension-reader-layout,
  .pension-overview__grid,
  .pension-hero__grid {
    grid-template-columns: 1fr !important;
  }
  .pension-reader,
  .pension-summary-card,
  .pension-stat-grid {
    box-shadow: none !important;
  }
}


/* =========================================================
   Pension page visibility fix
   Ensures the pension handbook page never appears blank if scroll animations fail.
   ========================================================= */

.pension-page .reveal,
.pension-hero .reveal,
.pension-overview .reveal,
.pension-reader-section .reveal {
  opacity: 1 !important;
  transform: none !important;
  visibility: visible !important;
}

.pension-page {
  display: block !important;
  min-height: 100vh;
}

.pension-hero,
.pension-overview,
.pension-reader-section {
  display: block !important;
}

.pension-hero__grid,
.pension-overview__grid,
.pension-reader-layout {
  visibility: visible !important;
}

.pension-pdf-preview {
  margin-top: 32px;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.pension-pdf-preview h2 {
  color: #10069F;
}

.pension-pdf-frame {
  width: 100%;
  height: min(78vh, 820px);
  border: 1px solid #e4e4f2;
  border-radius: 20px;
  background: #f7f7ff;
}

.pension-fallback-note {
  margin-top: 12px;
  color: #65756c;
  font-weight: 700;
}

@media (max-width: 760px) {
  .pension-pdf-preview {
    padding: 16px;
    border-radius: 20px;
  }

  .pension-pdf-frame {
    height: 560px;
  }
}


/* Stable pension page safety override */
.stable-pension-page, .stable-pension-page * {
  visibility: visible;
}
.stable-pension-page {
  display: block !important;
  opacity: 1 !important;
}


/* =========================================================
   KNLS in the News - March 2023 Bulletin
   ========================================================= */

.news-bulletin-hero {
  background:
    radial-gradient(circle at 90% 10%, rgba(255,89,0,.35), transparent 24%),
    linear-gradient(135deg, #10069F, #06005C) !important;
}

.news-bulletin-section {
  background: #ffffff;
}

.bulletin-lead {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 420px);
  gap: 34px;
  align-items: center;
  margin-bottom: 58px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .16), transparent 30%),
    #f7f7ff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.bulletin-lead__copy h2 {
  color: #10069F;
  font-size: clamp(2rem, 4vw, 3.4rem);
  letter-spacing: -.055em;
}

.bulletin-lead__copy p {
  color: #1f2937;
  font-size: 1.05rem;
}

.bulletin-cover {
  margin: 0;
  padding: 14px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 18px 50px rgba(68, 0, 153, .13);
}

.bulletin-cover img {
  width: 100%;
  aspect-ratio: 4 / 5.4;
  object-fit: cover;
  object-position: top center;
  border-radius: 20px;
  display: block;
}

.bulletin-cover figcaption {
  margin-top: 10px;
  text-align: center;
  color: #10069F;
  font-weight: 900;
}

.bulletin-feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bulletin-feature-card {
  display: grid;
  grid-template-rows: 240px 1fr;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.bulletin-feature-card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
}

.bulletin-feature-card div {
  padding: 22px;
}

.bulletin-feature-card span,
.bulletin-story-card span {
  display: inline-flex;
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
  margin-bottom: 10px;
}

.bulletin-feature-card h3,
.bulletin-story-card h3 {
  color: #10069F;
  margin-bottom: 8px;
}

.bulletin-feature-card p,
.bulletin-story-card p {
  color: #65756c;
}

.bulletin-story-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.bulletin-story-card {
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 16px 44px rgba(68, 0, 153, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}

.bulletin-story-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(68, 0, 153, .16);
}

.bulletin-story-card a {
  display: block;
  height: 100%;
  color: inherit;
  text-decoration: none;
}

.bulletin-story-card img {
  width: 100%;
  height: 210px;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .35s ease;
}

.bulletin-story-card:hover img {
  transform: scale(1.045);
}

.bulletin-story-card__body {
  padding: 20px;
}

@media (max-width: 980px) {
  .bulletin-lead,
  .bulletin-feature-grid,
  .bulletin-story-grid {
    grid-template-columns: 1fr;
  }

  .bulletin-feature-card {
    grid-template-rows: 260px 1fr;
  }

  .bulletin-story-card img {
    height: 260px;
  }
}

@media (max-width: 560px) {
  .bulletin-lead {
    padding: 20px;
    border-radius: 24px;
  }

  .bulletin-feature-card,
  .bulletin-story-card {
    border-radius: 22px;
  }

  .bulletin-feature-card {
    grid-template-rows: 220px 1fr;
  }

  .bulletin-story-card img {
    height: 220px;
  }
}


/* =========================================================
   Home page + Contact social media update
   Uses uploaded homepage images and official KNLS social links.
   ========================================================= */

.home-refresh-hero {
  position: relative;
  isolation: isolate;
  min-height: 760px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #10069F;
  color: #ffffff;
}

.home-refresh-hero__image {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(36, 71, 143, .94), rgba(36, 71, 143, .70), rgba(36, 71, 143, .42)),
    url("../images/home-page/home-page-update-01.webp");
  background-size: cover;
  background-position: center;
}

.home-refresh-hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -25% auto;
  width: 620px;
  height: 620px;
  border-radius: 50%;
  background: rgba(255, 89, 0, .24);
  z-index: -1;
}

.home-refresh-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(320px, .72fr);
  gap: 44px;
  align-items: center;
  padding: 90px 0;
}

.home-refresh-hero h1 {
  color: #ffffff;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: .98;
  letter-spacing: -.075em;
  margin-bottom: 18px;
}

.home-refresh-hero p {
  color: rgba(255, 255, 255, .9);
  font-size: 1.08rem;
  max-width: 760px;
}

.home-refresh-values {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 28px 0 6px;
}

.home-refresh-values span {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22);
  color: #ffffff;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.home-refresh-panel {
  overflow: hidden;
  border-radius: 32px;
  background: rgba(255,255,255,.97);
  border: 1px solid rgba(255,255,255,.50);
  box-shadow: 0 28px 78px rgba(0, 0, 0, .28);
}

.home-refresh-panel > h2,
.home-refresh-panel > p,
.home-refresh-panel__tag {
  margin-left: 28px;
  margin-right: 28px;
}

.home-refresh-panel__tag {
  display: inline-flex;
  width: fit-content;
  margin-top: 28px;
  margin-bottom: 12px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
  font-size: .78rem;
}

.home-refresh-panel h2 {
  color: #10069F;
}

.home-refresh-panel p {
  color: #65756c;
}

.home-refresh-membership {
  padding: 0 28px 24px;
}

.home-refresh-welcome {
  background: #ffffff;
}

.home-refresh-welcome__grid {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(340px, 1.08fr);
  gap: 44px;
  align-items: center;
}

.home-refresh-welcome__copy {
  padding: clamp(28px, 4vw, 44px);
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  border-top: 7px solid #FE5000;
}

.home-refresh-welcome__copy h2 {
  color: #10069F;
}

.home-refresh-welcome__copy p {
  color: #1f2937;
}

.home-refresh-image-stack {
  display: grid;
  gap: 16px;
}

.home-refresh-image-stack img {
  width: 100%;
  display: block;
  object-fit: cover;
  border-radius: 26px;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
}

.home-refresh-image-stack__main {
  aspect-ratio: 16 / 10;
}

.home-refresh-image-stack__mini {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.home-refresh-image-stack__mini img {
  aspect-ratio: 4 / 3;
}

.home-refresh-gallery {
  background: #f7f7ff;
}

.home-refresh-gallery__grid {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  grid-template-rows: repeat(2, 270px);
  gap: 18px;
}

.home-refresh-photo {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 30px;
  background: #10069F;
  box-shadow: var(--shadow);
}

.home-refresh-photo--tall {
  grid-row: span 2;
}

.home-refresh-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .45s ease, filter .45s ease;
}

.home-refresh-photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(36, 71, 143, .78), rgba(36, 71, 143, .04));
}

.home-refresh-photo figcaption {
  position: absolute;
  left: 22px;
  right: 22px;
  bottom: 22px;
  z-index: 1;
  color: #ffffff;
}

.home-refresh-photo figcaption strong {
  display: block;
  font-size: clamp(1.2rem, 2vw, 1.8rem);
  line-height: 1.1;
}

.home-refresh-photo figcaption span {
  color: rgba(255,255,255,.86);
  font-weight: 700;
}

.home-refresh-photo:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.home-refresh-authors,
.home-social-section {
  background: #ffffff;
}

.social-connect-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.social-connect-card {
  display: grid;
  gap: 8px;
  padding: 26px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
  text-decoration: none;
  transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease;
}

.social-connect-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(36, 71, 143, .16);
  border-color: rgba(255, 89, 0, .45);
}

.social-connect-card span {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.35rem;
}

.social-connect-card strong {
  color: #10069F;
  font-size: 1.1rem;
}

.social-connect-card small {
  color: #65756c;
  font-weight: 800;
}

.social-facebook span {
  background: #1877f2;
}

.social-instagram span {
  background: linear-gradient(135deg, #feda75, #d62976, #4f5bd5);
}

.social-linkedin span {
  background: #0a66c2;
}

.social-tiktok span {
  background: #111827;
}

.contact-social-section {
  background: #f7f7ff;
  padding-top: 24px;
}

.contact-social-panel {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 32px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .16), transparent 32%),
    #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

@media (max-width: 980px) {
  .home-refresh-hero {
    min-height: auto;
  }

  .home-refresh-hero__grid,
  .home-refresh-welcome__grid,
  .home-refresh-gallery__grid,
  .social-connect-grid {
    grid-template-columns: 1fr;
  }

  .home-refresh-gallery__grid {
    grid-template-rows: auto;
  }

  .home-refresh-photo,
  .home-refresh-photo--tall {
    min-height: 300px;
    grid-row: auto;
  }
}

@media (max-width: 640px) {
  .home-refresh-hero__grid {
    padding: 56px 0;
  }

  .home-refresh-image-stack__mini,
  .home-refresh-membership {
    grid-template-columns: 1fr;
  }

  .home-refresh-panel > h2,
  .home-refresh-panel > p,
  .home-refresh-panel__tag {
    margin-left: 20px;
    margin-right: 20px;
  }

  .home-refresh-membership {
    padding: 0 20px 20px;
  }

  .social-connect-card {
    padding: 22px;
  }
}


/* =========================================================
   Home library slideshow + visually impaired highlight
   ========================================================= */

.library-slideshow-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: stretch;
}

.library-slideshow-card {
  position: relative;
  min-height: 560px;
  margin: 0;
  overflow: hidden;
  border-radius: 34px;
  background: #10069F;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.library-slideshow-card img {
  width: 100%;
  height: 100%;
  min-height: 560px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: opacity .45s ease, transform .55s ease, filter .55s ease;
}

.library-slideshow-card.is-changing img {
  opacity: .32;
  transform: scale(1.035);
  filter: saturate(1.08);
}

.library-slideshow-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(36, 71, 143, .82), rgba(36, 71, 143, .10) 58%),
    linear-gradient(135deg, rgba(255, 89, 0, .14), transparent 42%);
  pointer-events: none;
}

.library-slideshow-card figcaption {
  position: absolute;
  left: clamp(20px, 4vw, 36px);
  right: clamp(20px, 4vw, 36px);
  bottom: clamp(20px, 4vw, 36px);
  z-index: 2;
  color: #ffffff;
}

.library-slideshow-card figcaption span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.library-slideshow-card figcaption strong {
  display: block;
  color: #ffffff;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.04em;
}

.library-slideshow-card figcaption small {
  display: block;
  margin-top: 8px;
  color: rgba(255,255,255,.88);
  font-weight: 800;
  max-width: 620px;
}

.library-slideshow-progress {
  position: absolute;
  left: clamp(20px, 4vw, 36px);
  right: clamp(20px, 4vw, 36px);
  bottom: 16px;
  z-index: 3;
  height: 5px;
  overflow: hidden;
  border-radius: 999px;
  background: rgba(255,255,255,.24);
}

.library-slideshow-progress span {
  display: block;
  width: 0;
  height: 100%;
  border-radius: inherit;
  background: #FE5000;
}

.library-slideshow-card.is-running .library-slideshow-progress span {
  animation: librarySlideProgress 4s linear infinite;
}

@keyframes librarySlideProgress {
  from { width: 0; }
  to { width: 100%; }
}

.visually-impaired-highlight {
  display: grid;
  grid-template-rows: minmax(260px, .9fr) auto;
  overflow: hidden;
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.visually-impaired-highlight__image {
  position: relative;
  overflow: hidden;
  background: #10069F;
}

.visually-impaired-highlight__image::after {
  content: "Accessibility";
  position: absolute;
  top: 18px;
  left: 18px;
  display: inline-flex;
  padding: 8px 12px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.visually-impaired-highlight__image img {
  width: 100%;
  height: 100%;
  min-height: 260px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

.visually-impaired-highlight:hover .visually-impaired-highlight__image img {
  transform: scale(1.055);
}

.visually-impaired-highlight__copy {
  padding: clamp(22px, 3vw, 34px);
}

.visually-impaired-highlight__copy h3 {
  color: #10069F;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  letter-spacing: -.04em;
}

.visually-impaired-highlight__copy p {
  color: #1f2937;
}

.visually-impaired-highlight__copy a {
  color: #FE5000;
  font-weight: 900;
  text-decoration: none;
}

.visually-impaired-highlight__copy a:hover {
  color: #10069F;
}

.library-slideshow-thumbs {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-top: 18px;
}

.library-slideshow-thumbs button {
  height: 96px;
  padding: 0;
  overflow: hidden;
  border: 3px solid transparent;
  border-radius: 18px;
  background: #ffffff;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(36, 71, 143, .10);
  transition: border-color .2s ease, transform .2s ease;
}

.library-slideshow-thumbs button:hover,
.library-slideshow-thumbs button.is-active {
  border-color: #FE5000;
  transform: translateY(-2px);
}

.library-slideshow-thumbs img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Retire the older homepage static photo grid styling for this section */
.home-refresh-gallery__grid,
.home-refresh-photo {
  display: none;
}

@media (max-width: 980px) {
  .library-slideshow-layout {
    grid-template-columns: 1fr;
  }

  .library-slideshow-card,
  .library-slideshow-card img {
    min-height: 420px;
  }

  .visually-impaired-highlight {
    grid-template-rows: auto;
  }

  .visually-impaired-highlight__image img {
    min-height: 320px;
  }
}

@media (max-width: 640px) {
  .library-slideshow-card,
  .library-slideshow-card img {
    min-height: 340px;
  }

  .library-slideshow-thumbs {
    grid-template-columns: repeat(2, 1fr);
  }

  .library-slideshow-thumbs button {
    height: 84px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .library-slideshow-card img,
  .visually-impaired-highlight__image img,
  .library-slideshow-progress span {
    animation: none !important;
    transition: none !important;
  }
}


/* =========================================================
   Social wording + slideshow polish
   Removes hover guidance and keeps slideshow presentation clean.
   ========================================================= */

.library-slideshow-card {
  cursor: default;
}

.library-slideshow-card figcaption span {
  background: rgba(255, 89, 0, .96);
}

.library-slideshow-card figcaption small {
  max-width: 560px;
}

/* The slideshow now runs automatically; hover does not show any instruction or tooltip. */
.library-slideshow-card:hover img {
  filter: saturate(1.06);
}

.library-slideshow-thumbs button {
  cursor: pointer;
}

.library-slideshow-thumbs button:focus-visible {
  outline: 4px solid rgba(255, 89, 0, .35);
  outline-offset: 3px;
}


/* =========================================================
   Final homepage refinement
   Concise homepage, landscape author cards, smaller digitization card,
   service images, creative background and footer social icons.
   ========================================================= */

.homepage-final-hero {
  position: relative;
  isolation: isolate;
  min-height: 640px;
  display: grid;
  align-items: center;
  overflow: hidden;
  background: #10069F;
}

.homepage-final-hero__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(36, 71, 143, .92), rgba(36, 71, 143, .72), rgba(36, 71, 143, .38)),
    url("../images/homepage-final/maktaba-kuu-exterior.webp");
  background-size: cover;
  background-position: center;
}

.homepage-final-hero::after {
  content: "";
  position: absolute;
  inset: auto -14% -30% auto;
  width: 680px;
  height: 680px;
  border-radius: 50%;
  background: rgba(255, 89, 0, .24);
  z-index: -1;
}

.homepage-final-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(300px, .52fr);
  gap: 38px;
  align-items: center;
  padding: 86px 0;
}

.homepage-final-hero h1 {
  color: #ffffff;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.075em;
  margin-bottom: 18px;
}

.homepage-final-hero p {
  max-width: 720px;
  color: rgba(255,255,255,.92);
  font-size: 1.12rem;
  line-height: 1.65;
}

.homepage-final-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
}

.homepage-final-quick {
  display: grid;
  gap: 10px;
  padding: 24px;
  border-radius: 26px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 24px 72px rgba(0,0,0,.22);
  border: 1px solid rgba(255,255,255,.58);
}

.homepage-final-quick h2 {
  color: #10069F;
  margin-bottom: 6px;
}

.homepage-final-quick a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  background: #f7f7ff;
  color: #10069F;
  font-weight: 900;
  text-decoration: none;
}

.homepage-final-quick a:hover {
  background: #fff1e8;
  color: #FE5000;
}

.homepage-final-quick a::after {
  content: "→";
}

.homepage-final-intro {
  background: #ffffff;
}

.homepage-final-intro__grid {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(360px, 1.12fr);
  gap: 34px;
  align-items: center;
}

.homepage-final-card {
  padding: clamp(24px, 4vw, 38px);
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  border-top: 7px solid #FE5000;
  box-shadow: var(--shadow);
}

.homepage-final-card h2 {
  color: #10069F;
}

.homepage-final-card p {
  color: #1f2937;
}

.homepage-final-feature-image {
  margin: 0;
  overflow: hidden;
  border-radius: 30px;
  box-shadow: var(--shadow);
  border: 1px solid #e4e4f2;
  background: #10069F;
}

.homepage-final-feature-image img {
  width: 100%;
  aspect-ratio: 16 / 10;
  display: block;
  object-fit: cover;
}

.homepage-final-feature-image figcaption {
  padding: 14px 18px;
  background: #10069F;
  color: #ffffff;
  font-weight: 800;
}

.homepage-final-services {
  background:
    radial-gradient(circle at 5% 5%, rgba(255,89,0,.12), transparent 28%),
    #f7f7ff;
}

.homepage-service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.homepage-service-card {
  overflow: hidden;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 16px 42px rgba(36, 71, 143, .10);
  transition: transform .22s ease, box-shadow .22s ease;
}

.homepage-service-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 24px 70px rgba(36, 71, 143, .16);
}

.homepage-service-card img {
  width: 100%;
  height: 180px;
  display: block;
  object-fit: cover;
}

.homepage-service-card div {
  padding: 20px;
}

.homepage-service-card h3 {
  color: #10069F;
  margin-bottom: 8px;
}

.homepage-service-card p {
  color: #65756c;
  margin-bottom: 14px;
}

.homepage-service-card a {
  color: #FE5000;
  font-weight: 900;
  text-decoration: none;
}

/* Smaller, less visually overwhelming blue digitization box */
.homepage-service-card--digitization {
  background: #10069F;
}

.homepage-service-card--digitization div {
  padding: 18px;
}

.homepage-service-card--digitization h3 {
  color: #ffffff !important;
}

.homepage-service-card--digitization p,
.homepage-service-card--digitization .kicker {
  color: rgba(255,255,255,.86);
}

.homepage-service-card--digitization a {
  color: #ffffff;
}

.homepage-service-card--digitization img {
  height: 150px;
  opacity: .92;
}

.homepage-final-author {
  background: #ffffff;
}

.homepage-final-author__header {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(300px, .7fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 24px;
}

.homepage-final-author__header h2 {
  color: #10069F;
}

.homepage-final-author__header p {
  color: #65756c;
  font-weight: 700;
}

/* Fixes the vertical stacked text issue: landscape/horizontal cards */
.journey-steps--landscape {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 16px;
}

.journey-steps--landscape a {
  display: grid !important;
  grid-template-columns: 78px minmax(0, 1fr) !important;
  gap: 18px !important;
  align-items: start !important;
  min-height: 180px;
  padding: 26px !important;
  border-radius: 26px !important;
  text-align: left !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}

.journey-steps--landscape a > span {
  width: 70px !important;
  height: 70px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 22px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

.journey-steps--landscape a > div {
  min-width: 0;
}

.journey-steps--landscape strong,
.journey-steps--landscape small {
  display: block !important;
  writing-mode: horizontal-tb !important;
  word-break: normal !important;
  overflow-wrap: normal !important;
  white-space: normal !important;
  line-height: 1.45 !important;
}

.journey-steps--landscape strong {
  color: #10069F !important;
  font-size: 1.1rem;
}

.journey-steps--landscape small {
  margin-top: 8px;
  color: #65756c !important;
  font-weight: 800;
}

.footer-social-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.footer-social-links a {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 14px;
  background: rgba(255,255,255,.12);
  color: #ffffff !important;
  font-weight: 900;
  text-decoration: none;
  border: 1px solid rgba(255,255,255,.18);
  transition: transform .18s ease, background .18s ease;
}

.footer-social-links a:hover {
  transform: translateY(-2px);
  background: #FE5000;
}

@media (max-width: 1120px) {
  .homepage-service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .journey-steps--landscape {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 900px) {
  .homepage-final-hero__grid,
  .homepage-final-intro__grid,
  .homepage-final-author__header {
    grid-template-columns: 1fr;
  }

  .homepage-final-hero {
    min-height: auto;
  }

  .homepage-final-hero__grid {
    padding: 58px 0;
  }
}

@media (max-width: 640px) {
  .homepage-service-grid {
    grid-template-columns: 1fr;
  }

  .homepage-final-actions {
    flex-direction: column;
  }

  .homepage-final-actions .btn {
    width: 100%;
  }

  .journey-steps--landscape a {
    grid-template-columns: 60px 1fr !important;
    min-height: auto;
    padding: 20px !important;
  }

  .journey-steps--landscape a > span {
    width: 56px !important;
    height: 56px !important;
    border-radius: 18px !important;
  }
}


/* =========================================================
   Homepage visual refresh
   Building hero background, subtle page background, and updated
   Featured Services image treatment.
   ========================================================= */

/* Subtle full-page library background for the homepage only */
body.home-page {
  background:
    linear-gradient(rgba(247, 247, 255, 0.94), rgba(247, 247, 255, 0.94)),
    url("../images/homepage-final/library-interior-reading.webp") center / cover fixed no-repeat;
}

/* Let selected homepage sections sit lightly over the page background */
body.home-page .homepage-final-intro,
body.home-page .homepage-final-author,
body.home-page .home-social-section {
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(4px);
}

body.home-page .homepage-final-services,
body.home-page .home-refresh-gallery {
  background:
    linear-gradient(rgba(247, 247, 255, 0.92), rgba(247, 247, 255, 0.92)),
    url("../images/homepage-final/library-interior-wide.webp") center / cover no-repeat;
}

/* Replace the old top image treatment with a clear library building background */
.homepage-final-hero__bg {
  background:
    linear-gradient(90deg, rgba(36, 71, 143, 0.90), rgba(36, 71, 143, 0.66), rgba(36, 71, 143, 0.40)),
    url("../images/homepage-final/tower-library.webp") center / cover no-repeat !important;
}

/* Keep service images polished and consistent */
.homepage-service-card img {
  width: 100%;
  height: 190px;
  object-fit: cover;
  object-position: center;
}

/* Digitization card: smaller, cleaner, with white title text */
.homepage-service-card--digitization {
  background: #10069F !important;
}

.homepage-service-card--digitization img {
  height: 145px !important;
  object-position: center;
}

.homepage-service-card--digitization div {
  padding: 18px !important;
}

.homepage-service-card--digitization h3 {
  color: #ffffff !important;
}

.homepage-service-card--digitization p,
.homepage-service-card--digitization .kicker {
  color: rgba(255, 255, 255, 0.88) !important;
}

.homepage-service-card--digitization a {
  color: #ffffff !important;
}

/* vTabu image framing */
.homepage-service-card img[src*="vtabu-brochure"] {
  object-position: left center;
}

/* Preserve readability on mobile by disabling fixed background */
@media (max-width: 768px) {
  body.home-page {
    background-attachment: scroll;
  }

  body.home-page .homepage-final-intro,
  body.home-page .homepage-final-author,
  body.home-page .home-social-section {
    background: rgba(255, 255, 255, 0.96);
  }
}


/* =========================================================
   Homepage vTabu prices, ISBN image and 4-image hero slideshow
   ========================================================= */

/* Stronger full-page library background for the homepage */
body.home-page {
  background:
    linear-gradient(rgba(247, 247, 255, 0.86), rgba(247, 247, 255, 0.90)),
    url("../images/homepage-final/library-interior-wide.webp") center / cover fixed no-repeat !important;
}

/* Hero slideshow background layer */
.homepage-final-hero__bg {
  background-image:
    linear-gradient(90deg, rgba(36, 71, 143, 0.90), rgba(36, 71, 143, 0.66), rgba(36, 71, 143, 0.38)),
    url("../images/homepage-final/tower-library.webp") !important;
  background-size: cover !important;
  background-position: center !important;
  background-repeat: no-repeat !important;
  transition: opacity .55s ease, transform .75s ease;
}

.homepage-final-hero__bg.is-changing {
  opacity: .76;
  transform: scale(1.025);
}

.homepage-hero-dots {
  display: flex;
  gap: 8px;
  margin: 24px 0 0;
}

.homepage-hero-dots span {
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  transition: width .25s ease, background .25s ease;
}

.homepage-hero-dots span.is-active {
  width: 46px;
  background: #FE5000;
}

/* vTabu prices on the homepage card */
.vtabu-price-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 14px 0 16px;
}

.vtabu-price-pills span {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 7px 10px;
  border-radius: 999px;
  background: #fff1e8;
  color: #10069F;
  font-size: .8rem;
  font-weight: 800;
}

.vtabu-price-pills strong {
  color: #FE5000;
}

/* ISBN image should sit cleanly in the service card */
.homepage-service-card img[src*="isbn-bar-code"] {
  object-fit: contain !important;
  background: #ffffff;
  padding: 18px;
  object-position: center;
}

/* Ensure the service section remains readable over the page background */
body.home-page .homepage-final-services {
  background:
    linear-gradient(rgba(247, 247, 255, 0.93), rgba(247, 247, 255, 0.93)),
    url("../images/homepage-final/library-interior-reading.webp") center / cover no-repeat !important;
}

@media (max-width: 768px) {
  body.home-page {
    background-attachment: scroll !important;
  }

  .homepage-hero-dots {
    justify-content: flex-start;
  }

  .vtabu-price-pills {
    gap: 7px;
  }

  .vtabu-price-pills span {
    font-size: .76rem;
  }
}


/* =========================================================
   Homepage clean-up: reliable hero slideshow, restored service cards,
   reduced empty space and visible full-page background.
   ========================================================= */

/* Clear, visible full-page background using the uploaded KNLS direction image */
body.home-page {
  background:
    linear-gradient(rgba(247, 247, 255, 0.78), rgba(247, 247, 255, 0.84)),
    url("../images/homepage-final/knls-direction-banner-background.webp") center / cover fixed no-repeat !important;
}

/* Let content sit cleanly over the full-page background without creating harsh white blocks */
body.home-page .homepage-final-intro,
body.home-page .homepage-final-author,
body.home-page .home-social-section {
  background: rgba(255, 255, 255, 0.88) !important;
  backdrop-filter: blur(5px);
}

body.home-page .homepage-final-services,
body.home-page .home-refresh-gallery {
  background: rgba(247, 247, 255, 0.88) !important;
  backdrop-filter: blur(5px);
}

/* Reduce unnecessary empty vertical space across homepage sections */
body.home-page .section {
  padding-top: 54px !important;
  padding-bottom: 54px !important;
}

body.home-page .section-title {
  margin-bottom: 28px !important;
}

body.home-page .homepage-final-hero {
  min-height: 610px !important;
}

/* Reliable image-layer hero slideshow */
.homepage-final-hero__bg.hero-slideshow {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  background: #10069F !important;
}

.homepage-final-hero__bg.hero-slideshow img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transform: scale(1.015);
  transition: opacity .65s ease, transform 1.1s ease;
}

.homepage-final-hero__bg.hero-slideshow img.is-active {
  opacity: 1;
  transform: scale(1);
}

.homepage-final-hero__bg.hero-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 71, 143, 0.92), rgba(36, 71, 143, 0.68), rgba(36, 71, 143, 0.36)),
    radial-gradient(circle at 84% 12%, rgba(255, 89, 0, .18), transparent 28%);
  pointer-events: none;
}

/* Slideshow dots */
.homepage-hero-dots {
  display: flex;
  gap: 8px;
  margin: 22px 0 0;
}

.homepage-hero-dots span {
  width: 28px;
  height: 5px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .34);
  transition: width .25s ease, background .25s ease;
}

.homepage-hero-dots span.is-active {
  width: 46px;
  background: #FE5000;
}

/* Restore featured services card layout to a balanced, clean grid */
.homepage-service-grid {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

.homepage-service-card {
  display: flex !important;
  flex-direction: column !important;
  overflow: hidden !important;
  border-radius: 26px !important;
  background: #ffffff !important;
  border: 1px solid #e4e4f2 !important;
  box-shadow: 0 16px 42px rgba(36, 71, 143, .10) !important;
  min-height: 100%;
}

.homepage-service-card img {
  width: 100% !important;
  height: 178px !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  padding: 0 !important;
  background: transparent !important;
}

.homepage-service-card div {
  padding: 20px !important;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.homepage-service-card h3 {
  color: #10069F !important;
  margin-bottom: 8px !important;
}

.homepage-service-card p {
  color: #65756c !important;
  margin-bottom: 14px !important;
}

.homepage-service-card a {
  margin-top: auto;
  color: #FE5000 !important;
  font-weight: 900 !important;
  text-decoration: none !important;
}

/* Keep digitization card consistent with the restored service card style */
.homepage-service-card--digitization {
  background: #ffffff !important;
}

.homepage-service-card--digitization h3 {
  color: #10069F !important;
}

.homepage-service-card--digitization p,
.homepage-service-card--digitization .kicker {
  color: #65756c !important;
}

.homepage-service-card--digitization a {
  color: #FE5000 !important;
}

/* ISBN image display */
.homepage-service-card img[src*="isbn-bar-code"] {
  object-fit: contain !important;
  background: #ffffff !important;
  padding: 16px !important;
}

/* Remove any extra vTabu price spacing from previous version */
.vtabu-price-pills {
  display: none !important;
}

/* Tighten gallery slightly to reduce page length */
.library-slideshow-card,
.library-slideshow-card img {
  min-height: 460px !important;
}

.visually-impaired-highlight__image img {
  min-height: 230px !important;
}

@media (max-width: 1120px) {
  .homepage-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 768px) {
  body.home-page {
    background-attachment: scroll !important;
  }

  body.home-page .section {
    padding-top: 42px !important;
    padding-bottom: 42px !important;
  }

  body.home-page .homepage-final-hero {
    min-height: auto !important;
  }

  .homepage-final-hero__grid {
    padding-top: 54px !important;
    padding-bottom: 54px !important;
  }

  .library-slideshow-card,
  .library-slideshow-card img {
    min-height: 340px !important;
  }
}

@media (max-width: 640px) {
  .homepage-service-grid {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Reliable CSS-only homepage hero slideshow fallback
   This makes the top slideshow work even if JavaScript is blocked or errors elsewhere.
   ========================================================= */

.homepage-final-hero {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

.homepage-final-hero__bg.hero-slideshow {
  position: absolute !important;
  inset: 0 !important;
  z-index: -2 !important;
  overflow: hidden !important;
  background: #10069F !important;
}

.homepage-final-hero__bg.hero-slideshow img {
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important;
  height: 100% !important;
  display: block !important;
  object-fit: cover !important;
  object-position: center !important;
  opacity: 0;
  transform: scale(1.03);
  animation: homepageHeroImageFade 8s infinite;
}

.homepage-final-hero__bg.hero-slideshow img:nth-child(1) {
  animation-delay: 0s;
}

.homepage-final-hero__bg.hero-slideshow img:nth-child(2) {
  animation-delay: 2s;
}

.homepage-final-hero__bg.hero-slideshow img:nth-child(3) {
  animation-delay: 4s;
}

.homepage-final-hero__bg.hero-slideshow img:nth-child(4) {
  animation-delay: 6s;
}

.homepage-final-hero__bg.hero-slideshow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    linear-gradient(90deg, rgba(36, 71, 143, 0.92), rgba(36, 71, 143, 0.68), rgba(36, 71, 143, 0.36)),
    radial-gradient(circle at 84% 12%, rgba(255, 89, 0, .18), transparent 28%);
  pointer-events: none;
}

@keyframes homepageHeroImageFade {
  0% {
    opacity: 0;
    transform: scale(1.03);
  }
  5% {
    opacity: 1;
    transform: scale(1);
  }
  25% {
    opacity: 1;
    transform: scale(1);
  }
  30% {
    opacity: 0;
    transform: scale(1.03);
  }
  100% {
    opacity: 0;
    transform: scale(1.03);
  }
}

/* Dot animation synced to the 4-image / 8-second cycle */
.homepage-hero-dots span {
  background: rgba(255, 255, 255, .34);
  width: 28px;
}

.homepage-hero-dots span:nth-child(1) {
  animation: homepageHeroDotOne 8s infinite;
}

.homepage-hero-dots span:nth-child(2) {
  animation: homepageHeroDotTwo 8s infinite;
}

.homepage-hero-dots span:nth-child(3) {
  animation: homepageHeroDotThree 8s infinite;
}

.homepage-hero-dots span:nth-child(4) {
  animation: homepageHeroDotFour 8s infinite;
}

@keyframes homepageHeroDotOne {
  0%, 24% { width: 46px; background: #FE5000; }
  25%, 100% { width: 28px; background: rgba(255, 255, 255, .34); }
}

@keyframes homepageHeroDotTwo {
  0%, 24% { width: 28px; background: rgba(255, 255, 255, .34); }
  25%, 49% { width: 46px; background: #FE5000; }
  50%, 100% { width: 28px; background: rgba(255, 255, 255, .34); }
}

@keyframes homepageHeroDotThree {
  0%, 49% { width: 28px; background: rgba(255, 255, 255, .34); }
  50%, 74% { width: 46px; background: #FE5000; }
  75%, 100% { width: 28px; background: rgba(255, 255, 255, .34); }
}

@keyframes homepageHeroDotFour {
  0%, 74% { width: 28px; background: rgba(255, 255, 255, .34); }
  75%, 99% { width: 46px; background: #FE5000; }
  100% { width: 28px; background: rgba(255, 255, 255, .34); }
}

@media (prefers-reduced-motion: reduce) {
  .homepage-final-hero__bg.hero-slideshow img,
  .homepage-hero-dots span {
    animation: none !important;
  }

  .homepage-final-hero__bg.hero-slideshow img:first-child {
    opacity: 1 !important;
  }
}


/* =========================================================
   CA-inspired KNLS homepage hero slideshow
   Full-width layered slides, 2-second autoplay, arrows, dots,
   and CSS fallback when JavaScript is unavailable.
   ========================================================= */

.knls-hero-carousel {
  position: relative;
  isolation: isolate;
  min-height: min(760px, calc(100vh - 40px));
  overflow: hidden;
  background: #10069F;
}

.knls-hero-slides {
  position: absolute;
  inset: 0;
  z-index: 0;
}

.knls-hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  animation: knlsHeroFallbackFade 36s infinite;
}

.knls-hero-slide:nth-child(1) { animation-delay: 0s; }
.knls-hero-slide:nth-child(2) { animation-delay: 4s; }
.knls-hero-slide:nth-child(3) { animation-delay: 8s; }
.knls-hero-slide:nth-child(4) { animation-delay: 12s; }
.knls-hero-slide:nth-child(5) { animation-delay: 16s; }
.knls-hero-slide:nth-child(6) { animation-delay: 20s; }
.knls-hero-slide:nth-child(7) { animation-delay: 24s; }
.knls-hero-slide:nth-child(8) { animation-delay: 28s; }
.knls-hero-slide:nth-child(9) { animation-delay: 32s; }

.knls-hero-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transform: scale(1.04);
  transition: transform 1.1s ease;
}

.knls-hero-slide__overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(36, 71, 143, .94), rgba(36, 71, 143, .72) 42%, rgba(36, 71, 143, .32)),
    linear-gradient(to top, rgba(8, 13, 54, .38), transparent 45%),
    radial-gradient(circle at 88% 12%, rgba(255, 89, 0, .22), transparent 28%);
}

.knls-hero-slide__content {
  position: relative;
  z-index: 2;
  min-height: min(760px, calc(100vh - 40px));
  display: grid;
  align-content: center;
  padding-top: 96px;
  padding-bottom: 96px;
  color: #ffffff;
}

.knls-hero-slide__content h1 {
  color: #ffffff;
  max-width: 880px;
  font-size: clamp(3rem, 7vw, 6.8rem);
  line-height: .98;
  letter-spacing: -.075em;
  margin: 0 0 18px;
}

.knls-hero-slide__content p {
  max-width: 720px;
  color: rgba(255,255,255,.92);
  font-size: 1.12rem;
  line-height: 1.65;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide {
  animation: none;
  opacity: 0;
  transition: opacity .72s ease;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide.is-active {
  opacity: 1;
  pointer-events: auto;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide.is-active img {
  transform: scale(1);
}

@keyframes knlsHeroFallbackFade {
  0% { opacity: 0; }
  3% { opacity: 1; }
  14% { opacity: 1; }
  17% { opacity: 0; }
  100% { opacity: 0; }
}

.knls-hero-controls {
  position: absolute;
  left: 50%;
  bottom: 34px;
  z-index: 5;
  width: min(100% - 32px, 1180px);
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  pointer-events: none;
}

.knls-hero-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.32);
  background: rgba(255,255,255,.16);
  color: #ffffff;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}

.knls-hero-arrow:hover,
.knls-hero-arrow:focus-visible {
  background: #FE5000;
  transform: translateY(-2px);
  outline: none;
}

.knls-hero-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  pointer-events: auto;
}

.knls-hero-dot {
  width: 34px;
  height: 6px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: rgba(255,255,255,.38);
  cursor: pointer;
  transition: width .2s ease, background .2s ease;
}

.knls-hero-dot.is-active {
  width: 56px;
  background: #FE5000;
}

.knls-hero-progress {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 6;
  height: 5px;
  background: rgba(255,255,255,.18);
}

.knls-hero-progress span {
  display: block;
  width: 0;
  height: 100%;
  background: #FE5000;
  animation: knlsHeroProgress 4s linear infinite;
}

@keyframes knlsHeroProgress {
  from { width: 0; }
  to { width: 100%; }
}

/* Hide previous hero dot styles where they are no longer needed */
.homepage-hero-dots {
  display: none !important;
}

@media (max-width: 900px) {
  .knls-hero-carousel,
  .knls-hero-slide__content {
    min-height: 620px;
  }

  .knls-hero-slide__content {
    padding-top: 76px;
    padding-bottom: 92px;
  }

  .knls-hero-controls {
    bottom: 24px;
  }
}

@media (max-width: 640px) {
  .knls-hero-carousel,
  .knls-hero-slide__content {
    min-height: 560px;
  }

  .knls-hero-slide__overlay {
    background:
      linear-gradient(90deg, rgba(36, 71, 143, .94), rgba(36, 71, 143, .76)),
      linear-gradient(to top, rgba(8, 13, 54, .38), transparent 45%);
  }

  .knls-hero-controls {
    justify-content: center;
  }

  .knls-hero-arrow {
    display: none;
  }

  .knls-hero-dot {
    width: 26px;
  }

  .knls-hero-dot.is-active {
    width: 44px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knls-hero-slide,
  .knls-hero-progress span {
    animation: none !important;
  }

  .knls-hero-slide:first-child {
    opacity: 1 !important;
  }
}


/* =========================================================
   Restored homepage hero quick access panel
   Brings back the previous quick access design with vTabu, ISBN and Legal Deposit.
   ========================================================= */

.knls-hero-slide__content {
  padding-right: min(420px, 34vw);
}

.knls-hero-quick-access {
  position: absolute;
  right: max(24px, calc((100vw - 1180px) / 2));
  top: 50%;
  z-index: 7;
  width: min(360px, calc(100vw - 48px));
  transform: translateY(-50%);
  padding: 24px;
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.95);
  border: 1px solid rgba(255, 255, 255, 0.58);
  box-shadow: 0 28px 80px rgba(0, 0, 0, 0.24);
  backdrop-filter: blur(14px);
}

.knls-hero-quick-access__label {
  display: inline-flex;
  width: fit-content;
  margin: 0 0 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.knls-hero-quick-access h2 {
  margin: 0 0 14px;
  color: #10069F;
  font-size: 1.6rem;
  letter-spacing: -.035em;
}

.knls-hero-quick-access__links {
  display: grid;
  gap: 10px;
}

.knls-hero-quick-access__links a {
  display: grid;
  gap: 4px;
  min-height: 62px;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f7f7ff;
  color: #10069F;
  text-decoration: none;
  border: 1px solid #e4e4f2;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.knls-hero-quick-access__links a:hover,
.knls-hero-quick-access__links a:focus-visible {
  transform: translateX(3px);
  background: #fff1e8;
  border-color: rgba(255, 89, 0, .35);
  outline: none;
}

.knls-hero-quick-access__links span {
  color: #65756c;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.knls-hero-quick-access__links strong {
  color: #10069F;
  font-size: 1rem;
}

.knls-hero-quick-access__links a::after {
  content: "→";
  position: absolute;
  right: 16px;
  color: #FE5000;
  font-weight: 900;
}

.knls-hero-quick-access__links a {
  position: relative;
}

@media (max-width: 1040px) {
  .knls-hero-slide__content {
    padding-right: 0;
    align-content: start;
    padding-top: 76px;
    padding-bottom: 230px;
  }

  .knls-hero-quick-access {
    left: 24px;
    right: 24px;
    top: auto;
    bottom: 82px;
    width: auto;
    transform: none;
    padding: 18px;
  }

  .knls-hero-quick-access__links {
    grid-template-columns: repeat(3, 1fr);
  }

  .knls-hero-quick-access__links a {
    min-height: 76px;
  }
}

@media (max-width: 680px) {
  .knls-hero-slide__content {
    padding-bottom: 310px;
  }

  .knls-hero-quick-access {
    left: 16px;
    right: 16px;
    bottom: 72px;
    border-radius: 22px;
  }

  .knls-hero-quick-access__links {
    grid-template-columns: 1fr;
  }

  .knls-hero-quick-access__links a {
    min-height: 54px;
  }
}


/* =========================================================
   Homepage slideshow autoplay + manual controls polish
   ========================================================= */

.knls-hero-controls {
  pointer-events: none;
}

.knls-hero-arrow,
.knls-hero-dot {
  pointer-events: auto;
}

.knls-hero-arrow {
  position: relative;
  z-index: 8;
  box-shadow: 0 14px 36px rgba(0, 0, 0, .22);
}

.knls-hero-arrow::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: inherit;
}

.knls-hero-arrow--next,
.knls-hero-arrow--prev {
  display: grid;
}

/* Keep the progress bar visibly synced with the 4-second autoplay */
.knls-hero-progress span {
  animation: knlsHeroProgress 4s linear infinite !important;
}

.knls-hero-carousel:not(.is-autoplaying) .knls-hero-progress span {
  animation-play-state: paused;
}

/* On mobile, keep dots visible and hide large arrows to avoid crowding */
@media (max-width: 640px) {
  .knls-hero-arrow {
    display: none !important;
  }

  .knls-hero-dots {
    pointer-events: auto;
  }
}


/* =========================================================
   Read. Know. Empower hero message restoration
   Adds a persistent hero message and service buttons over the slideshow.
   ========================================================= */

.knls-hero-carousel {
  position: relative;
}

/* Hide older per-slide text blocks so the homepage has one clean, consistent message */
.knls-hero-slide__content {
  display: none !important;
}

.knls-hero-message-panel {
  position: relative;
  z-index: 6;
  min-height: min(760px, calc(100vh - 40px));
  display: grid;
  align-content: center;
  padding-top: 96px;
  padding-bottom: 140px;
  color: #ffffff;
  pointer-events: none;
}

.knls-hero-message-panel > * {
  pointer-events: auto;
}

.knls-hero-message-panel h1 {
  color: #ffffff;
  max-width: 880px;
  font-size: clamp(3.2rem, 7vw, 7rem);
  line-height: .96;
  letter-spacing: -.075em;
  margin: 0 0 18px;
}

.knls-hero-message-panel p {
  max-width: 760px;
  color: rgba(255, 255, 255, .93);
  font-size: 1.12rem;
  line-height: 1.65;
}

.knls-hero-message-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 28px;
  max-width: 900px;
}

.knls-hero-message-actions .btn {
  min-height: 48px;
}

/* Keep the quick access card on the right without covering the hero message */
.knls-hero-quick-access {
  z-index: 8;
}

/* Space the carousel dots/arrows below the hero message */
.knls-hero-controls {
  z-index: 9;
}

/* Make the Featured Services anchor land below the fixed navigation */
#featured-services {
  scroll-margin-top: 150px;
}

@media (max-width: 1040px) {
  .knls-hero-message-panel {
    min-height: 680px;
    align-content: start;
    padding-top: 76px;
    padding-bottom: 300px;
  }

  .knls-hero-message-panel h1 {
    max-width: 760px;
  }

  .knls-hero-message-panel p {
    max-width: 680px;
  }
}

@media (max-width: 680px) {
  .knls-hero-message-panel {
    min-height: 720px;
    padding-top: 58px;
    padding-bottom: 360px;
  }

  .knls-hero-message-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .knls-hero-message-actions .btn {
    width: 100%;
  }
}


/* =========================================================
   Compact homepage Connect with us section
   Reduces height and spacing so the social section feels lighter.
   ========================================================= */

.home-social-section {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.home-social-section .section-title {
  margin-bottom: 18px !important;
}

.home-social-section .section-title h2 {
  font-size: clamp(1.65rem, 3vw, 2.4rem) !important;
  margin-bottom: 8px !important;
}

.home-social-section .section-title p {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  font-size: .95rem;
}

.home-social-section .social-connect-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  max-width: 920px;
  margin: 0 auto;
}

.home-social-section .social-connect-card {
  grid-template-columns: 42px minmax(0, 1fr);
  grid-template-areas:
    "icon title"
    "icon handle";
  align-items: center;
  gap: 2px 12px;
  padding: 16px 18px !important;
  border-radius: 20px !important;
  min-height: 86px;
}

.home-social-section .social-connect-card span {
  grid-area: icon;
  width: 42px !important;
  height: 42px !important;
  border-radius: 14px !important;
  font-size: 1.05rem !important;
}

.home-social-section .social-connect-card strong {
  grid-area: title;
  font-size: .98rem !important;
  line-height: 1.1;
}

.home-social-section .social-connect-card small {
  grid-area: handle;
  font-size: .78rem !important;
  line-height: 1.2;
}

/* Updated homepage feature image treatment */
.homepage-final-feature-image img[src*="modern-reading-reference-updated"] {
  object-position: center;
}

@media (max-width: 900px) {
  .home-social-section .social-connect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 560px) {
  .home-social-section .social-connect-grid {
    grid-template-columns: 1fr;
  }

  .home-social-section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }
}


/* =========================================================
   Clickable KNLS facilities slideshow
   Keeps a clear highlight for the Section for the Visually Impaired.
   ========================================================= */

.facilities-click-section {
  background:
    linear-gradient(rgba(247, 247, 255, 0.92), rgba(247, 247, 255, 0.94)),
    url("../images/facilities-slideshow/facility-02-atrium-seating.webp") center / cover no-repeat !important;
}

.facilities-click-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: 24px;
  align-items: stretch;
}

.facilities-click-main {
  position: relative;
  min-height: 560px;
  overflow: hidden;
  border-radius: 34px;
  background: #10069F;
  border: 1px solid #e4e4f2;
  box-shadow: var(--shadow);
}

.facilities-click-stage {
  position: absolute;
  inset: 0;
}

.facilities-click-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity .55s ease, transform .65s ease;
  transform: scale(1.018);
}

.facilities-click-slide.is-active {
  opacity: 1;
  pointer-events: auto;
  transform: scale(1);
}

.facilities-click-slide img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

.facilities-click-slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to top, rgba(36, 71, 143, .82), rgba(36, 71, 143, .10) 58%),
    linear-gradient(135deg, rgba(255, 89, 0, .16), transparent 40%);
  pointer-events: none;
}

.facilities-click-slide__caption {
  position: absolute;
  left: clamp(20px, 4vw, 36px);
  right: clamp(20px, 4vw, 36px);
  bottom: clamp(24px, 4vw, 42px);
  z-index: 2;
  color: #ffffff;
}

.facilities-click-slide__caption span {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .08em;
}

.facilities-click-slide__caption h3 {
  color: #ffffff;
  font-size: clamp(1.7rem, 4vw, 3rem);
  line-height: 1.05;
  letter-spacing: -.04em;
  margin: 0 0 8px;
}

.facilities-click-slide__caption p {
  max-width: 620px;
  color: rgba(255, 255, 255, .88);
  font-weight: 800;
  margin: 0;
}

.facilities-click-controls {
  position: absolute;
  left: 22px;
  right: 22px;
  top: 22px;
  z-index: 4;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: none;
}

.facilities-arrow {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.34);
  background: rgba(255,255,255,.18);
  color: #ffffff;
  font-size: 2rem;
  cursor: pointer;
  pointer-events: auto;
  backdrop-filter: blur(10px);
  transition: background .2s ease, transform .2s ease;
}

.facilities-arrow:hover,
.facilities-arrow:focus-visible {
  background: #FE5000;
  transform: translateY(-2px);
  outline: none;
}

.facilities-count {
  display: inline-flex;
  gap: 4px;
  align-items: baseline;
  padding: 10px 14px;
  border-radius: 999px;
  background: rgba(255,255,255,.18);
  border: 1px solid rgba(255,255,255,.28);
  color: #ffffff;
  font-weight: 900;
  backdrop-filter: blur(10px);
}

.facilities-count span {
  color: rgba(255,255,255,.78);
}

.facilities-thumb-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: 18px;
}

.facilities-thumb {
  display: grid;
  grid-template-columns: 74px minmax(0, 1fr);
  gap: 10px;
  align-items: center;
  min-height: 76px;
  padding: 8px;
  border: 2px solid transparent;
  border-radius: 18px;
  background: #ffffff;
  color: #10069F;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  box-shadow: 0 12px 28px rgba(36, 71, 143, .10);
  transition: border-color .2s ease, transform .2s ease, background .2s ease;
}

.facilities-thumb:hover,
.facilities-thumb:focus-visible,
.facilities-thumb.is-active {
  border-color: #FE5000;
  background: #fff1e8;
  transform: translateY(-2px);
  outline: none;
}

.facilities-thumb img {
  width: 74px;
  height: 58px;
  object-fit: cover;
  border-radius: 12px;
  display: block;
}

.facilities-thumb span {
  display: block;
  line-height: 1.2;
  font-size: .86rem;
}

.visually-impaired-highlight--facilities {
  min-height: 560px;
  border: 2px solid rgba(255, 89, 0, .24);
}

.visually-impaired-highlight--facilities .visually-impaired-highlight__image img {
  min-height: 300px !important;
  object-position: center;
}

.visually-impaired-highlight--facilities .visually-impaired-highlight__copy {
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .13), transparent 30%),
    #ffffff;
}

@media (max-width: 1040px) {
  .facilities-click-layout {
    grid-template-columns: 1fr;
  }

  .facilities-click-main,
  .visually-impaired-highlight--facilities {
    min-height: 460px;
  }

  .facilities-thumb-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .facilities-click-main,
  .visually-impaired-highlight--facilities {
    min-height: 360px;
    border-radius: 24px;
  }

  .facilities-click-controls {
    left: 14px;
    right: 14px;
    top: 14px;
  }

  .facilities-arrow {
    width: 42px;
    height: 42px;
  }

  .facilities-thumb-row {
    grid-template-columns: 1fr;
  }

  .facilities-click-slide__caption {
    left: 18px;
    right: 18px;
    bottom: 24px;
  }
}


/* =========================================================
   Sitewide compact footer
   Replaces the large newsletter-style footer with a shorter,
   cleaner and more organized footer across all pages.
   ========================================================= */

.site-footer--compact {
  background: #06005C;
  color: #ffffff;
  margin-top: 0;
}

.site-footer--compact .compact-footer {
  display: grid;
  grid-template-columns: 1.35fr .72fr .72fr .92fr;
  gap: 22px;
  align-items: start;
  padding-top: 28px;
  padding-bottom: 22px;
}

.compact-footer__logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 12px;
}

.compact-footer__logo .brand__logo {
  width: 76px;
  max-height: 44px;
  object-fit: contain;
}

.compact-footer__logo .brand__text strong {
  color: #ffffff;
  font-size: .96rem;
  line-height: 1.15;
}

.compact-footer__logo .brand__text small {
  color: rgba(255, 255, 255, .72);
  font-size: .74rem;
}

.compact-footer__contact,
.compact-footer__nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compact-footer__contact {
  display: grid;
  gap: 4px;
}

.compact-footer__contact li,
.compact-footer__contact a,
.compact-footer__nav a,
.compact-footer__bottom p,
.compact-footer__bottom a {
  color: rgba(255, 255, 255, .78);
}

.compact-footer__contact li,
.compact-footer__nav li {
  margin-bottom: 5px !important;
  font-size: .86rem;
  line-height: 1.35;
}

.compact-footer__nav h3,
.compact-footer__connect h3 {
  margin: 0 0 10px;
  color: #ffffff;
  font-size: .95rem;
  letter-spacing: .01em;
}

.compact-footer__nav a,
.compact-footer__bottom a {
  text-decoration: none;
}

.compact-footer__nav a:hover,
.compact-footer__contact a:hover,
.compact-footer__bottom a:hover {
  color: #FE5000;
}

.compact-footer__connect {
  min-width: 0;
}

.compact-footer__social {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 12px;
}

.compact-footer__social a {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
  color: #ffffff !important;
  font-weight: 900;
  text-decoration: none;
  transition: background .18s ease, transform .18s ease;
}

.compact-footer__social a:hover {
  background: #FE5000;
  transform: translateY(-2px);
}

.compact-footer__newsletter {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
  margin: 0;
}

.compact-footer__newsletter input {
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px;
  background: rgba(255,255,255,.10);
  color: #ffffff;
  outline: none;
}

.compact-footer__newsletter input::placeholder {
  color: rgba(255,255,255,.62);
}

.compact-footer__newsletter input:focus {
  border-color: #FE5000;
  background: rgba(255,255,255,.14);
}

.compact-footer__newsletter button {
  height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}

.compact-footer__newsletter .form-message {
  grid-column: 1 / -1;
  min-height: 0;
  margin: 2px 0 0;
  font-size: .78rem;
}

.compact-footer__bottom {
  display: flex;
  justify-content: space-between;
  gap: 14px;
  align-items: center;
  border-top: 1px solid rgba(255,255,255,.13);
  padding-top: 12px;
  padding-bottom: 12px;
}

.compact-footer__bottom p {
  margin: 0;
  font-size: .84rem;
}

/* Neutralize older large footer blocks if any remain on a page */
.site-footer--compact .footer-newsletter,
.site-footer--compact .footer-main,
.site-footer--compact .footer-bottom,
.site-footer--compact .footer-social-links {
  display: none !important;
}

@media (max-width: 980px) {
  .site-footer--compact .compact-footer {
    grid-template-columns: 1.2fr 1fr 1fr;
    gap: 20px;
  }

  .compact-footer__connect {
    grid-column: 1 / -1;
  }

  .compact-footer__newsletter {
    max-width: 520px;
  }
}

@media (max-width: 680px) {
  .site-footer--compact .compact-footer {
    grid-template-columns: 1fr;
    padding-top: 24px;
    padding-bottom: 18px;
  }

  .compact-footer__logo .brand__logo {
    width: 68px;
  }

  .compact-footer__newsletter {
    grid-template-columns: 1fr;
  }

  .compact-footer__newsletter button {
    width: 100%;
  }

  .compact-footer__bottom {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}


/* =========================================================
   Redesigned contact page
   Compact layout, clear location cards, embedded maps and office photos.
   ========================================================= */

.contact-page-hero {
  background:
    radial-gradient(circle at 92% 10%, rgba(255, 89, 0, .30), transparent 26%),
    linear-gradient(135deg, #10069F, #06005C) !important;
}

.contact-overview-section {
  padding-top: 38px !important;
  padding-bottom: 26px !important;
  background: #ffffff;
}

.contact-quick-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}

.contact-quick-card {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 12px;
  align-items: center;
  min-height: 100px;
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 12px 32px rgba(36, 71, 143, .08);
}

.contact-quick-card > span {
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
}

.contact-quick-card strong {
  display: block;
  color: #10069F;
  margin-bottom: 4px;
}

.contact-quick-card p {
  margin: 0;
  color: #65756c;
  font-size: .92rem;
  line-height: 1.35;
}

.contact-quick-card a {
  color: #10069F;
  font-weight: 900;
  text-decoration: none;
}

.contact-locations-section {
  padding-top: 38px !important;
  padding-bottom: 42px !important;
  background:
    radial-gradient(circle at 0% 0%, rgba(255,89,0,.10), transparent 28%),
    #f7f7ff;
}

.compact-title {
  margin-bottom: 26px !important;
}

.contact-location-grid {
  display: grid;
  gap: 22px;
}

.contact-location-card {
  display: grid;
  grid-template-columns: minmax(260px, .78fr) minmax(300px, .95fr) minmax(320px, 1fr);
  gap: 0;
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 18px 54px rgba(36, 71, 143, .11);
}

.contact-location-card__image {
  position: relative;
  min-height: 300px;
  margin: 0;
  overflow: hidden;
  background: #10069F;
}

.contact-location-card__image img {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .45s ease;
}

.contact-location-card:hover .contact-location-card__image img {
  transform: scale(1.045);
}

.contact-location-card__image figcaption {
  position: absolute;
  left: 16px;
  bottom: 16px;
  padding: 8px 12px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.contact-location-card__body {
  padding: 24px;
}

.contact-location-card__header h3 {
  margin: 0 0 14px;
  color: #10069F;
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  letter-spacing: -.04em;
}

.contact-detail-list {
  display: grid;
  gap: 10px;
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
}

.contact-detail-list li {
  display: grid;
  gap: 4px;
  padding-bottom: 10px;
  border-bottom: 1px solid #edf0f7;
}

.contact-detail-list strong {
  color: #10069F;
  font-size: .78rem;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.contact-detail-list span,
.contact-detail-list a {
  color: #1f2937;
  line-height: 1.45;
}

.contact-detail-list a {
  font-weight: 900;
  text-decoration: none;
}

.map-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #FE5000;
  font-weight: 900;
  text-decoration: none;
}

.map-link:hover {
  color: #10069F;
}

.contact-map {
  min-height: 300px;
  background: #edf0f7;
}

.contact-map iframe {
  width: 100%;
  height: 100%;
  min-height: 300px;
  display: block;
  border: 0;
}

.contact-message-section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
  background: #ffffff;
}

.contact-message-layout {
  display: grid;
  grid-template-columns: minmax(260px, .55fr) minmax(0, 1fr);
  gap: 24px;
  align-items: start;
}

.contact-message-intro {
  padding: 26px;
  border-radius: 26px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .12), transparent 30%),
    #f7f7ff;
  border: 1px solid #e4e4f2;
}

.contact-message-intro h2 {
  color: #10069F;
  margin-bottom: 10px;
}

.contact-message-intro p {
  color: #65756c;
}

.contact-service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

.contact-service-tags a {
  display: inline-flex;
  padding: 8px 11px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  color: #10069F;
  font-size: .82rem;
  font-weight: 900;
  text-decoration: none;
}

.contact-service-tags a:hover {
  background: #fff1e8;
  color: #FE5000;
}

.contact-form--compact {
  padding: 24px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 16px 44px rgba(36, 71, 143, .10);
}

.contact-form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.contact-form-grid .form-row--full {
  grid-column: 1 / -1;
}

.contact-form--compact textarea {
  min-height: 120px;
}

.contact-social-section--compact {
  padding-top: 28px !important;
  padding-bottom: 32px !important;
  background: #f7f7ff;
}

.contact-social-section--compact .contact-social-panel {
  padding: 26px !important;
  border-radius: 26px;
}

.contact-social-section--compact .section-title {
  margin-bottom: 18px !important;
}

.contact-social-section--compact .social-connect-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
}

.contact-social-section--compact .social-connect-card {
  padding: 16px !important;
  border-radius: 18px;
  min-height: 92px;
}

@media (max-width: 1120px) {
  .contact-quick-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .contact-location-card {
    grid-template-columns: minmax(240px, .85fr) minmax(320px, 1fr);
  }

  .contact-map {
    grid-column: 1 / -1;
  }

  .contact-map iframe,
  .contact-map {
    min-height: 280px;
  }
}

@media (max-width: 860px) {
  .contact-location-card,
  .contact-message-layout {
    grid-template-columns: 1fr;
  }

  .contact-location-card__image,
  .contact-location-card__image img {
    min-height: 260px;
  }

  .contact-social-section--compact .social-connect-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .contact-quick-grid,
  .contact-form-grid,
  .contact-social-section--compact .social-connect-grid {
    grid-template-columns: 1fr;
  }

  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .contact-location-card {
    border-radius: 22px;
  }

  .contact-location-card__body,
  .contact-message-intro,
  .contact-form--compact {
    padding: 20px;
  }
}


/* =========================================================
   Contact page compact revision
   Reduces scrolling, shrinks maps/images/forms, and updates branch visuals.
   ========================================================= */

.contact-overview-section {
  padding-top: 28px !important;
  padding-bottom: 18px !important;
}

.contact-quick-grid {
  gap: 10px !important;
}

.contact-quick-card {
  min-height: 82px !important;
  padding: 14px !important;
  border-radius: 18px !important;
  grid-template-columns: 40px minmax(0, 1fr) !important;
}

.contact-quick-card > span {
  width: 40px !important;
  height: 40px !important;
  border-radius: 14px !important;
  font-size: .95rem;
}

.contact-quick-card p {
  font-size: .86rem !important;
  line-height: 1.3 !important;
}

.contact-locations-section {
  padding-top: 28px !important;
  padding-bottom: 30px !important;
}

.contact-location-grid {
  gap: 16px !important;
}

.contact-location-card {
  grid-template-columns: minmax(220px, .62fr) minmax(270px, .82fr) minmax(280px, .9fr) !important;
  border-radius: 22px !important;
}

.contact-location-card__image {
  min-height: 230px !important;
}

.contact-location-card__image img {
  min-height: 230px !important;
  height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.contact-location-card__body {
  padding: 18px !important;
}

.contact-location-card__header h3 {
  margin-bottom: 10px !important;
  font-size: clamp(1.18rem, 1.7vw, 1.55rem) !important;
}

.contact-detail-list {
  gap: 6px !important;
  margin-bottom: 12px !important;
}

.contact-detail-list li {
  padding-bottom: 7px !important;
}

.contact-detail-list strong {
  font-size: .72rem !important;
}

.contact-detail-list span,
.contact-detail-list a {
  font-size: .9rem !important;
  line-height: 1.32 !important;
}

.contact-map,
.contact-map iframe {
  min-height: 230px !important;
}

/* Compact Send a Message section */
.contact-message-section {
  padding-top: 28px !important;
  padding-bottom: 28px !important;
}

.contact-message-layout {
  grid-template-columns: minmax(230px, .42fr) minmax(0, 1fr) !important;
  gap: 18px !important;
}

.contact-message-intro {
  padding: 18px !important;
  border-radius: 20px !important;
}

.contact-message-intro h2 {
  font-size: clamp(1.35rem, 2.1vw, 1.85rem) !important;
  margin-bottom: 6px !important;
}

.contact-message-intro p {
  font-size: .92rem !important;
  line-height: 1.45 !important;
}

.contact-service-tags {
  gap: 6px !important;
  margin-top: 12px !important;
}

.contact-service-tags a {
  padding: 6px 9px !important;
  font-size: .76rem !important;
}

.contact-form--compact {
  padding: 18px !important;
  border-radius: 20px !important;
}

.contact-form-grid {
  gap: 10px !important;
}

.contact-form--compact .form-row label {
  margin-bottom: 5px !important;
  font-size: .82rem !important;
}

.contact-form--compact input,
.contact-form--compact select {
  min-height: 40px !important;
  padding: 9px 11px !important;
}

.contact-form--compact textarea {
  min-height: 82px !important;
  padding: 9px 11px !important;
}

.contact-form--compact .btn,
.contact-form--compact button[type="submit"] {
  width: auto !important;
  min-width: 136px !important;
  min-height: 40px !important;
  padding: 9px 18px !important;
  margin-top: 12px !important;
  border-radius: 999px !important;
  font-size: .9rem !important;
}

/* Compact Connect with Us section */
.contact-social-section--compact {
  padding-top: 20px !important;
  padding-bottom: 22px !important;
}

.contact-social-section--compact .contact-social-panel {
  padding: 18px !important;
  border-radius: 22px !important;
}

.contact-social-section--compact .section-title {
  margin-bottom: 12px !important;
}

.contact-social-section--compact .section-title h2 {
  font-size: clamp(1.35rem, 2.4vw, 2rem) !important;
  margin-bottom: 5px !important;
}

.contact-social-section--compact .section-title p {
  font-size: .88rem !important;
  max-width: 560px;
}

.contact-social-section--compact .social-connect-grid {
  gap: 10px !important;
}

.contact-social-section--compact .social-connect-card {
  min-height: 72px !important;
  padding: 12px 14px !important;
  border-radius: 16px !important;
}

.contact-social-section--compact .social-connect-card span {
  width: 38px !important;
  height: 38px !important;
  border-radius: 12px !important;
  font-size: .95rem !important;
}

.contact-social-section--compact .social-connect-card strong {
  font-size: .92rem !important;
}

.contact-social-section--compact .social-connect-card small {
  font-size: .74rem !important;
}

@media (max-width: 1120px) {
  .contact-location-card {
    grid-template-columns: minmax(220px, .75fr) minmax(270px, 1fr) !important;
  }

  .contact-map {
    grid-column: 1 / -1;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 220px !important;
  }
}

@media (max-width: 860px) {
  .contact-location-card,
  .contact-message-layout {
    grid-template-columns: 1fr !important;
  }

  .contact-location-card__image,
  .contact-location-card__image img {
    min-height: 220px !important;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 220px !important;
  }
}

@media (max-width: 620px) {
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section {
    padding-top: 24px !important;
    padding-bottom: 24px !important;
  }

  .contact-form--compact .btn,
  .contact-form--compact button[type="submit"] {
    width: 100% !important;
  }
}


/* =========================================================
   Contact page hero + send form refinement
   Smaller hero with information desk background and compact submit action.
   ========================================================= */

.contact-page-hero {
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(21, 43, 96, .88) 0%, rgba(33, 64, 130, .72) 45%, rgba(24, 42, 88, .62) 100%),
    url("../images/contact-locations/contact-hero-information-desk.webp") center/cover no-repeat !important;
  padding: 54px 0 !important;
}

.contact-page-hero .page-hero__inner {
  min-height: 220px;
  gap: 20px;
  align-items: end;
}

.contact-page-hero h1 {
  font-size: clamp(2.8rem, 5.3vw, 5rem);
  line-height: .96;
  margin-bottom: 12px;
}

.contact-page-hero .kicker {
  margin-bottom: 8px;
}

.contact-page-hero p:not(.kicker) {
  max-width: 720px;
  font-size: 1rem;
  line-height: 1.5;
}

.contact-page-hero .breadcrumbs {
  padding: 8px 14px;
  font-size: .92rem;
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.24);
  backdrop-filter: blur(6px);
}

.contact-form--compact {
  display: block !important;
}

.contact-form--compact .contact-form-grid {
  margin-bottom: 12px;
}

.contact-form--compact .btn,
.contact-form--compact button[type="submit"] {
  display: inline-flex !important;
  width: auto !important;
  min-width: 150px !important;
  max-width: max-content;
  min-height: 42px !important;
  padding: 0 18px !important;
  border-radius: 999px !important;
  box-shadow: none !important;
  justify-self: start !important;
  align-self: start !important;
}

.contact-form--compact .form-message {
  margin-top: 8px;
}

@media (max-width: 900px) {
  .contact-page-hero {
    padding: 42px 0 !important;
  }

  .contact-page-hero .page-hero__inner {
    min-height: 180px;
  }
}

@media (max-width: 620px) {
  .contact-page-hero {
    padding: 34px 0 !important;
  }

  .contact-page-hero .page-hero__inner {
    min-height: 150px;
  }

  .contact-page-hero h1 {
    font-size: clamp(2.3rem, 11vw, 3.5rem);
  }

  .contact-page-hero .breadcrumbs {
    font-size: .86rem;
  }
}


/* =========================================================
   Facilities slideshow clean image-only update
   Removes thumbnail strip and hides image title/description overlays on homepage.
   ========================================================= */

.facilities-thumb-row {
  display: none !important;
}

.facilities-click-slide__caption {
  display: none !important;
}

.facilities-click-slide::after {
  background:
    linear-gradient(to top, rgba(36, 71, 143, .18), transparent 42%) !important;
}

.facilities-click-main {
  min-height: 520px;
}

@media (max-width: 1040px) {
  .facilities-click-main {
    min-height: 430px;
  }
}

@media (max-width: 620px) {
  .facilities-click-main {
    min-height: 340px;
  }
}


/* =========================================================
   Senior Management and Board consistency update
   Board cards now use the same format and name containers as Senior Management.
   ========================================================= */

.board-section--management-style {
  background: #ffffff;
}

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

.board-management-card {
  text-align: center;
}

.board-management-card .management-card__photo {
  width: 220px;
  height: 220px;
  margin: 0 auto 20px;
  border-radius: 50%;
  overflow: hidden;
  border: 4px solid #f2f2fb;
  box-shadow: inset 0 0 0 1px #e4e4f2;
  background: #f7f7ff;
}

.board-management-card .management-card__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
}

.board-management-card .management-card__content h3 {
  color: #10069F;
  font-size: 1.25rem;
  margin-bottom: 8px;
  text-transform: none;
  letter-spacing: normal;
}

.board-management-card .management-card__content p {
  color: #FE5000;
  font-weight: 800;
  margin: 0;
}

@media (max-width: 980px) {
  .board-management-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 620px) {
  .board-management-grid {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Board and Senior Management hero removal spacing
   Keeps pages clean after removing the large top banner sections.
   ========================================================= */

.board-section--management-style,
.management-section {
  padding-top: 54px !important;
}

.board-section--management-style .section-title,
.management-section .section-title {
  margin-bottom: 30px !important;
}

@media (max-width: 680px) {
  .board-section--management-style,
  .management-section {
    padding-top: 38px !important;
  }
}


/* =========================================================
   Sitewide accessibility features
   Adds screen-reader mode, high contrast, font size controls,
   dark mode and light mode support across all KNLS pages.
   ========================================================= */

/* Core variables used by accessibility modes */
:root {
  --access-font-scale: 1;
  --access-bg: #ffffff;
  --access-surface: #ffffff;
  --access-surface-soft: #f7f7ff;
  --access-text: #1f2937;
  --access-muted: #65756c;
  --access-border: #e4e4f2;
  --access-primary: #10069F;
  --access-accent: #FE5000;
}

html {
  font-size: calc(100% * var(--access-font-scale));
}

body {
  background-color: var(--access-bg);
  color: var(--access-text);
}

/* Floating accessibility widget */
.accessibility-widget {
  position: fixed;
  right: 18px;
  bottom: 18px;
  z-index: 99999;
  font-family: inherit;
}

.accessibility-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 46px;
  padding: 0 16px;
  border: 0;
  border-radius: 999px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 42px rgba(36, 71, 143, .30);
}

.accessibility-toggle:hover,
.accessibility-toggle:focus-visible {
  background: #FE5000;
  outline: 3px solid rgba(255, 89, 0, .28);
  outline-offset: 3px;
}

.accessibility-panel {
  position: absolute;
  right: 0;
  bottom: 58px;
  width: min(330px, calc(100vw - 28px));
  padding: 16px;
  border-radius: 22px;
  background: var(--access-surface);
  border: 1px solid var(--access-border);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .22);
  color: var(--access-text);
}

.accessibility-panel__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 12px;
}

.accessibility-panel__header strong {
  color: var(--access-primary);
  font-size: 1rem;
}

.accessibility-close {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: var(--access-surface-soft);
  color: var(--access-primary);
  font-size: 1.25rem;
  font-weight: 900;
  cursor: pointer;
}

.accessibility-group {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}

.accessibility-group button {
  min-height: 42px;
  padding: 8px 10px;
  border: 1px solid var(--access-border);
  border-radius: 14px;
  background: var(--access-surface-soft);
  color: var(--access-primary);
  font-weight: 900;
  cursor: pointer;
}

.accessibility-group button:hover,
.accessibility-group button:focus-visible,
.accessibility-group button.is-active {
  background: var(--access-accent);
  border-color: var(--access-accent);
  color: #ffffff;
  outline: none;
}

.accessibility-font-controls {
  grid-template-columns: 1fr 1.25fr 1fr;
}

.accessibility-note {
  margin: 8px 0 0;
  color: var(--access-muted);
  font-size: .82rem;
  line-height: 1.4;
}

/* Make keyboard navigation visible */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
  outline: 3px solid var(--access-accent) !important;
  outline-offset: 3px !important;
}

/* Screen-reader support mode:
   improves skip links, focus visibility and turns off motion. */
body.screen-reader-mode * {
  scroll-behavior: auto !important;
  animation-duration: .001ms !important;
  animation-iteration-count: 1 !important;
  transition-duration: .001ms !important;
}

body.screen-reader-mode .skip-link {
  position: fixed !important;
  left: 16px !important;
  top: 16px !important;
  z-index: 100000 !important;
  width: auto !important;
  height: auto !important;
  padding: 12px 16px !important;
  border-radius: 999px !important;
  clip: auto !important;
  overflow: visible !important;
  background: #000000 !important;
  color: #ffffff !important;
  font-weight: 900 !important;
}

body.screen-reader-mode img[alt=""],
body.screen-reader-mode img:not([alt]) {
  outline: 3px dashed #FE5000;
}

/* High contrast mode */
body.high-contrast-mode {
  --access-bg: #000000;
  --access-surface: #000000;
  --access-surface-soft: #111111;
  --access-text: #ffffff;
  --access-muted: #ffffff;
  --access-border: #ffffff;
  --access-primary: #ffffff;
  --access-accent: #ffff00;
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode,
body.high-contrast-mode main,
body.high-contrast-mode section,
body.high-contrast-mode article,
body.high-contrast-mode aside,
body.high-contrast-mode .container,
body.high-contrast-mode .card,
body.high-contrast-mode .management-card,
body.high-contrast-mode .homepage-service-card,
body.high-contrast-mode .contact-location-card,
body.high-contrast-mode .compact-footer,
body.high-contrast-mode .accessibility-panel {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  box-shadow: none !important;
}

body.high-contrast-mode h1,
body.high-contrast-mode h2,
body.high-contrast-mode h3,
body.high-contrast-mode h4,
body.high-contrast-mode p,
body.high-contrast-mode li,
body.high-contrast-mode span,
body.high-contrast-mode small,
body.high-contrast-mode strong,
body.high-contrast-mode label {
  color: #ffffff !important;
}

body.high-contrast-mode a,
body.high-contrast-mode .kicker {
  color: #ffff00 !important;
}

body.high-contrast-mode .btn,
body.high-contrast-mode button,
body.high-contrast-mode input,
body.high-contrast-mode select,
body.high-contrast-mode textarea {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

body.high-contrast-mode .btn:hover,
body.high-contrast-mode button:hover,
body.high-contrast-mode .is-active {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
}

body.high-contrast-mode img {
  filter: contrast(1.12) brightness(.96);
}

/* Dark mode */
body.dark-mode {
  --access-bg: #08111f;
  --access-surface: #101b2f;
  --access-surface-soft: #172642;
  --access-text: #f5f7fb;
  --access-muted: #cbd5e1;
  --access-border: #31415f;
  --access-primary: #9db8ff;
  --access-accent: #FE5000;
  background: #08111f !important;
  color: #f5f7fb !important;
}

body.dark-mode main,
body.dark-mode section,
body.dark-mode .page-section,
body.dark-mode .homepage-final-services,
body.dark-mode .contact-locations-section,
body.dark-mode .contact-message-section,
body.dark-mode .contact-social-section--compact,
body.dark-mode .management-section,
body.dark-mode .board-section--management-style {
  background: #08111f !important;
  color: #f5f7fb !important;
}

body.dark-mode .card,
body.dark-mode article,
body.dark-mode aside,
body.dark-mode .homepage-service-card,
body.dark-mode .management-card,
body.dark-mode .contact-quick-card,
body.dark-mode .contact-location-card,
body.dark-mode .contact-message-intro,
body.dark-mode .contact-form--compact,
body.dark-mode .contact-social-panel,
body.dark-mode .compact-footer,
body.dark-mode .accessibility-panel,
body.dark-mode .facilities-click-main,
body.dark-mode .visually-impaired-highlight,
body.dark-mode .newsletter,
body.dark-mode .service-card {
  background: #101b2f !important;
  border-color: #31415f !important;
  color: #f5f7fb !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .28) !important;
}

body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode p,
body.dark-mode li,
body.dark-mode label,
body.dark-mode span,
body.dark-mode small,
body.dark-mode strong {
  color: #f5f7fb !important;
}

body.dark-mode a {
  color: #ffb45f;
}

body.dark-mode .kicker,
body.dark-mode .management-card__content p,
body.dark-mode .board-management-card .management-card__content p {
  color: #FE5000 !important;
}

body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea {
  background: #0b1528 !important;
  border-color: #3a4b6d !important;
  color: #f5f7fb !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

body.dark-mode .site-header,
body.dark-mode .nav-panel,
body.dark-mode .dropdown-menu,
body.dark-mode .submenu {
  background: rgba(8, 17, 31, .96) !important;
  border-color: #31415f !important;
}

body.dark-mode .site-nav a,
body.dark-mode .mobile-menu-toggle,
body.dark-mode .brand__text strong,
body.dark-mode .brand__text small {
  color: #f5f7fb !important;
}

body.dark-mode .btn--light {
  background: #f5f7fb !important;
  color: #06005C !important;
}

body.dark-mode .btn--orange,
body.dark-mode .btn--green {
  background: #FE5000 !important;
  color: #08111f !important;
}

body.dark-mode img {
  opacity: .96;
}

/* Light mode reset */
body.light-mode {
  --access-bg: #ffffff;
  --access-surface: #ffffff;
  --access-surface-soft: #f7f7ff;
  --access-text: #1f2937;
  --access-muted: #65756c;
  --access-border: #e4e4f2;
  --access-primary: #10069F;
  --access-accent: #FE5000;
  background: #ffffff;
  color: #1f2937;
}

@media (max-width: 640px) {
  .accessibility-widget {
    right: 12px;
    bottom: 12px;
  }

  .accessibility-toggle span:last-child {
    display: none;
  }

  .accessibility-toggle {
    width: 50px;
    height: 50px;
    justify-content: center;
    padding: 0;
  }

  .accessibility-panel {
    right: 0;
    bottom: 60px;
  }
}


/* =========================================================
   Accessibility button top navigation placement and tutorial
   Moves the button to the top-right navigation area, adds pulse,
   and styles the first-visit tutorial spotlight.
   ========================================================= */

.accessibility-widget {
  position: fixed !important;
  top: 14px !important;
  right: 18px !important;
  bottom: auto !important;
  z-index: 100001 !important;
}

.accessibility-toggle {
  min-height: 42px !important;
  padding: 0 14px !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 10px 28px rgba(255, 89, 0, .34) !important;
  animation: accessibilityPulse 2.4s ease-in-out infinite;
}

.accessibility-toggle:hover,
.accessibility-toggle:focus-visible,
.accessibility-toggle.tutorial-highlight {
  background: #10069F !important;
  color: #ffffff !important;
}

.accessibility-toggle.tutorial-highlight {
  outline: 4px solid rgba(255, 255, 255, .95) !important;
  outline-offset: 5px !important;
  box-shadow:
    0 0 0 10px rgba(255, 89, 0, .32),
    0 18px 48px rgba(0, 0, 0, .38) !important;
  animation: accessibilityTutorialPulse 1.25s ease-in-out infinite;
}

@keyframes accessibilityPulse {
  0%, 100% {
    transform: translateY(0);
    box-shadow: 0 10px 28px rgba(255, 89, 0, .30);
  }
  50% {
    transform: translateY(-1px);
    box-shadow: 0 0 0 8px rgba(255, 89, 0, .12), 0 14px 34px rgba(255, 89, 0, .40);
  }
}

@keyframes accessibilityTutorialPulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.045);
  }
}

/* Because the toolbar is now above the header, open its panel downward */
.accessibility-panel {
  top: 54px !important;
  right: 0 !important;
  bottom: auto !important;
}

/* First-visit accessibility tutorial overlay */
.accessibility-tutorial-backdrop {
  position: fixed;
  inset: 0;
  z-index: 100000;
  background: rgba(8, 17, 31, .50);
  backdrop-filter: blur(2px);
}

.accessibility-tutorial-card {
  position: fixed;
  top: 76px;
  right: 18px;
  z-index: 100002;
  width: min(390px, calc(100vw - 32px));
  padding: 18px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 28px 90px rgba(0, 0, 0, .30);
  color: #1f2937;
}

.accessibility-tutorial-card::before {
  content: "";
  position: absolute;
  top: -9px;
  right: 34px;
  width: 18px;
  height: 18px;
  transform: rotate(45deg);
  background: #ffffff;
  border-left: 1px solid #e4e4f2;
  border-top: 1px solid #e4e4f2;
}

.accessibility-tutorial-card h2 {
  margin: 0 0 8px;
  color: #10069F;
  font-size: 1.25rem;
  line-height: 1.2;
}

.accessibility-tutorial-card p {
  margin: 0 0 12px;
  color: #65756c;
  line-height: 1.45;
  font-size: .95rem;
}

.accessibility-tutorial-card ul {
  margin: 0 0 16px;
  padding-left: 18px;
  color: #1f2937;
}

.accessibility-tutorial-card li {
  margin-bottom: 5px;
  line-height: 1.35;
}

.accessibility-tutorial-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.accessibility-tutorial-actions button {
  min-height: 40px;
  padding: 0 14px;
  border-radius: 999px;
  border: 1px solid #e4e4f2;
  font-weight: 900;
  cursor: pointer;
}

.accessibility-tutorial-actions [data-tutorial-open] {
  background: #10069F;
  color: #ffffff;
  border-color: #10069F;
}

.accessibility-tutorial-actions [data-tutorial-dismiss] {
  background: #fff1e8;
  color: #FE5000;
  border-color: #ffcfb8;
}

body.dark-mode .accessibility-tutorial-card {
  background: #101b2f;
  border-color: #31415f;
}

body.dark-mode .accessibility-tutorial-card::before {
  background: #101b2f;
  border-color: #31415f;
}

body.dark-mode .accessibility-tutorial-card h2,
body.dark-mode .accessibility-tutorial-card li {
  color: #f5f7fb;
}

body.dark-mode .accessibility-tutorial-card p {
  color: #cbd5e1;
}

body.high-contrast-mode .accessibility-tutorial-card,
body.high-contrast-mode .accessibility-tutorial-card::before {
  background: #000000 !important;
  border-color: #ffffff !important;
  color: #ffffff !important;
}

body.high-contrast-mode .accessibility-tutorial-backdrop {
  background: rgba(0, 0, 0, .72) !important;
}

@media (max-width: 980px) {
  .accessibility-widget {
    top: 12px !important;
    right: 74px !important;
  }

  .accessibility-panel {
    top: 54px !important;
    right: -58px !important;
  }

  .accessibility-tutorial-card {
    top: 76px;
    right: 14px;
  }

  .accessibility-tutorial-card::before {
    right: 88px;
  }
}

@media (max-width: 640px) {
  .accessibility-widget {
    top: 10px !important;
    right: 70px !important;
  }

  .accessibility-toggle {
    width: 46px !important;
    height: 46px !important;
    min-height: 46px !important;
  }

  .accessibility-toggle span:last-child {
    display: none;
  }

  .accessibility-panel {
    top: 56px !important;
    right: -60px !important;
  }

  .accessibility-tutorial-card {
    top: 70px;
    left: 14px;
    right: 14px;
    width: auto;
  }

  .accessibility-tutorial-card::before {
    right: 90px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .accessibility-toggle,
  .accessibility-toggle.tutorial-highlight {
    animation: none !important;
  }
}


/* =========================================================
   Dark mode and high contrast readability hardening
   Extends accessibility modes across remaining page areas and fixes low-contrast text.
   ========================================================= */

/* ---------- Dark mode: broad page coverage ---------- */
body.dark-mode {
  background: #08111f !important;
  color: #f8fafc !important;
}

body.dark-mode :where(
  main,
  .section,
  .page-section,
  .content-section,
  .about-section,
  .services-section,
  .locations-section,
  .news-section,
  .events-section,
  .resources-section,
  .documents-section,
  .downloads-section,
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section,
  .contact-social-section,
  .contact-social-section--compact,
  .management-section,
  .board-section,
  .board-section--management-style,
  .partners-section,
  .recognition-section,
  .career-section,
  .newsletter-section,
  .facilities-click-section,
  .home-refresh-gallery,
  .home-social-section
) {
  background-color: #08111f !important;
  color: #f8fafc !important;
}

body.dark-mode :where(
  .card,
  .content-card,
  .service-card,
  .homepage-service-card,
  .homepage-final-card,
  .location-card,
  .news-card,
  .event-card,
  .document-card,
  .download-card,
  .resource-card,
  .management-card,
  .board-management-card,
  .contact-quick-card,
  .contact-location-card,
  .contact-message-intro,
  .contact-form,
  .contact-form--compact,
  .contact-social-panel,
  .social-connect-card,
  .compact-footer,
  .compact-footer__nav,
  .compact-footer__brand,
  .recognition-card,
  .partner-card,
  .career-card,
  .accordion,
  .accordion-item,
  .accordion-content,
  .tab-panel,
  .feature-card,
  .stat-card,
  .quick-access-card,
  .visually-impaired-highlight,
  .accessibility-panel,
  .accessibility-tutorial-card,
  .table-wrap,
  .table-card,
  .org-card,
  .team-card
) {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
  box-shadow: 0 18px 52px rgba(0, 0, 0, .34) !important;
}

body.dark-mode :where(
  h1, h2, h3, h4, h5, h6,
  p, li, span, small, strong, em,
  label, legend, figcaption, caption,
  td, th, blockquote, cite, dt, dd
) {
  color: #f8fafc !important;
}

body.dark-mode :where(
  .muted,
  .lead,
  .section-title p,
  .page-hero p,
  .contact-detail-list span,
  .compact-footer__contact li,
  .compact-footer__bottom p,
  .form-message,
  .accessibility-note
) {
  color: #cbd5e1 !important;
}

body.dark-mode :where(a) {
  color: #ffb45f !important;
}

body.dark-mode :where(a:hover, a:focus-visible) {
  color: #ffcfb8 !important;
}

body.dark-mode :where(.kicker, .eyebrow, .tag, .badge, .pill) {
  color: #FE5000 !important;
}

body.dark-mode :where(
  input, select, textarea,
  .search-input,
  .form-control
) {
  background: #0b1528 !important;
  color: #f8fafc !important;
  border-color: #3a4b6d !important;
}

body.dark-mode :where(input::placeholder, textarea::placeholder) {
  color: #94a3b8 !important;
}

body.dark-mode :where(
  table, thead, tbody, tr, td, th
) {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode :where(thead th, .table-header) {
  background: #172642 !important;
  color: #ffffff !important;
}

body.dark-mode :where(
  .site-header,
  .nav,
  .nav__list,
  .dropdown,
  .dropdown__sub,
  .mobile-nav,
  .search-panel,
  .modal,
  .modal-content
) {
  background: rgba(8, 17, 31, .98) !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode :where(
  .site-nav a,
  .nav__list a,
  .nav__trigger,
  .dropdown a,
  .dropdown__group-title,
  .menu-toggle,
  .brand__text strong,
  .brand__text small
) {
  color: #f8fafc !important;
}

body.dark-mode :where(.btn, button, .button) {
  border-color: #3a4b6d !important;
}

body.dark-mode :where(.btn--orange, .btn--green, .accessibility-toggle) {
  background: #FE5000 !important;
  color: #08111f !important;
  border-color: #FE5000 !important;
}

body.dark-mode :where(.btn--light, .btn--hero-outline, .btn--outline) {
  background: #f8fafc !important;
  color: #06005C !important;
  border-color: #f8fafc !important;
}

body.dark-mode :where(
  .page-hero,
  .contact-page-hero,
  .knls-hero-carousel,
  .facilities-click-main
) {
  color: #ffffff !important;
}

body.dark-mode :where(
  .page-hero h1,
  .page-hero p,
  .page-hero .kicker,
  .knls-hero-message-panel h1,
  .knls-hero-message-panel p,
  .knls-hero-slide__content h1,
  .knls-hero-slide__content p,
  .facilities-click-slide__caption h3,
  .facilities-click-slide__caption p
) {
  color: #ffffff !important;
}

body.dark-mode :where(.breadcrumbs) {
  background: rgba(16, 27, 47, .82) !important;
  color: #f8fafc !important;
  border-color: rgba(255, 255, 255, .20) !important;
}

body.dark-mode :where(.breadcrumbs a, .breadcrumbs span) {
  color: #f8fafc !important;
}

body.dark-mode :where(.site-footer, .site-footer--compact) {
  background: #050b15 !important;
  color: #f8fafc !important;
}

/* ---------- High contrast: maximum readability ---------- */
body.high-contrast-mode {
  background: #000000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode *,
body.high-contrast-mode *::before,
body.high-contrast-mode *::after {
  text-shadow: none !important;
  box-shadow: none !important;
}

body.high-contrast-mode :where(
  main,
  section,
  article,
  aside,
  div,
  header,
  footer,
  nav,
  ul,
  li,
  form,
  fieldset,
  table,
  thead,
  tbody,
  tr,
  td,
  th,
  .container,
  .card,
  .content-card,
  .homepage-service-card,
  .service-card,
  .location-card,
  .news-card,
  .event-card,
  .document-card,
  .download-card,
  .management-card,
  .board-management-card,
  .contact-quick-card,
  .contact-location-card,
  .contact-message-intro,
  .contact-form,
  .contact-form--compact,
  .contact-social-panel,
  .social-connect-card,
  .compact-footer,
  .accessibility-panel,
  .accessibility-tutorial-card,
  .visually-impaired-highlight,
  .facilities-click-section,
  .table-wrap,
  .table-card,
  .dropdown,
  .dropdown__sub,
  .nav__list
) {
  background: #000000 !important;
  background-image: none !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast-mode :where(
  h1, h2, h3, h4, h5, h6,
  p, li, span, small, strong, em,
  label, legend, figcaption, caption,
  td, th, blockquote, cite, dt, dd
) {
  color: #ffffff !important;
}

body.high-contrast-mode :where(a, a span, .kicker, .eyebrow, .tag, .badge, .pill) {
  color: #ffff00 !important;
}

body.high-contrast-mode :where(a:hover, a:focus-visible) {
  color: #00ffff !important;
}

body.high-contrast-mode :where(
  button,
  .btn,
  .button,
  input[type="button"],
  input[type="submit"],
  input[type="reset"]
) {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 3px solid #ffff00 !important;
}

body.high-contrast-mode :where(
  button:hover,
  button:focus-visible,
  .btn:hover,
  .btn:focus-visible,
  .button:hover,
  .button:focus-visible,
  .is-active
) {
  background: #00ffff !important;
  color: #000000 !important;
  border-color: #00ffff !important;
}

body.high-contrast-mode :where(
  input,
  select,
  textarea
) {
  background: #000000 !important;
  color: #ffffff !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode :where(input::placeholder, textarea::placeholder) {
  color: #ffffff !important;
  opacity: 1 !important;
}

body.high-contrast-mode :where(
  .page-hero,
  .contact-page-hero,
  .knls-hero-carousel,
  .facilities-click-main,
  .facilities-click-slide,
  .contact-location-card__image,
  .homepage-final-hero,
  .service-hero
) {
  background: #000000 !important;
  background-image: none !important;
}

body.high-contrast-mode :where(
  .page-hero h1,
  .page-hero p,
  .knls-hero-message-panel h1,
  .knls-hero-message-panel p,
  .contact-page-hero h1,
  .contact-page-hero p
) {
  color: #ffffff !important;
}

body.high-contrast-mode :where(.breadcrumbs) {
  background: #000000 !important;
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode :where(.breadcrumbs a, .breadcrumbs span) {
  color: #ffff00 !important;
}

body.high-contrast-mode :where(img, iframe, video) {
  border: 3px solid #ffffff !important;
}

body.high-contrast-mode :where(svg, svg *, .icon, .social-connect-card span) {
  color: #ffff00 !important;
  fill: #ffff00 !important;
  stroke: #ffff00 !important;
}

body.high-contrast-mode :where(.sr-only) {
  color: #ffffff !important;
  background: #000000 !important;
}

/* Keep the accessibility widget usable above all contrast states */
body.high-contrast-mode .accessibility-toggle,
body.dark-mode .accessibility-toggle {
  border: 3px solid currentColor !important;
}

body.high-contrast-mode .accessibility-panel button {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
}

/* Disable decorative overlays that caused readability issues */
body.dark-mode :where(.overlay, .image-overlay)::before,
body.dark-mode :where(.overlay, .image-overlay)::after,
body.high-contrast-mode :where(.overlay, .image-overlay)::before,
body.high-contrast-mode :where(.overlay, .image-overlay)::after {
  opacity: .15 !important;
}


/* =========================================================
   Sitewide mobile optimization
   Reduces congestion, prevents mobile zoom/overflow, improves spacing,
   and creates cleaner responsive layouts across all pages.
   ========================================================= */

/* Global overflow and sizing safety */
html,
body {
  max-width: 100%;
  overflow-x: hidden;
}

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

img,
video,
iframe,
svg {
  max-width: 100%;
}

/* Softer image behaviour sitewide */
img {
  height: auto;
}

/* Tablet and mobile layout reset */
@media (max-width: 1024px) {
  .container {
    width: min(100% - 32px, 1180px) !important;
  }

  .section {
    padding-top: 48px !important;
    padding-bottom: 48px !important;
  }

  .section-title {
    margin-bottom: 26px !important;
  }

  .section-title h2 {
    font-size: clamp(1.9rem, 5vw, 2.8rem) !important;
    line-height: 1.08 !important;
    letter-spacing: -0.04em !important;
  }

  .section-title p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
  }

  .page-hero {
    padding: 52px 0 !important;
  }

  .page-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 18px !important;
    align-items: start !important;
  }

  .page-hero h1 {
    font-size: clamp(2.4rem, 8vw, 4.2rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
  }

  .page-hero p {
    font-size: 1rem !important;
    line-height: 1.55 !important;
  }

  .breadcrumbs {
    width: fit-content;
    max-width: 100%;
    flex-wrap: wrap;
    white-space: normal !important;
    padding: 8px 12px !important;
  }
}

/* Collapse complex grids earlier so tablets and phones do not feel squeezed */
@media (max-width: 820px) {
  .homepage-final-hero__grid,
  .homepage-final-intro__grid,
  .homepage-final-author__header,
  .homepage-service-grid,
  .management-grid,
  .board-management-grid,
  .contact-quick-grid,
  .contact-location-card,
  .contact-message-layout,
  .contact-form-grid,
  .social-connect-grid,
  .contact-social-section--compact .social-connect-grid,
  .compact-footer,
  .card-grid,
  .feature-grid,
  .gallery-grid,
  .partners-grid,
  .events-feature__grid,
  .two-column,
  .contact-layout,
  .split-cta,
  .facilities-click-layout,
  .library-slideshow-layout,
  .journey-steps--landscape {
    grid-template-columns: 1fr !important;
  }

  .homepage-service-grid,
  .management-grid,
  .board-management-grid,
  .card-grid,
  .feature-grid {
    gap: 18px !important;
  }

  .homepage-service-card,
  .management-card,
  .board-management-card,
  .contact-location-card,
  .contact-quick-card,
  .social-connect-card,
  .link-card,
  .feature-card,
  .content-panel,
  .side-panel,
  .cta-card,
  .contact-info,
  .contact-form,
  .faq-card,
  .partner-card,
  .event-card,
  .news-card,
  .download-card,
  .resource-card {
    border-radius: 20px !important;
  }

  .homepage-service-card div,
  .contact-location-card__body,
  .management-card,
  .board-management-card,
  .content-panel,
  .side-panel,
  .cta-card,
  .contact-info,
  .contact-form,
  .contact-form--compact,
  .contact-message-intro,
  .contact-social-panel {
    padding: 18px !important;
  }

  .homepage-service-card img,
  .contact-location-card__image,
  .contact-location-card__image img {
    min-height: 0 !important;
    height: 180px !important;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 220px !important;
    height: 220px !important;
  }

  .management-card__photo,
  .board-management-card .management-card__photo {
    width: 150px !important;
    height: 150px !important;
    margin-bottom: 14px !important;
  }

  .management-card h3,
  .board-management-card .management-card__content h3 {
    font-size: 1.05rem !important;
    line-height: 1.25 !important;
  }

  .management-card p,
  .board-management-card .management-card__content p {
    font-size: .9rem !important;
    line-height: 1.35 !important;
  }
}

/* Mobile header and navigation cleanup */
@media (max-width: 768px) {
  .top-strip {
    display: none !important;
  }

  .site-header {
    position: sticky;
    top: 0;
    z-index: 9998;
  }

  .nav {
    min-height: 64px !important;
    gap: 8px !important;
    padding-top: 8px !important;
    padding-bottom: 8px !important;
  }

  .brand {
    min-width: 0 !important;
  }

  .brand__logo {
    max-width: 92px !important;
    max-height: 48px !important;
    object-fit: contain;
  }

  .brand__text {
    display: none !important;
  }

  .menu-toggle {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
  }

  .search-button {
    width: 42px !important;
    height: 42px !important;
    min-width: 42px !important;
  }

  .nav__list {
    max-height: calc(100vh - 70px) !important;
    overflow-y: auto !important;
    padding: 14px !important;
  }

  .nav__list a,
  .nav__trigger {
    min-height: 44px !important;
    padding: 10px 12px !important;
    line-height: 1.25 !important;
  }

  .dropdown,
  .dropdown__sub {
    max-width: 100% !important;
  }

  /* Keep accessibility button compact and away from hamburger */
  .accessibility-widget {
    top: 9px !important;
    right: 64px !important;
  }

  .accessibility-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
  }

  .accessibility-toggle span:last-child {
    display: none !important;
  }

  .accessibility-panel {
    top: 54px !important;
    right: -56px !important;
    width: min(320px, calc(100vw - 24px)) !important;
  }
}

/* Mobile hero/slideshow balance */
@media (max-width: 768px) {
  .knls-hero-carousel,
  .knls-hero-message-panel,
  .knls-hero-slide__content {
    min-height: 520px !important;
  }

  .knls-hero-message-panel {
    padding: 62px 18px 190px !important;
    align-content: start !important;
  }

  .knls-hero-message-panel h1,
  .knls-hero-slide__content h1,
  .homepage-final-hero h1 {
    font-size: clamp(2.25rem, 10vw, 3.6rem) !important;
    line-height: 1.02 !important;
    letter-spacing: -0.05em !important;
  }

  .knls-hero-message-panel p,
  .knls-hero-slide__content p,
  .homepage-final-hero p {
    font-size: .98rem !important;
    line-height: 1.55 !important;
    max-width: 100% !important;
  }

  .knls-hero-message-actions,
  .homepage-final-actions {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    max-width: 100% !important;
  }

  .knls-hero-message-actions .btn,
  .homepage-final-actions .btn {
    width: 100% !important;
    min-height: 44px !important;
  }

  .knls-hero-quick-access {
    left: 16px !important;
    right: 16px !important;
    bottom: 74px !important;
    padding: 14px !important;
    border-radius: 18px !important;
  }

  .knls-hero-quick-access h2 {
    font-size: 1.15rem !important;
    margin-bottom: 8px !important;
  }

  .knls-hero-quick-access__links {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .knls-hero-quick-access__links a {
    min-height: 46px !important;
    padding: 9px 12px !important;
  }

  .knls-hero-controls {
    bottom: 20px !important;
  }
}

/* General mobile content tuning */
@media (max-width: 768px) {
  .section {
    padding-top: 36px !important;
    padding-bottom: 36px !important;
  }

  .section-title {
    margin-bottom: 20px !important;
  }

  .kicker {
    font-size: .78rem !important;
    line-height: 1.2 !important;
  }

  p,
  li,
  .contact-detail-list span,
  .contact-detail-list a {
    font-size: .95rem !important;
    line-height: 1.55 !important;
  }

  .btn,
  button,
  input,
  select,
  textarea {
    font-size: 1rem !important;
  }

  .btn {
    min-height: 44px !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .homepage-final-feature-image img,
  .homepage-service-card img,
  .facilities-click-slide img,
  .library-slideshow-card img {
    object-fit: cover !important;
    object-position: center !important;
  }

  .facilities-click-main,
  .library-slideshow-card {
    min-height: 320px !important;
    aspect-ratio: 4 / 3;
    border-radius: 22px !important;
  }

  .visually-impaired-highlight {
    min-height: auto !important;
    border-radius: 22px !important;
  }

  .visually-impaired-highlight__image img {
    min-height: 220px !important;
    height: 220px !important;
  }

  .facilities-click-controls {
    left: 12px !important;
    right: 12px !important;
    top: 12px !important;
  }

  .facilities-arrow,
  .knls-hero-arrow {
    width: 40px !important;
    height: 40px !important;
  }
}

/* Mobile forms */
@media (max-width: 768px) {
  .contact-form-grid,
  .contact-message-layout {
    grid-template-columns: 1fr !important;
  }

  .contact-form--compact {
    padding: 16px !important;
  }

  .form-row label {
    font-size: .86rem !important;
    margin-bottom: 5px !important;
  }

  input,
  select,
  textarea,
  .contact-form--compact input,
  .contact-form--compact select,
  .contact-form--compact textarea {
    min-height: 42px !important;
    padding: 10px 12px !important;
    border-radius: 12px !important;
  }

  .contact-form--compact textarea {
    min-height: 92px !important;
  }

  .contact-form--compact button[type="submit"] {
    width: auto !important;
    min-width: 132px !important;
    max-width: max-content !important;
    min-height: 40px !important;
    padding: 0 16px !important;
    justify-self: start !important;
  }
}

/* Footer mobile cleanup */
@media (max-width: 768px) {
  .site-footer--compact .compact-footer {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    padding-top: 22px !important;
    padding-bottom: 16px !important;
  }

  .compact-footer__logo .brand__text {
    display: inline-block !important;
  }

  .compact-footer__nav h3,
  .compact-footer__connect h3 {
    margin-bottom: 6px !important;
  }

  .compact-footer__nav li {
    margin-bottom: 3px !important;
  }

  .compact-footer__newsletter {
    grid-template-columns: 1fr !important;
  }

  .compact-footer__bottom {
    align-items: flex-start !important;
    gap: 8px !important;
  }
}

/* Small phone refinements */
@media (max-width: 420px) {
  .container {
    width: min(100% - 24px, 1180px) !important;
  }

  .page-hero {
    padding: 32px 0 !important;
  }

  .section {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .knls-hero-carousel,
  .knls-hero-message-panel,
  .knls-hero-slide__content {
    min-height: 500px !important;
  }

  .knls-hero-message-panel {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .page-hero h1,
  .knls-hero-message-panel h1,
  .knls-hero-slide__content h1 {
    font-size: clamp(2.05rem, 11vw, 3rem) !important;
  }

  .management-card__photo,
  .board-management-card .management-card__photo {
    width: 132px !important;
    height: 132px !important;
  }

  .homepage-service-card img,
  .contact-location-card__image,
  .contact-location-card__image img {
    height: 155px !important;
  }
}


/* =========================================================
   Mobile accessibility button position fix
   Prevents the accessibility button from overlapping the hamburger menu.
   On mobile, the button sits below the sticky navigation bar.
   ========================================================= */

@media (max-width: 820px) {
  .accessibility-widget {
    top: 72px !important;
    right: 12px !important;
    bottom: auto !important;
    z-index: 100001 !important;
  }

  .accessibility-toggle {
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    border-radius: 999px !important;
  }

  .accessibility-toggle span:last-child {
    display: none !important;
  }

  .accessibility-panel {
    top: 52px !important;
    right: 0 !important;
    bottom: auto !important;
    width: min(320px, calc(100vw - 24px)) !important;
  }

  .accessibility-tutorial-card {
    top: 128px !important;
    right: 12px !important;
    left: 12px !important;
    width: auto !important;
  }

  .accessibility-tutorial-card::before {
    right: 22px !important;
  }
}

@media (max-width: 420px) {
  .accessibility-widget {
    top: 68px !important;
    right: 10px !important;
  }

  .accessibility-panel {
    right: 0 !important;
    width: min(310px, calc(100vw - 20px)) !important;
  }
}


/* =========================================================
   Official-style Instagram app icon
   Replaces the text placeholder icon with a gradient app-style SVG.
   ========================================================= */

.instagram-icon-wrap,
.social-instagram span.instagram-icon-wrap {
  overflow: hidden;
  background: transparent !important;
  padding: 0 !important;
}

.instagram-app-icon {
  width: 100%;
  height: 100%;
  display: block;
  border-radius: inherit;
  object-fit: cover;
}

.compact-footer__social a .instagram-app-icon {
  width: 34px;
  height: 34px;
  border-radius: 11px;
}

.home-social-section .social-connect-card .instagram-app-icon,
.contact-social-section .social-connect-card .instagram-app-icon,
.social-connect-card .instagram-app-icon {
  width: 100%;
  height: 100%;
  border-radius: inherit;
}

body.high-contrast-mode .instagram-app-icon {
  border: 2px solid #ffffff;
  filter: none !important;
}

body.dark-mode .instagram-app-icon {
  filter: none !important;
}


/* =========================================================
   Desktop homepage slideshow reliability fix
   Ensures the hero carousel runs correctly on desktop browsers.
   ========================================================= */

.knls-hero-carousel.is-js-ready .knls-hero-slide {
  animation: none !important;
  opacity: 0 !important;
  transition: opacity .72s ease !important;
  pointer-events: none !important;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide.is-active {
  opacity: 1 !important;
  pointer-events: auto !important;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide img {
  width: 100% !important;
  height: 100% !important;
  min-height: 100% !important;
  object-fit: cover !important;
  object-position: center !important;
}

.knls-hero-carousel.is-autoplaying .knls-hero-progress span {
  animation: knlsHeroProgress 4s linear infinite !important;
}

/* Do not let reduced-motion fallback rules freeze the JS-controlled desktop carousel. */
.knls-hero-carousel.is-js-ready .knls-hero-slide:first-child {
  opacity: 0 !important;
}

.knls-hero-carousel.is-js-ready .knls-hero-slide:first-child.is-active {
  opacity: 1 !important;
}


/* =========================================================
   Mobile content compaction v2
   Further reduces oversized content areas on phones/tablets while keeping content readable.
   ========================================================= */

@media (max-width: 900px) {
  .section,
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section,
  .contact-social-section,
  .contact-social-section--compact,
  .management-section,
  .board-section,
  .partners-section,
  .awards-section,
  .careers-section,
  .newsletter-section,
  .facilities-click-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .section-title,
  .compact-title {
    margin-bottom: 18px !important;
  }

  .section-title h2,
  .contact-message-intro h2,
  .homepage-final-card h2,
  .management-section h2,
  .board-section h2 {
    font-size: clamp(1.45rem, 6vw, 2.15rem) !important;
    line-height: 1.12 !important;
  }

  .section-title p,
  .homepage-final-card p,
  .contact-message-intro p,
  .contact-location-card p,
  .content-panel p,
  .side-panel p {
    font-size: .92rem !important;
    line-height: 1.48 !important;
  }

  .content-panel,
  .side-panel,
  .cta-card,
  .contact-info,
  .contact-form,
  .contact-form--compact,
  .homepage-final-card,
  .homepage-service-card,
  .management-card,
  .board-management-card,
  .contact-location-card,
  .contact-quick-card,
  .contact-message-intro,
  .contact-social-panel,
  .partner-card,
  .document-card,
  .download-card,
  .news-card,
  .event-card,
  .resource-card,
  .faq-card,
  .link-card,
  .feature-card {
    padding: 15px !important;
    border-radius: 16px !important;
  }

  .homepage-service-card div,
  .contact-location-card__body,
  .management-card .management-card__content,
  .board-management-card .management-card__content {
    padding: 14px !important;
  }

  .homepage-service-card img,
  .homepage-final-feature-image img,
  .contact-location-card__image,
  .contact-location-card__image img,
  .partner-card__logo,
  .news-card img,
  .event-card img,
  .resource-card img {
    height: 150px !important;
    min-height: 150px !important;
  }

  .contact-map,
  .contact-map iframe {
    height: 190px !important;
    min-height: 190px !important;
  }

  .management-card__photo,
  .board-management-card .management-card__photo {
    width: 132px !important;
    height: 132px !important;
    margin-bottom: 10px !important;
  }

  .management-card h3,
  .board-management-card .management-card__content h3,
  .homepage-service-card h3,
  .contact-location-card__header h3 {
    font-size: 1rem !important;
    line-height: 1.22 !important;
    margin-bottom: 6px !important;
  }

  .management-card p,
  .board-management-card .management-card__content p,
  .homepage-service-card p,
  .contact-detail-list span,
  .contact-detail-list a {
    font-size: .84rem !important;
    line-height: 1.35 !important;
  }

  .contact-detail-list {
    gap: 5px !important;
    margin-bottom: 10px !important;
  }

  .contact-detail-list li {
    padding-bottom: 6px !important;
  }

  .contact-quick-card {
    min-height: auto !important;
    grid-template-columns: 36px minmax(0, 1fr) !important;
    gap: 10px !important;
  }

  .contact-quick-card > span {
    width: 36px !important;
    height: 36px !important;
    border-radius: 12px !important;
  }

  .social-connect-card,
  .contact-social-section--compact .social-connect-card,
  .home-social-section .social-connect-card {
    min-height: 64px !important;
    padding: 10px 12px !important;
    border-radius: 14px !important;
  }

  .social-connect-card span,
  .contact-social-section--compact .social-connect-card span,
  .home-social-section .social-connect-card span {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
  }

  .facilities-click-main,
  .library-slideshow-card {
    min-height: 280px !important;
    aspect-ratio: 4 / 3 !important;
  }

  .visually-impaired-highlight__image img {
    height: 180px !important;
    min-height: 180px !important;
  }

  .page-hero {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .page-hero h1 {
    font-size: clamp(2rem, 9vw, 3rem) !important;
  }

  .page-hero p {
    font-size: .92rem !important;
  }
}

@media (max-width: 520px) {
  .container {
    width: min(100% - 22px, 1180px) !important;
  }

  .section,
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section,
  .contact-social-section,
  .management-section,
  .board-section {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  .content-panel,
  .side-panel,
  .cta-card,
  .contact-info,
  .contact-form,
  .contact-form--compact,
  .homepage-final-card,
  .homepage-service-card,
  .management-card,
  .board-management-card,
  .contact-location-card,
  .contact-quick-card,
  .contact-message-intro,
  .contact-social-panel {
    padding: 13px !important;
  }

  .homepage-service-card img,
  .homepage-final-feature-image img,
  .contact-location-card__image,
  .contact-location-card__image img {
    height: 135px !important;
    min-height: 135px !important;
  }

  .contact-map,
  .contact-map iframe {
    height: 170px !important;
    min-height: 170px !important;
  }

  .management-card__photo,
  .board-management-card .management-card__photo {
    width: 118px !important;
    height: 118px !important;
  }

  .knls-hero-message-panel {
    padding-bottom: 245px !important;
  }

  .knls-hero-quick-access {
    bottom: 64px !important;
  }
}


/* =========================================================
   Screen reader mode feedback and read-aloud support
   Makes the Screen reader mode action visibly and audibly confirm that it works.
   ========================================================= */

.accessibility-toast {
  position: fixed;
  right: 18px;
  top: 76px;
  z-index: 100003;
  max-width: min(360px, calc(100vw - 32px));
  padding: 12px 16px;
  border-radius: 16px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 18px 54px rgba(0, 0, 0, .26);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity .25s ease, transform .25s ease;
}

.accessibility-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
}

body.is-reading-page .accessibility-toggle {
  background: #0f766e !important;
  color: #ffffff !important;
}

body.is-reading-page .accessibility-toggle::after {
  content: "";
  position: absolute;
  inset: -7px;
  border-radius: inherit;
  border: 2px solid rgba(15, 118, 110, .45);
  animation: accessibilityReadingPulse 1.2s ease-in-out infinite;
}

@keyframes accessibilityReadingPulse {
  0%, 100% {
    transform: scale(1);
    opacity: .55;
  }
  50% {
    transform: scale(1.12);
    opacity: .08;
  }
}

body.screen-reader-mode .accessibility-panel [data-access-action="screen-reader"] {
  background: #0f766e !important;
  color: #ffffff !important;
  border-color: #0f766e !important;
}

body.screen-reader-mode main :where(a, button, input, textarea, select, summary) {
  scroll-margin-top: 120px;
}

body.screen-reader-mode :where(a, button, input, textarea, select, summary):focus-visible {
  outline: 4px solid #FE5000 !important;
  outline-offset: 4px !important;
}

@media (max-width: 820px) {
  .accessibility-toast {
    top: 126px;
    right: 12px;
  }
}


/* =========================================================
   Kenya National Bibliography official downloads
   Groups KNB resources by official bibliography year and adds download actions.
   ========================================================= */

.knb-official-resources {
  scroll-margin-top: 120px;
}

.knb-resources-header {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}

.knb-resources-header h2 {
  color: #10069F;
  margin-bottom: 8px;
}

.knb-resources-header p {
  max-width: 780px;
}

.knb-summary-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 22px 0;
}

.knb-summary-strip article {
  padding: 18px;
  border-radius: 22px;
  background: linear-gradient(135deg, #f7f7ff, #ffffff);
  border: 1px solid #e4e4f2;
  box-shadow: 0 12px 36px rgba(36, 71, 143, .08);
}

.knb-summary-strip strong {
  display: block;
  color: #FE5000;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  line-height: 1;
}

.knb-summary-strip span {
  display: block;
  margin-top: 6px;
  color: #10069F;
  font-weight: 900;
}

.knb-year-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 14px;
  margin-bottom: 22px;
  border-radius: 22px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
}

.knb-year-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #ffffff;
  color: #10069F;
  border: 1px solid #e4e4f2;
  font-weight: 900;
  text-decoration: none;
  font-size: .86rem;
}

.knb-year-nav a:hover,
.knb-year-nav a:focus-visible {
  background: #FE5000;
  color: #ffffff;
  border-color: #FE5000;
}

.knb-year-list {
  display: grid;
  gap: 24px;
}

.knb-year-panel {
  scroll-margin-top: 120px;
  padding: 20px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 18px 54px rgba(36, 71, 143, .09);
}

.knb-year-panel__header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 16px;
  margin-bottom: 16px;
  padding-bottom: 12px;
  border-bottom: 1px solid #edf0f7;
}

.knb-year-panel__header h3 {
  margin: 0;
  color: #10069F;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  letter-spacing: -.04em;
}

.knb-year-panel__header > span {
  display: inline-flex;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
  white-space: nowrap;
}

.knb-official-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.knb-official-card {
  display: grid;
  grid-template-columns: 118px minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
  padding: 14px;
  border-radius: 22px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
}

.knb-official-card figure {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  background: #10069F;
  box-shadow: 0 12px 30px rgba(36, 71, 143, .16);
}

.knb-official-card img {
  width: 100%;
  height: 100%;
  min-height: 154px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.knb-official-card figcaption {
  position: absolute;
  left: 8px;
  bottom: 8px;
  padding: 5px 8px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .7rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .05em;
}

.knb-official-card__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.knb-card-label {
  margin: 0 0 4px;
  color: #FE5000;
  font-size: .76rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.knb-official-card h4 {
  margin: 0 0 7px;
  color: #10069F;
  font-size: 1.03rem;
  line-height: 1.2;
}

.knb-official-card p {
  margin: 0 0 12px;
  color: #65756c;
  font-size: .9rem;
  line-height: 1.4;
}

.knb-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: auto;
}

.knb-card-actions .btn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: .82rem;
}

body.dark-mode .knb-summary-strip article,
body.dark-mode .knb-year-nav,
body.dark-mode .knb-year-panel,
body.dark-mode .knb-official-card {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode .knb-resources-header h2,
body.dark-mode .knb-year-panel__header h3,
body.dark-mode .knb-official-card h4,
body.dark-mode .knb-summary-strip span,
body.dark-mode .knb-year-nav a {
  color: #f8fafc !important;
}

body.dark-mode .knb-official-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .knb-year-nav a {
  background: #172642 !important;
  border-color: #31415f !important;
}

body.high-contrast-mode .knb-summary-strip article,
body.high-contrast-mode .knb-year-nav,
body.high-contrast-mode .knb-year-panel,
body.high-contrast-mode .knb-official-card {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast-mode .knb-official-card h4,
body.high-contrast-mode .knb-official-card p,
body.high-contrast-mode .knb-year-panel__header h3,
body.high-contrast-mode .knb-resources-header h2 {
  color: #ffffff !important;
}

@media (max-width: 900px) {
  .knb-summary-strip,
  .knb-official-grid {
    grid-template-columns: 1fr;
  }

  .knb-year-panel {
    padding: 16px;
    border-radius: 22px;
  }
}

@media (max-width: 560px) {
  .knb-resources-header {
    display: block;
  }

  .knb-summary-strip {
    gap: 10px;
  }

  .knb-summary-strip article {
    padding: 14px;
    border-radius: 18px;
  }

  .knb-year-nav {
    padding: 10px;
    max-height: 170px;
    overflow-y: auto;
  }

  .knb-year-panel__header {
    align-items: start;
    flex-direction: column;
  }

  .knb-official-card {
    grid-template-columns: 90px minmax(0, 1fr);
    gap: 12px;
    padding: 12px;
    border-radius: 18px;
  }

  .knb-official-card img {
    min-height: 122px;
  }

  .knb-card-actions {
    display: grid;
    grid-template-columns: 1fr;
  }

  .knb-card-actions .btn {
    width: 100%;
    justify-content: center;
  }
}


/* =========================================================
   Compact Kenya National Bibliography browser redesign
   Searchable, filterable archive with preview and download actions.
   ========================================================= */

.knb-compact-hero {
  background:
    radial-gradient(circle at 92% 12%, rgba(255, 89, 0, .28), transparent 26%),
    linear-gradient(135deg, #10069F, #06005C) !important;
}

.knb-browser-section {
  background:
    radial-gradient(circle at 0% 0%, rgba(255,89,0,.10), transparent 28%),
    #f7f7ff;
}

.knb-browser-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, .72fr);
  gap: 24px;
  align-items: end;
  margin-bottom: 20px;
}

.knb-browser-intro h2 {
  margin-bottom: 8px;
  color: #10069F;
  font-size: clamp(1.8rem, 4vw, 3rem);
  letter-spacing: -.05em;
}

.knb-browser-intro p {
  max-width: 820px;
}

.knb-compact-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.knb-compact-stats article {
  padding: 14px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 12px 32px rgba(36, 71, 143, .08);
}

.knb-compact-stats strong {
  display: block;
  color: #FE5000;
  font-size: 1.3rem;
  line-height: 1.1;
}

.knb-compact-stats span {
  display: block;
  margin-top: 4px;
  color: #10069F;
  font-size: .78rem;
  font-weight: 900;
  line-height: 1.25;
}

.knb-browser-toolbar {
  position: sticky;
  top: 86px;
  z-index: 20;
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: center;
  padding: 14px;
  margin-bottom: 14px;
  border-radius: 22px;
  background: rgba(255, 255, 255, .94);
  border: 1px solid #e4e4f2;
  box-shadow: 0 16px 48px rgba(36, 71, 143, .10);
  backdrop-filter: blur(10px);
}

.knb-browser-toolbar input {
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  border: 1px solid #d9deed;
  border-radius: 999px;
  background: #ffffff;
  color: #1f2937;
  font-weight: 700;
}

.knb-decade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knb-decade-tabs button,
.knb-year-chip {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #e4e4f2;
  border-radius: 999px;
  background: #ffffff;
  color: #10069F;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.knb-decade-tabs button:hover,
.knb-decade-tabs button:focus-visible,
.knb-decade-tabs button.is-active,
.knb-year-chip:hover,
.knb-year-chip:focus-visible,
.knb-year-chip.is-active {
  background: #FE5000;
  border-color: #FE5000;
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}

.knb-year-strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 0 0 12px;
  margin-bottom: 8px;
  scrollbar-width: thin;
}

.knb-year-chip {
  flex: 0 0 auto;
}

.knb-browser-layout {
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(360px, .72fr);
  gap: 20px;
  align-items: start;
}

.knb-browser-list {
  min-width: 0;
}

.knb-result-count {
  margin-bottom: 10px;
  color: #65756c;
  font-weight: 800;
}

.knb-result-count strong {
  color: #10069F;
}

.knb-card-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.knb-browser-card {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 12px;
  padding: 12px;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 12px 34px rgba(36, 71, 143, .08);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.knb-browser-card:hover,
.knb-browser-card.is-active {
  transform: translateY(-2px);
  border-color: rgba(255, 89, 0, .45);
  box-shadow: 0 18px 42px rgba(36, 71, 143, .13);
}

.knb-browser-card.is-hidden {
  display: none !important;
}

.knb-browser-card__year {
  display: grid;
  place-items: center;
  min-height: 92px;
  border-radius: 16px;
  background: linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
  font-size: 1.2rem;
  font-weight: 900;
}

.knb-browser-card__body {
  min-width: 0;
}

.knb-card-label {
  margin: 0 0 3px;
  color: #FE5000;
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

.knb-browser-card h3 {
  margin: 0 0 5px;
  color: #10069F;
  font-size: 1rem;
  line-height: 1.2;
}

.knb-browser-card p {
  margin: 0 0 8px;
  color: #65756c;
  font-size: .84rem;
  line-height: 1.35;
}

.knb-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.knb-card-meta span {
  display: inline-flex;
  padding: 4px 7px;
  border-radius: 999px;
  background: #f7f7ff;
  color: #10069F;
  font-size: .7rem;
  font-weight: 900;
}

.knb-card-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knb-card-actions .btn {
  min-height: 36px;
  padding: 7px 11px;
  font-size: .8rem;
}

.knb-preview-panel {
  position: sticky;
  top: 170px;
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 18px 54px rgba(36, 71, 143, .12);
}

.knb-preview-panel__header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
  padding: 16px;
  border-bottom: 1px solid #edf0f7;
}

.knb-preview-panel__header h2 {
  margin: 0;
  color: #10069F;
  font-size: 1.1rem;
  line-height: 1.25;
}

.knb-preview-panel__header .btn {
  min-height: 38px;
  padding: 8px 12px;
  font-size: .82rem;
  white-space: nowrap;
}

.knb-preview-panel iframe {
  width: 100%;
  height: min(62vh, 560px);
  display: block;
  border: 0;
  background: #edf0f7;
}

.knb-preview-help {
  margin: 0;
  padding: 12px 16px 16px;
  color: #65756c;
  font-size: .86rem;
  line-height: 1.4;
}

.knb-next-batch-note {
  margin-top: 20px;
  padding: 18px;
  border-radius: 22px;
  background:
    radial-gradient(circle at 100% 0%, rgba(255, 89, 0, .13), transparent 32%),
    #ffffff;
  border: 1px solid #e4e4f2;
}

.knb-next-batch-note h3 {
  margin: 0 0 6px;
  color: #10069F;
}

.knb-next-batch-note p:last-child {
  margin-bottom: 0;
}

body.dark-mode .knb-browser-section,
body.dark-mode .knb-browser-toolbar,
body.dark-mode .knb-compact-stats article,
body.dark-mode .knb-browser-card,
body.dark-mode .knb-preview-panel,
body.dark-mode .knb-next-batch-note {
  background: #101b2f !important;
  border-color: #31415f !important;
  color: #f8fafc !important;
}

body.dark-mode .knb-browser-intro h2,
body.dark-mode .knb-compact-stats span,
body.dark-mode .knb-browser-card h3,
body.dark-mode .knb-result-count strong,
body.dark-mode .knb-preview-panel__header h2,
body.dark-mode .knb-next-batch-note h3 {
  color: #f8fafc !important;
}

body.dark-mode .knb-browser-card p,
body.dark-mode .knb-result-count,
body.dark-mode .knb-preview-help {
  color: #cbd5e1 !important;
}

body.dark-mode .knb-browser-toolbar input,
body.dark-mode .knb-decade-tabs button,
body.dark-mode .knb-year-chip,
body.dark-mode .knb-card-meta span {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.high-contrast-mode .knb-browser-section,
body.high-contrast-mode .knb-browser-toolbar,
body.high-contrast-mode .knb-compact-stats article,
body.high-contrast-mode .knb-browser-card,
body.high-contrast-mode .knb-preview-panel,
body.high-contrast-mode .knb-next-batch-note,
body.high-contrast-mode .knb-card-meta span {
  background: #000000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

body.high-contrast-mode .knb-browser-card__year {
  background: #000000 !important;
  border: 2px solid #ffffff !important;
  color: #ffff00 !important;
}

@media (max-width: 1100px) {
  .knb-browser-layout {
    grid-template-columns: 1fr;
  }

  .knb-preview-panel {
    position: relative;
    top: auto;
  }

  .knb-preview-panel iframe {
    height: 420px;
  }
}

@media (max-width: 760px) {
  .knb-browser-intro {
    grid-template-columns: 1fr;
  }

  .knb-compact-stats {
    grid-template-columns: repeat(3, 1fr);
  }

  .knb-browser-toolbar {
    position: relative;
    top: auto;
    grid-template-columns: 1fr;
    padding: 12px;
  }

  .knb-card-grid {
    grid-template-columns: 1fr;
  }

  .knb-browser-card {
    grid-template-columns: 64px minmax(0, 1fr);
  }

  .knb-browser-card__year {
    min-height: 84px;
    font-size: 1.05rem;
  }

  .knb-preview-panel iframe {
    height: 340px;
  }
}

@media (max-width: 520px) {
  .knb-compact-stats {
    grid-template-columns: 1fr;
  }

  .knb-browser-card {
    grid-template-columns: 1fr;
  }

  .knb-browser-card__year {
    min-height: 52px;
  }

  .knb-card-actions,
  .knb-preview-panel__header {
    display: grid;
    grid-template-columns: 1fr;
  }

  .knb-card-actions .btn,
  .knb-preview-panel__header .btn {
    width: 100%;
    justify-content: center;
  }

  .knb-preview-panel iframe {
    height: 280px;
  }
}


/* =========================================================
   KNB document-type filter update
   Styles Final / Preliminary Pages filters in the compact bibliography browser.
   ========================================================= */

.knb-browser-toolbar {
  grid-template-columns: minmax(220px, 1fr) auto auto;
}

.knb-type-tabs,
.knb-decade-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.knb-type-tabs button,
.knb-decade-tabs button,
.knb-year-chip {
  min-height: 38px;
  padding: 7px 12px;
  border: 1px solid #e4e4f2;
  border-radius: 999px;
  background: #ffffff;
  color: #10069F;
  font-weight: 900;
  cursor: pointer;
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
}

.knb-type-tabs button:hover,
.knb-type-tabs button:focus-visible,
.knb-type-tabs button.is-active,
.knb-decade-tabs button:hover,
.knb-decade-tabs button:focus-visible,
.knb-decade-tabs button.is-active,
.knb-year-chip:hover,
.knb-year-chip:focus-visible,
.knb-year-chip.is-active {
  background: #FE5000;
  border-color: #FE5000;
  color: #ffffff;
  transform: translateY(-1px);
  outline: none;
}

.knb-browser-card__year {
  align-content: center;
  gap: 2px;
}

.knb-browser-card__year strong {
  color: #ffffff;
  font-size: 1.15rem;
  line-height: 1;
}

.knb-browser-card__year span {
  color: rgba(255,255,255,.84);
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .06em;
}

body.dark-mode .knb-type-tabs button,
body.dark-mode .knb-decade-tabs button,
body.dark-mode .knb-year-chip {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode .knb-type-tabs button.is-active,
body.dark-mode .knb-decade-tabs button.is-active,
body.dark-mode .knb-year-chip.is-active {
  background: #FE5000 !important;
  color: #08111f !important;
  border-color: #FE5000 !important;
}

body.high-contrast-mode .knb-type-tabs button,
body.high-contrast-mode .knb-decade-tabs button,
body.high-contrast-mode .knb-year-chip {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast-mode .knb-type-tabs button.is-active,
body.high-contrast-mode .knb-decade-tabs button.is-active,
body.high-contrast-mode .knb-year-chip.is-active {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
}

@media (max-width: 980px) {
  .knb-browser-toolbar {
    grid-template-columns: 1fr;
  }
}


/* =========================================================
   Sitewide whitespace reduction
   Tightens oversized vertical gaps, card padding and grid spacing
   across the website while keeping content readable.
   ========================================================= */

/* General vertical rhythm */
.section,
.page-section,
.content-section,
.about-section,
.services-section,
.locations-section,
.news-section,
.events-section,
.resources-section,
.documents-section,
.downloads-section,
.management-section,
.board-section,
.partners-section,
.awards-section,
.career-section,
.newsletter-section,
.contact-overview-section,
.contact-locations-section,
.contact-message-section,
.contact-social-section,
.contact-social-section--compact,
.knb-browser-section,
.facilities-click-section {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
}

/* Reduce large page banners */
.page-hero {
  padding-top: 56px !important;
  padding-bottom: 56px !important;
}

.page-hero__inner {
  gap: 22px !important;
}

.page-hero h1 {
  margin-bottom: 12px !important;
}

.page-hero p {
  margin-bottom: 0 !important;
}

/* Section headings */
.section-title,
.compact-title {
  margin-bottom: 26px !important;
}

.section-title h2,
.compact-title h2 {
  margin-bottom: 8px !important;
}

.section-title p,
.compact-title p {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Reduce common grid gaps */
.homepage-service-grid,
.card-grid,
.feature-grid,
.gallery-grid,
.management-grid,
.board-management-grid,
.contact-quick-grid,
.contact-location-grid,
.social-connect-grid,
.partner-grid,
.partners-grid,
.document-grid,
.download-grid,
.resource-grid,
.news-grid,
.events-grid,
.knb-card-grid,
.knb-year-list,
.facilities-click-layout {
  gap: 18px !important;
}

/* Tighter cards and panels */
.card,
.content-card,
.service-card,
.homepage-service-card,
.homepage-final-card,
.location-card,
.news-card,
.event-card,
.document-card,
.download-card,
.resource-card,
.management-card,
.board-management-card,
.contact-quick-card,
.contact-location-card,
.contact-message-intro,
.contact-form,
.contact-form--compact,
.contact-social-panel,
.social-connect-card,
.compact-footer,
.recognition-card,
.partner-card,
.career-card,
.accordion,
.accordion-item,
.tab-panel,
.feature-card,
.stat-card,
.quick-access-card,
.visually-impaired-highlight,
.table-wrap,
.table-card,
.org-card,
.team-card,
.service-content-panel,
.service-detail-panel,
.service-contact-card,
.knb-browser-card,
.knb-preview-panel,
.knb-next-batch-note {
  padding: 20px !important;
  border-radius: 22px !important;
}

/* Keep image cards from adding excessive height */
.homepage-service-card img,
.news-card img,
.event-card img,
.resource-card img,
.contact-location-card__image,
.contact-location-card__image img,
.homepage-final-feature-image img {
  max-height: 230px !important;
}

/* Tighter text spacing inside content-heavy pages */
main p,
main ul,
main ol {
  margin-top: 0;
}

main p + p,
main p + ul,
main p + ol,
main ul + p,
main ol + p,
main h3 + p,
main h2 + p {
  margin-top: 10px !important;
}

main h2,
main h3,
main h4 {
  margin-top: 20px !important;
  margin-bottom: 10px !important;
}

main h2:first-child,
main h3:first-child,
main h4:first-child {
  margin-top: 0 !important;
}

.check-list,
.service-detail-list {
  gap: 8px !important;
  margin-bottom: 16px !important;
}

.service-chip-grid {
  gap: 8px !important;
  margin-top: 12px !important;
  margin-bottom: 18px !important;
}

/* Service pages */
.service-layout,
.service-page-layout,
.service-content-grid,
.service-block,
.service-section {
  gap: 18px !important;
}

.service-block {
  margin-bottom: 24px !important;
}

.service-block:last-child {
  margin-bottom: 0 !important;
}

.service-block h2 {
  margin-bottom: 10px !important;
}

.service-block p:last-child,
.service-block ul:last-child,
.service-block ol:last-child {
  margin-bottom: 0 !important;
}

/* Details / accordion content */
details {
  margin-bottom: 10px !important;
}

details summary {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

details > div,
details > ul,
details > p {
  padding-top: 10px !important;
}

/* Homepage hero remains spacious but less oversized */
.knls-hero-carousel,
.knls-hero-message-panel {
  min-height: min(680px, calc(100vh - 60px)) !important;
}

.knls-hero-message-panel {
  padding-top: 82px !important;
  padding-bottom: 120px !important;
}

.knls-hero-message-panel h1 {
  margin-bottom: 14px !important;
}

.knls-hero-message-actions {
  margin-top: 20px !important;
}

/* Quick access card */
.knls-hero-quick-access {
  padding: 20px !important;
  border-radius: 22px !important;
}

.knls-hero-quick-access h2 {
  margin-bottom: 10px !important;
}

.knls-hero-quick-access__links {
  gap: 8px !important;
}

/* Facilities and preview panels */
.facilities-click-main {
  min-height: 460px !important;
}

.visually-impaired-highlight--facilities {
  min-height: 460px !important;
}

.knb-browser-intro {
  margin-bottom: 16px !important;
}

.knb-browser-toolbar {
  margin-bottom: 12px !important;
  padding: 12px !important;
}

.knb-year-strip {
  padding-bottom: 8px !important;
  margin-bottom: 6px !important;
}

.knb-preview-panel__header {
  padding: 14px !important;
}

.knb-preview-help {
  padding: 10px 14px 14px !important;
}

/* Contact page */
.contact-location-grid {
  gap: 16px !important;
}

.contact-location-card__body {
  padding: 18px !important;
}

.contact-detail-list {
  gap: 7px !important;
  margin-bottom: 12px !important;
}

.contact-detail-list li {
  padding-bottom: 7px !important;
}

.contact-map,
.contact-map iframe {
  min-height: 220px !important;
}

.contact-service-tags {
  margin-top: 12px !important;
}

/* Compact footer even further */
.site-footer--compact .compact-footer {
  padding-top: 22px !important;
  padding-bottom: 16px !important;
  gap: 18px !important;
}

.compact-footer__bottom {
  padding-top: 10px !important;
  padding-bottom: 10px !important;
}

/* Tablet */
@media (max-width: 900px) {
  .section,
  .page-section,
  .content-section,
  .about-section,
  .services-section,
  .locations-section,
  .news-section,
  .events-section,
  .resources-section,
  .documents-section,
  .downloads-section,
  .management-section,
  .board-section,
  .partners-section,
  .awards-section,
  .career-section,
  .newsletter-section,
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section,
  .contact-social-section,
  .contact-social-section--compact,
  .knb-browser-section,
  .facilities-click-section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }

  .page-hero {
    padding-top: 38px !important;
    padding-bottom: 38px !important;
  }

  .section-title,
  .compact-title {
    margin-bottom: 18px !important;
  }

  .card,
  .content-card,
  .service-card,
  .homepage-service-card,
  .homepage-final-card,
  .location-card,
  .news-card,
  .event-card,
  .document-card,
  .download-card,
  .resource-card,
  .management-card,
  .board-management-card,
  .contact-quick-card,
  .contact-location-card,
  .contact-message-intro,
  .contact-form,
  .contact-form--compact,
  .contact-social-panel,
  .social-connect-card,
  .partner-card,
  .career-card,
  .feature-card,
  .stat-card,
  .quick-access-card,
  .visually-impaired-highlight,
  .service-content-panel,
  .service-detail-panel,
  .service-contact-card,
  .knb-browser-card,
  .knb-preview-panel,
  .knb-next-batch-note {
    padding: 15px !important;
    border-radius: 18px !important;
  }

  .homepage-service-grid,
  .card-grid,
  .feature-grid,
  .gallery-grid,
  .management-grid,
  .board-management-grid,
  .contact-quick-grid,
  .contact-location-grid,
  .social-connect-grid,
  .partner-grid,
  .partners-grid,
  .document-grid,
  .download-grid,
  .resource-grid,
  .news-grid,
  .events-grid,
  .knb-card-grid,
  .facilities-click-layout {
    gap: 14px !important;
  }

  .knls-hero-carousel,
  .knls-hero-message-panel {
    min-height: 540px !important;
  }

  .knls-hero-message-panel {
    padding-top: 64px !important;
    padding-bottom: 220px !important;
  }

  .facilities-click-main,
  .visually-impaired-highlight--facilities {
    min-height: 340px !important;
  }
}

/* Phones */
@media (max-width: 560px) {
  .section,
  .page-section,
  .content-section,
  .contact-overview-section,
  .contact-locations-section,
  .contact-message-section,
  .contact-social-section,
  .management-section,
  .board-section,
  .knb-browser-section,
  .facilities-click-section {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  .page-hero {
    padding-top: 30px !important;
    padding-bottom: 30px !important;
  }

  .section-title,
  .compact-title {
    margin-bottom: 14px !important;
  }

  .section-title h2,
  .compact-title h2 {
    margin-bottom: 6px !important;
  }

  .card,
  .content-card,
  .service-card,
  .homepage-service-card,
  .homepage-final-card,
  .management-card,
  .board-management-card,
  .contact-quick-card,
  .contact-location-card,
  .contact-message-intro,
  .contact-form,
  .contact-form--compact,
  .contact-social-panel,
  .service-content-panel,
  .service-detail-panel,
  .service-contact-card,
  .knb-browser-card,
  .knb-preview-panel,
  .knb-next-batch-note {
    padding: 12px !important;
    border-radius: 16px !important;
  }

  main h2,
  main h3,
  main h4 {
    margin-top: 16px !important;
    margin-bottom: 8px !important;
  }

  main p + p,
  main p + ul,
  main p + ol,
  main ul + p,
  main ol + p,
  main h3 + p,
  main h2 + p {
    margin-top: 8px !important;
  }

  .homepage-service-card img,
  .homepage-final-feature-image img,
  .contact-location-card__image,
  .contact-location-card__image img,
  .news-card img,
  .event-card img,
  .resource-card img {
    height: 140px !important;
    min-height: 140px !important;
  }

  .contact-map,
  .contact-map iframe {
    min-height: 170px !important;
    height: 170px !important;
  }

  .knb-preview-panel iframe {
    height: 260px !important;
  }

  .knls-hero-carousel,
  .knls-hero-message-panel {
    min-height: 500px !important;
  }

  .knls-hero-message-panel {
    padding-bottom: 235px !important;
  }
}


/* =========================================================
   Requested homepage updates while retaining the previous style
   ========================================================= */

/* Hero quick access now shows a refined v.tabu membership panel. */
.knls-hero-vtabu-prices {
  width: min(390px, calc(100vw - 48px));
  padding: 22px !important;
  border-radius: 28px !important;
  background:
    radial-gradient(circle at top right, rgba(255, 89, 0, 0.18), transparent 34%),
    linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(245, 248, 255, 0.97));
  border: 1px solid rgba(36, 71, 143, 0.10);
  box-shadow: 0 24px 65px rgba(20, 27, 52, 0.22);
}

.knls-hero-vtabu-prices__brand {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 12px;
  padding: 10px 14px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.9);
  border: 1px solid rgba(36, 71, 143, 0.08);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.85);
}

.knls-hero-vtabu-prices__brand img {
  display: block;
  max-width: 180px;
  width: 100%;
  height: auto;
}

.knls-hero-vtabu-prices h2 {
  margin-bottom: 8px !important;
}

.knls-hero-vtabu-prices__intro {
  margin: 0 0 14px;
  color: #546173;
  font-size: 0.95rem;
  line-height: 1.55;
}

.knls-hero-quick-access__prices {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 6px 0 16px;
}

.knls-hero-quick-access__prices article {
  position: relative;
  overflow: hidden;
  display: grid;
  align-content: center;
  min-height: 82px;
  padding: 14px 14px;
  border-radius: 18px;
  background: linear-gradient(135deg, #10069F, #10069F);
  border: 1px solid rgba(36, 71, 143, .18);
  box-shadow: 0 14px 30px rgba(36, 71, 143, .18);
}

.knls-hero-quick-access__prices article::after {
  content: '';
  position: absolute;
  inset: auto -15px -18px auto;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.09);
}

.knls-hero-quick-access__prices article:last-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, #FE5000, #FE5000);
}

.knls-hero-quick-access__prices strong,
.knls-hero-quick-access__prices span {
  color: #ffffff;
  position: relative;
  z-index: 1;
}

.knls-hero-quick-access__prices strong {
  display: block;
  font-size: 1.12rem;
  line-height: 1.1;
  margin-bottom: 4px;
}

.knls-hero-quick-access__prices span {
  font-size: .74rem;
  font-weight: 900;
  opacity: .9;
  text-transform: uppercase;
  letter-spacing: .07em;
}

.knls-hero-vtabu-prices__cta {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  width: 100%;
  min-height: 48px;
  border-radius: 999px;
  background: linear-gradient(135deg, #FE5000, #FE5000);
  color: #ffffff;
  text-decoration: none;
  font-weight: 900;
  box-shadow: 0 14px 30px rgba(255, 89, 0, .22);
}

.knls-hero-vtabu-prices__cta:hover,
.knls-hero-vtabu-prices__cta:focus-visible {
  background: linear-gradient(135deg, #FE5000, #FE5000);
  color: #ffffff;
  outline: 3px solid rgba(255, 89, 0, .22);
}

@media (max-width: 560px) {
  .knls-hero-vtabu-prices__brand img {
    max-width: 150px;
  }

  .knls-hero-vtabu-prices__intro {
    font-size: 0.9rem;
  }
}

/* Featured services equal-height alignment. */
.homepage-service-grid--aligned {
  align-items: stretch !important;
}

.homepage-service-grid--aligned .homepage-service-card {
  height: 100%;
  display: grid !important;
  grid-template-rows: 190px 1fr;
}

.homepage-service-grid--aligned .homepage-service-card img {
  height: 190px !important;
  width: 100%;
  object-fit: cover;
}

.homepage-service-grid--aligned .homepage-service-card > div {
  height: 100%;
  display: flex !important;
  flex-direction: column;
}

.homepage-service-grid--aligned .homepage-service-card h3 {
  min-height: 2.45em;
  display: flex;
  align-items: center;
}

.homepage-service-grid--aligned .homepage-service-card p:not(.kicker) {
  flex: 1;
}

.homepage-service-grid--aligned .homepage-service-card a {
  align-self: flex-start;
}

/* Facilities slideshow: smaller box, visible orange arrows, automatic via JS. */
.facilities-click-section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

.facilities-click-layout--compact {
  grid-template-columns: minmax(0, 1.12fr) minmax(300px, .7fr) !important;
  gap: 22px !important;
  align-items: stretch;
}

.facilities-click-main--compact {
  min-height: 420px !important;
  max-height: 460px;
  border-radius: 26px;
  overflow: hidden;
}

.facilities-click-main--compact .facilities-click-stage,
.facilities-click-main--compact .facilities-click-slide,
.facilities-click-main--compact .facilities-click-slide img {
  height: 100%;
}

.facilities-click-main--compact .facilities-click-slide img {
  width: 100%;
  object-fit: cover;
}

.facilities-click-controls {
  position: absolute;
  inset-inline: 18px;
  bottom: 16px;
  z-index: 8;
}

.facilities-arrow {
  background: #FE5000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
  box-shadow: 0 12px 26px rgba(255, 89, 0, .35) !important;
}

.facilities-arrow:hover,
.facilities-arrow:focus-visible {
  background: #FE5000 !important;
  color: #ffffff !important;
  transform: translateY(-2px);
}

.facilities-count {
  background: rgba(255, 255, 255, .92) !important;
  color: #10069F !important;
}

/* Braille accessibility slideshow. */
.visually-impaired-highlight--braille {
  display: grid;
  grid-template-rows: 230px 1fr;
  gap: 14px;
  min-height: 420px !important;
  padding: 16px !important;
}

.braille-access-slideshow {
  position: relative;
  overflow: hidden;
  border-radius: 22px;
  background: #f4f6ff;
  min-height: 230px;
}

.braille-access-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .65s ease;
}

.braille-access-slide.is-active {
  opacity: 1;
  z-index: 1;
}

.braille-access-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.visually-impaired-highlight--braille .visually-impaired-highlight__copy {
  padding: 0 !important;
}

/* Upcoming events auto-scroller. */
.home-upcoming-events {
  padding-top: 36px !important;
  padding-bottom: 30px !important;
  background: rgba(255, 255, 255, .88);
}

.home-upcoming-events .section-title {
  margin-bottom: 18px !important;
}

.events-marquee {
  overflow: hidden;
  border-radius: 24px;
  border: 1px solid rgba(36, 71, 143, .13);
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 16px 40px rgba(18, 26, 68, .08);
}

.events-marquee__track {
  display: flex;
  gap: 14px;
  width: max-content;
  padding: 16px;
  animation: knlsEventsBackAndForth 24s ease-in-out infinite alternate;
}

.event-mini-card {
  width: 260px;
  min-height: 118px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 7px;
  padding: 16px;
  border-radius: 20px;
  background: linear-gradient(135deg, #ffffff, #f7f7ff);
  border: 1px solid rgba(36, 71, 143, .12);
}

.event-mini-card__date {
  width: fit-content;
  padding: 5px 10px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.event-mini-card strong {
  color: #10069F;
  line-height: 1.2;
}

.event-mini-card small {
  color: #65756c;
  font-weight: 800;
}

@keyframes knlsEventsBackAndForth {
  0% { transform: translateX(0); }
  100% { transform: translateX(calc(-100% + min(100vw - 32px, 1180px))); }
}

/* Compact Connect with KNLS section. */
.home-social-section--compact {
  padding-top: 26px !important;
  padding-bottom: 30px !important;
}

.home-social-section--compact .section-title {
  margin-bottom: 16px !important;
}

.home-social-section--compact .social-connect-grid {
  gap: 12px !important;
}

.home-social-section--compact .social-connect-card {
  min-height: 105px !important;
  padding: 15px !important;
}

.home-social-section--compact .social-connect-card span {
  width: 36px !important;
  height: 36px !important;
}

/* KNLS simple chatbot. */
.knls-chatbot {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 1200;
  font-family: inherit;
}

.knls-chatbot__toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  border: 0;
  border-radius: 999px;
  padding: 10px 16px 10px 10px;
  background: linear-gradient(135deg, #10069F, #FE5000);
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 18px 48px rgba(36, 71, 143, .32);
}

.knls-chatbot__avatar {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  overflow: hidden;
  flex: 0 0 44px;
  border-radius: 999px;
  background: #ffffff;
  color: #10069F;
  font-weight: 1000;
  letter-spacing: -.04em;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .75), 0 8px 18px rgba(18, 26, 68, .18);
}

.knls-chatbot__avatar img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  border-radius: inherit;
}

.knls-chatbot__prompt {
  position: absolute;
  right: 0;
  bottom: 66px;
  width: max-content;
  max-width: 230px;
  padding: 9px 13px;
  border-radius: 16px 16px 4px 16px;
  background: #ffffff;
  color: #10069F;
  border: 1px solid rgba(36, 71, 143, .15);
  box-shadow: 0 14px 36px rgba(18, 26, 68, .18);
  font-size: .86rem;
  font-weight: 900;
  line-height: 1.25;
  animation: knlsChatPromptFloat 2.4s ease-in-out infinite;
  pointer-events: none;
}

.knls-chatbot__prompt::after {
  content: '';
  position: absolute;
  right: 22px;
  bottom: -7px;
  width: 14px;
  height: 14px;
  transform: rotate(45deg);
  background: #ffffff;
  border-right: 1px solid rgba(36, 71, 143, .15);
  border-bottom: 1px solid rgba(36, 71, 143, .15);
}

.knls-chatbot__toggle[aria-expanded="true"] + .knls-chatbot__prompt,
.knls-chatbot.is-open .knls-chatbot__prompt {
  display: none;
}

@keyframes knlsChatPromptFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

.knls-chatbot__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: min(360px, calc(100vw - 32px));
  overflow: hidden;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(36, 71, 143, .16);
  box-shadow: 0 24px 70px rgba(18, 26, 68, .26);
}

.knls-chatbot__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 15px 16px;
  background: linear-gradient(135deg, #10069F, #10069F);
  color: #ffffff;
}

.knls-chatbot__header strong,
.knls-chatbot__header small {
  display: block;
  color: #ffffff;
}

.knls-chatbot__header small {
  opacity: .78;
}

.knls-chatbot__close {
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: rgba(255,255,255,.14);
  color: #ffffff;
  font-size: 1.3rem;
  cursor: pointer;
}

.knls-chatbot__messages {
  max-height: 270px;
  overflow-y: auto;
  padding: 14px;
  background: #f7f7ff;
}

.knls-chatbot__message {
  margin-bottom: 10px;
  padding: 10px 12px;
  border-radius: 16px;
  font-size: .92rem;
  line-height: 1.42;
}

.knls-chatbot__message--bot {
  background: #ffffff;
  color: #17203f;
  border: 1px solid rgba(36, 71, 143, .10);
}

.knls-chatbot__message--user {
  margin-left: 28px;
  background: #10069F;
  color: #ffffff;
}

.knls-chatbot__quick {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding: 10px 14px 0;
  background: #ffffff;
}

.knls-chatbot__quick button {
  border: 1px solid rgba(36, 71, 143, .16);
  border-radius: 999px;
  background: #ffffff;
  color: #10069F;
  padding: 7px 10px;
  font-weight: 800;
  cursor: pointer;
}

.knls-chatbot__form {
  display: flex;
  gap: 8px;
  padding: 12px 14px 14px;
  background: #ffffff;
}

.knls-chatbot__form input {
  flex: 1;
  min-width: 0;
  border: 1px solid rgba(36, 71, 143, .18);
  border-radius: 999px;
  padding: 10px 13px;
}

.knls-chatbot__form button {
  border: 0;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  padding: 10px 14px;
  font-weight: 900;
  cursor: pointer;
}

body.dark-mode .home-upcoming-events,
body.dark-mode .events-marquee,
body.dark-mode .event-mini-card,
body.dark-mode .knls-chatbot__panel,
body.dark-mode .knls-chatbot__quick,
body.dark-mode .knls-chatbot__form,
body.dark-mode .knls-chatbot__messages {
  background: #101b33 !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode .event-mini-card strong,
body.dark-mode .event-mini-card small,
body.dark-mode .knls-chatbot__quick button {
  color: #f8fafc !important;
}

body.dark-mode .knls-chatbot__message--bot {
  background: #172642 !important;
  color: #f8fafc !important;
}

body.high-contrast-mode .home-upcoming-events,
body.high-contrast-mode .events-marquee,
body.high-contrast-mode .event-mini-card,
body.high-contrast-mode .knls-chatbot__panel,
body.high-contrast-mode .knls-hero-quick-access {
  background: #000000 !important;
  color: #ffffff !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast-mode .event-mini-card strong,
body.high-contrast-mode .event-mini-card small,
body.high-contrast-mode .knls-chatbot__message--bot,
body.high-contrast-mode .knls-hero-quick-access h2 {
  color: #ffff00 !important;
}

@media (prefers-reduced-motion: reduce) {
  .events-marquee__track {
    animation: none !important;
  }
}

@media (max-width: 1040px) {
  .facilities-click-layout--compact {
    grid-template-columns: 1fr !important;
  }

  .knls-hero-quick-access__prices {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .knls-hero-quick-access__prices article:last-child {
    grid-column: auto;
  }
}

@media (max-width: 680px) {
  .knls-hero-quick-access__prices {
    grid-template-columns: 1fr;
  }

  .knls-hero-quick-access__prices article {
    min-height: 58px;
  }

  .homepage-service-grid--aligned .homepage-service-card {
    grid-template-rows: 150px 1fr;
  }

  .homepage-service-grid--aligned .homepage-service-card img {
    height: 150px !important;
  }

  .facilities-click-main--compact,
  .visually-impaired-highlight--braille {
    min-height: 330px !important;
  }

  .visually-impaired-highlight--braille {
    grid-template-rows: 180px 1fr;
  }

  .events-marquee__track {
    animation-duration: 18s;
  }

  .event-mini-card {
    width: 220px;
  }

  .knls-chatbot {
    right: 14px;
    bottom: 14px;
  }

  .knls-chatbot__toggle span:last-child {
    display: none;
  }

  .knls-chatbot__panel {
    bottom: 58px;
  }
}


/* Final homepage refinement: remove events whitespace and align featured service text. */
.homepage-final-services .section-title {
  margin-bottom: 24px;
}

.homepage-service-grid--aligned {
  align-items: stretch !important;
}

.homepage-service-grid--aligned .homepage-service-card {
  height: 100% !important;
  display: grid !important;
  grid-template-rows: 190px minmax(0, 1fr) !important;
}

.homepage-service-grid--aligned .homepage-service-card > div {
  height: 100% !important;
  min-height: 330px;
  display: grid !important;
  grid-template-rows: 3rem 3.2rem minmax(8.5rem, 1fr) auto !important;
  align-content: start;
  gap: 0;
}

.homepage-service-grid--aligned .homepage-service-card .kicker {
  min-height: 3rem;
  margin: 0 !important;
  display: flex;
  align-items: flex-start;
  line-height: 1.35;
}

.homepage-service-grid--aligned .homepage-service-card h3 {
  min-height: 3.2rem !important;
  margin: 0 !important;
  display: flex !important;
  align-items: flex-start !important;
  line-height: 1.2;
}

.homepage-service-grid--aligned .homepage-service-card p:not(.kicker) {
  margin: 0 !important;
  align-self: start;
}

.homepage-service-grid--aligned .homepage-service-card a {
  align-self: end !important;
  margin-top: 18px;
}

.home-social-section--compact {
  padding-top: 44px !important;
}

@media (max-width: 1040px) {
  .homepage-service-grid--aligned .homepage-service-card > div {
    min-height: 280px;
    grid-template-rows: auto auto minmax(6.5rem, 1fr) auto !important;
  }
}

@media (max-width: 680px) {
  .homepage-service-grid--aligned .homepage-service-card > div {
    min-height: auto;
    grid-template-rows: auto auto auto auto !important;
    gap: 8px;
  }

  .homepage-service-grid--aligned .homepage-service-card .kicker,
  .homepage-service-grid--aligned .homepage-service-card h3 {
    min-height: auto !important;
  }
}


/* eCitizen page visual update: official eCitizen header image and page background. */
body.ecitizen-page {
  background:
    linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .92)),
    url("../images/ecitizen/ecitizen-page-background.jpg") center top / cover fixed no-repeat;
}

body.ecitizen-page .site-header,
body.ecitizen-page .top-strip,
body.ecitizen-page .site-footer {
  position: relative;
  z-index: 2;
}

body.ecitizen-page main {
  position: relative;
  background: transparent;
}

body.ecitizen-page main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(255, 255, 255, .88), rgba(255, 255, 255, .92)),
    url("../images/ecitizen/ecitizen-page-background.jpg") center top / cover no-repeat;
}

.page-hero--ecitizen {
  min-height: 310px;
  display: grid;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(32, 39, 126, .92) 0%, rgba(32, 39, 126, .76) 42%, rgba(255, 255, 255, .20) 100%),
    url("../images/ecitizen/ecitizen-header.jpg") right center / contain no-repeat,
    linear-gradient(135deg, #10069F, #10069F);
  border-bottom: 4px solid #FE5000;
}

.page-hero--ecitizen h1,
.page-hero--ecitizen .kicker,
.page-hero--ecitizen p {
  text-shadow: 0 2px 16px rgba(0, 0, 0, .35);
}

body.ecitizen-page .service-detail-section {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
}

body.ecitizen-page .content-panel,
body.ecitizen-page .service-side-nav,
body.ecitizen-page .ecitizen-service-grid article,
body.ecitizen-page .service-contact-card {
  background: rgba(255, 255, 255, .96);
}

@media (max-width: 760px) {
  body.ecitizen-page {
    background-attachment: scroll;
  }

  .page-hero--ecitizen {
    min-height: 250px;
    background:
      linear-gradient(180deg, rgba(32, 39, 126, .92), rgba(32, 39, 126, .82)),
      url("../images/ecitizen/ecitizen-header.jpg") center bottom / 78% auto no-repeat,
      linear-gradient(135deg, #10069F, #10069F);
    padding: 54px 0 70px;
  }
}


/* Data Centre page image fix: use the uploaded server-room image on the header and page background. */
body.data-center-page {
  background:
    linear-gradient(rgba(248, 249, 255, .88), rgba(248, 249, 255, .94)),
    url("../images/homepage-final/data-centre-page-background.webp") center top / cover fixed no-repeat;
}

body.data-center-page main {
  position: relative;
  background: transparent;
}

body.data-center-page main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(rgba(248, 249, 255, .88), rgba(248, 249, 255, .94)),
    url("../images/homepage-final/data-centre-page-background.webp") center top / cover no-repeat;
}

.page-hero--data-center {
  min-height: 310px;
  display: grid;
  align-items: end;
  background:
    linear-gradient(90deg, rgba(22, 20, 84, .88), rgba(22, 20, 84, .58)),
    url("../images/homepage-final/data-centre-hero.webp") center / cover no-repeat !important;
  border-bottom: 4px solid #FE5000;
}

body.data-center-page .service-detail-section {
  background: rgba(255, 255, 255, .72);
  backdrop-filter: blur(2px);
}

body.data-center-page .content-panel,
body.data-center-page .service-side-nav,
body.data-center-page .service-intro-card,
body.data-center-page .service-feature-grid article,
body.data-center-page .service-contact-card {
  background: rgba(255, 255, 255, .96);
}

@media (max-width: 760px) {
  body.data-center-page {
    background-attachment: scroll;
  }

  .page-hero--data-center {
    min-height: 250px;
    background:
      linear-gradient(180deg, rgba(22, 20, 84, .90), rgba(22, 20, 84, .72)),
      url("../images/homepage-final/data-centre-hero.webp") center / cover no-repeat !important;
  }
}


/* Final homepage spacing refinement: reduce whitespace between homepage sections. */
.homepage-final-intro,
.homepage-final-services,
.homepage-final-author,
.facilities-click-section,
.home-social-section--compact {
  padding-top: 30px !important;
  padding-bottom: 30px !important;
}

.homepage-final-intro .container,
.homepage-final-services .container,
.homepage-final-author .container,
.facilities-click-section .container,
.home-social-section--compact .container {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

.homepage-final-intro__grid,
.homepage-final-author__header,
.facilities-click-layout--compact,
.social-connect-grid {
  gap: 18px !important;
}

.homepage-final-services .section-title,
.facilities-click-section .section-title,
.home-social-section--compact .section-title {
  margin-bottom: 16px !important;
}

.homepage-final-card,
.homepage-service-card > div,
.homepage-final-author__header,
.visually-impaired-highlight--braille {
  padding-top: 20px !important;
  padding-bottom: 20px !important;
}

.homepage-final-card h2,
.homepage-final-author__header h2,
.section-title h2 {
  margin-bottom: 8px !important;
}

.homepage-final-card p,
.homepage-final-author__header p,
.section-title p {
  margin-bottom: 10px !important;
}

.journey-steps--landscape {
  gap: 12px !important;
}

.journey-steps--landscape a {
  min-height: 92px !important;
  padding: 16px !important;
}

.home-social-section--compact .social-connect-card {
  min-height: 94px !important;
}

@media (max-width: 768px) {
  .homepage-final-intro,
  .homepage-final-services,
  .homepage-final-author,
  .facilities-click-section,
  .home-social-section--compact {
    padding-top: 22px !important;
    padding-bottom: 22px !important;
  }

  .homepage-final-services .section-title,
  .facilities-click-section .section-title,
  .home-social-section--compact .section-title {
    margin-bottom: 12px !important;
  }

  .homepage-final-card,
  .homepage-service-card > div,
  .homepage-final-author__header,
  .visually-impaired-highlight--braille {
    padding-top: 16px !important;
    padding-bottom: 16px !important;
  }

  .homepage-final-intro__grid,
  .homepage-service-grid,
  .facilities-click-layout--compact,
  .social-connect-grid {
    gap: 14px !important;
  }
}

body.dark-mode .knls-chatbot__prompt {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode .knls-chatbot__prompt::after {
  background: #172642 !important;
  border-color: #31415f !important;
}

body.high-contrast-mode .knls-chatbot__prompt {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
  box-shadow: none !important;
}

body.high-contrast-mode .knls-chatbot__prompt::after {
  background: #000000 !important;
  border-color: #ffffff !important;
}

body.high-contrast-mode .knls-chatbot__avatar {
  background: #ffffff !important;
  box-shadow: 0 0 0 3px #ffff00 !important;
}

@media (max-width: 680px) {
  .knls-chatbot__avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .knls-chatbot__prompt {
    right: 2px;
    bottom: 60px;
    max-width: 190px;
    font-size: .78rem;
    padding: 8px 11px;
  }
}


/* =========================================================
   Final requested refinements: compact v.tabu hero card,
   updated v.tabu image, and icon-only pulsing chatbot
   ========================================================= */

/* Keep the v.tabu membership panel compact so it does not overlap the hero content. */
.knls-hero-vtabu-prices {
  width: min(300px, calc(100vw - 40px)) !important;
  padding: 15px !important;
  border-radius: 22px !important;
  box-shadow: 0 18px 48px rgba(20, 27, 52, 0.20) !important;
}

.knls-hero-vtabu-prices__brand {
  margin-bottom: 8px !important;
  padding: 6px 10px !important;
  border-radius: 15px !important;
}

.knls-hero-vtabu-prices__brand img {
  max-width: 118px !important;
}

.knls-hero-vtabu-prices .knls-hero-quick-access__label {
  margin-bottom: 6px !important;
  padding: 5px 9px !important;
  font-size: .66rem !important;
}

.knls-hero-vtabu-prices h2 {
  margin-bottom: 5px !important;
  font-size: 1.13rem !important;
  line-height: 1.12 !important;
}

.knls-hero-vtabu-prices__intro {
  margin-bottom: 9px !important;
  font-size: .78rem !important;
  line-height: 1.35 !important;
}

.knls-hero-quick-access__prices {
  gap: 7px !important;
  margin: 4px 0 10px !important;
}

.knls-hero-quick-access__prices article {
  min-height: 50px !important;
  padding: 8px 9px !important;
  border-radius: 13px !important;
  box-shadow: 0 8px 18px rgba(36, 71, 143, .14) !important;
}

.knls-hero-quick-access__prices strong {
  font-size: .9rem !important;
  margin-bottom: 2px !important;
}

.knls-hero-quick-access__prices span {
  font-size: .58rem !important;
  letter-spacing: .055em !important;
}

.knls-hero-vtabu-prices__cta {
  min-height: 38px !important;
  font-size: .86rem !important;
  box-shadow: 0 10px 22px rgba(255, 89, 0, .20) !important;
}

/* Better crop for the uploaded v.tabu brochure image in Featured Services. */
.homepage-service-card img[src*="vtabu-brochure-updated"],
.homepage-service-card img[src*="vtabu-brochure-current"] {
  object-fit: cover !important;
  object-position: 50% 42% !important;
}

/* Icon-only chatbot launcher with a larger pulsing avatar. */
.knls-chatbot__toggle {
  width: 74px !important;
  height: 74px !important;
  min-width: 74px !important;
  min-height: 74px !important;
  padding: 8px !important;
  border-radius: 999px !important;
  gap: 0 !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #10069F, #FE5000) !important;
  animation: knlsChatbotPulse 1.9s ease-in-out infinite !important;
}

.knls-chatbot__toggle > span:not(.knls-chatbot__avatar) {
  display: none !important;
}

.knls-chatbot__avatar {
  width: 58px !important;
  height: 58px !important;
  flex: 0 0 58px !important;
  box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .88), 0 9px 22px rgba(18, 26, 68, .22) !important;
}

.knls-chatbot__prompt {
  bottom: 82px !important;
  max-width: 190px !important;
  padding: 8px 12px !important;
  font-size: .82rem !important;
}

.knls-chatbot__panel {
  bottom: 84px !important;
}

@keyframes knlsChatbotPulse {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 18px 48px rgba(36, 71, 143, .32), 0 0 0 0 rgba(255, 89, 0, .42);
  }
  50% {
    transform: scale(1.035);
    box-shadow: 0 20px 54px rgba(36, 71, 143, .36), 0 0 0 13px rgba(255, 89, 0, 0);
  }
}

.knls-chatbot.is-open .knls-chatbot__toggle,
.knls-chatbot__toggle[aria-expanded="true"] {
  animation: none !important;
}

@media (max-width: 1040px) {
  .knls-hero-vtabu-prices {
    width: auto !important;
    max-width: 520px !important;
    left: 24px !important;
    right: 24px !important;
    bottom: 76px !important;
    top: auto !important;
    transform: none !important;
  }

  .knls-hero-vtabu-prices__intro {
    display: none !important;
  }

  .knls-hero-quick-access__prices {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .knls-hero-quick-access__prices article:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 680px) {
  .knls-hero-vtabu-prices {
    left: 14px !important;
    right: 14px !important;
    bottom: 64px !important;
    padding: 12px !important;
  }

  .knls-hero-vtabu-prices__brand,
  .knls-hero-vtabu-prices .knls-hero-quick-access__label {
    display: none !important;
  }

  .knls-hero-vtabu-prices h2 {
    font-size: 1rem !important;
    margin-bottom: 8px !important;
  }

  .knls-hero-quick-access__prices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .knls-hero-quick-access__prices article {
    min-height: 44px !important;
  }

  .knls-hero-quick-access__prices article:last-child {
    grid-column: 1 / -1 !important;
  }

  .knls-chatbot__toggle {
    width: 66px !important;
    height: 66px !important;
    min-width: 66px !important;
    min-height: 66px !important;
    padding: 7px !important;
  }

  .knls-chatbot__avatar {
    width: 52px !important;
    height: 52px !important;
    flex-basis: 52px !important;
  }

  .knls-chatbot__prompt {
    right: 0 !important;
    bottom: 74px !important;
    max-width: 170px !important;
  }

  .knls-chatbot__panel {
    bottom: 76px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .knls-chatbot__toggle {
    animation: none !important;
  }
}


/* =========================================================
   Who We Are page visual refresh
   ========================================================= */
body.who-we-are-page main {
  position: relative;
  isolation: isolate;
}

body.who-we-are-page main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(rgba(247,247,255,.86), rgba(255,246,234,.84)),
    url("../images/who-we-are/who-we-are-library-exterior.webp") center top / cover no-repeat;
  opacity: .85;
  pointer-events: none;
  z-index: 0;
}

body.who-we-are-page main > * {
  position: relative;
  z-index: 1;
}

body.who-we-are-page .page-hero--who-we-are {
  background:
    linear-gradient(90deg, rgba(20, 24, 72, .68) 0%, rgba(20, 24, 72, .38) 42%, rgba(255, 89, 0, .16) 100%),
    url("../images/who-we-are/who-we-are-top-header-visible.webp") center 44% / cover no-repeat;
  padding: 60px 0;
}

body.who-we-are-page .page-hero--who-we-are .page-hero__inner {
  gap: 24px;
  min-height: 240px;
  align-items: end;
}

body.who-we-are-page .page-hero--who-we-are h1,
body.who-we-are-page .page-hero--who-we-are p,
body.who-we-are-page .page-hero--who-we-are .kicker,
body.who-we-are-page .page-hero--who-we-are .breadcrumbs {
  text-shadow: 0 2px 16px rgba(15, 23, 42, .48);
}

body.who-we-are-page .section {
  padding: 56px 0;
}

body.who-we-are-page .section-title {
  margin-bottom: 24px;
}

body.who-we-are-page .content-panel,
body.who-we-are-page .side-panel,
body.who-we-are-page .feature-card,
body.who-we-are-page .about-image-band__copy {
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(4px);
}

body.who-we-are-page .about-image-band {
  background: rgba(255,255,255,.30);
}

body.who-we-are-page .about-image-band__grid,
body.who-we-are-page .two-column,
body.who-we-are-page .about-mobile-library__grid {
  gap: 24px;
}

body.who-we-are-page .about-image-band__image {
  border-radius: 24px;
}

body.who-we-are-page .about-image-band__image img,
body.who-we-are-page .about-mobile-library__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

body.who-we-are-page .about-image-band__image img {
  min-height: 320px;
}

body.who-we-are-page .section--cream {
  background: rgba(255, 246, 234, .55);
}

body.who-we-are-page .breadcrumbs {
  backdrop-filter: blur(6px);
}

@media (max-width: 768px) {
  body.who-we-are-page .page-hero--who-we-are {
    padding: 52px 0;
    background-position: center 40%;
  }

  body.who-we-are-page .section {
    padding: 42px 0;
  }

  body.who-we-are-page .about-image-band__image img {
    min-height: 240px;
  }
}


/* =========================================================
   E-Resources pages compact official-content refresh
   ========================================================= */
.e-resources-main .section {
  padding-top: 34px !important;
  padding-bottom: 34px !important;
}

.e-resources-hero {
  padding-top: 46px !important;
  padding-bottom: 46px !important;
  background:
    radial-gradient(circle at 12% 18%, rgba(255, 89, 0, .22), transparent 32%),
    linear-gradient(135deg, rgba(68, 0, 153, .96), rgba(22, 29, 74, .92));
}

.e-resource-overview-panel,
.e-resource-search-panel,
.e-resource-browser {
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(68, 0, 153, .10);
  border-radius: 26px;
  box-shadow: 0 22px 60px rgba(68, 0, 153, .08);
  padding: 24px;
}

.e-resource-overview-panel {
  display: grid;
  grid-template-columns: 1.4fr .9fr;
  gap: 20px;
  align-items: center;
  margin-bottom: 20px;
}

.e-resource-overview-panel h2,
.e-resource-browser__intro h2 {
  margin-bottom: 8px;
}

.e-resource-overview-panel p,
.e-resource-browser__intro p {
  margin-bottom: 0;
}

.e-resource-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.e-resource-stats span {
  background: linear-gradient(145deg, rgba(68, 0, 153, .08), rgba(255, 89, 0, .10));
  border: 1px solid rgba(68, 0, 153, .10);
  border-radius: 18px;
  padding: 14px;
  text-align: center;
}

.e-resource-stats strong {
  display: block;
  color: var(--primary);
  font-size: 1.8rem;
  line-height: 1;
}

.e-resource-stats small {
  display: block;
  margin-top: 6px;
  color: var(--muted);
  font-weight: 700;
}

.e-resource-directory-grid,
.e-resource-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.e-resource-directory-card,
.e-resource-card {
  background: #fff;
  border: 1px solid rgba(68, 0, 153, .12);
  border-radius: 22px;
  padding: 18px;
  box-shadow: 0 16px 40px rgba(15, 23, 42, .06);
}

.e-resource-directory-card {
  display: flex;
  min-height: 230px;
  flex-direction: column;
}

.e-resource-directory-card__icon {
  display: inline-flex;
  width: 44px;
  height: 44px;
  align-items: center;
  justify-content: center;
  border-radius: 16px;
  background: rgba(255, 89, 0, .12);
  margin-bottom: 12px;
}

.e-resource-directory-card h3,
.e-resource-card h3 {
  color: var(--primary);
  margin-bottom: 8px;
}

.e-resource-directory-card p,
.e-resource-card p {
  color: var(--muted);
  margin-bottom: 14px;
}

.e-resource-directory-card a,
.e-resource-card__link {
  margin-top: auto;
  color: var(--orange);
  font-weight: 800;
  text-decoration: none;
}

.e-resource-browser__intro {
  max-width: 900px;
  margin-bottom: 18px;
}

.e-resource-toolbar {
  position: sticky;
  top: 84px;
  z-index: 3;
  display: grid;
  grid-template-columns: minmax(240px, .9fr) 1.8fr auto;
  gap: 12px;
  align-items: center;
  background: rgba(255, 255, 255, .96);
  border: 1px solid rgba(68, 0, 153, .10);
  border-radius: 20px;
  padding: 12px;
  margin-bottom: 16px;
  backdrop-filter: blur(10px);
}

.e-resource-toolbar input {
  width: 100%;
  min-height: 44px;
  border: 1px solid rgba(68, 0, 153, .14);
  border-radius: 14px;
  padding: 10px 14px;
  font: inherit;
}

.e-resource-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.e-resource-filter-chips button {
  border: 1px solid rgba(68, 0, 153, .14);
  background: #fff;
  color: var(--primary);
  border-radius: 999px;
  padding: 8px 12px;
  font-weight: 800;
  cursor: pointer;
}

.e-resource-filter-chips button.is-active,
.e-resource-filter-chips button:hover {
  background: var(--orange);
  border-color: var(--orange);
  color: #fff;
}

.e-resource-count {
  justify-self: end;
  color: var(--muted);
  font-size: .9rem;
  font-weight: 700;
  margin: 0;
  white-space: nowrap;
}

.e-resource-card {
  display: flex;
  min-height: 245px;
  flex-direction: column;
}

.e-resource-card__tag {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 10px;
  border-radius: 999px;
  background: rgba(68, 0, 153, .08);
  color: var(--primary);
  font-size: .76rem;
  font-weight: 900;
  letter-spacing: .04em;
  padding: 6px 10px;
  text-transform: uppercase;
}

.e-resource-card.is-hidden {
  display: none;
}

.e-resource-search-panel {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 22px;
  align-items: start;
}

.e-resource-search-embed {
  min-height: 360px;
  background: #f8f8ff;
  border: 1px solid rgba(68, 0, 153, .12);
  border-radius: 22px;
  padding: 18px;
}

body.dark-mode .e-resource-overview-panel,
body.dark-mode .e-resource-search-panel,
body.dark-mode .e-resource-browser,
body.dark-mode .e-resource-directory-card,
body.dark-mode .e-resource-card,
body.dark-mode .e-resource-toolbar,
body.dark-mode .e-resource-toolbar input,
body.dark-mode .e-resource-filter-chips button,
body.dark-mode .e-resource-search-embed {
  background: #111827 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #f9fafb !important;
}

body.dark-mode .e-resource-card p,
body.dark-mode .e-resource-directory-card p,
body.dark-mode .e-resource-count,
body.dark-mode .e-resource-stats small,
body.dark-mode .e-resource-browser__intro p {
  color: #d1d5db !important;
}

body.dark-mode .e-resource-card h3,
body.dark-mode .e-resource-directory-card h3,
body.dark-mode .e-resource-overview-panel h2,
body.dark-mode .e-resource-browser__intro h2 {
  color: #ffffff !important;
}

body.high-contrast-mode .e-resource-overview-panel,
body.high-contrast-mode .e-resource-search-panel,
body.high-contrast-mode .e-resource-browser,
body.high-contrast-mode .e-resource-directory-card,
body.high-contrast-mode .e-resource-card,
body.high-contrast-mode .e-resource-toolbar,
body.high-contrast-mode .e-resource-toolbar input,
body.high-contrast-mode .e-resource-filter-chips button,
body.high-contrast-mode .e-resource-search-embed {
  background: #000 !important;
  color: #fff !important;
  border-color: #ffff00 !important;
}

body.high-contrast-mode .e-resource-card h3,
body.high-contrast-mode .e-resource-directory-card h3,
body.high-contrast-mode .e-resource-card__link,
body.high-contrast-mode .e-resource-directory-card a {
  color: #ffff00 !important;
}

@media (max-width: 1180px) {
  .e-resource-directory-grid,
  .e-resource-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .e-resource-toolbar { grid-template-columns: 1fr; position: static; }
  .e-resource-count { justify-self: start; }
}

@media (max-width: 780px) {
  .e-resource-overview-panel,
  .e-resource-search-panel { grid-template-columns: 1fr; }
  .e-resource-stats,
  .e-resource-directory-grid,
  .e-resource-grid { grid-template-columns: 1fr; }
  .e-resource-overview-panel,
  .e-resource-search-panel,
  .e-resource-browser { padding: 16px !important; border-radius: 20px; }
  .e-resource-directory-card,
  .e-resource-card { min-height: auto; padding: 16px !important; }
}


/* Enhanced E-Resources Search Engine page */
.e-resource-search-page .section {
  padding-top: clamp(22px, 4vw, 46px);
  padding-bottom: clamp(20px, 4vw, 42px);
}

.e-resource-search-panel--official {
  grid-template-columns: minmax(280px, .88fr) minmax(320px, 1.12fr);
  gap: clamp(18px, 3vw, 34px);
}

.e-resource-search-tips {
  margin: 14px 0 0;
  padding-left: 18px;
  color: var(--knls-muted);
  line-height: 1.65;
}

.e-resource-search-embed {
  min-height: 330px;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.75);
}

.e-resource-search-embed .gcse-search,
.e-resource-search-embed .gsc-control-cse {
  min-height: 280px;
}

.e-resource-fallback-section {
  padding-top: 6px !important;
}

.e-resource-local-search {
  overflow: visible;
}

.e-resource-local-search__intro {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
}

.e-resource-toolbar--compact {
  margin-top: 18px;
}

.e-resource-grid--search-engine {
  margin-top: 18px;
}

.e-resource-card__category {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  padding: 5px 10px;
  margin-bottom: 8px;
  background: rgba(255, 127, 0, .11);
  color: var(--knls-orange);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.e-resource-grid--search-engine .e-resource-card {
  min-height: 250px;
}

body.dark-mode .e-resource-search-tips,
body.dark-mode .e-resource-card__category {
  color: #fbbf24 !important;
}

body.dark-mode .e-resource-card__category {
  background: rgba(251, 191, 36, .13) !important;
}

body.high-contrast-mode .e-resource-search-tips {
  color: #fff !important;
}

body.high-contrast-mode .e-resource-card__category {
  background: #000 !important;
  color: #ffff00 !important;
  border: 1px solid #ffff00 !important;
}

@media (max-width: 900px) {
  .e-resource-local-search__intro {
    align-items: stretch;
    flex-direction: column;
  }
}

@media (max-width: 780px) {
  .e-resource-search-page .section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
  .e-resource-search-panel--official {
    grid-template-columns: 1fr;
  }
  .e-resource-search-embed {
    min-height: 260px;
    padding: 12px;
  }
  .e-resource-grid--search-engine .e-resource-card {
    min-height: auto;
  }
}


/* =========================================================
   E-Resources logos and calmer grouped browsing update
   ========================================================= */
.e-resource-logo-strip {
  margin: -4px 0 22px;
  padding: 16px;
  border: 1px solid rgba(68, 0, 153, .10);
  border-radius: 24px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 18px 44px rgba(68, 0, 153, .07);
}
.e-resource-logo-strip__head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 14px;
  margin-bottom: 12px;
}
.e-resource-logo-strip__head strong {
  color: var(--primary);
  font-size: 1.05rem;
}
.e-resource-logo-strip__head span {
  color: var(--muted);
  font-size: .92rem;
}
.e-resource-logo-strip__grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: 10px;
}
.e-resource-logo-strip__grid a {
  display: flex;
  min-height: 78px;
  align-items: center;
  justify-content: center;
  gap: 9px;
  flex-direction: column;
  border: 1px solid rgba(68, 0, 153, .10);
  border-radius: 18px;
  background: linear-gradient(180deg, #fff, #f8f9ff);
  color: var(--primary);
  font-size: .78rem;
  font-weight: 900;
  text-align: center;
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.e-resource-logo-strip__grid a:hover,
.e-resource-logo-strip__grid a:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255, 89, 0, .6);
  box-shadow: 0 12px 26px rgba(255, 89, 0, .14);
  outline: none;
}
.e-resource-logo-strip__grid img {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  object-fit: contain;
  background: #fff;
  padding: 6px;
  border: 1px solid rgba(38,37,139,.08);
}
.e-resource-page-helper {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 12px;
  margin-top: 12px;
  padding: 11px 13px;
  border-radius: 16px;
  background: rgba(38,37,139,.06);
  color: var(--muted);
  font-size: .92rem;
}
.e-resource-page-helper strong { color: var(--primary); }
.e-resource-page-helper a {
  margin-left: auto;
  color: var(--orange);
  font-weight: 900;
  text-decoration: none;
}
.e-resource-category-list {
  display: grid;
  gap: 14px;
}
.e-resource-category-group {
  border: 1px solid rgba(38,37,139,.10);
  border-radius: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(248,249,255,.96));
  overflow: hidden;
}
.e-resource-category-group.is-hidden { display: none; }
.e-resource-category-group summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  cursor: pointer;
  color: var(--primary);
  font-weight: 900;
  list-style: none;
}
.e-resource-category-group summary::-webkit-details-marker { display: none; }
.e-resource-category-group summary::after {
  content: '＋';
  display: inline-flex;
  width: 28px;
  height: 28px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(255,89,0,.12);
  color: var(--orange);
  font-weight: 900;
}
.e-resource-category-group[open] summary::after { content: '−'; }
.e-resource-category-group summary small {
  margin-left: auto;
  color: var(--muted);
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.e-resource-category-group .e-resource-grid {
  padding: 0 16px 16px;
}
.e-resource-card__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}
.e-resource-card__logo-link {
  flex: 0 0 auto;
  display: inline-flex;
  width: 58px;
  height: 58px;
  align-items: center;
  justify-content: center;
  border-radius: 18px;
  background: linear-gradient(145deg, #fff, #f5f6ff);
  border: 1px solid rgba(38,37,139,.10);
  box-shadow: 0 10px 22px rgba(38,37,139,.08);
  text-decoration: none;
  transition: transform .2s ease, border-color .2s ease;
}
.e-resource-card__logo-link:hover,
.e-resource-card__logo-link:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(255,89,0,.55);
  outline: none;
}
.e-resource-card__logo-link img {
  display: block;
  width: 42px;
  height: 42px;
  object-fit: contain;
  border-radius: 11px;
}
.e-resource-card__logo-fallback {
  display: none;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  background: var(--primary);
  color: #fff;
  font-size: .78rem;
  font-weight: 900;
  letter-spacing: .04em;
}
.e-resource-card h3 a {
  color: inherit;
  text-decoration: none;
}
.e-resource-card h3 a:hover,
.e-resource-card h3 a:focus-visible {
  color: var(--orange);
  outline: none;
}
.e-resource-card__tag,
.e-resource-card__category {
  max-width: calc(100% - 70px);
  text-align: right;
  line-height: 1.25;
}
.e-resource-card {
  min-height: 228px;
}
.e-resource-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
body.dark-mode .e-resource-logo-strip,
body.dark-mode .e-resource-category-group,
body.dark-mode .e-resource-logo-strip__grid a,
body.dark-mode .e-resource-card__logo-link,
body.dark-mode .e-resource-page-helper {
  background: #111827 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #f9fafb !important;
}
body.dark-mode .e-resource-logo-strip__head strong,
body.dark-mode .e-resource-page-helper strong,
body.dark-mode .e-resource-category-group summary {
  color: #fff !important;
}
body.dark-mode .e-resource-logo-strip__head span,
body.dark-mode .e-resource-category-group summary small {
  color: #d1d5db !important;
}
body.high-contrast-mode .e-resource-logo-strip,
body.high-contrast-mode .e-resource-category-group,
body.high-contrast-mode .e-resource-logo-strip__grid a,
body.high-contrast-mode .e-resource-card__logo-link,
body.high-contrast-mode .e-resource-page-helper {
  background: #000 !important;
  border-color: #ffff00 !important;
  color: #fff !important;
}
body.high-contrast-mode .e-resource-logo-strip__head strong,
body.high-contrast-mode .e-resource-page-helper strong,
body.high-contrast-mode .e-resource-page-helper a,
body.high-contrast-mode .e-resource-category-group summary {
  color: #ffff00 !important;
}
@media (max-width: 1180px) {
  .e-resource-logo-strip__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 780px) {
  .e-resource-logo-strip { padding: 12px; border-radius: 18px; }
  .e-resource-logo-strip__head { align-items: flex-start; flex-direction: column; }
  .e-resource-logo-strip__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .e-resource-category-group summary { padding: 12px 14px; }
  .e-resource-category-group .e-resource-grid { padding: 0 12px 12px; }
  .e-resource-card__top { align-items: center; }
  .e-resource-card__logo-link { width: 52px; height: 52px; border-radius: 16px; }
}


/* =========================================================
   Final homepage refinements: communications email, compact v.tabu panel,
   pantone-style orange and cleaner welcome section.
   ========================================================= */
:root {
  --knls-gold: #FE5000;
  --knls-gold-soft: #fff1e8;
}

.homepage-final-intro__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 920px;
}

.homepage-final-intro .homepage-final-card {
  padding: 24px !important;
}

.homepage-final-intro {
  padding-top: 38px !important;
  padding-bottom: 34px !important;
}

/* Compact the v.tabu membership panel so it does not cover the hero text. */
.knls-hero-vtabu-prices {
  width: min(265px, calc(100vw - 44px)) !important;
  padding: 12px !important;
  border-radius: 19px !important;
  right: max(18px, calc((100vw - 1180px) / 2)) !important;
  top: 52% !important;
  background:
    radial-gradient(circle at top right, rgba(255, 89, 0, .12), transparent 36%),
    rgba(255,255,255,.96) !important;
}

.knls-hero-vtabu-prices__brand {
  margin-bottom: 5px !important;
  padding: 5px 8px !important;
  border-radius: 13px !important;
}

.knls-hero-vtabu-prices__brand img {
  max-width: 98px !important;
}

.knls-hero-vtabu-prices .knls-hero-quick-access__label {
  display: none !important;
}

.knls-hero-vtabu-prices h2 {
  font-size: .98rem !important;
  line-height: 1.1 !important;
  margin: 4px 0 6px !important;
}

.knls-hero-vtabu-prices__intro {
  display: none !important;
}

.knls-hero-quick-access__prices {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 6px !important;
  margin: 0 0 8px !important;
}

.knls-hero-quick-access__prices article {
  min-height: 42px !important;
  padding: 7px 7px !important;
  border-radius: 11px !important;
}

.knls-hero-quick-access__prices article:last-child {
  grid-column: 1 / -1 !important;
}

.knls-hero-quick-access__prices strong {
  font-size: .78rem !important;
  line-height: 1 !important;
  margin-bottom: 1px !important;
}

.knls-hero-quick-access__prices span {
  font-size: .50rem !important;
  letter-spacing: .04em !important;
}

.knls-hero-vtabu-prices__cta {
  min-height: 32px !important;
  font-size: .75rem !important;
  background: linear-gradient(135deg, #FE5000, #FE5000) !important;
}

.btn--orange,
.event-mini-card__date,
.knb-type-tabs button.is-active,
.knb-decade-tabs button.is-active,
.knb-year-chip.is-active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
}

@media (max-width: 1040px) {
  .knls-hero-vtabu-prices {
    max-width: 440px !important;
    left: 18px !important;
    right: 18px !important;
    bottom: 72px !important;
    top: auto !important;
  }

  .knls-hero-quick-access__prices {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }

  .knls-hero-quick-access__prices article:last-child {
    grid-column: auto !important;
  }
}

@media (max-width: 680px) {
  .knls-hero-vtabu-prices {
    bottom: 62px !important;
    padding: 10px !important;
  }

  .knls-hero-vtabu-prices__brand {
    display: none !important;
  }

  .knls-hero-vtabu-prices h2 {
    font-size: .88rem !important;
    margin-bottom: 6px !important;
  }

  .knls-hero-quick-access__prices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .knls-hero-quick-access__prices article:last-child {
    grid-column: 1 / -1 !important;
  }
}


/* =========================================================
   E-Resources mobile-first organisation and navigation polish
   ========================================================= */
.e-resource-subnav-section {
  padding: 12px 0 0 !important;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(248,249,255,.88));
}

.e-resource-subnav {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  scrollbar-width: thin;
  padding-bottom: 10px;
}

.e-resource-subnav a {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  padding: 9px 15px;
  border: 1px solid rgba(38,37,139,.14);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  font-size: .92rem;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 24px rgba(38,37,139,.06);
}

.e-resource-subnav a[aria-current="page"],
.e-resource-subnav a:hover,
.e-resource-subnav a:focus-visible {
  background: var(--orange);
  border-color: var(--orange);
  color: #ffffff;
  outline: none;
}

.e-resource-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  margin: -2px 0 14px;
  padding: 9px 10px;
  border: 1px solid rgba(38,37,139,.10);
  border-radius: 18px;
  background: rgba(255,255,255,.80);
}

.e-resource-actions span {
  margin-right: auto;
  color: var(--muted);
  font-size: .86rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.e-resource-actions button,
.e-resource-category-nav button {
  border: 1px solid rgba(38,37,139,.14);
  border-radius: 999px;
  background: #ffffff;
  color: var(--primary);
  cursor: pointer;
  font: inherit;
  font-size: .84rem;
  font-weight: 900;
  padding: 8px 12px;
}

.e-resource-actions button:hover,
.e-resource-actions button:focus-visible,
.e-resource-category-nav button:hover,
.e-resource-category-nav button:focus-visible,
.e-resource-category-nav button.is-active {
  background: var(--primary);
  border-color: var(--primary);
  color: #ffffff;
  outline: none;
}

.e-resource-category-nav {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  margin: 0 0 14px;
  padding: 0 0 8px;
  scrollbar-width: thin;
}

.e-resource-category-nav button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  white-space: nowrap;
}

.e-resource-category-nav button small {
  opacity: .72;
  font-weight: 800;
}

.e-resource-category-group {
  scroll-margin-top: 120px;
}

.e-resource-category-group summary {
  min-height: 58px;
}

.e-resource-category-group summary span {
  min-width: 0;
}

.e-resource-card {
  position: relative;
}

.e-resource-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.e-resource-card h3 {
  font-size: clamp(1rem, 1.5vw, 1.12rem);
  line-height: 1.25;
}

.e-resource-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 38px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(255,89,0,.10);
}

.e-resource-card__link:hover,
.e-resource-card__link:focus-visible {
  background: var(--orange);
  color: #ffffff;
  outline: none;
}

body.dark-mode .e-resource-subnav-section,
body.dark-mode .e-resource-actions,
body.dark-mode .e-resource-subnav a,
body.dark-mode .e-resource-actions button,
body.dark-mode .e-resource-category-nav button {
  background: #111827 !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #f9fafb !important;
}

body.dark-mode .e-resource-subnav a[aria-current="page"],
body.dark-mode .e-resource-subnav a:hover,
body.dark-mode .e-resource-subnav a:focus-visible,
body.dark-mode .e-resource-actions button:hover,
body.dark-mode .e-resource-actions button:focus-visible,
body.dark-mode .e-resource-category-nav button:hover,
body.dark-mode .e-resource-category-nav button:focus-visible,
body.dark-mode .e-resource-category-nav button.is-active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  color: #ffffff !important;
}

body.high-contrast-mode .e-resource-subnav-section,
body.high-contrast-mode .e-resource-actions,
body.high-contrast-mode .e-resource-subnav a,
body.high-contrast-mode .e-resource-actions button,
body.high-contrast-mode .e-resource-category-nav button {
  background: #000000 !important;
  border-color: #ffff00 !important;
  color: #ffffff !important;
}

body.high-contrast-mode .e-resource-subnav a[aria-current="page"],
body.high-contrast-mode .e-resource-subnav a:hover,
body.high-contrast-mode .e-resource-subnav a:focus-visible,
body.high-contrast-mode .e-resource-actions button:hover,
body.high-contrast-mode .e-resource-actions button:focus-visible,
body.high-contrast-mode .e-resource-category-nav button:hover,
body.high-contrast-mode .e-resource-category-nav button:focus-visible,
body.high-contrast-mode .e-resource-category-nav button.is-active {
  background: #ffff00 !important;
  color: #000000 !important;
}

@media (max-width: 900px) {
  .e-resource-subnav-section {
    padding-top: 8px !important;
  }

  .e-resource-subnav {
    padding-left: 0;
    padding-bottom: 8px;
  }

  .e-resource-subnav a {
    min-height: 38px;
    padding: 8px 12px;
    font-size: .86rem;
  }

  .e-resource-toolbar {
    margin-bottom: 12px;
  }

  .e-resource-filter-chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding-bottom: 4px;
  }

  .e-resource-filter-chips button {
    flex: 0 0 auto;
    padding: 8px 11px;
    font-size: .82rem;
    white-space: nowrap;
  }

  .e-resource-actions {
    align-items: stretch;
    flex-wrap: wrap;
    justify-content: flex-start;
    margin-bottom: 12px;
  }

  .e-resource-actions span {
    flex-basis: 100%;
    margin-right: 0;
  }

  .e-resource-actions button {
    flex: 1 1 130px;
  }

  .e-resource-category-nav {
    margin-bottom: 10px;
  }

  .e-resource-category-nav button {
    font-size: .82rem;
    padding: 8px 11px;
  }

  .e-resource-category-group {
    border-radius: 18px;
  }

  .e-resource-category-group summary {
    align-items: flex-start;
    min-height: 54px;
  }

  .e-resource-category-group summary span {
    line-height: 1.2;
  }

  .e-resource-category-group summary small {
    display: none;
  }

  .e-resource-card {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 14px !important;
  }

  .e-resource-card__top {
    gap: 10px;
    margin-bottom: 8px;
  }

  .e-resource-card h3 {
    margin-bottom: 6px;
    font-size: 1rem;
  }

  .e-resource-card p {
    -webkit-line-clamp: 2;
    font-size: .92rem;
    line-height: 1.45;
    margin-bottom: 10px;
  }

  .e-resource-card__link {
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 560px) {
  .e-resources-main .section {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }

  .e-resources-hero {
    padding-top: 36px !important;
    padding-bottom: 34px !important;
  }

  .e-resource-overview-panel,
  .e-resource-search-panel,
  .e-resource-browser {
    padding: 14px !important;
    border-radius: 18px;
  }

  .e-resource-browser__intro {
    margin-bottom: 12px;
  }

  .e-resource-page-helper {
    display: block;
    padding: 10px 11px;
    font-size: .88rem;
  }

  .e-resource-page-helper a {
    display: inline-flex;
    margin: 8px 0 0;
  }

  .e-resource-toolbar {
    gap: 9px;
    padding: 10px;
    border-radius: 16px;
  }

  .e-resource-toolbar input {
    min-height: 42px;
    font-size: .94rem;
  }

  .e-resource-count {
    font-size: .82rem;
  }

  .e-resource-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 6px;
  }

  .e-resource-stats span {
    padding: 10px 6px;
    border-radius: 14px;
  }

  .e-resource-stats strong {
    font-size: 1.3rem;
  }

  .e-resource-stats small {
    font-size: .68rem;
  }

  .e-resource-directory-card {
    min-height: auto;
  }

  .e-resource-logo-strip__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
  }

  .e-resource-logo-strip__grid a {
    min-height: 72px;
    font-size: .75rem;
    padding: 8px;
  }

  .e-resource-card__tag,
  .e-resource-card__category {
    max-width: calc(100% - 62px);
    font-size: .65rem;
    padding: 5px 8px;
  }

  .e-resource-card__logo-link {
    width: 48px;
    height: 48px;
  }

  .e-resource-card__logo-link img,
  .e-resource-card__logo-fallback {
    width: 36px;
    height: 36px;
  }
}

/* E-resources cleanup: remove secondary category chip areas and keep only the main quick navigation visible. */
.e-resource-toolbar {
  grid-template-columns: minmax(240px, 1fr) auto;
}

@media (max-width: 640px) {
  .e-resource-toolbar {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .e-resource-count {
    justify-self: start;
  }
}

/* =========================================================
   E-Resources search page compact sections update
   Reduces the two large search/browse panels while preserving the retained style.
   ========================================================= */
.e-resource-search-page .e-resource-search-section,
.e-resource-search-page .e-resource-fallback-section {
  padding-top: 16px !important;
  padding-bottom: 16px !important;
}

.e-resource-search-page .e-resource-search-panel--official,
.e-resource-search-page .e-resource-local-search {
  padding: clamp(16px, 2vw, 22px) !important;
  border-radius: 22px;
  box-shadow: 0 14px 34px rgba(68, 0, 153, .07);
}

.e-resource-search-page .e-resource-search-panel--official {
  grid-template-columns: minmax(300px, .82fr) minmax(340px, 1fr);
  gap: clamp(16px, 2.2vw, 24px);
  align-items: center;
}

.e-resource-search-page .e-resource-browser__intro h2 {
  font-size: clamp(2.15rem, 4.4vw, 3.65rem);
  line-height: 1.04;
  letter-spacing: -0.055em;
  margin-bottom: 10px;
}

.e-resource-search-page .e-resource-browser__intro p,
.e-resource-search-page .e-resource-search-tips {
  font-size: clamp(.98rem, 1.25vw, 1.1rem);
  line-height: 1.42;
}

.e-resource-search-page .e-resource-search-tips {
  display: grid;
  gap: 4px;
  margin: 10px 0 0;
  padding-left: 18px;
}

.e-resource-search-page .e-resource-search-tips li {
  margin: 0;
}

.e-resource-search-page .button-row {
  gap: 10px;
  margin-top: 16px;
}

.e-resource-search-page .button-row .btn {
  min-height: 44px;
  padding: 11px 18px;
  font-size: .9rem;
}

.e-resource-search-page .e-resource-search-embed {
  min-height: 236px !important;
  max-height: 280px;
  overflow: auto;
  padding: 14px !important;
  border-radius: 18px;
}

.e-resource-search-page .e-resource-search-embed .gcse-search,
.e-resource-search-page .e-resource-search-embed .gsc-control-cse {
  min-height: 190px !important;
}

.e-resource-search-page .e-resource-local-search__intro {
  display: grid;
  grid-template-columns: minmax(260px, .9fr) auto minmax(260px, 1fr);
  gap: clamp(14px, 2vw, 22px);
  align-items: center;
  margin-bottom: 14px;
}

.e-resource-search-page .e-resource-local-search__intro > div:first-child {
  max-width: 560px;
}

.e-resource-search-page .e-resource-local-search__intro .btn {
  justify-self: center;
  width: auto;
  min-height: 46px;
  padding: 11px 18px;
  border-radius: 999px;
  font-size: .92rem;
  line-height: 1.15;
  text-align: center;
}

.e-resource-search-page .e-resource-page-helper {
  align-self: center;
  padding: 14px 16px;
  border-radius: 16px;
  font-size: .98rem;
  line-height: 1.42;
}

.e-resource-search-page .e-resource-page-helper strong {
  display: block;
  margin-bottom: 4px;
}

.e-resource-search-page .e-resource-toolbar--compact {
  margin-top: 10px;
  margin-bottom: 12px;
  padding: 10px 12px;
}

.e-resource-search-page .e-resource-category-list {
  margin-top: 4px;
}

@media (max-width: 980px) {
  .e-resource-search-page .e-resource-search-panel--official,
  .e-resource-search-page .e-resource-local-search__intro {
    grid-template-columns: 1fr;
  }

  .e-resource-search-page .e-resource-local-search__intro .btn {
    justify-self: start;
  }

  .e-resource-search-page .e-resource-search-embed {
    min-height: 220px !important;
    max-height: 260px;
  }
}

@media (max-width: 640px) {
  .e-resource-search-page .e-resource-search-section,
  .e-resource-search-page .e-resource-fallback-section {
    padding-top: 10px !important;
    padding-bottom: 12px !important;
  }

  .e-resource-search-page .e-resource-search-panel--official,
  .e-resource-search-page .e-resource-local-search {
    padding: 14px !important;
    border-radius: 18px;
  }

  .e-resource-search-page .e-resource-browser__intro h2 {
    font-size: clamp(1.85rem, 10vw, 2.55rem);
    letter-spacing: -0.045em;
  }

  .e-resource-search-page .e-resource-browser__intro p,
  .e-resource-search-page .e-resource-search-tips,
  .e-resource-search-page .e-resource-page-helper {
    font-size: .94rem;
    line-height: 1.38;
  }

  .e-resource-search-page .button-row {
    margin-top: 12px;
  }

  .e-resource-search-page .button-row .btn,
  .e-resource-search-page .e-resource-local-search__intro .btn {
    width: 100%;
    min-height: 42px;
    padding: 10px 14px;
  }

  .e-resource-search-page .e-resource-search-embed {
    min-height: 190px !important;
    max-height: 230px;
    padding: 10px !important;
  }
}

/* =========================================================
   E-Resources tab readability fix
   Matches the Kenya National Bibliography year-button behaviour so
   selected tabs never become white-on-white.
   ========================================================= */
.e-resource-subnav a,
.e-resource-filter-chips button,
.e-resource-category-nav button,
.e-resource-actions button {
  min-height: 38px;
  border: 1px solid #e4e4f2 !important;
  border-radius: 999px;
  background: #ffffff !important;
  color: #10069F !important;
  font-weight: 900;
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
}

.e-resource-subnav a[aria-current="page"],
.e-resource-subnav a:hover,
.e-resource-subnav a:focus-visible,
.e-resource-filter-chips button:hover,
.e-resource-filter-chips button:focus-visible,
.e-resource-filter-chips button.is-active,
.e-resource-category-nav button:hover,
.e-resource-category-nav button:focus-visible,
.e-resource-category-nav button.is-active,
.e-resource-actions button:hover,
.e-resource-actions button:focus-visible,
.e-resource-actions button:active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  color: #ffffff !important;
  transform: translateY(-1px);
  outline: none;
}

body.dark-mode .e-resource-subnav a,
body.dark-mode .e-resource-filter-chips button,
body.dark-mode .e-resource-category-nav button,
body.dark-mode .e-resource-actions button {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: #31415f !important;
}

body.dark-mode .e-resource-subnav a[aria-current="page"],
body.dark-mode .e-resource-subnav a:hover,
body.dark-mode .e-resource-subnav a:focus-visible,
body.dark-mode .e-resource-filter-chips button:hover,
body.dark-mode .e-resource-filter-chips button:focus-visible,
body.dark-mode .e-resource-filter-chips button.is-active,
body.dark-mode .e-resource-category-nav button:hover,
body.dark-mode .e-resource-category-nav button:focus-visible,
body.dark-mode .e-resource-category-nav button.is-active,
body.dark-mode .e-resource-actions button:hover,
body.dark-mode .e-resource-actions button:focus-visible,
body.dark-mode .e-resource-actions button:active {
  background: #FE5000 !important;
  color: #08111f !important;
  border-color: #FE5000 !important;
}

body.high-contrast-mode .e-resource-subnav a,
body.high-contrast-mode .e-resource-filter-chips button,
body.high-contrast-mode .e-resource-category-nav button,
body.high-contrast-mode .e-resource-actions button {
  background: #000000 !important;
  color: #ffff00 !important;
  border: 2px solid #ffffff !important;
}

body.high-contrast-mode .e-resource-subnav a[aria-current="page"],
body.high-contrast-mode .e-resource-subnav a:hover,
body.high-contrast-mode .e-resource-subnav a:focus-visible,
body.high-contrast-mode .e-resource-filter-chips button:hover,
body.high-contrast-mode .e-resource-filter-chips button:focus-visible,
body.high-contrast-mode .e-resource-filter-chips button.is-active,
body.high-contrast-mode .e-resource-category-nav button:hover,
body.high-contrast-mode .e-resource-category-nav button:focus-visible,
body.high-contrast-mode .e-resource-category-nav button.is-active,
body.high-contrast-mode .e-resource-actions button:hover,
body.high-contrast-mode .e-resource-actions button:focus-visible,
body.high-contrast-mode .e-resource-actions button:active {
  background: #ffff00 !important;
  color: #000000 !important;
  border-color: #ffff00 !important;
}


/* =========================================================
   Final KNLS Pantone + E-Resources layout refinement
   Applies official purple/orange across the site and keeps
   E-Resources search/browse panels compact, landscape and readable.
   ========================================================= */
:root {
  --knls-green: #10069F;
  --knls-green-dark: #06005C;
  --knls-green-soft: #f3edff;
  --knls-blue: #10069F;
  --knls-blue-dark: #06005C;
  --knls-orange: #FE5000;
  --knls-orange-soft: #fff1e8;
  --knls-gold: #FE5000;
  --knls-gold-soft: #fff1e8;
  --primary: #10069F;
  --orange: #FE5000;
  --brand-purple: #10069F;
  --brand-orange: #FE5000;
  --shadow: 0 18px 46px rgba(68, 0, 153, 0.11);
}

/* Broad brand harmonisation for hard-coded components */
.kicker,
.nav a:hover,
.dropdown a:hover,
.e-resource-directory-card h3,
.e-resource-card h3,
.e-resource-card h3 a,
.e-resource-page-helper strong,
.footer a:hover,
.service-card h3,
.quick-access-card h3 {
  color: #10069F;
}

.btn--green,
.btn--blue,
.page-loader__mark,
.accessibility-toggle,
.e-resource-subnav a[aria-current="page"],
.e-resource-subnav a:hover,
.e-resource-subnav a:focus-visible {
  background: #10069F !important;
  border-color: #10069F !important;
}

.btn--orange,
.e-resource-filter-chips button.is-active,
.e-resource-filter-chips button:hover,
.e-resource-category-nav button.is-active,
.e-resource-category-nav button:hover,
.e-resource-actions button:hover,
.e-resource-actions button:focus-visible,
.career-tab:hover,
.career-tab.is-active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  color: #ffffff !important;
}

.e-resource-card__link,
.e-resource-directory-card a,
.footer__social a,
.service-card a,
.link-accent {
  color: #FE5000 !important;
}

/* E-Resources: compact landscape search sections */
.e-resource-search-page .e-resource-search-section,
.e-resource-search-page .e-resource-fallback-section {
  padding-top: 12px !important;
  padding-bottom: 12px !important;
}

.e-resource-search-page .e-resource-search-panel--official,
.e-resource-search-page .e-resource-local-search {
  max-width: 1120px;
  padding: clamp(14px, 1.7vw, 20px) !important;
  border-radius: 20px !important;
  box-shadow: 0 12px 28px rgba(68, 0, 153, .07) !important;
}

.e-resource-search-page .e-resource-search-panel--official {
  display: grid !important;
  grid-template-columns: minmax(480px, .95fr) minmax(420px, 1.05fr) !important;
  gap: clamp(18px, 2.2vw, 28px) !important;
  align-items: center !important;
}

.e-resource-search-page .e-resource-local-search__intro {
  display: grid !important;
  grid-template-columns: minmax(500px, 1.1fr) auto minmax(300px, .7fr) !important;
  gap: clamp(14px, 2vw, 24px) !important;
  align-items: center !important;
  margin-bottom: 12px !important;
}

.e-resource-search-page .e-resource-local-search__intro > div:first-child,
.e-resource-search-page .e-resource-search-panel--official .e-resource-browser__intro {
  max-width: none !important;
  width: 100% !important;
}

.e-resource-search-page .e-resource-browser__intro h2,
.e-resource-search-page .e-resource-local-search__intro h2 {
  max-width: 760px !important;
  font-size: clamp(2rem, 3.2vw, 3rem) !important;
  line-height: 1.03 !important;
  letter-spacing: -0.05em !important;
  text-wrap: balance;
  margin-bottom: 8px !important;
}

.e-resource-search-page .e-resource-local-search__intro h2 {
  max-width: 700px !important;
  font-size: clamp(2rem, 3vw, 2.85rem) !important;
}

.e-resource-search-page .e-resource-browser__intro p,
.e-resource-search-page .e-resource-search-tips,
.e-resource-search-page .e-resource-page-helper {
  max-width: 680px;
  font-size: .98rem !important;
  line-height: 1.45 !important;
}

.e-resource-search-page .e-resource-search-tips {
  margin: 8px 0 0 !important;
  gap: 2px !important;
}

.e-resource-search-page .button-row {
  margin-top: 12px !important;
  gap: 8px !important;
}

.e-resource-search-page .button-row .btn,
.e-resource-search-page .e-resource-local-search__intro .btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 9px 16px !important;
  font-size: .86rem !important;
  white-space: normal !important;
  line-height: 1.15 !important;
  text-align: center !important;
}

.e-resource-search-page .e-resource-search-embed {
  min-height: 210px !important;
  max-height: 245px !important;
  padding: 12px !important;
  border-radius: 16px !important;
}

.e-resource-search-page .e-resource-search-embed .gcse-search,
.e-resource-search-page .e-resource-search-embed .gsc-control-cse {
  min-height: 170px !important;
}

.e-resource-search-page .e-resource-page-helper {
  max-width: 360px !important;
  padding: 12px 14px !important;
  border-radius: 14px !important;
}

.e-resource-search-page .e-resource-toolbar--compact {
  margin-top: 8px !important;
  margin-bottom: 10px !important;
  padding: 8px 10px !important;
  border-radius: 16px !important;
}

.e-resource-search-page .e-resource-toolbar input {
  min-height: 40px !important;
  padding: 8px 12px !important;
}

.e-resource-search-page .e-resource-count {
  font-size: .82rem !important;
}

/* Keep resource cards neat after the compact intro. */
.e-resource-grid--search-engine {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 14px !important;
}

.e-resource-grid--search-engine .e-resource-card {
  min-height: 220px !important;
  padding: 15px !important;
}

.e-resource-grid--search-engine .e-resource-card p {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Tabs behave like the bibliography year buttons: purple text until active/hover, orange active state. */
.e-resource-subnav a,
.e-resource-filter-chips button,
.e-resource-category-nav button,
.e-resource-actions button {
  background: #ffffff !important;
  color: #10069F !important;
  border: 1px solid rgba(68, 0, 153, .18) !important;
}

.e-resource-filter-chips button.is-active,
.e-resource-filter-chips button:hover,
.e-resource-filter-chips button:focus-visible,
.e-resource-category-nav button.is-active,
.e-resource-category-nav button:hover,
.e-resource-category-nav button:focus-visible,
.e-resource-actions button:hover,
.e-resource-actions button:focus-visible,
.e-resource-actions button:active {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
}

.e-resource-subnav a[aria-current="page"],
.e-resource-subnav a:hover,
.e-resource-subnav a:focus-visible {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
}

@media (max-width: 1180px) {
  .e-resource-search-page .e-resource-search-panel--official,
  .e-resource-search-page .e-resource-local-search__intro {
    grid-template-columns: 1fr !important;
    align-items: stretch !important;
  }

  .e-resource-search-page .e-resource-local-search__intro .btn {
    justify-self: start !important;
  }

  .e-resource-grid--search-engine {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .e-resource-search-page .e-resource-browser__intro h2,
  .e-resource-search-page .e-resource-local-search__intro h2 {
    font-size: clamp(1.8rem, 8vw, 2.35rem) !important;
    line-height: 1.06 !important;
  }

  .e-resource-search-page .e-resource-browser__intro p,
  .e-resource-search-page .e-resource-search-tips,
  .e-resource-search-page .e-resource-page-helper {
    font-size: .92rem !important;
  }

  .e-resource-search-page .button-row .btn,
  .e-resource-search-page .e-resource-local-search__intro .btn {
    width: 100% !important;
  }

  .e-resource-search-page .e-resource-search-embed {
    min-height: 170px !important;
    max-height: 210px !important;
  }

  .e-resource-grid--search-engine {
    grid-template-columns: 1fr !important;
  }
}

/* Correct v.tabu featured-service image: use the latest uploaded brochure photo and centre it in the card. */
.homepage-service-card img[src*="vtabu-brochure-updated"],
.homepage-service-card img[src*="vtabu-brochure-current"] {
  object-fit: cover !important;
  object-position: 42% 52% !important;
}

@media (max-width: 700px) {
  .homepage-service-card img[src*="vtabu-brochure-updated"],
  .homepage-service-card img[src*="vtabu-brochure-current"] {
    object-position: 40% 54% !important;
  }
}


/* =========================================================
   Accessibility icon + Service Charter video reliability fixes
   ========================================================= */
.accessibility-toggle span:first-child {
  font-size: 1.65rem !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
}

@media (max-width: 640px) {
  .accessibility-toggle span:first-child {
    font-size: 1.9rem !important;
  }
}

.service-video-section .video-grid {
  align-items: stretch;
}

.service-video-section .video-frame {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, #10069F, #06005C);
}

.service-video-section .video-frame::before {
  content: "Loading video...";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .04em;
  z-index: 0;
}

.service-video-section .video-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  z-index: 1;
  background: #ffffff;
}

.video-fallback-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 14px;
  padding: 10px 14px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff !important;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 12px 28px rgba(254, 80, 0, .20);
}

.video-fallback-link:hover,
.video-fallback-link:focus-visible {
  background: #10069F;
  outline: 3px solid rgba(254, 80, 0, .25);
  outline-offset: 3px;
}

body.dark-mode .service-video-section,
body.dark-mode .video-card {
  background: #101827 !important;
}

body.dark-mode .video-card__body h3,
body.dark-mode .video-card__body p {
  color: #f8fafc !important;
}

body.high-contrast-mode .video-fallback-link {
  background: #ffff00 !important;
  color: #000000 !important;
  border: 2px solid #ffffff !important;
}

/* =========================================================
   Service Charter YouTube thumbnail fix
   Keeps visible thumbnails in local/browser preview before playback.
   ========================================================= */
.service-video-section .video-frame {
  background: linear-gradient(135deg, #10069F, #06005C) !important;
}

.service-video-section .video-frame::before {
  content: "" !important;
  background: linear-gradient(135deg, rgba(16,6,159,.92), rgba(254,80,0,.72));
  z-index: 0;
}

.service-video-section .video-frame iframe.youtube-thumb-embed {
  background: transparent !important;
}

.service-video-section .video-card__body {
  padding-top: 18px !important;
}

@media (max-width: 760px) {
  .service-video-section .video-grid {
    grid-template-columns: 1fr !important;
  }
}

/* Requested contact and board cleanup */
.top-strip__contact {
  flex-wrap: wrap;
  row-gap: 4px;
}
.top-strip__contact a {
  white-space: nowrap;
}
.board-management-card .management-card__photo,
.board-management-card .management-card__photo img {
  outline: 0 !important;
}
.board-management-card .management-card__photo img {
  display: block;
}
.contact-location-card__image figcaption {
  display: none !important;
}
@media (max-width: 720px) {
  .top-strip { font-size: .74rem; }
  .top-strip__inner { padding: 6px 0 !important; }
  .top-strip__contact { gap: 6px; line-height: 1.2; }
}

/* Management team photo centering refinement
   Keeps the management portraits visually centered inside the circular frames,
   reducing excess white space above heads while preserving the Board styling. */
.management-section .management-card__photo {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
}

.management-section .management-card__photo img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center center !important;
  transform: scale(1.08);
  transform-origin: center center;
}

@media (max-width: 720px) {
  .management-section .management-card__photo img {
    transform: scale(1.06);
  }
}


/* =========================================================
   Partners & Sponsors refreshed page
   ========================================================= */
.partners-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 20%, rgba(254,80,0,.30), transparent 28%),
    radial-gradient(circle at 90% 10%, rgba(16,6,159,.35), transparent 32%),
    linear-gradient(135deg, var(--knls-green-dark), var(--knls-blue-072));
}

.partners-hero::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(6,0,92,.82), rgba(6,0,92,.45));
  pointer-events: none;
}

.partners-hero .page-hero__inner { position: relative; z-index: 1; }
.partners-hero h1,
.partners-hero p,
.partners-hero .kicker,
.partners-hero .breadcrumbs,
.partners-hero .breadcrumbs a { color: #fff; }
.partners-hero .kicker { color: var(--knls-orange-021); }

.partner-logo-ribbon {
  position: relative;
  overflow: hidden;
  background: #fff;
  border-bottom: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 12px 38px rgba(16,6,159,.08);
  padding: 16px 0;
}

.partner-logo-ribbon__track {
  display: flex;
  width: max-content;
  gap: 18px;
  animation: partnerMarqueeRight 36s linear infinite;
  will-change: transform;
}

.partner-logo-ribbon:hover .partner-logo-ribbon__track { animation-play-state: paused; }

.partner-logo-ribbon__group {
  display: flex;
  align-items: center;
  gap: 18px;
  padding-inline: 9px;
}

.partner-logo-ribbon__group a {
  width: 150px;
  height: 72px;
  display: grid;
  place-items: center;
  padding: 10px 14px;
  border-radius: 20px;
  background: #fff;
  border: 1px solid rgba(16,6,159,.13);
  box-shadow: 0 10px 26px rgba(16,6,159,.07);
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}

.partner-logo-ribbon__group a:hover,
.partner-logo-ribbon__group a:focus-visible {
  transform: translateY(-3px);
  border-color: var(--knls-orange-021);
  box-shadow: 0 16px 34px rgba(254,80,0,.14);
}

.partner-logo-ribbon__group img {
  max-width: 100%;
  max-height: 48px;
  object-fit: contain;
}

.partner-logo-ribbon__fade {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 110px;
  z-index: 2;
  pointer-events: none;
}
.partner-logo-ribbon__fade--left { left: 0; background: linear-gradient(90deg, #fff, transparent); }
.partner-logo-ribbon__fade--right { right: 0; background: linear-gradient(-90deg, #fff, transparent); }

@keyframes partnerMarqueeRight {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

.partners-story-section { background: linear-gradient(180deg, #fff, #f7f7ff); }

.partners-story-intro {
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 36px;
  align-items: start;
  margin-bottom: 24px;
}

.partners-story-intro h2 { max-width: 720px; }
.partners-story-intro p { font-size: 1.03rem; }

.partner-impact-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.partner-impact-card {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.86);
  border: 1px solid rgba(16,6,159,.11);
  box-shadow: 0 16px 45px rgba(16,6,159,.08);
}

.partner-impact-card span {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 16px;
  background: var(--knls-gold-soft);
  color: var(--knls-orange-021);
  font-size: 1.35rem;
  margin-bottom: 12px;
}

.partner-impact-card h3 { color: var(--knls-blue-072); margin-bottom: 6px !important; }
.partner-impact-card p { margin: 0; font-size: .94rem; }

.partners-section--modern { background: #fff; }

.partners-story-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
}

.partner-story-card {
  position: relative;
  display: grid;
  grid-template-columns: 158px 1fr;
  gap: 22px;
  align-items: stretch;
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(180deg, #fff, #fbfbff);
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 20px 60px rgba(16,6,159,.08);
  overflow: hidden;
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.partner-story-card::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 6px;
  background: linear-gradient(180deg, var(--knls-blue-072), var(--knls-orange-021));
}

.partner-story-card:hover {
  transform: translateY(-5px);
  border-color: rgba(254,80,0,.35);
  box-shadow: 0 28px 74px rgba(16,6,159,.13);
}

.partner-story-card__logo {
  min-height: 150px;
  display: grid;
  place-items: center;
  padding: 18px;
  border-radius: 22px;
  background: #fff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.7), 0 12px 28px rgba(16,6,159,.07);
  transition: transform .2s ease, border-color .2s ease;
  text-decoration: none;
}

.partner-story-card__logo:hover,
.partner-story-card__logo:focus-visible { transform: translateY(-2px); border-color: var(--knls-orange-021); }

.partner-story-card__logo img {
  max-width: 100%;
  max-height: 90px;
  object-fit: contain;
}

.partner-story-card__logo--double {
  grid-template-columns: 1fr;
  gap: 12px;
}
.partner-story-card__logo--double a { display: grid; place-items: center; width: 100%; }
.partner-story-card__logo--double img { max-height: 64px; }

.partner-story-card__content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.partner-story-card__tag {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 999px;
  background: var(--knls-gold-soft);
  color: var(--knls-orange-021);
  font-size: .76rem;
  line-height: 1;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: 10px;
}

.partner-story-card h3 {
  color: var(--knls-blue-072);
  font-size: 1.26rem;
  margin-bottom: 5px !important;
}

.partner-story-card h4 {
  color: var(--knls-black);
  font-size: .98rem;
  margin: 0 0 10px !important;
  line-height: 1.35;
}

.partner-story-card p {
  font-size: .96rem;
  margin-bottom: 14px;
}

.partner-story-card .text-link { margin-top: auto; }
.partner-story-card__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: auto; }

.partners-thank-you {
  padding: 12px 0 52px;
  background: linear-gradient(180deg, #fff, #f7f7ff);
}

.partners-thank-you__card {
  position: relative;
  overflow: hidden;
  padding: 34px;
  border-radius: 30px;
  background:
    radial-gradient(circle at 10% 20%, rgba(254,80,0,.28), transparent 28%),
    linear-gradient(135deg, var(--knls-blue-072), var(--knls-green-dark));
  box-shadow: 0 24px 75px rgba(16,6,159,.20);
}

.partners-thank-you__card h2,
.partners-thank-you__card p { color: #fff; max-width: 780px; }
.partners-thank-you__card .kicker { color: var(--knls-orange-021); }
.partners-thank-you__card .button { margin-top: 8px; }

/* Make the Partners & Sponsors CTA clearly visible on the dark hero/card background */
.partners-thank-you__card .button.button--primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 48px;
  padding: 12px 24px;
  border-radius: 999px;
  background: var(--knls-orange-021);
  color: #ffffff !important;
  border: 2px solid rgba(255,255,255,.72);
  box-shadow: 0 16px 35px rgba(254,80,0,.28), 0 0 0 4px rgba(255,255,255,.12);
  font-weight: 900;
  line-height: 1.1;
  text-decoration: none;
  letter-spacing: .01em;
}

.partners-thank-you__card .button.button--primary:hover,
.partners-thank-you__card .button.button--primary:focus-visible {
  background: #ffffff;
  color: var(--knls-blue-072) !important;
  border-color: var(--knls-orange-021);
  transform: translateY(-1px);
  box-shadow: 0 18px 40px rgba(16,6,159,.24), 0 0 0 4px rgba(254,80,0,.18);
}

body.dark-mode .partner-logo-ribbon,
body.dark-mode .partners-story-section,
body.dark-mode .partners-section--modern,
body.dark-mode .partners-thank-you { background: #101226; }
body.dark-mode .partner-logo-ribbon__group a,
body.dark-mode .partner-impact-card,
body.dark-mode .partner-story-card,
body.dark-mode .partner-story-card__logo { background: #171a33; border-color: rgba(255,255,255,.18); }
body.dark-mode .partner-logo-ribbon__fade--left { background: linear-gradient(90deg, #101226, transparent); }
body.dark-mode .partner-logo-ribbon__fade--right { background: linear-gradient(-90deg, #101226, transparent); }
body.dark-mode .partner-story-card h4 { color: #fff; }

body.high-contrast-mode .partner-logo-ribbon,
body.high-contrast-mode .partners-story-section,
body.high-contrast-mode .partners-section--modern,
body.high-contrast-mode .partners-thank-you { background: #000 !important; }
body.high-contrast-mode .partner-logo-ribbon__group a,
body.high-contrast-mode .partner-impact-card,
body.high-contrast-mode .partner-story-card,
body.high-contrast-mode .partner-story-card__logo,
body.high-contrast-mode .partners-thank-you__card { background: #000 !important; border-color: #fff !important; box-shadow: none !important; }
body.high-contrast-mode .partner-logo-ribbon__fade { display: none; }
body.high-contrast-mode .partner-story-card h4,
body.high-contrast-mode .partners-thank-you__card h2,
body.high-contrast-mode .partners-thank-you__card p { color: #fff !important; }

@media (prefers-reduced-motion: reduce) {
  .partner-logo-ribbon__track { animation: none; transform: translateX(0); }
}

@media (max-width: 980px) {
  .partners-story-intro,
  .partners-story-grid { grid-template-columns: 1fr; }
  .partner-impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 640px) {
  .partner-logo-ribbon { padding: 12px 0; }
  .partner-logo-ribbon__group a { width: 124px; height: 62px; border-radius: 16px; }
  .partner-logo-ribbon__group img { max-height: 38px; }
  .partner-logo-ribbon__fade { width: 38px; }
  .partner-impact-grid { grid-template-columns: 1fr; }
  .partner-story-card { grid-template-columns: 1fr; padding: 18px !important; }
  .partner-story-card__logo { min-height: 118px; }
  .partner-story-card__logo img { max-height: 74px; }
  .partners-thank-you__card { padding: 24px; border-radius: 24px; }
}

/* Partners page: keep the infinite logo ribbon directly under the hero title */
.partners-hero__inner {
  align-items: end;
}

.partners-hero__ribbon {
  grid-column: 1 / -1;
  margin-top: 18px;
  margin-bottom: 0;
  padding: 12px 0;
  border-radius: 28px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 20px 48px rgba(0,0,0,.18);
  z-index: 2;
}

.partners-hero__ribbon .partner-logo-ribbon__track {
  animation: partnerMarqueeRight 32s linear infinite;
}

.partners-hero__ribbon .partner-logo-ribbon__fade--left {
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}

.partners-hero__ribbon .partner-logo-ribbon__fade--right {
  background: linear-gradient(-90deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}

.partners-hero__ribbon .partner-logo-ribbon__group a {
  background: #ffffff;
}

body.dark-mode .partners-hero__ribbon {
  background: rgba(16,18,38,.96) !important;
  border-color: rgba(255,255,255,.18) !important;
}

body.dark-mode .partners-hero__ribbon .partner-logo-ribbon__fade--left {
  background: linear-gradient(90deg, rgba(16,18,38,.98), rgba(16,18,38,0));
}

body.dark-mode .partners-hero__ribbon .partner-logo-ribbon__fade--right {
  background: linear-gradient(-90deg, rgba(16,18,38,.98), rgba(16,18,38,0));
}

@media (max-width: 980px) {
  .partners-hero__inner {
    grid-template-columns: 1fr;
  }
  .partners-hero__ribbon {
    margin-top: 16px;
  }
}

@media (max-width: 640px) {
  .partners-hero__ribbon {
    border-radius: 22px;
    padding: 10px 0;
  }
  .partners-hero__ribbon .partner-logo-ribbon__track {
    animation-duration: 26s;
  }
}


/* =========================================================
   Partners hero background ribbon refinement
   Moves the partner/sponsor logo ribbon into the hero background,
   blends it with the top banner, and keeps the infinite loop active.
   ========================================================= */
.partners-hero {
  min-height: 350px;
  isolation: isolate;
}

.partners-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  background:
    linear-gradient(90deg, rgba(16,6,159,.92), rgba(16,6,159,.58) 48%, rgba(255,89,0,.34)),
    radial-gradient(circle at 14% 18%, rgba(255,89,0,.24), transparent 30%);
  pointer-events: none;
}

.partners-hero::after {
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(6,0,92,.88), rgba(6,0,92,.64) 42%, rgba(6,0,92,.40)),
    linear-gradient(180deg, rgba(6,0,92,.18), rgba(6,0,92,.34));
}

.partners-hero .page-hero__inner {
  position: relative;
  z-index: 2;
  min-height: 210px;
  align-items: center;
}

.partners-hero .page-hero__inner > div:first-child,
.partners-hero .breadcrumbs {
  position: relative;
  z-index: 4;
}

.partners-hero .page-hero__inner > div:first-child {
  max-width: 820px;
  padding: 12px 0;
}

.partners-hero__ribbon.partner-logo-ribbon {
  position: absolute;
  z-index: 2;
  left: 50%;
  top: 50%;
  width: 100vw;
  transform: translate(-50%, -50%);
  padding: 0;
  border: 0;
  background: transparent;
  box-shadow: none;
  opacity: .22;
  filter: saturate(.9) contrast(1.05);
  pointer-events: none;
  mix-blend-mode: screen;
}

.partners-hero__ribbon .partner-logo-ribbon__track {
  animation: partnerMarqueeRight 34s linear infinite;
  gap: 20px;
}

.partners-hero__ribbon .partner-logo-ribbon__group {
  gap: 20px;
  padding-inline: 10px;
}

.partners-hero__ribbon .partner-logo-ribbon__group a {
  width: 210px;
  height: 100px;
  padding: 14px 22px;
  border-radius: 22px;
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(255,255,255,.68);
  box-shadow: 0 14px 42px rgba(255,255,255,.14);
  backdrop-filter: blur(5px);
}

.partners-hero__ribbon .partner-logo-ribbon__group img {
  max-height: 72px;
  filter: grayscale(.1) contrast(1.05);
}

.partners-hero__ribbon .partner-logo-ribbon__fade {
  display: none;
}

body.dark-mode .partners-hero__ribbon.partner-logo-ribbon,
body.high-contrast-mode .partners-hero__ribbon.partner-logo-ribbon {
  opacity: .18;
  mix-blend-mode: normal;
}

body.high-contrast-mode .partners-hero::before,
body.high-contrast-mode .partners-hero::after {
  background: #000 !important;
}

@media (max-width: 820px) {
  .partners-hero {
    min-height: 320px;
  }

  .partners-hero .page-hero__inner {
    min-height: 230px;
    align-items: end;
  }

  .partners-hero__ribbon.partner-logo-ribbon {
    top: 44%;
    opacity: .18;
  }

  .partners-hero__ribbon .partner-logo-ribbon__group a {
    width: 160px;
    height: 78px;
    border-radius: 20px;
    padding: 10px 16px;
  }

  .partners-hero__ribbon .partner-logo-ribbon__group img {
    max-height: 52px;
  }
}

@media (max-width: 560px) {
  .partners-hero {
    min-height: 300px;
  }

  .partners-hero__ribbon.partner-logo-ribbon {
    opacity: .15;
  }

  .partners-hero__ribbon .partner-logo-ribbon__track {
    animation-duration: 28s;
  }
}


/* Enlarged background logo ribbon on Partners & Sponsors hero */
.partners-hero__ribbon.partner-logo-ribbon {
  opacity: .24;
}
.partners-hero__ribbon .partner-logo-ribbon__track {
  gap: 28px;
}
.partners-hero__ribbon .partner-logo-ribbon__group {
  gap: 28px;
}
@media (max-width: 820px) {
  .partners-hero__ribbon.partner-logo-ribbon { opacity: .18; }
}
@media (max-width: 560px) {
  .partners-hero__ribbon.partner-logo-ribbon { opacity: .14; }
}


/* Service charter downloadable document updates */
.document-grid--service-charter .document-card {
  align-items: stretch;
}

.document-card__icon--docx {
  font-size: 0.78rem;
  letter-spacing: 0.04em;
}

@media (max-width: 640px) {
  .document-grid--service-charter .document-card {
    gap: 14px;
  }
}

/* Service Charter document buttons: restore normal compact size */
.document-grid--service-charter .document-card {
  align-items: center !important;
}

.document-grid--service-charter .document-card .btn,
.document-grid--service-charter .document-card a.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 40px !important;
  padding: 0 16px !important;
  align-self: center !important;
  justify-self: end !important;
  grid-column: auto !important;
  white-space: nowrap !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
}

@media (max-width: 900px) {
  .document-grid--service-charter .document-card .btn,
  .document-grid--service-charter .document-card a.btn {
    width: fit-content !important;
    justify-self: start !important;
    grid-column: auto !important;
  }
}


/* =========================================================
   Recognition & Awards creative page refresh
   ========================================================= */
body.awards-page .awards-hero {
  position: relative;
  overflow: hidden;
  min-height: 460px;
  background:
    radial-gradient(circle at 78% 18%, rgba(254, 80, 0, .30), transparent 26%),
    linear-gradient(135deg, rgba(16, 6, 159, .96), rgba(6, 0, 92, .94));
}

body.awards-page .awards-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(120deg, rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(30deg, rgba(255,255,255,.06) 1px, transparent 1px);
  background-size: 58px 58px;
  opacity: .55;
  pointer-events: none;
}

body.awards-page .awards-hero__glow {
  position: absolute;
  width: 260px;
  height: 260px;
  border-radius: 999px;
  filter: blur(8px);
  opacity: .55;
  pointer-events: none;
}

body.awards-page .awards-hero__glow--one {
  right: 8%;
  top: 22%;
  background: rgba(254, 80, 0, .35);
}

body.awards-page .awards-hero__glow--two {
  left: -80px;
  bottom: -90px;
  background: rgba(255,255,255,.14);
}

body.awards-page .awards-hero__inner {
  position: relative;
  z-index: 1;
  grid-template-columns: minmax(0, 780px) auto;
  align-items: end;
  min-height: 360px;
}

body.awards-page .awards-hero h1,
body.awards-page .awards-hero p,
body.awards-page .awards-hero .kicker,
body.awards-page .awards-hero .breadcrumbs,
body.awards-page .awards-hero .breadcrumbs a {
  color: #fff;
}

body.awards-page .awards-hero h1 {
  max-width: 760px;
}

body.awards-page .awards-hero p:not(.kicker) {
  max-width: 720px;
  font-size: 1.08rem;
  color: rgba(255,255,255,.88);
}

body.awards-page .awards-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}

body.awards-page .awards-hero__outline {
  color: #fff;
  border-color: rgba(255,255,255,.42);
  background: rgba(255,255,255,.08);
}

body.awards-page .awards-hero__outline:hover,
body.awards-page .awards-hero__outline:focus-visible {
  background: #fff;
  color: var(--knls-blue-072);
}

body.awards-page .awards-overview-section,
body.awards-page .awards-context-section {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
}

body.awards-page .awards-intro-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(280px, .75fr);
  gap: 24px;
  align-items: stretch;
}

body.awards-page .awards-intro-card,
body.awards-page .awards-stat-card,
body.awards-page .award-spotlight-card,
body.awards-page .international-award-card,
body.awards-page .awards-context-card,
body.awards-page .awards-source-card,
body.awards-page .award-year-card {
  border: 1px solid rgba(16, 6, 159, .10);
  background: rgba(255,255,255,.96);
  box-shadow: 0 22px 60px rgba(16, 6, 159, .10);
}

body.awards-page .awards-intro-card--feature {
  position: relative;
  overflow: hidden;
  min-height: 310px;
  padding: clamp(28px, 4vw, 52px);
  border-radius: 36px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.98), rgba(255,241,232,.92)),
    radial-gradient(circle at 88% 10%, rgba(254,80,0,.18), transparent 32%);
}

body.awards-page .awards-medal {
  position: absolute;
  right: 34px;
  top: 30px;
  display: grid;
  place-items: center;
  width: 74px;
  height: 74px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--knls-orange-021), #ff8a45);
  color: #fff;
  font-size: 2rem;
  box-shadow: 0 22px 42px rgba(254,80,0,.22);
}

body.awards-page .awards-stat-stack {
  display: grid;
  gap: 14px;
}

body.awards-page .awards-stat-card {
  padding: 24px;
  border-radius: 26px;
}

body.awards-page .awards-stat-card strong {
  display: block;
  color: var(--knls-blue-072);
  font-size: clamp(2rem, 4vw, 3.1rem);
  line-height: 1;
  letter-spacing: -.05em;
}

body.awards-page .awards-stat-card span {
  display: block;
  margin-top: 8px;
  color: #65756c;
  font-weight: 900;
}

body.awards-page .awards-spotlight-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-top: 24px;
}

body.awards-page .award-spotlight-card {
  display: grid;
  grid-template-columns: 74px 1fr;
  gap: 18px;
  align-items: start;
  padding: 24px;
  border-radius: 28px;
}

body.awards-page .award-spotlight-card__icon {
  display: grid;
  place-items: center;
  width: 64px;
  height: 64px;
  border-radius: 20px;
  background: #fff1e8;
  color: var(--knls-orange-021);
  font-size: 1.8rem;
}

body.awards-page .awards-national-section {
  background: #f7f7ff;
}

body.awards-page .award-year-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}

body.awards-page .award-year-card {
  overflow: hidden;
  border-radius: 26px;
}

body.awards-page .award-year-card summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  list-style: none;
  cursor: pointer;
  padding: 18px 20px;
  background: linear-gradient(135deg, #ffffff, #fff6f0);
}

body.awards-page .award-year-card summary::-webkit-details-marker { display: none; }

body.awards-page .award-year-card summary span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 70px;
  padding: 8px 12px;
  border-radius: 999px;
  background: var(--knls-blue-072);
  color: #fff;
  font-size: 1.12rem;
  font-weight: 1000;
}

body.awards-page .award-year-card summary strong {
  color: var(--knls-orange-021);
  font-weight: 1000;
}

body.awards-page .award-year-card ul {
  margin: 0;
  padding: 18px 24px 22px 42px;
  background: #fff;
}

body.awards-page .award-year-card li {
  color: #526071;
  margin-bottom: 8px;
}

body.awards-page .award-year-card li::marker { color: var(--knls-orange-021); }

body.awards-page .awards-international-section {
  background: #ffffff;
}

body.awards-page .international-awards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
}

body.awards-page .international-award-card {
  position: relative;
  overflow: hidden;
  padding: 24px;
  border-radius: 28px;
}

body.awards-page .international-award-card::after {
  content: "";
  position: absolute;
  right: -28px;
  top: -28px;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: rgba(254,80,0,.10);
}

body.awards-page .international-award-card--major {
  grid-column: span 2;
  background:
    linear-gradient(135deg, rgba(16,6,159,.97), rgba(6,0,92,.93));
  color: #fff;
  border-color: rgba(16,6,159,.25);
}

body.awards-page .international-award-card--major h3,
body.awards-page .international-award-card--major p,
body.awards-page .international-award-card--major li,
body.awards-page .international-award-card--major b {
  color: #fff;
}

body.awards-page .international-award-card__year {
  display: inline-flex;
  margin-bottom: 16px;
  padding: 7px 12px;
  border-radius: 999px;
  background: #fff1e8;
  color: var(--knls-orange-021);
  font-weight: 1000;
}

body.awards-page .international-award-card--major .international-award-card__year {
  background: rgba(255,255,255,.14);
  color: #fff;
}

body.awards-page .international-award-card h3 {
  color: var(--knls-blue-072);
}

body.awards-page .international-award-card ul {
  margin: 0;
  padding-left: 20px;
}

body.awards-page .international-award-card li {
  margin-bottom: 8px;
  color: #65756c;
}

body.awards-page .awards-context-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr);
  gap: 22px;
  align-items: stretch;
}

body.awards-page .awards-context-card,
body.awards-page .awards-source-card {
  padding: 30px;
  border-radius: 30px;
}

body.awards-page .awards-source-card {
  display: grid;
  align-content: start;
  gap: 12px;
  background: linear-gradient(135deg, var(--knls-blue-072), #06005C);
}

body.awards-page .awards-source-card h3 {
  color: #fff;
  margin-bottom: 8px;
}

body.awards-page .awards-source-card a {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #fff;
  text-decoration: none;
  font-weight: 900;
}

body.awards-page .awards-source-card a::after {
  content: "↗";
  color: var(--knls-orange-021);
}

body.awards-page .awards-source-card a:hover,
body.awards-page .awards-source-card a:focus-visible {
  background: #fff;
  color: var(--knls-blue-072);
}

body.dark-mode.awards-page .awards-overview-section,
body.dark-mode.awards-page .awards-context-section,
body.dark-mode.awards-page .awards-national-section,
body.dark-mode.awards-page .awards-international-section {
  background: #0c1024;
}

body.dark-mode.awards-page .awards-intro-card,
body.dark-mode.awards-page .awards-stat-card,
body.dark-mode.awards-page .award-spotlight-card,
body.dark-mode.awards-page .international-award-card,
body.dark-mode.awards-page .awards-context-card,
body.dark-mode.awards-page .award-year-card,
body.dark-mode.awards-page .award-year-card ul {
  background: #141a35;
  border-color: rgba(255,255,255,.12);
}

body.dark-mode.awards-page .award-year-card summary {
  background: #141a35;
}

body.dark-mode.awards-page .awards-intro-card--feature {
  background: #141a35;
}

@media (max-width: 960px) {
  body.awards-page .awards-hero__inner,
  body.awards-page .awards-intro-grid,
  body.awards-page .awards-context-grid {
    grid-template-columns: 1fr;
  }

  body.awards-page .awards-spotlight-grid,
  body.awards-page .award-year-grid {
    grid-template-columns: 1fr;
  }

  body.awards-page .international-awards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body.awards-page .international-award-card--major {
    grid-column: span 2;
  }
}

@media (max-width: 640px) {
  body.awards-page .awards-hero {
    min-height: auto;
  }

  body.awards-page .awards-hero__inner {
    min-height: 330px;
    padding-block: 48px;
  }

  body.awards-page .awards-hero__actions .btn {
    width: 100%;
    justify-content: center;
  }

  body.awards-page .awards-medal {
    position: static;
    margin-bottom: 18px;
    width: 58px;
    height: 58px;
    font-size: 1.45rem;
  }

  body.awards-page .awards-intro-card--feature,
  body.awards-page .award-spotlight-card,
  body.awards-page .international-award-card,
  body.awards-page .awards-context-card,
  body.awards-page .awards-source-card {
    border-radius: 22px;
    padding: 20px;
  }

  body.awards-page .award-spotlight-card {
    grid-template-columns: 1fr;
  }

  body.awards-page .international-awards-grid {
    grid-template-columns: 1fr;
  }

  body.awards-page .international-award-card--major {
    grid-column: auto;
  }

  body.awards-page .award-year-card summary {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}

/* =========================================================
   KNLS requested refinements: Recognition & Awards + Who We Are
   - Subtle building background for recognition page
   - Compact hero/section spacing
   - Structured international recognition grid
   - Strong contrast on blue award cards
   - Responsive mobile fixes and non-zoomed Who We Are hero
   ========================================================= */
body.awards-page {
  background: #f7f8ff;
}

body.awards-page main {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: #f7f8ff;
}

body.awards-page main::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(255,255,255,.88), rgba(247,248,255,.86)),
    url("../images/homepage-hero/hero-01-external-maktaba-kuu.webp") center center / cover no-repeat;
  opacity: .18;
  filter: saturate(.9) contrast(.96);
}

body.awards-page .awards-hero {
  min-height: 320px !important;
  background:
    radial-gradient(circle at 82% 18%, rgba(254, 80, 0, .24), transparent 24%),
    linear-gradient(135deg, rgba(16, 6, 159, .96), rgba(6, 0, 92, .94)) !important;
}

body.awards-page .awards-hero::before {
  opacity: .34 !important;
}

body.awards-page .awards-hero__glow {
  width: 180px !important;
  height: 180px !important;
  opacity: .38 !important;
}

body.awards-page .awards-hero__inner {
  min-height: 235px !important;
  padding-block: 34px !important;
  align-items: center !important;
}

body.awards-page .awards-hero h1 {
  font-size: clamp(2.2rem, 4.4vw, 4.25rem) !important;
  line-height: 1.02 !important;
  margin-bottom: 10px !important;
}

body.awards-page .awards-hero p:not(.kicker) {
  max-width: 680px !important;
  font-size: clamp(.95rem, 1.15vw, 1.05rem) !important;
}

body.awards-page .awards-hero__actions {
  margin-top: 16px !important;
}

body.awards-page .section {
  padding-top: 42px !important;
  padding-bottom: 42px !important;
}

body.awards-page .section-title {
  margin-bottom: 24px !important;
}

body.awards-page .section-title h2 {
  font-size: clamp(2rem, 3.5vw, 3.5rem) !important;
  line-height: 1.05 !important;
}

body.awards-page .awards-overview-section,
body.awards-page .awards-context-section,
body.awards-page .awards-national-section,
body.awards-page .awards-international-section {
  background: rgba(247, 248, 255, .72) !important;
  backdrop-filter: blur(1px);
}

body.awards-page .awards-international-section,
body.awards-page .awards-overview-section {
  background: rgba(255, 255, 255, .66) !important;
}

body.awards-page .awards-intro-grid,
body.awards-page .awards-spotlight-grid,
body.awards-page .awards-context-grid,
body.awards-page .award-year-grid,
body.awards-page .international-awards-grid {
  gap: 16px !important;
}

body.awards-page .awards-intro-card--feature {
  min-height: 240px !important;
  padding: clamp(22px, 3vw, 38px) !important;
}

body.awards-page .award-spotlight-card,
body.awards-page .awards-stat-card,
body.awards-page .awards-context-card,
body.awards-page .awards-source-card,
body.awards-page .international-award-card {
  padding: clamp(18px, 2vw, 26px) !important;
}

/* Prevent accordion cards from stretching into large empty white blocks. */
body.awards-page .award-year-grid {
  align-items: start !important;
}

body.awards-page .award-year-card summary {
  padding: 15px 18px !important;
}

body.awards-page .award-year-card ul {
  padding: 16px 22px 18px 38px !important;
}

/* Structured international recognition layout: no more random placement. */
body.awards-page .international-awards-grid {
  display: grid !important;
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  align-items: start !important;
}

body.awards-page .international-award-card {
  grid-column: span 4;
  min-height: 210px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

body.awards-page .international-award-card:nth-child(1) {
  grid-column: span 8;
  min-height: 250px;
}

body.awards-page .international-award-card:nth-child(2) {
  grid-column: span 4;
}

body.awards-page .international-award-card:nth-child(3) {
  grid-column: span 4;
}

body.awards-page .international-award-card:nth-child(4) {
  grid-column: span 8;
  min-height: 220px;
}

body.awards-page .international-award-card:nth-child(5),
body.awards-page .international-award-card:nth-child(6) {
  grid-column: span 6;
}

/* Restore readable contrast on the dark-blue cards. */
body.awards-page .international-award-card--major,
body.awards-page .international-award-card--major h3,
body.awards-page .international-award-card--major p,
body.awards-page .international-award-card--major li,
body.awards-page .international-award-card--major b,
body.awards-page .international-award-card--major strong {
  color: #ffffff !important;
}

body.awards-page .international-award-card--major li,
body.awards-page .international-award-card--major p {
  color: rgba(255,255,255,.9) !important;
}

body.awards-page .international-award-card--major .international-award-card__year {
  background: rgba(255,255,255,.18) !important;
  color: #ffffff !important;
}

body.awards-page .international-award-card--major li::marker {
  color: #ffb088 !important;
}

body.awards-page .international-award-card:not(.international-award-card--major) h3 {
  color: var(--knls-blue-072) !important;
}

body.awards-page .international-award-card:not(.international-award-card--major) p,
body.awards-page .international-award-card:not(.international-award-card--major) li {
  color: #526071 !important;
}

/* Who We Are hero: show the KNLS image more naturally on laptop/desktop. */
body.who-we-are-page .page-hero--who-we-are {
  background-color: #141848 !important;
  background-image:
    linear-gradient(90deg, rgba(20, 24, 72, .72) 0%, rgba(20, 24, 72, .44) 46%, rgba(255, 89, 0, .14) 100%),
    url("../images/who-we-are/who-we-are-top-header-visible.webp") !important;
  background-repeat: no-repeat !important;
  background-position: center 50% !important;
  background-size: min(100%, 1580px) auto !important;
  padding: clamp(58px, 6vw, 78px) 0 !important;
}

body.who-we-are-page .page-hero--who-we-are .page-hero__inner {
  min-height: clamp(260px, 23vw, 360px) !important;
}

@media (max-width: 1100px) {
  body.awards-page .awards-hero__inner {
    grid-template-columns: 1fr !important;
  }

  body.awards-page .international-award-card,
  body.awards-page .international-award-card:nth-child(1),
  body.awards-page .international-award-card:nth-child(2),
  body.awards-page .international-award-card:nth-child(3),
  body.awards-page .international-award-card:nth-child(4),
  body.awards-page .international-award-card:nth-child(5),
  body.awards-page .international-award-card:nth-child(6) {
    grid-column: span 6;
  }
}

@media (max-width: 760px) {
  body.awards-page main::before {
    opacity: .12;
    background-position: center top;
  }

  body.awards-page .awards-hero {
    min-height: auto !important;
  }

  body.awards-page .awards-hero__inner {
    min-height: auto !important;
    padding-block: 32px !important;
  }

  body.awards-page .awards-hero h1 {
    font-size: clamp(2rem, 9vw, 2.8rem) !important;
  }

  body.awards-page .section {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body.awards-page .awards-intro-grid,
  body.awards-page .awards-spotlight-grid,
  body.awards-page .awards-context-grid,
  body.awards-page .award-year-grid,
  body.awards-page .international-awards-grid {
    grid-template-columns: 1fr !important;
  }

  body.awards-page .international-award-card,
  body.awards-page .international-award-card:nth-child(1),
  body.awards-page .international-award-card:nth-child(2),
  body.awards-page .international-award-card:nth-child(3),
  body.awards-page .international-award-card:nth-child(4),
  body.awards-page .international-award-card:nth-child(5),
  body.awards-page .international-award-card:nth-child(6) {
    grid-column: 1 / -1 !important;
    min-height: auto !important;
  }

  body.awards-page .award-spotlight-card {
    grid-template-columns: 52px 1fr !important;
    gap: 14px !important;
  }

  body.awards-page .award-spotlight-card__icon {
    width: 48px !important;
    height: 48px !important;
    border-radius: 16px !important;
    font-size: 1.35rem !important;
  }

  body.awards-page .awards-medal {
    grid-template-columns: none !important;
  }

  body.who-we-are-page .page-hero--who-we-are {
    background-size: cover !important;
    background-position: center 42% !important;
    padding: 44px 0 !important;
  }

  body.who-we-are-page .page-hero--who-we-are .page-hero__inner {
    min-height: 230px !important;
  }

  body.who-we-are-page .section {
    padding-top: 34px !important;
    padding-bottom: 34px !important;
  }
}

@media (max-width: 480px) {
  body.awards-page .award-year-card summary {
    align-items: flex-start !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  body.awards-page .awards-hero__actions .btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

/* Ensure the subtle awards page background remains visible behind all content. */
body.awards-page main::before {
  z-index: 0 !important;
}

body.awards-page main > * {
  position: relative;
  z-index: 1;
}

/* =========================================================
   KNLS refinement pass: compact spacing, partner logo whitespace,
   and equal-sized Global & Regional recognition cards
   ========================================================= */

/* Reduce vertical whitespace across inner pages without making layouts cramped. */
body:not(.home-page) .section {
  padding-top: clamp(34px, 4.2vw, 58px) !important;
  padding-bottom: clamp(34px, 4.2vw, 58px) !important;
}

body:not(.home-page) .section-title {
  margin-bottom: clamp(18px, 2.4vw, 28px) !important;
}

body:not(.home-page) .section-title h2 {
  margin-bottom: 8px !important;
}

body:not(.home-page) .page-hero {
  padding-top: clamp(42px, 5vw, 72px) !important;
  padding-bottom: clamp(42px, 5vw, 72px) !important;
}

body:not(.home-page) .page-hero__inner {
  min-height: auto !important;
}

/* Partners & Sponsors: shrink the clickable logo containers so the logo cards do not look empty. */
body .partner-story-card {
  grid-template-columns: 128px 1fr !important;
  gap: 16px !important;
  padding: 18px !important;
  align-items: start !important;
}

body .partner-story-card__logo {
  min-height: 108px !important;
  padding: 8px !important;
  border-radius: 18px !important;
}

body .partner-story-card__logo img {
  max-width: 96% !important;
  max-height: 82px !important;
}

body .partner-story-card__logo--double {
  gap: 6px !important;
}

body .partner-story-card__logo--double img {
  max-height: 44px !important;
}

body .partners-story-grid {
  gap: 16px !important;
}

body .partners-story-intro {
  margin-bottom: 18px !important;
  gap: 24px !important;
}

body .partner-impact-card {
  padding: 16px !important;
}

body .partner-impact-card span {
  margin-bottom: 8px !important;
}

body .partners-thank-you {
  padding-top: 0 !important;
  padding-bottom: clamp(34px, 4vw, 48px) !important;
}

/* Partners hero ribbon: reduce the apparent empty area inside each faded logo tile. */
body .partners-hero__ribbon .partner-logo-ribbon__group a {
  width: 170px !important;
  height: 76px !important;
  padding: 8px 12px !important;
  border-radius: 18px !important;
}

body .partners-hero__ribbon .partner-logo-ribbon__group img {
  max-height: 58px !important;
  max-width: 96% !important;
}

body .partners-hero__ribbon .partner-logo-ribbon__track,
body .partners-hero__ribbon .partner-logo-ribbon__group {
  gap: 16px !important;
}

/* Recognition & Awards: make every Global and Regional Recognition card the same visual size. */
body.awards-page .international-awards-grid {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  grid-auto-rows: 1fr !important;
  align-items: stretch !important;
  gap: 18px !important;
}

body.awards-page .international-award-card,
body.awards-page .international-award-card:nth-child(1),
body.awards-page .international-award-card:nth-child(2),
body.awards-page .international-award-card:nth-child(3),
body.awards-page .international-award-card:nth-child(4),
body.awards-page .international-award-card:nth-child(5),
body.awards-page .international-award-card:nth-child(6) {
  grid-column: auto !important;
  min-height: 265px !important;
  height: 100% !important;
  padding: clamp(20px, 2vw, 28px) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
}

body.awards-page .international-award-card h3 {
  font-size: clamp(1.18rem, 1.55vw, 1.45rem) !important;
  line-height: 1.16 !important;
  margin-bottom: 12px !important;
}

body.awards-page .international-award-card p,
body.awards-page .international-award-card li {
  font-size: clamp(.94rem, 1.05vw, 1rem) !important;
  line-height: 1.55 !important;
}

body.awards-page .international-award-card ul {
  margin-top: 4px !important;
}

body.awards-page .international-award-card__year {
  width: fit-content !important;
  margin-bottom: 18px !important;
}

/* Keep the building background visible but gentle and reduce crowding on Recognition page. */
body.awards-page main::before {
  opacity: .22 !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.82), rgba(247,248,255,.84)),
    url("../images/homepage-hero/hero-01-external-maktaba-kuu.webp") center center / cover no-repeat !important;
}

body.awards-page .awards-hero {
  min-height: 260px !important;
}

body.awards-page .awards-hero__inner {
  min-height: 190px !important;
  padding-block: 28px !important;
}

body.awards-page .awards-hero h1 {
  font-size: clamp(2rem, 3.6vw, 3.6rem) !important;
}

/* Mobile: single column, compact, no overlapping or zoomed-in feel. */
@media (max-width: 900px) {
  body.awards-page .international-awards-grid {
    grid-template-columns: 1fr !important;
  }

  body.awards-page .international-award-card,
  body.awards-page .international-award-card:nth-child(1),
  body.awards-page .international-award-card:nth-child(2),
  body.awards-page .international-award-card:nth-child(3),
  body.awards-page .international-award-card:nth-child(4),
  body.awards-page .international-award-card:nth-child(5),
  body.awards-page .international-award-card:nth-child(6) {
    min-height: auto !important;
  }

  body .partner-story-card {
    grid-template-columns: 112px 1fr !important;
  }
}

@media (max-width: 640px) {
  body:not(.home-page) .section {
    padding-top: 28px !important;
    padding-bottom: 28px !important;
  }

  body:not(.home-page) .page-hero {
    padding-top: 32px !important;
    padding-bottom: 32px !important;
  }

  body .partner-story-card {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    padding: 15px !important;
  }

  body .partner-story-card__logo {
    min-height: 84px !important;
    padding: 6px !important;
  }

  body .partner-story-card__logo img {
    max-height: 64px !important;
  }

  body .partners-hero__ribbon .partner-logo-ribbon__group a {
    width: 132px !important;
    height: 58px !important;
    padding: 6px 9px !important;
  }

  body .partners-hero__ribbon .partner-logo-ribbon__group img {
    max-height: 42px !important;
  }

  body.awards-page .awards-hero h1 {
    font-size: clamp(1.9rem, 8vw, 2.5rem) !important;
  }
}


/* ------------------------------------------------------------------
   Requested service-page updates: digitization header image,
   eCitizen background emblem, and compact headers/site spacing.
   ------------------------------------------------------------------ */

/* Make the blue-lined page headers smaller on internal pages so they do
   not consume too much above-the-fold space. */
body:not(.home-page) .page-hero {
  padding: clamp(32px, 4vw, 52px) 0 !important;
  min-height: auto !important;
}

body:not(.home-page) .page-hero__inner {
  gap: clamp(12px, 2vw, 22px) !important;
  align-items: center !important;
}

body:not(.home-page) .page-hero h1 {
  font-size: clamp(2rem, 4.2vw, 3.25rem) !important;
  line-height: 1.02 !important;
  margin-bottom: .45rem !important;
}

body:not(.home-page) .page-hero p {
  font-size: clamp(.96rem, 1.35vw, 1.05rem) !important;
  line-height: 1.55 !important;
  margin-bottom: 0 !important;
}

body:not(.home-page) .page-hero .kicker {
  margin-bottom: .45rem !important;
}

body:not(.home-page) .breadcrumbs {
  padding: 8px 12px !important;
  font-size: .9rem !important;
}

/* Tighten vertical rhythm across internal pages while preserving readability. */
body:not(.home-page) .section {
  padding-top: clamp(34px, 4vw, 58px) !important;
  padding-bottom: clamp(34px, 4vw, 58px) !important;
}

body:not(.home-page) .section-title {
  margin-bottom: clamp(18px, 2.5vw, 28px) !important;
}

body:not(.home-page) .service-detail-section {
  padding-top: clamp(28px, 3.5vw, 48px) !important;
}

body:not(.home-page) .content-panel,
body:not(.home-page) .service-intro-card {
  padding: clamp(20px, 3vw, 34px) !important;
}

/* Digitization page: use uploaded scanning image as the page header. */
.page-hero--digitization {
  background:
    linear-gradient(90deg, rgba(16, 6, 159, .82), rgba(0, 104, 56, .50)),
    url("../images/services/digitization-scanner-hero.webp") center center / cover no-repeat !important;
}

.page-hero--digitization .page-hero__inner {
  min-height: clamp(180px, 22vw, 260px) !important;
}

/* eCitizen page: add the Kenyan emblem as a visible but non-distracting background. */
body.ecitizen-page main {
  position: relative !important;
  overflow: hidden !important;
}

body.ecitizen-page main::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    radial-gradient(circle at 50% 35%, rgba(255,255,255,.10), rgba(255,255,255,.70) 38%, rgba(247,248,255,.92) 72%),
    url("../images/services/ecitizen-coat-of-arms-bg.png") center 44% / min(56vw, 520px) auto no-repeat;
  opacity: .24;
}

body.ecitizen-page main > * {
  position: relative;
  z-index: 1;
}

body.ecitizen-page .page-hero--ecitizen {
  background:
    linear-gradient(135deg, rgba(16, 6, 159, .94), rgba(0, 104, 56, .82)),
    url("../images/services/ecitizen-coat-of-arms-bg.png") right 8% center / 230px auto no-repeat !important;
}

body.ecitizen-page .content-panel,
body.ecitizen-page .service-side-nav,
body.ecitizen-page .ecitizen-service-grid article {
  background-color: rgba(255, 255, 255, .94) !important;
  backdrop-filter: blur(2px);
}

@media (max-width: 980px) {
  body:not(.home-page) .page-hero {
    padding: 28px 0 !important;
  }

  body:not(.home-page) .page-hero__inner {
    grid-template-columns: 1fr !important;
    align-items: start !important;
  }

  .page-hero--digitization .page-hero__inner {
    min-height: 170px !important;
  }

  body.ecitizen-page main::before {
    background-size: min(82vw, 420px) auto;
    background-position: center 42%;
    opacity: .20;
  }
}

@media (max-width: 600px) {
  body:not(.home-page) .page-hero {
    padding: 24px 0 !important;
  }

  body:not(.home-page) .page-hero h1 {
    font-size: clamp(1.8rem, 9vw, 2.55rem) !important;
  }

  body:not(.home-page) .section {
    padding-top: 26px !important;
    padding-bottom: 26px !important;
  }

  body:not(.home-page) .content-panel,
  body:not(.home-page) .service-intro-card {
    padding: 18px !important;
  }

  .page-hero--digitization {
    background-position: center center !important;
  }

  .page-hero--digitization .page-hero__inner {
    min-height: 150px !important;
  }
}


/* =========================================================
   KNLS requested navigation, footer, catalogue and e-resource updates
   ========================================================= */

/* Compact the global header and make the search button impossible to miss. */
.site-header {
  border-bottom-width: 3px !important;
}

.nav {
  min-height: clamp(68px, 6vw, 78px) !important;
  gap: clamp(10px, 1.6vw, 18px) !important;
}

.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.brand__logo {
  width: clamp(118px, 13vw, 152px) !important;
  max-height: 54px !important;
  object-fit: contain !important;
}

.brand__emblem {
  width: clamp(34px, 4.8vw, 54px);
  height: clamp(34px, 4.8vw, 54px);
  object-fit: contain;
  flex: 0 0 auto;
  padding-left: 8px;
  border-left: 1px solid rgba(16, 6, 159, .16);
}

.search-button {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
  box-shadow: 0 12px 24px rgba(254, 80, 0, .28) !important;
  font-size: 1.22rem !important;
  font-weight: 900 !important;
}

.search-button:hover,
.search-button:focus-visible {
  background: #10069F !important;
  border-color: #10069F !important;
  transform: translateY(-1px);
}

.search-hint-toast {
  position: fixed;
  top: clamp(92px, 12vw, 132px);
  right: clamp(14px, 3vw, 28px);
  width: min(310px, calc(100vw - 28px));
  padding: 14px 42px 14px 16px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .98);
  border: 1px solid rgba(16, 6, 159, .15);
  box-shadow: 0 18px 48px rgba(16, 6, 159, .18);
  color: #1f2937;
  z-index: 9999;
  opacity: 0;
  transform: translateY(-10px);
  pointer-events: none;
  transition: opacity .24s ease, transform .24s ease;
}

.search-hint-toast.is-visible {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.search-hint-toast::after {
  content: "";
  position: absolute;
  top: -8px;
  right: 26px;
  width: 16px;
  height: 16px;
  background: inherit;
  border-left: 1px solid rgba(16, 6, 159, .15);
  border-top: 1px solid rgba(16, 6, 159, .15);
  transform: rotate(45deg);
}

.search-hint-toast strong {
  display: block;
  color: #10069F;
  font-size: .96rem;
  margin-bottom: 3px;
}

.search-hint-toast span {
  display: block;
  color: #4b5563;
  font-size: .9rem;
  line-height: 1.42;
}

.search-hint-toast__close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 26px;
  height: 26px;
  border: 0;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
  cursor: pointer;
}

/* Footer: left aligned, with small uniform icons before key contact details. */
.site-footer--compact .compact-footer {
  justify-items: start !important;
  text-align: left !important;
  grid-template-columns: minmax(280px, 1.25fr) minmax(150px, .72fr) minmax(150px, .72fr) minmax(260px, .96fr) !important;
}

.compact-footer__brand,
.compact-footer__nav,
.compact-footer__connect {
  width: 100%;
  text-align: left !important;
}

.compact-footer__contact {
  justify-items: start !important;
}

.compact-footer__contact li.footer-contact-item {
  display: grid !important;
  grid-template-columns: 22px minmax(0, 1fr);
  gap: 8px;
  align-items: start;
  width: 100%;
}

.footer-contact-icon {
  width: 18px;
  height: 18px;
  display: inline-grid;
  place-items: center;
  border-radius: 999px;
  background: rgba(254, 80, 0, .18);
  color: #ffb45f !important;
  font-size: 10px;
  line-height: 1;
  flex: 0 0 18px;
  margin-top: 1px;
}

.compact-footer__bottom {
  justify-content: flex-start !important;
}

.compact-footer__bottom a {
  margin-left: auto;
}

/* Keep internal page headers compact across pages. */
body:not(.home-page) .page-hero {
  padding-top: clamp(26px, 3.5vw, 44px) !important;
  padding-bottom: clamp(26px, 3.5vw, 44px) !important;
}

body:not(.home-page) .page-hero h1 {
  font-size: clamp(1.9rem, 3.8vw, 3rem) !important;
}

/* e-resources: remove visible counts/actions and show all resource groups by default. */
.e-resource-stats,
.e-resource-count,
.e-resource-actions,
.e-resource-category-group summary small,
.e-resource-category-nav button small {
  display: none !important;
}

.e-resource-browser__intro p,
.e-resource-page-helper {
  max-width: 980px !important;
}

.e-resource-category-list {
  display: grid;
  gap: 18px;
}

.e-resource-category-group {
  overflow: visible !important;
}

.e-resource-category-group summary {
  cursor: default !important;
  pointer-events: none;
  border-bottom: 1px solid rgba(16, 6, 159, .08);
}

.e-resource-category-group summary::after {
  display: none !important;
}

.e-resource-category-group .e-resource-grid {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(230px, 320px)) !important;
  justify-content: start !important;
  align-items: stretch !important;
  gap: 14px !important;
  padding-top: 14px !important;
}

.e-resource-card {
  max-width: 320px !important;
  min-height: 100% !important;
}

.e-resource-directory-grid,
.e-resource-logo-strip__grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}

/* Partners hero: make the moving background ribbon more visible, but still behind text. */
.partners-hero__ribbon.partner-logo-ribbon {
  opacity: .34 !important;
  filter: saturate(1.05) contrast(1.12) !important;
}

.partners-hero::after {
  background:
    linear-gradient(90deg, rgba(6,0,92,.84), rgba(6,0,92,.60) 42%, rgba(6,0,92,.34)),
    linear-gradient(180deg, rgba(6,0,92,.14), rgba(6,0,92,.28)) !important;
}

/* Facilities slideshow uploaded fourth image: avoid zoomed-in cropping on mobile. */
.facilities-click-slide img {
  object-position: center center !important;
}

@media (max-width: 1100px) {
  .site-footer--compact .compact-footer {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (max-width: 760px) {
  .nav {
    min-height: 66px !important;
  }

  .brand__logo {
    width: 108px !important;
    max-height: 46px !important;
  }

  .brand__emblem {
    width: 34px;
    height: 34px;
    padding-left: 6px;
  }

  .search-hint-toast {
    top: 82px;
    right: 12px;
  }

  .site-footer--compact .compact-footer {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .compact-footer__bottom {
    flex-direction: column;
    align-items: flex-start !important;
  }

  .compact-footer__bottom a {
    margin-left: 0;
  }

  .e-resource-category-group .e-resource-grid {
    grid-template-columns: 1fr !important;
  }

  .e-resource-card {
    max-width: none !important;
  }

  .partners-hero__ribbon.partner-logo-ribbon {
    opacity: .22 !important;
  }
}


/* =========================================================
   KNLS latest user-requested refinements - navigation, KNB, e-resources
   ========================================================= */

/* Move the Republic of Kenya emblem to the LEFT of the KNLS logo and make it more visible. */
.site-header .brand {
  gap: clamp(8px, 1.2vw, 14px) !important;
}

.site-header .brand__emblem {
  order: -1 !important;
  width: clamp(54px, 5.6vw, 76px) !important;
  height: clamp(42px, 4.6vw, 62px) !important;
  max-height: 62px !important;
  object-fit: contain !important;
  flex: 0 0 auto !important;
  padding-left: 0 !important;
  padding-right: clamp(7px, 1vw, 12px) !important;
  border-left: 0 !important;
  border-right: 1px solid rgba(16, 6, 159, .16) !important;
}

.site-header .brand__logo {
  width: clamp(112px, 12vw, 148px) !important;
  max-height: 52px !important;
}

/* Remove the national bibliography summary tiles while retaining the search/filter archive. */
.knb-compact-stats {
  display: none !important;
}

.knb-browser-intro {
  grid-template-columns: 1fr !important;
  gap: 14px !important;
}

/* Remove the horizontally scrolling category pill strip on all e-resource pages. */
.e-resource-category-nav,
[data-resource-category-nav] {
  display: none !important;
}

.e-resource-browser {
  padding-top: 0 !important;
}

.e-resource-toolbar {
  margin-bottom: 14px !important;
}

@media (max-width: 760px) {
  .site-header .brand__emblem {
    width: 46px !important;
    height: 38px !important;
    max-height: 40px !important;
    padding-right: 7px !important;
  }

  .site-header .brand__logo {
    width: 104px !important;
    max-height: 42px !important;
  }
}


/* KNLS e-resources department/logo/button polish - 22 May */
/* Stronger department/category headings on e-resource pages. */
.e-resource-category-group {
  border: 1px solid rgba(16, 6, 159, .14) !important;
  border-radius: 20px !important;
  background: rgba(255, 255, 255, .92) !important;
  box-shadow: 0 14px 32px rgba(16, 6, 159, .06) !important;
}

.e-resource-category-group summary {
  min-height: 0 !important;
  padding: 14px 16px !important;
  border-radius: 20px 20px 0 0 !important;
  border-bottom: 1px solid rgba(16, 6, 159, .12) !important;
  background:
    linear-gradient(90deg, rgba(16, 6, 159, .11), rgba(254, 80, 0, .08)),
    #ffffff !important;
}

.e-resource-category-group summary span {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-transform: uppercase !important;
  letter-spacing: .075em !important;
  font-size: clamp(.88rem, 1.1vw, 1rem) !important;
  font-weight: 1000 !important;
  line-height: 1.2 !important;
  color: #10069F !important;
}

.e-resource-category-group summary span::before {
  content: "";
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #FE5000;
  box-shadow: 0 0 0 5px rgba(254, 80, 0, .12);
  flex: 0 0 auto;
}

.e-resource-card__tag,
.e-resource-card__category {
  text-transform: uppercase !important;
  letter-spacing: .045em !important;
  font-weight: 900 !important;
  color: #10069F !important;
  background: rgba(16, 6, 159, .07) !important;
  border: 1px solid rgba(16, 6, 159, .12) !important;
}

.e-resource-card__category {
  display: inline-flex !important;
  width: fit-content !important;
  margin-bottom: 8px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
}

/* Make provider logos reliable even when external favicons fail. */
.e-resource-card__logo-link,
.e-resource-logo-strip__grid a img {
  background: #ffffff !important;
}

.e-resource-card__logo-link img,
.e-resource-logo-strip__grid a img {
  object-fit: contain !important;
  box-shadow: none !important;
}

.e-resource-card__logo-fallback {
  display: none;
  background: linear-gradient(135deg, #10069F, #FE5000) !important;
  color: #ffffff !important;
}

/* Keep Open Resource text readable, especially on orange hover. */
.e-resource-card__link,
.e-resource-card__link:visited {
  color: #10069F !important;
  background: #fff7f2 !important;
  border: 1px solid rgba(254, 80, 0, .35) !important;
  font-weight: 900 !important;
}

.e-resource-card__link:hover,
.e-resource-card__link:focus-visible,
.e-resource-card__link:hover span,
.e-resource-card__link:focus-visible span {
  color: #ffffff !important;
}

.e-resource-card__link:hover,
.e-resource-card__link:focus-visible {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  box-shadow: 0 12px 24px rgba(254, 80, 0, .26) !important;
  text-shadow: 0 1px 1px rgba(0, 0, 0, .22) !important;
}

/* Increase the Republic of Kenya image next to the KNLS logo without breaking the header. */
.site-header .brand__emblem {
  width: clamp(72px, 7vw, 96px) !important;
  height: clamp(54px, 5.4vw, 76px) !important;
  max-height: 76px !important;
}

.site-header .brand__logo {
  width: clamp(118px, 12.5vw, 156px) !important;
  max-height: 54px !important;
}

.nav {
  min-height: clamp(76px, 6.8vw, 88px) !important;
}

@media (max-width: 760px) {
  .site-header .brand__emblem {
    width: 58px !important;
    height: 46px !important;
    max-height: 48px !important;
  }

  .site-header .brand__logo {
    width: 106px !important;
    max-height: 42px !important;
  }

  .nav {
    min-height: 72px !important;
  }

  .e-resource-category-group summary {
    padding: 12px 14px !important;
  }
}

/* =========================================================
   Organizational structure: website-native chart update
   ========================================================= */
.org-structure-section--modern {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgba(254,80,0,.10), transparent 24%),
    radial-gradient(circle at 96% 16%, rgba(16,6,159,.08), transparent 25%),
    linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
}

.org-modern-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border: 1px solid rgba(16,6,159,.10);
  border-radius: 34px;
  padding: clamp(22px, 3vw, 36px);
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(248,248,255,.94));
  box-shadow: 0 28px 80px rgba(16,6,159,.10);
}

.org-modern-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.88), rgba(255,255,255,.64)),
    url("../images/knls-modern-building.svg") right 2rem top 1.2rem / min(42vw, 520px) auto no-repeat;
  opacity: .72;
}

.org-modern-card::before,
.org-modern-card::after {
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
}

.org-modern-card::before {
  width: 180px;
  height: 180px;
  left: -70px;
  top: 18px;
  background: rgba(254,80,0,.10);
}

.org-modern-card::after {
  width: 240px;
  height: 240px;
  right: -90px;
  bottom: -80px;
  background: rgba(16,6,159,.08);
}

.org-overview {
  display: grid;
  grid-template-columns: minmax(240px, 360px) minmax(220px, 320px);
  justify-content: center;
  align-items: stretch;
  gap: 18px;
  margin-inline: auto;
  max-width: 760px;
}

.org-node,
.org-unit {
  position: relative;
  border-radius: 24px;
  box-shadow: 0 18px 45px rgba(16,6,159,.10);
}

.org-node {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 20px;
}

.org-node--board,
.org-node--dg {
  background: linear-gradient(135deg, #10069F, #06005C);
  color: #fff;
}

.org-node--committee {
  background: #ffffff;
  border: 1px dashed rgba(254,80,0,.45);
  color: #10069F;
}

.org-node__icon {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fff;
  color: #FE5000;
  font-weight: 900;
  box-shadow: inset 0 0 0 1px rgba(254,80,0,.18);
}

.org-node--committee .org-node__icon,
.org-node--dg .org-node__icon { background: #fff1e8; }

.org-node__eyebrow,
.org-unit__tag {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  border-radius: 999px;
  font-size: .68rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: .12em;
}

.org-node__eyebrow {
  margin-bottom: 6px;
  opacity: .86;
  color: inherit;
}

.org-node h3,
.org-unit h3 {
  margin: 0;
  font-size: clamp(1rem, 1.6vw, 1.22rem);
}

.org-node--board h3,
.org-node--dg h3 { color: #fff; }
.org-node--committee h3 { color: #10069F; }

.org-director-general {
  position: relative;
  width: min(360px, 100%);
  margin: 34px auto 44px;
  padding-top: 28px;
}

.org-connector--vertical {
  position: absolute;
  top: -34px;
  left: 50%;
  width: 2px;
  height: 58px;
  transform: translateX(-50%);
  background: rgba(16,6,159,.25);
}

.org-connector--vertical::before,
.org-connector--vertical::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #FE5000;
  box-shadow: 0 0 0 5px rgba(254,80,0,.12);
}

.org-connector--vertical::before { top: -2px; }
.org-connector--vertical::after { bottom: -2px; }

.org-chart-modern {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  padding-top: 28px;
}

.org-chart-modern::before {
  content: "";
  position: absolute;
  top: 0;
  left: 8%;
  right: 8%;
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16,6,159,.26), transparent);
}

.org-unit {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 20px;
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(16,6,159,.12);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.org-unit::before {
  content: "";
  position: absolute;
  top: -33px;
  left: 50%;
  width: 2px;
  height: 28px;
  transform: translateX(-50%);
  background: rgba(16,6,159,.22);
}

.org-unit::after {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: #FE5000;
  box-shadow: 0 0 0 5px rgba(254,80,0,.12);
}

.org-unit:hover {
  transform: translateY(-4px);
  border-color: rgba(254,80,0,.38);
  box-shadow: 0 24px 58px rgba(16,6,159,.15);
}

.org-unit--directorate {
  border-top: 6px solid #10069F;
}

.org-unit--standalone,
.org-unit--support {
  border-top: 6px solid #FE5000;
}

.org-unit--audit {
  border: 1px dashed rgba(254,80,0,.55);
  border-top: 6px solid #FE5000;
  background: linear-gradient(180deg, #ffffff, #fff8f3);
}

.org-unit__tag {
  margin-bottom: 12px;
  padding: 5px 10px;
  color: #10069F;
  background: #eeedff;
}

.org-unit--standalone .org-unit__tag,
.org-unit--support .org-unit__tag,
.org-unit--audit .org-unit__tag {
  color: #FE5000;
  background: #fff1e8;
}

.org-unit h3 {
  color: #10069F;
  font-weight: 900;
}

.org-unit ul {
  display: grid;
  gap: 10px;
  margin: 16px 0 0;
  padding: 0;
  list-style: none;
}

.org-unit li {
  position: relative;
  padding: 10px 12px 10px 32px;
  border-radius: 16px;
  background: #f8f8ff;
  color: #39485f;
  font-weight: 700;
  line-height: 1.35;
}

.org-unit li::before {
  content: "";
  position: absolute;
  left: 12px;
  top: 1.05em;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #FE5000;
}

.org-unit p {
  margin: 14px 0 0;
  color: #65756c;
  font-weight: 700;
}

.org-modern-note {
  margin: 24px 0 0;
  padding: 14px 16px;
  border-radius: 18px;
  background: rgba(238,237,255,.68);
  color: #39485f;
  font-weight: 800;
  text-align: center;
}

@media (min-width: 1180px) {
  .org-unit--standalone { grid-column: span 1; }
  .org-unit--directorate { grid-column: span 1; }
  .org-unit--support { grid-column: span 2; }
  .org-unit--audit { grid-column: span 2; }
}

@media (max-width: 1100px) {
  .org-chart-modern { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .org-modern-card { padding: 18px; border-radius: 24px; }
  .org-modern-card__bg { background-size: 520px auto; background-position: right -150px top 0; opacity: .38; }
  .org-overview { grid-template-columns: 1fr; max-width: none; }
  .org-director-general { margin-block: 26px 34px; }
  .org-chart-modern { grid-template-columns: 1fr; gap: 14px; padding-top: 0; }
  .org-chart-modern::before,
  .org-unit::before,
  .org-unit::after,
  .org-connector--vertical { display: none; }
  .org-node { padding: 16px; border-radius: 20px; }
  .org-node__icon { width: 42px; height: 42px; flex-basis: 42px; }
  .org-unit { padding: 16px; border-radius: 20px; }
  .org-unit li { padding-block: 9px; }
  .org-modern-note { text-align: left; }
}

/* =========================================================
   Organizational Structure page: implemented modern visual
   Uses original KNLS structure data with KNLS building background
   ========================================================= */
.page-hero--org-visual {
  position: relative;
  overflow: hidden;
  color: #07113f !important;
  padding: clamp(44px, 5.5vw, 70px) 0 clamp(34px, 4vw, 52px) !important;
  background:
    linear-gradient(90deg, rgba(255,255,255,.94), rgba(255,255,255,.83) 52%, rgba(246,247,255,.78)),
    url("../images/knls-direction-banner.webp") center 48% / cover no-repeat !important;
  border-bottom: 1px solid rgba(16,6,159,.08);
}

.page-hero--org-visual::before,
.page-hero--org-visual::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
}

.page-hero--org-visual::before {
  width: clamp(160px, 22vw, 320px);
  height: clamp(160px, 22vw, 320px);
  left: -90px;
  top: 20px;
  background: rgba(254,80,0,.08);
}

.page-hero--org-visual::after {
  width: clamp(140px, 18vw, 280px);
  height: clamp(140px, 18vw, 280px);
  right: -70px;
  bottom: -100px;
  background: rgba(16,6,159,.07);
}

.page-hero--org-visual .page-hero__inner {
  position: relative;
  z-index: 1;
  align-items: center;
}

.page-hero--org-visual h1,
.page-hero--org-visual .kicker {
  color: #10069F !important;
}

.page-hero--org-visual h1 {
  font-size: clamp(2.1rem, 4.6vw, 4.7rem);
  letter-spacing: -0.055em;
  line-height: .96;
  margin-bottom: 12px;
}

.page-hero--org-visual p {
  color: #39485f !important;
  max-width: 760px;
  font-weight: 650;
}

.page-hero--org-visual .breadcrumbs {
  background: rgba(255,255,255,.76) !important;
  border-color: rgba(16,6,159,.16) !important;
  color: #10069F !important;
  box-shadow: 0 14px 36px rgba(16,6,159,.08);
}

.page-hero--org-visual .breadcrumbs a {
  color: #10069F !important;
}

.org-structure-section--modern {
  position: relative;
  overflow: hidden;
  padding-block: clamp(42px, 5vw, 70px) !important;
  background:
    linear-gradient(180deg, rgba(248,249,255,.96), rgba(255,255,255,.95)),
    url("../images/knls-direction-banner.webp") center top / cover no-repeat !important;
}

.org-structure-section--modern::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 6% 15%, rgba(254,80,0,.09), transparent 21%),
    radial-gradient(circle at 92% 6%, rgba(16,6,159,.08), transparent 20%),
    linear-gradient(180deg, rgba(255,255,255,.72), rgba(255,255,255,.90));
}

.org-structure-section--modern > .container {
  position: relative;
  z-index: 1;
}

.org-structure-section--modern .section-title {
  margin-bottom: clamp(22px, 3vw, 34px);
}

.org-structure-section--modern .section-title h2 {
  font-size: clamp(1.8rem, 3.4vw, 3.2rem);
  color: #10069F;
  letter-spacing: -0.04em;
}

.org-modern-card {
  max-width: 1280px;
  margin-inline: auto;
  padding: clamp(22px, 3vw, 42px) !important;
  border-radius: clamp(24px, 3vw, 38px) !important;
  border: 1px solid rgba(16,6,159,.12) !important;
  background:
    linear-gradient(135deg, rgba(255,255,255,.91), rgba(249,249,255,.84)) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 30px 90px rgba(16,6,159,.14) !important;
}

.org-modern-card__bg {
  background:
    linear-gradient(90deg, rgba(255,255,255,.82), rgba(255,255,255,.68)),
    url("../images/knls-direction-banner.webp") center 48% / cover no-repeat !important;
  opacity: .40 !important;
  filter: saturate(.92);
}

.org-overview {
  grid-template-columns: minmax(260px, 420px) minmax(230px, 340px) !important;
  align-items: center !important;
  gap: clamp(16px, 2vw, 26px) !important;
  max-width: 860px !important;
}

.org-node {
  min-height: 92px;
  border-radius: 22px !important;
  overflow: hidden;
}

.org-node--board,
.org-node--dg {
  background: linear-gradient(135deg, #10069F, #050042 92%) !important;
  box-shadow: 0 18px 38px rgba(16,6,159,.22) !important;
}

.org-node--committee {
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(254,80,0,.28) !important;
  box-shadow: 0 18px 38px rgba(254,80,0,.08) !important;
}

.org-node__icon {
  font-size: 1.2rem;
  background: #ffffff !important;
}

.org-director-general {
  width: min(430px, 100%) !important;
  margin-block: clamp(28px, 4vw, 42px) clamp(38px, 5vw, 62px) !important;
}

.org-director-general::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -36px;
  width: min(860px, 84vw);
  height: 2px;
  transform: translateX(-50%);
  background: linear-gradient(90deg, transparent, rgba(16,6,159,.28), transparent);
}

.org-chart-modern {
  grid-template-columns: repeat(12, minmax(0, 1fr)) !important;
  gap: clamp(14px, 1.6vw, 20px) !important;
  padding-top: clamp(24px, 3vw, 34px) !important;
}

.org-chart-modern::before {
  display: none !important;
}

.org-unit {
  border-radius: 22px !important;
  background: rgba(255,255,255,.94) !important;
  box-shadow: 0 18px 42px rgba(16,6,159,.10) !important;
  min-height: 100%;
  padding: clamp(16px, 1.7vw, 22px) !important;
}

.org-unit::before {
  top: -32px !important;
  height: 26px !important;
}

.org-unit--standalone {
  grid-column: span 3 !important;
}

.org-unit--directorate {
  grid-column: span 3 !important;
  border-top-color: #10069F !important;
}

.org-unit--support,
.org-unit--audit {
  grid-column: span 6 !important;
}

.org-unit h3 {
  font-size: clamp(1rem, 1.25vw, 1.25rem) !important;
  line-height: 1.18;
}

.org-unit__tag {
  background: #eeedff !important;
  color: #10069F !important;
}

.org-unit--standalone .org-unit__tag,
.org-unit--support .org-unit__tag,
.org-unit--audit .org-unit__tag {
  background: #fff1e8 !important;
  color: #FE5000 !important;
}

.org-unit li {
  background: linear-gradient(135deg, #f7f7ff, #ffffff) !important;
  border: 1px solid rgba(16,6,159,.07);
}

.org-modern-note {
  margin-top: clamp(18px, 2.4vw, 30px) !important;
  border: 1px solid rgba(16,6,159,.10);
  background: rgba(255,255,255,.76) !important;
}

@media (max-width: 1120px) {
  .org-chart-modern {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  }
  .org-unit--standalone,
  .org-unit--directorate {
    grid-column: span 3 !important;
  }
  .org-unit--support,
  .org-unit--audit {
    grid-column: span 6 !important;
  }
}

@media (max-width: 760px) {
  .page-hero--org-visual {
    padding-block: 34px !important;
    background-position: center top !important;
  }
  .page-hero--org-visual .page-hero__inner {
    grid-template-columns: 1fr !important;
    gap: 16px;
  }
  .page-hero--org-visual h1 {
    font-size: clamp(2rem, 12vw, 3rem);
  }
  .page-hero--org-visual .breadcrumbs {
    width: fit-content;
  }
  .org-modern-card {
    border-radius: 22px !important;
  }
  .org-modern-card__bg {
    opacity: .28 !important;
    background-position: center top !important;
  }
  .org-overview {
    grid-template-columns: 1fr !important;
  }
  .org-director-general::after {
    display: none;
  }
  .org-chart-modern {
    grid-template-columns: 1fr !important;
    padding-top: 0 !important;
  }
  .org-unit--standalone,
  .org-unit--directorate,
  .org-unit--support,
  .org-unit--audit {
    grid-column: auto !important;
  }
  .org-unit::before,
  .org-unit::after {
    display: none !important;
  }
}


/* =========================================================
   Organizational Structure refinement: compact original-data chart
   ========================================================= */
.org-structure-section--blueprint {
  position: relative;
  overflow: hidden;
  padding-block: clamp(34px, 4.2vw, 58px) !important;
  background:
    linear-gradient(180deg, rgba(248,249,255,.96), rgba(255,255,255,.98)),
    url("../images/knls-direction-banner.webp") center top / cover no-repeat !important;
}

.org-structure-section--blueprint::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(circle at 7% 8%, rgba(254,80,0,.09), transparent 21%),
    radial-gradient(circle at 96% 12%, rgba(16,6,159,.08), transparent 22%),
    linear-gradient(180deg, rgba(255,255,255,.56), rgba(255,255,255,.86));
}

.org-structure-section--blueprint > .container {
  position: relative;
  z-index: 1;
  width: min(100% - 32px, 1500px);
}

.org-blueprint-title { margin-bottom: clamp(18px, 2.5vw, 30px) !important; }
.org-blueprint-title h2 {
  color: #10069F;
  font-size: clamp(1.85rem, 3.2vw, 3.35rem);
  letter-spacing: -.045em;
}
.org-blueprint-title p { max-width: 760px; margin-inline: auto; }

.org-blueprint-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: clamp(24px, 2.4vw, 36px);
  border: 1px solid rgba(16,6,159,.12);
  background: linear-gradient(135deg, rgba(255,255,255,.90), rgba(249,249,255,.82));
  box-shadow: 0 28px 84px rgba(16,6,159,.13);
  padding: clamp(18px, 2.2vw, 34px) clamp(14px, 2vw, 28px) clamp(22px, 2.5vw, 38px);
  backdrop-filter: blur(8px);
}

.org-blueprint-card__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.78), rgba(255,255,255,.66)),
    url("../images/knls-direction-banner.webp") center 50% / cover no-repeat;
  opacity: .32;
  filter: saturate(.92) contrast(.96);
}

.org-blueprint-card::before,
.org-blueprint-card::after {
  content: "";
  position: absolute;
  border-radius: 999px;
  z-index: -1;
  pointer-events: none;
}
.org-blueprint-card::before {
  width: 220px;
  height: 220px;
  left: -92px;
  top: -60px;
  background: rgba(254,80,0,.10);
}
.org-blueprint-card::after {
  width: 260px;
  height: 260px;
  right: -110px;
  bottom: -120px;
  background: rgba(16,6,159,.08);
}

.org-topline,
.org-executive-line,
.org-branch-grid,
.org-branch,
.org-subnode-stack {
  position: relative;
}

.org-topline {
  display: grid;
  grid-template-columns: 1fr minmax(230px, 380px) minmax(180px, 250px);
  align-items: center;
  gap: clamp(12px, 2vw, 26px);
  max-width: 1000px;
  margin: 0 auto;
}

.org-topline::after {
  content: "";
  position: absolute;
  left: 50%;
  right: 10.5%;
  top: 50%;
  height: 2px;
  background: rgba(16,6,159,.28);
  transform: translateY(-50%);
  z-index: -1;
}

.org-chart-node,
.org-subnode {
  border-radius: 18px;
  line-height: 1.22;
  text-align: center;
  font-weight: 850;
  color: #07113f;
  border: 1px solid rgba(16,6,159,.11);
  box-shadow: 0 15px 34px rgba(16,6,159,.11);
}

.org-chart-node {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 72px;
  padding: 14px 16px;
  font-size: clamp(.9rem, 1.04vw, 1.02rem);
}

.org-chart-node--board { grid-column: 2; }
.org-chart-node--audit-committee { grid-column: 3; }

.org-chart-node__icon {
  display: grid;
  place-items: center;
  flex: 0 0 42px;
  width: 42px;
  height: 42px;
  border-radius: 999px;
  background: #fff;
  color: #FE5000;
  box-shadow: inset 0 0 0 1px rgba(254,80,0,.16);
  font-size: 1.05rem;
}

.org-chart-node--navy {
  color: #fff;
  background: linear-gradient(135deg, #10069F 0%, #050042 100%);
  border-color: rgba(255,255,255,.22);
  box-shadow: 0 18px 42px rgba(16,6,159,.23);
}
.org-chart-node--navy span:last-child { color: #fff; }

.org-chart-node--white,
.org-chart-node--outline {
  background: rgba(255,255,255,.94);
  color: #10069F;
}
.org-chart-node--outline {
  border-color: rgba(254,80,0,.34);
  box-shadow: 0 14px 30px rgba(254,80,0,.08);
}

.org-executive-line {
  display: grid;
  place-items: center;
  margin: 28px auto 48px;
}
.org-executive-line::before,
.org-executive-line::after {
  content: "";
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(16,6,159,.28);
}
.org-executive-line::before {
  top: -28px;
  width: 2px;
  height: 28px;
}
.org-executive-line::after {
  bottom: -28px;
  width: min(1120px, 88vw);
  height: 2px;
  background: linear-gradient(90deg, transparent, rgba(16,6,159,.28) 6%, rgba(16,6,159,.28) 94%, transparent);
}

.org-chart-node--dg {
  width: min(380px, 100%);
  background: rgba(255,255,255,.95);
  color: #10069F;
  font-size: clamp(1rem, 1.2vw, 1.15rem);
}
.org-chart-node--dg::before,
.org-chart-node--dg::after,
.org-chart-node--board::after,
.org-chart-node--audit-committee::after {
  content: "";
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: #FE5000;
  box-shadow: 0 0 0 5px rgba(254,80,0,.12);
}
.org-chart-node--board,
.org-chart-node--audit-committee,
.org-chart-node--dg { position: relative; }
.org-chart-node--board::after { left: 50%; bottom: -34px; transform: translateX(-50%); }
.org-chart-node--audit-committee::after { left: 50%; bottom: -70px; transform: translateX(-50%); }
.org-chart-node--dg::before { left: 50%; top: -33px; transform: translateX(-50%); }
.org-chart-node--dg::after { left: 50%; bottom: -33px; transform: translateX(-50%); }

.org-chart-node--audit-committee::before {
  content: "";
  position: absolute;
  left: 50%;
  top: calc(100% + 10px);
  width: 2px;
  height: 142px;
  transform: translateX(-50%);
  background: rgba(16,6,159,.22);
}

.org-branch-grid {
  display: grid;
  grid-template-columns: .88fr repeat(4, 1.12fr) .95fr .94fr;
  align-items: start;
  gap: clamp(10px, 1.1vw, 16px);
  max-width: 1420px;
  margin: 0 auto;
}

.org-branch::before {
  content: "";
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  transform: translateX(-50%);
  background: rgba(16,6,159,.24);
}
.org-branch::after {
  content: "";
  position: absolute;
  top: -34px;
  left: 50%;
  width: 10px;
  height: 10px;
  transform: translateX(-50%);
  border-radius: 999px;
  background: #FE5000;
  box-shadow: 0 0 0 5px rgba(254,80,0,.12);
}

.org-branch--assurance::before {
  top: -132px;
  height: 132px;
  background: linear-gradient(180deg, rgba(16,6,159,.24), rgba(16,6,159,.12));
}
.org-branch--assurance::after { top: -138px; }

.org-chart-node--branch {
  min-height: 80px;
  padding: 12px 12px;
  border-radius: 18px;
  font-size: clamp(.78rem, .86vw, .95rem);
}
.org-chart-node--branch .org-chart-node__icon {
  flex-basis: 36px;
  width: 36px;
  height: 36px;
  font-size: .9rem;
}

.org-subnode-stack {
  display: grid;
  gap: 10px;
  margin-top: 14px;
  padding-top: 12px;
}
.org-subnode-stack::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  width: 2px;
  height: 12px;
  transform: translateX(-50%);
  background: rgba(16,6,159,.22);
}

.org-subnode {
  display: grid;
  place-items: center;
  min-height: 76px;
  padding: 12px 10px;
  background: rgba(255,255,255,.96);
  font-size: clamp(.74rem, .77vw, .86rem);
}
.org-subnode::before {
  content: "";
  width: 26px;
  height: 3px;
  border-radius: 99px;
  background: #FE5000;
  margin-bottom: 8px;
  opacity: .88;
}
.org-subnode--standalone,
.org-subnode--direct,
.org-subnode--audit {
  min-height: 84px;
}
.org-subnode--standalone {
  border-top: 5px solid #FE5000;
}
.org-subnode--direct {
  border-left: 5px solid #10069F;
}
.org-subnode--audit {
  border: 1px dashed rgba(254,80,0,.52);
  border-top: 5px solid #FE5000;
  background: linear-gradient(180deg, rgba(255,255,255,.97), rgba(255,248,243,.94));
}

.org-branch--direct-departments {
  display: grid;
  gap: 10px;
}

@media (max-width: 1240px) {
  .org-structure-section--blueprint > .container { width: min(100% - 24px, 1240px); }
  .org-branch-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .org-branch--assurance { grid-column: span 1; }
  .org-branch--direct-departments { grid-column: span 1; }
  .org-executive-line::after,
  .org-topline::after,
  .org-branch::before,
  .org-branch::after,
  .org-chart-node--audit-committee::before,
  .org-chart-node--audit-committee::after { display: none; }
  .org-executive-line { margin-bottom: 28px; }
}

@media (max-width: 900px) {
  .org-topline {
    grid-template-columns: 1fr;
    max-width: 520px;
  }
  .org-chart-node--board,
  .org-chart-node--audit-committee { grid-column: auto; }
  .org-branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .org-chart-node { min-height: 68px; }
}

@media (max-width: 620px) {
  .org-structure-section--blueprint > .container { width: min(100% - 20px, 100%); }
  .org-blueprint-card { padding: 16px 12px 18px; border-radius: 22px; }
  .org-branch-grid { grid-template-columns: 1fr; gap: 14px; }
  .org-chart-node { justify-content: flex-start; text-align: left; padding: 14px; }
  .org-subnode { min-height: 66px; text-align: left; place-items: center start; padding: 12px 14px; }
  .org-subnode::before { margin-bottom: 7px; }
  .org-subnode-stack { gap: 8px; }
}

/* =========================================================
   Organizational Structure final polish requested 22 May
   - Blue cover hero with KNLS building image on the right
   - Clearer connected structure lines
   - Footer without Connect/social block on this page
   ========================================================= */
body.organizational-structure-page .page-hero--org-visual {
  min-height: auto !important;
  padding: clamp(34px, 4.4vw, 58px) 0 !important;
  color: #ffffff !important;
  background-color: #07015f !important;
  background-image:
    linear-gradient(90deg,
      rgba(6, 0, 92, .98) 0%,
      rgba(16, 6, 159, .96) 38%,
      rgba(16, 6, 159, .72) 58%,
      rgba(16, 6, 159, .36) 76%,
      rgba(16, 6, 159, .08) 100%),
    linear-gradient(180deg, rgba(6, 0, 92, .18), rgba(6, 0, 92, .34)),
    url("../images/knls-direction-banner.webp") !important;
  background-size: auto, auto, min(58vw, 900px) auto !important;
  background-position: center, center, right center !important;
  background-repeat: no-repeat !important;
  border-bottom: 0 !important;
}

body.organizational-structure-page .page-hero--org-visual::before {
  background: radial-gradient(circle, rgba(254,80,0,.28), rgba(254,80,0,0) 68%) !important;
  top: -80px !important;
  left: -100px !important;
}

body.organizational-structure-page .page-hero--org-visual::after {
  background: linear-gradient(90deg, rgba(6,0,92,.08), rgba(255,255,255,.18)) !important;
  inset: 0 !important;
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
}

body.organizational-structure-page .page-hero--org-visual .page-hero__inner {
  position: relative;
  z-index: 2;
}

body.organizational-structure-page .page-hero--org-visual h1,
body.organizational-structure-page .page-hero--org-visual .kicker,
body.organizational-structure-page .page-hero--org-visual p {
  color: #ffffff !important;
}

body.organizational-structure-page .page-hero--org-visual p {
  max-width: 650px !important;
  color: rgba(255,255,255,.86) !important;
}

body.organizational-structure-page .page-hero--org-visual .breadcrumbs {
  background: rgba(255,255,255,.12) !important;
  border-color: rgba(255,255,255,.24) !important;
  color: #ffffff !important;
  box-shadow: none !important;
}

body.organizational-structure-page .page-hero--org-visual .breadcrumbs a {
  color: #ffffff !important;
}

body.organizational-structure-page .compact-footer {
  grid-template-columns: minmax(280px, 1.35fr) minmax(160px, .75fr) minmax(160px, .75fr) !important;
}

body.organizational-structure-page .compact-footer__connect,
body.organizational-structure-page .compact-footer__social {
  display: none !important;
}

body.organizational-structure-page .org-blueprint-card {
  overflow-x: auto;
}

body.organizational-structure-page .org-topline::after,
body.organizational-structure-page .org-executive-line::before,
body.organizational-structure-page .org-executive-line::after,
body.organizational-structure-page .org-chart-node--audit-committee::before,
body.organizational-structure-page .org-branch::before,
body.organizational-structure-page .org-subnode-stack::before {
  background: #534ccb !important;
  opacity: 1 !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 4px 10px rgba(16,6,159,.12);
}

body.organizational-structure-page .org-topline::after {
  height: 3px !important;
}

body.organizational-structure-page .org-executive-line {
  margin: 30px auto 26px !important;
}

body.organizational-structure-page .org-executive-line::after {
  left: 50% !important;
  bottom: -42px !important;
  width: 3px !important;
  height: 42px !important;
  transform: translateX(-50%) !important;
  background: #534ccb !important;
}

body.organizational-structure-page .org-branch-grid {
  position: relative;
  padding-top: 42px !important;
}

body.organizational-structure-page .org-branch-grid::before {
  content: "";
  position: absolute;
  top: 0;
  left: 4.5%;
  right: 4.5%;
  height: 3px;
  border-radius: 999px;
  background: #534ccb;
  box-shadow: 0 0 0 1px rgba(255,255,255,.72), 0 5px 12px rgba(16,6,159,.13);
}

body.organizational-structure-page .org-branch::before {
  top: -42px !important;
  height: 42px !important;
  width: 3px !important;
}

body.organizational-structure-page .org-branch::after,
body.organizational-structure-page .org-chart-node--dg::before,
body.organizational-structure-page .org-chart-node--dg::after,
body.organizational-structure-page .org-chart-node--board::after,
body.organizational-structure-page .org-chart-node--audit-committee::after {
  width: 12px !important;
  height: 12px !important;
  background: #FE5000 !important;
  border: 3px solid #ffffff;
  box-shadow: 0 6px 15px rgba(254,80,0,.28) !important;
  z-index: 4;
}

body.organizational-structure-page .org-branch::after {
  top: -48px !important;
}

body.organizational-structure-page .org-chart-node--audit-committee::before {
  width: 3px !important;
  height: 190px !important;
}

body.organizational-structure-page .org-branch--assurance::before {
  top: -190px !important;
  height: 190px !important;
  width: 3px !important;
}

body.organizational-structure-page .org-branch--assurance::after {
  top: -196px !important;
}

body.organizational-structure-page .org-chart-node,
body.organizational-structure-page .org-subnode {
  border-color: rgba(16,6,159,.18) !important;
}

body.organizational-structure-page .org-chart-node--navy {
  border-color: rgba(255,255,255,.34) !important;
}

@media (max-width: 1240px) {
  body.organizational-structure-page .org-executive-line::after,
  body.organizational-structure-page .org-branch-grid::before,
  body.organizational-structure-page .org-branch::before,
  body.organizational-structure-page .org-branch::after {
    display: block !important;
  }

  body.organizational-structure-page .org-topline::after,
  body.organizational-structure-page .org-chart-node--audit-committee::before,
  body.organizational-structure-page .org-chart-node--audit-committee::after {
    display: none !important;
  }

  body.organizational-structure-page .org-branch-grid::before {
    left: 8%;
    right: 8%;
  }

  body.organizational-structure-page .org-branch--assurance::before {
    top: -42px !important;
    height: 42px !important;
  }

  body.organizational-structure-page .org-branch--assurance::after {
    top: -48px !important;
  }
}

@media (max-width: 760px) {
  body.organizational-structure-page .page-hero--org-visual {
    background-image:
      linear-gradient(180deg, rgba(6,0,92,.96), rgba(16,6,159,.90)),
      url("../images/knls-direction-banner.webp") !important;
    background-size: auto, cover !important;
    background-position: center, center !important;
  }

  body.organizational-structure-page .compact-footer {
    grid-template-columns: 1fr !important;
  }

  body.organizational-structure-page .org-executive-line::after,
  body.organizational-structure-page .org-branch-grid::before,
  body.organizational-structure-page .org-branch::before,
  body.organizational-structure-page .org-branch::after,
  body.organizational-structure-page .org-subnode-stack::before {
    display: none !important;
  }
}


/* 22 May update: remove visible introductory heading block from Organizational Structure chart section */
body.organizational-structure-page .org-structure-section--blueprint {
  padding-top: clamp(20px, 2.8vw, 34px) !important;
}
body.organizational-structure-page .org-blueprint-title {
  display: none !important;
}


/* Strategic Plan page: uploaded cover images on each document card */
.strategic-section .document-card {
  grid-template-columns: 132px 1fr auto;
  align-items: stretch;
}

.strategic-section .document-card__cover {
  width: 132px;
  min-height: 112px;
  border-radius: 20px;
  overflow: hidden;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 14px 34px rgba(16, 6, 159, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
}

.strategic-section .document-card__cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Keep the 2012-2017 logo-like image clear instead of cropping important text */
.strategic-section .document-card:nth-child(3) .document-card__cover img {
  object-fit: contain;
  padding: 8px;
  background: #ffffff;
}

@media (max-width: 900px) {
  .strategic-section .document-card {
    grid-template-columns: 116px 1fr;
  }

  .strategic-section .document-card__cover {
    width: 116px;
    min-height: 104px;
  }
}

@media (max-width: 560px) {
  .strategic-section .document-card {
    grid-template-columns: 1fr;
  }

  .strategic-section .document-card__cover {
    width: 100%;
    min-height: 170px;
  }

  .strategic-section .document-card__cover img {
    object-fit: contain;
    padding: 10px;
    background: #ffffff;
  }
}


/* E-resources: show provider wordmark logos instead of initials-only placeholders */
.e-resource-card__logo-link {
  width: 118px !important;
  height: 58px !important;
  border-radius: 18px !important;
  background: #ffffff !important;
}

.e-resource-card__logo-link img {
  width: 104px !important;
  height: 42px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

.e-resource-card__tag,
.e-resource-card__category {
  max-width: calc(100% - 130px) !important;
}

.e-resource-logo-strip__grid img {
  width: 92px !important;
  height: 42px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  padding: 0 !important;
}

.e-resource-logo-strip__grid a {
  min-height: 86px !important;
}

/* Strategic Plan: keep cover images, but restore the download button to normal size */
.strategic-section .document-card {
  align-items: center !important;
}

.strategic-section .document-card .btn,
.strategic-section .document-card a.btn {
  align-self: center !important;
  width: auto !important;
  min-height: 0 !important;
  padding: 0.82rem 1.08rem !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    width: 100% !important;
    justify-content: center !important;
  }
}

@media (max-width: 640px) {
  .e-resource-card__top {
    align-items: flex-start !important;
  }

  .e-resource-card__logo-link {
    width: 104px !important;
  }

  .e-resource-card__logo-link img {
    width: 92px !important;
  }

  .e-resource-card__tag,
  .e-resource-card__category {
    max-width: calc(100% - 116px) !important;
  }
}


/* E-resources: official KNLS-page logos, no initials placeholders or duplicate logo-strip labels */
.e-resource-card__logo-link {
  width: 92px !important;
  height: 64px !important;
  padding: 8px !important;
  background: #ffffff !important;
  border-radius: 18px !important;
}

.e-resource-card__logo-link img {
  width: 100% !important;
  height: 100% !important;
  max-width: 76px !important;
  max-height: 48px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

.e-resource-card__logo-fallback {
  display: none !important;
}

.e-resource-card__tag,
.e-resource-card__category {
  max-width: calc(100% - 106px) !important;
}

.e-resource-logo-strip__grid a {
  min-height: 72px !important;
  gap: 0 !important;
}

.e-resource-logo-strip__grid img {
  width: 100% !important;
  height: 46px !important;
  max-width: 92px !important;
  object-fit: contain !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: 0 !important;
  border: 0 !important;
}

/* Strategic Plan: normal-size download buttons */
.strategic-section .document-card .btn,
.strategic-section .document-card a.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    width: auto !important;
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  .e-resource-card__logo-link {
    width: 84px !important;
    height: 58px !important;
  }
  .e-resource-card__tag,
  .e-resource-card__category {
    max-width: calc(100% - 96px) !important;
  }
}


/* E-resources clean-up: official KNLS logos only, no repeated category pills */
.e-resource-card__tag,
.e-resource-card__category {
  display: none !important;
}

.e-resource-card__top {
  justify-content: flex-start !important;
}

.e-resource-card__logo-fallback {
  display: none !important;
}

/* Show the official KNLS-source logo artwork only.
   Many official images include a long wordmark; this crops from the left so the logo mark appears
   while the resource name remains in the card title below. */
.e-resource-card__logo-link {
  width: 78px !important;
  height: 62px !important;
  padding: 8px !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 18px !important;
}

.e-resource-card__logo-link img.official-er-logo,
.e-resource-card__logo-link img {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.e-resource-logo-strip__grid a {
  min-height: 72px !important;
  overflow: hidden !important;
}

.e-resource-logo-strip__grid img.official-er-logo,
.e-resource-logo-strip__grid img {
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Keep compact download buttons on Strategic Plan cards */
.strategic-section .document-card .btn,
.strategic-section .document-card a.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    width: auto !important;
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  .e-resource-card__logo-link {
    width: 74px !important;
    height: 58px !important;
  }

  .e-resource-card__logo-link img.official-er-logo,
  .e-resource-card__logo-link img {
    height: 40px !important;
    max-height: 40px !important;
  }
}


/* Final e-resources logo cleanup:
   - use official KNLS-source images,
   - crop visible image area to the logo mark,
   - remove repeated category labels in cards,
   - avoid random-letter fallbacks. */
.e-resource-card__tag,
.e-resource-card__category,
.e-resource-card__logo-fallback {
  display: none !important;
}

.e-resource-card__top {
  justify-content: flex-start !important;
  min-height: 70px !important;
}

.e-resource-card__logo-link {
  width: 64px !important;
  height: 64px !important;
  padding: 7px !important;
  overflow: hidden !important;
  justify-content: flex-start !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 18px !important;
}

.e-resource-card__logo-link img.official-er-logo,
.e-resource-card__logo-link img {
  width: auto !important;
  min-width: auto !important;
  max-width: none !important;
  height: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.e-resource-logo-strip__grid a {
  min-height: 70px !important;
  overflow: hidden !important;
  gap: 0 !important;
}

.e-resource-logo-strip__grid a span {
  display: none !important;
}

.e-resource-logo-strip__grid img.official-er-logo,
.e-resource-logo-strip__grid img {
  width: auto !important;
  max-width: none !important;
  height: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
  object-position: left center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

/* Strategic Plan: keep download buttons normal-sized */
.strategic-section .document-card .btn,
.strategic-section .document-card a.btn {
  width: auto !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 0.75rem 1rem !important;
  font-size: 0.92rem !important;
  line-height: 1 !important;
  align-self: center !important;
  justify-self: end !important;
  white-space: nowrap !important;
}

@media (max-width: 900px) {
  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    justify-self: start !important;
  }
}

@media (max-width: 640px) {
  .e-resource-card__logo-link {
    width: 60px !important;
    height: 60px !important;
  }
  .e-resource-card__logo-link img.official-er-logo,
  .e-resource-card__logo-link img {
    height: 42px !important;
    max-height: 42px !important;
  }
}


/* E-resources: make logos clearer and less zoomed */
.e-resource-card__logo-link {
  width: 92px !important;
  height: 64px !important;
  padding: 8px !important;
  overflow: hidden !important;
  justify-content: center !important;
  align-items: center !important;
  background: #ffffff !important;
  border-radius: 18px !important;
}

.e-resource-card__logo-link img.official-er-logo,
.e-resource-card__logo-link img {
  width: 100% !important;
  max-width: 100% !important;
  height: 100% !important;
  max-height: 48px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

.e-resource-logo-strip__grid a {
  min-height: 76px !important;
  overflow: hidden !important;
}

.e-resource-logo-strip__grid img.official-er-logo,
.e-resource-logo-strip__grid img {
  width: 100% !important;
  max-width: 92px !important;
  height: 46px !important;
  max-height: 46px !important;
  object-fit: contain !important;
  object-position: center center !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0 !important;
  background: transparent !important;
}

@media (max-width: 640px) {
  .e-resource-card__logo-link {
    width: 84px !important;
    height: 60px !important;
  }

  .e-resource-card__logo-link img.official-er-logo,
  .e-resource-card__logo-link img {
    max-height: 44px !important;
  }
}

/* Hero styling that blends the uploaded image on the right, similar to the organizational structure hero */
.page-hero--go-virtual,
.page-hero--isbn-visual {
  position: relative;
  overflow: hidden;
  color: #07113f !important;
  padding: clamp(44px, 5.5vw, 70px) 0 clamp(34px, 4vw, 52px) !important;
  border-bottom: 1px solid rgba(16,6,159,.08);
  background-color: #f7f8ff;
}

.page-hero--go-virtual {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 42%, rgba(247,248,255,.72) 68%, rgba(247,248,255,.28) 100%),
    url("../images/hero-vtabu-logo.png") right 4% center / min(34vw, 340px) auto no-repeat !important;
}

.page-hero--isbn-visual {
  background:
    linear-gradient(90deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.92) 42%, rgba(247,248,255,.72) 68%, rgba(247,248,255,.28) 100%),
    url("../images/hero-isbn-barcode.png") right 4% center / min(36vw, 360px) auto no-repeat !important;
}

.page-hero--go-virtual h1,
.page-hero--go-virtual .kicker,
.page-hero--isbn-visual h1,
.page-hero--isbn-visual .kicker {
  color: #10069F !important;
}

.page-hero--go-virtual p,
.page-hero--isbn-visual p,
.page-hero--go-virtual .breadcrumbs,
.page-hero--go-virtual .breadcrumbs a,
.page-hero--isbn-visual .breadcrumbs,
.page-hero--isbn-visual .breadcrumbs a {
  color: #5f6b7a !important;
}

.page-hero--go-virtual::before,
.page-hero--isbn-visual::before {
  content: "";
  position: absolute;
  right: -40px;
  top: -36px;
  width: 180px;
  height: 180px;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(254,80,0,.12), rgba(254,80,0,0) 70%);
  pointer-events: none;
}

@media (max-width: 900px) {
  .page-hero--go-virtual,
  .page-hero--isbn-visual {
    background-position: right 18px center !important;
  }
}

@media (max-width: 700px) {
  .page-hero--go-virtual,
  .page-hero--isbn-visual {
    background:
      linear-gradient(180deg, rgba(255,255,255,.96) 0%, rgba(255,255,255,.94) 100%),
      none !important;
  }
}


/* =========================================================
   WEBSITE CHANGES NEW - clean implementation patch
   ========================================================= */

/* Human verification before entering website */
.robot-entry-locked {
  overflow: hidden !important;
}

.robot-entry-overlay {
  position: fixed;
  inset: 0;
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 24px;
  background:
    radial-gradient(circle at 15% 10%, rgba(254,80,0,.18), transparent 28%),
    linear-gradient(135deg, rgba(6,0,92,.92), rgba(16,6,159,.88));
  backdrop-filter: blur(8px);
}

.robot-entry-card {
  width: min(440px, 100%);
  padding: clamp(24px, 5vw, 38px);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 32px 90px rgba(0,0,0,.25);
  text-align: center;
  border: 1px solid rgba(255,255,255,.65);
}

.robot-entry-card__icon {
  width: 62px;
  height: 62px;
  display: grid;
  place-items: center;
  margin: 0 auto 16px;
  border-radius: 50%;
  color: #ffffff;
  font-weight: 900;
  background: linear-gradient(135deg, #10069F, #FE5000);
}

.robot-entry-card h2 {
  color: #10069F;
  margin-bottom: 8px;
}

.robot-check,
.form-robot-check {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  margin: 18px auto;
  padding: 12px 14px;
  border-radius: 16px;
  background: #f8f8ff;
  border: 1px solid #e4e4f2;
  color: #07113f;
  font-weight: 800;
}

.form-robot-check {
  margin: 10px 0 14px;
}

.robot-check input,
.form-robot-check input {
  width: 18px;
  height: 18px;
  accent-color: #10069F;
}

.form-message.is-error {
  color: #c2410c;
  font-weight: 800;
}

/* Email client chooser */
.email-choice-modal {
  position: fixed;
  inset: 0;
  z-index: 99998;
  display: grid;
  place-items: center;
  padding: 18px;
  background: rgba(7, 17, 63, .58);
  backdrop-filter: blur(6px);
}

.email-choice-modal[hidden] {
  display: none !important;
}

.email-choice-card {
  position: relative;
  width: min(420px, 100%);
  padding: 28px;
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 24px 70px rgba(0,0,0,.22);
}

.email-choice-card h2 {
  color: #10069F;
  margin-bottom: 8px;
}

.email-choice-card__close {
  position: absolute;
  top: 10px;
  right: 12px;
  width: 34px;
  height: 34px;
  border: 0;
  border-radius: 50%;
  background: #fff1e8;
  color: #FE5000;
  font-size: 1.3rem;
  font-weight: 900;
  cursor: pointer;
}

.email-choice-actions {
  display: grid;
  gap: 10px;
  margin-top: 18px;
}

.email-choice-actions a {
  display: block;
  padding: 12px 14px;
  border-radius: 14px;
  background: #f7f7ff;
  border: 1px solid #e4e4f2;
  color: #10069F;
  text-decoration: none;
  font-weight: 900;
}

.email-choice-actions a:hover,
.email-choice-actions a:focus-visible {
  border-color: rgba(254,80,0,.45);
  color: #FE5000;
}

/* Search instruction: short, home-only and not hidden behind accessibility widget */
.search-hint-toast {
  z-index: 1200 !important;
  right: 24px !important;
  bottom: 112px !important;
}

.search-hint-toast__close {
  position: absolute !important;
  top: -12px !important;
  right: -12px !important;
  display: grid !important;
  place-items: center !important;
  width: 32px !important;
  height: 32px !important;
  border: 2px solid #ffffff !important;
  border-radius: 50% !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  cursor: pointer !important;
  z-index: 2 !important;
}

@media (max-width: 640px) {
  .search-hint-toast {
    left: 14px !important;
    right: 14px !important;
    bottom: 92px !important;
    max-width: none !important;
  }
}

/* Our Services flyout menu for Kenya National Bibliography */
.dropdown--services-expanded {
  width: min(920px, 92vw) !important;
  grid-template-columns: repeat(3, minmax(180px, 1fr)) !important;
  gap: 14px !important;
  overflow: visible !important;
}

.dropdown__item--flyout {
  position: relative;
}

.dropdown__item--flyout > a {
  display: flex !important;
  justify-content: space-between;
  gap: 12px;
  align-items: center;
}

.dropdown__flyout {
  position: absolute;
  top: 0;
  left: calc(100% + 8px);
  min-width: 180px;
  padding: 10px;
  margin: 0;
  list-style: none;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.14);
  box-shadow: 0 20px 55px rgba(16,6,159,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-6px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 15;
}

.dropdown__item--flyout:hover .dropdown__flyout,
.dropdown__item--flyout:focus-within .dropdown__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

.dropdown__flyout a {
  display: block !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  color: #10069F !important;
  background: transparent !important;
}

.dropdown__flyout a:hover,
.dropdown__flyout a:focus-visible {
  background: #fff1e8 !important;
  color: #FE5000 !important;
}

@media (max-width: 1280px) {
  .dropdown--services-expanded {
    width: auto !important;
    grid-template-columns: 1fr !important;
    overflow: visible !important;
  }

  .dropdown__flyout {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    box-shadow: none;
    margin: 8px 0 0 12px;
    border-radius: 14px;
  }
}

/* Newly added services pages */
.service-detail-hero {
  background:
    linear-gradient(135deg, rgba(16,6,159,.94), rgba(6,0,92,.92)),
    url("../images/kenya-pattern.svg") center/cover repeat !important;
}

.service-detail-section {
  background:
    radial-gradient(circle at 8% 12%, rgba(254,80,0,.08), transparent 22%),
    linear-gradient(180deg, #ffffff, #f7f7ff);
}

.service-detail-intro {
  max-width: 860px;
  margin: 0 auto 28px;
  text-align: center;
}

.service-detail-intro h2 {
  color: #10069F;
  font-size: clamp(1.8rem, 3.4vw, 3rem);
  letter-spacing: -0.04em;
}

.service-detail-intro p {
  color: #536373;
  font-size: 1.05rem;
  line-height: 1.7;
}

.service-detail-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.service-detail-card {
  min-height: 238px;
  padding: 24px;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid #e4e4f2;
  box-shadow: 0 18px 46px rgba(16,6,159,.08);
}

.service-detail-card__icon {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff1e8;
  color: #FE5000;
  font-size: 1.4rem;
  margin-bottom: 16px;
}

.service-detail-card h3 {
  color: #10069F;
  margin-bottom: 8px;
}

.service-detail-card p {
  color: #536373;
  line-height: 1.62;
}

.service-detail-card__link {
  display: inline-flex;
  margin-top: 12px;
  color: #FE5000;
  font-weight: 900;
  text-decoration: none;
}

@media (max-width: 900px) {
  .service-detail-grid {
    grid-template-columns: 1fr;
  }
}

/* Recognition & Awards: visible cards instead of collapsed dropdowns */
.award-year-card--static {
  display: block !important;
}

.award-year-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  border-radius: 24px 24px 0 0;
  background: linear-gradient(90deg, rgba(255,255,255,.96), rgba(255,241,232,.75));
}

.award-year-card__header span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 76px;
  padding: 12px 18px;
  border-radius: 999px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
  font-size: 1.1rem;
}

.award-year-card__header strong {
  color: #FE5000;
  font-weight: 950;
}

/* v.tabu hero clickable logo area */
.page-hero--go-virtual {
  position: relative;
}

.hero-logo-click--vtabu {
  position: absolute;
  right: 4%;
  top: 50%;
  width: min(34vw, 340px);
  height: min(18vw, 150px);
  transform: translateY(-50%);
  z-index: 3;
  border-radius: 24px;
}

.hero-logo-click--vtabu:focus-visible {
  outline: 3px solid #FE5000;
  outline-offset: 4px;
}

@media (max-width: 700px) {
  .hero-logo-click--vtabu {
    display: none;
  }
}

/* Chatbot visibility on mobile */
.knls-chatbot {
  z-index: 1300 !important;
}

@media (max-width: 640px) {
  .knls-chatbot {
    right: 14px !important;
    bottom: 14px !important;
  }

  .knls-chatbot__toggle {
    width: 58px !important;
    height: 58px !important;
    box-shadow: 0 16px 38px rgba(16,6,159,.25) !important;
  }

  .knls-chatbot__panel {
    right: 0 !important;
    bottom: 72px !important;
    width: min(92vw, 380px) !important;
    max-height: 70vh !important;
  }
}

/* Organizational structure mobile landscape support */
@media (max-width: 760px) {
  .organizational-structure-page .org-blueprint-card,
  .org-structure-section .org-blueprint-card {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    padding-bottom: 18px !important;
  }

  .organizational-structure-page .org-topline,
  .organizational-structure-page .org-executive-line,
  .organizational-structure-page .org-branch-grid,
  .org-structure-section .org-topline,
  .org-structure-section .org-executive-line,
  .org-structure-section .org-branch-grid {
    min-width: 1120px !important;
  }

  .organizational-structure-page .org-topline::after,
  .org-structure-section .org-topline::after {
    top: 50% !important;
    height: 2px !important;
  }
}

/* Footer without connect/social column */
.compact-footer {
  grid-template-columns: minmax(280px, 1.35fr) minmax(160px, .75fr) minmax(160px, .75fr) !important;
  justify-content: start !important;
  text-align: left !important;
}

.compact-footer__connect,
.compact-footer__social {
  display: none !important;
}

@media (max-width: 780px) {
  .compact-footer {
    grid-template-columns: 1fr !important;
  }
}


/* =========================================================
   Our Services nav compact sub-dropdowns
   Keeps the main menu short and opens service groups only on hover/focus/tap.
   ========================================================= */
.dropdown--services-compact {
  width: min(360px, 92vw) !important;
  display: block !important;
  grid-template-columns: none !important;
  padding: 14px !important;
  overflow: visible !important;
  max-height: calc(100vh - 120px);
  background: #ffffff !important;
}

.dropdown--services-compact > li {
  position: relative;
}

.dropdown--services-compact > li > a,
.dropdown--services-compact .dropdown__group-toggle {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  padding: 13px 16px !important;
  border: 0;
  border-radius: 16px;
  background: transparent;
  color: #07113f !important;
  font: inherit;
  font-weight: 900;
  text-align: left;
  cursor: pointer;
  text-decoration: none;
}

.dropdown--services-compact > li > a:hover,
.dropdown--services-compact > li > a:focus-visible,
.dropdown--services-compact .dropdown__group-toggle:hover,
.dropdown--services-compact .dropdown__group-toggle:focus-visible,
.dropdown--services-compact .dropdown__group--collapsible.is-open > .dropdown__group-toggle {
  background: #fff1e8 !important;
  color: #FE5000 !important;
  outline: none;
}

.dropdown--services-compact .dropdown__group {
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
}

.dropdown--services-compact .dropdown__group-title {
  margin: 0 !important;
  min-height: auto !important;
}

.dropdown--services-compact .dropdown__group--collapsible > .dropdown__sub {
  position: absolute;
  top: 0;
  left: calc(100% + 12px);
  min-width: 290px;
  max-width: min(360px, 86vw);
  max-height: min(520px, calc(100vh - 150px));
  overflow: auto;
  padding: 12px;
  margin: 0;
  list-style: none;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.14);
  box-shadow: 0 24px 70px rgba(16,6,159,.18);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 40;
}

.dropdown--services-compact .dropdown__group--collapsible:hover > .dropdown__sub,
.dropdown--services-compact .dropdown__group--collapsible:focus-within > .dropdown__sub,
.dropdown--services-compact .dropdown__group--collapsible.is-open > .dropdown__sub {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

.dropdown--services-compact .dropdown__sub li + li {
  margin-top: 4px;
}

.dropdown--services-compact .dropdown__sub a {
  display: flex !important;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 11px 12px !important;
  border-radius: 14px;
  color: #5d6d63 !important;
  text-decoration: none;
  font-weight: 850;
}

.dropdown--services-compact .dropdown__sub a:hover,
.dropdown--services-compact .dropdown__sub a:focus-visible {
  background: #f3f2ff !important;
  color: #10069F !important;
}

.dropdown--services-compact .dropdown__item--flyout {
  position: relative;
}

.dropdown--services-compact .dropdown__flyout {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
  min-width: 190px;
  padding: 10px;
  margin: 0;
  list-style: none;
  border-radius: 18px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.14);
  box-shadow: 0 22px 60px rgba(16,6,159,.16);
  opacity: 0;
  visibility: hidden;
  transform: translateX(-8px);
  pointer-events: none;
  transition: opacity .18s ease, transform .18s ease, visibility .18s ease;
  z-index: 45;
}

.dropdown--services-compact .dropdown__item--flyout:hover .dropdown__flyout,
.dropdown--services-compact .dropdown__item--flyout:focus-within .dropdown__flyout {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
  pointer-events: auto;
}

@media (max-width: 1280px) {
  .dropdown--services-compact {
    width: auto !important;
    max-height: 70vh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
  }

  .dropdown--services-compact .dropdown__group--collapsible > .dropdown__sub {
    position: static;
    min-width: 0;
    max-width: none;
    max-height: none;
    box-shadow: none;
    border-radius: 16px;
    margin: 6px 0 8px 12px;
    padding: 8px;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    border-color: rgba(16,6,159,.10);
    background: #f8f8ff;
  }

  .dropdown--services-compact .dropdown__group--collapsible.is-open > .dropdown__sub,
  .dropdown--services-compact .dropdown__group--collapsible:focus-within > .dropdown__sub {
    display: block;
  }

  .dropdown--services-compact .dropdown__flyout {
    position: static;
    opacity: 1;
    visibility: visible;
    transform: none;
    pointer-events: auto;
    display: none;
    box-shadow: none;
    margin: 6px 0 0 12px;
    background: #ffffff;
  }

  .dropdown--services-compact .dropdown__item--flyout.is-open .dropdown__flyout,
  .dropdown--services-compact .dropdown__item--flyout:focus-within .dropdown__flyout {
    display: block;
  }
}

@media (max-width: 640px) {
  .dropdown--services-compact .dropdown__group-toggle,
  .dropdown--services-compact > li > a {
    padding: 11px 12px !important;
    font-size: .95rem;
  }
}


/* CAPTCHA-style verification update */
.captcha-box,
.form-captcha-box {
  width: 100%;
  margin: 18px 0;
  padding: 14px;
  border-radius: 18px;
  background: #f8f8ff;
  border: 1px solid #e4e4f2;
  color: #07113f;
}

.captcha-box label,
.form-captcha-box label {
  display: grid;
  gap: 8px;
  margin: 0;
  color: #07113f;
  font-weight: 850;
}

.captcha-box strong,
.form-captcha-box strong {
  color: #FE5000;
  letter-spacing: .02em;
}

.captcha-box__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px;
  margin-top: 10px;
}

.captcha-box input,
.form-captcha-box input {
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(16,6,159,.18);
  padding: 0 12px;
  font-weight: 800;
  background: #ffffff;
  color: #07113f;
}

.captcha-refresh,
.form-captcha-box__refresh {
  width: 42px;
  height: 42px;
  border: 0;
  border-radius: 14px;
  background: #10069F;
  color: #ffffff;
  font-size: 1.15rem;
  font-weight: 900;
  cursor: pointer;
}

.form-captcha-box {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 42px;
  gap: 8px 10px;
  align-items: end;
}

.form-captcha-box small,
.captcha-box small {
  grid-column: 1 / -1;
  display: block;
  min-height: 18px;
  color: #c2410c;
  font-weight: 800;
  margin-top: 6px;
}

.captcha-box.has-error,
.form-captcha-box.has-error {
  border-color: rgba(194,65,12,.45);
  box-shadow: 0 0 0 3px rgba(254,80,0,.10);
}

.robot-entry-card .btn[disabled] {
  opacity: .55;
  cursor: not-allowed;
}

@media (max-width: 560px) {
  .form-captcha-box {
    grid-template-columns: 1fr;
  }

  .form-captcha-box__refresh {
    width: 100%;
  }
}


/* Chatbot CAPTCHA layout fix:
   keeps the CAPTCHA compact above the message box and restores a normal send button size. */
.knls-chatbot__form {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  grid-template-areas:
    "captcha captcha"
    "input send" !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 10px 12px 12px !important;
}

.knls-chatbot__form > label.sr-only {
  position: absolute !important;
}

.knls-chatbot__form > input#knlsChatInput {
  grid-area: input !important;
  width: 100% !important;
  min-width: 0 !important;
  height: 44px !important;
  border-radius: 999px !important;
  padding: 0 14px !important;
}

.knls-chatbot__form > button[type="submit"] {
  grid-area: send !important;
  width: auto !important;
  min-width: 78px !important;
  height: 44px !important;
  min-height: 44px !important;
  max-height: 44px !important;
  padding: 0 16px !important;
  border-radius: 999px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  line-height: 1 !important;
  font-size: .92rem !important;
  writing-mode: horizontal-tb !important;
  white-space: nowrap !important;
}

.knls-chatbot__form .form-captcha-box {
  grid-area: captcha !important;
  width: 100% !important;
  margin: 0 0 4px !important;
  padding: 10px !important;
  border-radius: 16px !important;
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) 38px !important;
  gap: 6px 8px !important;
  align-items: end !important;
}

.knls-chatbot__form .form-captcha-box label {
  gap: 6px !important;
  font-size: .86rem !important;
  line-height: 1.25 !important;
}

.knls-chatbot__form .form-captcha-box label span {
  display: block !important;
}

.knls-chatbot__form .form-captcha-box input {
  height: 38px !important;
  border-radius: 14px !important;
  padding: 0 10px !important;
  font-size: .95rem !important;
}

.knls-chatbot__form .form-captcha-box__refresh {
  width: 38px !important;
  height: 38px !important;
  min-width: 38px !important;
  min-height: 38px !important;
  max-width: 38px !important;
  max-height: 38px !important;
  padding: 0 !important;
  border-radius: 999px !important;
  display: inline-grid !important;
  place-items: center !important;
  line-height: 1 !important;
}

.knls-chatbot__form .form-captcha-box small {
  min-height: 14px !important;
  margin-top: 2px !important;
  font-size: .75rem !important;
  line-height: 1.15 !important;
}

@media (max-width: 420px) {
  .knls-chatbot__form {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 9px !important;
  }

  .knls-chatbot__form > button[type="submit"] {
    min-width: 64px !important;
    padding: 0 12px !important;
    font-size: .86rem !important;
  }

  .knls-chatbot__form .form-captcha-box {
    grid-template-columns: minmax(0, 1fr) 36px !important;
  }

  .knls-chatbot__form .form-captcha-box__refresh {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    min-height: 36px !important;
  }
}


/* =========================================================
   Rich service pages from dev.knls.ac.ke content
   ========================================================= */
.service-rich-main {
  background: #ffffff;
}

.service-rich-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(280px, 36vw, 430px);
  display: flex;
  align-items: center;
  background:
    linear-gradient(90deg, rgba(16,6,159,.96) 0%, rgba(16,6,159,.88) 45%, rgba(16,6,159,.42) 68%, rgba(16,6,159,.18) 100%),
    var(--service-hero-img, url("../images/knls-direction-banner.webp")) right center / cover no-repeat !important;
  color: #ffffff;
}

.service-rich-hero::after {
  content: "";
  position: absolute;
  inset: auto -80px -120px auto;
  width: clamp(220px, 34vw, 480px);
  height: clamp(220px, 34vw, 480px);
  border-radius: 999px;
  background: rgba(254,80,0,.28);
  filter: blur(2px);
  pointer-events: none;
}

.service-rich-hero__inner {
  position: relative;
  z-index: 1;
}

.service-rich-hero__copy {
  max-width: 760px;
}

.service-rich-hero h1 {
  color: #ffffff !important;
  font-size: clamp(2.4rem, 5.1vw, 5rem);
  line-height: .95;
  letter-spacing: -0.055em;
  margin-bottom: 14px;
}

.service-rich-hero .kicker,
.service-rich-hero p {
  color: rgba(255,255,255,.92) !important;
}

.service-rich-hero .breadcrumbs {
  background: rgba(255,255,255,.16) !important;
  color: #ffffff !important;
  border-color: rgba(255,255,255,.25) !important;
  backdrop-filter: blur(8px);
}

.service-rich-hero .breadcrumbs a {
  color: #ffffff !important;
}

.service-rich-section {
  background:
    radial-gradient(circle at 8% 10%, rgba(254,80,0,.08), transparent 22%),
    radial-gradient(circle at 90% 16%, rgba(16,6,159,.07), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7f7ff 60%, #ffffff);
}

.service-rich-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(250px, .85fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: stretch;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.service-rich-intro__copy {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 24px 70px rgba(16,6,159,.09);
}

.service-rich-intro__copy h2 {
  color: #10069F;
  font-size: clamp(1.9rem, 3.7vw, 3.4rem);
  letter-spacing: -0.05em;
  line-height: 1.02;
  margin-bottom: 16px;
}

.service-rich-intro__copy p {
  color: #536373;
  line-height: 1.75;
  font-size: 1.03rem;
}

.service-rich-stats {
  display: grid;
  gap: 14px;
}

.service-rich-stat {
  padding: 22px;
  border-radius: 28px;
  background: linear-gradient(135deg, #10069F, #080047);
  box-shadow: 0 20px 55px rgba(16,6,159,.18);
  color: #ffffff;
}

.service-rich-stat strong {
  display: block;
  font-size: clamp(1.6rem, 3vw, 2.7rem);
  color: #ffffff;
  line-height: 1;
  margin-bottom: 6px;
}

.service-rich-stat span {
  color: rgba(255,255,255,.82);
  font-weight: 800;
}

.service-rich-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.service-rich-card {
  min-height: 230px;
  padding: 24px;
  border-radius: 28px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 18px 45px rgba(16,6,159,.08);
}

.service-rich-card__icon {
  width: 52px;
  height: 52px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  background: #fff1e8;
  color: #FE5000;
  font-size: 1.35rem;
  margin-bottom: 16px;
}

.service-rich-card h3 {
  color: #10069F;
  margin-bottom: 9px;
  letter-spacing: -0.02em;
}

.service-rich-card p {
  color: #536373;
  line-height: 1.62;
}

.service-rich-feature-block {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(240px, .65fr);
  gap: clamp(18px, 3vw, 32px);
  padding: clamp(24px, 4vw, 42px);
  margin-bottom: clamp(28px, 5vw, 56px);
  border-radius: 34px;
  color: #ffffff;
  background:
    radial-gradient(circle at 85% 12%, rgba(254,80,0,.38), transparent 32%),
    linear-gradient(135deg, #10069F, #05003d);
  box-shadow: 0 26px 80px rgba(16,6,159,.18);
}

.service-rich-feature-block h2,
.service-rich-feature-block .kicker {
  color: #ffffff !important;
}

.service-rich-feature-block ul {
  display: grid;
  gap: 10px;
  margin: 18px 0 0;
  padding-left: 20px;
}

.service-rich-feature-block li,
.service-rich-feature-block aside {
  color: rgba(255,255,255,.86);
  line-height: 1.65;
}

.service-rich-feature-block aside {
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  font-weight: 800;
}

.service-rich-gallery {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.service-rich-image {
  position: relative;
  overflow: hidden;
  min-height: 280px;
  border-radius: 30px;
  background: #f3f2ff;
  box-shadow: 0 20px 55px rgba(16,6,159,.10);
  border: 1px solid rgba(16,6,159,.10);
}

.service-rich-image img {
  width: 100%;
  height: 100%;
  min-height: 280px;
  object-fit: cover;
  display: block;
  transition: transform .45s ease;
}

.service-rich-image:hover img {
  transform: scale(1.04);
}

.service-rich-image figcaption {
  position: absolute;
  left: 16px;
  right: 16px;
  bottom: 16px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.88);
  color: #10069F;
  font-weight: 900;
  box-shadow: 0 10px 26px rgba(0,0,0,.12);
}

.service-rich-programs {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.program-card {
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 18px 48px rgba(16,6,159,.09);
}

.program-card img {
  width: 100%;
  height: 230px;
  object-fit: cover;
  display: block;
}

.program-card div {
  padding: 22px;
}

.program-card h3 {
  color: #10069F;
  margin-bottom: 8px;
}

.program-card p {
  color: #536373;
  line-height: 1.65;
}

.rare-scroll-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 18px;
  margin-bottom: clamp(28px, 5vw, 56px);
}

.rare-item-card {
  padding: 24px;
  border-radius: 30px;
  background:
    linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.85)),
    url("../images/kenya-pattern.svg") center/cover repeat;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 16px 44px rgba(16,6,159,.08);
}

.rare-item-card span {
  display: inline-grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 16px;
  background: #10069F;
  color: #ffffff;
  font-weight: 950;
  margin-bottom: 14px;
}

.rare-item-card h3 {
  color: #10069F;
  margin-bottom: 8px;
}

.rare-item-card p {
  color: #536373;
  line-height: 1.62;
}

.service-rich-cta {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background: #fff1e8;
  border: 1px solid rgba(254,80,0,.18);
}

.service-rich-cta h2 {
  color: #10069F;
  margin-bottom: 8px;
}

.service-rich-cta p {
  color: #536373;
}

@media (max-width: 1100px) {
  .service-rich-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .service-rich-gallery,
  .rare-scroll-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 780px) {
  .service-rich-hero {
    min-height: 360px;
    background:
      linear-gradient(180deg, rgba(16,6,159,.94), rgba(16,6,159,.80)),
      var(--service-hero-img, url("../images/knls-direction-banner.webp")) center / cover no-repeat !important;
  }

  .service-rich-intro,
  .service-rich-feature-block {
    grid-template-columns: 1fr;
  }

  .service-rich-grid,
  .service-rich-gallery,
  .service-rich-programs,
  .rare-scroll-list {
    grid-template-columns: 1fr;
  }

  .service-rich-cta {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* =========================================================
   Final dark mode coverage and readability patch
   Fixes light sections, invisible highlighted navigation text and dark-mode card contrast.
   ========================================================= */
body.dark-mode {
  --knls-ink: #f8fafc !important;
  --knls-black: #f8fafc !important;
  --knls-green: #ffb45f !important;
  --knls-green-soft: rgba(254,80,0,.16) !important;
  --knls-border: rgba(148,163,184,.26) !important;
  --white: #101b2f !important;
  --shadow: 0 24px 70px rgba(0,0,0,.42) !important;
  background: #07111f !important;
  color: #f8fafc !important;
}

/* Global dark surfaces */
body.dark-mode main,
body.dark-mode .section,
body.dark-mode section:not(.page-hero):not(.service-rich-hero):not(.home-hero):not(.hero),
body.dark-mode .page-section,
body.dark-mode .home-social-section,
body.dark-mode .home-social-section--compact,
body.dark-mode .homepage-final-author,
body.dark-mode .home-refresh-gallery,
body.dark-mode .facilities-click-section,
body.dark-mode .service-rich-section,
body.dark-mode .service-detail-section,
body.dark-mode .contact-social-section,
body.dark-mode .contact-social-section--compact,
body.dark-mode .awards-overview-section,
body.dark-mode .awards-section,
body.dark-mode .awards-context-section,
body.dark-mode .partners-section,
body.dark-mode .e-resource-page,
body.dark-mode .e-resource-section,
body.dark-mode .knb-archive-section,
body.dark-mode .knb-browser-section,
body.dark-mode .careers-section {
  background: #07111f !important;
  color: #f8fafc !important;
}

/* Header and top navigation */
body.dark-mode .top-strip,
body.dark-mode .site-header {
  background: rgba(7,17,31,.96) !important;
  border-color: rgba(148,163,184,.22) !important;
  backdrop-filter: blur(16px);
}

body.dark-mode .brand__text strong,
body.dark-mode .brand__text small,
body.dark-mode .top-strip a,
body.dark-mode .top-strip span,
body.dark-mode .nav__list > li > a,
body.dark-mode .nav__trigger {
  color: #f8fafc !important;
}

body.dark-mode .nav__list > li > a:hover,
body.dark-mode .nav__list > li > a.is-active,
body.dark-mode .nav__trigger:hover,
body.dark-mode .nav__trigger[aria-expanded="true"],
body.dark-mode .nav__item--dropdown.is-open > .nav__trigger {
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 14px 32px rgba(254,80,0,.28) !important;
}

body.dark-mode .search-button,
body.dark-mode .menu-toggle {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: rgba(254,80,0,.55) !important;
  box-shadow: 0 14px 34px rgba(254,80,0,.28) !important;
}

body.dark-mode .menu-toggle__line {
  background: #ffffff !important;
}

/* Dropdowns and nested dropdowns */
body.dark-mode .dropdown,
body.dark-mode .dropdown--services-compact,
body.dark-mode .dropdown__sub,
body.dark-mode .dropdown__flyout {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 26px 70px rgba(0,0,0,.46) !important;
}

body.dark-mode .dropdown a,
body.dark-mode .dropdown__group-title,
body.dark-mode .dropdown__group-toggle,
body.dark-mode .dropdown__sub a,
body.dark-mode .dropdown__flyout a,
body.dark-mode .dropdown--services-compact > li > a {
  color: #e5edf8 !important;
  background: transparent !important;
}

body.dark-mode .dropdown a:hover,
body.dark-mode .dropdown a:focus-visible,
body.dark-mode .dropdown__group-toggle:hover,
body.dark-mode .dropdown__group-toggle:focus-visible,
body.dark-mode .dropdown__group--collapsible.is-open > .dropdown__group-toggle,
body.dark-mode .dropdown__sub a:hover,
body.dark-mode .dropdown__sub a:focus-visible,
body.dark-mode .dropdown__flyout a:hover,
body.dark-mode .dropdown__flyout a:focus-visible {
  background: rgba(254,80,0,.18) !important;
  color: #ffffff !important;
}

/* Mobile menu dark background */
@media (max-width: 1024px) {
  body.dark-mode .nav__list {
    background: #07111f !important;
    border-color: rgba(148,163,184,.25) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.45) !important;
  }

  body.dark-mode .nav__list > li > a,
  body.dark-mode .nav__trigger {
    color: #f8fafc !important;
  }
}

/* Text contrast across dark-mode sections */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6,
body.dark-mode .section-title h2,
body.dark-mode .service-rich-intro__copy h2,
body.dark-mode .homepage-final-author__header h2,
body.dark-mode .social-connect-card strong,
body.dark-mode .visually-impaired-highlight h3,
body.dark-mode .journey-steps strong,
body.dark-mode .service-rich-card h3,
body.dark-mode .program-card h3,
body.dark-mode .rare-item-card h3 {
  color: #f8fafc !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode small,
body.dark-mode label,
body.dark-mode .section-title p,
body.dark-mode .service-rich-intro__copy p,
body.dark-mode .social-connect-card small,
body.dark-mode .visually-impaired-highlight p,
body.dark-mode .journey-steps small,
body.dark-mode .service-rich-card p,
body.dark-mode .program-card p,
body.dark-mode .rare-item-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .kicker,
body.dark-mode .homepage-final-author__header .kicker,
body.dark-mode .service-rich-intro__copy .kicker,
body.dark-mode .visually-impaired-highlight .kicker {
  color: #ffb45f !important;
}

/* Cards, panels and feature blocks */
body.dark-mode .homepage-service-card,
body.dark-mode .homepage-final-author,
body.dark-mode .journey-steps a,
body.dark-mode .facilities-click-main,
body.dark-mode .visually-impaired-highlight,
body.dark-mode .home-social-section .section-title,
body.dark-mode .social-connect-card,
body.dark-mode .contact-social-panel,
body.dark-mode .service-rich-intro__copy,
body.dark-mode .service-rich-card,
body.dark-mode .service-rich-image,
body.dark-mode .program-card,
body.dark-mode .rare-item-card,
body.dark-mode .service-rich-cta,
body.dark-mode .service-detail-card,
body.dark-mode .link-card,
body.dark-mode .award-year-card,
body.dark-mode .international-award-card,
body.dark-mode .awards-intro-card,
body.dark-mode .awards-stat-card,
body.dark-mode .award-spotlight-card,
body.dark-mode .awards-context-card,
body.dark-mode .awards-source-card,
body.dark-mode .e-resource-card,
body.dark-mode .e-resource-directory-card,
body.dark-mode .knb-doc-card,
body.dark-mode .knb-toolbar,
body.dark-mode .contact-form--compact,
body.dark-mode .contact-location-card {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.26) !important;
  color: #f8fafc !important;
  box-shadow: 0 22px 60px rgba(0,0,0,.34) !important;
}

/* Keep image cards visible while darkening their captions */
body.dark-mode .service-rich-image figcaption,
body.dark-mode .facilities-click-slide,
body.dark-mode .braille-access-slideshow {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.24) !important;
}

/* Author journey / ISBN-style sections */
body.dark-mode .homepage-final-author__header,
body.dark-mode .journey-steps,
body.dark-mode .journey-steps--landscape {
  color: #f8fafc !important;
}

body.dark-mode .journey-steps a {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode .journey-steps span {
  background: #FE5000 !important;
  color: #ffffff !important;
}

/* Social section and social cards */
body.dark-mode .home-social-section .section-title h2,
body.dark-mode .home-social-section .section-title p {
  color: #f8fafc !important;
}

body.dark-mode .social-connect-card {
  background: #101b2f !important;
}

body.dark-mode .social-connect-card:hover {
  border-color: rgba(254,80,0,.55) !important;
  transform: translateY(-4px);
}

/* Visually impaired highlight panel */
body.dark-mode .visually-impaired-highlight__copy {
  background: #101b2f !important;
  color: #f8fafc !important;
}

body.dark-mode .visually-impaired-highlight__copy a,
body.dark-mode .service-rich-cta a,
body.dark-mode .link-card a,
body.dark-mode .homepage-service-card a {
  color: #ffb45f !important;
}

/* Inputs and buttons */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select,
body.dark-mode .search-dialog input,
body.dark-mode .knb-search-input {
  background: #07111f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.32) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
  color: #94a3b8 !important;
}

body.dark-mode .btn,
body.dark-mode button,
body.dark-mode .career-tab,
body.dark-mode .e-resource-filter-chips button,
body.dark-mode .knb-filter-chip,
body.dark-mode .knb-year-chip {
  color: #f8fafc !important;
}

body.dark-mode .btn--orange,
body.dark-mode .btn--primary,
body.dark-mode button[type="submit"],
body.dark-mode .e-resource-filter-chips button.is-active,
body.dark-mode .knb-filter-chip.is-active,
body.dark-mode .knb-year-chip.is-active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  color: #ffffff !important;
}

body.dark-mode .btn--outline,
body.dark-mode .knb-filter-chip,
body.dark-mode .knb-year-chip,
body.dark-mode .e-resource-filter-chips button {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.30) !important;
  color: #f8fafc !important;
}

body.dark-mode .btn--outline:hover,
body.dark-mode .knb-filter-chip:hover,
body.dark-mode .knb-year-chip:hover,
body.dark-mode .e-resource-filter-chips button:hover {
  background: rgba(254,80,0,.18) !important;
  color: #ffffff !important;
  border-color: rgba(254,80,0,.45) !important;
}

/* Page heroes with pale overlays */
body.dark-mode .page-hero:not(.service-rich-hero) {
  background:
    radial-gradient(circle at 85% 12%, rgba(254,80,0,.16), transparent 32%),
    linear-gradient(135deg, #10069F, #07111f) !important;
  color: #f8fafc !important;
}

body.dark-mode .page-hero h1,
body.dark-mode .page-hero p,
body.dark-mode .page-hero .kicker,
body.dark-mode .page-hero .breadcrumbs,
body.dark-mode .page-hero .breadcrumbs a {
  color: #f8fafc !important;
}

body.dark-mode .breadcrumbs {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.18) !important;
}

/* Service-rich pages added from dev content */
body.dark-mode .service-rich-section,
body.dark-mode .service-rich-main {
  background: #07111f !important;
}

body.dark-mode .service-rich-feature-block {
  background:
    radial-gradient(circle at 85% 12%, rgba(254,80,0,.26), transparent 32%),
    linear-gradient(135deg, #172642, #07111f) !important;
  border-color: rgba(148,163,184,.26) !important;
}

body.dark-mode .service-rich-feature-block aside {
  background: rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.16) !important;
  color: #e5edf8 !important;
}

body.dark-mode .service-rich-stat {
  background: linear-gradient(135deg, #FE5000, #10069F) !important;
}

/* Chatbot and CAPTCHA panels */
body.dark-mode .knls-chatbot__panel,
body.dark-mode .knls-chatbot__messages,
body.dark-mode .knls-chatbot__form,
body.dark-mode .form-captcha-box,
body.dark-mode .captcha-box,
body.dark-mode .robot-entry-card,
body.dark-mode .email-choice-card {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.26) !important;
}

body.dark-mode .knls-chatbot__message--bot {
  background: #172642 !important;
  color: #f8fafc !important;
}

body.dark-mode .knls-chatbot__quick button {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.26) !important;
}

/* Footer */
body.dark-mode .site-footer,
body.dark-mode .compact-footer,
body.dark-mode .compact-footer__bottom {
  background: #07111f !important;
  color: #cbd5e1 !important;
  border-color: rgba(148,163,184,.22) !important;
}

body.dark-mode .site-footer a,
body.dark-mode .compact-footer a,
body.dark-mode .compact-footer h3,
body.dark-mode .compact-footer strong {
  color: #f8fafc !important;
}

body.dark-mode .footer-contact-icon {
  background: rgba(254,80,0,.22) !important;
  color: #ffb45f !important;
}

/* Accessibility widget in dark mode */
body.dark-mode .accessibility-panel,
body.dark-mode .accessibility-group button {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode .accessibility-group button:hover,
body.dark-mode .accessibility-group button:focus-visible {
  background: rgba(254,80,0,.18) !important;
  color: #ffffff !important;
}


/* Navigation overlap fix:
   Make only the actively hovered/open top menu show, and keep nested service menus layered correctly. */
.nav__list > li {
  position: relative;
}

.nav__item--dropdown > .dropdown {
  z-index: 1200 !important;
}

.nav__item--dropdown:hover {
  z-index: 1210 !important;
}

.dropdown--services-compact .dropdown__group--collapsible > .dropdown__sub,
.dropdown--services-compact .dropdown__item--flyout > .dropdown__flyout {
  z-index: 1225 !important;
}

/* Prevent stale focus outlines/menus from visually sitting under the next hovered menu */
.nav__item--dropdown:not(:hover):not(.is-open) > .dropdown {
  pointer-events: none;
}

@media (min-width: 1281px) {
  .dropdown--services-compact .dropdown__group--collapsible:not(:hover):not(:focus-within):not(.is-open) > .dropdown__sub,
  .dropdown--services-compact .dropdown__item--flyout:not(:hover):not(:focus-within):not(.is-open) > .dropdown__flyout {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Hover-accessible dropdown fix:
   users can move from a main tab into its dropdown without clicking and without the menu closing. */
@media (min-width: 1281px) {
  .nav__item--dropdown {
    position: relative;
  }

  /* Invisible bridge over the gap between the tab and dropdown. */
  .nav__item--dropdown::after {
    content: "";
    position: absolute;
    left: -8px;
    right: -8px;
    top: 100%;
    height: 18px;
    display: block;
    pointer-events: auto;
  }

  .nav__item--dropdown > .dropdown {
    top: calc(100% + 10px) !important;
  }

  .nav__item--dropdown.is-open > .dropdown,
  .nav__item--dropdown:hover > .dropdown,
  .nav__item--dropdown:focus-within > .dropdown {
    opacity: 1 !important;
    transform: translateY(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }

  /* Bridges for right-side submenus in Our Services. */
  .dropdown--services-compact .dropdown__group--collapsible,
  .dropdown--services-compact .dropdown__item--flyout {
    position: relative;
  }

  .dropdown--services-compact .dropdown__group--collapsible::after,
  .dropdown--services-compact .dropdown__item--flyout::after {
    content: "";
    position: absolute;
    top: 0;
    right: -16px;
    width: 18px;
    height: 100%;
    display: block;
    pointer-events: auto;
  }

  .dropdown--services-compact .dropdown__group--collapsible.is-open > .dropdown__sub,
  .dropdown--services-compact .dropdown__group--collapsible:hover > .dropdown__sub,
  .dropdown--services-compact .dropdown__group--collapsible:focus-within > .dropdown__sub,
  .dropdown--services-compact .dropdown__item--flyout.is-open > .dropdown__flyout,
  .dropdown--services-compact .dropdown__item--flyout:hover > .dropdown__flyout,
  .dropdown--services-compact .dropdown__item--flyout:focus-within > .dropdown__flyout {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateX(0) !important;
    pointer-events: auto !important;
  }

  /* Keep only non-active menus closed. */
  .nav__item--dropdown:not(:hover):not(:focus-within):not(.is-open) > .dropdown {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
}


/* Mobile dropdown close fix:
   On mobile/tablet, dropdowns display only when .is-open is present.
   This prevents :focus-within from keeping Our Services or nested tabs stuck open. */
@media (max-width: 1280px) {
  .nav__item--dropdown > .dropdown,
  .nav__item--dropdown:hover > .dropdown,
  .nav__item--dropdown:focus-within > .dropdown {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .nav__item--dropdown.is-open > .dropdown {
    display: block !important;
  }

  .dropdown--services-compact .dropdown__group--collapsible > .dropdown__sub,
  .dropdown--services-compact .dropdown__group--collapsible:hover > .dropdown__sub,
  .dropdown--services-compact .dropdown__group--collapsible:focus-within > .dropdown__sub {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .dropdown--services-compact .dropdown__group--collapsible.is-open > .dropdown__sub {
    display: block !important;
  }

  .dropdown--services-compact .dropdown__item--flyout > .dropdown__flyout,
  .dropdown--services-compact .dropdown__item--flyout:hover > .dropdown__flyout,
  .dropdown--services-compact .dropdown__item--flyout:focus-within > .dropdown__flyout {
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
  }

  .dropdown--services-compact .dropdown__item--flyout.is-open > .dropdown__flyout {
    display: block !important;
  }

  .dropdown--services-compact .dropdown__group-toggle[aria-expanded="false"] + .dropdown__sub {
    display: none !important;
  }
}


/* =========================================================
   DARK MODE FINAL FULL COVERAGE PATCH
   Fixes remaining pale panels, invisible text, hero images and Who We Are hero height.
   ========================================================= */

/* Core dark background across all normal content */
body.dark-mode,
body.dark-mode main,
body.dark-mode .section,
body.dark-mode .section--cream,
body.dark-mode .section--light,
body.dark-mode .careers-section,
body.dark-mode .service-detail-section,
body.dark-mode .knb-archive-section,
body.dark-mode .e-resource-section,
body.dark-mode .e-resource-subnav-section,
body.dark-mode .facilities-click-section,
body.dark-mode .home-social-section,
body.dark-mode .home-social-section--compact,
body.dark-mode .homepage-final-author,
body.dark-mode .homepage-final-services,
body.dark-mode .homepage-final-intro {
  background: #07111f !important;
  color: #f8fafc !important;
}

/* Keep hero images visible in dark mode instead of replacing them with a flat gradient */
body.dark-mode .page-hero--who-we-are {
  min-height: 0 !important;
  padding: 34px 0 !important;
  background:
    linear-gradient(90deg, rgba(16,6,159,.90) 0%, rgba(16,6,159,.70) 44%, rgba(7,17,31,.54) 100%),
    url("../images/who-we-are/who-we-are-top-header-visible.webp") center 44% / cover no-repeat !important;
}

body.dark-mode .page-hero--who-we-are .page-hero__inner {
  min-height: 135px !important;
  align-items: center !important;
}

body.dark-mode .page-hero--ecitizen {
  background:
    linear-gradient(90deg, rgba(16,6,159,.93) 0%, rgba(16,6,159,.78) 48%, rgba(7,17,31,.48) 100%),
    url("../images/services/ecitizen-coat-of-arms-bg.png") right 8% center / 230px auto no-repeat,
    linear-gradient(135deg, #10069F, #07111f) !important;
}

body.dark-mode .page-hero--digitization {
  background:
    linear-gradient(90deg, rgba(16,6,159,.90) 0%, rgba(7,17,31,.62) 100%),
    url("../images/services/digitization-scanner-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--data-center {
  background:
    linear-gradient(90deg, rgba(16,6,159,.88) 0%, rgba(7,17,31,.60) 100%),
    url("../images/homepage-final/data-centre-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--go-virtual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.94) 44%, rgba(7,17,31,.58) 70%, rgba(7,17,31,.25) 100%),
    url("../images/hero-vtabu-logo.png") right 4% center / min(34vw, 340px) auto no-repeat !important;
}

body.dark-mode .page-hero--isbn-visual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.98) 0%, rgba(7,17,31,.94) 44%, rgba(7,17,31,.58) 70%, rgba(7,17,31,.25) 100%),
    url("../images/hero-isbn-barcode.png") right 4% center / min(36vw, 360px) auto no-repeat !important;
}

body.dark-mode .page-hero h1,
body.dark-mode .page-hero h2,
body.dark-mode .page-hero .kicker,
body.dark-mode .page-hero p,
body.dark-mode .page-hero .breadcrumbs,
body.dark-mode .page-hero .breadcrumbs a {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(0,0,0,.40) !important;
}

body.dark-mode .breadcrumbs {
  background: rgba(255,255,255,.10) !important;
  border-color: rgba(255,255,255,.22) !important;
}

/* Service pages with side navigation */
body.dark-mode .service-detail-layout {
  color: #f8fafc !important;
}

body.dark-mode .service-side-nav,
body.dark-mode .content-panel,
body.dark-mode .service-detail-content,
body.dark-mode .service-intro-card,
body.dark-mode .service-feature-grid article,
body.dark-mode .ecitizen-service-grid article,
body.dark-mode .accordion-list details,
body.dark-mode .service-contact-card,
body.dark-mode .mini-download-card,
body.dark-mode .service-page-nav,
body.dark-mode .service-content-card,
body.dark-mode .service-rich-cta,
body.dark-mode .service-rich-card,
body.dark-mode .service-rich-intro__copy,
body.dark-mode .program-card,
body.dark-mode .rare-item-card {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.36) !important;
}

body.dark-mode .service-side-nav h2,
body.dark-mode .service-detail-content h2,
body.dark-mode .service-detail-content h3,
body.dark-mode .service-detail-content h4,
body.dark-mode .service-intro-card h2,
body.dark-mode .service-feature-grid h3,
body.dark-mode .ecitizen-service-grid h4,
body.dark-mode .accordion-list summary,
body.dark-mode .service-contact-card h3,
body.dark-mode .service-content-card h2,
body.dark-mode .service-content-card h3,
body.dark-mode .service-rich-card h3,
body.dark-mode .program-card h3,
body.dark-mode .rare-item-card h3 {
  color: #f8fafc !important;
}

body.dark-mode .service-detail-content p,
body.dark-mode .service-detail-content li,
body.dark-mode .service-intro-card p,
body.dark-mode .service-feature-grid p,
body.dark-mode .ecitizen-service-grid p,
body.dark-mode .service-contact-card p,
body.dark-mode .service-content-card p,
body.dark-mode .service-rich-card p,
body.dark-mode .program-card p,
body.dark-mode .rare-item-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .service-side-nav a,
body.dark-mode .service-page-nav a {
  background: #172642 !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.24) !important;
}

body.dark-mode .service-side-nav__nested {
  border-left-color: #FE5000 !important;
}

body.dark-mode .service-side-nav a:hover,
body.dark-mode .service-side-nav a.is-current,
body.dark-mode .service-page-nav a:hover,
body.dark-mode .service-page-nav a.is-current {
  background: rgba(254,80,0,.20) !important;
  color: #ffb45f !important;
}

body.dark-mode .service-chip-grid span {
  background: rgba(254,80,0,.18) !important;
  color: #ffb45f !important;
  border: 1px solid rgba(254,80,0,.32) !important;
}

body.dark-mode .accordion-list details[open] summary {
  background: rgba(255,255,255,.08) !important;
}

body.dark-mode .service-contact-card,
body.dark-mode .service-rich-feature-block {
  background:
    radial-gradient(circle at 85% 12%, rgba(254,80,0,.20), transparent 32%),
    linear-gradient(135deg, #172642, #07111f) !important;
}

/* Careers page tabs and panels */
body.dark-mode .career-tabs {
  background: transparent !important;
}

body.dark-mode .career-tab {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.34) !important;
  box-shadow: none !important;
}

body.dark-mode .career-tab:hover,
body.dark-mode .career-tab.is-active {
  background: #FE5000 !important;
  border-color: #FE5000 !important;
  color: #ffffff !important;
}

body.dark-mode .career-panel,
body.dark-mode .career-note {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fafc !important;
}

body.dark-mode .career-panel h3,
body.dark-mode .career-panel h4,
body.dark-mode .career-panel li,
body.dark-mode .career-note {
  color: #f8fafc !important;
}

/* E-resources and search page panels */
body.dark-mode .e-resource-search-panel,
body.dark-mode .e-resource-browser,
body.dark-mode .e-resource-overview-panel,
body.dark-mode .e-resource-local-search,
body.dark-mode .e-resource-search-embed,
body.dark-mode .e-resource-directory-card,
body.dark-mode .e-resource-card,
body.dark-mode .e-resource-subnav,
body.dark-mode .e-resource-logo-strip,
body.dark-mode .search-dialog__content {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fafc !important;
  box-shadow: 0 20px 60px rgba(0,0,0,.34) !important;
}

body.dark-mode .e-resource-search-panel h2,
body.dark-mode .e-resource-browser h2,
body.dark-mode .e-resource-card h3,
body.dark-mode .e-resource-directory-card h3,
body.dark-mode .e-resource-local-search h2,
body.dark-mode .e-resource-search-embed h2,
body.dark-mode .search-dialog__content h2 {
  color: #f8fafc !important;
}

body.dark-mode .e-resource-search-panel p,
body.dark-mode .e-resource-browser p,
body.dark-mode .e-resource-card p,
body.dark-mode .e-resource-directory-card p,
body.dark-mode .e-resource-local-search p,
body.dark-mode .e-resource-search-embed p {
  color: #cbd5e1 !important;
}

body.dark-mode .e-resource-local-search input,
body.dark-mode .e-resource-search-panel input,
body.dark-mode .search-dialog input,
body.dark-mode .knb-search-input,
body.dark-mode .search-input {
  background: #07111f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.34) !important;
}

body.dark-mode .e-resource-local-search input::placeholder,
body.dark-mode .e-resource-search-panel input::placeholder,
body.dark-mode .search-dialog input::placeholder,
body.dark-mode .knb-search-input::placeholder {
  color: #94a3b8 !important;
}

body.dark-mode .e-resource-subnav a,
body.dark-mode .e-resource-filter-chips button,
body.dark-mode .resource-category-chip {
  background: #172642 !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fafc !important;
}

body.dark-mode .e-resource-subnav a:hover,
body.dark-mode .e-resource-subnav a.is-active,
body.dark-mode .e-resource-filter-chips button:hover,
body.dark-mode .e-resource-filter-chips button.is-active {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
}

/* Homepage / other light cards highlighted in screenshots */
body.dark-mode .homepage-final-author__header,
body.dark-mode .journey-steps,
body.dark-mode .journey-steps a,
body.dark-mode .facilities-click-layout,
body.dark-mode .facilities-click-main,
body.dark-mode .visually-impaired-highlight,
body.dark-mode .visually-impaired-highlight__copy,
body.dark-mode .home-social-section .section-title,
body.dark-mode .social-connect-grid,
body.dark-mode .social-connect-card,
body.dark-mode .about-image-band,
body.dark-mode .about-image-band__copy,
body.dark-mode .about-mobile-library,
body.dark-mode .content-panel,
body.dark-mode .side-panel,
body.dark-mode .feature-card,
body.dark-mode .link-card,
body.dark-mode .cta-card {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  color: #f8fafc !important;
}

body.dark-mode .homepage-final-author__header h2,
body.dark-mode .journey-steps strong,
body.dark-mode .visually-impaired-highlight h3,
body.dark-mode .home-social-section h2,
body.dark-mode .social-connect-card strong,
body.dark-mode .content-panel h2,
body.dark-mode .content-panel h3,
body.dark-mode .side-panel h2,
body.dark-mode .feature-card h3,
body.dark-mode .link-card h3,
body.dark-mode .cta-card h2 {
  color: #f8fafc !important;
}

body.dark-mode .homepage-final-author__header p,
body.dark-mode .journey-steps small,
body.dark-mode .visually-impaired-highlight p,
body.dark-mode .home-social-section p,
body.dark-mode .social-connect-card small,
body.dark-mode .content-panel p,
body.dark-mode .side-panel p,
body.dark-mode .feature-card p,
body.dark-mode .link-card p,
body.dark-mode .cta-card p {
  color: #cbd5e1 !important;
}

/* Generic final readable text fallback */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
  color: #f8fafc !important;
}

body.dark-mode p,
body.dark-mode li,
body.dark-mode span,
body.dark-mode small,
body.dark-mode label {
  color: inherit;
}

body.dark-mode .kicker,
body.dark-mode .section-title .kicker {
  color: #ffb45f !important;
}

/* Button/readability fallbacks */
body.dark-mode .btn,
body.dark-mode button,
body.dark-mode a.btn {
  color: #ffffff !important;
}

body.dark-mode .btn--outline {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.30) !important;
  color: #f8fafc !important;
}

body.dark-mode .btn--orange,
body.dark-mode .btn--primary,
body.dark-mode button[type="submit"] {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
}

/* Specific white-card sections that must not stay pale in dark mode */
body.dark-mode [class*="panel"],
body.dark-mode [class*="card"] {
  border-color: rgba(148,163,184,.26);
}

/* Do not darken image/logo containers too aggressively */
body.dark-mode img {
  opacity: 1 !important;
}

@media (max-width: 760px) {
  body.dark-mode .page-hero--who-we-are {
    padding: 30px 0 !important;
  }

  body.dark-mode .page-hero--who-we-are .page-hero__inner {
    min-height: 110px !important;
  }

  body.dark-mode .page-hero--go-virtual,
  body.dark-mode .page-hero--isbn-visual {
    background:
      linear-gradient(180deg, rgba(7,17,31,.96), rgba(7,17,31,.92)) !important;
  }
}


/* =========================================================
   Organizational Structure connector alignment + mobile scroll fix
   - Keeps the chart in one full-width landscape/portrait canvas on mobile.
   - Prevents connector lines from extending beyond their intended boxes.
   ========================================================= */
body.organizational-structure-page .org-blueprint-card {
  --org-chart-width: 1520px;
  --org-col-width: 200px;
  --org-col-gap: 20px;
  --org-line: #534ccb;
  overflow-x: auto !important;
  overflow-y: hidden !important;
  -webkit-overflow-scrolling: touch;
  padding: 28px 28px 34px !important;
  scroll-snap-type: x proximity;
}

body.organizational-structure-page .org-blueprint-card::-webkit-scrollbar {
  height: 10px;
}

body.organizational-structure-page .org-blueprint-card::-webkit-scrollbar-track {
  background: rgba(16,6,159,.08);
  border-radius: 999px;
}

body.organizational-structure-page .org-blueprint-card::-webkit-scrollbar-thumb {
  background: rgba(16,6,159,.45);
  border-radius: 999px;
}

body.organizational-structure-page .org-topline,
body.organizational-structure-page .org-executive-line,
body.organizational-structure-page .org-branch-grid {
  width: var(--org-chart-width) !important;
  min-width: var(--org-chart-width) !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
  flex: 0 0 var(--org-chart-width) !important;
}

body.organizational-structure-page .org-topline {
  display: grid !important;
  grid-template-columns: repeat(7, var(--org-col-width)) !important;
  gap: var(--org-col-gap) !important;
  align-items: center !important;
  margin-bottom: 24px !important;
}

/* Board remains centred over the Director General. */
body.organizational-structure-page .org-chart-node--board {
  grid-column: 3 / 6 !important;
  justify-self: center !important;
  width: 420px !important;
}

/* Audit committee sits to the right without throwing a long loose line down the page. */
body.organizational-structure-page .org-chart-node--audit-committee {
  grid-column: 6 / 8 !important;
  justify-self: center !important;
  width: 300px !important;
}

/* Short, intentional link between Board and Audit Committee only. */
body.organizational-structure-page .org-topline::after {
  display: block !important;
  top: 50% !important;
  left: calc(50% + 210px) !important;
  right: auto !important;
  width: 190px !important;
  height: 3px !important;
  background: var(--org-line) !important;
  transform: translateY(-50%) !important;
  border-radius: 999px !important;
  z-index: 0 !important;
}

body.organizational-structure-page .org-chart-node--board,
body.organizational-structure-page .org-chart-node--audit-committee,
body.organizational-structure-page .org-chart-node--dg,
body.organizational-structure-page .org-branch,
body.organizational-structure-page .org-chart-node,
body.organizational-structure-page .org-subnode {
  z-index: 2 !important;
}

/* Clean vertical path from Board to Director General. */
body.organizational-structure-page .org-chart-node--board::after {
  left: 50% !important;
  bottom: -31px !important;
  transform: translateX(-50%) !important;
}

body.organizational-structure-page .org-executive-line {
  display: grid !important;
  place-items: center !important;
  margin: 0 auto 0 !important;
  padding: 0 0 42px !important;
}

body.organizational-structure-page .org-executive-line::before {
  top: -24px !important;
  left: 50% !important;
  width: 3px !important;
  height: 24px !important;
  background: var(--org-line) !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
}

body.organizational-structure-page .org-chart-node--dg {
  width: 420px !important;
  justify-self: center !important;
}

body.organizational-structure-page .org-chart-node--dg::before {
  top: -30px !important;
}

body.organizational-structure-page .org-chart-node--dg::after {
  bottom: -36px !important;
}

/* Vertical line from Director General to the main horizontal directorate trunk. */
body.organizational-structure-page .org-executive-line::after {
  display: block !important;
  left: 50% !important;
  bottom: 0 !important;
  width: 3px !important;
  height: 42px !important;
  background: var(--org-line) !important;
  transform: translateX(-50%) !important;
  border-radius: 999px !important;
}

/* Fixed 7-column structure. This remains intact on mobile and scrolls horizontally. */
body.organizational-structure-page .org-branch-grid {
  display: grid !important;
  grid-template-columns: repeat(7, var(--org-col-width)) !important;
  gap: var(--org-col-gap) !important;
  align-items: start !important;
  padding-top: 42px !important;
  margin-top: 0 !important;
}

/* Main trunk starts at the centre of the first branch and ends at the centre of the last branch. */
body.organizational-structure-page .org-branch-grid::before {
  display: block !important;
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: calc(var(--org-col-width) / 2) !important;
  right: calc(var(--org-col-width) / 2) !important;
  height: 3px !important;
  border-radius: 999px !important;
  background: var(--org-line) !important;
  box-shadow: 0 0 0 1px rgba(255,255,255,.70), 0 5px 12px rgba(16,6,159,.13) !important;
  z-index: 0 !important;
}

/* Every branch connector stops exactly at the trunk and box top. */
body.organizational-structure-page .org-branch::before {
  display: block !important;
  top: -42px !important;
  left: 50% !important;
  width: 3px !important;
  height: 42px !important;
  transform: translateX(-50%) !important;
  background: var(--org-line) !important;
  border-radius: 999px !important;
  z-index: 0 !important;
}

body.organizational-structure-page .org-branch::after {
  display: block !important;
  top: -48px !important;
  left: 50% !important;
  transform: translateX(-50%) !important;
  z-index: 3 !important;
}

/* Remove previous over-extended audit/assurance connector lines. */
body.organizational-structure-page .org-chart-node--audit-committee::before,
body.organizational-structure-page .org-chart-node--audit-committee::after {
  display: none !important;
}

body.organizational-structure-page .org-branch--assurance::before {
  top: -42px !important;
  height: 42px !important;
  background: var(--org-line) !important;
}

body.organizational-structure-page .org-branch--assurance::after {
  top: -48px !important;
}

/* Sub-department connectors are short and do not protrude. */
body.organizational-structure-page .org-subnode-stack {
  margin-top: 14px !important;
  padding-top: 12px !important;
}

body.organizational-structure-page .org-subnode-stack::before {
  display: block !important;
  top: 0 !important;
  height: 12px !important;
  width: 3px !important;
  background: var(--org-line) !important;
  border-radius: 999px !important;
}

/* Override older responsive rules that collapsed the chart into 4/2/1 columns. */
@media (max-width: 1240px) {
  body.organizational-structure-page .org-topline,
  body.organizational-structure-page .org-executive-line,
  body.organizational-structure-page .org-branch-grid {
    width: var(--org-chart-width) !important;
    min-width: var(--org-chart-width) !important;
    max-width: none !important;
  }

  body.organizational-structure-page .org-topline {
    grid-template-columns: repeat(7, var(--org-col-width)) !important;
  }

  body.organizational-structure-page .org-branch-grid {
    grid-template-columns: repeat(7, var(--org-col-width)) !important;
  }

  body.organizational-structure-page .org-topline::after,
  body.organizational-structure-page .org-executive-line::before,
  body.organizational-structure-page .org-executive-line::after,
  body.organizational-structure-page .org-branch-grid::before,
  body.organizational-structure-page .org-branch::before,
  body.organizational-structure-page .org-branch::after,
  body.organizational-structure-page .org-subnode-stack::before {
    display: block !important;
  }

  body.organizational-structure-page .org-chart-node--audit-committee::before,
  body.organizational-structure-page .org-chart-node--audit-committee::after {
    display: none !important;
  }

  body.organizational-structure-page .org-chart-node--board {
    grid-column: 3 / 6 !important;
  }

  body.organizational-structure-page .org-chart-node--audit-committee {
    grid-column: 6 / 8 !important;
  }
}

@media (max-width: 900px) {
  body.organizational-structure-page .org-blueprint-card {
    padding: 20px 18px 26px !important;
  }

  body.organizational-structure-page .org-topline,
  body.organizational-structure-page .org-branch-grid {
    grid-template-columns: repeat(7, var(--org-col-width)) !important;
  }

  body.organizational-structure-page .org-chart-node--board,
  body.organizational-structure-page .org-chart-node--audit-committee {
    grid-column: auto !important;
  }

  body.organizational-structure-page .org-chart-node--board {
    grid-column: 3 / 6 !important;
  }

  body.organizational-structure-page .org-chart-node--audit-committee {
    grid-column: 6 / 8 !important;
  }

  body.organizational-structure-page .org-chart-node {
    justify-content: center !important;
    text-align: center !important;
  }
}

@media (max-width: 620px) {
  body.organizational-structure-page .org-blueprint-card {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    padding: 18px 14px 24px !important;
    border-radius: 22px !important;
  }

  body.organizational-structure-page .org-branch-grid {
    grid-template-columns: repeat(7, var(--org-col-width)) !important;
    gap: var(--org-col-gap) !important;
  }

  body.organizational-structure-page .org-subnode {
    text-align: center !important;
    place-items: center !important;
  }

  body.organizational-structure-page .org-subnode::before {
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* Landscape mobile gets a slightly tighter canvas so more of the structure is visible after rotation. */
@media (max-height: 520px) and (orientation: landscape) {
  body.organizational-structure-page .org-blueprint-card {
    --org-chart-width: 1280px;
    --org-col-width: 165px;
    --org-col-gap: 18px;
    padding: 16px 14px 22px !important;
  }

  body.organizational-structure-page .org-chart-node--board,
  body.organizational-structure-page .org-chart-node--dg {
    width: 360px !important;
  }

  body.organizational-structure-page .org-chart-node--audit-committee {
    width: 280px !important;
  }

  body.organizational-structure-page .org-chart-node--branch,
  body.organizational-structure-page .org-subnode {
    font-size: .72rem !important;
  }

  body.organizational-structure-page .org-chart-node--branch {
    min-height: 70px !important;
  }

  body.organizational-structure-page .org-subnode {
    min-height: 62px !important;
  }
}

/* Dark mode connector contrast for the aligned chart. */
body.dark-mode.organizational-structure-page .org-blueprint-card {
  --org-line: #8b83ff;
  background: linear-gradient(135deg, rgba(16,27,47,.94), rgba(7,17,31,.92)) !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode.organizational-structure-page .org-blueprint-card__bg {
  background:
    linear-gradient(90deg, rgba(7,17,31,.82), rgba(7,17,31,.72)),
    url("../images/knls-direction-banner.webp") center 50% / cover no-repeat !important;
  opacity: .34 !important;
}

body.dark-mode.organizational-structure-page .org-subnode,
body.dark-mode.organizational-structure-page .org-chart-node--white,
body.dark-mode.organizational-structure-page .org-chart-node--outline {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.30) !important;
}

body.dark-mode.organizational-structure-page .org-subnode span,
body.dark-mode.organizational-structure-page .org-chart-node span {
  color: inherit !important;
}


/* Organizational Structure: remove icons from blue blocks only */
body.organizational-structure-page .org-chart-node--navy .org-chart-node__icon {
  display: none !important;
}

body.organizational-structure-page .org-chart-node--navy {
  gap: 0 !important;
  text-align: center !important;
  justify-content: center !important;
}

body.organizational-structure-page .org-chart-node--navy span:last-child {
  display: block !important;
  width: 100% !important;
}


/* =========================================================
   Light-default, dark image visibility, and service top slideshows
   ========================================================= */

/* Landing default: body receives light-mode from JS on load. This prevents old dark-mode preference from auto-loading. */
body.light-mode {
  background: #ffffff;
}

/* Make background/header images visible in dark mode by using lighter overlays instead of hiding images. */
body.dark-mode .service-rich-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.72) 0%, rgba(7,17,31,.56) 46%, rgba(7,17,31,.28) 72%, rgba(7,17,31,.12) 100%),
    var(--service-hero-img, url("../images/knls-direction-banner.webp")) right center / cover no-repeat !important;
}

body.dark-mode .page-hero--org-visual {
  background:
    linear-gradient(90deg, rgba(16,6,159,.82) 0%, rgba(7,17,31,.56) 52%, rgba(7,17,31,.18) 100%),
    url("../images/knls-direction-banner.webp") right center / cover no-repeat !important;
}

body.dark-mode .page-hero--who-we-are {
  background:
    linear-gradient(90deg, rgba(16,6,159,.76) 0%, rgba(7,17,31,.48) 50%, rgba(7,17,31,.18) 100%),
    url("../images/who-we-are/who-we-are-top-header-visible.webp") center 44% / cover no-repeat !important;
}

body.dark-mode .page-hero--ecitizen {
  background:
    linear-gradient(90deg, rgba(16,6,159,.76) 0%, rgba(7,17,31,.48) 56%, rgba(7,17,31,.16) 100%),
    url("../images/services/ecitizen-coat-of-arms-bg.png") right 8% center / 240px auto no-repeat,
    linear-gradient(135deg, #10069F, #07111f) !important;
}

body.dark-mode .page-hero--digitization {
  background:
    linear-gradient(90deg, rgba(16,6,159,.70) 0%, rgba(7,17,31,.42) 100%),
    url("../images/services/digitization-scanner-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--data-center {
  background:
    linear-gradient(90deg, rgba(16,6,159,.68) 0%, rgba(7,17,31,.40) 100%),
    url("../images/homepage-final/data-centre-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--go-virtual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.90) 0%, rgba(7,17,31,.76) 42%, rgba(7,17,31,.28) 75%, rgba(7,17,31,.06) 100%),
    url("../images/hero-vtabu-logo.png") right 4% center / min(34vw, 340px) auto no-repeat !important;
}

body.dark-mode .page-hero--isbn-visual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.90) 0%, rgba(7,17,31,.76) 42%, rgba(7,17,31,.28) 75%, rgba(7,17,31,.06) 100%),
    url("../images/hero-isbn-barcode.png") right 4% center / min(36vw, 360px) auto no-repeat !important;
}

/* Do not allow earlier mobile dark-mode overrides to remove hero images. */
@media (max-width: 760px) {
  body.dark-mode .service-rich-hero {
    background:
      linear-gradient(180deg, rgba(16,6,159,.72), rgba(7,17,31,.50)),
      var(--service-hero-img, url("../images/knls-direction-banner.webp")) center center / cover no-repeat !important;
  }

  body.dark-mode .page-hero--go-virtual {
    background:
      linear-gradient(180deg, rgba(7,17,31,.90), rgba(7,17,31,.70)),
      url("../images/hero-vtabu-logo.png") right 18px center / min(52vw, 220px) auto no-repeat !important;
  }

  body.dark-mode .page-hero--isbn-visual {
    background:
      linear-gradient(180deg, rgba(7,17,31,.90), rgba(7,17,31,.70)),
      url("../images/hero-isbn-barcode.png") right 18px center / min(54vw, 230px) auto no-repeat !important;
  }
}

/* Top slideshow section for Braille, Reading Rooms and Discussion Rooms */
.service-top-slideshow-wrap {
  padding: clamp(24px, 4vw, 44px) 0 0;
  background:
    radial-gradient(circle at 10% 10%, rgba(254,80,0,.08), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7f7ff);
}

.service-top-slideshow {
  display: grid;
  grid-template-columns: minmax(260px, .82fr) minmax(0, 1.18fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: stretch;
  overflow: hidden;
  border-radius: 36px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 26px 80px rgba(16,6,159,.10);
  padding: clamp(18px, 3vw, 28px);
}

.service-top-slideshow__copy {
  display: grid;
  align-content: center;
  min-height: 360px;
  padding: clamp(20px, 3vw, 34px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 95% 10%, rgba(254,80,0,.22), transparent 32%),
    linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
}

.service-top-slideshow__copy h2 {
  color: #ffffff;
  font-size: clamp(1.8rem, 3.6vw, 3.6rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin-bottom: 12px;
}

.service-top-slideshow__copy p,
.service-top-slideshow__copy .kicker {
  color: rgba(255,255,255,.88);
}

.service-top-slideshow__media {
  position: relative;
  min-height: 360px;
  border-radius: 28px;
  overflow: hidden;
  background: #101b2f;
}

.service-top-slideshow__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.025);
  transition: opacity .75s ease, visibility .75s ease, transform 1.2s ease;
}

.service-top-slideshow__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.service-top-slideshow__slide img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}

.service-top-slideshow__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 42%, rgba(7,17,31,.72));
  pointer-events: none;
}

.service-top-slideshow__slide figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  z-index: 1;
  color: #ffffff;
  font-weight: 900;
  font-size: clamp(.95rem, 1.5vw, 1.15rem);
  text-shadow: 0 2px 12px rgba(0,0,0,.55);
}

body.dark-mode .service-top-slideshow-wrap {
  background: #07111f !important;
}

body.dark-mode .service-top-slideshow {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.38) !important;
}

body.dark-mode .service-top-slideshow__copy {
  background:
    radial-gradient(circle at 95% 10%, rgba(254,80,0,.22), transparent 32%),
    linear-gradient(135deg, #172642, #07111f) !important;
}

body.dark-mode .service-top-slideshow__media {
  background: #07111f !important;
}

@media (max-width: 900px) {
  .service-top-slideshow {
    grid-template-columns: 1fr;
  }

  .service-top-slideshow__copy {
    min-height: auto;
  }

  .service-top-slideshow__media,
  .service-top-slideshow__slide img {
    min-height: 300px;
  }
}

@media (max-width: 560px) {
  .service-top-slideshow-wrap {
    padding-top: 18px;
  }

  .service-top-slideshow {
    border-radius: 24px;
    padding: 12px;
  }

  .service-top-slideshow__copy,
  .service-top-slideshow__media {
    border-radius: 18px;
  }

  .service-top-slideshow__media,
  .service-top-slideshow__slide img {
    min-height: 240px;
  }
}


/* =========================================================
   Events Gallery merged page
   Combines Events + Photo Gallery and removes Press Releases.
   ========================================================= */
.page-hero--events-gallery {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  background:
    linear-gradient(90deg, rgba(16,6,159,.92) 0%, rgba(16,6,159,.74) 44%, rgba(7,17,31,.32) 100%),
    url("../images/facilities-slideshow/facility-04-upper-reading-area.webp") center 42% / cover no-repeat !important;
}

.page-hero--events-gallery::after {
  content: "";
  position: absolute;
  right: -120px;
  bottom: -160px;
  width: 420px;
  height: 420px;
  border-radius: 999px;
  background: rgba(254,80,0,.22);
  pointer-events: none;
}

.page-hero--events-gallery .page-hero__inner {
  position: relative;
  z-index: 1;
}

.page-hero--events-gallery h1,
.page-hero--events-gallery p,
.page-hero--events-gallery .kicker,
.page-hero--events-gallery .breadcrumbs,
.page-hero--events-gallery .breadcrumbs a {
  color: #ffffff !important;
}

.events-gallery-actionbar {
  position: sticky;
  top: 94px;
  z-index: 92;
  padding: 12px 0;
  background: rgba(255,255,255,.86);
  border-bottom: 1px solid rgba(16,6,159,.12);
  backdrop-filter: blur(14px);
}

.events-gallery-actionbar__inner {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
}

.events-gallery-upcoming-button {
  box-shadow: 0 14px 38px rgba(254,80,0,.24);
}

.events-gallery-feature {
  background:
    radial-gradient(circle at 8% 10%, rgba(254,80,0,.10), transparent 26%),
    linear-gradient(180deg, #ffffff, #f7f7ff);
}

.events-gallery-feature__grid {
  display: grid;
  grid-template-columns: minmax(0, .78fr) minmax(0, 1.22fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: center;
}

.events-gallery-feature__copy {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background:
    radial-gradient(circle at 90% 12%, rgba(254,80,0,.18), transparent 30%),
    linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
  box-shadow: 0 26px 80px rgba(16,6,159,.18);
}

.events-gallery-feature__copy h2 {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: 1;
  letter-spacing: -.055em;
  margin-bottom: 14px;
}

.events-gallery-feature__copy p,
.events-gallery-feature__copy .kicker {
  color: rgba(255,255,255,.88);
}

.events-gallery-metrics {
  display: grid;
  gap: 10px;
  margin-top: 22px;
}

.events-gallery-metrics span {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.16);
  color: #ffffff;
  font-weight: 900;
}

.events-gallery-metrics strong {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 14px;
  background: #FE5000;
  color: #ffffff;
}

.events-gallery-mosaic {
  display: grid;
  grid-template-columns: 1.15fr .85fr;
  grid-template-rows: repeat(2, 210px);
  gap: 16px;
}

.events-gallery-mosaic figure {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 28px;
  background: #101b2f;
  box-shadow: 0 24px 70px rgba(16,6,159,.13);
}

.events-gallery-mosaic__large {
  grid-row: span 2;
}

.events-gallery-mosaic img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease;
}

.events-gallery-mosaic figure:hover img {
  transform: scale(1.05);
}

.events-gallery-mosaic figcaption {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  padding: 10px 12px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  color: #10069F;
  font-weight: 900;
  box-shadow: 0 10px 28px rgba(0,0,0,.14);
}

.event-grid--creative {
  align-items: stretch;
}

.event-grid--creative .event-card--featured {
  transform: translateY(-10px);
}

.events-gallery-wall {
  background:
    radial-gradient(circle at 90% 10%, rgba(16,6,159,.08), transparent 24%),
    #ffffff;
}

.events-gallery-wall__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  grid-auto-rows: 230px;
  gap: 16px;
}

.gallery-tile {
  position: relative;
  overflow: hidden;
  margin: 0;
  border-radius: 28px;
  background: #101b2f;
  box-shadow: 0 22px 60px rgba(16,6,159,.10);
  border: 1px solid rgba(16,6,159,.10);
}

.gallery-tile--tall {
  grid-row: span 2;
}

.gallery-tile--wide {
  grid-column: span 2;
}

.gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .5s ease, filter .5s ease;
}

.gallery-tile:hover img {
  transform: scale(1.06);
  filter: saturate(1.08);
}

.gallery-tile::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 35%, rgba(7,17,31,.78));
  pointer-events: none;
}

.gallery-tile figcaption {
  position: absolute;
  z-index: 1;
  left: 16px;
  right: 16px;
  bottom: 16px;
  color: #ffffff;
}

.gallery-tile figcaption strong {
  display: block;
  font-size: 1.1rem;
  margin-bottom: 2px;
}

.gallery-tile figcaption span {
  display: block;
  color: rgba(255,255,255,.82);
  font-weight: 700;
}

.events-gallery-cta {
  background:
    radial-gradient(circle at 8% 14%, rgba(254,80,0,.10), transparent 28%),
    linear-gradient(180deg, #f7f7ff, #ffffff);
}

.events-gallery-cta__panel {
  display: flex;
  justify-content: space-between;
  gap: 28px;
  align-items: center;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background: #10069F;
  color: #ffffff;
  box-shadow: 0 24px 75px rgba(16,6,159,.18);
  overflow: hidden;
  position: relative;
}

.events-gallery-cta__panel::after {
  content: "";
  position: absolute;
  right: -110px;
  top: -120px;
  width: 300px;
  height: 300px;
  border-radius: 999px;
  background: rgba(254,80,0,.30);
}

.events-gallery-cta__panel > * {
  position: relative;
  z-index: 1;
}

.events-gallery-cta__panel h2,
.events-gallery-cta__panel p,
.events-gallery-cta__panel .kicker {
  color: #ffffff;
}

body.dark-mode .page-hero--events-gallery {
  background:
    linear-gradient(90deg, rgba(16,6,159,.72) 0%, rgba(7,17,31,.44) 56%, rgba(7,17,31,.12) 100%),
    url("../images/facilities-slideshow/facility-04-upper-reading-area.webp") center 42% / cover no-repeat !important;
}

body.dark-mode .events-gallery-actionbar {
  background: rgba(7,17,31,.88);
  border-color: rgba(148,163,184,.22);
}

body.dark-mode .events-gallery-feature,
body.dark-mode .events-gallery-wall,
body.dark-mode .events-gallery-cta,
body.dark-mode .events-list {
  background: #07111f !important;
}

body.dark-mode .events-gallery-feature__copy,
body.dark-mode .events-gallery-cta__panel,
body.dark-mode .event-card,
body.dark-mode .gallery-tile,
body.dark-mode .events-gallery-mosaic figure {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 22px 65px rgba(0,0,0,.38) !important;
}

body.dark-mode .events-gallery-mosaic figcaption {
  background: rgba(16,27,47,.92);
  color: #ffffff;
}

@media (max-width: 1040px) {
  .events-gallery-feature__grid {
    grid-template-columns: 1fr;
  }

  .events-gallery-wall__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 680px) {
  .page-hero--events-gallery {
    min-height: 360px;
  }

  .events-gallery-actionbar {
    position: static;
  }

  .events-gallery-actionbar__inner,
  .events-gallery-cta__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .events-gallery-mosaic,
  .events-gallery-wall__grid {
    grid-template-columns: 1fr;
    grid-auto-rows: 240px;
  }

  .events-gallery-mosaic__large,
  .gallery-tile--tall,
  .gallery-tile--wide {
    grid-row: span 1;
    grid-column: span 1;
  }
}


/* =========================================================
   Responsive navigation + final dark-mode image visibility patch
   - Keeps navigation flowing left-to-right without hiding Contacts/Search.
   - Preserves hero/background images in dark mode.
   ========================================================= */

/* Desktop/header navigation should not push Contacts or the search icon off-screen. */
.site-header .nav {
  justify-content: flex-start !important;
  gap: clamp(8px, 1vw, 16px) !important;
  min-width: 0 !important;
}

.site-header .brand {
  flex: 0 0 auto !important;
  min-width: 0 !important;
}

.site-header .brand__text strong {
  max-width: clamp(120px, 14vw, 220px) !important;
}

.site-header .nav__list {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  justify-content: flex-start !important;
  overflow-x: auto !important;
  overflow-y: visible !important;
  white-space: nowrap !important;
  scrollbar-width: thin;
  scrollbar-color: rgba(16,6,159,.35) transparent;
  padding: 0 4px !important;
}

.site-header .nav__list::-webkit-scrollbar {
  height: 6px;
}

.site-header .nav__list::-webkit-scrollbar-track {
  background: transparent;
}

.site-header .nav__list::-webkit-scrollbar-thumb {
  background: rgba(16,6,159,.30);
  border-radius: 999px;
}

.site-header .nav__list > li {
  flex: 0 0 auto !important;
}

.site-header .nav__list a,
.site-header .nav__trigger {
  min-height: 38px !important;
  padding: 0 clamp(7px, .72vw, 10px) !important;
  font-size: clamp(.78rem, .78vw, .91rem) !important;
}

.site-header .search-button,
.site-header .menu-toggle {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin-left: auto !important;
}

@media (max-width: 1180px) and (min-width: 1025px) {
  .site-header .brand__text small {
    display: none !important;
  }

  .site-header .brand__text strong {
    max-width: 128px !important;
    font-size: .82rem !important;
  }

  .site-header .brand__crest {
    width: 46px !important;
    height: 46px !important;
  }
}

@media (max-width: 1024px) {
  .site-header .nav {
    justify-content: flex-start !important;
  }

  .site-header .nav__list {
    overflow-x: visible !important;
    overflow-y: auto !important;
    white-space: normal !important;
  }

  .site-header .search-button {
    margin-left: auto !important;
  }
}

/* Final dark-mode hero image restoration.
   These rules are intentionally last and explicit so earlier dark-mode overrides cannot flatten image heroes. */
body.dark-mode .page-hero--events-gallery {
  background:
    linear-gradient(90deg, rgba(16,6,159,.70) 0%, rgba(7,17,31,.40) 54%, rgba(7,17,31,.10) 100%),
    url("../images/facilities-slideshow/facility-04-upper-reading-area.webp") center 42% / cover no-repeat !important;
}

body.dark-mode .service-rich-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.68) 0%, rgba(7,17,31,.42) 48%, rgba(7,17,31,.12) 100%),
    var(--service-hero-img, url("../images/knls-direction-banner.webp")) right center / cover no-repeat !important;
}

body.dark-mode .page-hero--who-we-are {
  background:
    linear-gradient(90deg, rgba(16,6,159,.70) 0%, rgba(7,17,31,.42) 54%, rgba(7,17,31,.10) 100%),
    url("../images/who-we-are/who-we-are-top-header-visible.webp") center 44% / cover no-repeat !important;
}

body.dark-mode .page-hero--org-visual {
  background:
    linear-gradient(90deg, rgba(16,6,159,.72) 0%, rgba(7,17,31,.46) 56%, rgba(7,17,31,.12) 100%),
    url("../images/knls-direction-banner.webp") right center / cover no-repeat !important;
}

body.dark-mode .page-hero--digitization {
  background:
    linear-gradient(90deg, rgba(16,6,159,.62) 0%, rgba(7,17,31,.34) 100%),
    url("../images/services/digitization-scanner-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--data-center {
  background:
    linear-gradient(90deg, rgba(16,6,159,.60) 0%, rgba(7,17,31,.32) 100%),
    url("../images/homepage-final/data-centre-hero.webp") center center / cover no-repeat !important;
}

body.dark-mode .page-hero--ecitizen {
  background:
    linear-gradient(90deg, rgba(16,6,159,.62) 0%, rgba(7,17,31,.35) 58%, rgba(7,17,31,.08) 100%),
    url("../images/services/ecitizen-coat-of-arms-bg.png") right 8% center / 240px auto no-repeat,
    linear-gradient(135deg, #10069F, #07111f) !important;
}

body.dark-mode .page-hero--go-virtual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.86) 0%, rgba(7,17,31,.70) 42%, rgba(7,17,31,.20) 76%, rgba(7,17,31,.04) 100%),
    url("../images/hero-vtabu-logo.png") right 4% center / min(34vw, 340px) auto no-repeat !important;
}

body.dark-mode .page-hero--isbn-visual {
  background:
    linear-gradient(90deg, rgba(7,17,31,.86) 0%, rgba(7,17,31,.70) 42%, rgba(7,17,31,.20) 76%, rgba(7,17,31,.04) 100%),
    url("../images/hero-isbn-barcode.png") right 4% center / min(36vw, 360px) auto no-repeat !important;
}

body.dark-mode .contact-page-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.72), rgba(7,17,31,.52)),
    url("../images/knls-direction-banner.webp") right center / cover no-repeat !important;
}

body.dark-mode .partners-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.72), rgba(7,17,31,.42)),
    url("../images/kenya-pattern.svg") center / 420px repeat,
    linear-gradient(135deg, #10069F, #07111f) !important;
}

body.dark-mode .awards-hero {
  background:
    radial-gradient(circle at 78% 18%, rgba(254,80,0,.30), transparent 26%),
    linear-gradient(135deg, rgba(16,6,159,.90), rgba(7,17,31,.84)) !important;
}

body.dark-mode .e-resources-hero,
body.dark-mode .knb-compact-hero,
body.dark-mode .service-charter-hero,
body.dark-mode .news-bulletin-hero,
body.dark-mode .page-hero--events {
  background:
    radial-gradient(circle at 88% 10%, rgba(254,80,0,.26), transparent 24%),
    linear-gradient(135deg, rgba(16,6,159,.88), rgba(7,17,31,.82)),
    url("../images/kenya-pattern.svg") center / 360px repeat !important;
}

body.dark-mode .page-hero h1,
body.dark-mode .page-hero p,
body.dark-mode .page-hero .kicker,
body.dark-mode .page-hero .breadcrumbs,
body.dark-mode .page-hero .breadcrumbs a {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.45) !important;
}

/* Keep inline and regular images fully visible in dark mode. */
body.dark-mode img,
body.dark-mode picture,
body.dark-mode figure img,
body.dark-mode .service-top-slideshow__slide img,
body.dark-mode .gallery-tile img,
body.dark-mode .events-gallery-mosaic img,
body.dark-mode .event-card img,
body.dark-mode .service-rich-image img {
  opacity: 1 !important;
  visibility: visible !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

body.dark-mode .page-hero::before,
body.dark-mode .page-hero::after {
  opacity: .75;
}

@media (max-width: 760px) {
  body.dark-mode .service-rich-hero {
    background:
      linear-gradient(180deg, rgba(16,6,159,.64), rgba(7,17,31,.38)),
      var(--service-hero-img, url("../images/knls-direction-banner.webp")) center center / cover no-repeat !important;
  }

  body.dark-mode .page-hero--go-virtual {
    background:
      linear-gradient(180deg, rgba(7,17,31,.84), rgba(7,17,31,.62)),
      url("../images/hero-vtabu-logo.png") right 18px center / min(52vw, 220px) auto no-repeat !important;
  }

  body.dark-mode .page-hero--isbn-visual {
    background:
      linear-gradient(180deg, rgba(7,17,31,.84), rgba(7,17,31,.62)),
      url("../images/hero-isbn-barcode.png") right 18px center / min(54vw, 230px) auto no-repeat !important;
  }
}


/* =========================================================
   Navigation revert + left-aligned responsive fix
   Reverts the unnecessary horizontal-scroll navigation and keeps the header usable.
   ========================================================= */

/* Let the navigation occupy the page width from the left side instead of feeling centred/compressed. */
.site-header .container.nav {
  width: calc(100% - 24px) !important;
  max-width: none !important;
  margin-left: 12px !important;
  margin-right: 12px !important;
}

/* Restore the previous desktop navigation behaviour: no horizontal scrolling. */
.site-header .nav {
  justify-content: flex-start !important;
  gap: 12px !important;
  min-width: 0 !important;
}

.site-header .brand {
  flex: 0 0 auto !important;
  min-width: max-content !important;
}

.site-header .brand__text strong {
  max-width: 190px !important;
}

.site-header .nav__list {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  display: flex !important;
  justify-content: flex-start !important;
  align-items: center !important;
  gap: 2px !important;
  overflow-x: visible !important;
  overflow-y: visible !important;
  white-space: normal !important;
  scrollbar-width: auto !important;
  padding: 0 !important;
}

.site-header .nav__list::-webkit-scrollbar {
  display: none !important;
}

.site-header .nav__list > li {
  flex: 0 0 auto !important;
}

.site-header .nav__list a,
.site-header .nav__trigger {
  min-height: 40px !important;
  padding: 0 8px !important;
  font-size: .84rem !important;
  white-space: nowrap !important;
}

.site-header .search-button {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin-left: 6px !important;
}

.site-header .menu-toggle {
  flex: 0 0 42px !important;
  width: 42px !important;
  height: 42px !important;
  min-width: 42px !important;
  margin-left: 4px !important;
}

/* On medium laptops, keep the full nav but compact it slightly. */
@media (min-width: 1281px) and (max-width: 1440px) {
  .site-header .container.nav {
    width: calc(100% - 18px) !important;
    margin-left: 9px !important;
    margin-right: 9px !important;
  }

  .site-header .brand__crest {
    width: 46px !important;
    height: 46px !important;
    border-radius: 16px !important;
  }

  .site-header .brand__text strong {
    max-width: 136px !important;
    font-size: .78rem !important;
    line-height: 1.08 !important;
  }

  .site-header .brand__text small {
    display: none !important;
  }

  .site-header .nav {
    gap: 8px !important;
  }

  .site-header .nav__list a,
  .site-header .nav__trigger {
    min-height: 38px !important;
    padding: 0 6px !important;
    font-size: .76rem !important;
    gap: 4px !important;
  }

  .site-header .search-button,
  .site-header .menu-toggle {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
  }
}

/* For tablet/small laptop widths, use the previous hamburger-style menu instead of a horizontal scroll bar. */
@media (max-width: 1280px) {
  .site-header .container.nav {
    width: calc(100% - 24px) !important;
    margin-left: 12px !important;
    margin-right: 12px !important;
  }

  .site-header .nav {
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  .site-header .brand {
    min-width: 0 !important;
    max-width: calc(100% - 128px) !important;
  }

  .site-header .brand__text strong {
    max-width: 180px !important;
  }

  .site-header .nav__list {
    position: fixed !important;
    top: calc(var(--header-height) + 44px) !important;
    left: 16px !important;
    right: 16px !important;
    width: auto !important;
    max-height: calc(100vh - 130px) !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    display: none !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    padding: 16px !important;
    background: var(--white) !important;
    border: 1px solid var(--knls-border) !important;
    border-radius: 22px !important;
    box-shadow: var(--shadow) !important;
    white-space: normal !important;
    z-index: 1100 !important;
  }

  .site-header .nav__list.is-open {
    display: flex !important;
  }

  .site-header .nav__list > li {
    width: 100% !important;
  }

  .site-header .nav__list a,
  .site-header .nav__trigger {
    width: 100% !important;
    justify-content: space-between !important;
    min-height: 42px !important;
    font-size: .95rem !important;
    padding: 0 12px !important;
    white-space: normal !important;
  }

  .site-header .dropdown {
    position: static !important;
    width: 100% !important;
    box-shadow: none !important;
    border: 0 !important;
    background: var(--knls-bg) !important;
    display: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    pointer-events: auto !important;
    margin: 6px 0 8px !important;
  }

  .site-header .nav__item--dropdown.is-open > .dropdown {
    display: block !important;
  }

  .site-header .menu-toggle {
    display: inline-grid !important;
    gap: 4px !important;
    margin-left: auto !important;
  }

  .site-header .search-button {
    margin-left: auto !important;
  }
}

@media (max-width: 640px) {
  .site-header .container.nav {
    width: calc(100% - 18px) !important;
    margin-left: 9px !important;
    margin-right: 9px !important;
  }

  .site-header .brand__text strong {
    max-width: 138px !important;
  }

  .site-header .brand__text small {
    display: none !important;
  }

  .site-header .brand__crest {
    width: 44px !important;
    height: 44px !important;
  }
}

/* Dark-mode version of the reverted mobile menu. */
body.dark-mode .site-header .nav__list {
  background: #07111f !important;
  border-color: rgba(148,163,184,.25) !important;
}

body.dark-mode .site-header .dropdown {
  background: #101b2f !important;
}

body.dark-mode .site-header .nav__list a,
body.dark-mode .site-header .nav__trigger {
  color: #f8fafc !important;
}


/* =========================================================
   Republic of Kenya emblem + flag strip beside KNLS logo
   and dark-mode persistence update support.
   ========================================================= */
.brand__emblem-wrap {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  flex: 0 0 auto !important;
  padding-left: 10px !important;
  margin-left: 2px !important;
  border-left: 1px solid rgba(16, 6, 159, .18) !important;
}

.brand__emblem-wrap .brand__emblem {
  display: block !important;
  width: clamp(48px, 5.4vw, 72px) !important;
  height: clamp(48px, 5.4vw, 72px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  padding-left: 0 !important;
  border-left: 0 !important;
}

.brand__flag-strip {
  display: block !important;
  width: clamp(8px, .75vw, 12px) !important;
  height: clamp(48px, 5.4vw, 72px) !important;
  object-fit: fill !important;
  flex: 0 0 auto !important;
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .brand__emblem-wrap {
    padding-left: 8px !important;
    gap: 4px !important;
  }

  .brand__emblem-wrap .brand__emblem {
    width: 56px !important;
    height: 56px !important;
  }

  .brand__flag-strip {
    width: 9px !important;
    height: 56px !important;
  }
}

@media (max-width: 1280px) {
  .brand__emblem-wrap {
    padding-left: 8px !important;
  }

  .brand__emblem-wrap .brand__emblem {
    width: 52px !important;
    height: 52px !important;
  }

  .brand__flag-strip {
    width: 8px !important;
    height: 52px !important;
  }
}

@media (max-width: 640px) {
  .brand__emblem-wrap {
    gap: 3px !important;
    padding-left: 6px !important;
  }

  .brand__emblem-wrap .brand__emblem {
    width: 42px !important;
    height: 42px !important;
  }

  .brand__flag-strip {
    width: 7px !important;
    height: 42px !important;
  }
}

body.dark-mode .brand__emblem-wrap {
  border-left-color: rgba(255,255,255,.20) !important;
}

body.dark-mode .brand__emblem,
body.dark-mode .brand__flag-strip {
  filter: none !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   Header logo order, Go Virtual hero, dark-mode buttons and profile images
   ========================================================= */

/* Header: Republic of Kenya emblem + flag first, KNLS company logo second. */
.site-header .container.nav {
  margin-left: clamp(22px, 2.4vw, 42px) !important;
  margin-right: clamp(14px, 1.6vw, 28px) !important;
  width: calc(100% - clamp(42px, 4vw, 70px)) !important;
}

.brand {
  gap: clamp(10px, 1.3vw, 18px) !important;
}

.brand__emblem-wrap {
  order: 1 !important;
  padding-left: 0 !important;
  padding-right: clamp(12px, 1.4vw, 20px) !important;
  margin-left: 0 !important;
  margin-right: clamp(8px, 1vw, 14px) !important;
  border-left: 0 !important;
  border-right: 1px solid rgba(16, 6, 159, .18) !important;
}

.brand__logo {
  order: 2 !important;
  width: clamp(168px, 15vw, 230px) !important;
  max-width: 34vw !important;
  height: auto !important;
  max-height: 74px !important;
  object-fit: contain !important;
}

.brand__emblem-wrap .brand__emblem {
  width: clamp(54px, 5.6vw, 78px) !important;
  height: clamp(54px, 5.6vw, 78px) !important;
}

.brand__flag-strip {
  width: clamp(8px, .8vw, 13px) !important;
  height: clamp(54px, 5.6vw, 78px) !important;
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .site-header .container.nav {
    margin-left: 28px !important;
    margin-right: 18px !important;
    width: calc(100% - 46px) !important;
  }

  .brand__logo {
    width: 176px !important;
    max-width: 22vw !important;
  }

  .brand__emblem-wrap .brand__emblem {
    width: 58px !important;
    height: 58px !important;
  }

  .brand__flag-strip {
    width: 9px !important;
    height: 58px !important;
  }
}

@media (max-width: 1280px) {
  .site-header .container.nav {
    margin-left: 18px !important;
    margin-right: 14px !important;
    width: calc(100% - 32px) !important;
  }

  .brand {
    max-width: calc(100% - 132px) !important;
  }

  .brand__logo {
    width: clamp(132px, 28vw, 180px) !important;
    max-width: 42vw !important;
  }

  .brand__emblem-wrap {
    padding-right: 10px !important;
    margin-right: 6px !important;
  }
}

@media (max-width: 640px) {
  .brand__logo {
    width: clamp(112px, 34vw, 148px) !important;
  }

  .brand__emblem-wrap .brand__emblem {
    width: 42px !important;
    height: 42px !important;
  }

  .brand__flag-strip {
    width: 7px !important;
    height: 42px !important;
  }
}

/* Go Virtual hero: make the hero blue like other pages and keep v.tabu visible. */
.page-hero--go-virtual {
  min-height: clamp(300px, 38vw, 460px) !important;
  position: relative !important;
  overflow: hidden !important;
  background:
    radial-gradient(circle at 88% 20%, rgba(254,80,0,.22), transparent 28%),
    linear-gradient(135deg, #10069F 0%, #08005C 58%, #05002f 100%) !important;
}

.page-hero--go-virtual::before {
  content: "" !important;
  position: absolute !important;
  top: 50% !important;
  right: clamp(28px, 6vw, 110px) !important;
  width: min(420px, 38vw) !important;
  height: min(250px, 26vw) !important;
  transform: translateY(-50%) !important;
  border-radius: 30px !important;
  background:
    linear-gradient(rgba(255,255,255,.86), rgba(255,255,255,.86)),
    url("../images/hero-vtabu-logo.png") center / 82% auto no-repeat !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.40) !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.page-hero--go-virtual .page-hero__inner {
  position: relative !important;
  z-index: 2 !important;
}

.page-hero--go-virtual .hero-logo-click--vtabu {
  right: clamp(28px, 6vw, 110px) !important;
  top: 50% !important;
  width: min(420px, 38vw) !important;
  height: min(250px, 26vw) !important;
  transform: translateY(-50%) !important;
  border-radius: 30px !important;
  z-index: 3 !important;
}

body.dark-mode .page-hero--go-virtual {
  background:
    radial-gradient(circle at 88% 20%, rgba(254,80,0,.24), transparent 28%),
    linear-gradient(135deg, #10069F 0%, #08005C 58%, #05002f 100%) !important;
}

body.dark-mode .page-hero--go-virtual::before {
  background:
    linear-gradient(rgba(255,255,255,.90), rgba(255,255,255,.90)),
    url("../images/hero-vtabu-logo.png") center / 82% auto no-repeat !important;
  opacity: 1 !important;
  filter: none !important;
}

@media (max-width: 760px) {
  .page-hero--go-virtual::before,
  .page-hero--go-virtual .hero-logo-click--vtabu {
    width: min(260px, 72vw) !important;
    height: 140px !important;
    right: 18px !important;
    top: auto !important;
    bottom: 22px !important;
    transform: none !important;
  }

  .page-hero--go-virtual {
    padding-bottom: 170px !important;
  }
}

/* Dark mode button contrast fixes. */
body.dark-mode .btn--light,
body.dark-mode .btn--hero-outline,
body.dark-mode .btn--outline,
body.dark-mode .document-card__meta,
body.dark-mode .career-tab,
body.dark-mode .knb-filter-chip,
body.dark-mode .knb-year-chip,
body.dark-mode .e-resource-filter-chips button:not(.is-active) {
  background: #ffffff !important;
  color: #10069F !important;
  border-color: rgba(255,255,255,.72) !important;
  text-shadow: none !important;
}

body.dark-mode .btn--light:hover,
body.dark-mode .btn--hero-outline:hover,
body.dark-mode .btn--outline:hover,
body.dark-mode .career-tab:hover,
body.dark-mode .knb-filter-chip:hover,
body.dark-mode .knb-year-chip:hover,
body.dark-mode .e-resource-filter-chips button:not(.is-active):hover {
  background: #fff1e8 !important;
  color: #FE5000 !important;
  border-color: #FE5000 !important;
}

body.dark-mode .document-card .btn--orange,
body.dark-mode .btn--orange,
body.dark-mode a.btn--orange {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
  text-shadow: none !important;
}

body.dark-mode .document-card__icon {
  background: #10069F !important;
  color: #ffffff !important;
}

body.dark-mode .document-card h3,
body.dark-mode .document-card p {
  color: #f8fafc !important;
}

/* Board/management portraits: show full heads instead of cropping the top. */
.management-card__photo,
.board-management-card .management-card__photo {
  background: #ffffff !important;
  padding: 6px !important;
}

.management-card__photo img,
.board-management-card .management-card__photo img {
  object-fit: contain !important;
  object-position: center top !important;
  background: #ffffff !important;
  border-radius: 50% !important;
}

body.dark-mode .management-card__photo,
body.dark-mode .board-management-card .management-card__photo {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.85) !important;
}


/* =========================================================
   Navigation spacing + larger Republic of Kenya emblem + Go Virtual showcase
   ========================================================= */

/* Add breathing room between navigation tabs without returning to horizontal scroll. */
@media (min-width: 1281px) {
  .site-header .nav__list {
    gap: clamp(8px, .85vw, 16px) !important;
  }

  .site-header .nav__list a,
  .site-header .nav__trigger {
    padding-left: clamp(10px, .95vw, 16px) !important;
    padding-right: clamp(10px, .95vw, 16px) !important;
    min-height: 42px !important;
  }
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .site-header .nav__list {
    gap: 6px !important;
  }

  .site-header .nav__list a,
  .site-header .nav__trigger {
    padding-left: 8px !important;
    padding-right: 8px !important;
    font-size: .80rem !important;
  }
}

@media (min-width: 1441px) {
  .site-header .nav {
    gap: 18px !important;
  }
}

/* Increase Republic of Kenya emblem and ribbon while preserving responsive layout. */
.brand__emblem-wrap .brand__emblem {
  width: clamp(66px, 6.8vw, 96px) !important;
  height: clamp(66px, 6.8vw, 96px) !important;
}

.brand__flag-strip {
  width: clamp(9px, .9vw, 14px) !important;
  height: clamp(66px, 6.8vw, 96px) !important;
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .brand__emblem-wrap .brand__emblem {
    width: 70px !important;
    height: 70px !important;
  }

  .brand__flag-strip {
    width: 10px !important;
    height: 70px !important;
  }

  .brand__logo {
    width: 170px !important;
  }
}

@media (max-width: 1280px) {
  .brand__emblem-wrap .brand__emblem {
    width: 58px !important;
    height: 58px !important;
  }

  .brand__flag-strip {
    width: 9px !important;
    height: 58px !important;
  }
}

@media (max-width: 640px) {
  .brand__emblem-wrap .brand__emblem {
    width: 48px !important;
    height: 48px !important;
  }

  .brand__flag-strip {
    width: 8px !important;
    height: 48px !important;
  }
}

/* Go Virtual: remove the blue hero feel and use a clean v.tabu feature showcase. */
.go-virtual-showcase {
  padding: clamp(34px, 5vw, 70px) 0 clamp(22px, 4vw, 46px);
  background:
    radial-gradient(circle at 86% 12%, rgba(254,80,0,.10), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
  border-bottom: 1px solid rgba(16,6,159,.10);
}

.go-virtual-showcase__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, .78fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
}

.go-virtual-showcase__copy {
  padding: clamp(24px, 4vw, 42px);
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 24px 70px rgba(16,6,159,.10);
}

.go-virtual-showcase__copy h1 {
  color: #10069F;
  font-size: clamp(2.5rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.06em;
  margin-bottom: 14px;
}

.go-virtual-showcase__copy p {
  color: #536373;
  line-height: 1.7;
  max-width: 760px;
}

.go-virtual-showcase__logo {
  display: grid;
  place-items: center;
  min-height: clamp(240px, 28vw, 360px);
  padding: clamp(26px, 4vw, 50px);
  border-radius: 38px;
  background:
    radial-gradient(circle at 20% 20%, rgba(254,80,0,.12), transparent 28%),
    #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 28px 80px rgba(16,6,159,.14);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.go-virtual-showcase__logo:hover,
.go-virtual-showcase__logo:focus-visible {
  transform: translateY(-4px);
  box-shadow: 0 34px 90px rgba(16,6,159,.18);
  outline: none;
}

.go-virtual-showcase__logo img {
  width: min(100%, 430px);
  height: auto;
  object-fit: contain;
  display: block;
}

body.dark-mode .go-virtual-showcase {
  background: #07111f !important;
  border-color: rgba(148,163,184,.22) !important;
}

body.dark-mode .go-virtual-showcase__copy,
body.dark-mode .go-virtual-showcase__logo {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.38) !important;
}

body.dark-mode .go-virtual-showcase__copy h1 {
  color: #f8fafc !important;
}

body.dark-mode .go-virtual-showcase__copy p {
  color: #cbd5e1 !important;
}

body.dark-mode .go-virtual-showcase__logo {
  background:
    linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.96)),
    radial-gradient(circle at 20% 20%, rgba(254,80,0,.10), transparent 28%) !important;
}

body.dark-mode .go-virtual-showcase__logo img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 900px) {
  .go-virtual-showcase__inner {
    grid-template-columns: 1fr;
  }

  .go-virtual-showcase__logo {
    min-height: 220px;
  }
}

@media (max-width: 560px) {
  .go-virtual-showcase {
    padding-top: 24px;
  }

  .go-virtual-showcase__copy,
  .go-virtual-showcase__logo {
    border-radius: 24px;
  }
}


/* =========================================================
   Partners & Sponsors hero: title above, visible logo ribbon below
   ========================================================= */
.partners-hero {
  min-height: auto !important;
  padding: clamp(38px, 5vw, 70px) 0 clamp(30px, 4vw, 52px) !important;
}

.partners-hero::before {
  background:
    radial-gradient(circle at 12% 18%, rgba(254,80,0,.24), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(255,255,255,.16), transparent 26%),
    linear-gradient(135deg, rgba(16,6,159,.94), rgba(6,0,92,.86)) !important;
}

.partners-hero::after {
  background: linear-gradient(90deg, rgba(6,0,92,.72), rgba(6,0,92,.38)) !important;
}

.partners-hero .page-hero__inner.partners-hero__inner {
  display: grid !important;
  grid-template-columns: minmax(0, 1fr) auto !important;
  gap: clamp(18px, 3vw, 30px) !important;
  align-items: start !important;
  min-height: 0 !important;
  position: relative !important;
  z-index: 3 !important;
}

.partners-hero .page-hero__inner > div:first-child {
  grid-column: 1 / 2 !important;
  grid-row: 1 !important;
  max-width: 860px !important;
  padding: 0 !important;
  z-index: 4 !important;
}

.partners-hero .breadcrumbs {
  grid-column: 2 / 3 !important;
  grid-row: 1 !important;
  align-self: start !important;
  justify-self: end !important;
  z-index: 4 !important;
}

/* Make the infinite ribbon a visible row below the hero text, not a faint layer behind it. */
.partners-hero__ribbon.partner-logo-ribbon {
  grid-column: 1 / -1 !important;
  grid-row: 2 !important;
  position: relative !important;
  left: auto !important;
  top: auto !important;
  width: 100% !important;
  transform: none !important;
  margin-top: clamp(8px, 1.6vw, 18px) !important;
  padding: 16px 0 !important;
  border-radius: 30px !important;
  background: rgba(255,255,255,.92) !important;
  border: 1px solid rgba(255,255,255,.70) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.20) !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
  pointer-events: none !important;
  overflow: hidden !important;
  z-index: 3 !important;
  backdrop-filter: blur(10px) !important;
}

.partners-hero__ribbon .partner-logo-ribbon__track {
  animation: partnerMarqueeRight 32s linear infinite !important;
  gap: 24px !important;
}

.partners-hero__ribbon .partner-logo-ribbon__group {
  gap: 24px !important;
  padding-inline: 12px !important;
}

.partners-hero__ribbon .partner-logo-ribbon__group a {
  width: 182px !important;
  height: 84px !important;
  padding: 12px 18px !important;
  border-radius: 22px !important;
  background: #ffffff !important;
  border: 1px solid rgba(16,6,159,.16) !important;
  box-shadow: 0 12px 32px rgba(16,6,159,.10) !important;
  opacity: .98 !important;
}

.partners-hero__ribbon .partner-logo-ribbon__group img {
  max-width: 100% !important;
  max-height: 60px !important;
  object-fit: contain !important;
  filter: none !important;
  opacity: 1 !important;
}

.partners-hero__ribbon .partner-logo-ribbon__fade {
  display: block !important;
  width: 120px !important;
}

.partners-hero__ribbon .partner-logo-ribbon__fade--left {
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0)) !important;
}

.partners-hero__ribbon .partner-logo-ribbon__fade--right {
  background: linear-gradient(-90deg, rgba(255,255,255,.98), rgba(255,255,255,0)) !important;
}

body.dark-mode .partners-hero__ribbon.partner-logo-ribbon,
body.high-contrast-mode .partners-hero__ribbon.partner-logo-ribbon {
  background: rgba(16,27,47,.94) !important;
  border-color: rgba(255,255,255,.20) !important;
  opacity: 1 !important;
  mix-blend-mode: normal !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.34) !important;
}

body.dark-mode .partners-hero__ribbon .partner-logo-ribbon__group a {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.78) !important;
}

body.dark-mode .partners-hero__ribbon .partner-logo-ribbon__fade--left {
  background: linear-gradient(90deg, rgba(16,27,47,.98), rgba(16,27,47,0)) !important;
}

body.dark-mode .partners-hero__ribbon .partner-logo-ribbon__fade--right {
  background: linear-gradient(-90deg, rgba(16,27,47,.98), rgba(16,27,47,0)) !important;
}

@media (max-width: 980px) {
  .partners-hero .page-hero__inner.partners-hero__inner {
    grid-template-columns: 1fr !important;
  }

  .partners-hero .breadcrumbs {
    grid-column: 1 / -1 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }

  .partners-hero__ribbon.partner-logo-ribbon {
    grid-row: 3 !important;
    margin-top: 4px !important;
  }
}

@media (max-width: 640px) {
  .partners-hero__ribbon.partner-logo-ribbon {
    padding: 12px 0 !important;
    border-radius: 22px !important;
  }

  .partners-hero__ribbon .partner-logo-ribbon__group a {
    width: 138px !important;
    height: 68px !important;
    padding: 9px 13px !important;
  }

  .partners-hero__ribbon .partner-logo-ribbon__group img {
    max-height: 44px !important;
  }

  .partners-hero__ribbon .partner-logo-ribbon__fade {
    width: 42px !important;
  }
}

/* =========================================================
   Header adjacent image size increase
   Enlarges the Republic of Kenya emblem/ribbon beside the KNLS company logo.
   ========================================================= */
.brand__emblem-wrap {
  gap: clamp(6px, .75vw, 10px) !important;
  padding-right: clamp(14px, 1.6vw, 24px) !important;
  margin-right: clamp(10px, 1.2vw, 18px) !important;
}

.brand__emblem-wrap .brand__emblem {
  width: clamp(82px, 7.8vw, 116px) !important;
  height: clamp(82px, 7.8vw, 116px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
}

.brand__flag-strip {
  width: clamp(11px, 1vw, 16px) !important;
  height: clamp(82px, 7.8vw, 116px) !important;
  max-width: none !important;
  max-height: none !important;
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .brand__emblem-wrap .brand__emblem {
    width: 84px !important;
    height: 84px !important;
  }

  .brand__flag-strip {
    width: 12px !important;
    height: 84px !important;
  }

  .brand__logo {
    width: 168px !important;
  }
}

@media (max-width: 1280px) {
  .brand__emblem-wrap .brand__emblem {
    width: 68px !important;
    height: 68px !important;
  }

  .brand__flag-strip {
    width: 10px !important;
    height: 68px !important;
  }
}

@media (max-width: 640px) {
  .brand__emblem-wrap .brand__emblem {
    width: 54px !important;
    height: 54px !important;
  }

  .brand__flag-strip {
    width: 8px !important;
    height: 54px !important;
  }

  .brand__logo {
    width: clamp(108px, 32vw, 142px) !important;
  }
}


/* =========================================================
   Header Republic of Kenya composite logo replacement
   Uses the uploaded Republic of Kenya + ribbon image and positions it beside the KNLS logo.
   ========================================================= */
.brand {
  display: inline-flex !important;
  align-items: center !important;
  gap: clamp(14px, 1.5vw, 24px) !important;
}

.brand__logo {
  order: 1 !important;
  width: clamp(180px, 16vw, 250px) !important;
  max-width: 38vw !important;
  height: auto !important;
  max-height: 82px !important;
  object-fit: contain !important;
}

.brand__text,
.brand__emblem-wrap,
.brand__emblem,
.brand__flag-strip {
  display: none !important;
}

.brand__republic-wrap {
  order: 2 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex: 0 0 auto !important;
  padding-left: clamp(16px, 1.6vw, 26px) !important;
  margin-left: clamp(4px, .6vw, 10px) !important;
  border-left: 1px solid rgba(16, 6, 159, .22) !important;
}

.brand__republic-logo {
  display: block !important;
  width: clamp(108px, 8.6vw, 148px) !important;
  height: auto !important;
  max-height: 104px !important;
  object-fit: contain !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (min-width: 1281px) and (max-width: 1440px) {
  .brand {
    gap: 12px !important;
  }

  .brand__logo {
    width: 184px !important;
    max-width: 22vw !important;
  }

  .brand__republic-wrap {
    padding-left: 14px !important;
    margin-left: 2px !important;
  }

  .brand__republic-logo {
    width: 118px !important;
    max-height: 92px !important;
  }
}

@media (max-width: 1280px) {
  .brand {
    gap: 10px !important;
  }

  .brand__logo {
    width: clamp(132px, 28vw, 178px) !important;
    max-width: 42vw !important;
  }

  .brand__republic-wrap {
    padding-left: 10px !important;
  }

  .brand__republic-logo {
    width: clamp(84px, 15vw, 110px) !important;
    max-height: 82px !important;
  }
}

@media (max-width: 640px) {
  .brand__logo {
    width: clamp(110px, 34vw, 142px) !important;
  }

  .brand__republic-wrap {
    padding-left: 8px !important;
    margin-left: 0 !important;
  }

  .brand__republic-logo {
    width: clamp(68px, 20vw, 88px) !important;
    max-height: 68px !important;
  }
}

body.dark-mode .brand__republic-wrap {
  border-left-color: rgba(255,255,255,.22) !important;
}

body.dark-mode .brand__republic-logo,
body.dark-mode .brand__logo {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   Move v.tabu prices from homepage to Go Virtual page
   ========================================================= */

/* Hide any leftover homepage hero price panel if an older page copy still includes it. */
body.home-page .knls-hero-vtabu-prices {
  display: none !important;
}

/* Top Go Virtual layout: place the prices block next to the v.tabu logo. */
.go-virtual-showcase__visual {
  display: grid;
  grid-template-columns: minmax(220px, .86fr) minmax(280px, 1fr);
  gap: clamp(16px, 2.4vw, 24px);
  align-items: stretch;
}

.go-virtual-showcase__visual .go-virtual-showcase__logo {
  min-height: 100% !important;
}

.go-virtual-prices-card {
  display: grid;
  align-content: center;
  padding: clamp(18px, 2.4vw, 26px);
  border-radius: 32px;
  background:
    radial-gradient(circle at top right, rgba(254,80,0,.16), transparent 34%),
    linear-gradient(180deg, #ffffff, #f6f7ff);
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 28px 80px rgba(16,6,159,.13);
}

.go-virtual-prices-card h2 {
  color: #10069F;
  font-size: clamp(1.6rem, 2.6vw, 2.6rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin-bottom: 8px;
}

.go-virtual-prices-card__intro {
  color: #536373;
  font-size: .96rem;
  line-height: 1.55;
  margin: 0 0 14px;
}

.go-virtual-prices-card .knls-hero-quick-access__prices {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin: 6px 0 16px;
}

.go-virtual-prices-card .knls-hero-quick-access__prices article {
  min-height: 74px;
  padding: 12px;
}

.go-virtual-prices-card .knls-hero-quick-access__prices strong {
  font-size: 1.02rem;
}

.go-virtual-prices-card .knls-hero-vtabu-prices__cta {
  min-height: 46px;
}

body.dark-mode .go-virtual-prices-card {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.38) !important;
}

body.dark-mode .go-virtual-prices-card h2 {
  color: #f8fafc !important;
}

body.dark-mode .go-virtual-prices-card__intro {
  color: #cbd5e1 !important;
}

@media (max-width: 1180px) {
  .go-virtual-showcase__visual {
    grid-template-columns: 1fr;
  }

  .go-virtual-showcase__visual .go-virtual-showcase__logo {
    min-height: 220px !important;
  }
}

@media (max-width: 560px) {
  .go-virtual-prices-card {
    border-radius: 24px;
  }

  .go-virtual-prices-card .knls-hero-quick-access__prices {
    grid-template-columns: 1fr;
  }

  .go-virtual-prices-card .knls-hero-quick-access__prices article:last-child {
    grid-column: auto;
  }
}


/* =========================================================
   Requested service/page cleanup: American Corner, Vtabu, ISMN, ISBN downloads
   ========================================================= */

/* Header logo order: Republic of Kenya first, then KNLS logo. */
.brand__republic-wrap {
  order: 1 !important;
  padding-left: 0 !important;
  padding-right: clamp(14px, 1.5vw, 22px) !important;
  margin-left: 0 !important;
  margin-right: clamp(10px, 1vw, 16px) !important;
  border-left: 0 !important;
  border-right: 1px solid rgba(16, 6, 159, .22) !important;
}

.brand__logo {
  order: 2 !important;
}

body.dark-mode .brand__republic-wrap {
  border-right-color: rgba(255,255,255,.22) !important;
  border-left: 0 !important;
}

/* American Corner replacement slideshow. */
.american-corner-slideshow {
  position: relative;
  min-height: 430px;
  border-radius: 34px;
  overflow: hidden;
  background: #101b2f;
  box-shadow: 0 28px 80px rgba(16,6,159,.16);
  border: 1px solid rgba(16,6,159,.12);
}

.american-corner-slideshow .service-top-slideshow__slide img {
  min-height: 430px;
}

.american-corner-slideshow .service-top-slideshow__slide figcaption {
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 14px 18px;
  border-radius: 20px;
  background: rgba(255,255,255,.92);
  color: #10069F;
  text-shadow: none;
  box-shadow: 0 16px 36px rgba(0,0,0,.18);
}

body.dark-mode .american-corner-slideshow .service-top-slideshow__slide figcaption {
  background: rgba(16,27,47,.92);
  color: #ffffff;
}

/* When service feature blocks no longer have the side aside, let the content use the full width. */
.service-rich-feature-block:not(:has(aside)) {
  grid-template-columns: 1fr !important;
}

/* Compact ISBN/ISMN downloads and quick links. */
#downloads.service-block {
  padding-top: clamp(22px, 3vw, 34px) !important;
  padding-bottom: clamp(22px, 3vw, 34px) !important;
}

#downloads.service-block h2 {
  font-size: clamp(2rem, 4vw, 4.4rem) !important;
  margin-bottom: 18px !important;
}

#downloads .document-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 18px !important;
}

#downloads .document-card {
  min-height: auto !important;
  padding: 20px !important;
  border-radius: 24px !important;
  gap: 18px !important;
}

#downloads .document-card__icon {
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  border-radius: 18px !important;
  font-size: .98rem !important;
}

#downloads .document-card__body h3 {
  font-size: 1.1rem !important;
  line-height: 1.15 !important;
}

#downloads .document-card__body p {
  font-size: .94rem !important;
  line-height: 1.55 !important;
}

#downloads .document-card .btn {
  min-height: 42px !important;
  padding: 0 20px !important;
}

.ismn-example-card {
  max-width: 520px;
  margin: 24px 0 0;
  padding: 18px;
  border-radius: 26px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 20px 55px rgba(16,6,159,.10);
}

.ismn-example-card img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: 16px;
  background: #ffffff;
}

.ismn-example-card figcaption {
  margin-top: 10px;
  color: #536373;
  font-weight: 800;
}

body.dark-mode .ismn-example-card {
  background: #ffffff !important;
  border-color: rgba(255,255,255,.2) !important;
}

body.dark-mode .ismn-example-card figcaption {
  color: #10069F !important;
}

/* Vtabu: make prices block the visual focus, with the clickable logo inside the card. */
.go-virtual-showcase__inner {
  grid-template-columns: minmax(0, 1fr) minmax(320px, .88fr) !important;
}

.go-virtual-showcase__visual {
  display: block !important;
}

.go-virtual-prices-card {
  min-height: 100%;
}

.go-virtual-prices-card__logo {
  display: flex;
  justify-content: center;
  align-items: center;
  width: fit-content;
  max-width: 210px;
  margin: 0 auto 14px;
  padding: 10px 16px;
  border-radius: 20px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 14px 34px rgba(16,6,159,.10);
  transition: transform .2s ease, box-shadow .2s ease;
}

.go-virtual-prices-card__logo:hover,
.go-virtual-prices-card__logo:focus-visible {
  transform: translateY(-2px);
  box-shadow: 0 18px 44px rgba(16,6,159,.16);
  outline: 3px solid rgba(254,80,0,.22);
}

.go-virtual-prices-card__logo img {
  display: block;
  width: 160px;
  max-width: 100%;
  height: auto;
  object-fit: contain;
}

body.dark-mode .go-virtual-prices-card__logo {
  background: #ffffff !important;
}

body.dark-mode .go-virtual-prices-card__logo img {
  opacity: 1 !important;
  filter: none !important;
}

.go-virtual-showcase .two-column,
.go-virtual-showcase + .section .two-column {
  grid-template-columns: 1fr !important;
}

@media (max-width: 980px) {
  #downloads .document-grid {
    grid-template-columns: 1fr !important;
  }

  .go-virtual-showcase__inner {
    grid-template-columns: 1fr !important;
  }

  .american-corner-slideshow,
  .american-corner-slideshow .service-top-slideshow__slide img {
    min-height: 300px;
  }
}


/* =========================================================
   Contact email wrapping + compact service charter documents
   ========================================================= */

/* Prevent long email addresses from overflowing the contact card. */
.contact-quick-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr)) !important;
}

.contact-quick-card {
  min-width: 0 !important;
  align-items: flex-start !important;
}

.contact-quick-card > div,
.contact-location-card__body,
.contact-detail-list span {
  min-width: 0 !important;
}

.contact-quick-card p,
.contact-quick-card a,
.contact-detail-list a,
.top-strip__contact a {
  overflow-wrap: anywhere !important;
  word-break: break-word !important;
  line-break: anywhere !important;
}

.contact-quick-card a {
  display: inline-block !important;
  max-width: 100% !important;
}

/* Restyle Service Charter download cards to be compact and readable. */
.document-grid--service-charter {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(16px, 2vw, 24px) !important;
  align-items: stretch !important;
}

.document-grid--service-charter .document-card {
  display: grid !important;
  grid-template-columns: 76px 1fr !important;
  grid-template-rows: auto auto !important;
  gap: 16px 20px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: clamp(20px, 2.4vw, 28px) !important;
  border-radius: 28px !important;
}

.document-grid--service-charter .document-card__icon {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 70px !important;
  height: 70px !important;
  min-width: 70px !important;
  border-radius: 18px !important;
  font-size: .95rem !important;
}

.document-grid--service-charter .document-card__body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.document-grid--service-charter .document-card__body h3 {
  font-size: clamp(1.15rem, 1.2vw, 1.35rem) !important;
  line-height: 1.15 !important;
  margin-bottom: 8px !important;
  max-width: 100% !important;
  overflow-wrap: normal !important;
  word-break: normal !important;
  hyphens: none !important;
}

.document-grid--service-charter .document-card__body p {
  font-size: .96rem !important;
  line-height: 1.55 !important;
  margin-bottom: 12px !important;
}

.document-grid--service-charter .document-card__meta {
  display: inline-flex !important;
  width: fit-content !important;
  max-width: 100% !important;
  padding: 8px 14px !important;
  border-radius: 999px !important;
  font-size: .78rem !important;
  letter-spacing: .08em !important;
  white-space: normal !important;
}

.document-grid--service-charter .document-card .btn {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: end !important;
  min-height: 44px !important;
  padding: 0 22px !important;
  font-size: .95rem !important;
}

@media (max-width: 1180px) {
  .document-grid--service-charter {
    grid-template-columns: 1fr !important;
  }

  .document-grid--service-charter .document-card {
    grid-template-columns: 74px 1fr auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
  }

  .document-grid--service-charter .document-card__icon {
    grid-column: 1 !important;
    grid-row: 1 !important;
  }

  .document-grid--service-charter .document-card__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .document-grid--service-charter .document-card .btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

@media (max-width: 720px) {
  .document-grid--service-charter .document-card {
    grid-template-columns: 1fr !important;
  }

  .document-grid--service-charter .document-card__icon,
  .document-grid--service-charter .document-card__body,
  .document-grid--service-charter .document-card .btn {
    grid-column: 1 !important;
    grid-row: auto !important;
    justify-self: start !important;
  }
}


/* =========================================================
   2026 Chain of Events document section
   ========================================================= */
.event-document-section {
  background:
    radial-gradient(circle at 10% 10%, rgba(254,80,0,.08), transparent 28%),
    linear-gradient(180deg, #ffffff, #f7f7ff);
}

.event-document-hero {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(320px, 1.18fr);
  gap: clamp(22px, 4vw, 46px);
  align-items: stretch;
  margin-bottom: clamp(24px, 4vw, 42px);
}

.event-document-hero__copy {
  padding: clamp(24px, 4vw, 44px);
  border-radius: 36px;
  background:
    radial-gradient(circle at 96% 12%, rgba(254,80,0,.23), transparent 30%),
    linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
  box-shadow: 0 28px 80px rgba(16,6,159,.18);
}

.event-document-hero__copy h2 {
  color: #ffffff;
  font-size: clamp(2.2rem, 4.4vw, 4.8rem);
  line-height: .96;
  letter-spacing: -.06em;
  margin-bottom: 14px;
}

.event-document-hero__copy p,
.event-document-hero__copy .kicker {
  color: rgba(255,255,255,.88);
}

.event-document-hero__stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  margin-top: 24px;
}

.event-document-hero__stats span {
  display: grid;
  gap: 2px;
  padding: 14px 12px;
  border-radius: 18px;
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.18);
  color: #ffffff;
  font-weight: 900;
}

.event-document-hero__stats strong {
  display: block;
  font-size: clamp(1.6rem, 2.4vw, 2.4rem);
  color: #ffffff;
}

.event-doc-feature {
  position: relative;
  min-height: 430px;
  border-radius: 36px;
  overflow: hidden;
  background: #101b2f;
  box-shadow: 0 28px 80px rgba(16,6,159,.16);
  border: 1px solid rgba(16,6,159,.12);
}

.event-doc-feature__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.03);
  transition: opacity .75s ease, visibility .75s ease, transform 1.2s ease;
}

.event-doc-feature__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}

.event-doc-feature__slide img {
  width: 100%;
  height: 100%;
  min-height: 430px;
  object-fit: cover;
  object-position: center;
  display: block;
}

.event-doc-feature__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 36%, rgba(7,17,31,.76));
}

.event-doc-feature__slide figcaption {
  position: absolute;
  z-index: 1;
  left: 20px;
  right: 20px;
  bottom: 20px;
  padding: 16px 18px;
  border-radius: 22px;
  background: rgba(255,255,255,.94);
  color: #10069F;
  font-weight: 950;
  box-shadow: 0 14px 36px rgba(0,0,0,.18);
}

.event-doc-feature__slide figcaption span {
  display: block;
  color: #FE5000;
  font-size: .88rem;
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: .08em;
}

.event-doc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px;
  margin-bottom: 22px;
  border-radius: 24px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 18px 50px rgba(16,6,159,.08);
}

.event-doc-toolbar span {
  color: #536373;
  font-weight: 900;
}

.event-doc-toolbar div {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.event-doc-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 40px;
  padding: 0 16px;
  border-radius: 999px;
  background: #f7f7ff;
  color: #10069F;
  border: 1px solid rgba(16,6,159,.14);
  font-weight: 900;
  text-decoration: none;
}

.event-doc-chip.is-active,
.event-doc-chip:hover,
.event-doc-chip:focus-visible {
  background: #FE5000;
  color: #ffffff;
  border-color: #FE5000;
}

.event-doc-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(18px, 2.4vw, 26px);
}

.event-doc-card {
  display: grid;
  grid-template-rows: 260px 1fr;
  overflow: hidden;
  border-radius: 30px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 22px 64px rgba(16,6,159,.10);
  transition: transform .25s ease, box-shadow .25s ease;
}

.event-doc-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 28px 78px rgba(16,6,159,.16);
}

.event-doc-card__media {
  position: relative;
  overflow: hidden;
  background: #101b2f;
}

.event-doc-card__main-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .5s ease;
}

.event-doc-card:hover .event-doc-card__main-img {
  transform: scale(1.05);
}

.event-doc-card__thumbs {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  display: flex;
  gap: 8px;
  align-items: center;
}

.event-doc-card__thumbs img,
.event-doc-card__more {
  width: 58px;
  height: 46px;
  border-radius: 14px;
  object-fit: cover;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 24px rgba(0,0,0,.25);
  background: #ffffff;
}

.event-doc-card__more {
  display: grid;
  place-items: center;
  color: #10069F;
  font-weight: 950;
}

.event-doc-card__body {
  padding: 20px;
}

.event-doc-card__meta {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.event-doc-card__date,
.event-doc-card__tag {
  display: inline-flex;
  align-items: center;
  min-height: 30px;
  padding: 0 11px;
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 950;
}

.event-doc-card__date {
  background: #fff1e8;
  color: #FE5000;
}

.event-doc-card__tag {
  background: #f1f0ff;
  color: #10069F;
}

.event-doc-card h3 {
  color: #10069F;
  font-size: clamp(1.15rem, 1.45vw, 1.45rem);
  line-height: 1.08;
  letter-spacing: -.03em;
  margin-bottom: 10px;
}

.event-doc-card p {
  color: #536373;
  font-size: .95rem;
  line-height: 1.6;
}

body.dark-mode .event-document-section {
  background: #07111f !important;
}

body.dark-mode .event-doc-toolbar,
body.dark-mode .event-doc-card {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.35) !important;
}

body.dark-mode .event-doc-card h3,
body.dark-mode .event-doc-toolbar span {
  color: #f8fafc !important;
}

body.dark-mode .event-doc-card p {
  color: #cbd5e1 !important;
}

body.dark-mode .event-doc-feature__slide figcaption {
  background: rgba(16,27,47,.92);
  color: #ffffff;
}

@media (max-width: 1180px) {
  .event-document-hero,
  .event-doc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .event-document-hero,
  .event-doc-grid {
    grid-template-columns: 1fr;
  }

  .event-doc-feature,
  .event-doc-feature__slide img {
    min-height: 300px;
  }

  .event-document-hero__stats {
    grid-template-columns: 1fr;
  }

  .event-doc-card {
    grid-template-rows: 220px 1fr;
  }
}


/* =========================================================
   Dedicated Events Photo Gallery
   Separate from Upcoming Events page.
   ========================================================= */
.page-hero--events-photo {
  position: relative;
  overflow: hidden;
  min-height: clamp(330px, 40vw, 470px);
  background:
    linear-gradient(90deg, rgba(16,6,159,.90) 0%, rgba(16,6,159,.68) 46%, rgba(7,17,31,.16) 100%),
    url("../images/events-photo-gallery/ask-show/ask-show-01.webp") center 44% / cover no-repeat !important;
}

.page-hero--events-photo::after {
  content: "";
  position: absolute;
  right: -140px;
  bottom: -170px;
  width: 440px;
  height: 440px;
  border-radius: 999px;
  background: rgba(254,80,0,.24);
  pointer-events: none;
}

.page-hero--events-photo .page-hero__inner {
  position: relative;
  z-index: 2;
}

.page-hero--events-photo h1,
.page-hero--events-photo p,
.page-hero--events-photo .kicker,
.page-hero--events-photo .breadcrumbs,
.page-hero--events-photo .breadcrumbs a,
.page-hero--upcoming-events h1,
.page-hero--upcoming-events p,
.page-hero--upcoming-events .kicker,
.page-hero--upcoming-events .breadcrumbs,
.page-hero--upcoming-events .breadcrumbs a {
  color: #ffffff !important;
  text-shadow: 0 2px 14px rgba(0,0,0,.30);
}

.page-hero--upcoming-events {
  position: relative;
  min-height: clamp(310px, 34vw, 430px);
  overflow: hidden;
  background:
    linear-gradient(90deg, rgba(16,6,159,.88) 0%, rgba(6,0,92,.72) 50%, rgba(7,17,31,.26) 100%),
    url("../images/events-photo-gallery/capacity-building-training/capacity-building-training-01.jpg") center 45% / cover no-repeat !important;
}

.events-gallery-intro {
  background:
    radial-gradient(circle at 12% 0%, rgba(254,80,0,.10), transparent 24%),
    linear-gradient(180deg, #ffffff, #f7f7ff);
}

.events-gallery-intro__panel {
  display: flex;
  justify-content: space-between;
  gap: clamp(20px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 36px;
  background:
    radial-gradient(circle at 88% 12%, rgba(254,80,0,.14), transparent 28%),
    #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 26px 80px rgba(16,6,159,.10);
}

.events-gallery-intro__panel h2 {
  color: #10069F;
  font-size: clamp(2.2rem, 4.8vw, 5rem);
  line-height: .94;
  letter-spacing: -.06em;
  margin: 0 0 12px;
}

.events-gallery-intro__panel p {
  max-width: 820px;
  color: #536373;
  line-height: 1.7;
}

.events-gallery-intro__stats {
  display: grid;
  gap: 12px;
  min-width: min(100%, 260px);
}

.events-gallery-intro__stats span {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 15px 18px;
  border-radius: 20px;
  background: #10069F;
  color: #ffffff;
  font-weight: 900;
  box-shadow: 0 14px 38px rgba(16,6,159,.16);
}

.events-gallery-intro__stats strong {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  border-radius: 18px;
  background: #FE5000;
  color: #ffffff;
  font-size: 1.4rem;
}

.events-gallery-jump-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 18px;
}

.events-gallery-jump-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 18px;
  border-radius: 999px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.16);
  color: #10069F;
  font-weight: 900;
  text-decoration: none;
  box-shadow: 0 10px 26px rgba(16,6,159,.08);
  transition: transform .2s ease, background .2s ease, color .2s ease;
}

.events-gallery-jump-nav a:hover,
.events-gallery-jump-nav a:focus-visible {
  transform: translateY(-2px);
  background: #FE5000;
  color: #ffffff;
  border-color: #FE5000;
  outline: none;
}

.events-gallery-list {
  background:
    radial-gradient(circle at 95% 10%, rgba(16,6,159,.06), transparent 22%),
    #ffffff;
}

.events-gallery-list__stack {
  display: grid;
  gap: clamp(28px, 5vw, 56px);
}

.event-gallery-section {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(320px, .85fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: stretch;
  padding: clamp(18px, 3vw, 30px);
  border-radius: 40px;
  background:
    linear-gradient(135deg, rgba(255,255,255,.96), rgba(247,247,255,.96));
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 28px 90px rgba(16,6,159,.11);
  scroll-margin-top: 120px;
}

.event-gallery-section:nth-child(even) {
  grid-template-columns: minmax(320px, .85fr) minmax(0, 1.15fr);
}

.event-gallery-section:nth-child(even) .event-gallery-section__media {
  order: 2;
}

.event-gallery-section:nth-child(even) .event-gallery-section__content {
  order: 1;
}

.event-gallery-section__media {
  display: grid;
  gap: 14px;
  min-width: 0;
}

.event-photo-slideshow {
  position: relative;
  min-height: clamp(320px, 36vw, 520px);
  overflow: hidden;
  border-radius: 32px;
  background: #101b2f;
  box-shadow: 0 22px 70px rgba(0,0,0,.12);
}

.event-photo-slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  transform: scale(1.03);
  transition: opacity .75s ease, transform .75s ease;
}

.event-photo-slide.is-active {
  opacity: 1;
  transform: scale(1);
  z-index: 2;
}

.event-photo-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

.event-gallery-section__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.event-gallery-section__thumbs img {
  width: 100%;
  aspect-ratio: 1.5;
  object-fit: cover;
  border-radius: 16px;
  border: 2px solid #ffffff;
  box-shadow: 0 10px 24px rgba(16,6,159,.10);
}

.event-gallery-section__content {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(18px, 3vw, 34px);
  border-radius: 30px;
  background:
    radial-gradient(circle at 94% 8%, rgba(254,80,0,.14), transparent 28%),
    #ffffff;
  border: 1px solid rgba(16,6,159,.10);
}

.event-gallery-section__number {
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 20px;
  background: #10069F;
  color: #ffffff;
  font-size: 1.25rem;
  font-weight: 950;
  margin-bottom: 18px;
  box-shadow: 0 16px 36px rgba(16,6,159,.20);
}

.event-gallery-section__content h2 {
  color: #10069F;
  font-size: clamp(2rem, 3.8vw, 4rem);
  line-height: .96;
  letter-spacing: -.055em;
  margin: 0 0 14px;
}

.event-gallery-section__content > p:not(.kicker) {
  color: #536373;
  line-height: 1.7;
  margin-bottom: 20px;
}

.event-gallery-section__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 22px;
}

.event-gallery-section__meta span {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 0 13px;
  border-radius: 999px;
  background: #fff1e8;
  color: #FE5000;
  font-weight: 900;
  font-size: .92rem;
}

.event-gallery-open {
  width: fit-content;
}

.event-full-gallery-source {
  display: none !important;
}

.event-gallery-modal[hidden] {
  display: none !important;
}

.event-gallery-modal {
  position: fixed;
  inset: 0;
  z-index: 6000;
  display: grid;
  place-items: center;
  padding: clamp(14px, 3vw, 34px);
}

.event-gallery-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(7,17,31,.72);
  backdrop-filter: blur(8px);
}

.event-gallery-modal__panel {
  position: relative;
  z-index: 1;
  width: min(1180px, 100%);
  max-height: min(88vh, 920px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border-radius: 34px;
  background: #ffffff;
  box-shadow: 0 40px 120px rgba(0,0,0,.35);
  border: 1px solid rgba(255,255,255,.32);
}

.event-gallery-modal__close {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 3;
  display: grid;
  place-items: center;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  border: 0;
  background: #FE5000;
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 900;
  cursor: pointer;
  box-shadow: 0 16px 36px rgba(254,80,0,.25);
}

.event-gallery-modal__header {
  padding: clamp(22px, 4vw, 40px) clamp(22px, 4vw, 42px) 18px;
  border-bottom: 1px solid rgba(16,6,159,.10);
}

.event-gallery-modal__header h2 {
  color: #10069F;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .96;
  letter-spacing: -.055em;
  margin: 0 54px 10px 0;
}

.event-gallery-modal__header p:not(.kicker) {
  color: #536373;
  line-height: 1.65;
  max-width: 900px;
}

.event-gallery-modal__body {
  overflow-y: auto;
  padding: clamp(18px, 3vw, 34px);
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
}

.event-gallery-modal__body .event-full-gallery__item {
  display: block;
  padding: 0;
  border: 0;
  border-radius: 22px;
  overflow: hidden;
  background: #101b2f;
  cursor: default;
  box-shadow: 0 16px 42px rgba(16,6,159,.12);
}

.event-gallery-modal__body img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  display: block;
  transition: transform .3s ease;
}

.event-gallery-modal__body .event-full-gallery__item:hover img {
  transform: scale(1.035);
}

body.event-gallery-modal-open {
  overflow: hidden;
}

body.dark-mode .events-gallery-intro,
body.dark-mode .events-gallery-list,
body.dark-mode .upcoming-events-board {
  background: #07111f !important;
}

body.dark-mode .events-gallery-intro__panel,
body.dark-mode .event-gallery-section,
body.dark-mode .event-gallery-section__content,
body.dark-mode .event-gallery-modal__panel,
body.dark-mode .event-card,
body.dark-mode .upcoming-events-cta {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
  box-shadow: 0 26px 80px rgba(0,0,0,.34) !important;
}

body.dark-mode .events-gallery-intro__panel h2,
body.dark-mode .event-gallery-section__content h2,
body.dark-mode .event-gallery-modal__header h2,
body.dark-mode .events-gallery-intro__panel p,
body.dark-mode .event-gallery-section__content > p:not(.kicker),
body.dark-mode .event-gallery-modal__header p:not(.kicker) {
  color: #f8fafc !important;
}

body.dark-mode .events-gallery-jump-nav a {
  background: #101b2f !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode .events-gallery-jump-nav a:hover,
body.dark-mode .events-gallery-jump-nav a:focus-visible {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #FE5000 !important;
}

body.dark-mode .event-gallery-section__meta span {
  background: rgba(254,80,0,.14) !important;
  color: #ffb088 !important;
}

body.dark-mode .event-gallery-section__thumbs img,
body.dark-mode .event-photo-slide img,
body.dark-mode .event-gallery-modal__body img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 980px) {
  .events-gallery-intro__panel,
  .event-gallery-section,
  .event-gallery-section:nth-child(even) {
    grid-template-columns: 1fr;
  }

  .events-gallery-intro__panel {
    flex-direction: column;
    align-items: stretch;
  }

  .event-gallery-section:nth-child(even) .event-gallery-section__media,
  .event-gallery-section:nth-child(even) .event-gallery-section__content {
    order: initial;
  }

  .event-gallery-modal__body {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .event-gallery-section {
    padding: 12px;
    border-radius: 28px;
  }

  .event-photo-slideshow {
    min-height: 280px;
    border-radius: 24px;
  }

  .event-gallery-section__thumbs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .event-gallery-section__content {
    padding: 22px;
    border-radius: 24px;
  }

  .event-gallery-modal {
    padding: 10px;
  }

  .event-gallery-modal__panel {
    border-radius: 24px;
    max-height: 92vh;
  }

  .event-gallery-modal__body {
    grid-template-columns: 1fr;
  }

  .event-gallery-modal__close {
    width: 42px;
    height: 42px;
  }
}


/* =========================================================
   Combined Events page update
   Upcoming Events first, Events Gallery second, 5-second slideshows.
   ========================================================= */

.events-combined-page .upcoming-events-board {
  background:
    radial-gradient(circle at 8% 0%, rgba(254,80,0,.10), transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%);
}

.events-combined-page .events-gallery-list {
  padding-top: clamp(44px, 6vw, 80px);
}

.events-combined-page .events-gallery-heading {
  margin-bottom: 18px;
}

.events-combined-page .events-gallery-heading h2 {
  color: #10069F;
  font-size: clamp(2.4rem, 5vw, 5.2rem);
  line-height: .94;
  letter-spacing: -.06em;
}

.events-combined-page .events-gallery-jump-nav {
  justify-content: center;
  margin: 0 auto clamp(24px, 4vw, 48px);
  max-width: 1120px;
}

/* Remove the old highlighted info pills and intro panel from the Events page. */
.events-combined-page .events-gallery-intro,
.events-combined-page .events-gallery-intro__panel,
.events-combined-page .event-gallery-section__meta {
  display: none !important;
}

.events-combined-page .event-gallery-section__content {
  justify-content: center;
}

.events-combined-page .event-gallery-open {
  margin-top: 4px;
}

/* Full gallery images are clickable now. */
.event-gallery-modal__body .event-full-gallery__item {
  cursor: zoom-in !important;
  position: relative;
}

.event-gallery-modal__body .event-full-gallery__item::after {
  content: "Open";
  position: absolute;
  right: 12px;
  bottom: 12px;
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border-radius: 999px;
  background: rgba(254,80,0,.94);
  color: #ffffff;
  font-size: .78rem;
  font-weight: 950;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity .22s ease, transform .22s ease;
}

.event-gallery-modal__body .event-full-gallery__item:hover::after,
.event-gallery-modal__body .event-full-gallery__item:focus-visible::after {
  opacity: 1;
  transform: translateY(0);
}

/* Expanded image lightbox inside full event gallery. */
.event-image-lightbox[hidden] {
  display: none !important;
}

.event-image-lightbox {
  position: fixed;
  inset: 0;
  z-index: 7000;
  display: grid;
  place-items: center;
  padding: clamp(12px, 3vw, 32px);
}

.event-image-lightbox__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.82);
  backdrop-filter: blur(8px);
}

.event-image-lightbox__panel {
  position: relative;
  z-index: 1;
  width: min(1120px, 100%);
  max-height: 90vh;
  display: grid;
  place-items: center;
}

.event-image-lightbox figure {
  margin: 0;
  display: grid;
  justify-items: center;
  gap: 10px;
}

.event-image-lightbox img {
  max-width: min(100%, 1040px);
  max-height: 78vh;
  object-fit: contain;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 30px 100px rgba(0,0,0,.46);
}

.event-image-lightbox figcaption {
  color: #ffffff;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  font-size: .82rem;
}

.event-image-lightbox__close,
.event-image-lightbox__nav {
  border: 0;
  cursor: pointer;
  display: grid;
  place-items: center;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(0,0,0,.30);
}

.event-image-lightbox__close {
  position: fixed;
  top: clamp(16px, 3vw, 30px);
  right: clamp(16px, 3vw, 30px);
  width: 48px;
  height: 48px;
  border-radius: 999px;
  background: #FE5000;
  font-size: 1.8rem;
  font-weight: 900;
  z-index: 3;
}

.event-image-lightbox__nav {
  position: fixed;
  top: 50%;
  width: clamp(46px, 5vw, 62px);
  height: clamp(46px, 5vw, 62px);
  border-radius: 999px;
  background: rgba(16,6,159,.92);
  font-size: clamp(2rem, 4vw, 3.4rem);
  font-weight: 700;
  transform: translateY(-50%);
  z-index: 3;
}

.event-image-lightbox__nav--prev {
  left: clamp(12px, 3vw, 32px);
}

.event-image-lightbox__nav--next {
  right: clamp(12px, 3vw, 32px);
}

.event-image-lightbox__close:hover,
.event-image-lightbox__nav:hover,
.event-image-lightbox__close:focus-visible,
.event-image-lightbox__nav:focus-visible {
  outline: 3px solid rgba(255,255,255,.38);
  transform: translateY(-50%) scale(1.04);
}

.event-image-lightbox__close:hover,
.event-image-lightbox__close:focus-visible {
  transform: scale(1.04);
}

/* Ensure slides and modal images remain visible in dark mode. */
body.dark-mode .events-combined-page .upcoming-events-board,
body.dark-mode .events-combined-page .events-gallery-list {
  background: #07111f !important;
}

body.dark-mode .events-combined-page .events-gallery-heading h2,
body.dark-mode .events-combined-page .events-gallery-heading p {
  color: #f8fafc !important;
}

body.dark-mode .event-image-lightbox img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 760px) {
  .event-image-lightbox {
    padding: 10px;
  }

  .event-image-lightbox img {
    max-height: 72vh;
    border-radius: 16px;
  }

  .event-image-lightbox__nav {
    top: auto;
    bottom: 18px;
    transform: none;
  }

  .event-image-lightbox__nav--prev {
    left: calc(50% - 68px);
  }

  .event-image-lightbox__nav--next {
    right: calc(50% - 68px);
  }

  .event-image-lightbox__nav:hover,
  .event-image-lightbox__nav:focus-visible {
    transform: scale(1.04);
  }
}


/* Final Events Gallery and portrait mobile chatbot refinements */
@media(max-width:760px) and (orientation:portrait){.knls-chatbot{display:block!important;visibility:visible!important;opacity:1!important;right:max(14px,env(safe-area-inset-right,0px))!important;bottom:calc(82px + env(safe-area-inset-bottom,0px))!important;z-index:9995!important}.knls-chatbot__toggle{display:grid!important;place-items:center!important;width:66px!important;height:66px!important;min-width:66px!important;min-height:66px!important;padding:7px!important;visibility:visible!important;opacity:1!important}.knls-chatbot__avatar{width:52px!important;height:52px!important;flex:0 0 52px!important;visibility:visible!important;opacity:1!important}.knls-chatbot__prompt{right:0!important;bottom:76px!important;max-width:170px!important}.knls-chatbot__panel{right:0!important;bottom:78px!important;width:min(92vw,380px)!important;max-height:min(72vh,650px)!important}}
.event-gallery-section__thumbs{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(76px,1fr))!important;gap:10px!important}.event-gallery-thumb{display:block;padding:0;border:3px solid transparent;border-radius:16px;overflow:hidden;background:#fff;cursor:pointer;box-shadow:0 10px 24px rgba(16,6,159,.10);transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease}.event-gallery-thumb img{display:block;width:100%;aspect-ratio:1.45;object-fit:cover;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}.event-gallery-thumb:hover,.event-gallery-thumb:focus-visible,.event-gallery-thumb.is-active{transform:translateY(-2px);border-color:#FE5000;box-shadow:0 14px 32px rgba(254,80,0,.18);outline:none}.event-gallery-modal__panel{width:min(1240px,calc(100vw - 24px))!important;max-height:min(92vh,980px)!important}.event-gallery-modal__close{position:absolute!important;top:14px!important;right:14px!important;z-index:40!important;display:grid!important;place-items:center!important;width:48px!important;height:48px!important;background:#FE5000!important;color:#fff!important;border:2px solid rgba(255,255,255,.90)!important;border-radius:999px!important;font-size:1.9rem!important;line-height:1!important;box-shadow:0 14px 32px rgba(0,0,0,.22)!important}.event-gallery-modal__body{grid-template-columns:repeat(auto-fit,minmax(240px,1fr))!important;align-items:start!important;overflow-y:auto!important}.event-gallery-modal__body .event-full-gallery__item{display:block!important;padding:7px!important;border:0!important;border-radius:20px!important;background:#fff!important;cursor:zoom-in!important;overflow:hidden!important}.event-gallery-modal__body img{display:block!important;width:100%!important;height:auto!important;aspect-ratio:auto!important;max-height:none!important;object-fit:contain!important;object-position:center!important;image-rendering:auto!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important;background:#fff!important;border-radius:14px!important}.event-image-lightbox__panel{width:min(1280px,calc(100vw - 20px))!important}.event-image-lightbox img{max-width:min(100%,1180px)!important;max-height:84vh!important;width:auto!important;height:auto!important;object-fit:contain!important;image-rendering:auto!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}.event-image-lightbox__close{z-index:50!important;display:grid!important;place-items:center!important;visibility:visible!important;opacity:1!important}body.dark-mode .event-gallery-thumb,body.dark-mode .event-gallery-modal__body .event-full-gallery__item,body.dark-mode .event-gallery-modal__body img{background:#fff!important}@media(max-width:640px){.event-gallery-modal{padding:8px!important}.event-gallery-modal__panel{width:calc(100vw - 16px)!important;max-height:94vh!important;border-radius:22px!important}.event-gallery-modal__body{grid-template-columns:1fr!important;gap:12px!important;padding:14px!important}.event-gallery-modal__close{top:10px!important;right:10px!important;width:44px!important;height:44px!important}.event-gallery-section__thumbs{grid-template-columns:repeat(4,minmax(0,1fr))!important;gap:7px!important}.event-gallery-thumb{border-radius:12px!important}.event-gallery-thumb img{aspect-ratio:1.2!important}}


/* =========================================================
   Events Gallery compact spacing + visible close controls
   ========================================================= */
.events-combined-page .events-gallery-jump-nav {
  display: none !important;
}

.events-combined-page .events-gallery-list {
  padding-top: clamp(18px, 2vw, 28px) !important;
  padding-bottom: clamp(22px, 3vw, 38px) !important;
}

.events-combined-page .events-gallery-heading {
  margin-bottom: clamp(14px, 2vw, 20px) !important;
}

.events-combined-page .events-gallery-list__stack {
  gap: clamp(18px, 2.6vw, 30px) !important;
}

.events-combined-page .event-gallery-section {
  padding: clamp(12px, 1.6vw, 18px) !important;
  gap: clamp(14px, 2vw, 22px) !important;
  border-radius: 28px !important;
}

.events-combined-page .event-gallery-section__content {
  padding: clamp(16px, 2vw, 24px) !important;
  border-radius: 22px !important;
}

.events-combined-page .event-photo-slideshow {
  min-height: clamp(280px, 32vw, 470px) !important;
  border-radius: 24px !important;
}

.events-combined-page .event-gallery-section__thumbs {
  gap: 7px !important;
}

.event-gallery-modal__panel {
  overflow: visible !important;
}

.event-gallery-modal__body {
  overflow-y: auto !important;
  max-height: calc(92vh - 150px) !important;
}

.event-gallery-modal__close,
.event-image-lightbox__close {
  position: fixed !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 10050 !important;
  display: grid !important;
  place-items: center !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  border: 3px solid rgba(255,255,255,.96) !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  font-size: 2rem !important;
  font-weight: 950 !important;
  line-height: 1 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: 0 18px 44px rgba(0,0,0,.34) !important;
}

.event-gallery-modal__close:hover,
.event-gallery-modal__close:focus-visible,
.event-image-lightbox__close:hover,
.event-image-lightbox__close:focus-visible {
  transform: scale(1.05) !important;
  outline: 3px solid rgba(255,255,255,.45) !important;
}

body.dark-mode .event-gallery-modal__close,
body.dark-mode .event-image-lightbox__close {
  background: #FE5000 !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
  opacity: 1 !important;
}

.event-gallery-modal__body img,
.event-image-lightbox img,
.event-photo-slideshow img,
.event-gallery-thumb img {
  image-rendering: auto !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 640px) {
  .events-combined-page .events-gallery-list {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }

  .events-combined-page .events-gallery-list__stack {
    gap: 16px !important;
  }

  .events-combined-page .event-gallery-section {
    padding: 10px !important;
    border-radius: 22px !important;
  }

  .event-gallery-modal__close,
  .event-image-lightbox__close {
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}


/* =========================================================
   Compact Events Gallery grid + American/Capacity programme galleries
   ========================================================= */
.events-news-gallery {
  padding-block: clamp(24px, 3.4vw, 46px) !important;
  background: linear-gradient(180deg, #ffffff, #f8f8ff) !important;
}
.events-news-gallery .events-gallery-heading {
  margin-bottom: clamp(16px, 2.2vw, 28px) !important;
}
.event-news-grid,
.program-events-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.event-news-card,
.program-event-card {
  min-width: 0;
  overflow: hidden;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 16px 42px rgba(16,6,159,.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.event-news-card:hover,
.program-event-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 22px 52px rgba(16,6,159,.16);
}
.event-news-card__media,
.program-event-card__media { min-width: 0; }
.event-news-card .event-photo-slideshow,
.program-event-card .event-photo-slideshow {
  min-height: 220px !important;
  aspect-ratio: 1.48;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.event-news-card__thumbs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 5px;
  padding: 7px;
  background: #f7f7ff;
}
.event-gallery-thumb {
  display: block;
  padding: 0;
  border: 2px solid transparent;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  cursor: pointer;
}
.event-gallery-thumb.is-active { border-color: #FE5000; }
.event-gallery-thumb img {
  width: 100%;
  aspect-ratio: 1.35;
  object-fit: cover;
  display: block;
}
.event-news-card__caption,
.program-event-card__caption {
  padding: 15px 16px 17px;
}
.event-news-card__caption h3,
.program-event-card__caption h3 {
  color: #10069F;
  font-size: clamp(1.05rem, 1.4vw, 1.35rem);
  line-height: 1.12;
  margin: 2px 0 8px;
}
.event-news-card__caption > p:not(.kicker),
.program-event-card__caption > p:not(.kicker) {
  color: #536373;
  font-size: .92rem;
  line-height: 1.55;
  margin: 0 0 12px;
}
.event-news-card__open {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 0 14px;
  border: 0;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 900;
  cursor: pointer;
}
.program-events-section {
  padding-block: clamp(28px, 4vw, 54px) !important;
  background: linear-gradient(180deg, #f7f7ff, #ffffff) !important;
}
.program-events-section .section-title { margin-bottom: 18px; }
body.dark-mode .events-news-gallery,
body.dark-mode .program-events-section { background: #07111f !important; }
body.dark-mode .event-news-card,
body.dark-mode .program-event-card { background: #101b2f !important; border-color: rgba(148,163,184,.28) !important; }
body.dark-mode .event-news-card__thumbs { background: #07111f !important; }
body.dark-mode .event-news-card__caption h3,
body.dark-mode .program-event-card__caption h3,
body.dark-mode .event-news-card__caption p,
body.dark-mode .program-event-card__caption p { color: #f8fafc !important; }
@media (max-width: 1040px) {
  .event-news-grid,
  .program-events-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .event-news-grid,
  .program-events-grid { grid-template-columns: 1fr; gap: 14px; }
  .event-news-card .event-photo-slideshow,
  .program-event-card .event-photo-slideshow { min-height: 210px !important; }
}

/* =========================================================
   Organizational Structure compact responsive fit
   ========================================================= */
body.organizational-structure-page .org-blueprint-card {
  overflow-x: hidden !important;
  padding: 12px 10px 16px !important;
  border-radius: 20px !important;
}
body.organizational-structure-page .org-structure-section--blueprint > .container {
  width: min(100% - 12px, 1340px) !important;
}
body.organizational-structure-page .org-chart-node__icon { display: none !important; }
body.organizational-structure-page .org-topline {
  grid-template-columns: 1fr minmax(170px, 260px) minmax(142px, 200px) !important;
  max-width: 760px !important;
  gap: 8px !important;
}
body.organizational-structure-page .org-chart-node {
  min-height: 54px !important;
  padding: 8px 7px !important;
  border-radius: 13px !important;
  font-size: clamp(.66rem, .77vw, .82rem) !important;
}
body.organizational-structure-page .org-chart-node--branch {
  min-height: 58px !important;
  padding: 7px 5px !important;
  font-size: clamp(.60rem, .66vw, .70rem) !important;
}
body.organizational-structure-page .org-chart-node--dg { width: min(290px, 100%) !important; }
body.organizational-structure-page .org-executive-line { margin: 20px auto 18px !important; }
body.organizational-structure-page .org-branch-grid {
  grid-template-columns: .80fr repeat(4, 1fr) .88fr .86fr !important;
  gap: 6px !important;
  max-width: 1280px !important;
  padding-top: 26px !important;
}
body.organizational-structure-page .org-branch::before { top: -26px !important; height: 26px !important; width: 2px !important; }
body.organizational-structure-page .org-branch::after { top: -31px !important; width: 9px !important; height: 9px !important; border-width: 2px !important; }
body.organizational-structure-page .org-subnode-stack { gap: 5px !important; margin-top: 7px !important; padding-top: 7px !important; }
body.organizational-structure-page .org-subnode {
  min-height: 52px !important;
  padding: 7px 5px !important;
  border-radius: 10px !important;
  font-size: clamp(.55rem, .58vw, .63rem) !important;
}
body.organizational-structure-page .org-subnode::before { width: 18px !important; height: 2px !important; margin-bottom: 5px !important; }
@media (max-width: 760px) {
  body.organizational-structure-page .org-blueprint-card { padding: 8px 6px 10px !important; }
  body.organizational-structure-page .org-topline { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; }
  body.organizational-structure-page .org-chart-node--board,
  body.organizational-structure-page .org-chart-node--audit-committee { grid-column: auto !important; }
  body.organizational-structure-page .org-executive-line { margin: 10px auto 12px !important; }
  body.organizational-structure-page .org-branch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 6px !important; padding-top: 0 !important; }
  body.organizational-structure-page .org-chart-node { min-height: 48px !important; padding: 6px 5px !important; font-size: .60rem !important; }
  body.organizational-structure-page .org-chart-node--branch { min-height: 52px !important; font-size: .55rem !important; }
  body.organizational-structure-page .org-subnode { min-height: 45px !important; padding: 5px 4px !important; font-size: .51rem !important; text-align: center !important; place-items: center !important; }
  body.organizational-structure-page .org-subnode-stack { gap: 4px !important; margin-top: 5px !important; padding-top: 0 !important; }
  body.organizational-structure-page .org-executive-line::after,
  body.organizational-structure-page .org-branch-grid::before,
  body.organizational-structure-page .org-branch::before,
  body.organizational-structure-page .org-branch::after,
  body.organizational-structure-page .org-subnode-stack::before { display: none !important; }
}
@media (max-width: 390px) {
  body.organizational-structure-page .org-chart-node { font-size: .54rem !important; }
  body.organizational-structure-page .org-chart-node--branch { font-size: .49rem !important; }
  body.organizational-structure-page .org-subnode { font-size: .46rem !important; }
}


/* =========================================================
   Preserve recent non-organizational updates after chart revert
   ========================================================= */

/* Events Gallery: keep the compact grid requested after the baseline. */
.events-combined-page .upcoming-events-board {
  display: none !important;
}

.events-news-gallery {
  padding-top: clamp(14px, 2vw, 24px) !important;
}

.events-news-gallery .events-gallery-heading {
  display: none !important;
}

.event-news-card__thumbs {
  display: none !important;
}

.event-news-card .event-photo-slideshow {
  min-height: 220px !important;
  aspect-ratio: 1.48 !important;
  cursor: zoom-in !important;
  outline: none !important;
}

.event-news-card .event-photo-slideshow:focus-visible {
  box-shadow: inset 0 0 0 4px rgba(254,80,0,.88) !important;
}

.event-news-card__caption {
  padding: 14px 16px 16px !important;
}

.event-news-card__caption > p {
  margin: 0 0 14px !important;
  color: #536373 !important;
  line-height: 1.55 !important;
}

body.dark-mode .event-news-card__caption > p {
  color: #f8fafc !important;
}

/* American Corner programmes: retain text-only programme cards. */
.service-rich-programs .program-card {
  display: block !important;
  min-height: 0 !important;
  padding: 22px 22px 24px !important;
  border-top: 4px solid #FE5000 !important;
  background: #ffffff !important;
}

.service-rich-programs .program-card img {
  display: none !important;
}

.service-rich-programs .program-card div {
  padding: 0 !important;
}

.service-rich-programs .program-card h3 {
  margin-top: 0 !important;
}

body.dark-mode .service-rich-programs .program-card {
  background: #101b2f !important;
}

/* =========================================================
   Strategic Plan: prevent download-button overlap
   ========================================================= */
.strategic-section {
  padding-top: clamp(20px, 3vw, 36px) !important;
}

.strategic-section .document-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 16px !important;
  align-items: stretch !important;
}

.strategic-section .document-card {
  display: grid !important;
  grid-template-columns: 116px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  align-items: start !important;
  gap: 12px 16px !important;
  min-width: 0 !important;
  min-height: 100% !important;
  padding: 20px !important;
}

.strategic-section .document-card__cover {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  width: 116px !important;
  min-width: 116px !important;
  height: 132px !important;
  align-self: start !important;
}

.strategic-section .document-card__cover img {
  width: 100% !important;
  height: 100% !important;
  object-fit: contain !important;
}

.strategic-section .document-card__body {
  grid-column: 2 !important;
  grid-row: 1 !important;
  min-width: 0 !important;
}

.strategic-section .document-card__body h3,
.strategic-section .document-card__body p {
  overflow-wrap: anywhere !important;
  word-break: normal !important;
}

.strategic-section .document-card .btn,
.strategic-section .document-card a.btn {
  grid-column: 2 !important;
  grid-row: 2 !important;
  justify-self: start !important;
  align-self: end !important;
  width: auto !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 42px !important;
  padding: 0 18px !important;
  font-size: .9rem !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

@media (max-width: 1180px) {
  .strategic-section .document-grid {
    grid-template-columns: 1fr !important;
  }

  .strategic-section .document-card {
    grid-template-columns: 104px minmax(0, 1fr) auto !important;
    grid-template-rows: auto !important;
    align-items: center !important;
  }

  .strategic-section .document-card__cover {
    grid-column: 1 !important;
    grid-row: 1 !important;
    width: 104px !important;
    min-width: 104px !important;
    height: 116px !important;
  }

  .strategic-section .document-card__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    grid-column: 3 !important;
    grid-row: 1 !important;
    justify-self: end !important;
  }
}

@media (max-width: 720px) {
  .strategic-section .document-card {
    grid-template-columns: 86px minmax(0, 1fr) !important;
    grid-template-rows: auto auto !important;
    gap: 12px 14px !important;
  }

  .strategic-section .document-card__cover {
    grid-column: 1 !important;
    grid-row: 1 / span 2 !important;
    width: 86px !important;
    min-width: 86px !important;
    height: 96px !important;
  }

  .strategic-section .document-card__body {
    grid-column: 2 !important;
    grid-row: 1 !important;
  }

  .strategic-section .document-card .btn,
  .strategic-section .document-card a.btn {
    grid-column: 2 !important;
    grid-row: 2 !important;
    justify-self: start !important;
  }
}


/* =========================================================
   KNLS Organizational Structure — clean responsive redesign
   ========================================================= */
.knls-org-section {
  position: relative;
  padding: clamp(34px, 5vw, 72px) 0;
  background:
    radial-gradient(circle at 5% 5%, rgba(254,80,0,.08), transparent 20%),
    radial-gradient(circle at 95% 12%, rgba(16,6,159,.08), transparent 22%),
    #f8f8ff;
  overflow: hidden;
}

.knls-org-container {
  width: min(100% - 24px, 1580px) !important;
  max-width: 1580px !important;
}

.knls-org-heading {
  max-width: 900px;
  margin: 0 auto clamp(20px, 3vw, 34px);
  text-align: center;
}

.knls-org-heading h2 {
  margin: 4px 0 10px;
  color: #10069F;
  font-size: clamp(2rem, 4vw, 4.35rem);
  line-height: .98;
  letter-spacing: -.06em;
}

.knls-org-heading p:last-child {
  color: #536373;
  line-height: 1.65;
}

.knls-org-chart {
  position: relative;
  isolation: isolate;
  width: 100%;
  padding: clamp(18px, 2vw, 28px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 32px;
  background: rgba(255,255,255,.96);
  box-shadow: 0 28px 85px rgba(16,6,159,.12);
  overflow: hidden;
}

.knls-org-chart__watermark {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    linear-gradient(180deg, rgba(255,255,255,.78), rgba(255,255,255,.90)),
    url('../images/building.webp') center / cover no-repeat;
  opacity: .42;
}

.knls-org-card {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
  text-align: center;
  overflow-wrap: anywhere;
  word-break: normal;
  border-radius: 14px;
  font-weight: 850;
  line-height: 1.18;
}

.knls-org-card--primary,
.knls-org-card--directorate {
  background: linear-gradient(135deg, #10069F, #07005f);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 28px rgba(16,6,159,.18);
}

.knls-org-card--outline,
.knls-org-card--executive,
.knls-org-card--department {
  background: rgba(255,255,255,.96);
  color: #0f1a33;
  border: 1px solid rgba(16,6,159,.17);
  box-shadow: 0 9px 20px rgba(16,6,159,.08);
}

.knls-org-governance {
  position: relative;
  display: grid;
  grid-template-columns: minmax(260px, 520px) minmax(220px, 350px);
  justify-content: center;
  align-items: center;
  gap: clamp(20px, 7vw, 150px);
  max-width: 1080px;
  margin: 0 auto;
}

.knls-org-card--board,
.knls-org-card--committee {
  min-height: 64px;
  padding: 14px 18px;
  font-size: clamp(.9rem, 1.1vw, 1.04rem);
}

.knls-org-card--board::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -34px;
  width: 2px;
  height: 34px;
  background: #4d43d2;
  transform: translateX(-50%);
}

.knls-org-card--committee::before {
  content: '';
  position: absolute;
  right: 100%;
  top: 50%;
  width: clamp(20px, 7vw, 150px);
  height: 2px;
  background: #4d43d2;
  transform: translateY(-50%);
}

.knls-org-executive {
  position: relative;
  display: grid;
  justify-content: center;
  margin: 34px auto 64px;
}

.knls-org-card--executive {
  width: min(100%, 380px);
  min-height: 62px;
  padding: 14px 18px;
  color: #10069F;
  font-size: clamp(.9rem, 1.05vw, 1rem);
}

.knls-org-card--executive::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -42px;
  width: 2px;
  height: 42px;
  background: #4d43d2;
  transform: translateX(-50%);
}

.knls-org-reporting {
  position: relative;
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 10px;
  padding-top: 28px;
}

.knls-org-reporting::before {
  content: '';
  position: absolute;
  top: 0;
  left: calc(100% / 14);
  right: calc(100% / 14);
  height: 2px;
  background: #4d43d2;
}

.knls-org-group {
  position: relative;
  min-width: 0;
}

.knls-org-group::before {
  content: '';
  position: absolute;
  top: -28px;
  left: 50%;
  width: 2px;
  height: 28px;
  background: #4d43d2;
  transform: translateX(-50%);
}

.knls-org-card--directorate,
.knls-org-card--direct,
.knls-org-group--standalone > .knls-org-card {
  min-height: 70px;
  padding: 10px 7px;
  font-size: clamp(.61rem, .69vw, .74rem);
}

.knls-org-children {
  position: relative;
  display: grid;
  gap: 8px;
  margin-top: 14px;
  padding-top: 12px;
}

.knls-org-children::before {
  content: '';
  position: absolute;
  top: -14px;
  left: 50%;
  width: 2px;
  height: 14px;
  background: #4d43d2;
  transform: translateX(-50%);
}

.knls-org-card--department {
  min-height: 58px;
  padding: 8px 6px;
  font-size: clamp(.56rem, .62vw, .67rem);
}

.knls-org-card--department::before {
  content: '';
  position: absolute;
  top: 9px;
  left: 50%;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  background: #FE5000;
  transform: translateX(-50%);
}

.knls-org-card--department {
  padding-top: 17px;
}

body.dark-mode .knls-org-section {
  background: #07111f !important;
}

body.dark-mode .knls-org-heading h2,
body.dark-mode .knls-org-heading p:last-child {
  color: #f8fafc !important;
}

body.dark-mode .knls-org-chart {
  background: rgba(16,27,47,.98) !important;
  border-color: rgba(148,163,184,.30) !important;
}

body.dark-mode .knls-org-chart__watermark {
  opacity: .16;
}

body.dark-mode .knls-org-card--outline,
body.dark-mode .knls-org-card--executive,
body.dark-mode .knls-org-card--department {
  background: #17243a !important;
  color: #f8fafc !important;
  border-color: rgba(148,163,184,.30) !important;
}

/* Mid-sized screens: use a neat two-column layout instead of squeezing the chart. */
@media (max-width: 1240px) {
  .knls-org-chart {
    padding: 18px;
  }

  .knls-org-governance {
    grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: 18px;
  }

  .knls-org-card--committee::before,
  .knls-org-card--board::after,
  .knls-org-card--executive::after,
  .knls-org-reporting::before,
  .knls-org-group::before,
  .knls-org-children::before {
    display: none;
  }

  .knls-org-executive {
    margin: 14px auto 18px;
  }

  .knls-org-reporting {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding-top: 0;
  }

  .knls-org-card--directorate,
  .knls-org-card--direct,
  .knls-org-group--standalone > .knls-org-card {
    min-height: 62px;
    font-size: .78rem;
  }

  .knls-org-card--department {
    min-height: 54px;
    font-size: .70rem;
  }
}

/* Mobile: one clean vertical hierarchy, fully visible without sideways scrolling. */
@media (max-width: 680px) {
  .knls-org-container {
    width: min(100% - 14px, 620px) !important;
  }

  .knls-org-section {
    padding: 26px 0;
  }

  .knls-org-heading {
    margin-bottom: 16px;
  }

  .knls-org-heading h2 {
    font-size: clamp(1.85rem, 9vw, 2.8rem);
  }

  .knls-org-chart {
    padding: 12px;
    border-radius: 22px;
  }

  .knls-org-governance,
  .knls-org-reporting {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .knls-org-executive {
    margin: 10px auto 12px;
  }

  .knls-org-card--board,
  .knls-org-card--committee,
  .knls-org-card--executive,
  .knls-org-card--directorate,
  .knls-org-card--direct,
  .knls-org-group--standalone > .knls-org-card {
    min-height: 52px;
    padding: 10px 8px;
    font-size: .77rem;
  }

  .knls-org-card--department {
    min-height: 48px;
    padding: 16px 7px 7px;
    font-size: .68rem;
  }

  .knls-org-children {
    gap: 7px;
    margin-top: 7px;
    padding-top: 0;
  }
}

/* =========================================================
   Organizational Structure — board / Director General alignment fix
   ========================================================= */
@media (min-width: 1241px) {
  /* Keep the Board and Director General on one shared centre line. */
  .knls-org-governance {
    display: grid !important;
    grid-template-columns: 1fr !important;
    justify-items: center !important;
    width: 100% !important;
    max-width: 1280px !important;
    min-height: 64px !important;
    margin-inline: auto !important;
  }

  .knls-org-card--board {
    width: min(520px, 42vw) !important;
    justify-self: center !important;
  }

  /* Keep the committee to the right of the Board without shifting the Board off-centre. */
  .knls-org-card--committee {
    position: absolute !important;
    top: 50% !important;
    right: 0 !important;
    width: min(330px, 25vw) !important;
    transform: translateY(-50%) !important;
  }

  .knls-org-card--committee::before {
    display: none !important;
  }

  .knls-org-governance::after {
    content: '';
    position: absolute;
    top: 50%;
    left: calc(50% + min(260px, 21vw));
    right: min(330px, 25vw);
    height: 2px;
    background: #4d43d2;
    transform: translateY(-50%);
  }

  .knls-org-executive {
    width: 100% !important;
    justify-items: center !important;
  }

  .knls-org-card--executive {
    margin-inline: auto !important;
  }
}


/* =========================================================
   KNLS in the News cropped screenshot cards
   Show only the embedded media screenshot and prevent clipping.
   ========================================================= */
.featured-news-card__image,
.news-mention-card__image {
  background: #ffffff !important;
}

.featured-news-card__image img,
.news-mention-card__image img {
  object-fit: contain !important;
  object-position: center !important;
  background: #ffffff !important;
  image-rendering: auto !important;
}

body.dark-mode .featured-news-card__image,
body.dark-mode .news-mention-card__image,
body.dark-mode .featured-news-card__image img,
body.dark-mode .news-mention-card__image img {
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   KNLS in the News image centering and outline cleanup
   ========================================================= */
.featured-news-card__image,
.news-mention-card__image {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: #ffffff !important;
  padding: 0 !important;
}

.featured-news-card__image img,
.news-mention-card__image img {
  display: block !important;
  width: auto !important;
  max-width: 100% !important;
  height: auto !important;
  max-height: 100% !important;
  margin: auto !important;
  object-fit: contain !important;
  object-position: center center !important;
  background: #ffffff !important;
}

body.dark-mode .featured-news-card__image,
body.dark-mode .news-mention-card__image,
body.dark-mode .featured-news-card__image img,
body.dark-mode .news-mention-card__image img {
  background: #ffffff !important;
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   Mobile-library bus slideshows + news heading cleanup
   ========================================================= */
.about-mobile-library__slideshow {
  position: relative;
  min-height: clamp(250px, 34vw, 430px);
  background: #101b2f;
}

.about-mobile-library__slides,
.about-mobile-library-slide {
  position: absolute;
  inset: 0;
}

.about-mobile-library-slide {
  margin: 0;
  opacity: 0;
  transition: opacity .7s ease;
}

.about-mobile-library-slide.is-active {
  opacity: 1;
  z-index: 2;
}

.about-mobile-library-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 1 !important;
  filter: none !important;
}

.about-mobile-library__dots {
  position: absolute;
  left: 50%;
  bottom: 14px;
  z-index: 4;
  display: flex;
  gap: 8px;
  transform: translateX(-50%);
}

.about-mobile-library-dot {
  width: 11px;
  height: 11px;
  padding: 0;
  border: 2px solid #ffffff;
  border-radius: 999px;
  background: rgba(255,255,255,.44);
  cursor: pointer;
}

.about-mobile-library-dot.is-active {
  background: #FE5000;
  border-color: #FE5000;
}

.newsletter-jump-panel {
  padding: 18px;
  margin-bottom: 22px;
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(16,6,159,.08);
}

body.dark-mode .newsletter-jump-panel {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode .about-mobile-library-slide img,
body.dark-mode .knls-hero-slide--mobile-library img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

/* No-JS homepage fallback: include the three mobile-library slides. */
.knls-hero-slide:nth-child(10) { animation-delay: 36s; }
.knls-hero-slide:nth-child(11) { animation-delay: 40s; }
.knls-hero-slide:nth-child(12) { animation-delay: 44s; }


/* =========================================================
   KNLS in the News: remove highlighted hero panel and jump links
   ========================================================= */
body:has(main .newsletter-hero h1) .newsletter-hero__grid {
  grid-template-columns: minmax(0, 1fr) !important;
  max-width: 1040px !important;
}

body:has(main .newsletter-hero h1) .newsletter-hero__copy {
  max-width: 980px !important;
}

body:has(main .newsletter-hero h1) .newsletter-overview.section {
  padding-top: clamp(28px, 4vw, 52px) !important;
}


.rare-collections-main .section {
  position: relative;
}

.rare-collections-overview {
  background:
    radial-gradient(circle at 8% 0%, rgba(254,80,0,.08), transparent 24%),
    #ffffff;
}

.rare-collections-overview__grid {
  display: grid;
  grid-template-columns: minmax(260px, .88fr) minmax(0, 1.12fr);
  gap: clamp(24px, 5vw, 72px);
  padding: clamp(24px, 4vw, 46px);
  border-radius: 34px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 24px 72px rgba(16,6,159,.10);
}

.rare-collections-overview__grid h2,
.rare-collections-showcase h2,
.rare-copy-panel h2 {
  color: #10069F;
  font-size: clamp(2.2rem, 4.5vw, 4.7rem);
  line-height: .98;
  letter-spacing: -.055em;
}

.rare-collections-overview__copy {
  display: grid;
  gap: 14px;
}

.rare-collections-overview__copy p,
.rare-copy-panel__copy p,
.rare-collection-card__body p {
  color: #536373;
  line-height: 1.7;
}

.rare-collections-summary-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 16px;
  margin-top: 20px;
}

.rare-summary-card {
  min-height: 154px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 24px;
  border-radius: 28px;
  background: linear-gradient(135deg, #10069F, #06005C);
  color: #ffffff;
  box-shadow: 0 18px 48px rgba(16,6,159,.17);
}

.rare-summary-card strong {
  font-size: clamp(1.65rem, 3vw, 3.1rem);
  line-height: .95;
}

.rare-summary-card span {
  margin-top: 10px;
  color: rgba(255,255,255,.78);
  font-weight: 900;
}

.rare-collections-showcase {
  background: #f8f8ff;
}

.rare-collection-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: 18px;
  margin-top: 24px;
}

.rare-collection-card {
  overflow: hidden;
  border-radius: 28px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 18px 46px rgba(16,6,159,.09);
}

.rare-collection-card__image {
  margin: 0;
  aspect-ratio: 1.45;
  overflow: hidden;
  background: #101b2f;
}

.rare-collection-card__image img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  transition: transform .35s ease;
}

.rare-collection-card:hover .rare-collection-card__image img {
  transform: scale(1.045);
}

.rare-collection-card__body {
  padding: 20px;
}

.rare-collection-card__number {
  display: inline-grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 14px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 950;
  margin-bottom: 12px;
}

.rare-collection-card__body h3 {
  color: #10069F;
  font-size: 1.38rem;
  margin-bottom: 8px;
}

.rare-copy-section {
  background:
    radial-gradient(circle at 94% 12%, rgba(254,80,0,.14), transparent 28%),
    #ffffff;
}

.rare-copy-panel {
  display: grid;
  grid-template-columns: minmax(0,1.2fr) minmax(280px,.8fr);
  gap: clamp(22px, 4vw, 48px);
  align-items: center;
  padding: clamp(24px, 4vw, 44px);
  border-radius: 34px;
  background: #fff1e8;
  border: 1px solid rgba(254,80,0,.18);
}

.rare-copy-form {
  display: grid;
  gap: 14px;
  padding: 20px;
  border-radius: 24px;
  background: rgba(255,255,255,.88);
  border: 1px solid rgba(16,6,159,.10);
}

.rare-copy-form label {
  display: grid;
  gap: 6px;
  color: #10069F;
  font-weight: 900;
}

.rare-copy-form input {
  width: 100%;
  min-height: 48px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(16,6,159,.16);
  background: #ffffff;
  color: #07111f;
}

/* KNLS in the News: compact the oversized hero header. */
body:has(main .newsletter-hero h1) .newsletter-hero {
  padding: clamp(42px, 6vw, 72px) 0 !important;
}

body:has(main .newsletter-hero h1) .newsletter-hero h1 {
  font-size: clamp(3rem, 6vw, 5.3rem) !important;
}

body:has(main .newsletter-hero h1) .newsletter-hero p {
  max-width: 760px !important;
  font-size: clamp(1rem, 1.6vw, 1.15rem) !important;
}

body:has(main .newsletter-hero h1) .newsletter-actions {
  margin-top: 18px !important;
}

body.dark-mode .rare-collections-overview,
body.dark-mode .rare-collections-showcase,
body.dark-mode .rare-copy-section {
  background: #07111f !important;
}

body.dark-mode .rare-collections-overview__grid,
body.dark-mode .rare-collection-card,
body.dark-mode .rare-copy-form {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.28) !important;
}

body.dark-mode .rare-collections-overview__grid h2,
body.dark-mode .rare-collections-showcase h2,
body.dark-mode .rare-copy-panel h2,
body.dark-mode .rare-collection-card__body h3,
body.dark-mode .rare-copy-form label,
body.dark-mode .rare-collections-overview__copy p,
body.dark-mode .rare-copy-panel__copy p,
body.dark-mode .rare-collection-card__body p {
  color: #f8fafc !important;
}

body.dark-mode .rare-copy-panel {
  background: #101b2f !important;
  border-color: rgba(254,80,0,.34) !important;
}

body.dark-mode .rare-copy-form input {
  background: #07111f !important;
  color: #ffffff !important;
  border-color: rgba(148,163,184,.34) !important;
}

body.dark-mode .rare-collection-card__image img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}

@media (max-width: 980px) {
  .rare-collection-grid,
  .rare-collections-summary-grid {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }

  .rare-copy-panel {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 720px) {
  .rare-collections-overview__grid,
  .rare-collection-grid,
  .rare-collections-summary-grid {
    grid-template-columns: 1fr;
  }

  .rare-collections-overview__grid,
  .rare-copy-panel {
    padding: 20px;
    border-radius: 24px;
  }

  .rare-summary-card {
    min-height: 118px;
  }
}


/* =========================================================
   Rare Collections cleanup: local corrected artifact images
   ========================================================= */
.rare-collections-main .rare-collections-showcase {
  padding-top: clamp(28px, 4vw, 56px) !important;
}

.rare-collection-card__image img {
  object-position: center center !important;
}

body.dark-mode .rare-collection-card__image img {
  opacity: 1 !important;
  filter: none !important;
  mix-blend-mode: normal !important;
}


/* =========================================================
   June 2026 content refresh: compact pages and e-resources
   ========================================================= */
.who-profile-compact{padding-top:clamp(22px,3vw,42px)!important;padding-bottom:clamp(22px,3vw,42px)!important}.who-profile-compact__intro{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(14px,2vw,22px)}.who-profile-compact .content-panel,.who-profile-compact .side-panel{padding:clamp(18px,2.4vw,28px)!important}.who-profile-compact p{line-height:1.62}.who-function-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:16px}.who-function-grid article{display:grid;grid-template-columns:42px 1fr;gap:10px;align-items:start;padding:14px;border:1px solid rgba(16,6,159,.12);border-radius:18px;background:#fff;box-shadow:0 12px 28px rgba(16,6,159,.06)}.who-function-grid strong{display:grid;place-items:center;width:38px;height:38px;border-radius:13px;background:#FE5000;color:#fff;font-size:.82rem}.who-function-grid p{margin:0;font-size:.94rem}.about-mobile-library{padding-block:clamp(22px,3vw,42px)!important}body.dark-mode .who-function-grid article{background:#101b2f!important;border-color:rgba(148,163,184,.26)!important}body.dark-mode .who-function-grid p{color:#f8fafc!important}
.page-hero--services-compact{min-height:clamp(220px,25vw,320px)!important}.services-document-page{padding-top:clamp(20px,2.6vw,34px)!important;padding-bottom:clamp(26px,3vw,44px)!important}.services-quick-links{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}.services-quick-links a{display:inline-flex;align-items:center;min-height:38px;padding:0 13px;border-radius:999px;background:#fff;border:1px solid rgba(16,6,159,.14);color:#10069F;font-weight:900;text-decoration:none;box-shadow:0 8px 18px rgba(16,6,159,.06)}.services-accordion{display:grid;gap:10px}.services-detail{border:1px solid rgba(16,6,159,.14);border-radius:18px;background:#fff;overflow:hidden;box-shadow:0 10px 26px rgba(16,6,159,.06)}.services-detail summary{display:flex;justify-content:space-between;gap:12px;align-items:center;cursor:pointer;padding:14px 16px;color:#10069F;font-weight:950;list-style:none}.services-detail summary::-webkit-details-marker{display:none}.services-detail summary::after{content:'+';display:grid;place-items:center;flex:0 0 auto;width:28px;height:28px;border-radius:999px;background:#fff1e8;color:#FE5000;font-size:1.3rem}.services-detail[open] summary::after{content:'−'}.services-detail summary span{margin-left:auto;color:#536373;font-size:.84rem;font-weight:700;text-align:right}.services-detail__content{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,270px),1fr));gap:12px;padding:0 14px 14px}.services-detail__content article{padding:14px;border-radius:15px;background:#f8f8ff;border:1px solid rgba(16,6,159,.08)}.services-detail__content h3{margin:0 0 8px;color:#10069F}.services-detail__content p,.services-detail__content li{color:#536373;line-height:1.55}.services-detail__content ul{padding-left:18px;margin:8px 0 12px}.services-detail__content .btn{margin-top:4px}.services-support-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin-top:14px}.services-support-grid a{display:grid;gap:5px;padding:14px;border-radius:16px;background:#10069F;color:#fff;text-decoration:none}.services-support-grid strong{color:#fff}.services-support-grid span{color:rgba(255,255,255,.82);font-size:.9rem}body.dark-mode .services-detail,body.dark-mode .services-quick-links a{background:#101b2f!important;border-color:rgba(148,163,184,.28)!important}body.dark-mode .services-detail__content article{background:#07111f!important;border-color:rgba(148,163,184,.22)!important}body.dark-mode .services-detail summary,body.dark-mode .services-detail__content h3,body.dark-mode .services-quick-links a{color:#f8fafc!important}body.dark-mode .services-detail summary span,body.dark-mode .services-detail__content p,body.dark-mode .services-detail__content li{color:#cbd5e1!important}
.e-resource-category-list{display:grid!important;gap:12px!important}.e-resource-category-group{margin:0!important;border-radius:18px!important}.e-resource-category-group summary{padding:11px 14px!important}.e-resource-category-group .e-resource-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(min(100%,230px),280px))!important;justify-content:start!important;align-items:stretch!important;gap:12px!important;padding:0 14px 14px!important}.e-resource-card{min-height:0!important;padding:13px!important;border-radius:16px!important}.e-resource-card__body{gap:7px!important}.e-resource-card h3{margin:0 0 5px!important}.e-resource-card p{margin:0 0 10px!important;line-height:1.48!important}.e-resource-card__top{min-height:54px!important}.e-resource-card__logo-link{width:54px!important;height:54px!important;border-radius:14px!important}.e-resource-directory-grid,.e-resource-logo-strip__grid{grid-template-columns:repeat(auto-fit,minmax(min(100%,190px),250px))!important;justify-content:start!important;gap:12px!important}.e-resource-directory-card{min-height:0!important;padding:14px!important}.e-resources-main .section{padding-top:clamp(18px,2.4vw,32px)!important;padding-bottom:clamp(20px,2.6vw,36px)!important}.e-resource-browser,.e-resource-overview-panel,.e-resource-search-panel{padding:clamp(14px,2vw,20px)!important}.about-mobile-library-slide img,.knls-hero-slide--mobile-library img{image-rendering:auto!important;opacity:1!important;filter:none!important;mix-blend-mode:normal!important}
@media(max-width:980px){.who-profile-compact__intro{grid-template-columns:1fr}.who-function-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.services-support-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.who-function-grid{grid-template-columns:1fr}.services-detail summary{align-items:flex-start;flex-direction:column}.services-detail summary span{margin-left:0;text-align:left}.services-support-grid{grid-template-columns:1fr}.e-resource-category-group .e-resource-grid,.e-resource-directory-grid,.e-resource-logo-strip__grid{grid-template-columns:1fr!important}}

/* =========================================================
   E-resources compact category packing + Research Consultancy refresh
   ========================================================= */
.e-resources-main .e-resource-browser-section{padding-top:clamp(14px,1.8vw,24px)!important;padding-bottom:clamp(18px,2vw,28px)!important}
.e-resources-main .e-resource-browser{padding:clamp(12px,1.5vw,18px)!important}
.e-resources-main .e-resource-category-list{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;align-content:flex-start!important;gap:12px!important}
.e-resources-main .e-resource-category-group{flex:1 1 100%!important;width:auto!important;max-width:100%!important;min-height:0!important;height:auto!important;align-self:flex-start!important;margin:0!important;overflow:hidden!important}
.e-resources-main .e-resource-category-group.er-group--one{flex:0 1 310px!important}
.e-resources-main .e-resource-category-group.er-group--two{flex:0 1 632px!important}
.e-resources-main .e-resource-category-group.er-group--three{flex:0 1 954px!important}
.e-resources-main .e-resource-category-group.er-group--many{flex:1 1 100%!important}
.e-resources-main .e-resource-category-group summary{min-height:46px!important;padding:10px 13px!important}
.e-resources-main .e-resource-category-group .e-resource-grid{display:grid!important;min-height:0!important;height:auto!important;grid-auto-rows:auto!important;align-items:start!important;align-content:start!important;justify-content:start!important;gap:10px!important;padding:0 12px 12px!important}
.e-resources-main .e-resource-category-group.er-group--one .e-resource-grid{grid-template-columns:minmax(0,286px)!important}
.e-resources-main .e-resource-category-group.er-group--two .e-resource-grid{grid-template-columns:repeat(2,minmax(0,298px))!important}
.e-resources-main .e-resource-category-group.er-group--three .e-resource-grid{grid-template-columns:repeat(3,minmax(0,298px))!important}
.e-resources-main .e-resource-category-group.er-group--many .e-resource-grid{grid-template-columns:repeat(auto-fit,minmax(230px,1fr))!important}
.e-resources-main .e-resource-card{min-height:0!important;height:auto!important;align-self:start!important;padding:12px!important}
.e-resources-main .e-resource-card__body{display:block!important;min-height:0!important;height:auto!important}
.e-resources-main .e-resource-card__top{min-height:48px!important;margin-bottom:8px!important}
.e-resources-main .e-resource-card h3{margin:0 0 6px!important}
.e-resources-main .e-resource-card p{margin:0 0 10px!important;line-height:1.42!important}
.e-resources-main .e-resource-card__link{display:inline-flex!important;margin-top:0!important}
.e-resources-main .e-resource-overview-section,.e-resources-main .e-resource-search-panel,.e-resources-main .e-resource-overview-panel{padding-top:clamp(14px,1.8vw,24px)!important;padding-bottom:clamp(14px,1.8vw,24px)!important}
.e-resources-main .e-resource-directory-grid,.e-resources-main .e-resource-logo-strip__grid{display:flex!important;flex-wrap:wrap!important;align-items:flex-start!important;justify-content:flex-start!important;gap:10px!important}
.e-resources-main .e-resource-directory-card{flex:0 1 250px!important;min-height:0!important;height:auto!important}
.page-hero--research-compact{min-height:clamp(210px,24vw,300px)!important}
.research-consultancy-page{padding-top:clamp(18px,2vw,30px)!important;padding-bottom:clamp(24px,3vw,40px)!important}
.research-consultancy-content{padding:clamp(16px,2.2vw,24px)!important}
.research-consultancy-intro{padding:clamp(16px,2vw,22px);border-radius:18px;background:linear-gradient(135deg,#f5f5ff,#fff5ef);border:1px solid rgba(16,6,159,.12)}
.research-consultancy-intro h2{margin:4px 0 10px;color:#10069F}.research-consultancy-intro p:last-child{margin-bottom:0}
.research-consultancy-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,210px),1fr));gap:10px;margin-top:12px}
.research-consultancy-grid article{padding:14px;border:1px solid rgba(16,6,159,.12);border-radius:16px;background:#fff;box-shadow:0 10px 24px rgba(16,6,159,.05)}
.research-consultancy-grid span{display:grid;place-items:center;width:36px;height:36px;margin-bottom:9px;border-radius:12px;background:#FE5000;color:#fff;font-size:.82rem;font-weight:950}
.research-consultancy-grid h3{margin:0 0 7px;color:#10069F}.research-consultancy-grid p{margin:0;color:#536373;line-height:1.5}
.research-consultancy-cta{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:12px;padding:16px;border-radius:18px;background:#10069F}
.research-consultancy-cta h3,.research-consultancy-cta p,.research-consultancy-cta .kicker{color:#fff!important}.research-consultancy-cta h3{margin:3px 0 7px}.research-consultancy-cta p:last-child{margin-bottom:0}
body.dark-mode .research-consultancy-intro,body.dark-mode .research-consultancy-grid article{background:#101b2f!important;border-color:rgba(148,163,184,.28)!important}
body.dark-mode .research-consultancy-intro h2,body.dark-mode .research-consultancy-grid h3,body.dark-mode .research-consultancy-intro p,body.dark-mode .research-consultancy-grid p{color:#f8fafc!important}
@media(max-width:1020px){.e-resources-main .e-resource-category-group.er-group--one,.e-resources-main .e-resource-category-group.er-group--two,.e-resources-main .e-resource-category-group.er-group--three{flex:1 1 100%!important}.e-resources-main .e-resource-category-group.er-group--two .e-resource-grid{grid-template-columns:repeat(2,minmax(0,1fr))!important}.e-resources-main .e-resource-category-group.er-group--three .e-resource-grid,.e-resources-main .e-resource-category-group.er-group--many .e-resource-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr))!important}}
@media(max-width:680px){.e-resources-main .e-resource-category-list{display:grid!important;grid-template-columns:1fr!important}.e-resources-main .e-resource-category-group,.e-resources-main .e-resource-category-group.er-group--one,.e-resources-main .e-resource-category-group.er-group--two,.e-resources-main .e-resource-category-group.er-group--three,.e-resources-main .e-resource-category-group.er-group--many{width:100%!important;flex:none!important}.e-resources-main .e-resource-category-group .e-resource-grid,.e-resources-main .e-resource-category-group.er-group--one .e-resource-grid,.e-resources-main .e-resource-category-group.er-group--two .e-resource-grid,.e-resources-main .e-resource-category-group.er-group--three .e-resource-grid,.e-resources-main .e-resource-category-group.er-group--many .e-resource-grid{grid-template-columns:1fr!important}.research-consultancy-cta{align-items:flex-start;flex-direction:column}}


/* =========================================================
   Who We Are focused responsive redesign + compact research CTA
   ========================================================= */

.who-page-hero--compact {
  min-height: clamp(190px, 22vw, 270px) !important;
}

.who-page-refresh {
  padding-top: clamp(18px, 2.4vw, 32px) !important;
  padding-bottom: clamp(24px, 3vw, 44px) !important;
}

.who-page-refresh__intro {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(310px, .72fr);
  gap: 14px;
  align-items: stretch;
}

.who-page-refresh__story,
.who-page-refresh__context {
  padding: clamp(17px, 2vw, 24px);
  border: 1px solid rgba(16,6,159,.13);
  border-radius: 22px;
  box-shadow: 0 12px 30px rgba(16,6,159,.06);
}

.who-page-refresh__story {
  background: #ffffff;
}

.who-page-refresh__context {
  background: linear-gradient(135deg, #10069F, #1c126f);
}

.who-page-refresh__story h2,
.who-page-refresh__context h3,
.who-functions-section h2,
.who-page-refresh__closing h2 {
  margin: 4px 0 10px;
  line-height: 1.08;
}

.who-page-refresh__story h2 {
  color: #10069F;
  font-size: clamp(1.7rem, 3vw, 2.7rem);
}

.who-page-refresh__story p,
.who-page-refresh__context p,
.who-functions-section__heading p,
.who-function-card p,
.who-page-refresh__closing p {
  line-height: 1.58;
}

.who-page-refresh__story p:last-child,
.who-page-refresh__context p:last-child,
.who-page-refresh__closing p:last-child {
  margin-bottom: 0;
}

.who-page-refresh__context h3,
.who-page-refresh__context p,
.who-page-refresh__context .kicker {
  color: #ffffff !important;
}

.who-page-refresh__facts {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 7px;
  margin-top: 14px;
}

.who-page-refresh__facts div {
  padding: 10px 8px;
  border-radius: 14px;
  background: rgba(255,255,255,.11);
  border: 1px solid rgba(255,255,255,.16);
}

.who-page-refresh__facts strong,
.who-page-refresh__facts span {
  display: block;
  color: #ffffff;
}

.who-page-refresh__facts strong {
  margin-bottom: 3px;
  color: #ffb38b;
  font-size: 1.35rem;
}

.who-page-refresh__facts span {
  font-size: .78rem;
  line-height: 1.25;
}

.who-functions-section {
  margin-top: 15px;
  padding: clamp(17px, 2vw, 24px);
  border: 1px solid rgba(16,6,159,.13);
  border-radius: 22px;
  background: linear-gradient(135deg, #f7f7ff, #fff8f4);
}

.who-functions-section__heading {
  max-width: 920px;
  margin-bottom: 13px;
}

.who-functions-section__heading h2 {
  color: #10069F;
  font-size: clamp(1.65rem, 2.7vw, 2.45rem);
}

.who-functions-section__heading p {
  max-width: 820px;
  margin-bottom: 0;
  color: #536373;
}

.who-functions-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.who-function-card {
  min-height: 0;
  padding: 14px;
  border: 1px solid rgba(16,6,159,.10);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 8px 20px rgba(16,6,159,.045);
}

.who-function-card__number {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  margin-bottom: 8px;
  border-radius: 11px;
  background: #FE5000;
  color: #ffffff;
  font-size: .78rem;
  font-weight: 950;
}

.who-function-card h3 {
  margin: 0 0 6px;
  color: #10069F;
  font-size: 1rem;
  line-height: 1.2;
}

.who-function-card p {
  margin: 0;
  color: #536373;
  font-size: .9rem;
}

.who-page-refresh__closing {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr);
  gap: 16px;
  margin-top: 15px;
  padding: clamp(17px, 2vw, 22px);
  border-radius: 20px;
  background: #10069F;
}

.who-page-refresh__closing h2,
.who-page-refresh__closing p,
.who-page-refresh__closing .kicker {
  color: #ffffff !important;
}

.who-page-refresh__closing h2 {
  font-size: clamp(1.5rem, 2.3vw, 2.2rem);
}

/* Research & Consultancy contact button: smaller and less visually heavy. */
.research-consultancy-cta .btn {
  flex: 0 0 auto !important;
  min-height: 38px !important;
  padding: 8px 16px !important;
  font-size: .88rem !important;
  line-height: 1.1 !important;
  white-space: nowrap !important;
}

body.dark-mode .who-page-refresh__story,
body.dark-mode .who-function-card,
body.dark-mode .who-functions-section {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.26) !important;
}

body.dark-mode .who-functions-section {
  background: #07111f !important;
}

body.dark-mode .who-page-refresh__story h2,
body.dark-mode .who-functions-section__heading h2,
body.dark-mode .who-function-card h3,
body.dark-mode .who-page-refresh__story p,
body.dark-mode .who-functions-section__heading p,
body.dark-mode .who-function-card p {
  color: #f8fafc !important;
}

@media (max-width: 980px) {
  .who-page-refresh__intro {
    grid-template-columns: 1fr;
  }

  .who-functions-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .who-page-refresh {
    padding-top: 14px !important;
    padding-bottom: 22px !important;
  }

  .who-page-refresh__story,
  .who-page-refresh__context,
  .who-functions-section,
  .who-page-refresh__closing {
    padding: 14px;
    border-radius: 17px;
  }

  .who-page-refresh__facts {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 5px;
  }

  .who-page-refresh__facts div {
    padding: 8px 6px;
  }

  .who-page-refresh__facts strong {
    font-size: 1.08rem;
  }

  .who-page-refresh__facts span {
    font-size: .68rem;
  }

  .who-functions-grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .who-function-card {
    padding: 12px;
  }

  .who-function-card p {
    font-size: .88rem;
  }

  .who-page-refresh__closing {
    grid-template-columns: 1fr;
    gap: 6px;
  }

  .research-consultancy-cta .btn {
    min-height: 36px !important;
    padding: 8px 14px !important;
    font-size: .84rem !important;
  }
}


/* =========================================================
   Final service-page content, sidebar removal and compact layout cleanup
   ========================================================= */

/* Top navigation is the only service navigation. */
.service-detail-layout,
.service-detail__layout {
  grid-template-columns: minmax(0, 1fr) !important;
  gap: 0 !important;
}

.service-side-nav,
.service-page-nav {
  display: none !important;
}

/* Remove nested KNB flyout behaviour and scrolling in the Bibliographic submenu. */
.dropdown--services-compact .dropdown__group--collapsible:first-child > .dropdown__sub {
  max-height: none !important;
  overflow: visible !important;
}

.dropdown--services-compact .dropdown__flyout,
.dropdown--services-compact .dropdown__item--flyout {
  display: none !important;
}

/* Main services directory */
.service-directory-section {
  padding-top: clamp(18px, 2.2vw, 32px) !important;
  padding-bottom: clamp(24px, 3vw, 44px) !important;
}

.service-directory-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.service-directory-group {
  padding: clamp(15px, 2vw, 20px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(16,6,159,.05);
}

.service-directory-group h2 {
  margin: 3px 0 11px;
  color: #10069F;
  font-size: clamp(1.2rem, 1.8vw, 1.55rem);
}

.service-directory-links {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
}

.service-directory-links a {
  display: inline-flex;
  align-items: center;
  min-height: 36px;
  padding: 7px 11px;
  border: 1px solid rgba(16,6,159,.14);
  border-radius: 999px;
  color: #10069F;
  background: #f8f8ff;
  font-size: .87rem;
  font-weight: 850;
  text-decoration: none;
}

.service-directory-links a:hover,
.service-directory-links a:focus-visible {
  border-color: #FE5000;
  color: #FE5000;
  background: #fff1e8;
}

/* Compact exact-content service pages */
.service-exact-hero {
  min-height: clamp(185px, 22vw, 270px) !important;
}

.service-exact-section {
  padding-top: clamp(16px, 2vw, 26px) !important;
  padding-bottom: clamp(20px, 2.6vw, 34px) !important;
}

.service-exact-section--compact {
  padding-bottom: clamp(12px, 1.7vw, 20px) !important;
}

.service-exact-panel {
  padding: clamp(16px, 2vw, 23px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 28px rgba(16,6,159,.055);
}

.service-exact-panel > .kicker:first-child {
  margin-bottom: 5px;
}

.service-exact-panel h2 {
  margin: 3px 0 10px;
  color: #10069F;
  font-size: clamp(1.6rem, 2.6vw, 2.35rem);
  line-height: 1.1;
}

.service-exact-panel h3 {
  margin: 13px 0 7px;
  color: #10069F;
  font-size: 1.12rem;
}

.service-exact-panel h4 {
  margin: 0 0 6px;
  color: #10069F;
  font-size: 1rem;
}

.service-exact-panel p,
.service-exact-panel li {
  color: #536373;
  line-height: 1.56;
}

.service-exact-panel p {
  margin: 0 0 10px;
}

.service-exact-panel ul,
.service-exact-panel ol {
  margin: 6px 0 11px;
  padding-left: 20px;
}

.service-exact-grid {
  display: grid;
  gap: 10px;
  margin: 10px 0;
}

.service-exact-grid--two {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.service-exact-grid--three {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.service-exact-grid > section {
  padding: 13px;
  border: 1px solid rgba(16,6,159,.10);
  border-radius: 15px;
  background: #f8f8ff;
}

.service-exact-prose--columns {
  column-count: 2;
  column-gap: 20px;
}

.service-exact-prose--columns p {
  break-inside: avoid;
}

.service-exact-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

/* KNB archive remains compact after adding the supplied overview. */
.knb-service-page .knb-browser-section {
  padding-top: 12px !important;
}

/* ISBN/ISMN quick-links block: avoid overlap and excessive scale. */
#downloads.service-block {
  padding: 16px 0 0 !important;
}

#downloads.service-block h2 {
  margin-bottom: 12px !important;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem) !important;
}

#downloads .document-grid {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: 10px !important;
}

#downloads .document-card {
  display: grid !important;
  grid-template-columns: 54px minmax(0, 1fr) !important;
  grid-template-rows: auto auto !important;
  gap: 10px 11px !important;
  align-items: start !important;
  min-height: 0 !important;
  padding: 13px !important;
  border-radius: 17px !important;
}

#downloads .document-card__icon {
  grid-column: 1 !important;
  grid-row: 1 !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  border-radius: 14px !important;
  font-size: .78rem !important;
}

#downloads .document-card__body {
  min-width: 0 !important;
}

#downloads .document-card__body h3 {
  margin: 0 0 5px !important;
  font-size: .98rem !important;
  line-height: 1.18 !important;
}

#downloads .document-card__body p {
  margin: 0 0 7px !important;
  font-size: .84rem !important;
  line-height: 1.4 !important;
}

#downloads .document-card__meta {
  font-size: .71rem !important;
}

#downloads .document-card .btn {
  grid-column: 1 / -1 !important;
  justify-self: start !important;
  min-height: 34px !important;
  padding: 7px 12px !important;
  font-size: .78rem !important;
  line-height: 1 !important;
}

/* American Corner featured cards stay compact after removing the support CTA. */
.american-corner-programs-page .service-rich-section,
.service-rich-main .service-rich-section {
  padding-top: clamp(16px, 2vw, 28px) !important;
  padding-bottom: clamp(20px, 2.5vw, 34px) !important;
}

.program-grid {
  gap: 10px !important;
}

.program-card {
  min-height: 0 !important;
  padding: 14px !important;
}

/* Dark mode support */
body.dark-mode .service-directory-group,
body.dark-mode .service-exact-panel {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.26) !important;
}

body.dark-mode .service-directory-group h2,
body.dark-mode .service-exact-panel h2,
body.dark-mode .service-exact-panel h3,
body.dark-mode .service-exact-panel h4,
body.dark-mode .service-exact-panel p,
body.dark-mode .service-exact-panel li {
  color: #f8fafc !important;
}

body.dark-mode .service-directory-links a,
body.dark-mode .service-exact-grid > section {
  background: #07111f !important;
  border-color: rgba(148,163,184,.22) !important;
  color: #f8fafc !important;
}

/* Responsive service layout */
@media (max-width: 920px) {
  .service-directory-grid,
  .service-exact-grid--three {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  #downloads .document-grid {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .service-directory-grid,
  .service-exact-grid--two,
  .service-exact-grid--three {
    grid-template-columns: 1fr;
  }

  .service-exact-prose--columns {
    column-count: 1;
  }

  .service-exact-panel {
    padding: 14px;
    border-radius: 16px;
  }

  .service-exact-panel h2 {
    font-size: 1.5rem;
  }

  .service-exact-panel p,
  .service-exact-panel li {
    font-size: .92rem;
  }
}


/* =========================================================
   Citizen Service Delivery Charter document refresh
   ========================================================= */

.citizen-charter-hero {
  min-height: clamp(205px, 24vw, 300px) !important;
}

.citizen-charter-nav-wrap {
  position: sticky;
  top: var(--header-height, 0px);
  z-index: 8;
  border-bottom: 1px solid rgba(16,6,159,.10);
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(14px);
}

.citizen-charter-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  padding-top: 9px;
  padding-bottom: 9px;
}

.citizen-charter-nav a {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 6px 11px;
  border: 1px solid rgba(16,6,159,.14);
  border-radius: 999px;
  color: #10069F;
  background: #ffffff;
  font-size: .86rem;
  font-weight: 850;
  text-decoration: none;
}

.citizen-charter-overview,
.citizen-charter-downloads,
.citizen-charter-videos {
  padding-top: clamp(18px, 2.2vw, 32px) !important;
  padding-bottom: clamp(22px, 2.8vw, 38px) !important;
}

.citizen-charter-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.28fr) minmax(280px, .72fr);
  gap: 12px;
}

.citizen-charter-copy,
.citizen-charter-highlight {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 19px;
  box-shadow: 0 10px 24px rgba(16,6,159,.05);
}

.citizen-charter-copy {
  background: #ffffff;
}

.citizen-charter-copy h2 {
  margin: 4px 0 10px;
  color: #10069F;
  font-size: clamp(1.7rem, 2.8vw, 2.45rem);
  line-height: 1.08;
}

.citizen-charter-copy p,
.citizen-charter-highlight p {
  margin: 0 0 10px;
  color: #536373;
  line-height: 1.58;
}

.citizen-charter-copy p:last-child,
.citizen-charter-highlight p:last-child {
  margin-bottom: 0;
}

.citizen-charter-highlight {
  display: grid;
  align-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #10069F, #1c126f);
}

.citizen-charter-highlight img {
  width: min(190px, 72%);
  max-height: 100px;
  object-fit: contain;
  padding: 8px;
  border-radius: 14px;
  background: #ffffff;
}

.citizen-charter-highlight h3,
.citizen-charter-highlight p,
.citizen-charter-highlight .kicker {
  color: #ffffff !important;
}

.citizen-charter-highlight h3 {
  margin: 3px 0 6px;
  line-height: 1.15;
}

.citizen-charter-document-grid,
.citizen-charter-video-grid {
  display: grid;
  gap: 12px;
}

.citizen-charter-document-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 1060px;
  margin: 0 auto;
}

.citizen-charter-document-card {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  grid-template-rows: auto auto;
  gap: 10px 12px;
  align-items: start;
  min-width: 0;
  padding: 15px;
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 18px;
  background: #ffffff;
  box-shadow: 0 10px 24px rgba(16,6,159,.05);
}

.citizen-charter-document-card .document-card__icon {
  grid-column: 1;
  grid-row: 1;
  width: 56px !important;
  height: 56px !important;
  min-width: 56px !important;
  border-radius: 15px !important;
  font-size: .82rem !important;
}

.citizen-charter-document-card h3 {
  margin: 1px 0 6px;
  color: #10069F;
  font-size: 1.02rem;
  line-height: 1.18;
}

.citizen-charter-document-card p {
  margin: 0 0 7px;
  color: #536373;
  font-size: .9rem;
  line-height: 1.45;
}

.citizen-charter-document-card .btn {
  grid-column: 1 / -1;
  justify-self: start;
  min-height: 35px !important;
  padding: 7px 13px !important;
  font-size: .8rem !important;
}

.citizen-charter-video-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.citizen-charter-video-grid .video-card {
  min-height: 0;
}

.citizen-charter-video-grid .video-card__body {
  padding: 13px !important;
}

.citizen-charter-video-grid .video-card__body h3 {
  margin: 0 0 7px;
  color: #10069F;
  font-size: 1rem;
  line-height: 1.25;
}

body.dark-mode .citizen-charter-nav-wrap {
  border-color: rgba(148,163,184,.20);
  background: rgba(7,17,31,.94);
}

body.dark-mode .citizen-charter-nav a,
body.dark-mode .citizen-charter-copy,
body.dark-mode .citizen-charter-document-card {
  border-color: rgba(148,163,184,.25) !important;
  background: #101b2f !important;
}

body.dark-mode .citizen-charter-nav a,
body.dark-mode .citizen-charter-copy h2,
body.dark-mode .citizen-charter-copy p,
body.dark-mode .citizen-charter-document-card h3,
body.dark-mode .citizen-charter-document-card p,
body.dark-mode .citizen-charter-video-grid .video-card__body h3 {
  color: #f8fafc !important;
}

@media (max-width: 860px) {
  .citizen-charter-intro {
    grid-template-columns: 1fr;
  }

  .citizen-charter-video-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .citizen-charter-document-grid {
    grid-template-columns: 1fr;
  }

  .citizen-charter-copy,
  .citizen-charter-highlight {
    padding: 14px;
    border-radius: 16px;
  }

  .citizen-charter-copy h2 {
    font-size: 1.5rem;
  }

  .citizen-charter-copy p,
  .citizen-charter-highlight p {
    font-size: .92rem;
  }
}


/* =========================================================
   Our Services faded library background + Braille slideshow refresh
   ========================================================= */

/*
  Use the same visual treatment introduced on the Who We Are page:
  a softly faded library image behind page content and a consistent
  image-led hero with an accessible gradient overlay.
*/
body.service-tab-page main {
  position: relative;
  isolation: isolate;
}

body.service-tab-page main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(247,247,255,.88), rgba(255,246,234,.86)),
    url("../images/who-we-are/who-we-are-library-exterior.webp") center top / cover no-repeat;
  opacity: .82;
}

body.service-tab-page main > * {
  position: relative;
  z-index: 1;
}

body.service-tab-page .page-hero {
  position: relative;
  overflow: hidden;
  min-height: clamp(190px, 22vw, 280px) !important;
  padding: 52px 0 !important;
  background:
    linear-gradient(90deg, rgba(20,24,72,.72) 0%, rgba(20,24,72,.46) 46%, rgba(255,89,0,.18) 100%),
    var(--service-hero-img, url("../images/who-we-are/who-we-are-top-header-visible.webp")) center 44% / cover no-repeat !important;
}

body.service-tab-page .page-hero .page-hero__inner {
  min-height: clamp(165px, 20vw, 230px);
  align-items: end;
}

body.service-tab-page .page-hero h1,
body.service-tab-page .page-hero p,
body.service-tab-page .page-hero .kicker,
body.service-tab-page .page-hero .breadcrumbs,
body.service-tab-page .page-hero .breadcrumbs a {
  color: #ffffff !important;
  text-shadow: 0 2px 16px rgba(15,23,42,.48);
}

body.service-tab-page .section,
body.service-tab-page .service-rich-section,
body.service-tab-page .service-top-slideshow-wrap {
  background-color: transparent !important;
}

body.service-tab-page .service-exact-panel,
body.service-tab-page .content-panel,
body.service-tab-page .service-directory-group,
body.service-tab-page .service-rich-intro__copy,
body.service-tab-page .service-rich-card,
body.service-tab-page .program-card,
body.service-tab-page .rare-copy-panel {
  background-color: rgba(255,255,255,.94) !important;
  backdrop-filter: blur(4px);
}

/* Braille slideshow: compact, clear and mobile-friendly. */
.braille-library-slideshow-wrap {
  padding-top: clamp(18px, 2.6vw, 30px) !important;
  padding-bottom: 0 !important;
}

.braille-library-slideshow {
  grid-template-columns: minmax(235px, .70fr) minmax(0, 1.30fr) !important;
  gap: clamp(13px, 2vw, 22px) !important;
  padding: clamp(13px, 2vw, 18px) !important;
  border-radius: 24px !important;
}

.braille-library-slideshow .service-top-slideshow__copy {
  min-height: 285px !important;
  padding: clamp(16px, 2.4vw, 24px) !important;
  border-radius: 18px !important;
}

.braille-library-slideshow .service-top-slideshow__copy h2 {
  font-size: clamp(1.7rem, 3vw, 2.8rem) !important;
}

.braille-library-slideshow .service-top-slideshow__media,
.braille-library-slideshow .service-top-slideshow__slide img {
  min-height: 285px !important;
}

.braille-library-slideshow .service-top-slideshow__media {
  border-radius: 18px !important;
}

body.dark-mode.service-tab-page main::before {
  background:
    linear-gradient(rgba(7,17,31,.84), rgba(7,17,31,.90)),
    url("../images/who-we-are/who-we-are-library-exterior.webp") center top / cover no-repeat;
  opacity: .90;
}

body.dark-mode.service-tab-page .page-hero {
  background:
    linear-gradient(90deg, rgba(7,17,31,.90) 0%, rgba(16,6,159,.62) 48%, rgba(7,17,31,.52) 100%),
    var(--service-hero-img, url("../images/who-we-are/who-we-are-top-header-visible.webp")) center 44% / cover no-repeat !important;
}

body.dark-mode.service-tab-page .service-exact-panel,
body.dark-mode.service-tab-page .content-panel,
body.dark-mode.service-tab-page .service-directory-group,
body.dark-mode.service-tab-page .service-rich-intro__copy,
body.dark-mode.service-tab-page .service-rich-card,
body.dark-mode.service-tab-page .program-card,
body.dark-mode.service-tab-page .rare-copy-panel {
  background-color: rgba(16,27,47,.94) !important;
  border-color: rgba(148,163,184,.25) !important;
}

@media (max-width: 760px) {
  body.service-tab-page .page-hero {
    min-height: 180px !important;
    padding: 34px 0 !important;
    background-position: center center !important;
  }

  body.service-tab-page .page-hero .page-hero__inner {
    min-height: auto !important;
  }

  .braille-library-slideshow {
    grid-template-columns: 1fr !important;
  }

  .braille-library-slideshow .service-top-slideshow__copy {
    min-height: auto !important;
  }

  .braille-library-slideshow .service-top-slideshow__media,
  .braille-library-slideshow .service-top-slideshow__slide img {
    min-height: 235px !important;
  }
}


/* =========================================================
   Contact-page FAQs + configurable homepage public notice
   ========================================================= */
.contact-faq-section {
  padding-top: clamp(20px, 2.5vw, 36px) !important;
  padding-bottom: clamp(22px, 2.8vw, 40px) !important;
  background:
    radial-gradient(circle at 94% 12%, rgba(254,80,0,.07), transparent 28%),
    linear-gradient(180deg, #f8f8ff, #ffffff);
}

.contact-faq-panel {
  max-width: 1100px;
}

.contact-faq-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.contact-faq-card {
  align-self: start;
  border: 1px solid rgba(16,6,159,.13);
  border-radius: 16px;
  background: #ffffff;
  box-shadow: 0 9px 22px rgba(16,6,159,.05);
  overflow: hidden;
}

.contact-faq-card summary {
  position: relative;
  cursor: pointer;
  padding: 13px 42px 13px 14px;
  color: #10069F;
  font-size: .98rem;
  font-weight: 900;
  list-style: none;
}

.contact-faq-card summary::-webkit-details-marker { display: none; }

.contact-faq-card summary::after {
  content: '+';
  position: absolute;
  top: 50%;
  right: 13px;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #fff1e8;
  color: #FE5000;
  font-size: 1rem;
  transform: translateY(-50%);
}

.contact-faq-card[open] summary::after { content: '−'; }

.contact-faq-card p {
  margin: 0;
  padding: 0 14px 14px;
  color: #536373;
  font-size: .92rem;
  line-height: 1.52;
}

body.public-notice-open { overflow: hidden; }

.public-notice-modal[hidden] { display: none !important; }

.public-notice-modal {
  position: fixed;
  inset: 0;
  z-index: 5000;
  display: grid;
  place-items: center;
  padding: 18px;
}

.public-notice-modal__backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  background: rgba(7,17,31,.70);
  backdrop-filter: blur(6px);
}

.public-notice-modal__card {
  position: relative;
  width: min(100%, 640px);
  max-height: min(84vh, 720px);
  overflow: auto;
  padding: clamp(20px, 4vw, 32px);
  border: 1px solid rgba(16,6,159,.16);
  border-radius: 24px;
  background:
    radial-gradient(circle at 96% 5%, rgba(254,80,0,.13), transparent 32%),
    #ffffff;
  box-shadow: 0 30px 90px rgba(0,0,0,.34);
}

.public-notice-modal__close {
  position: absolute;
  top: 12px;
  right: 12px;
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border: 0;
  border-radius: 50%;
  background: #10069F;
  color: #ffffff;
  cursor: pointer;
  font-size: 1.55rem;
  line-height: 1;
}

.public-notice-modal__card h2 {
  max-width: 90%;
  margin: 4px 0 8px;
  color: #10069F;
  font-size: clamp(1.7rem, 4vw, 2.55rem);
  line-height: 1.05;
}

.public-notice-modal__date {
  margin: 0 0 9px;
  color: #FE5000;
  font-size: .88rem;
  font-weight: 850;
}

.public-notice-modal__summary {
  margin: 0;
  color: #536373;
  line-height: 1.58;
}

.public-notice-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 18px;
}

body.dark-mode .contact-faq-section {
  background: #07111f !important;
}

body.dark-mode .contact-faq-card,
body.dark-mode .public-notice-modal__card {
  border-color: rgba(148,163,184,.25) !important;
  background: #101b2f !important;
}

body.dark-mode .contact-faq-card summary,
body.dark-mode .contact-faq-card p,
body.dark-mode .public-notice-modal__card h2,
body.dark-mode .public-notice-modal__summary {
  color: #f8fafc !important;
}

@media (max-width: 680px) {
  .contact-faq-list { grid-template-columns: 1fr; }
  .public-notice-modal { padding: 12px; }
  .public-notice-modal__card { border-radius: 18px; }
}

/* Contact-page section-order refinement: keep social links within contact details and the message form last. */
.contact-social-inline {
  margin-top: 18px;
  padding: 0 !important;
  background: transparent !important;
}

.blog-main {
  background: #f6f7fc;
}

.blog-hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  min-height: clamp(330px, 45vw, 540px);
  display: flex;
  align-items: center;
  color: #ffffff;
  background:
    linear-gradient(92deg, rgba(16, 6, 159, .98) 0%, rgba(16, 6, 159, .92) 40%, rgba(16, 6, 159, .68) 70%, rgba(16, 6, 159, .42) 100%),
    url('../images/homepage-hero/hero-08-interior-reading-level.webp') center 48% / cover no-repeat;
}

.blog-hero::before,
.blog-hero::after {
  content: '';
  position: absolute;
  pointer-events: none;
  z-index: -1;
  border-radius: 999px;
}

.blog-hero::before {
  width: clamp(210px, 34vw, 450px);
  height: clamp(210px, 34vw, 450px);
  right: -90px;
  bottom: -160px;
  background: rgba(254, 80, 0, .38);
}

.blog-hero::after {
  width: clamp(130px, 18vw, 260px);
  height: clamp(130px, 18vw, 260px);
  right: 22%;
  top: -90px;
  border: 24px solid rgba(255, 255, 255, .12);
}

.blog-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 410px);
  gap: clamp(28px, 6vw, 88px);
  align-items: center;
  padding-block: clamp(56px, 8vw, 102px);
}

.blog-hero__copy {
  max-width: 720px;
}

.blog-hero .kicker,
.blog-article-hero .kicker {
  color: #ffb395;
}

.blog-hero h1,
.blog-article-hero h1 {
  margin: 8px 0 16px;
  color: #ffffff;
  font-size: clamp(3rem, 7vw, 6rem);
  line-height: .98;
  letter-spacing: -.065em;
}

.blog-hero p,
.blog-article-hero p {
  max-width: 680px;
  margin: 0;
  color: rgba(255, 255, 255, .94);
  font-size: clamp(1.04rem, 1.6vw, 1.24rem);
  line-height: 1.75;
}

.blog-hero__actions,
.blog-card__actions,
.blog-feature__actions,
.blog-article-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

.blog-hero__actions {
  margin-top: 28px;
}

.blog-hero__panel {
  padding: clamp(24px, 4vw, 34px);
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 26px;
  background: rgba(255, 255, 255, .14);
  box-shadow: 0 22px 70px rgba(0, 0, 0, .18);
  backdrop-filter: blur(14px);
}

.blog-hero__panel strong {
  display: block;
  margin-bottom: 8px;
  color: #ffffff;
  font-size: 1.08rem;
}

.blog-hero__panel p {
  font-size: .96rem;
  line-height: 1.65;
}

.blog-hero__stats {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 20px;
}

.blog-hero__stat {
  padding: 15px;
  border-radius: 17px;
  background: rgba(255, 255, 255, .16);
}

.blog-hero__stat span {
  display: block;
  color: #ffffff;
  font-size: 1.45rem;
  font-weight: 900;
}

.blog-hero__stat small {
  display: block;
  margin-top: 4px;
  color: rgba(255, 255, 255, .82);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-section {
  padding-block: clamp(54px, 8vw, 92px);
}

.blog-section--featured {
  background: #ffffff;
}

.blog-section__heading {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 22px;
  margin-bottom: 28px;
}

.blog-section__heading h2,
.blog-feature__copy h2,
.blog-article-content h2 {
  margin: 6px 0 0;
  color: #10069f;
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.08;
  letter-spacing: -.055em;
}

.blog-section__heading p {
  max-width: 660px;
  margin: 0;
  color: #566273;
  line-height: 1.7;
}

.blog-feature {
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  border: 1px solid #e4e7f1;
  border-radius: 30px;
  background: #ffffff;
  box-shadow: 0 26px 70px rgba(16, 6, 159, .09);
}

.blog-feature__media,
.blog-card__media {
  position: relative;
  overflow: hidden;
  background: #e9ecf8;
}

.blog-feature__media {
  min-height: 390px;
}

.blog-feature__media img,
.blog-card__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .35s ease;
}

.blog-feature:hover img,
.blog-card:hover img {
  transform: scale(1.04);
}

.blog-feature__badge,
.blog-card__badge {
  position: absolute;
  left: 18px;
  top: 18px;
  display: inline-flex;
  align-items: center;
  min-height: 31px;
  padding: 7px 11px;
  border-radius: 999px;
  color: #ffffff;
  background: #fe5000;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.blog-feature__copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(30px, 5vw, 58px);
}

.blog-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 14px;
  margin: 0 0 12px;
  color: #697386;
  font-size: .83rem;
  font-weight: 700;
}

.blog-feature__copy > p,
.blog-card__body > p,
.blog-article-content p,
.blog-article-content li {
  color: #556171;
  line-height: 1.75;
}

.blog-feature__copy > p {
  margin: 14px 0 24px;
}

.blog-toolbar {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: 26px;
  padding: 16px;
  border: 1px solid #e2e5ef;
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 14px 34px rgba(19, 31, 72, .06);
}

.blog-search {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 1px solid #cfd5e2;
  border-radius: 13px;
  color: #1f2937;
  background: #ffffff;
  font: inherit;
}

.blog-search:focus {
  outline: 3px solid rgba(254, 80, 0, .22);
  border-color: #fe5000;
}

.blog-filter-group {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}

.blog-filter {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid #d6daea;
  border-radius: 999px;
  color: #10069f;
  background: #ffffff;
  font: inherit;
  font-size: .86rem;
  font-weight: 800;
  cursor: pointer;
  transition: .2s ease;
}

.blog-filter:hover,
.blog-filter.is-active {
  border-color: #10069f;
  color: #ffffff;
  background: #10069f;
}

.blog-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}

.blog-card {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  border: 1px solid #e2e5ef;
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 12px 30px rgba(19, 31, 72, .06);
  transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}

.blog-card:hover {
  transform: translateY(-7px);
  border-color: rgba(16, 6, 159, .32);
  box-shadow: 0 22px 45px rgba(19, 31, 72, .12);
}

.blog-card__media {
  height: 210px;
}

.blog-card__body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px;
}

.blog-card__body h3 {
  margin: 0;
  color: #10069f;
  font-size: 1.33rem;
  line-height: 1.24;
  letter-spacing: -.025em;
}

.blog-card__body > p {
  margin: 12px 0 18px;
  font-size: .94rem;
}

.blog-card__actions {
  margin-top: auto;
}

.blog-button,
.blog-button--ghost,
.blog-button--download {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 43px;
  padding: 10px 14px;
  border: 1px solid transparent;
  border-radius: 999px;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 900;
  transition: .2s ease;
}

.blog-button {
  color: #ffffff;
  background: #10069f;
}

.blog-button:hover {
  background: #2e22bc;
}

.blog-button--ghost {
  color: #10069f;
  border-color: rgba(16, 6, 159, .22);
  background: #ffffff;
}

.blog-button--ghost:hover,
.blog-button--download:hover {
  border-color: #fe5000;
  color: #ffffff;
  background: #fe5000;
}

.blog-button--download {
  color: #a63800;
  border-color: rgba(254, 80, 0, .30);
  background: #fff6f1;
}

.blog-empty-state {
  display: none;
  padding: 32px;
  border: 1px dashed #bec5d3;
  border-radius: 18px;
  color: #566273;
  background: #ffffff;
  text-align: center;
}

.blog-empty-state.is-visible {
  display: block;
}

.blog-placeholder-note {
  margin-top: 28px;
  padding: 18px 20px;
  border-left: 4px solid #fe5000;
  border-radius: 0 16px 16px 0;
  color: #4f5d70;
  background: #fff8f4;
  line-height: 1.7;
}

.blog-download-guide {
  background: #10069f;
  color: #ffffff;
}

.blog-download-guide__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  align-items: center;
}

.blog-download-guide h2 {
  margin: 6px 0 10px;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3rem);
  letter-spacing: -.05em;
}

.blog-download-guide p {
  max-width: 760px;
  margin: 0;
  color: rgba(255, 255, 255, .86);
  line-height: 1.75;
}

.blog-article-hero {
  position: relative;
  overflow: hidden;
  min-height: 350px;
  display: flex;
  align-items: end;
  color: #ffffff;
  background:
    linear-gradient(90deg, rgba(16, 6, 159, .98), rgba(16, 6, 159, .72)),
    url('../images/homepage-hero/hero-07-interior-atrium-reading.webp') center 55% / cover no-repeat;
}

.blog-article-hero__inner {
  padding-block: clamp(62px, 10vw, 116px) clamp(46px, 7vw, 74px);
}

.blog-article-hero h1 {
  max-width: 980px;
  font-size: clamp(2.4rem, 6vw, 5.2rem);
}

.blog-article-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 280px;
  gap: clamp(28px, 5vw, 64px);
  align-items: start;
}

.blog-article-content,
.blog-article-aside {
  border: 1px solid #e2e5ef;
  border-radius: 24px;
  background: #ffffff;
  box-shadow: 0 16px 40px rgba(19, 31, 72, .07);
}

.blog-article-content {
  padding: clamp(26px, 5vw, 58px);
}

.blog-article-content h2 {
  margin-top: 34px;
  font-size: clamp(1.7rem, 3vw, 2.4rem);
}

.blog-article-content h3 {
  margin-top: 26px;
  color: #10069f;
}

.blog-article-aside {
  position: sticky;
  top: 112px;
  padding: 20px;
}

.blog-article-aside h2 {
  margin: 0 0 12px;
  color: #10069f;
  font-size: 1.15rem;
}

.blog-article-aside p,
.blog-article-aside li {
  color: #627083;
  font-size: .9rem;
  line-height: 1.65;
}

.blog-article-aside ul {
  padding-left: 18px;
}

.blog-article-actions {
  margin-top: 18px;
}

.blog-article-actions .blog-button,
.blog-article-actions .blog-button--download,
.blog-article-actions .blog-button--ghost {
  width: 100%;
}

body.dark-mode .blog-main,
body.high-contrast .blog-main {
  background: #07111f !important;
}

body.dark-mode .blog-section--featured,
body.dark-mode .blog-feature,
body.dark-mode .blog-card,
body.dark-mode .blog-toolbar,
body.dark-mode .blog-empty-state,
body.dark-mode .blog-article-content,
body.dark-mode .blog-article-aside {
  color: #e5edf6;
  border-color: #23364b;
  background: #0c1a2b !important;
}

body.dark-mode .blog-section__heading h2,
body.dark-mode .blog-feature__copy h2,
body.dark-mode .blog-card__body h3,
body.dark-mode .blog-article-content h2,
body.dark-mode .blog-article-content h3,
body.dark-mode .blog-article-aside h2 {
  color: #a9c7ff !important;
}

body.dark-mode .blog-section__heading p,
body.dark-mode .blog-feature__copy > p,
body.dark-mode .blog-card__body > p,
body.dark-mode .blog-article-content p,
body.dark-mode .blog-article-content li,
body.dark-mode .blog-article-aside p,
body.dark-mode .blog-article-aside li,
body.dark-mode .blog-meta,
body.dark-mode .blog-empty-state {
  color: #c6d1df !important;
}

body.dark-mode .blog-search,
body.dark-mode .blog-filter,
body.dark-mode .blog-button--ghost {
  color: #dce8ff;
  border-color: #37506c;
  background: #07111f;
}

body.dark-mode .blog-placeholder-note {
  color: #e2e9f3;
  background: #2a1a13;
}

@media (max-width: 960px) {
  .blog-hero__inner,
  .blog-feature,
  .blog-article-layout {
    grid-template-columns: 1fr;
  }

  .blog-hero__panel {
    max-width: 620px;
  }

  .blog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .blog-article-aside {
    position: static;
  }
}

@media (max-width: 680px) {
  .blog-hero__inner {
    padding-block: 50px;
  }

  .blog-hero h1 {
    font-size: clamp(3rem, 15vw, 4.4rem);
  }

  .blog-feature__media {
    min-height: 245px;
  }

  .blog-toolbar,
  .blog-download-guide__inner {
    grid-template-columns: 1fr;
  }

  .blog-filter-group {
    justify-content: flex-start;
  }

  .blog-grid {
    grid-template-columns: 1fr;
  }

  .blog-card__media {
    height: 220px;
  }
}

@media print {
  .top-strip,
  .site-header,
  .accessibility-widget,
  .knls-chatbot,
  .site-footer,
  .blog-article-aside,
  .blog-article-actions,
  .blog-article-hero .breadcrumbs,
  .page-loader {
    display: none !important;
  }

  .blog-main,
  .blog-article-content {
    background: #ffffff !important;
    box-shadow: none !important;
  }

  .blog-article-hero {
    min-height: auto;
    color: #111827 !important;
    background: #ffffff !important;
  }

  .blog-article-hero h1,
  .blog-article-hero p,
  .blog-article-hero .kicker {
    color: #111827 !important;
  }

  .blog-article-layout {
    display: block;
  }
}



/* Blog post image placeholders for future content editing */
.blog-media-placeholder {
  width: 100%;
  height: 100%;
  min-height: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 28px;
  color: #10069f;
  text-align: center;
  background:
    radial-gradient(circle at 20% 20%, rgba(254, 80, 0, .12), transparent 28%),
    linear-gradient(135deg, #f6f7fc 0%, #e7eaf7 100%);
}
.blog-media-placeholder__icon {
  display: grid;
  place-items: center;
  width: 52px;
  height: 52px;
  border: 2px dashed rgba(16, 6, 159, .38);
  border-radius: 16px;
  font-size: 1.75rem;
  line-height: 1;
}
.blog-media-placeholder strong {
  font-size: 1rem;
}
.blog-media-placeholder small {
  color: #677085;
  font-weight: 700;
}
html[data-theme="dark"] .blog-media-placeholder {
  color: #ffffff;
  background:
    radial-gradient(circle at 20% 20%, rgba(254, 80, 0, .18), transparent 28%),
    linear-gradient(135deg, #1e1e37 0%, #17172b 100%);
}
html[data-theme="dark"] .blog-media-placeholder small {
  color: #c6cada;
}

/* KNLS Braille page: force an actual Braille reading photo in the hero. */
body.braille-library-page .page-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.88) 0%, rgba(16,6,159,.64) 44%, rgba(7,17,31,.28) 100%),
    url("../images/braille-library-slideshow/braille-library-hero-custom.jpg") center center / cover no-repeat !important;
}

body.dark-mode.braille-library-page .page-hero {
  background:
    linear-gradient(90deg, rgba(7,17,31,.90) 0%, rgba(16,6,159,.62) 48%, rgba(7,17,31,.48) 100%),
    url("../images/braille-library-slideshow/braille-library-hero-custom.jpg") center center / cover no-repeat !important;
}


/* Braille page slideshow: image-only full-width presentation. */
.braille-library-slideshow {
  display: block !important;
  grid-template-columns: 1fr !important;
}

.braille-library-slideshow .service-top-slideshow__media,
.braille-library-slideshow .service-top-slideshow__slide img {
  min-height: clamp(320px, 42vw, 520px) !important;
}

.braille-library-slideshow .service-top-slideshow__media {
  width: 100% !important;
}

@media (max-width: 760px) {
  .braille-library-slideshow .service-top-slideshow__media,
  .braille-library-slideshow .service-top-slideshow__slide img {
    min-height: clamp(250px, 66vw, 340px) !important;
  }
}


/* KNLS Newsletter archive: concise visual-first layout */
.newsletter-archive-hero {
  background:
    linear-gradient(90deg, rgba(16,6,159,.96) 0%, rgba(16,6,159,.84) 55%, rgba(16,6,159,.55) 100%),
    url("../images/newsletters/covers/october-december-2025-newsletter-cover.webp") center 30% / cover no-repeat !important;
}

.newsletter-intro-section {
  padding-bottom: clamp(36px, 5vw, 64px) !important;
}

.newsletter-intro-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(22px, 4vw, 52px);
  padding: clamp(22px, 4vw, 42px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 26px;
  background: #ffffff;
  box-shadow: 0 16px 36px rgba(16,6,159,.08);
}

.newsletter-intro-card h2,
.newsletter-featured-card h3,
.newsletter-year-group h2,
.newsletter-issue-card h3 {
  color: #10069F;
}

.newsletter-intro-card p {
  max-width: 850px;
  margin-bottom: 10px;
}

.newsletter-year-links {
  display: grid;
  gap: 10px;
  min-width: 170px;
}

.newsletter-year-links a {
  display: block;
  padding: 12px 16px;
  border: 1px solid rgba(16,6,159,.16);
  border-radius: 999px;
  color: #10069F;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  background: rgba(16,6,159,.04);
}

.newsletter-year-links a:hover,
.newsletter-year-links a:focus-visible {
  border-color: #FE5000;
  color: #FE5000;
  background: #fff6f1;
}

.newsletter-featured-card {
  display: grid;
  grid-template-columns: minmax(220px, 330px) minmax(0, 1fr);
  gap: clamp(24px, 5vw, 62px);
  align-items: center;
  padding: clamp(18px, 3vw, 30px);
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 18px 38px rgba(16,6,159,.10);
}

.newsletter-featured-card__cover {
  margin: 0;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 14px 28px rgba(7,17,31,.18);
}

.newsletter-featured-card__cover img {
  display: block;
  width: 100%;
  height: auto;
}

.newsletter-featured-card__copy h3 {
  margin: 4px 0 12px;
  font-size: clamp(1.65rem, 3vw, 2.35rem);
  line-height: 1.08;
}

.newsletter-featured-card__copy p:not(.kicker) {
  max-width: 680px;
}

.newsletter-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 20px;
}

.newsletter-card__actions .btn {
  min-width: 138px;
  justify-content: center;
}

.newsletter-year-group + .newsletter-year-group {
  margin-top: clamp(42px, 6vw, 68px);
}

.newsletter-year-group__heading {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 20px;
  margin-bottom: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(16,6,159,.12);
}

.newsletter-year-group__heading .kicker,
.newsletter-year-group__heading h2 {
  margin: 0;
}

.newsletter-year-group__heading h2 {
  font-size: clamp(2rem, 4vw, 3.1rem);
}

.newsletter-issue-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(16px, 2vw, 24px);
}

.newsletter-issue-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 12px 26px rgba(16,6,159,.07);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.newsletter-issue-card:hover,
.newsletter-issue-card:focus-within {
  transform: translateY(-4px);
  border-color: rgba(254,80,0,.44);
  box-shadow: 0 18px 34px rgba(16,6,159,.12);
}

.newsletter-issue-card__cover {
  display: block;
  aspect-ratio: 0.707 / 1;
  overflow: hidden;
  background: #f0f1f6;
}

.newsletter-issue-card__cover img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.newsletter-issue-card__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 16px;
}

.newsletter-issue-card__body .kicker {
  margin: 0 0 6px;
  font-size: .72rem;
}

.newsletter-issue-card h3 {
  margin: 0 0 10px;
  font-size: 1.02rem;
  line-height: 1.22;
}

.newsletter-issue-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-top: auto;
  color: #637082;
  font-size: .78rem;
  font-weight: 700;
}

.newsletter-issue-card__meta span + span::before {
  content: "•";
  margin-right: 7px;
  color: #FE5000;
}

.newsletter-card__actions--compact {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-top: 14px;
}

.newsletter-card__actions--compact .btn {
  min-width: 0;
  padding: 10px 8px;
  font-size: .8rem;
}

body.dark-mode .newsletter-intro-card,
body.dark-mode .newsletter-featured-card,
body.dark-mode .newsletter-issue-card {
  border-color: rgba(255,255,255,.12);
  background: #13172a;
}

body.dark-mode .newsletter-intro-card h2,
body.dark-mode .newsletter-featured-card h3,
body.dark-mode .newsletter-year-group h2,
body.dark-mode .newsletter-issue-card h3 {
  color: #ffffff;
}

body.dark-mode .newsletter-year-links a {
  border-color: rgba(255,255,255,.18);
  color: #ffffff;
  background: rgba(255,255,255,.05);
}

body.dark-mode .newsletter-year-group__heading {
  border-bottom-color: rgba(255,255,255,.14);
}

body.dark-mode .newsletter-issue-card__meta {
  color: #bac2d1;
}

@media (max-width: 1080px) {
  .newsletter-issue-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 780px) {
  .newsletter-intro-card,
  .newsletter-featured-card { grid-template-columns: 1fr; }
  .newsletter-year-links { grid-template-columns: repeat(3, minmax(0, 1fr)); min-width: 0; }
  .newsletter-year-links a { padding: 10px 8px; font-size: .82rem; }
  .newsletter-featured-card__cover { max-width: 320px; }
  .newsletter-issue-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 470px) {
  .newsletter-issue-grid { grid-template-columns: 1fr; }
  .newsletter-issue-card { display: grid; grid-template-columns: 42% 58%; }
  .newsletter-issue-card__cover { height: 100%; min-height: 250px; }
  .newsletter-card__actions--compact { grid-template-columns: 1fr; }
}


/* KNLS Newsletter archive: compact spacing after removal of the introductory panel. */
.newsletter-archive-page .newsletter-archive-hero {
  padding-top: clamp(24px, 3vw, 38px) !important;
  padding-bottom: clamp(24px, 3vw, 38px) !important;
}

.newsletter-featured-section,
.newsletter-archive-section {
  padding-top: clamp(28px, 3.8vw, 48px) !important;
  padding-bottom: clamp(30px, 4vw, 52px) !important;
}

.newsletter-featured-section .section-title,
.newsletter-archive-section .section-title {
  margin-bottom: clamp(14px, 2vw, 22px) !important;
}

.newsletter-featured-card {
  gap: clamp(20px, 4vw, 46px);
  padding: clamp(16px, 2.2vw, 24px);
}

.newsletter-featured-card__copy h3 {
  margin-bottom: 8px;
}

.newsletter-card__actions {
  margin-top: 14px;
}

.newsletter-year-group + .newsletter-year-group {
  margin-top: clamp(28px, 4vw, 44px);
}

.newsletter-year-group__heading {
  margin-bottom: 14px;
  padding-bottom: 8px;
}

.newsletter-issue-grid {
  gap: clamp(14px, 1.7vw, 20px);
}

.newsletter-issue-card__body {
  padding: 14px;
}

/* KNLS Digitization Lab video feature */
.digitization-page .digitization-video-feature {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  gap: clamp(18px, 3vw, 34px);
  align-items: center;
  margin: clamp(18px, 3vw, 30px) 0 clamp(20px, 3.5vw, 36px);
  padding: clamp(16px, 2.4vw, 26px);
  border: 1px solid rgba(16, 6, 159, .14);
  border-radius: 22px;
  background:
    radial-gradient(circle at 12% 12%, rgba(254, 80, 0, .12), transparent 28%),
    linear-gradient(135deg, rgba(16, 6, 159, .065), rgba(255, 255, 255, .98));
  box-shadow: 0 16px 34px rgba(16, 6, 159, .08);
}

.digitization-page .digitization-video-feature__copy .kicker {
  margin: 0 0 7px;
}

.digitization-page .digitization-video-feature__copy h3 {
  margin: 0 0 10px;
  color: #10069F;
  font-size: clamp(1.36rem, 2vw, 1.9rem);
  line-height: 1.12;
}

.digitization-page .digitization-video-feature__copy p:last-child {
  margin-bottom: 0;
}

.digitization-page .digitization-video-feature__media {
  overflow: hidden;
  border-radius: 18px;
  background: #07111f;
  box-shadow: 0 14px 28px rgba(7, 17, 31, .2);
}

.digitization-page .digitization-video-feature__media video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #07111f;
}

body.dark-mode.digitization-page .digitization-video-feature,
html[data-theme="dark"] body.digitization-page .digitization-video-feature {
  border-color: rgba(255, 255, 255, .14);
  background:
    radial-gradient(circle at 12% 12%, rgba(254, 80, 0, .15), transparent 28%),
    linear-gradient(135deg, rgba(16, 6, 159, .3), rgba(7, 17, 31, .92));
}

body.dark-mode.digitization-page .digitization-video-feature__copy h3,
html[data-theme="dark"] body.digitization-page .digitization-video-feature__copy h3 {
  color: #ffffff;
}

@media (max-width: 820px) {
  .digitization-page .digitization-video-feature {
    grid-template-columns: 1fr;
    gap: 15px;
    padding: 15px;
    border-radius: 18px;
  }

  .digitization-page .digitization-video-feature__media {
    border-radius: 14px;
  }
}


/* =========================================================
   Homepage closure notice poster modal
   ========================================================= */
.public-notice-modal--poster {
  padding: clamp(12px, 2vw, 22px);
}

.public-notice-modal__card--poster {
  width: min(94vw, 860px);
  max-height: calc(100vh - 30px);
  overflow: visible;
  padding: 0;
  border: 2px solid rgba(255,255,255,.82);
  border-radius: 20px;
  background: #ffffff;
  box-shadow: 0 34px 100px rgba(0,0,0,.52);
}

.public-notice-modal__poster {
  display: block;
  width: 100%;
  max-height: calc(100vh - 34px);
  object-fit: contain;
  border-radius: 18px;
  background: #ffffff;
}

.public-notice-modal__close--poster {
  z-index: 3;
  top: 12px;
  right: 12px;
  width: 54px;
  height: 54px;
  border: 3px solid #ffffff;
  background: #10069F;
  color: #ffffff;
  box-shadow: 0 5px 18px rgba(0,0,0,.40);
  font-size: 2.3rem;
  font-weight: 900;
  line-height: .85;
  transition: transform .18s ease, background-color .18s ease;
}

.public-notice-modal__close--poster:hover,
.public-notice-modal__close--poster:focus-visible {
  transform: scale(1.08);
  background: #FE5000;
  outline: 3px solid rgba(255,255,255,.96);
  outline-offset: 3px;
}

@media (max-width: 680px) {
  .public-notice-modal--poster { padding: 8px; }
  .public-notice-modal__card--poster {
    width: min(96vw, 620px);
    max-height: calc(100vh - 16px);
    border-radius: 15px;
  }
  .public-notice-modal__poster {
    max-height: calc(100vh - 20px);
    border-radius: 13px;
  }
  .public-notice-modal__close--poster {
    top: 8px;
    right: 8px;
    width: 48px;
    height: 48px;
    font-size: 2rem;
  }
}


/* KNLS public notice: viewport-pinned close control and mobile poster source */
.public-notice-modal__picture {
  display: block;
  width: 100%;
  max-height: calc(100vh - 34px);
}

.public-notice-modal__picture .public-notice-modal__poster {
  width: 100%;
  height: auto;
  max-height: calc(100vh - 34px);
  object-fit: contain;
}

.public-notice-modal__close--poster {
  position: fixed !important;
  z-index: 99999 !important;
  top: max(14px, env(safe-area-inset-top)) !important;
  right: max(14px, env(safe-area-inset-right)) !important;
  width: 64px !important;
  height: 64px !important;
  display: grid !important;
  place-items: center !important;
  border: 4px solid #ffffff !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(16,6,159,.92), 0 10px 26px rgba(0,0,0,.58) !important;
  font-size: 3rem !important;
  font-family: Arial, sans-serif !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.public-notice-modal__close--poster span[aria-hidden="true"] {
  display: block;
  margin-top: -5px;
}

.public-notice-modal__close--poster:hover,
.public-notice-modal__close--poster:focus-visible {
  transform: scale(1.08) !important;
  background: #10069F !important;
  outline: 4px solid rgba(255,255,255,.98) !important;
  outline-offset: 4px !important;
}

@media (max-width: 680px) {
  .public-notice-modal--poster {
    padding: 7px !important;
  }

  .public-notice-modal__card--poster {
    width: min(96vw, 520px) !important;
    max-height: calc(100dvh - 14px) !important;
    border-radius: 14px !important;
  }

  .public-notice-modal__picture,
  .public-notice-modal__picture .public-notice-modal__poster {
    max-height: calc(100dvh - 16px) !important;
  }

  .public-notice-modal__picture .public-notice-modal__poster {
    border-radius: 12px !important;
    object-fit: contain !important;
  }

  .public-notice-modal__close--poster {
    top: max(10px, env(safe-area-inset-top)) !important;
    right: max(10px, env(safe-area-inset-right)) !important;
    width: 56px !important;
    height: 56px !important;
    border-width: 3px !important;
    font-size: 2.65rem !important;
  }
}


/* =========================================================
   Final homepage closure popup sizing and visible close button
   ========================================================= */
.public-notice-modal--poster {
  padding: clamp(34px, 5vh, 58px) clamp(18px, 4vw, 44px) 22px !important;
  align-items: center !important;
  justify-items: center !important;
}

.public-notice-modal__card--poster {
  width: min(78vw, 760px) !important;
  max-width: 760px !important;
  max-height: 78vh !important;
  overflow: hidden !important;
  border-radius: 18px !important;
}

.public-notice-modal__picture,
.public-notice-modal__picture .public-notice-modal__poster,
.public-notice-modal__poster {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: 78vh !important;
  object-fit: contain !important;
}

.public-notice-modal__close--poster {
  display: none !important;
}

.public-notice-modal__close-floating {
  position: fixed !important;
  top: 18px !important;
  right: 18px !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  min-width: 118px !important;
  height: 54px !important;
  padding: 0 16px !important;
  border: 4px solid #ffffff !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #10069F, 0 14px 34px rgba(0,0,0,.62) !important;
  font-family: Arial, sans-serif !important;
  font-size: 1rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.public-notice-modal__close-floating span[aria-hidden="true"] {
  display: inline-grid !important;
  place-items: center !important;
  width: 28px !important;
  height: 28px !important;
  font-size: 2.3rem !important;
  line-height: .8 !important;
  transform: translateY(-1px) !important;
}

.public-notice-modal__close-floating:hover,
.public-notice-modal__close-floating:focus-visible {
  background: #10069F !important;
  outline: 4px solid rgba(255,255,255,.98) !important;
  outline-offset: 4px !important;
}

@media (max-width: 900px) {
  .public-notice-modal__card--poster {
    width: min(86vw, 680px) !important;
    max-height: 76vh !important;
  }

  .public-notice-modal__picture,
  .public-notice-modal__picture .public-notice-modal__poster,
  .public-notice-modal__poster {
    max-height: 76vh !important;
  }
}

@media (max-width: 680px) {
  .public-notice-modal--poster {
    padding: 76px 10px 14px !important;
  }

  .public-notice-modal__card--poster {
    width: min(92vw, 430px) !important;
    max-height: calc(100dvh - 102px) !important;
    border-radius: 14px !important;
  }

  .public-notice-modal__picture,
  .public-notice-modal__picture .public-notice-modal__poster,
  .public-notice-modal__poster {
    max-height: calc(100dvh - 102px) !important;
    border-radius: 12px !important;
  }

  .public-notice-modal__close-floating {
    top: 12px !important;
    right: 12px !important;
    min-width: 104px !important;
    height: 50px !important;
    padding: 0 13px !important;
    font-size: .93rem !important;
  }

  .public-notice-modal__close-floating span[aria-hidden="true"] {
    width: 25px !important;
    height: 25px !important;
    font-size: 2rem !important;
  }
}

@media (max-width: 420px) {
  .public-notice-modal__close-text {
    position: static !important;
  }

  .public-notice-modal__close-floating {
    min-width: 94px !important;
  }
}


/* =========================================================
   Final compact public-notice popup: smaller, dismissible and accessible
   ========================================================= */
body.public-notice-open {
  overflow: hidden !important;
}

.public-notice-modal--poster {
  display: grid !important;
  place-items: center !important;
  padding: clamp(16px, 4vh, 28px) clamp(14px, 3vw, 28px) !important;
}

.public-notice-modal--poster[hidden] {
  display: none !important;
}

.public-notice-modal__backdrop {
  background: rgba(7, 17, 31, .62) !important;
  backdrop-filter: blur(5px) !important;
}

.public-notice-modal__card--poster {
  position: relative !important;
  z-index: 2 !important;
  display: flex !important;
  flex-direction: column !important;
  width: min(76vw, 680px) !important;
  max-width: 680px !important;
  max-height: min(82vh, 720px) !important;
  overflow: hidden !important;
  padding: 0 !important;
  border: 2px solid rgba(255, 255, 255, .96) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(0, 0, 0, .45) !important;
}

.public-notice-modal__header {
  position: relative !important;
  z-index: 3 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
  flex: 0 0 auto !important;
  min-height: 58px !important;
  padding: 10px 12px 10px 18px !important;
  background: linear-gradient(90deg, #10069F, #063783) !important;
  color: #ffffff !important;
}

.public-notice-modal__header-copy {
  display: flex !important;
  flex-direction: column !important;
  min-width: 0 !important;
}

.public-notice-modal__header-copy strong {
  color: #ffffff !important;
  font-size: .95rem !important;
  font-weight: 900 !important;
  letter-spacing: .08em !important;
  text-transform: uppercase !important;
}

.public-notice-modal__header-copy span {
  color: rgba(255,255,255,.86) !important;
  font-size: .86rem !important;
  font-weight: 700 !important;
}

.public-notice-modal__close-floating,
.public-notice-modal__close--poster {
  display: none !important;
}

.public-notice-modal__close--header {
  position: static !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 7px !important;
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 96px !important;
  height: 42px !important;
  padding: 0 13px !important;
  border: 3px solid #ffffff !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(0,0,0,.32) !important;
  font-family: Arial, sans-serif !important;
  font-size: .92rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.public-notice-modal__close--header span[aria-hidden="true"] {
  display: inline-block !important;
  font-size: 2rem !important;
  line-height: .7 !important;
  transform: translateY(-1px) !important;
}

.public-notice-modal__close--header:hover,
.public-notice-modal__close--header:focus-visible {
  background: #ffffff !important;
  color: #10069F !important;
  outline: 4px solid rgba(254, 80, 0, .45) !important;
  outline-offset: 2px !important;
}

.public-notice-modal__picture {
  display: grid !important;
  place-items: center !important;
  width: 100% !important;
  min-height: 0 !important;
  max-height: calc(min(82vh, 720px) - 58px) !important;
  overflow: auto !important;
  background: #ffffff !important;
}

.public-notice-modal__picture .public-notice-modal__poster,
.public-notice-modal__poster {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(min(82vh, 720px) - 58px) !important;
  object-fit: contain !important;
  border-radius: 0 !important;
}

@media (max-width: 1024px) {
  .public-notice-modal__card--poster {
    width: min(84vw, 640px) !important;
    max-height: 82vh !important;
  }

  .public-notice-modal__picture,
  .public-notice-modal__picture .public-notice-modal__poster,
  .public-notice-modal__poster {
    max-height: calc(82vh - 58px) !important;
  }
}

@media (max-width: 680px) {
  .public-notice-modal--poster {
    padding: 10px !important;
    align-items: center !important;
  }

  .public-notice-modal__card--poster {
    width: min(92vw, 390px) !important;
    max-height: 88dvh !important;
    border-radius: 15px !important;
  }

  .public-notice-modal__header {
    min-height: 54px !important;
    padding: 8px 9px 8px 12px !important;
  }

  .public-notice-modal__header-copy strong {
    font-size: .78rem !important;
    letter-spacing: .06em !important;
  }

  .public-notice-modal__header-copy span {
    font-size: .75rem !important;
  }

  .public-notice-modal__close--header {
    min-width: 84px !important;
    height: 40px !important;
    padding: 0 10px !important;
    border-width: 2px !important;
    font-size: .82rem !important;
  }

  .public-notice-modal__close--header span[aria-hidden="true"] {
    font-size: 1.85rem !important;
  }

  .public-notice-modal__picture {
    max-height: calc(88dvh - 54px) !important;
  }

  .public-notice-modal__picture .public-notice-modal__poster,
  .public-notice-modal__poster {
    max-height: calc(88dvh - 54px) !important;
  }
}

@media (max-width: 380px) {
  .public-notice-modal__card--poster {
    width: 94vw !important;
  }

  .public-notice-modal__header-copy span {
    display: none !important;
  }

  .public-notice-modal__close--header {
    min-width: 76px !important;
  }
}


/* =========================================================
   Final public notice modal: full poster visible, compact, no header crop
   ========================================================= */
.public-notice-modal--poster {
  display: grid !important;
  place-items: center !important;
  padding: 64px 18px 24px !important;
}

.public-notice-modal__backdrop {
  background: rgba(7, 17, 31, .62) !important;
  backdrop-filter: blur(4px) !important;
}

.public-notice-modal__card--poster {
  position: relative !important;
  z-index: 2 !important;
  display: block !important;
  width: min(70vw, 620px) !important;
  max-width: 620px !important;
  max-height: calc(100dvh - 104px) !important;
  overflow: visible !important;
  padding: 0 !important;
  border: 2px solid rgba(255,255,255,.95) !important;
  border-radius: 18px !important;
  background: #ffffff !important;
  box-shadow: 0 24px 70px rgba(0,0,0,.44) !important;
}

.public-notice-modal__header,
.public-notice-modal__close--header,
.public-notice-modal__close--poster,
.public-notice-modal__close-floating {
  display: none !important;
}

.public-notice-modal__picture {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-height: calc(100dvh - 104px) !important;
  overflow: visible !important;
  background: #ffffff !important;
  border-radius: 16px !important;
}

.public-notice-modal__picture .public-notice-modal__poster,
.public-notice-modal__poster {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: calc(100dvh - 104px) !important;
  object-fit: contain !important;
  border-radius: 16px !important;
  background: #ffffff !important;
}

.public-notice-modal__close-floating-final {
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  z-index: 2147483647 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  min-width: 112px !important;
  height: 52px !important;
  padding: 0 15px !important;
  border: 4px solid #ffffff !important;
  border-radius: 999px !important;
  background: #FE5000 !important;
  color: #ffffff !important;
  box-shadow: 0 0 0 3px #10069F, 0 12px 30px rgba(0,0,0,.58) !important;
  font-family: Arial, sans-serif !important;
  font-size: .98rem !important;
  font-weight: 900 !important;
  line-height: 1 !important;
  cursor: pointer !important;
}

.public-notice-modal__close-floating-final span[aria-hidden="true"] {
  display: inline-grid !important;
  place-items: center !important;
  width: 26px !important;
  height: 26px !important;
  font-size: 2.25rem !important;
  line-height: .75 !important;
  transform: translateY(-1px) !important;
}

.public-notice-modal__close-floating-final:hover,
.public-notice-modal__close-floating-final:focus-visible {
  background: #10069F !important;
  outline: 4px solid rgba(255,255,255,.98) !important;
  outline-offset: 4px !important;
}

@media (max-width: 1024px) {
  .public-notice-modal__card--poster {
    width: min(76vw, 560px) !important;
  }
}

@media (max-width: 680px) {
  .public-notice-modal--poster {
    padding: 72px 10px 14px !important;
  }

  .public-notice-modal__card--poster {
    width: min(88vw, 390px) !important;
    max-height: calc(100dvh - 96px) !important;
    border-radius: 14px !important;
  }

  .public-notice-modal__picture,
  .public-notice-modal__picture .public-notice-modal__poster,
  .public-notice-modal__poster {
    max-height: calc(100dvh - 96px) !important;
    border-radius: 12px !important;
  }

  .public-notice-modal__close-floating-final {
    top: 12px !important;
    right: 12px !important;
    min-width: 98px !important;
    height: 48px !important;
    padding: 0 12px !important;
    border-width: 3px !important;
    font-size: .9rem !important;
  }

  .public-notice-modal__close-floating-final span[aria-hidden="true"] {
    width: 24px !important;
    height: 24px !important;
    font-size: 2rem !important;
  }
}

@media (max-width: 380px) {
  .public-notice-modal__card--poster {
    width: 90vw !important;
  }

  .public-notice-modal__close-floating-final {
    min-width: 88px !important;
    gap: 5px !important;
  }
}


/* =========================================================
   Events Gallery title visibility fix
   Ensures long latest-event titles are fully visible on cards and in the gallery modal.
   ========================================================= */
.events-news-gallery .event-news-card__caption h3 {
  display: block !important;
  position: static !important;
  width: auto !important;
  height: auto !important;
  margin: 0 0 8px !important;
  padding: 0 !important;
  overflow: visible !important;
  clip: auto !important;
  clip-path: none !important;
  white-space: normal !important;
  color: #10069F !important;
  font-size: clamp(1.08rem, 1.45vw, 1.35rem) !important;
  line-height: 1.22 !important;
  letter-spacing: -.01em !important;
}

.event-gallery-modal__header {
  padding-top: clamp(28px, 4vw, 46px) !important;
  overflow: visible !important;
}

.event-gallery-modal__header h2,
#eventGalleryModalTitle {
  display: block !important;
  max-width: calc(100% - 70px) !important;
  margin-top: 0 !important;
  margin-bottom: 10px !important;
  padding-top: 4px !important;
  overflow: visible !important;
  color: #10069F !important;
  font-size: clamp(1.55rem, 3vw, 2.85rem) !important;
  line-height: 1.16 !important;
  letter-spacing: -.025em !important;
  white-space: normal !important;
  text-wrap: balance;
}

@media (max-width: 640px) {
  .event-gallery-modal__header {
    padding: 64px 18px 14px !important;
  }

  .event-gallery-modal__header h2,
  #eventGalleryModalTitle {
    max-width: 100% !important;
    font-size: clamp(1.35rem, 8vw, 2rem) !important;
    line-height: 1.18 !important;
  }
}


/* =========================================================
   Final fix: latest Events Gallery title visibility
   ========================================================= */
.events-combined-page .event-news-grid {
  align-items: stretch !important;
}

.events-combined-page .event-news-card--latest-national-reading-day {
  display: flex !important;
  flex-direction: column !important;
  overflow: visible !important;
  border-radius: 24px !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__title-strip {
  display: block !important;
  position: relative !important;
  z-index: 5 !important;
  padding: 18px 18px 14px !important;
  margin: 0 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(16, 6, 159, .12) !important;
  border-radius: 24px 24px 0 0 !important;
  overflow: visible !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__title-strip .kicker {
  margin: 0 0 6px !important;
  color: #FE5000 !important;
  font-size: .78rem !important;
  line-height: 1.2 !important;
  letter-spacing: .14em !important;
  font-weight: 900 !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__title-strip h3 {
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
  color: #10069F !important;
  font-size: clamp(1.28rem, 1.8vw, 1.9rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow: visible !important;
  max-height: none !important;
  transform: none !important;
  text-indent: 0 !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__media {
  overflow: hidden !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__caption h3 {
  display: none !important;
}

.events-combined-page .event-news-card--latest-national-reading-day .event-news-card__caption {
  padding-top: 14px !important;
  overflow: visible !important;
}

/* Also keep the title fully visible inside the full-gallery modal. */
.events-combined-page .event-gallery-modal__panel {
  overflow: hidden !important;
  padding-top: 0 !important;
}

.events-combined-page .event-gallery-modal__header {
  overflow: visible !important;
  padding: 26px 78px 16px 28px !important;
}

.events-combined-page .event-gallery-modal__header h2 {
  display: block !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  color: #10069F !important;
  font-size: clamp(1.35rem, 2.2vw, 2.45rem) !important;
  line-height: 1.18 !important;
  letter-spacing: -0.025em !important;
  font-weight: 900 !important;
  white-space: normal !important;
  overflow: visible !important;
  max-height: none !important;
  transform: none !important;
}

.events-combined-page .event-gallery-modal__close {
  top: 14px !important;
  right: 14px !important;
}

@media (max-width: 760px) {
  .events-combined-page .event-news-card--latest-national-reading-day .event-news-card__title-strip {
    padding: 15px 15px 12px !important;
  }

  .events-combined-page .event-news-card--latest-national-reading-day .event-news-card__title-strip h3 {
    font-size: 1.25rem !important;
    line-height: 1.22 !important;
  }

  .events-combined-page .event-gallery-modal__header {
    padding: 22px 64px 14px 18px !important;
  }

  .events-combined-page .event-gallery-modal__header h2 {
    font-size: 1.35rem !important;
    line-height: 1.22 !important;
  }
}


/* =========================================================
   National Reading Day event page
   ========================================================= */
.national-reading-day-page {
  background: #ffffff;
}

.nrd-hero {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 82% 20%, rgba(254,80,0,.24), transparent 28%),
    linear-gradient(135deg, rgba(16,6,159,.98), rgba(7,17,31,.92)) !important;
  padding-block: clamp(54px, 8vw, 94px) !important;
}

.nrd-hero::after {
  content: "";
  position: absolute;
  inset: auto -110px -150px auto;
  width: clamp(260px, 32vw, 520px);
  height: clamp(260px, 32vw, 520px);
  border-radius: 999px;
  background: rgba(254,80,0,.20);
  filter: blur(2px);
  pointer-events: none;
}

.nrd-hero__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 430px);
  gap: clamp(24px, 4vw, 54px);
  align-items: center;
}

.nrd-hero__copy h1 {
  color: #ffffff;
  max-width: 860px;
  font-size: clamp(2.4rem, 5.8vw, 5.4rem);
  line-height: .92;
  letter-spacing: -.06em;
  margin: 0 0 16px;
}

.nrd-hero__copy p:not(.kicker) {
  max-width: 760px;
  color: rgba(255,255,255,.86);
  font-size: clamp(1rem, 1.5vw, 1.22rem);
  line-height: 1.62;
}

.nrd-hero__actions,
.nrd-resource-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 22px;
}

.nrd-hero__actions .btn--ghost,
.nrd-resource-actions .btn--ghost {
  color: #10069F;
  background: #ffffff;
  border-color: rgba(16,6,159,.16);
}

.nrd-hero__visual {
  min-width: 0;
}

.nrd-cover-collage {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  transform: rotate(-1.5deg);
}

.nrd-cover-collage img {
  width: 100%;
  aspect-ratio: 3 / 4.15;
  object-fit: cover;
  border-radius: 18px;
  border: 5px solid rgba(255,255,255,.90);
  box-shadow: 0 20px 48px rgba(0,0,0,.34);
  background: #ffffff;
}

.nrd-cover-collage img:nth-child(2),
.nrd-cover-collage img:nth-child(3) {
  transform: translateY(16px);
}

.nrd-hero .breadcrumbs {
  grid-column: 1 / -1;
  justify-self: end;
  margin-top: 10px;
}

.nrd-overview-section,
.nrd-highlights-section,
.nrd-showcase-section,
.nrd-faq-section {
  padding-block: clamp(34px, 5vw, 72px) !important;
}

.nrd-overview-grid {
  display: grid;
  grid-template-columns: minmax(260px, .72fr) minmax(0, 1.28fr);
  gap: clamp(18px, 3vw, 32px);
  align-items: stretch;
}

.nrd-date-card,
.nrd-intro-card,
.nrd-resources-card,
.nrd-faq-card,
.nrd-highlight-card {
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 28px;
  background: #ffffff;
  box-shadow: 0 22px 64px rgba(16,6,159,.08);
}

.nrd-date-card,
.nrd-intro-card {
  padding: clamp(22px, 3vw, 34px);
}

.nrd-date-card {
  background:
    radial-gradient(circle at 90% 10%, rgba(254,80,0,.13), transparent 32%),
    linear-gradient(135deg, #ffffff, #f8f8ff);
}

.nrd-date-card h2,
.nrd-intro-card h2,
.nrd-programme-grid h2,
.nrd-showcase-header h2,
.nrd-resources-card h2 {
  color: #10069F;
  font-size: clamp(1.8rem, 3.2vw, 3.4rem);
  line-height: 1;
  letter-spacing: -.045em;
  margin: 0 0 14px;
}

.nrd-date-card p,
.nrd-intro-card p,
.nrd-programme-grid p,
.nrd-showcase-header p,
.nrd-resources-card p,
.nrd-faq-card p,
.nrd-highlight-card p {
  color: #536373;
  line-height: 1.62;
}

.nrd-countdown {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding: 12px 16px;
  border-radius: 18px;
  background: #10069F;
  color: #ffffff;
}

.nrd-countdown span {
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.6rem);
  font-weight: 900;
  line-height: .9;
}

.nrd-countdown small {
  color: rgba(255,255,255,.86);
  font-weight: 800;
}

.nrd-note {
  padding: 12px 14px;
  border-radius: 16px;
  background: #fff1e8;
  color: #8b2f00 !important;
  font-weight: 700;
}

.nrd-highlight-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.nrd-highlight-card {
  padding: 22px;
}

.nrd-highlight-card span {
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  margin-bottom: 16px;
  border-radius: 18px;
  background: #fff1e8;
  color: #FE5000;
  font-size: 1.65rem;
}

.nrd-highlight-card h3,
.nrd-faq-card h3,
.nrd-book-card h3 {
  color: #10069F;
  margin: 0 0 9px;
}

.nrd-programme-section {
  padding-block: clamp(34px, 5vw, 66px) !important;
  background:
    radial-gradient(circle at 8% 10%, rgba(254,80,0,.08), transparent 24%),
    #f7f7ff;
}

.nrd-programme-grid {
  display: grid;
  grid-template-columns: minmax(240px, .65fr) minmax(0, 1.35fr);
  gap: clamp(20px, 4vw, 44px);
  align-items: start;
}

.nrd-timeline {
  display: grid;
  gap: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nrdstep;
}

.nrd-timeline li {
  counter-increment: nrdstep;
  position: relative;
  min-height: 84px;
  padding: 18px 18px 18px 76px;
  border-radius: 22px;
  background: #ffffff;
  border: 1px solid rgba(16,6,159,.10);
  box-shadow: 0 16px 42px rgba(16,6,159,.07);
}

.nrd-timeline li::before {
  content: counter(nrdstep);
  position: absolute;
  left: 18px;
  top: 18px;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #FE5000;
  color: #ffffff;
  font-weight: 900;
}

.nrd-timeline strong {
  display: block;
  color: #10069F;
  margin-bottom: 5px;
}

.nrd-timeline span {
  color: #536373;
  line-height: 1.55;
}

.nrd-showcase-header {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 20px;
  align-items: end;
  margin-bottom: 24px;
}

.nrd-showcase-tools {
  display: grid;
  gap: 8px;
}

.nrd-showcase-tools input {
  width: 100%;
  min-height: 48px;
  border: 1px solid rgba(16,6,159,.20);
  border-radius: 999px;
  padding: 0 17px;
  color: #07111f;
  background: #ffffff;
  box-shadow: 0 10px 28px rgba(16,6,159,.06);
}

.nrd-showcase-tools span {
  color: #536373;
  font-size: .9rem;
  font-weight: 700;
}

.nrd-book-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.nrd-book-card {
  min-width: 0;
  overflow: hidden;
  border: 1px solid rgba(16,6,159,.12);
  border-radius: 22px;
  background: #ffffff;
  box-shadow: 0 16px 44px rgba(16,6,159,.09);
}

.nrd-book-card__cover {
  display: grid;
  place-items: center;
  padding: 14px;
  background:
    radial-gradient(circle at 80% 10%, rgba(254,80,0,.10), transparent 32%),
    #f7f7ff;
}

.nrd-book-card__cover img {
  width: 100%;
  max-width: 220px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  border-radius: 12px;
  box-shadow: 0 14px 32px rgba(0,0,0,.16);
  background: #ffffff;
}

.nrd-book-card__body {
  padding: 15px 16px 18px;
}

.nrd-book-card h3 {
  font-size: 1rem;
  line-height: 1.18;
}

.nrd-book-card p {
  margin: 0 0 6px;
  color: #536373;
  font-size: .88rem;
  line-height: 1.42;
}

.nrd-resources-section {
  padding-block: clamp(36px, 5vw, 70px) !important;
  background: #f7f7ff;
}

.nrd-resources-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 20px;
  align-items: center;
  padding: clamp(22px, 3vw, 36px);
}

.nrd-faq-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 22px);
}

.nrd-faq-card {
  padding: 22px;
}

.nrd-events-promo {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 18px;
  align-items: center;
  margin-bottom: clamp(18px, 3vw, 34px);
  padding: clamp(18px, 2.4vw, 28px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 96% 10%, rgba(254,80,0,.14), transparent 28%),
    #ffffff;
  border: 1px solid rgba(16,6,159,.12);
  box-shadow: 0 18px 54px rgba(16,6,159,.09);
}

.nrd-events-promo h2 {
  margin: 0 0 8px;
  color: #10069F;
  font-size: clamp(1.5rem, 2.6vw, 2.6rem);
  line-height: 1;
}

.nrd-events-promo p {
  margin: 0;
  color: #536373;
  line-height: 1.55;
}

body.dark-mode .national-reading-day-page,
body.dark-mode .nrd-showcase-section,
body.dark-mode .nrd-overview-section,
body.dark-mode .nrd-highlights-section,
body.dark-mode .nrd-faq-section {
  background: #07111f !important;
}

body.dark-mode .nrd-date-card,
body.dark-mode .nrd-intro-card,
body.dark-mode .nrd-resources-card,
body.dark-mode .nrd-faq-card,
body.dark-mode .nrd-highlight-card,
body.dark-mode .nrd-book-card,
body.dark-mode .nrd-timeline li,
body.dark-mode .nrd-events-promo {
  background: #101b2f !important;
  border-color: rgba(148,163,184,.26) !important;
}

body.dark-mode .nrd-programme-section,
body.dark-mode .nrd-resources-section,
body.dark-mode .nrd-book-card__cover {
  background: #07111f !important;
}

body.dark-mode .nrd-date-card h2,
body.dark-mode .nrd-intro-card h2,
body.dark-mode .nrd-programme-grid h2,
body.dark-mode .nrd-showcase-header h2,
body.dark-mode .nrd-resources-card h2,
body.dark-mode .nrd-highlight-card h3,
body.dark-mode .nrd-faq-card h3,
body.dark-mode .nrd-book-card h3,
body.dark-mode .nrd-events-promo h2 {
  color: #ffffff !important;
}

body.dark-mode .nrd-date-card p,
body.dark-mode .nrd-intro-card p,
body.dark-mode .nrd-programme-grid p,
body.dark-mode .nrd-showcase-header p,
body.dark-mode .nrd-resources-card p,
body.dark-mode .nrd-highlight-card p,
body.dark-mode .nrd-faq-card p,
body.dark-mode .nrd-book-card p,
body.dark-mode .nrd-timeline span,
body.dark-mode .nrd-events-promo p {
  color: #dbe4ef !important;
}

@media (max-width: 1100px) {
  .nrd-highlight-grid,
  .nrd-book-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .nrd-hero__inner,
  .nrd-overview-grid,
  .nrd-programme-grid,
  .nrd-showcase-header,
  .nrd-resources-card {
    grid-template-columns: 1fr;
  }
  .nrd-hero .breadcrumbs,
  .nrd-resources-card .nrd-resource-actions {
    justify-self: start;
  }
}

@media (max-width: 680px) {
  .nrd-hero {
    padding-block: 42px !important;
  }
  .nrd-hero__copy h1 {
    font-size: clamp(2.05rem, 13vw, 3.7rem);
  }
  .nrd-cover-collage {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 7px;
    transform: none;
  }
  .nrd-cover-collage img:nth-child(2),
  .nrd-cover-collage img:nth-child(3) {
    transform: none;
  }
  .nrd-highlight-grid,
  .nrd-book-grid,
  .nrd-faq-grid {
    grid-template-columns: 1fr;
  }
  .nrd-book-card {
    display: grid;
    grid-template-columns: 112px 1fr;
  }
  .nrd-book-card__cover {
    padding: 9px;
  }
  .nrd-book-card__cover img {
    max-width: 96px;
  }
  .nrd-events-promo {
    grid-template-columns: 1fr;
  }
}


/* Timed National Reading Day expiry notice */
.nrd-expired-notice {
  min-height: 58vh;
  display: grid;
  align-items: center;
  padding: clamp(48px, 8vw, 96px) 0;
  background:
    radial-gradient(circle at 90% 15%, rgba(254,80,0,.14), transparent 28%),
    linear-gradient(135deg, #ffffff, #f7f7ff);
}

.nrd-expired-notice[hidden] {
  display: none !important;
}

.nrd-expired-notice article {
  max-width: 780px;
  padding: clamp(24px, 4vw, 42px);
  border-radius: 28px;
  border: 1px solid rgba(16,6,159,.14);
  background: #ffffff;
  box-shadow: 0 26px 80px rgba(16,6,159,.10);
}

.nrd-expired-notice h1 {
  margin: 0 0 12px;
  color: #10069F;
  font-size: clamp(2rem, 5vw, 4rem);
  line-height: .98;
  letter-spacing: -.045em;
}

.nrd-expired-notice p:not(.kicker) {
  color: #536373;
  line-height: 1.65;
}


/* =========================================================
   National Reading Day hero coverflow slideshow
   Matches the wide catalogue-style book carousel reference
   ========================================================= */
.nrd-hero__visual--coverflow {
  grid-column: 1 / -1;
  width: 100%;
  min-width: 0;
  margin-top: clamp(18px, 3vw, 30px);
}

.nrd-coverflow {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  background: linear-gradient(180deg, #ffffff 0%, #fbfbff 100%);
  padding: clamp(24px, 3vw, 38px) clamp(16px, 2vw, 28px) clamp(18px, 2.4vw, 30px);
  box-shadow: 0 28px 84px rgba(0,0,0,.20);
  border: 1px solid rgba(255,255,255,.84);
}

.nrd-coverflow__title {
  margin: 0 0 clamp(12px, 2vw, 22px);
  color: #a00062;
  font-size: clamp(1.5rem, 3.1vw, 2.45rem);
  font-weight: 900;
  font-style: italic;
  line-height: 1.1;
  letter-spacing: .03em;
  text-align: center;
}

.nrd-coverflow__stage {
  position: relative;
  min-height: clamp(295px, 34vw, 430px);
  display: grid;
  align-items: center;
  overflow: hidden;
}

.nrd-coverflow__track {
  position: relative;
  height: clamp(250px, 31vw, 370px);
  overflow: visible;
  perspective: 1200px;
  transform-style: preserve-3d;
}

.nrd-coverflow-slide {
  position: absolute;
  left: 50%;
  top: 46%;
  width: clamp(92px, 12vw, 178px);
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transform: translate(-50%, -50%) scale(.55);
  transition:
    transform .72s cubic-bezier(.22,.61,.36,1),
    opacity .72s ease,
    visibility .72s ease,
    filter .72s ease;
  transform-style: preserve-3d;
  z-index: 1;
  pointer-events: none;
  filter: saturate(.84) brightness(.86);
}

.nrd-coverflow-slide[data-position="0"],
.nrd-coverflow-slide[data-position="-1"],
.nrd-coverflow-slide[data-position="1"],
.nrd-coverflow-slide[data-position="-2"],
.nrd-coverflow-slide[data-position="2"],
.nrd-coverflow-slide[data-position="-3"],
.nrd-coverflow-slide[data-position="3"],
.nrd-coverflow-slide[data-position="-4"],
.nrd-coverflow-slide[data-position="4"],
.nrd-coverflow-slide[data-position="-5"],
.nrd-coverflow-slide[data-position="5"] {
  opacity: 1;
  visibility: visible;
}

.nrd-coverflow-slide[data-position="0"] {
  transform: translate(-50%, -50%) translateX(0) scale(1.24) rotateY(0deg);
  z-index: 12;
  filter: saturate(1) brightness(1);
}
.nrd-coverflow-slide[data-position="-1"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * clamp(126px, 13vw, 176px))) scale(1.02) rotateY(20deg);
  z-index: 11;
}
.nrd-coverflow-slide[data-position="1"] {
  transform: translate(-50%, -50%) translateX(clamp(126px, 13vw, 176px)) scale(1.02) rotateY(-20deg);
  z-index: 11;
}
.nrd-coverflow-slide[data-position="-2"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * clamp(220px, 23vw, 310px))) scale(.82) rotateY(32deg);
  z-index: 10;
  opacity: .88;
}
.nrd-coverflow-slide[data-position="2"] {
  transform: translate(-50%, -50%) translateX(clamp(220px, 23vw, 310px)) scale(.82) rotateY(-32deg);
  z-index: 10;
  opacity: .88;
}
.nrd-coverflow-slide[data-position="-3"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * clamp(300px, 32vw, 430px))) scale(.66) rotateY(42deg);
  z-index: 9;
  opacity: .72;
}
.nrd-coverflow-slide[data-position="3"] {
  transform: translate(-50%, -50%) translateX(clamp(300px, 32vw, 430px)) scale(.66) rotateY(-42deg);
  z-index: 9;
  opacity: .72;
}
.nrd-coverflow-slide[data-position="-4"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * clamp(360px, 40vw, 535px))) scale(.52) rotateY(50deg);
  z-index: 8;
  opacity: .54;
}
.nrd-coverflow-slide[data-position="4"] {
  transform: translate(-50%, -50%) translateX(clamp(360px, 40vw, 535px)) scale(.52) rotateY(-50deg);
  z-index: 8;
  opacity: .54;
}
.nrd-coverflow-slide[data-position="-5"] {
  transform: translate(-50%, -50%) translateX(calc(-1 * clamp(410px, 48vw, 625px))) scale(.42) rotateY(56deg);
  z-index: 7;
  opacity: .38;
}
.nrd-coverflow-slide[data-position="5"] {
  transform: translate(-50%, -50%) translateX(clamp(410px, 48vw, 625px)) scale(.42) rotateY(-56deg);
  z-index: 7;
  opacity: .38;
}

.nrd-coverflow-slide[data-position="hidden"] {
  opacity: 0;
  visibility: hidden;
}

.nrd-coverflow-slide img {
  display: block;
  width: 100%;
  aspect-ratio: 3 / 4.05;
  object-fit: cover;
  border-radius: 4px;
  background: #ffffff;
  box-shadow: 0 20px 42px rgba(0,0,0,.34);
  -webkit-box-reflect: below 7px linear-gradient(transparent 56%, rgba(255,255,255,.36));
}

.nrd-coverflow-slide figcaption {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.nrd-coverflow__caption {
  min-height: 1.5em;
  margin: clamp(4px, 1vw, 10px) auto 0;
  max-width: 680px;
  color: #10069F;
  font-weight: 900;
  text-align: center;
  line-height: 1.35;
}

.nrd-coverflow__arrow {
  position: absolute;
  top: 50%;
  z-index: 30;
  display: grid;
  place-items: center;
  width: clamp(46px, 5vw, 58px);
  height: clamp(46px, 5vw, 58px);
  border: 0;
  border-radius: 999px;
  background: #3c238b;
  color: #ffffff;
  font-size: clamp(2rem, 4vw, 3.1rem);
  font-weight: 900;
  line-height: 1;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 16px 34px rgba(60,35,139,.30);
}

.nrd-coverflow__arrow:hover,
.nrd-coverflow__arrow:focus-visible {
  background: #FE5000;
  outline: 4px solid rgba(16,6,159,.22);
  outline-offset: 4px;
}

.nrd-coverflow__arrow--prev { left: clamp(8px, 2vw, 22px); }
.nrd-coverflow__arrow--next { right: clamp(8px, 2vw, 22px); }

body.dark-mode .nrd-coverflow {
  background: linear-gradient(180deg, #ffffff 0%, #f7f7ff 100%) !important;
}

@media (max-width: 760px) {
  .nrd-coverflow {
    padding-inline: 10px;
    border-radius: 22px;
  }
  .nrd-coverflow__stage {
    min-height: 310px;
  }
  .nrd-coverflow__track {
    height: 250px;
  }
  .nrd-coverflow-slide {
    width: clamp(82px, 29vw, 122px);
  }
  .nrd-coverflow-slide[data-position="0"] {
    transform: translate(-50%, -50%) translateX(0) scale(1.18) rotateY(0deg);
  }
  .nrd-coverflow-slide[data-position="-1"] {
    transform: translate(-50%, -50%) translateX(-86px) scale(.86) rotateY(20deg);
  }
  .nrd-coverflow-slide[data-position="1"] {
    transform: translate(-50%, -50%) translateX(86px) scale(.86) rotateY(-20deg);
  }
  .nrd-coverflow-slide[data-position="-2"] {
    transform: translate(-50%, -50%) translateX(-146px) scale(.64) rotateY(34deg);
    opacity: .70;
  }
  .nrd-coverflow-slide[data-position="2"] {
    transform: translate(-50%, -50%) translateX(146px) scale(.64) rotateY(-34deg);
    opacity: .70;
  }
  .nrd-coverflow-slide[data-position="-3"],
  .nrd-coverflow-slide[data-position="3"],
  .nrd-coverflow-slide[data-position="-4"],
  .nrd-coverflow-slide[data-position="4"],
  .nrd-coverflow-slide[data-position="-5"],
  .nrd-coverflow-slide[data-position="5"] {
    opacity: 0;
    visibility: hidden;
  }
  .nrd-coverflow__caption {
    font-size: .9rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .nrd-coverflow-slide {
    transition: none;
  }
}

/* National Reading Day header layout tuned for coverflow reference */
.national-reading-day-page .nrd-hero__copy {
  grid-column: 1 / -1;
  justify-self: center;
  max-width: 980px;
  text-align: center;
}

.national-reading-day-page .nrd-hero__copy p:not(.kicker) {
  margin-inline: auto;
}

.national-reading-day-page .nrd-hero__actions {
  justify-content: center;
}

/* =========================================================
   National Reading Day desktop coverflow stability fix
   Keeps mobile carousel behavior, fixes desktop positioning
   ========================================================= */
@media (min-width: 761px) {
  .nrd-coverflow {
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: clamp(34px, 5vw, 72px);
  }

  .nrd-coverflow__stage {
    min-height: clamp(360px, 34vw, 455px);
    overflow: hidden;
  }

  .nrd-coverflow__track {
    height: clamp(310px, 31vw, 395px);
    overflow: visible;
    perspective: 1200px;
    transform-style: preserve-3d;
  }

  .nrd-coverflow-slide {
    top: 45%;
    width: clamp(104px, 11vw, 172px);
    will-change: transform, opacity;
    backface-visibility: hidden;
  }

  .nrd-coverflow-slide[data-position="0"] {
    transform: translate(-50%, -50%) translateX(0) scale(1.28) rotateY(0deg) !important;
    z-index: 15;
    opacity: 1;
    visibility: visible;
    filter: saturate(1) brightness(1);
  }

  .nrd-coverflow-slide[data-position="-1"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * clamp(130px, 13vw, 180px))) scale(1.04) rotateY(18deg) !important;
    z-index: 14;
    opacity: .96;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="1"] {
    transform: translate(-50%, -50%) translateX(clamp(130px, 13vw, 180px)) scale(1.04) rotateY(-18deg) !important;
    z-index: 14;
    opacity: .96;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="-2"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * clamp(230px, 23vw, 315px))) scale(.84) rotateY(30deg) !important;
    z-index: 13;
    opacity: .86;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="2"] {
    transform: translate(-50%, -50%) translateX(clamp(230px, 23vw, 315px)) scale(.84) rotateY(-30deg) !important;
    z-index: 13;
    opacity: .86;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="-3"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * clamp(320px, 32vw, 430px))) scale(.68) rotateY(38deg) !important;
    z-index: 12;
    opacity: .72;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="3"] {
    transform: translate(-50%, -50%) translateX(clamp(320px, 32vw, 430px)) scale(.68) rotateY(-38deg) !important;
    z-index: 12;
    opacity: .72;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="-4"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * clamp(400px, 41vw, 540px))) scale(.54) rotateY(46deg) !important;
    z-index: 11;
    opacity: .54;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="4"] {
    transform: translate(-50%, -50%) translateX(clamp(400px, 41vw, 540px)) scale(.54) rotateY(-46deg) !important;
    z-index: 11;
    opacity: .54;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="-5"] {
    transform: translate(-50%, -50%) translateX(calc(-1 * clamp(470px, 49vw, 635px))) scale(.43) rotateY(52deg) !important;
    z-index: 10;
    opacity: .38;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="5"] {
    transform: translate(-50%, -50%) translateX(clamp(470px, 49vw, 635px)) scale(.43) rotateY(-52deg) !important;
    z-index: 10;
    opacity: .38;
    visibility: visible;
  }

  .nrd-coverflow-slide[data-position="hidden"] {
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translate(-50%, -50%) scale(.30) !important;
  }

  .nrd-coverflow-slide img {
    aspect-ratio: 3 / 4.05;
    object-fit: cover;
  }
}

.author-spotlight-hero {
  background: linear-gradient(135deg, #10069F, #3226c7);
}

.author-spotlight-hero h1,
.author-spotlight-hero p,
.author-spotlight-hero .breadcrumbs,
.author-spotlight-hero .breadcrumbs a {
  color: #fff;
}

.author-spotlight-layout {
  display: grid;
  grid-template-columns: minmax(280px, .78fr) minmax(0, 1.22fr);
  gap: clamp(24px, 4vw, 52px);
  align-items: start;
}

.author-spotlight-photo {
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(7, 17, 31, .16);
}

.author-spotlight-photo img {
  width: 100%;
  display: block;
  object-fit: cover;
}

.author-spotlight-article {
  background: #fff;
  border: 1px solid rgba(16, 6, 159, .10);
  border-radius: 20px;
  padding: clamp(24px, 4vw, 44px);
  box-shadow: 0 20px 50px rgba(16, 6, 159, .10);
}

.author-spotlight-article h2 {
  color: #10069F;
  font-size: clamp(1.9rem, 3vw, 2.7rem);
  margin-bottom: 16px;
}

.author-spotlight-article p {
  color: #40546b;
  font-size: 1.04rem;
  line-height: 1.75;
}

@media (max-width: 860px) {
  .author-spotlight-layout {
    grid-template-columns: 1fr;
  }
}

/* Keep gallery close controls visible above every photo and modal panel. */
.event-gallery-modal > .event-gallery-modal__close,
.event-image-lightbox > .event-image-lightbox__close {
  appearance: none !important;
  position: fixed !important;
  top: 16px !important;
  right: 16px !important;
  top: max(16px, env(safe-area-inset-top)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  z-index: 100000 !important;
  display: block !important;
  width: 52px !important;
  height: 52px !important;
  min-width: 52px !important;
  min-height: 52px !important;
  padding: 0 !important;
  overflow: visible !important;
  border: 3px solid #ffffff !important;
  border-radius: 50% !important;
  background: #FE5000 !important;
  color: transparent !important;
  font-size: 0 !important;
  line-height: 0 !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: none !important;
  box-shadow: 0 8px 28px rgba(0, 0, 0, .48) !important;
  isolation: isolate;
  forced-color-adjust: none;
}

.event-gallery-modal > .event-gallery-modal__close::before,
.event-gallery-modal > .event-gallery-modal__close::after,
.event-image-lightbox > .event-image-lightbox__close::before,
.event-image-lightbox > .event-image-lightbox__close::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 24px;
  height: 4px;
  border-radius: 999px;
  background: #ffffff;
  transform-origin: center;
}

.event-gallery-modal > .event-gallery-modal__close::before,
.event-image-lightbox > .event-image-lightbox__close::before {
  transform: translate(-50%, -50%) rotate(45deg);
}

.event-gallery-modal > .event-gallery-modal__close::after,
.event-image-lightbox > .event-image-lightbox__close::after {
  transform: translate(-50%, -50%) rotate(-45deg);
}

.event-gallery-modal > .event-gallery-modal__close:hover,
.event-gallery-modal > .event-gallery-modal__close:focus-visible,
.event-image-lightbox > .event-image-lightbox__close:hover,
.event-image-lightbox > .event-image-lightbox__close:focus-visible {
  background: #d94400 !important;
  outline: 4px solid rgba(255, 255, 255, .58) !important;
  transform: scale(1.06) !important;
}

@media (max-width: 640px) {
  .event-gallery-modal > .event-gallery-modal__close,
  .event-image-lightbox > .event-image-lightbox__close {
    top: 12px !important;
    right: 12px !important;
    top: max(12px, env(safe-area-inset-top)) !important;
    right: max(12px, env(safe-area-inset-right)) !important;
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    min-height: 48px !important;
  }
}