/*
Theme Name: Tourism Uganda
Text Domain: tourism-uganda
Description: Official theme for Uganda's tourism portal — ochre/forest/cream design system V3.
Version: 3.0.0
*/

/* ================================================================
   CSS CUSTOM PROPERTIES (→ WP theme.json)
================================================================ */
:root {
  /* Brand */
  --ochre:        #C8871A;
  --ochre-light:  #E5A83C;
  --ochre-pale:   rgba(200,135,26,0.12);
  --forest:       #1A3C28;
  --forest-mid:   #2D5E3E;
  --forest-light: #4A7357; /* lighter sage-green for the quick-services strip (Session 25) */
  --forest-dark:  #0F2018;
  --savanna:      #F5EDD8;
  --savanna-light:#F9F3E1; /* slightly lighter shade of savanna (Who We Are strip) */
  --earth:        #8B5E3C;
  --sky:          #1B3A5C;
  /* Warm espresso/cocoa/savanna family (Session 27 — warm top-bar identity) */
  --espresso:        #3D2E1E;   /* deep warm brown (quick-services text / nav accents) */
  --espresso-dark:   #2B2115;   /* darkest warm brown (utility bar) */
  --caramel:         #8A5E0E;   /* ochre-tinted warm brown (gov header gradient end) */
  --espresso-pale:   rgba(61,46,30,0.08);
  --cream:        #FDFAF4;
  --text-dark:    #0F1E14;
  --text-mid:     #3D4F43;
  --text-light:   #6B7C71;
  --white:        #FFFFFF;
  --border:       rgba(0,0,0,0.08);

  /* Shadows */
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.14);

  /* Transitions */
  --ease:        all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--ease); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }

h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.15; }

/* Skip link (accessibility) */
.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--forest); color: #fff; padding: 8px 16px;
  border-radius: 0 0 8px 0; font-size: 0.85rem;
}
.skip-link:focus { top: 0; }

/* ================================================================
   DEV NOTICE BAR  (above utility bar — under development notice)
================================================================ */
.dev-notice-bar { display: none; }
.dev-notice-icon { display: none; }

/* ================================================================
   UTILITY BAR  (WP: Options Page → Site-wide top bar)
================================================================ */
.utility-bar {
  background: var(--forest-dark);
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.utility-bar a { color: rgba(255,255,255,0.65); }
.utility-bar a:hover { color: var(--ochre-light); }
.utility-left { display: flex; align-items: center; gap: 0.6rem; }
.utility-flag { display: inline-block; vertical-align: middle; border-radius: 1px; }
.utility-left .flag { font-size: 0.9rem; }
.utility-left .divider { opacity: 0.3; }
.utility-right { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ================================================================
   GOVERNMENT HEADER  (WP: Theme Header Part)
================================================================ */
.gov-header {
  background: var(--forest);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo-block {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  text-decoration: none;
}
.logo-coat {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.logo-coat .logo-coat-img { width: 100%; height: 100%; object-fit: contain; }
.logo-coat .custom-logo-link { display: flex; align-items: center; justify-content: center; }
.logo-coat .custom-logo { max-width: 100%; height: auto; }
.logo-text .ministry {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
}
.logo-text .tagline {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.62rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ochre-light);
  font-weight: 700;
  margin-top: 2px;
}
.gov-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.header-search {
  display: flex;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px;
  overflow: hidden;
}
.header-search input {
  background: none; border: none; outline: none;
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; padding: 0.5rem 1rem; width: 200px;
}
.header-search input::placeholder { color: rgba(255,255,255,0.45); }
.header-search button {
  background: var(--ochre); color: #fff;
  padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600;
  transition: var(--ease);
}
.header-search button:hover { background: var(--ochre-light); }
.lang-select {
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.15);
  border-radius: 8px; color: rgba(255,255,255,0.8);
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  padding: 0.45rem 0.8rem; outline: none; cursor: pointer;
}

/* ================================================================
   MAIN NAVIGATION  (WP: Theme Navigation Part / Walker)
================================================================ */
.main-nav {
  background: var(--cream);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 500;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.nav-inner {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 0;
}
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 1.1rem 1rem;
  font-size: 0.82rem; font-weight: 600;
  color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 3px solid transparent;
  transition: var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li.active > a {
  color: var(--forest);
  border-bottom-color: var(--ochre);
  background: var(--ochre-pale);
}
.nav-links > li > a .arrow { font-size: 0.6rem; opacity: 0.5; transition: var(--ease); }
.nav-links > li:hover > a .arrow { opacity: 1; transform: rotate(180deg); }

/* Dropdown */
.dropdown {
  position: absolute;
  top: calc(100% + 2px);
  left: 0;
  background: #fff;
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--border);
  min-width: 200px;
  padding: 0.6rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s ease;
  z-index: 200;
}
.nav-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block;
  padding: 0.55rem 1.2rem;
  font-size: 0.82rem; color: var(--text-mid); font-weight: 500;
}
.dropdown a:hover { background: var(--savanna); color: var(--forest); padding-left: 1.5rem; }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: var(--ease);
}
.nav-btn-outline {
  border: 1.5px solid var(--forest);
  color: var(--forest);
}
.nav-btn-outline:hover { background: var(--forest); color: #fff; }
.nav-btn-primary {
  background: var(--ochre); color: #fff;
}
.nav-btn-primary:hover { background: var(--ochre-light); transform: translateY(-1px); }

/* Mobile hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.6rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
}
.hamburger span {
  display: block; width: 22px; height: 2px;
  background: var(--forest); border-radius: 2px;
  transition: var(--ease);
}
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Mobile nav drawer */
.mobile-nav {
  display: none;
  background: #fff;
  border-top: 2px solid var(--border);
  padding: 1rem 2rem 2rem;
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-nav.open { max-height: 1150px; display: block; }
.mobile-nav a {
  display: block; padding: 0.7rem 0;
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:hover { color: var(--espresso); padding-left: 8px; }

/* ================================================================
   HERO SLIDER  (WP: ACF Flexible Content → Hero Slides)
================================================================ */
/* HERO — featured stories slider (Museums-style, MTWA theme) */
.hero {
  position: relative;
  height: 70vh;
  min-height: 480px;
  max-height: 640px;
  overflow: hidden;
  background: var(--forest-dark);
}

/* Slides */
.hero-slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.9s ease-in-out;
  z-index: 0;
  overflow: hidden;
}
.hero-slide.active { opacity: 1; pointer-events: auto; z-index: 1; }

/* Image left ~65% — contained, not full-bleed, with subtle Ken Burns zoom */
.hero-slide__bg {
  position: absolute;
  top: 0; left: 0;
  width: 65%; height: 100%;
  background-size: cover;
  background-position: center;
  background-color: var(--forest-mid);
  transform: scale(1);
  transition: transform 8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.hero-slide.active .hero-slide__bg { transform: scale(1.035); }

/* Seamless gradient overlay — dark on the right side blending into image */
.hero-slide__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to right,
    rgba(10,25,15,0.15) 0%,
    rgba(10,25,15,0.35) 45%,
    rgba(10,25,15,0.75) 58%,
    rgba(10,25,15,0.92) 70%,
    rgba(10,25,15,0.97) 100%
  );
  transition: opacity 0.4s ease;
}

/* Fade gradient into page */
.hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--cream), transparent);
  z-index: 5; pointer-events: none;
}

/* Right-side story content — sits on the gradient blend */
.hero-slide__content {
  position: absolute;
  right: 0; top: 0; bottom: 0;
  width: 35%;
  z-index: 2;
  padding: 3rem 3rem 5rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  text-align: left;
  color: #fff;
}
.hero-slide__kicker {
  align-self: flex-start;
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(200,135,26,0.18);
  border: 1px solid rgba(200,135,26,0.5);
  color: var(--ochre-light);
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 700;
  padding: 0.35rem 0.85rem; border-radius: 100px;
  margin-bottom: 1rem;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  box-shadow: 0 2px 12px rgba(0,0,0,0.25);
}
.hero-slide__title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem, 2.2vw, 2.2rem);
  font-weight: 900; color: #fff; line-height: 1.25;
  margin-bottom: 0.8rem;
  text-shadow: 0 2px 14px rgba(0,0,0,0.4);
}
.hero-slide__desc {
  font-size: 0.9rem; line-height: 1.7;
  color: rgba(255,255,255,0.85);
  max-width: 100%; margin: 0 0 1.5rem 0;
  text-shadow: 0 1px 8px rgba(0,0,0,0.35);
}
.hero-slide__btn {
  align-self: center;
  margin-top: 2rem;
  display: inline-block;
  background: var(--ochre); color: #fff;
  padding: 0.65rem 1.4rem; border-radius: 8px;
  font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em;
  text-decoration: none; transition: var(--ease);
  box-shadow: 0 4px 16px rgba(0,0,0,0.3), 0 1px 3px rgba(0,0,0,0.2);
}
.hero-slide__btn:hover { background: var(--ochre-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,135,26,0.4), 0 2px 6px rgba(0,0,0,0.2); }

/* Prev / next arrows (revealed on hover) */
.hero-slide__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.3);
  background: rgba(15,32,24,0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: #fff; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all 0.3s ease;
  opacity: 0; padding: 0;
}
.hero:hover .hero-slide__arrow { opacity: 1; }
.hero-slide__arrow:hover { background: var(--ochre); border-color: var(--ochre); transform: translateY(-50%) scale(1.08); box-shadow: 0 4px 16px rgba(200,135,26,0.4); }
.hero-slide__arrow--prev { left: 1.25rem; }
.hero-slide__arrow--next { right: 1.25rem; }
@media (hover: none) { .hero-slide__arrow { opacity: 0.6; } }

/* Pill dots */
.hero-slide__dots {
  position: absolute;
  bottom: 1.6rem; left: 50%; transform: translateX(-50%);
  z-index: 6;
  display: flex; gap: 0.5rem; align-items: center;
}
.hero-slide__dot {
  width: 8px; height: 8px; border-radius: 4px;
  border: none; background: rgba(255,255,255,0.35);
  cursor: pointer; padding: 0; transition: all 0.35s ease;
}
.hero-slide__dot.active { width: 26px; background: var(--ochre); box-shadow: 0 0 10px rgba(200,135,26,0.4); }
.hero-slide__dot:hover { background: rgba(255,255,255,0.6); }

@media (max-width: 1024px) {
  .hero-slide__arrow { width: 38px; height: 38px; }
  .hero-slide__arrow--prev { left: 1rem; }
  .hero-slide__arrow--next { right: 1rem; }
  .hero-slide__content { padding: 2.5rem 2rem 4rem 1.5rem; }
  .hero-slide__title { font-size: clamp(1.2rem, 3vw, 1.8rem); }
  .hero::after { height: 80px; }
}
@media (max-width: 768px) {
  .hero { height: auto; min-height: 420px; max-height: 560px; }
  /* Stack: image on top, text below on a dark band */
  .hero-slide__bg { width: 100%; height: 55%; }
  .hero-slide__overlay {
    background: linear-gradient(
      to bottom,
      rgba(10,25,15,0.1) 0%,
      rgba(10,25,15,0.5) 70%,
      rgba(10,25,15,0.92) 100%
    );
  }
  .hero-slide__content {
    width: 100%;
    top: 55%; bottom: 0;
    padding: 1.5rem 1.25rem 3.5rem;
    justify-content: flex-end;
    text-align: left;
  }
  .hero-slide__title { font-size: 1.35rem; }
  .hero-slide__desc { font-size: 0.82rem; }
  .hero-slide__arrow { width: 34px; height: 34px; }
  .hero-slide__arrow--prev { left: 0.5rem; }
  .hero-slide__arrow--next { right: 0.5rem; }
  .hero-slide__dots { bottom: 1rem; }
  .hero-slide__dot.active { width: 22px; }
  .hero-slide__kicker { font-size: 0.6rem; }
  .hero::after { height: 60px; }
}

.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ochre); color: #fff;
  padding: 0.9rem 1.8rem;
  border-radius: 10px; font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.04em; transition: var(--ease);
}
.btn-primary:hover { background: var(--ochre-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,135,26,0.4); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 0.9rem 1.8rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px); font-weight: 600; font-size: 0.88rem;
  transition: var(--ease);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* ================================================================
   QUICK SERVICES BAR  (WP: Options Page → Quick Links)
================================================================ */
.quick-services {
  /* Darker shade of the savanna 'Impact at a Glance' band below (Session 27) —
     same warm-cream hue, lower lightness, so it reads as a dark→light wave. */
  background: linear-gradient(135deg, #D7CCAE 0%, #DED4B7 100%);
  padding: 1.1rem 2rem;
  display: flex; justify-content: center; flex-wrap: wrap; gap: 0.4rem;
  border-bottom: 1px solid rgba(200,135,26,0.25);
}
.qsvc {
  display: inline-flex; align-items: center; gap: 0.55rem;
  color: var(--espresso);
  font-size: 0.78rem; font-weight: 600;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  border: 1px solid rgba(61,46,30,0.22);
  letter-spacing: 0.03em;
  transition: var(--ease);
}
.qsvc .icon { font-size: 0.95rem; }
.qsvc:hover { background: #fff; color: var(--ochre); border-color: var(--ochre); transform: translateY(-1px); }
.qsvc--pearl {
  background: var(--ochre);
  color: #fff !important;
  border-color: var(--ochre);
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(200,135,26,0.3);
}
.qsvc--pearl:hover { background: var(--ochre-light); color: #fff !important; border-color: var(--ochre-light); }
.qsvc--pearl:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }

/* ================================================================
   STATISTICS SECTION  (from Template 2, restyled)
   (WP: ACF Block → Tourism Statistics)
================================================================ */
.statistics {
  /* Session 25 (final): background matches the Ministry Leadership section
     (var(--savanna)) — the top of the homepage had two green bands (quick-
     services bar + a green gradient here), then a navy attempt that clashed
     with the forest bar. Savanna is the design system's warm cream band and
     keeps the rhythm: forest bar -> savanna stats -> savanna about-strip.
     Prior backgrounds: green `linear-gradient(135deg, var(--forest-dark) 0%,
     var(--forest) 50%, #1B3A5C 100%)`; interim navy `linear-gradient(135deg,
     #16283E 0%, #1B3A5C 55%, #24466B 100%)`. */
  background: var(--savanna);
  padding: 5rem 2rem;
  position: relative;
  overflow: hidden;
}
.statistics::before {
  content: '';
  position: absolute; inset: 0;
  background-image: none; /* flat savanna, same as Leadership */
  background-size: 32px 32px;
}
.stats-inner {
  max-width: 1400px; margin: 0 auto;
  position: relative; z-index: 1;
}
.stats-header {
  text-align: center; margin-bottom: 3.5rem;
}
.stats-header .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.6rem;
}
.stats-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--forest); font-weight: 700;
}
.stats-header h2 em { font-style: italic; color: var(--ochre); }
.stats-header p {
  color: var(--text-light); margin-top: 0.6rem; font-size: 0.9rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
}
.stat-item {
  text-align: center;
  padding: 2.5rem 1rem;
  background: #fff; /* white cards on savanna — same as Leadership cards */
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.stat-item:hover {
  background: rgba(200,135,26,0.1);
  border-color: rgba(200,135,26,0.3);
  transform: translateY(-4px);
}
.stat-icon { font-size: 2rem; margin-bottom: 0.8rem; display: block; }
.stat-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2.4rem, 4vw, 3.4rem);
  font-weight: 900;
  color: var(--ochre);
  display: block; line-height: 1;
  margin-bottom: 0.4rem;
}
.stat-label {
  font-size: 0.75rem;
  color: var(--text-mid);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 600;
  line-height: 1.4;
}
.stat-sub {
  font-size: 0.68rem; color: var(--text-light);
  margin-top: 0.3rem; display: block;
}

/* ================================================================
   ABOUT STRIP  (WP: ACF Block → About Ministry)
================================================================ */
.about-strip {
  /* Who We Are strip — slightly lighter shade of savanna (Session 25) so it
     steps gently away from the Impact at a Glance savanna band above it. */
  background: var(--savanna-light);
  padding: 2rem;
}
.about-strip-inner {
  max-width: 1400px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: stretch;
}
.about-text-col {
  padding: 2.5rem 4rem 2.5rem 2rem;
  max-width: 700px;
}
.about-text-col .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
}
.about-text-col h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--forest); font-weight: 700; line-height: 1.2;
  margin-bottom: 1rem;
}
.about-text-col h2 em { font-style: italic; color: var(--ochre); }
.announce-bar {
  display: flex; align-items: center; gap: 0.8rem;
  background: rgba(200,135,26,0.1);
  border: 1px solid rgba(200,135,26,0.3);
  border-radius: 10px; padding: 0.8rem 1.1rem;
  margin: 1.2rem 0 1.5rem;
}
.announce-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ochre); flex-shrink: 0;
  animation: pulse 1.5s infinite;
}
.announce-bar p { font-size: 0.8rem; color: var(--text-dark); line-height: 1.5; }
.announce-bar p strong { color: var(--ochre); }
.announce-link {
  margin-left: auto; font-size: 0.75rem; color: var(--ochre);
  font-weight: 700; white-space: nowrap; flex-shrink: 0;
}
.announce-link:hover { color: var(--ochre-light); }
.about-text-col > p {
  font-size: 0.95rem; color: var(--text-mid); line-height: 1.8;
  margin-bottom: 0.9rem;
}
.about-actions { display: flex; gap: 0.8rem; margin-top: 1.5rem; flex-wrap: wrap; }
.btn-forest {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--forest); color: #fff;
  padding: 0.8rem 1.6rem; border-radius: 10px;
  font-weight: 700; font-size: 0.85rem; transition: var(--ease);
}
.btn-forest:hover { background: var(--forest-mid); transform: translateY(-2px); }
.btn-outline-forest {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--forest); color: var(--forest);
  padding: 0.8rem 1.6rem; border-radius: 10px;
  font-weight: 700; font-size: 0.85rem; transition: var(--ease);
}
.btn-outline-forest:hover { background: var(--forest); color: #fff; }

.about-image-col { position: relative; overflow: hidden; min-height: 100%; }
.about-image-col img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
}
.about-image-col::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(200,135,26,0.25), transparent 60%);
}
.about-badge {
  position: absolute; bottom: 2rem; left: 2rem; z-index: 2;
  background: var(--forest); color: #fff;
  padding: 1rem 1.4rem; border-radius: 14px;
  box-shadow: var(--shadow-md);
}
.about-badge .big { font-family: 'Playfair Display', serif; font-size: 2rem; color: var(--ochre-light); display: block; line-height: 1; }
.about-badge .small { font-size: 0.72rem; opacity: 0.75; line-height: 1.4; margin-top: 0.2rem; }

/* ================================================================
   DESTINATIONS BENTO  (WP: ACF Block → Destinations Grid)
================================================================ */
.destinations { background: var(--savanna); padding: 5rem 2rem; }
.section-header-flex {
  max-width: 1400px; margin: 0 auto 2.5rem;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.sh-left .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.4rem;
}
.sh-left h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--forest); font-weight: 700;
}
.sh-left h2 em { font-style: italic; color: var(--ochre); }
.view-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1.5px solid var(--forest); color: var(--forest);
  padding: 0.55rem 1.2rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  transition: var(--ease); white-space: nowrap;
}
.view-all:hover { background: var(--forest); color: #fff; }

.destinations-grid {
  max-width: 1400px; margin: 0 auto;
  display: grid;
  grid-template-columns: 1.65fr 1fr 1fr;
  grid-template-rows: 285px 285px;
  gap: 1rem;
}
.dest-card {
  position: relative; border-radius: 16px; overflow: hidden;
  cursor: pointer; display: block; text-decoration: none;
}
.dest-card:first-child { grid-row: 1 / 3; }
.dest-card img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
.dest-card:hover img { transform: scale(1.07); }
.dest-card::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,25,15,0.88) 0%, transparent 55%);
}
.dest-info { position: absolute; bottom: 1.4rem; left: 1.4rem; right: 1.4rem; z-index: 1; }
.dest-category {
  font-size: 0.63rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.3rem;
}
.dest-name {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: #fff; font-weight: 700;
}
.dest-card:first-child .dest-name { font-size: 1.85rem; }
.dest-desc { font-size: 0.76rem; color: rgba(255,255,255,0.72); margin-top: 0.3rem; line-height: 1.5; }
.dest-tag {
  display: inline-block; margin-top: 0.7rem;
  background: rgba(200,135,26,0.2); border: 1px solid var(--ochre);
  color: var(--ochre-light); font-size: 0.62rem; font-weight: 700;
  padding: 0.2rem 0.7rem; border-radius: 100px; letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ================================================================
   PILLARS / STRATEGIC PRIORITIES  (WP: ACF Block → Pillars)
================================================================ */
.pillars {
  /* ROLLBACK: background was var(--forest) (#1A3C28). Changed to dark beige. */
  background: linear-gradient(135deg, #4A3F33 0%, #5C4E40 100%);
  padding: 5rem 2rem;
}
.pillars-inner { max-width: 1400px; margin: 0 auto; }
.pillars-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 2.5rem;
}
.pillars-header .sh-left h2 { color: #FFF6E8; }
.pillars-header .sh-left .eyebrow { color: var(--ochre-light); }
.pillars-desc { color: rgba(255,246,232,0.6); max-width: 360px; font-size: 0.88rem; line-height: 1.7; }

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}
.pillar-card {
  background: rgba(255,246,232,0.06);
  border: 1px solid rgba(255,246,232,0.1);
  border-radius: 16px; padding: 2rem 1.4rem;
  transition: var(--ease); text-decoration: none; display: block;
}
.pillar-card:hover {
  background: rgba(200,135,26,0.14);
  border-color: var(--ochre);
  transform: translateY(-4px);
}
.pillar-icon {
  width: 54px; height: 54px;
  background: rgba(200,135,26,0.15); border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; margin-bottom: 1.2rem;
}
.pillar-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; color: #FFF6E8; font-weight: 700;
  margin-bottom: 0.6rem;
}
.pillar-card p { font-size: 0.8rem; color: rgba(255,246,232,0.55); line-height: 1.65; }
.pillar-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  color: var(--ochre-light); font-size: 0.76rem; font-weight: 700;
  margin-top: 1rem; letter-spacing: 0.04em;
}

/* ================================================================
   LEADERSHIP  (from Template 2, restyled)
   (WP: ACF Block → Leadership)
================================================================ */
.leadership {
  background: var(--savanna);
  padding: 5rem 2rem;
}
.leadership-inner { max-width: 1400px; margin: 0 auto; }
.section-header-center { text-align: center; margin-bottom: 3rem; }
.section-header-center .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
}
.section-header-center h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--forest); font-weight: 700;
}
.section-header-center h2 em { font-style: italic; color: var(--ochre); }
.section-header-center p {
  color: var(--text-light); margin-top: 0.6rem; font-size: 0.9rem; max-width: 560px; margin-inline: auto;
}

.leadership-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}
.leader-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--ease);
}
.leader-card:hover {
  transform: translateY(-6px); box-shadow: var(--shadow-lg);
}
.leader-photo {
  height: 320px;
  background-size: cover; background-position: center center;
  position: relative; overflow: hidden;
}
.leader-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,25,15,0.6) 0%, transparent 50%);
}
.leader-body {
  padding: 1.6rem 1.8rem;
  border-top: 3px solid var(--ochre);
}
.leader-body .role {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.3rem;
}
.leader-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: var(--forest); font-weight: 700;
  margin-bottom: 0.5rem;
}
.leader-body p { font-size: 0.8rem; color: var(--text-light); line-height: 1.6; }
.leader-read-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.8rem;
  color: var(--ochre); font-size: 0.78rem; font-weight: 700;
}
.leader-read-more:hover { color: var(--ochre-light); gap: 0.6rem; }

/* ================================================================
   NEWS & UPDATES  (WP: WP_Query → Latest Posts)
================================================================ */
.news { background: var(--savanna); padding: 5rem 2rem; }
.news-inner { max-width: 1400px; margin: 0 auto; }

.news-grid {
  display: grid;
  grid-template-columns: 2.55fr 1fr;
  grid-template-rows: auto auto;
  column-gap: 1.5rem;
  row-gap: 1.2rem;
  align-items: stretch;
}
.news-cols {
  grid-column: 1; grid-row: 1;
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  gap: 1.5rem;
  align-items: stretch;
  min-width: 0;
}
.news-cols > .news-card {
  display: flex; flex-direction: column;
}
.news-cols > .news-card .news-card-body {
  display: flex; flex-direction: column; flex: 1 1 auto;
}
.news-cols > .news-card .news-meta { margin-top: auto; }
.news-all-cta { grid-column: 1; grid-row: 2; justify-self: start; }
.news-social {
  grid-column: 2; grid-row: 1;
  align-self: stretch;
}
/* Social Media panel (right tile of the Latest section) */
.news-social {
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-sm);
  padding: 1.6rem 1.4rem 1.4rem;
  display: flex; flex-direction: column;
  min-width: 0;
}
.news-social-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.3rem; color: var(--forest); font-weight: 700;
  display: flex; align-items: center; gap: 0.6rem;
  border-bottom: 2px solid var(--savanna);
  padding-bottom: 0.9rem; margin-bottom: 0.5rem;
}
.news-social-title::before {
  content: ''; width: 10px; height: 26px; border-radius: 3px;
  background: var(--ochre); display: block; flex-shrink: 0;
}
.news-social-sub {
  font-size: 0.75rem; color: var(--text-light); line-height: 1.6;
  margin-bottom: 1.1rem;
}
.news-social-list { display: flex; flex-direction: column; gap: 0.6rem; }
.news-social-item {
  display: flex; align-items: center; gap: 0.8rem;
  padding: 0.65rem 0.7rem; border-radius: 12px;
  background: var(--cream); border: 1px solid rgba(26,60,40,0.08);
  text-decoration: none; color: var(--text-dark);
  transition: var(--ease); min-width: 0;
}
.news-social-item:hover {
  background: var(--savanna); transform: translateY(-2px); box-shadow: var(--shadow-sm);
}
.news-social-icon {
  width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: #fff; flex-shrink: 0;
}
.news-social-icon svg { width: 20px; height: 20px; fill: currentColor; display: block; }
.news-social-meta { min-width: 0; }
.news-social-name { font-size: 0.8rem; font-weight: 700; display: block; }
.news-social-handle { font-size: 0.68rem; color: var(--text-light); display: block; margin-top: 1px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ns-x  { background: #111827; }
.ns-ig { background: #E1306C; }
.ns-yt { background: #FF0000; }
.ns-tt { background: #010101; }
.ns-li { background: #0A66C2; }
/* Feature news card */
.news-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm);
  transition: var(--ease); text-decoration: none; display: block;
}
.news-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.news-card-img {
  width: 100%; height: 220px; object-fit: cover; background: #ddd;
  display: block;
}
.news-card:first-child .news-card-img { height: 280px; }
.news-card-body { padding: 1.4rem; }
.news-tag {
  font-size: 0.63rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
}
.news-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; color: var(--text-dark); line-height: 1.4;
  margin-bottom: 0.5rem; font-weight: 700;
}
.news-card:first-child h3 { font-size: 1.3rem; }
.news-card p { font-size: 0.8rem; color: var(--text-light); line-height: 1.65; }
.news-meta { font-size: 0.7rem; color: #aaa; margin-top: 0.8rem; }
.news-meta .read-time::before { content: '·'; margin: 0 0.4rem; }

/* News list (compact) */
.news-list { display: flex; flex-direction: column; gap: 0.9rem; }
.news-list-item {
  display: flex; gap: 1rem; background: #fff;
  border-radius: 12px; overflow: hidden;
  box-shadow: var(--shadow-sm); text-decoration: none;
  transition: var(--ease);
}
.news-list-item:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.news-list-thumb {
  width: 88px; height: 88px; object-fit: cover; flex-shrink: 0; background: #ddd;
}
.news-list-body { padding: 0.8rem 0.8rem 0.8rem 0; }
.news-list-body .tag {
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.25rem;
}
.news-list-body h4 {
  font-size: 0.82rem; color: var(--text-dark); font-weight: 600; line-height: 1.4;
}
.news-list-body .date { font-size: 0.65rem; color: #aaa; margin-top: 0.3rem; }

/* Coat-of-arms default featured image — center it, don't crop */
img.news-card-img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 2rem;
  box-sizing: border-box;
}
img.news-list-thumb[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 0.5rem;
  box-sizing: border-box;
}
img.card-img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 2rem;
  box-sizing: border-box;
  height: 240px;
}
.card.news-featured img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 1.5rem;
  box-sizing: border-box;
}
img.article-hero-img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 3rem;
  box-sizing: border-box;
}
img.sidebar-list-img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 0.3rem;
  box-sizing: border-box;
}
img.related-card-img[src*="coat-of-arms"] {
  object-fit: contain !important;
  background: var(--savanna-light, #f5ede0);
  padding: 1.5rem;
  box-sizing: border-box;
}

/* ================================================================
   PROJECTS  (WP: Custom Post Type → Projects)
================================================================ */
.projects {
  background: var(--white);
  padding: 5rem 2rem;
}
.projects-inner { max-width: 1400px; margin: 0 auto; }
.projects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.project-card {
  background: #fff; border-radius: 16px; padding: 2rem;
  border-left: 4px solid var(--ochre);
  box-shadow: var(--shadow-sm);
  transition: var(--ease); text-decoration: none; display: block;
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.project-num {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; color: var(--ochre); font-weight: 900; opacity: 0.35; line-height: 1;
}
.project-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; color: var(--forest); margin: 0.4rem 0 0.7rem; font-weight: 700;
}
.project-card p { font-size: 0.8rem; color: var(--text-light); line-height: 1.65; }
.project-status {
  display: inline-block; margin-top: 0.9rem;
  font-size: 0.65rem; background: rgba(26,60,40,0.08);
  color: var(--forest-mid); padding: 0.25rem 0.75rem;
  border-radius: 100px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase;
}
.project-status.active { background: rgba(46,160,80,0.1); color: #1a7a3a; }
.project-status.progress { background: rgba(200,135,26,0.1); color: var(--ochre); }
.project-status.planning { background: rgba(27,58,92,0.1); color: var(--sky); }

/* ================================================================
   PARTNER INSTITUTIONS  (WP: ACF Repeater → Institutions)
================================================================ */
.institutions { background: #fff; padding: 4.5rem 2rem; }
.institutions-inner { max-width: 1400px; margin: 0 auto; }
.inst-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-top: 2rem;
}
.inst-card {
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 2rem 1.4rem; text-align: center;
  transition: var(--ease); text-decoration: none; display: block;
}
.inst-card:hover {
  border-color: var(--ochre); background: var(--savanna);
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.inst-abbr {
  font-family: 'Playfair Display', serif;
  font-size: 2rem; font-weight: 900; color: var(--forest); margin-bottom: 0.6rem;
}
.inst-card h4 { font-size: 0.82rem; color: var(--text-mid); font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }
.inst-card p { font-size: 0.72rem; color: var(--text-light); line-height: 1.5; }

/* ================================================================
   EVENTS  (NEW — WP: Custom Post Type → Events)
================================================================ */
.events { background: var(--white); padding: 5rem 2rem; border-top: 1px solid rgba(0,0,0,0.06); }
.events-inner { max-width: 1400px; margin: 0 auto; }
.events-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-top: 2.5rem;
}
.event-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--ease);
  text-decoration: none; display: flex; flex-direction: column;
}
.event-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.event-card-top {
  background: var(--forest);
  display: flex; justify-content: space-between; align-items: center;
  padding: 1rem 1.4rem;
}
.event-date-badge {
  display: flex; flex-direction: column; align-items: center;
  background: var(--ochre); border-radius: 10px;
  padding: 0.5rem 0.9rem; min-width: 54px; text-align: center;
}
.event-date-badge .dd {
  font-family: 'Playfair Display', serif;
  font-size: 1.5rem; font-weight: 900; color: #fff; line-height: 1;
}
.event-date-badge .mon {
  font-size: 0.62rem; color: rgba(255,255,255,0.85); text-transform: uppercase;
  font-weight: 700; letter-spacing: 0.08em; margin-top: 1px;
}
.event-type {
  font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(255,255,255,0.6); font-weight: 700;
  background: rgba(255,255,255,0.1); padding: 0.3rem 0.7rem;
  border-radius: 100px;
}
.event-card-body { padding: 1.4rem; flex: 1; }
.event-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; color: var(--text-dark); font-weight: 700;
  line-height: 1.4; margin-bottom: 0.5rem;
}
.event-card p { font-size: 0.78rem; color: var(--text-light); line-height: 1.65; margin-bottom: 1rem; }
.event-location {
  display: flex; align-items: center; gap: 0.4rem;
  font-size: 0.72rem; color: var(--ochre); font-weight: 600;
}

/* ================================================================
   CTA BANNER  (WP: ACF Block → CTA Section)
================================================================ */
.cta-banner {
  background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%);
  padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '🦍';
  position: absolute; right: 12%; top: 50%;
  transform: translateY(-50%);
  font-size: 12rem; opacity: 0.05; pointer-events: none;
}
.cta-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
}
.cta-text .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.5rem; }
.cta-text h2 { font-size: clamp(2rem, 3.5vw, 3rem); color: #fff; font-weight: 700; line-height: 1.2; }
.cta-text h2 em { font-style: italic; color: var(--ochre-light); }
.cta-text p { color: rgba(255,255,255,0.65); margin-top: 0.8rem; max-width: 480px; line-height: 1.7; font-size: 0.92rem; }
.cta-buttons { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; min-width: 220px; }
.cta-buttons .btn-primary { justify-content: center; }
.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 0.9rem 1.8rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  font-weight: 600; font-size: 0.85rem; transition: var(--ease);
}
.btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* ================================================================
   NEWSLETTER STRIP  (NEW — WP: Widget / Plugin)
================================================================ */
.newsletter {
  background: #C8871A;
  padding: 3.5rem 2rem;
}
.newsletter-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.newsletter-text h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; color: #fff; font-weight: 700;
}
.newsletter-text p { color: rgba(255,255,255,0.8); margin-top: 0.3rem; font-size: 0.88rem; }
.newsletter-form {
  display: flex; gap: 0; flex: 1; max-width: 640px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; overflow: hidden;
}
.newsletter-form input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.88rem;
  padding: 0.9rem 1.2rem;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-form button {
  background: var(--forest); color: #fff; border: none; padding: 0.9rem 1.4rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: var(--ease); white-space: nowrap;
}
.newsletter-form button:hover { background: var(--forest-dark); }
.newsletter-note { font-size: 0.68rem; color: rgba(255,255,255,0.6); margin-top: 0.5rem; }

/* ================================================================
   PAGE CONTENT
================================================================ */
.page-hero { padding: 4rem 0 3rem; text-align: left; }
.page-hero .section-title { font-size: clamp(2rem, 4vw, 3rem); margin-bottom: 0; }
.page-content { padding: 2rem 0 5rem; }
.page-thumbnail { margin-bottom: 2.5rem; }
.page-body { font-size: 1rem; color: var(--color-text-mid); line-height: 1.8; }
.page-body h2 { font-family: var(--font-heading); font-size: 1.6rem; color: var(--color-primary); margin: 2.5rem 0 1rem; }
.page-body h3 { font-family: var(--font-heading); font-size: 1.25rem; color: var(--color-primary); margin: 2rem 0 0.8rem; }
.page-body p { margin-bottom: 1.2rem; }
.page-body ul, .page-body ol { margin: 0 0 1.2rem 1.5rem; color: var(--color-text-mid); }
.page-body li { margin-bottom: 0.5rem; }
.page-body blockquote { border-left: 4px solid var(--color-secondary); padding: 1rem 1.5rem; margin: 1.5rem 0; background: var(--color-background-alt); border-radius: 0 var(--radius-md) var(--radius-md) 0; font-style: italic; }
.page-body a { color: var(--color-secondary); font-weight: 600; }
.sidebar-card { background: var(--color-background-card); border: 1px solid var(--color-border); border-radius: 16px; padding: 1.8rem; box-shadow: 0 2px 16px rgba(0,0,0,0.06); }
.sidebar-card h3 { font-family: var(--font-heading); font-size: 1.1rem; color: var(--color-primary); margin-bottom: 1rem; font-weight: 700; }
.sidebar-links { list-style: none; padding: 0; margin: 0; }
.sidebar-links li { border-bottom: 1px solid var(--color-border); }
.sidebar-links li:last-child { border-bottom: none; }
.sidebar-links a { display: block; padding: 0.6rem 0; color: var(--color-text-mid); font-size: 0.85rem; font-weight: 500; text-decoration: none; transition: all 0.2s; }
.sidebar-links a:hover { color: var(--color-secondary); padding-left: 4px; text-decoration: none; }

/* ================================================================
   FOOTER  (WP: Theme Footer Part)
================================================================ */
footer {
  background: var(--text-dark);
  color: rgba(255,255,255,0.55);
  padding: 4.5rem 2rem 2rem;
}
.footer-grid {
  max-width: 1400px; margin: 0 auto 3rem;
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1fr;
  gap: 3rem;
}
.footer-brand .ministry { color: #fff; font-size: 1rem; }
.footer-brand p { font-size: 0.82rem; line-height: 1.75; margin-top: 1rem; color: rgba(255,255,255,0.5); }
.footer-brand .tagline { color: var(--ochre-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a {
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.07); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: var(--ease);
}
.footer-social a:hover { background: var(--ochre); color: #fff; }

.footer-col h5 {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: 1.2rem;
}
.footer-col a {
  display: block; color: rgba(255,255,255,0.5);
  font-size: 0.82rem; padding: 0.3rem 0; transition: var(--ease);
}
.footer-col a:hover { color: var(--ochre-light); padding-left: 4px; }

.footer-bottom {
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem;
  font-size: 0.72rem;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); }
.footer-bottom-links a:hover { color: var(--ochre-light); }

/* ================================================================
   SHARED UTILITIES
================================================================ */
.max-w { max-width: 1400px; margin: 0 auto; }

/* ================================================================
   KEYFRAME ANIMATIONS
================================================================ */
@keyframes fadeUp   { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeLeft { from { opacity: 0; transform: translateY(-50%) translateX(22px); } to { opacity: 1; transform: translateY(-50%) translateX(0); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200,135,26,0.2); }
  50%       { box-shadow: 0 0 0 8px rgba(200,135,26,0.08); }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
  .stats-grid      { grid-template-columns: repeat(3, 1fr); }
  .pillars-grid    { grid-template-columns: 1fr 1fr; }
  .footer-grid     { grid-template-columns: 1fr 1fr; }
  .destinations-grid { grid-template-columns: 1fr 1fr; grid-template-rows: auto; }
  .dest-card:first-child { grid-row: auto; }
  .content-sidebar { grid-template-columns: 260px 1fr; }
  .news-feature-img { width: 320px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px) {
  .hero-stats-float { display: none; }
  .about-strip-inner { grid-template-columns: 1fr; }
  .about-image-col  { min-height: 320px; }
  .leadership-grid  { grid-template-columns: 1fr 1fr; }
  .news-grid        { grid-template-columns: 1fr; }
  .news-cols        { grid-template-columns: 1fr; grid-column: 1; grid-row: auto; }
  .news-social      { grid-column: 1; grid-row: auto; }
  .news-all-cta     { grid-column: 1; grid-row: auto; }
  .news-list        { display: grid; grid-template-columns: 1fr 1fr; }
  .projects-grid    { grid-template-columns: 1fr 1fr; }
  .inst-grid        { grid-template-columns: 1fr 1fr; }
  .events-grid      { grid-template-columns: 1fr 1fr; }
  .cta-inner        { grid-template-columns: 1fr; }
  .header-search    { display: none; }
  .lang-select      { display: none; }
  .nav-links        { display: none; }
  .hamburger        { display: flex; }
  .about-text-col   { padding: 3.5rem 2rem; }
  .pillars-header   { flex-direction: column; align-items: flex-start; gap: 1rem; }
}
@media (max-width: 768px) {
  .utility-bar          { justify-content: center; font-size: 0.68rem; }
  .utility-right        { display: none; }
  .gov-header           { padding: 0.8rem 1.2rem; }
  .logo-text .ministry  { font-size: 0.88rem; }
  .hero-content         { left: 1.5rem; right: 1.5rem; bottom: 6rem; }
  .hero-indicators      { left: 1.5rem; }
  .quick-services       { padding: 0.9rem 1rem; gap: 0.3rem; }
  .qsvc                 { font-size: 0.72rem; padding: 0.5rem 0.8rem; }
  .stats-grid           { grid-template-columns: 1fr 1fr; }
  .section-header-flex  { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .destinations-grid    { grid-template-columns: 1fr; grid-template-rows: auto; }
  .leadership-grid      { grid-template-columns: 1fr; }
  .events-grid          { grid-template-columns: 1fr; }
  .projects-grid        { grid-template-columns: 1fr; }
  .inst-grid            { grid-template-columns: 1fr 1fr; }
  .newsletter-inner     { flex-direction: column; align-items: flex-start; }
  .newsletter-form      { width: 100%; max-width: 100%; }
  .footer-grid          { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom        { flex-direction: column; text-align: center; }
  .news-list            { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .stat-num { font-size: 2.2rem; }
  .stats-grid { grid-template-columns: 1fr; }
  .inst-grid { grid-template-columns: 1fr; }
}

/* Print styles */
@media print {
  .utility-bar, .main-nav, .hero-stats-float,
  .quick-services, .newsletter, .hamburger { display: none; }
}
/* ================================================================
   NEWS ARCHIVE & SINGLE TEMPLATES
=============================================================== */
.news-main {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.news-single-content {
  max-width: 1400px;
  margin: 0 auto;
  padding: 3rem 2rem 4rem;
}
.page-hero {
  /* Session 27: warm cream wave — darker caramel-cream at top, lightening to
     savanna cream at the bottom; bridges the cocoa gov-header into the page. */
  background: linear-gradient(180deg, #D8C9A5 0%, #E4D7BA 40%, #EEE5CF 75%, #F8F3E7 100%);
  padding: 0.9rem 0 48px;
  color: var(--espresso);
  position: relative;
  overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(61,46,30,0.05) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero .container { position: relative; z-index: 1; max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.page-hero .breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  margin-bottom: 2.5rem;
  opacity: 0.85;
  position: relative;
}
.page-hero .breadcrumb a { color: rgba(61,46,30,0.8); }
.page-hero .breadcrumb a:hover { color: var(--ochre); }
.page-hero .breadcrumb .sep { color: rgba(61,46,30,0.5); }
.page-hero .hero-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap; }
.page-hero h1 {
  font-size: 36px;
  font-weight: 800;
  margin-bottom: 8px;
  position: relative;
}
.page-hero p {
  font-size: 16px;
  opacity: 0.85;
  max-width: 540px;
  line-height: 1.6;
  position: relative;
}

.breadcrumb-bar {
  background: #fff;
  border-bottom: 1px solid var(--border);
  padding: 0.65rem 0;
}
.breadcrumb-bar .breadcrumb {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--text-light);
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 2rem;
}
.breadcrumb-bar .breadcrumb a { color: var(--forest); font-weight: 500; }
.breadcrumb-bar .breadcrumb a:hover { color: var(--ochre); }
.breadcrumb-bar .breadcrumb .sep { color: var(--text-light); opacity: 0.5; }

.content-sidebar {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 32px;
  align-items: start;
}
.sidebar { position: sticky; top: 20px; }
.sidebar-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  margin-bottom: 20px;
}
.sidebar-card-hdr {
  background: var(--forest);
  color: #fff;
  padding: 14px 18px;
  font-family: 'Playfair Display', serif;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}
.sidebar-card-hdr i { opacity: 0.7; }
.sidebar-card-body { padding: 16px 18px; }

/* CARDS (matching HTML prototype) */
.card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.card-img { width: 100%; height: 200px; object-fit: cover; }
.card-body { padding: 20px; }
.card-meta { font-size: 12px; color: var(--text-light); margin-bottom: 8px; display: flex; align-items: center; gap: 12px; }
.card-title { font-family: 'Playfair Display', serif; font-weight: 600; font-size: 16px; margin-bottom: 8px; color: var(--text-dark); }
.card-excerpt { font-size: 14px; color: var(--text-mid); line-height: 1.6; }
.card-footer { padding: 14px 20px; border-top: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; }

/* FORM INPUT */
.form-input {
  width: 100%;
  padding: 11px 14px;
  border: 1px solid var(--border);
  border-radius: 6px;
  font-family: 'DM Sans', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  background: #fff;
  transition: border-color 0.2s;
}
.form-input:focus { outline: none; border-color: var(--forest-mid); box-shadow: 0 0 0 3px rgba(45,94,62,0.12); }

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

.filter-tabs {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.filter-tab {
  padding: 0.45rem 1.1rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-mid);
  background: #fff;
  cursor: pointer;
  transition: var(--ease);
  font-family: 'DM Sans', sans-serif;
}
.filter-tab:hover { border-color: var(--ochre); color: var(--ochre); }
.filter-tab.active { background: var(--forest); color: #fff; border-color: var(--forest); }

.badge {
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 100px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.badge-ochre { background: rgba(200,135,26,0.12); color: var(--ochre); }
.badge-forest { background: rgba(26,60,40,0.1); color: var(--forest-mid); }
.badge-blue { background: rgba(27,58,92,0.1); color: var(--sky); }
.badge-red { background: rgba(220,38,38,0.08); color: #b91c1c; }
.badge-purple { background: rgba(109,40,217,0.08); color: #6d28d9; }
.badge-teal { background: rgba(15,118,110,0.08); color: #0f766e; }
.badge-gray { background: rgba(100,116,139,0.08); color: #64748b; }
.badge-orange { background: rgba(234,88,12,0.08); color: #c2410c; }

.search-bar {
  display: flex;
  align-items: center;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.2s;
}
.search-bar:focus-within { border-color: var(--forest-mid); }
.search-bar input {
  flex: 1;
  border: none;
  padding: 0.65rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem;
  color: var(--text-dark);
  background: transparent;
}
.search-bar input:focus { outline: none; }
.search-bar button {
  background: var(--forest);
  color: #fff;
  border: none;
  padding: 0.65rem 1rem;
  cursor: pointer;
  font-size: 0.85rem;
  transition: var(--ease);
}
.search-bar button:hover { background: var(--forest-mid); }

.tags-list { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.tag {
  display: inline-block;
  padding: 0.3rem 0.85rem;
  border: 1px solid var(--border);
  border-radius: 100px;
  font-size: 0.72rem;
  color: var(--text-mid);
  cursor: pointer;
  transition: var(--ease);
}
.tag:hover, .tag.active { background: var(--ochre-pale); border-color: var(--ochre); color: var(--ochre); }

.results-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 1.25rem;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.results-count { font-size: 0.82rem; color: var(--text-light); }
.results-count b { color: var(--text-dark); }
.sort-select {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.4rem 0.7rem;
  font-size: 0.78rem;
  color: var(--text-mid);
  font-family: 'DM Sans', sans-serif;
  background: #fff;
  cursor: pointer;
}

.news-feature-card {
  display: flex;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1.25rem;
  transition: var(--ease);
}
.news-feature-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }
.news-feature-card a { text-decoration: none; color: inherit; }
.news-feature-img { width: 420px; flex-shrink: 0; object-fit: cover; display: block; }
.news-feature-body {
  padding: 1.6rem 1.8rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.news-feature-body h2 {
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 0.65rem;
  line-height: 1.25;
}
.news-feature-body h2 a { color: inherit; }
.news-feature-body h2 a:hover { color: var(--ochre); }
.news-feature-body p {
  font-size: 0.85rem;
  color: var(--text-mid);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.news-meta-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
  font-size: 0.75rem;
  color: var(--text-light);
  flex-wrap: wrap;
}
.news-meta-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: auto; }
.news-author { display: flex; align-items: center; gap: 0.4rem; font-size: 0.78rem; color: var(--text-mid); }
.news-author img { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; }

.news-grid-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--ease);
}
.news-grid-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.news-grid-card a { text-decoration: none; color: inherit; }
.news-grid-card-img { width: 100%; height: 200px; object-fit: cover; }
.news-grid-card .badge-row { padding: 0 1.1rem; margin-top: -0.6rem; position: relative; z-index: 1; }
.news-grid-card-body { padding: 1rem 1.1rem 1.2rem; }
.news-grid-card-body .card-meta { font-size: 0.72rem; color: var(--text-light); margin-bottom: 0.4rem; }
.news-grid-card-body h3 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.35;
  margin-bottom: 0.4rem;
}
.news-grid-card-body h3 a { color: inherit; }
.news-grid-card-body h3 a:hover { color: var(--ochre); }
.news-grid-card-body p {
  font-size: 0.78rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.news-grid-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 1.1rem;
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  font-weight: 600;
}
.news-grid-card-footer a { color: var(--forest); }
.news-grid-card-footer a:hover { color: var(--ochre); }

.pagination-links {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  margin-top: 2.5rem;
}
.page-numbers {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: #fff;
  color: var(--text-mid);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: var(--ease);
}
a.page-numbers { text-decoration: none; }
.page-numbers:hover { border-color: var(--forest); color: var(--forest); }
.page-numbers.current { background: var(--forest); color: #fff; border-color: var(--forest); }
.page-numbers.dots { border: none; cursor: default; color: var(--text-light); }
.page-numbers.dots:hover { color: var(--text-light); }

.news-article-main { min-width: 0; max-width: 800px; margin: 0 auto; }
.news-article-cats { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 1.1rem; }
.news-article-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 800;
  color: var(--forest);
  line-height: 1.18;
  margin-bottom: 1rem;
}
.news-article-hero { margin: 0 0 1.5rem; }
.news-below-widgets {
  max-width: 1200px;
  margin: 3.5rem auto 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1.5rem;
  align-items: start;
}
.news-single-layout {
  display: grid;
  grid-template-columns: 280px minmax(0, 1fr) 280px;
  grid-template-areas: "left article right";
  gap: 32px;
  align-items: start;
}
.news-single-layout .news-article-main { grid-area: article; max-width: none; margin: 0; }
.news-rail { display: flex; flex-direction: column; gap: 1.5rem; }
.news-rail--left { grid-area: left; }
.news-rail--right { grid-area: right; position: sticky; top: 20px; }

@media (max-width: 1200px) {
  .news-single-layout {
    grid-template-columns: 1fr;
    grid-template-areas: "article" "left" "right";
  }
  .news-single-layout .news-article-main { max-width: 800px; }
  .news-rail--right { position: static; }
  .news-rail--left { flex-direction: row; flex-wrap: wrap; }
  .news-rail--left .sidebar-card { flex: 1 1 240px; }
}
.news-article-divider { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.news-share { margin-bottom: 1.5rem; }
.news-share-label { font-size: 0.82rem; font-weight: 600; color: var(--text-mid); margin-bottom: 0.6rem; }

.article-hero-img { width: 100%; height: 420px; object-fit: cover; border-radius: 14px; }
.article-hero-caption {
  font-size: 0.75rem;
  color: var(--text-light);
  margin: 0.4rem 0 1.5rem;
  font-style: italic;
}
.article-body { font-size: 0.95rem; line-height: 1.8; color: var(--text-mid); }
.article-body p { margin-bottom: 1.1rem; }
.article-body h2 { font-size: 1.5rem; font-weight: 700; color: var(--forest); margin: 2rem 0 0.8rem; }
.article-body h3 { font-size: 1.2rem; font-weight: 600; color: var(--forest-mid); margin: 1.5rem 0 0.6rem; }
.article-body blockquote {
  border-left: 4px solid var(--ochre);
  padding: 1rem 1.2rem;
  background: var(--savanna);
  border-radius: 0 8px 8px 0;
  margin: 1.5rem 0;
  font-style: italic;
  font-size: 1rem;
}
.article-body blockquote cite {
  font-size: 0.82rem;
  font-style: normal;
  font-weight: 700;
  color: var(--forest);
  display: block;
  margin-top: 0.5rem;
}

.share-bar {
  background: var(--savanna);
  border: 1px solid rgba(200,135,26,0.2);
  border-radius: 12px;
  padding: 1.2rem;
  margin-bottom: 2rem;
}
.share-bar-title { font-size: 0.85rem; font-weight: 700; color: var(--text-mid); margin-bottom: 0.8rem; }
.share-buttons { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.share-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.5rem 1rem;
  border-radius: 6px;
  font-size: 0.75rem;
  font-weight: 600;
  color: #fff;
  border: none;
  cursor: pointer;
  transition: var(--ease);
}
.share-btn:hover { opacity: 0.85; transform: translateY(-1px); }
.share-x { background: #000; }
.share-wa { background: #25d366; }
.share-li { background: #0a66c2; }
.share-copy { background: var(--text-light); }

.related-section {
  padding: 2.5rem 0;
  background: var(--savanna);
  border-top: 1px solid var(--border);
}
.related-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.related-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; margin-top: 1.5rem; }
.related-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  transition: var(--ease);
  text-decoration: none;
  display: block;
}
.related-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.related-card-img { width: 100%; height: 180px; object-fit: cover; }
.related-card-body { padding: 1rem; }
.related-card-body h4 { font-size: 0.9rem; font-weight: 700; color: var(--text-dark); line-height: 1.35; }

.sidebar-list-item {
  display: flex;
  gap: 0.8rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}
.sidebar-list-item:last-child { border-bottom: none; }
.sidebar-list-img { width: 50px; height: 50px; border-radius: 6px; object-fit: cover; flex-shrink: 0; }
.sidebar-list-date { font-size: 0.68rem; color: var(--text-light); margin-bottom: 0.2rem; }
.sidebar-list-title { font-size: 0.78rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; }
.sidebar-list-title a { color: inherit; text-decoration: none; }
.sidebar-list-title a:hover { color: var(--ochre); }

.article-meta {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.2rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.78rem;
  color: var(--text-light);
  flex-wrap: wrap;
}
.article-meta-author { display: flex; align-items: center; gap: 0.5rem; }
.article-meta-author img { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; }
.article-meta-author-name { font-weight: 600; color: var(--text-dark); }
.article-meta-author-org { font-size: 0.68rem; color: var(--text-light); }

.sidebar-subscribe-text { font-size: 0.78rem; color: var(--text-light); margin-bottom: 0.75rem; line-height: 1.5; }

@media (max-width: 992px) {
  .content-sidebar { grid-template-columns: 1fr; }
  .sidebar { position: static; }
  .card.news-featured { flex-direction: column !important; }
  .card.news-featured img { width: 100% !important; height: 280px; }
  .article-hero-img { height: 280px; }
  .related-grid { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .page-hero { padding: 2rem 1rem; }
  .card.news-featured img { height: 220px; }
  .article-hero-img { height: 220px; }
  .related-grid { grid-template-columns: 1fr; }
  .grid-3 { grid-template-columns: 1fr; }
  .filter-tabs { gap: 0.35rem; }
  .filter-tab { padding: 0.35rem 0.8rem; font-size: 0.7rem; }
  .news-main, .news-single-content { padding: 2rem 1rem 3rem; }
  .breadcrumb-bar .breadcrumb, .page-hero .container { padding: 0 1rem; }
}
@media (max-width: 480px) {
  .article-hero-img { height: 200px; }
  .news-feature-body h2 { font-size: 1.1rem; }
}


/* ================================================================
   ABOUT US PAGE — additional styles from mtwa-about-us.html
================================================================ */

/* ================================================================
   CSS CUSTOM PROPERTIES (→ WP theme.json)
================================================================ */
:root {
  /* Brand */
  --ochre:        #C8871A;
  --ochre-light:  #E5A83C;
  --ochre-pale:   rgba(200,135,26,0.12);
  --forest:       #1A3C28;
  --forest-mid:   #2D5E3E;
  --forest-light: #4A7357; /* lighter sage-green for the quick-services strip (Session 25) */
  --forest-dark:  #0F2018;
  --savanna:      #F5EDD8;
  --savanna-light:#F9F3E1; /* slightly lighter shade of savanna (Who We Are strip) */
  --earth:        #8B5E3C;
  --sky:          #1B3A5C;
  /* Warm espresso/cocoa/savanna family (Session 27 — warm top-bar identity) */
  --espresso:        #3D2E1E;   /* deep warm brown (quick-services text / nav accents) */
  --espresso-dark:   #2B2115;   /* darkest warm brown (utility bar) */
  --caramel:         #8A5E0E;   /* ochre-tinted warm brown (gov header gradient end) */
  --espresso-pale:   rgba(61,46,30,0.08);
  --cream:        #FDFAF4;
  --text-dark:    #0F1E14;
  --text-mid:     #3D4F43;
  --text-light:   #6B7C71;
  --white:        #FFFFFF;
  --border:       rgba(0,0,0,0.08);

  /* Shadows */
  --shadow-sm:   0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:   0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:   0 12px 48px rgba(0,0,0,0.14);

  /* Transitions */
  --ease:        all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}

/* ================================================================
   RESET & BASE
================================================================ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--ease); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.15; }

/* Skip link */
.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--forest); color: #fff; padding: 8px 16px;
  border-radius: 0 0 8px 0; font-size: 0.85rem;
}
.skip-link:focus { top: 0; }

/* ================================================================
   UTILITY BAR
================================================================ */
.utility-bar {
  background: var(--forest-dark);
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  padding: 0.45rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.utility-bar a { color: rgba(255,255,255,0.65); }
.utility-bar a:hover { color: var(--ochre-light); }
.utility-left { display: flex; align-items: center; gap: 0.6rem; }
.utility-left .flag { font-size: 0.9rem; }
.utility-left .divider { opacity: 0.3; }
.utility-right { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ================================================================
   GOVERNMENT HEADER
================================================================ */
.gov-header {
  background: var(--forest);
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.logo-block {
  display: flex; align-items: center; gap: 1.1rem; text-decoration: none;
}
.logo-coat {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.6rem; flex-shrink: 0;
}
.logo-text .ministry {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.logo-text .tagline {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-top: 2px;
}
.gov-header-right { display: flex; align-items: center; gap: 1rem; }
.header-search {
  display: flex; align-items: center;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; overflow: hidden;
}
.header-search input {
  background: none; border: none; outline: none;
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; padding: 0.5rem 1rem; width: 200px;
}
.header-search input::placeholder { color: rgba(255,255,255,0.45); }
.header-search button {
  background: var(--ochre); color: #fff;
  padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; transition: var(--ease);
}
.header-search button:hover { background: var(--ochre-light); }

/* ================================================================
   MAIN NAVIGATION
================================================================ */
.main-nav {
  background: var(--cream);
  border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 500;
  box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 0.25rem;
  padding: 1.1rem 1rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 3px solid transparent; transition: var(--ease);
}
.nav-links > li > a:hover,
.nav-links > li.active > a {
  color: var(--forest); border-bottom-color: var(--ochre); background: var(--ochre-pale);
}
.nav-links > li > a .arrow { font-size: 0.6rem; opacity: 0.5; transition: var(--ease); }
.nav-links > li:hover > a .arrow { opacity: 1; transform: rotate(180deg); }

.dropdown {
  position: absolute; top: calc(100% + 2px); left: 0;
  background: #fff; border-radius: 12px;
  box-shadow: var(--shadow-lg); border: 1px solid var(--border);
  min-width: 200px; padding: 0.6rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: all 0.2s ease; z-index: 200;
}
.nav-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a {
  display: block; padding: 0.55rem 1.2rem;
  font-size: 0.82rem; color: var(--text-mid); font-weight: 500;
}
.dropdown a:hover { background: var(--savanna); color: var(--forest); padding-left: 1.5rem; }

.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.55rem 1.2rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em; transition: var(--ease);
}
.nav-btn-outline { border: 1.5px solid var(--forest); color: var(--forest); }
.nav-btn-outline:hover { background: var(--forest); color: #fff; }
.nav-btn-primary { background: var(--ochre); color: #fff; }
.nav-btn-primary:hover { background: var(--ochre-light); transform: translateY(-1px); }

.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 0.6rem; border-radius: 8px; border: 1.5px solid var(--border);
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--forest); border-radius: 2px; transition: var(--ease); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

.mobile-nav {
  display: none; background: #fff; border-top: 2px solid var(--border);
  padding: 1rem 2rem 2rem; max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease;
}
.mobile-nav.open { max-height: 1150px; display: block; }
.mobile-nav a {
  display: block; padding: 0.7rem 0;
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  border-bottom: 1px solid var(--border);
}
.mobile-nav a:hover { color: var(--espresso); padding-left: 8px; }

/* ================================================================
   PAGE HERO
================================================================ */
.page-hero {
  /* Session 27: warm cream wave — darker caramel-cream at top, lightening to
     savanna cream at the bottom; bridges the cocoa gov-header into the page. */
  background: linear-gradient(180deg, #D8C9A5 0%, #E4D7BA 40%, #EEE5CF 75%, #F8F3E7 100%);
  padding: 0.9rem 2rem 5rem;
  position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(200,135,26,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero::after {
  content: '';
  position: absolute; bottom: 0; left: 0; right: 0;
  height: 120px;
  background: linear-gradient(to top, var(--cream), transparent);
  pointer-events: none;
}
.page-hero-inner {
  max-width: 1400px; margin: 0 auto;
  position: relative; z-index: 1;
  display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 3rem;
}

.breadcrumb {
  display: flex; align-items: center; gap: 0.5rem;
  margin-bottom: 1.2rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: var(--ochre-light); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--ochre-light); font-weight: 600; }

.hero-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.hero-eyebrow::before {
  content: ''; display: block; width: 28px; height: 2px; background: var(--ochre);
}
.page-hero h1 {
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 900; color: #fff; line-height: 1.1;
  margin-bottom: 1.1rem;
}
.page-hero h1 em { font-style: italic; color: var(--ochre-light); }
.page-hero-desc {
  font-size: 1rem; color: rgba(255,255,255,0.75);
  line-height: 1.75; max-width: 600px; margin-bottom: 2rem;
}
.hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; }
.btn-primary {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ochre); color: #fff;
  padding: 0.9rem 1.8rem; border-radius: 10px;
  font-weight: 700; font-size: 0.88rem;
  letter-spacing: 0.04em; transition: var(--ease);
}
.btn-primary:hover { background: var(--ochre-light); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(200,135,26,0.4); }
.btn-ghost {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 0.9rem 1.8rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.35);
  backdrop-filter: blur(10px); font-weight: 600; font-size: 0.88rem;
  transition: var(--ease);
}
.btn-ghost:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* Hero stat strip */
.hero-stat-strip {
  display: flex; flex-direction: column; gap: 0.7rem; flex-shrink: 0;
}
.hero-stat-pill {
  background: rgba(10,25,15,0.55);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 12px; padding: 0.9rem 1.4rem;
  display: flex; align-items: center; gap: 1rem; min-width: 220px;
}
.hero-stat-pill .num {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem; font-weight: 900; color: var(--ochre-light); line-height: 1;
}
.hero-stat-pill .lbl {
  font-size: 0.7rem; color: rgba(255,255,255,0.7);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; line-height: 1.4;
}

/* Page anchor nav */
.page-anchor-nav {
  background: var(--savanna);
  border-bottom: 2px solid rgba(0,0,0,0.06);
  padding: 0.5rem 2rem;
  display: flex; justify-content: center;
}
.page-anchor-nav ul {
  display: flex; gap: 0; list-style: none;
  max-width: 1400px; margin: 0 auto; flex-wrap: wrap;
}
.page-anchor-nav a {
  display: block; padding: 0.75rem 1.2rem;
  font-size: 0.78rem; font-weight: 600; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.05em;
  border-bottom: 2px solid transparent; transition: var(--ease);
}
.page-anchor-nav a:hover { color: var(--forest); border-bottom-color: var(--ochre); }

/* ================================================================
   MANDATE OVERVIEW (two-column split)
================================================================ */
.mandate {
  background: var(--cream);
  padding: 5.5rem 2rem;
}
.mandate-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr 1.05fr; gap: 5rem; align-items: center;
}
.mandate-image-col { position: relative; }
.mandate-image-wrap {
  border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-lg);
  position: relative;
}
.mandate-image-wrap img { width: 100%; height: 480px; object-fit: cover; display: block; }
.mandate-image-wrap::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, rgba(200,135,26,0.18), transparent 55%);
}
.mandate-badge {
  position: absolute; bottom: -1.5rem; right: -1.5rem;
  background: var(--forest); color: #fff;
  padding: 1.4rem 1.8rem; border-radius: 18px;
  box-shadow: var(--shadow-lg); text-align: center;
}
.mandate-badge .big {
  font-family: 'Playfair Display', serif;
  font-size: 2.4rem; color: var(--ochre-light); display: block; line-height: 1; font-weight: 900;
}
.mandate-badge .small { font-size: 0.72rem; opacity: 0.75; line-height: 1.5; margin-top: 0.3rem; }

.mandate-text-col .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.mandate-text-col .eyebrow::before {
  content: ''; display: block; width: 24px; height: 2px; background: var(--ochre);
}
.mandate-text-col h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem);
  color: var(--forest); font-weight: 700; line-height: 1.2; margin-bottom: 1.2rem;
}
.mandate-text-col h2 em { font-style: italic; color: var(--ochre); }
.mandate-text-col p {
  font-size: 0.95rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 1rem;
}
.mandate-legal {
  background: var(--savanna); border-radius: 14px;
  border-left: 4px solid var(--ochre);
  padding: 1.2rem 1.4rem; margin: 1.5rem 0;
}
.mandate-legal .label {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.4rem;
}
.mandate-legal p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.65; margin: 0; font-style: italic; }
.mandate-actions { display: flex; gap: 0.8rem; margin-top: 1.6rem; flex-wrap: wrap; }
.btn-forest {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--forest); color: #fff;
  padding: 0.8rem 1.6rem; border-radius: 10px;
  font-weight: 700; font-size: 0.85rem; transition: var(--ease);
}
.btn-forest:hover { background: var(--forest-mid); transform: translateY(-2px); }
.btn-outline-forest {
  display: inline-flex; align-items: center; gap: 0.5rem;
  border: 1.5px solid var(--forest); color: var(--forest);
  padding: 0.8rem 1.6rem; border-radius: 10px;
  font-weight: 700; font-size: 0.85rem; transition: var(--ease);
}
.btn-outline-forest:hover { background: var(--forest); color: #fff; }

/* ================================================================
   VISION / MISSION / VALUES
================================================================ */
.vmv {
  background: linear-gradient(135deg, var(--forest-dark) 0%, var(--forest) 55%, #1B3A5C 100%);
  padding: 5.5rem 2rem;
  position: relative; overflow: hidden;
}
.vmv::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(200,135,26,0.07) 1px, transparent 1px);
  background-size: 30px 30px;
}
.vmv-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.vmv-header {
  text-align: center; margin-bottom: 3.5rem;
}
.vmv-header .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.6rem;
}
.vmv-header h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem); color: #fff; font-weight: 700;
}
.vmv-header h2 em { font-style: italic; color: var(--ochre-light); }
.vmv-header p { color: rgba(255,255,255,0.6); margin-top: 0.6rem; font-size: 0.9rem; max-width: 520px; margin-inline: auto; }

.vmv-main-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-bottom: 1.5rem;
}
.vmv-card {
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 18px; padding: 2.5rem 2rem;
  transition: var(--ease);
}
.vmv-card:hover { background: rgba(200,135,26,0.12); border-color: rgba(200,135,26,0.3); }
.vmv-card .card-icon {
  width: 56px; height: 56px; border-radius: 14px;
  background: rgba(200,135,26,0.18); display: flex;
  align-items: center; justify-content: center; font-size: 1.6rem;
  margin-bottom: 1.3rem;
}
.vmv-card .card-type {
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.5rem;
}
.vmv-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: #fff; font-weight: 700; margin-bottom: 0.8rem;
}
.vmv-card p { font-size: 0.88rem; color: rgba(255,255,255,0.7); line-height: 1.75; }

/* Values grid (3-col) */
.values-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem;
}
.value-card {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px; padding: 1.6rem;
  transition: var(--ease);
}
.value-card:hover { background: rgba(200,135,26,0.1); border-color: rgba(200,135,26,0.25); transform: translateY(-3px); }
.value-card .val-icon { font-size: 1.5rem; margin-bottom: 0.8rem; display: block; }
.value-card h4 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem; color: #fff; font-weight: 700; margin-bottom: 0.4rem;
}
.value-card p { font-size: 0.78rem; color: rgba(255,255,255,0.55); line-height: 1.6; }

/* ================================================================
   MINISTRY STRUCTURE / DEPARTMENTS
================================================================ */
.structure {
  background: var(--savanna);
  padding: 5.5rem 2rem;
}
.structure-inner { max-width: 1400px; margin: 0 auto; }
.section-header-center { text-align: center; margin-bottom: 3rem; }
.section-header-center .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
}
.section-header-center h2 {
  font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--forest); font-weight: 700;
}
.section-header-center h2 em { font-style: italic; color: var(--ochre); }
.section-header-center p {
  color: var(--text-light); margin-top: 0.6rem; font-size: 0.9rem;
  max-width: 560px; margin-inline: auto;
}

/* Org chart visual */
.org-chart {
  margin: 0 auto 3.5rem; max-width: 900px; text-align: center;
}
.org-level-1 { display: flex; justify-content: center; margin-bottom: 1.5rem; }
.org-level-2 { display: flex; justify-content: center; gap: 1rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
.org-level-3 { display: flex; justify-content: center; gap: 0.8rem; flex-wrap: wrap; }
.org-box {
  background: var(--forest); color: #fff;
  border-radius: 12px; padding: 0.9rem 1.4rem;
  font-size: 0.8rem; font-weight: 600; text-align: center;
  box-shadow: var(--shadow-md); position: relative; min-width: 160px;
}
.org-box.top { background: var(--ochre); color: #fff; font-size: 0.85rem; padding: 1rem 1.8rem; border-radius: 14px; }
.org-box.mid { background: var(--forest-mid); font-size: 0.76rem; min-width: 140px; }
.org-box.dept { background: #fff; color: var(--forest); border: 1.5px solid var(--border); font-size: 0.72rem; min-width: 120px; box-shadow: var(--shadow-sm); }

/* Connector lines (CSS) */
.org-connector-v {
  width: 2px; height: 28px; background: var(--ochre);
  margin: 0 auto; opacity: 0.5;
}
.org-connector-h {
  height: 2px; background: var(--ochre);
  max-width: 700px; margin: 0 auto; opacity: 0.3;
}

/* Org chart level 4 — departments row */
.org-level-4 { display: flex; justify-content: center; gap: 0.7rem; margin-bottom: 1rem; flex-wrap: wrap; }
.org-box.dept-main {
  background: var(--ochre); color: #fff; font-size: 0.72rem; min-width: 130px;
  border: 1px solid var(--ochre-light); padding: 0.75rem 1rem; font-weight: 600;
}
a.org-box.dept-main { cursor: pointer; transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; text-decoration: none; }
a.org-box.dept-main:hover { background: var(--ochre-light); border-color: var(--ochre); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(200,135,26,0.3); }
a.unit-link:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.1); transform: translateY(-1px); }

/* Units sub-section */
.org-units-wrap { margin-top: 0.5rem; }
.org-units-label {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; text-align: center; margin-bottom: 0.6rem;
}
.org-level-5 { display: flex; justify-content: center; gap: 0.5rem; flex-wrap: wrap; }
.org-box.unit {
  background: rgba(200,135,26,0.08); color: var(--forest);
  border: 1.5px solid rgba(200,135,26,0.35);
  font-size: 0.66rem; min-width: 0; padding: 0.5rem 0.8rem;
  box-shadow: none; border-radius: 8px;
}

/* Departments grid */
.dept-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.dept-card {
  background: #fff; border-radius: 16px; padding: 1.8rem 1.4rem;
  border-top: 4px solid var(--ochre);
  box-shadow: var(--shadow-sm); transition: var(--ease);
  text-decoration: none; display: block; cursor: pointer;
  color: inherit; height: 100%;
}
.dept-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.dept-icon {
  width: 50px; height: 50px; border-radius: 12px;
  background: var(--ochre-pale); display: flex; align-items: center;
  justify-content: center; font-size: 1.4rem; margin-bottom: 1rem;
}
.dept-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem; color: var(--forest); font-weight: 700; margin-bottom: 0.5rem;
}
.dept-card p { font-size: 0.76rem; color: var(--text-light); line-height: 1.6; }

/* ================================================================
   LEADERSHIP
================================================================ */
.leadership {
  background: var(--white);
  padding: 5.5rem 2rem;
}
.leadership-inner { max-width: 1400px; margin: 0 auto; }
.section-header-flex {
  max-width: 1400px; margin: 0 auto 2.5rem;
  display: flex; justify-content: space-between; align-items: flex-end;
}
.sh-left .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.4rem;
}
.sh-left h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); color: var(--forest); font-weight: 700; }
.sh-left h2 em { font-style: italic; color: var(--ochre); }
.view-all {
  display: inline-flex; align-items: center; gap: 0.4rem;
  border: 1.5px solid var(--forest); color: var(--forest);
  padding: 0.55rem 1.2rem; border-radius: 8px;
  font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
  transition: var(--ease); white-space: nowrap;
}
.view-all:hover { background: var(--forest); color: #fff; }

.leadership-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem;
}
.leader-card {
  background: #fff; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-sm); transition: var(--ease);
}
.leader-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.leader-photo {
  height: 300px; background-size: cover; background-position: center center;
  position: relative; overflow: hidden;
}
.leader-photo::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,25,15,0.55) 0%, transparent 50%);
}
.leader-photo-placeholder {
  height: 300px; position: relative;
  display: flex; align-items: center; justify-content: center;
}
.leader-photo-placeholder::after {
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,25,15,0.55) 0%, transparent 50%);
}
.leader-initials {
  font-family: 'Playfair Display', serif;
  font-size: 3.5rem; font-weight: 900; color: rgba(255,255,255,0.8);
  position: relative; z-index: 1;
}
.leader-body {
  padding: 1.6rem 1.8rem;
  border-top: 3px solid var(--ochre);
}
.leader-body .role {
  font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.3rem;
}
.leader-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; color: var(--forest); font-weight: 700; margin-bottom: 0.5rem;
}
.leader-body p { font-size: 0.8rem; color: var(--text-light); line-height: 1.6; }
.leader-read-more {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.8rem; color: var(--ochre); font-size: 0.78rem; font-weight: 700;
}
.leader-read-more:hover { color: var(--ochre-light); gap: 0.6rem; }

/* ================================================================
   STRATEGIC OBJECTIVES
================================================================ */
.strategic {
  background: var(--savanna);
  padding: 5.5rem 2rem;
}
.strategic-inner { max-width: 1400px; margin: 0 auto; }
.strategic-layout {
  display: grid; grid-template-columns: 1fr 1.6fr; gap: 4rem; align-items: start;
}
.strategic-intro .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.5rem;
}
.strategic-intro .eyebrow::before {
  content: ''; display: block; width: 22px; height: 2px; background: var(--ochre);
}
.strategic-intro h2 {
  font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--forest); font-weight: 700;
  line-height: 1.2; margin-bottom: 1.1rem;
}
.strategic-intro h2 em { font-style: italic; color: var(--ochre); }
.strategic-intro p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 0.9rem; }
.plan-badge {
  background: var(--forest); color: #fff;
  border-radius: 14px; padding: 1.4rem;
  margin-top: 1.5rem; text-align: center;
}
.plan-badge .plan-label { font-size: 0.65rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; }
.plan-badge .plan-title {
  font-family: 'Playfair Display', serif;
  font-size: 1rem; font-weight: 700; color: #fff; margin-top: 0.3rem; line-height: 1.3;
}
.plan-badge .plan-period { font-size: 0.78rem; color: rgba(255,255,255,0.6); margin-top: 0.25rem; }

.objectives-list { display: flex; flex-direction: column; gap: 1rem; }
.objective-card {
  background: #fff; border-radius: 14px;
  box-shadow: var(--shadow-sm); overflow: hidden; transition: var(--ease);
  display: flex; align-items: stretch;
}
.objective-card:hover { transform: translateX(4px); box-shadow: var(--shadow-md); }
.obj-num {
  background: var(--forest); color: var(--ochre-light);
  font-family: 'Playfair Display', serif;
  font-size: 1.4rem; font-weight: 900;
  min-width: 64px; display: flex; align-items: center; justify-content: center;
  padding: 0 1rem; flex-shrink: 0;
}
.obj-body { padding: 1.2rem 1.4rem; flex: 1; }
.obj-body .obj-tag {
  font-size: 0.62rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.25rem;
}
.obj-body h3 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem; color: var(--forest); font-weight: 700; margin-bottom: 0.3rem;
}
.obj-body p { font-size: 0.78rem; color: var(--text-light); line-height: 1.6; }

/* ================================================================
   KEY FACTS / STATISTICS
================================================================ */
.key-facts {
  background: var(--forest);
  padding: 4.5rem 2rem;
}
.key-facts-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 1px;
  background: rgba(255,255,255,0.06);
  border-radius: 18px; overflow: hidden;
  border: 1px solid rgba(255,255,255,0.06);
}
.fact-item {
  background: rgba(10,25,15,0.3);
  padding: 2.5rem 1.5rem; text-align: center;
  border-right: 1px solid rgba(255,255,255,0.06);
  transition: var(--ease);
}
.fact-item:last-child { border-right: none; }
.fact-item:hover { background: rgba(200,135,26,0.12); }
.fact-icon { font-size: 1.8rem; margin-bottom: 0.7rem; display: block; }
.fact-num {
  font-family: 'Playfair Display', serif;
  font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 900;
  color: var(--ochre-light); display: block; line-height: 1; margin-bottom: 0.4rem;
}
.fact-label {
  font-size: 0.72rem; color: rgba(255,255,255,0.65);
  text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; line-height: 1.4;
}

/* ================================================================
   PARTNER INSTITUTIONS
================================================================ */
.institutions {
  background: linear-gradient(135deg, #4A3F33 0%, #5C4E40 100%);
  padding: 5.5rem 2rem;
}
.institutions .section-header-center .eyebrow { color: var(--ochre-light); }
.institutions .section-header-center h2 { color: var(--white); }
.institutions .section-header-center p { color: rgba(255,255,255,0.6); }
.institutions-inner { max-width: 1400px; margin: 0 auto; }
.inst-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.2rem;
}
.inst-card {
  border: 1.5px solid var(--border); border-radius: 14px;
  padding: 2rem 1.4rem; text-align: center;
  transition: var(--ease); text-decoration: none; display: block; background: #fff;
}
.inst-card:hover {
  border-color: var(--ochre); background: var(--savanna);
  transform: translateY(-4px); box-shadow: var(--shadow-md);
}
.inst-abbr {
  font-family: 'Playfair Display', serif;
  font-size: 1.8rem; font-weight: 900; color: var(--forest); margin-bottom: 0.5rem;
}
.inst-card h4 { font-size: 0.82rem; color: var(--text-mid); font-weight: 700; line-height: 1.4; margin-bottom: 0.5rem; }
.inst-card p { font-size: 0.72rem; color: var(--text-light); line-height: 1.5; }
.inst-relation {
  display: inline-block; margin-top: 0.8rem;
  font-size: 0.62rem; background: var(--ochre-pale);
  color: var(--ochre); padding: 0.2rem 0.75rem;
  border-radius: 100px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid rgba(200,135,26,0.2);
}

/* ================================================================
   HISTORY TIMELINE
================================================================ */
.history {
  background: var(--savanna);
  padding: 5.5rem 2rem;
}
.history-inner { max-width: 1000px; margin: 0 auto; }
.timeline { position: relative; margin-top: 3rem; }
.timeline::before {
  content: '';
  position: absolute; left: 50%; top: 0; bottom: 0;
  width: 2px; background: var(--border);
  transform: translateX(-50%);
}
.timeline-item {
  display: grid; grid-template-columns: 1fr 60px 1fr; gap: 1.5rem;
  margin-bottom: 2.5rem; align-items: center;
}
.timeline-content {
  background: #fff; border-radius: 14px; padding: 1.4rem 1.6rem;
  box-shadow: var(--shadow-sm); border: 1px solid var(--border);
}
.timeline-content.right { grid-column: 3; }
.timeline-content.left { grid-column: 1; text-align: right; }
.timeline-dot {
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); border: 3px solid var(--ochre);
  display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; color: var(--ochre-light);
  font-family: 'Playfair Display', serif;
  grid-column: 2; margin: 0 auto;
  box-shadow: 0 0 0 4px rgba(200,135,26,0.15);
  z-index: 1; position: relative;
}
.timeline-content h4 {
  font-family: 'Playfair Display', serif;
  font-size: 0.95rem; color: var(--forest); font-weight: 700; margin-bottom: 0.3rem;
}
.timeline-content p { font-size: 0.78rem; color: var(--text-light); line-height: 1.6; }
.timeline-content .year {
  font-size: 0.65rem; color: var(--ochre); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.3rem;
}

/* ================================================================
   CTA BANNER
================================================================ */
.cta-banner {
  background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%);
  padding: 5rem 2rem;
  position: relative; overflow: hidden;
}
.cta-banner::before {
  content: '🏛️';
  position: absolute; right: 8%; top: 50%;
  transform: translateY(-50%);
  font-size: 12rem; opacity: 0.05; pointer-events: none;
}
.cta-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1fr auto; gap: 3rem; align-items: center;
}
.cta-text .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.5rem;
}
.cta-text h2 {
  font-size: clamp(2rem, 3.5vw, 3rem); color: #fff; font-weight: 700; line-height: 1.2;
}
.cta-text h2 em { font-style: italic; color: var(--ochre-light); }
.cta-text p { color: rgba(255,255,255,0.65); margin-top: 0.8rem; max-width: 480px; line-height: 1.7; font-size: 0.92rem; }
.cta-buttons { display: flex; flex-direction: column; gap: 0.75rem; flex-shrink: 0; min-width: 220px; }
.cta-buttons .btn-primary { justify-content: center; }
.btn-glass {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: rgba(255,255,255,0.1); color: #fff;
  padding: 0.9rem 1.8rem; border-radius: 10px;
  border: 1px solid rgba(255,255,255,0.25);
  font-weight: 600; font-size: 0.85rem; transition: var(--ease);
}
.btn-glass:hover { background: rgba(255,255,255,0.2); transform: translateY(-2px); }

/* ================================================================
   NEWSLETTER
================================================================ */
.newsletter { background: var(--ochre); padding: 3.5rem 2rem; }
.newsletter-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.newsletter-text h3 {
  font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; font-weight: 700;
}
.newsletter-text p { color: rgba(255,255,255,0.8); margin-top: 0.3rem; font-size: 0.88rem; }
.newsletter-form {
  display: flex; gap: 0; flex: 1; max-width: 640px;
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.3); border-radius: 10px; overflow: hidden;
}
.newsletter-form input {
  flex: 1; background: none; border: none; outline: none;
  color: #fff; font-family: 'DM Sans', sans-serif; font-size: 0.88rem; padding: 0.9rem 1.2rem;
}
.newsletter-form input::placeholder { color: rgba(255,255,255,0.6); }
.newsletter-form button {
  background: var(--forest); color: #fff; border: none; padding: 0.9rem 1.4rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: var(--ease); white-space: nowrap;
}
.newsletter-form button:hover { background: var(--forest-dark); }

/* ================================================================
   FOOTER
================================================================ */
footer {
  background: var(--text-dark); color: rgba(255,255,255,0.55);
  padding: 4.5rem 2rem 2rem;
}
.footer-grid {
  max-width: 1400px; margin: 0 auto 3rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem;
}
.footer-brand .ministry { color: #fff; font-size: 1rem; }
.footer-brand p { font-size: 0.82rem; line-height: 1.75; margin-top: 1rem; color: rgba(255,255,255,0.5); }
.footer-brand .tagline { color: var(--ochre-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a {
  width: 36px; height: 36px; background: rgba(255,255,255,0.07); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.85rem; transition: var(--ease);
}
.footer-social a:hover { background: var(--ochre); color: #fff; }
.footer-col h5 {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: 1.2rem;
}
.footer-col a {
  display: block; color: rgba(255,255,255,0.5);
  font-size: 0.82rem; padding: 0.3rem 0; transition: var(--ease);
}
.footer-col a:hover { color: var(--ochre-light); padding-left: 4px; }
.footer-bottom {
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 1rem; font-size: 0.72rem;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); }
.footer-bottom-links a:hover { color: var(--ochre-light); }

/* ================================================================
   SHARED UTILITIES
================================================================ */
.max-w { max-width: 1400px; margin: 0 auto; }

/* ================================================================
   KEYFRAME ANIMATIONS
================================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(200,135,26,0.2); }
  50%       { box-shadow: 0 0 0 8px rgba(200,135,26,0.08); }
}

/* Scroll reveal */
.reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
  .dept-grid { grid-template-columns: repeat(2, 1fr); }
  .key-facts-inner { grid-template-columns: repeat(3, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px) {
  .mandate-inner { grid-template-columns: 1fr; }
  .mandate-image-col { order: -1; }
  .mandate-badge { bottom: 1rem; right: 1rem; }
  .vmv-main-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr 1fr; }
  .leadership-grid { grid-template-columns: 1fr 1fr; }
  .strategic-layout { grid-template-columns: 1fr; gap: 2rem; }
  .inst-grid { grid-template-columns: 1fr 1fr; }
  .page-hero-inner { grid-template-columns: 1fr; }
  .hero-stat-strip { flex-direction: row; flex-wrap: wrap; }
  .header-search { display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .cta-inner { grid-template-columns: 1fr; }
  .timeline::before { left: 24px; }
  .timeline-item { grid-template-columns: 0 48px 1fr; }
  .timeline-content.left { grid-column: 3; text-align: left; }
  .timeline-dot { grid-column: 2; }
}
@media (max-width: 768px) {
  .utility-bar { justify-content: center; font-size: 0.68rem; }
  .utility-right { display: none; }
  .gov-header { padding: 0.8rem 1.2rem; }
  .dept-grid { grid-template-columns: 1fr; }
  .values-grid { grid-template-columns: 1fr; }
  .leadership-grid { grid-template-columns: 1fr; }
  .key-facts-inner { grid-template-columns: repeat(2, 1fr); }
  .inst-grid { grid-template-columns: 1fr 1fr; }
  .newsletter-inner { flex-direction: column; align-items: flex-start; }
  .newsletter-form { width: 100%; max-width: 100%; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
}
@media (max-width: 480px) {
  .key-facts-inner { grid-template-columns: 1fr; }
  .inst-grid { grid-template-columns: 1fr; }
}

@media print {
  .utility-bar, .main-nav, .page-anchor-nav, .newsletter, .hamburger { display: none; }
}

/* ================================================================
   PUBLICATIONS PAGE — additional styles from mtwa-publications.html
================================================================ */

/* ================================================================
   CSS CUSTOM PROPERTIES (→ WP theme.json)
================================================================ */
:root {
  --ochre:        #C8871A;
  --ochre-light:  #E5A83C;
  --ochre-pale:   rgba(200,135,26,0.12);
  --forest:       #1A3C28;
  --forest-mid:   #2D5E3E;
  --forest-light: #4A7357; /* lighter sage-green for the quick-services strip (Session 25) */
  --forest-dark:  #0F2018;
  --savanna:      #F5EDD8;
  --savanna-light:#F9F3E1; /* slightly lighter shade of savanna (Who We Are strip) */
  --earth:        #8B5E3C;
  --sky:          #1B3A5C;
  /* Warm espresso/cocoa/savanna family (Session 27 — warm top-bar identity) */
  --espresso:        #3D2E1E;   /* deep warm brown (quick-services text / nav accents) */
  --espresso-dark:   #2B2115;   /* darkest warm brown (utility bar) */
  --caramel:         #8A5E0E;   /* ochre-tinted warm brown (gov header gradient end) */
  --espresso-pale:   rgba(61,46,30,0.08);
  --cream:        #FDFAF4;
  --text-dark:    #0F1E14;
  --text-mid:     #3D4F43;
  --text-light:   #6B7C71;
  --white:        #FFFFFF;
  --border:       rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.14);
  --ease:         all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  font-family: 'DM Sans', sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  overflow-x: hidden;
  line-height: 1.6;
}
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--ease); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.15; }

.skip-link {
  position: absolute; top: -40px; left: 0; z-index: 9999;
  background: var(--forest); color: #fff; padding: 8px 16px;
  border-radius: 0 0 8px 0; font-size: 0.85rem;
}
.skip-link:focus { top: 0; }

/* ================================================================
   UTILITY BAR
================================================================ */
.utility-bar {
  background: var(--forest-dark);
  color: rgba(255,255,255,0.65);
  font-size: 0.72rem; letter-spacing: 0.05em;
  padding: 0.45rem 2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.utility-bar a { color: rgba(255,255,255,0.65); }
.utility-bar a:hover { color: var(--ochre-light); }
.utility-left { display: flex; align-items: center; gap: 0.6rem; }
.utility-right { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ================================================================
   GOVERNMENT HEADER
================================================================ */
.gov-header {
  background: var(--forest); padding: 1rem 2rem;
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.logo-block { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; }
.logo-coat {
  width: 58px; height: 58px;
  display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0;
}
.logo-text .ministry {
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: #fff; line-height: 1.2;
}
.logo-text .tagline {
  font-family: 'Titillium Web', sans-serif;
  font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-top: 2px;
}
.gov-header-right { display: flex; align-items: center; gap: 1rem; }
.header-search {
  display: flex; align-items: center; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15); border-radius: 8px; overflow: hidden;
}
.header-search input {
  background: none; border: none; outline: none; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; padding: 0.5rem 1rem; width: 200px;
}
.header-search input::placeholder { color: rgba(255,255,255,0.45); }
.header-search button {
  background: var(--ochre); color: #fff; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; transition: var(--ease);
}
.header-search button:hover { background: var(--ochre-light); }

/* ================================================================
   MAIN NAVIGATION
================================================================ */
.main-nav {
  background: var(--cream); border-bottom: 2px solid var(--border);
  position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 16px rgba(0,0,0,0.07);
}
.nav-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 2rem;
  display: flex; align-items: center; justify-content: space-between;
}
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a {
  display: flex; align-items: center; gap: 0.25rem; padding: 1.1rem 1rem;
  font-size: 0.82rem; font-weight: 600; color: var(--text-mid);
  text-transform: uppercase; letter-spacing: 0.06em;
  border-bottom: 3px solid transparent; transition: var(--ease);
}
.nav-links > li > a:hover, .nav-links > li.active > a {
  color: var(--forest); border-bottom-color: var(--ochre); background: var(--ochre-pale);
}
.nav-links > li > a .arrow { font-size: 0.6rem; opacity: 0.5; transition: var(--ease); }
.nav-links > li:hover > a .arrow { opacity: 1; transform: rotate(180deg); }
.dropdown {
  position: absolute; top: calc(100% + 2px); left: 0;
  background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg);
  border: 1px solid var(--border); min-width: 200px; padding: 0.6rem 0;
  opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease; z-index: 200;
}
.nav-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.55rem 1.2rem; font-size: 0.82rem; color: var(--text-mid); font-weight: 500; }
.dropdown a:hover { background: var(--savanna); color: var(--forest); padding-left: 1.5rem; }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-btn {
  display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1.2rem; border-radius: 8px;
  font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: var(--ease);
}
.nav-btn-outline { border: 1.5px solid var(--forest); color: var(--forest); }
.nav-btn-outline:hover { background: var(--forest); color: #fff; }
.nav-btn-primary { background: var(--ochre); color: #fff; }
.nav-btn-primary:hover { background: var(--ochre-light); transform: translateY(-1px); }
.hamburger {
  display: none; flex-direction: column; gap: 5px;
  padding: 0.6rem; border-radius: 8px; border: 1.5px solid var(--border);
}
.hamburger span { display: block; width: 22px; height: 2px; background: var(--forest); border-radius: 2px; transition: var(--ease); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-nav {
  display: none; background: #fff; border-top: 2px solid var(--border);
  padding: 1rem 2rem 2rem; max-height: 0; overflow: hidden; transition: max-height 0.35s ease;
}
.mobile-nav.open { max-height: 1150px; display: block; }
.mobile-nav a { display: block; padding: 0.7rem 0; font-size: 0.9rem; font-weight: 600; color: var(--text-mid); border-bottom: 1px solid var(--border); }
.mobile-nav a:hover { color: var(--espresso); padding-left: 8px; }

/* ================================================================
   PAGE HERO
================================================================ */
.page-hero {
  /* Session 27: warm cream wave — darker caramel-cream at top, lightening to
     savanna cream at the bottom; bridges the cocoa gov-header into the page. */
  background: linear-gradient(180deg, #D8C9A5 0%, #E4D7BA 40%, #EEE5CF 75%, #F8F3E7 100%);
  padding: 0.9rem 2rem 4.5rem; position: relative; overflow: hidden;
}
.page-hero::before {
  content: '';
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(200,135,26,0.07) 1px, transparent 1px);
  background-size: 28px 28px;
}
.page-hero::after {
  content: ''; position: absolute; bottom: 0; left: 0; right: 0;
  height: 100px; background: linear-gradient(to top, var(--cream), transparent); pointer-events: none;
}
.page-hero-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; }
.breadcrumb {
  display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem;
  font-size: 0.75rem; color: rgba(255,255,255,0.55); letter-spacing: 0.04em;
}
.breadcrumb a { color: rgba(255,255,255,0.65); }
.breadcrumb a:hover { color: var(--ochre-light); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--ochre-light); font-weight: 600; }
.hero-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre-light); font-weight: 700; margin-bottom: 0.8rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: var(--ochre); }
.page-hero h1 { font-size: clamp(2.2rem, 4vw, 3.2rem); font-weight: 900; color: #fff; line-height: 1.1; margin-bottom: 0.9rem; }
.page-hero h1 em { font-style: italic; color: var(--ochre-light); }
.page-hero-desc { font-size: 0.95rem; color: rgba(255,255,255,0.72); line-height: 1.75; max-width: 560px; margin-bottom: 2rem; }

/* Hero search */
.hero-search-bar {
  display: flex; align-items: center; max-width: 620px;
  background: rgba(255,255,255,0.55); backdrop-filter: blur(12px);
  border: 1px solid rgba(61,46,30,0.25); border-radius: 12px; overflow: hidden;
}
.hero-search-bar input {
  flex: 1; background: none; border: none; outline: none;
  color: var(--espresso); font-family: 'DM Sans', sans-serif; font-size: 0.95rem; padding: 0.85rem 1.2rem;
}
.hero-search-bar input::placeholder { color: rgba(61,46,30,0.5); }
.hero-search-bar button {
  background: var(--ochre); color: #fff; border: none;
  padding: 0.85rem 1.6rem; font-family: 'DM Sans', sans-serif;
  font-size: 0.85rem; font-weight: 700; cursor: pointer; transition: var(--ease); white-space: nowrap;
}
.hero-search-bar button:hover { background: var(--ochre-light); }

/* Stats strip in hero */
.hero-pub-stats {
  display: flex; gap: 2rem; margin-top: 2rem; flex-wrap: wrap;
}
.hero-stat-item { text-align: left; }
.hero-stat-item .num {
  font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900;
  color: var(--ochre); display: block; line-height: 1;
}
.hero-stat-item .lbl { font-size: 0.68rem; color: rgba(61,46,30,0.65); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 0.15rem; }

/* ================================================================
   FEATURED PUBLICATION (full-width banner card)
================================================================ */
.featured-pub {
  background: var(--savanna);
  padding: 2.5rem 2rem;
  border-bottom: 2px solid rgba(0,0,0,0.06);
}
.featured-pub-inner {
  max-width: 1400px; margin: 0 auto;
}
.featured-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 1rem;
}
.featured-label::before { content: '★'; font-size: 0.7rem; }
.featured-card {
  display: grid; grid-template-columns: 220px 1fr auto; gap: 2rem; align-items: center;
  background: #fff; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md);
  border: 1px solid var(--border); transition: var(--ease);
}
.featured-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-2px); }
.featured-cover {
  height: 180px; background: var(--forest); position: relative; overflow: hidden; flex-shrink: 0;
}
.featured-cover img { width: 100%; height: 100%; object-fit: cover; }
.featured-cover-placeholder {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.4rem;
}
.featured-cover-placeholder .cover-icon { font-size: 2.8rem; }
.featured-cover-placeholder .cover-year {
  font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700;
  color: var(--ochre-light); letter-spacing: 0.06em;
}
.featured-body { padding: 1.6rem 0.5rem; }
.featured-body .pub-type {
  font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.4rem;
}
.featured-body h2 {
  font-family: 'Playfair Display', serif; font-size: 1.35rem; font-weight: 700;
  color: var(--forest); line-height: 1.25; margin-bottom: 0.6rem;
}
.featured-body p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.75; margin-bottom: 0.9rem; }
.pub-meta-row { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap; }
.pub-meta-item { font-size: 0.72rem; color: var(--text-light); display: flex; align-items: center; gap: 0.3rem; }
.featured-actions {
  display: flex; flex-direction: column; gap: 0.6rem; padding: 1.6rem; flex-shrink: 0; min-width: 180px;
}
.btn-download {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  background: var(--forest); color: #fff; padding: 0.8rem 1.4rem;
  border-radius: 10px; font-weight: 700; font-size: 0.82rem; transition: var(--ease);
}
.btn-download:hover { background: var(--forest-mid); transform: translateY(-2px); }
.btn-preview {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  border: 1.5px solid var(--forest); color: var(--forest); padding: 0.8rem 1.4rem;
  border-radius: 10px; font-weight: 700; font-size: 0.82rem; transition: var(--ease);
}
.btn-preview:hover { background: var(--forest); color: #fff; }
.pub-file-size { font-size: 0.7rem; color: var(--text-light); text-align: center; margin-top: 0.3rem; }

/* ================================================================
   FILTER + CONTROLS BAR
================================================================ */
.filter-bar {
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 0; position: sticky; top: 66px; z-index: 300;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.filter-bar-inner {
  max-width: 1400px; margin: 0 auto; padding: 0 2rem;
}

/* Category tab row */
.cat-tabs {
  display: flex; align-items: center; gap: 0; border-bottom: 1px solid var(--border);
  overflow-x: auto; scrollbar-width: none;
}
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tab {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.85rem 1.1rem; font-size: 0.78rem; font-weight: 600; color: var(--text-mid);
  white-space: nowrap; border-bottom: 3px solid transparent; cursor: pointer; transition: var(--ease);
  background: none; border-top: none; border-left: none; border-right: none;
}
.cat-tab:hover { color: var(--forest); background: var(--ochre-pale); }
.cat-tab.active { color: var(--forest); border-bottom-color: var(--ochre); background: var(--ochre-pale); }
.cat-tab .count {
  background: var(--border); color: var(--text-light); font-size: 0.64rem;
  padding: 0.1rem 0.45rem; border-radius: 100px; font-weight: 700;
}
.cat-tab.active .count { background: var(--ochre-pale); color: var(--ochre); }

/* Controls row */
.controls-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.75rem 0; gap: 1rem; flex-wrap: wrap;
}
.controls-left { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.filter-select {
  background: var(--cream); border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--text-mid); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600;
  padding: 0.45rem 2rem 0.45rem 0.8rem; outline: none; cursor: pointer;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B7C71' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
  transition: var(--ease);
}
.filter-select:hover, .filter-select:focus { border-color: var(--ochre); }
.results-count { font-size: 0.8rem; color: var(--text-light); }
.results-count strong { color: var(--text-dark); }
.controls-right { display: flex; align-items: center; gap: 0.8rem; }
.view-toggle { display: flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden; }
.view-btn {
  padding: 0.4rem 0.7rem; background: #fff; color: var(--text-light);
  font-size: 0.85rem; cursor: pointer; transition: var(--ease);
  border: none;
}
.view-btn.active { background: var(--forest); color: #fff; }
.view-btn:hover:not(.active) { background: var(--savanna); }
.sort-select {
  background: #fff; border: 1.5px solid var(--border); border-radius: 8px;
  color: var(--text-mid); font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600;
  padding: 0.45rem 2rem 0.45rem 0.8rem; outline: none; cursor: pointer; appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 10 10'%3E%3Cpath fill='%236B7C71' d='M5 7L1 3h8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 0.7rem center;
  transition: var(--ease);
}
.sort-select:hover { border-color: var(--ochre); }

/* ================================================================
   MAIN LAYOUT (sidebar + content)
================================================================ */
.publications-layout {
  max-width: 1400px; margin: 0 auto;
  padding: 2.5rem 2rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 2.5rem; align-items: start;
}

/* ================================================================
   SIDEBAR
================================================================ */
.pub-sidebar { position: sticky; top: 140px; }
.sidebar-block {
  background: #fff; border-radius: 14px; overflow: hidden;
  border: 1.5px solid var(--border); margin-bottom: 1.2rem; box-shadow: var(--shadow-sm);
}
.sidebar-block-hdr {
  background: var(--forest); color: #fff; padding: 0.9rem 1.2rem;
  font-size: 0.72rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase;
  display: flex; align-items: center; gap: 0.5rem;
}
.sidebar-block-body { padding: 1rem 1.2rem; }
.sidebar-search {
  display: flex; border: 1.5px solid var(--border); border-radius: 8px; overflow: hidden;
}
.sidebar-search input {
  flex: 1; border: none; outline: none; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; padding: 0.55rem 0.8rem; background: var(--cream); color: var(--text-dark);
}
.sidebar-search button {
  background: var(--ochre); color: #fff; border: none; padding: 0.55rem 0.9rem;
  font-size: 0.82rem; cursor: pointer; transition: var(--ease);
}
.sidebar-search button:hover { background: var(--ochre-light); }

.filter-group { margin-bottom: 1rem; }
.filter-group:last-child { margin-bottom: 0; }
.filter-group-title {
  font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); font-weight: 700; margin-bottom: 0.6rem;
  padding-bottom: 0.4rem; border-bottom: 1px solid var(--border);
}
.filter-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0.35rem 0; cursor: pointer; font-size: 0.8rem; color: var(--text-mid);
  transition: var(--ease);
}
.filter-item:hover { color: var(--forest); }
.filter-item input[type="checkbox"] { accent-color: var(--ochre); width: 14px; height: 14px; margin-right: 0.5rem; cursor: pointer; }
.filter-item label { cursor: pointer; display: flex; align-items: center; flex: 1; }
.filter-count {
  background: var(--ochre-pale); color: var(--ochre); font-size: 0.62rem;
  padding: 0.1rem 0.45rem; border-radius: 100px; font-weight: 700;
}

/* Active filters chips */
.active-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip {
  display: flex; align-items: center; gap: 0.4rem;
  background: var(--ochre-pale); border: 1px solid rgba(200,135,26,0.25);
  color: var(--ochre); font-size: 0.7rem; font-weight: 700;
  padding: 0.25rem 0.65rem; border-radius: 100px;
}
.chip-remove { color: var(--ochre); font-size: 0.8rem; cursor: pointer; opacity: 0.7; }
.chip-remove:hover { opacity: 1; }

/* Sidebar latest */
.sidebar-pub-item {
  display: flex; gap: 0.8rem; padding: 0.8rem 0; border-bottom: 1px solid var(--border);
  align-items: flex-start;
}
.sidebar-pub-item:last-child { border-bottom: none; }
.sidebar-pub-thumb {
  width: 44px; height: 56px; border-radius: 5px; flex-shrink: 0; overflow: hidden;
  background: linear-gradient(135deg, var(--forest), var(--sky));
  display: flex; align-items: center; justify-content: center; font-size: 1.2rem;
}
.sidebar-pub-info .type { font-size: 0.6rem; color: var(--ochre); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; }
.sidebar-pub-info h5 { font-family: 'DM Sans', sans-serif; font-size: 0.78rem; font-weight: 600; color: var(--text-dark); line-height: 1.35; margin-top: 0.15rem; }
.sidebar-pub-info .date { font-size: 0.65rem; color: var(--text-light); margin-top: 0.15rem; }

/* ================================================================
   PUBLICATIONS GRID (card view)
================================================================ */
.pub-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem;
}
.pub-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--border);
  transition: var(--ease); display: flex; flex-direction: column;
}
.pub-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(200,135,26,0.2); }

.pub-card-cover {
  height: 180px; position: relative; overflow: hidden; flex-shrink: 0;
}
.pub-card-cover img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.pub-card:hover .pub-card-cover img { transform: scale(1.05); }
.cover-placeholder {
  width: 100%; height: 100%; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 0.5rem;
  position: relative;
}
.cover-placeholder .cp-icon { font-size: 2.5rem; }
.cover-placeholder .cp-title {
  font-family: 'Playfair Display', serif; font-size: 0.75rem; font-weight: 700;
  color: rgba(255,255,255,0.9); text-align: center; padding: 0 1rem; line-height: 1.3;
}
.cover-placeholder .cp-year {
  font-size: 0.65rem; color: var(--ochre-light); font-weight: 700; letter-spacing: 0.1em;
}

/* Type badge overlay */
.pub-type-badge {
  position: absolute; top: 0.7rem; left: 0.7rem;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 0.25rem 0.65rem; border-radius: 100px;
}
.badge-stat   { background: rgba(27,58,92,0.9);   color: #93C5FD; }
.badge-policy { background: rgba(10,25,15,0.9);    color: var(--ochre-light); }
.badge-report { background: rgba(139,94,60,0.9);   color: #FED7AA; }
.badge-mag    { background: rgba(200,135,26,0.9);  color: #fff; }
.badge-dir    { background: rgba(46,100,60,0.9);   color: #BBF7D0; }
.badge-wild   { background: rgba(15,32,24,0.9);    color: var(--ochre-light); }
.badge-muse   { background: rgba(92,46,26,0.9);    color: #FDE68A; }
.badge-plan   { background: rgba(27,58,92,0.85);   color: #C7D2FE; }

/* Open access badge */
.open-access {
  position: absolute; top: 0.7rem; right: 0.7rem;
  background: rgba(34,197,94,0.9); color: #fff;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.2rem 0.55rem; border-radius: 100px;
}

.pub-card-body { padding: 1.2rem 1.3rem; flex: 1; display: flex; flex-direction: column; }
.pub-card-body .pub-dept {
  font-size: 0.62rem; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-light); font-weight: 600; margin-bottom: 0.35rem;
}
.pub-card-body h3 {
  font-family: 'Playfair Display', serif; font-size: 0.97rem; font-weight: 700;
  color: var(--text-dark); line-height: 1.35; margin-bottom: 0.5rem;
}
.pub-card-body p { font-size: 0.78rem; color: var(--text-mid); line-height: 1.65; flex: 1; }
.pub-meta { display: flex; align-items: center; gap: 0.8rem; margin-top: 0.8rem; flex-wrap: wrap; }
.pub-meta-tag {
  font-size: 0.65rem; color: var(--text-light); display: flex; align-items: center; gap: 0.25rem;
}
.pub-lang {
  font-size: 0.62rem; background: var(--savanna); color: var(--forest);
  padding: 0.15rem 0.5rem; border-radius: 4px; font-weight: 700;
}

.pub-card-footer {
  padding: 0.85rem 1.3rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
}
.pub-file-info { font-size: 0.68rem; color: var(--text-light); }
.pub-file-info strong { color: var(--text-dark); font-weight: 600; }
.pub-action-btns { display: flex; gap: 0.4rem; }
.btn-sm-dl {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: var(--forest); color: #fff;
  padding: 0.4rem 0.85rem; border-radius: 7px;
  font-size: 0.72rem; font-weight: 700; transition: var(--ease);
}
.btn-sm-dl:hover { background: var(--forest-mid); }
.btn-sm-view {
  display: inline-flex; align-items: center; gap: 0.3rem;
  border: 1.5px solid var(--border); color: var(--text-mid);
  padding: 0.4rem 0.85rem; border-radius: 7px;
  font-size: 0.72rem; font-weight: 600; transition: var(--ease); background: var(--cream);
}
.btn-sm-view:hover { border-color: var(--ochre); color: var(--ochre); }

/* ================================================================
   LIST VIEW
================================================================ */
.pub-list { display: flex; flex-direction: column; gap: 0.85rem; }
.pub-list-item {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  overflow: hidden; display: flex; align-items: stretch;
  box-shadow: var(--shadow-sm); transition: var(--ease);
}
.pub-list-item:hover { border-color: rgba(200,135,26,0.25); box-shadow: var(--shadow-md); transform: translateX(3px); }
.list-thumb {
  width: 88px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 2rem; position: relative;
}
.list-body { flex: 1; padding: 1rem 1.2rem; display: flex; flex-direction: column; justify-content: center; }
.list-body .top-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.35rem; }
.list-body h3 { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--text-dark); font-weight: 700; line-height: 1.3; margin-bottom: 0.3rem; }
.list-body p { font-size: 0.76rem; color: var(--text-mid); line-height: 1.55; }
.list-body .meta-row { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; flex-wrap: wrap; }
.list-meta-item { font-size: 0.68rem; color: var(--text-light); display: flex; align-items: center; gap: 0.25rem; }
.list-actions { display: flex; flex-direction: column; gap: 0.4rem; padding: 1rem 1.2rem; justify-content: center; flex-shrink: 0; }

/* ================================================================
   PAGINATION
================================================================ */
.pagination {
  display: flex; align-items: center; justify-content: center; gap: 0.4rem; margin-top: 2.5rem;
}
.pag-btn {
  width: 38px; height: 38px; display: flex; align-items: center; justify-content: center;
  border-radius: 8px; border: 1.5px solid var(--border); background: #fff;
  color: var(--text-mid); font-size: 0.82rem; cursor: pointer; transition: var(--ease);
  font-family: 'DM Sans', sans-serif;
}
.pag-btn:hover { border-color: var(--ochre); color: var(--ochre); }
.pag-btn.active { background: var(--forest); color: #fff; border-color: var(--forest); }
.pag-btn.dots { border: none; cursor: default; color: var(--text-light); }
.pag-info { font-size: 0.78rem; color: var(--text-light); margin: 0 0.5rem; }

/* ================================================================
   NEWSLETTER / CTA STRIP
================================================================ */
.pub-cta {
  background: linear-gradient(135deg, #4A3F33 0%, #5C4E40 100%);
  padding: 3.5rem 2rem; margin-top: 0;
}
.pub-cta-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.pub-cta-text .eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem;
}
.pub-cta-text h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; font-weight: 700; }
.pub-cta-text p { color: rgba(255,255,255,0.7); margin-top: 0.3rem; font-size: 0.88rem; max-width: 480px; }
.pub-cta-form {
  display: flex; gap: 0; flex: 1; max-width: 440px;
  background: rgba(255,255,255,0.12); backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.25); border-radius: 10px; overflow: hidden;
}
.pub-cta-form input {
  flex: 1; background: none; border: none; outline: none; color: #fff;
  font-family: 'DM Sans', sans-serif; font-size: 0.88rem; padding: 0.9rem 1.2rem;
}
.pub-cta-form input::placeholder { color: rgba(255,255,255,0.55); }
.pub-cta-form button {
  background: var(--ochre); color: #fff; border: none; padding: 0.9rem 1.4rem;
  font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700;
  cursor: pointer; transition: var(--ease); white-space: nowrap;
}
.pub-cta-form button:hover { background: var(--ochre-light); }
.pub-cta-consent { margin-top: 0.6rem; }
.pub-cta-consent .mtwa-consent { color: rgba(255,255,255,0.85); }
.pub-cta-consent .mtwa-consent a { color: var(--ochre-light); }
.pub-cta-note { font-size: 0.68rem; color: rgba(255,255,255,0.5); margin-top: 0.5rem; }

/* ================================================================
   FOOTER
================================================================ */
footer { background: var(--text-dark); color: rgba(255,255,255,0.55); padding: 4.5rem 2rem 2rem; }
.footer-grid {
  max-width: 1400px; margin: 0 auto 3rem;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem;
}
.footer-brand .ministry { color: #fff; font-size: 1rem; }
.footer-brand p { font-size: 0.82rem; line-height: 1.75; margin-top: 1rem; color: rgba(255,255,255,0.5); }
.footer-brand .tagline { color: var(--ochre-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a {
  width: 36px; height: 36px; background: rgba(255,255,255,0.07); border-radius: 8px;
  display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: var(--ease);
}
.footer-social a:hover { background: var(--ochre); color: #fff; }
.footer-col h5 {
  font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase;
  color: #fff; font-weight: 700; margin-bottom: 1.2rem;
}
.footer-col a { display: block; color: rgba(255,255,255,0.5); font-size: 0.82rem; padding: 0.3rem 0; transition: var(--ease); }
.footer-col a:hover { color: var(--ochre-light); padding-left: 4px; }
.footer-bottom {
  max-width: 1400px; margin: 0 auto;
  border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.72rem;
}
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); }
.footer-bottom-links a:hover { color: var(--ochre-light); }

/* ================================================================
   ANIMATIONS & UTILITIES
================================================================ */
@keyframes fadeUp { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: translateY(0); } }
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* No results */
.no-results {
  text-align: center; padding: 4rem 2rem; color: var(--text-light);
  display: none;
}
.no-results h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--text-mid); margin-bottom: 0.5rem; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1200px) {
  .pub-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 992px) {
  .publications-layout { grid-template-columns: 1fr; }
  .pub-sidebar { position: static; }
  .featured-card { grid-template-columns: 160px 1fr; }
  .featured-actions { grid-column: 1 / -1; flex-direction: row; padding: 1rem 1.6rem; }
  .header-search { display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
}
@media (max-width: 768px) {
  .utility-bar { justify-content: center; font-size: 0.68rem; }
  .utility-right { display: none; }
  .gov-header { padding: 0.8rem 1.2rem; }
  .pub-grid { grid-template-columns: 1fr; }
  .featured-card { grid-template-columns: 1fr; }
  .featured-cover { height: 140px; }
  .featured-actions { flex-direction: row; flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .pub-cta-inner { flex-direction: column; }
  .pub-cta-form { width: 100%; max-width: 100%; }
  .hero-pub-stats { gap: 1.2rem; }
}

@media print {
  .utility-bar, .main-nav, .filter-bar, .pub-sidebar, .pub-cta, .hamburger { display: none; }
  .publications-layout { grid-template-columns: 1fr; }
}

/* ================================================================
   PROJECTS PAGE — additional styles from mtwa-projects.html
================================================================ */

/* ================================================================
   CSS CUSTOM PROPERTIES
================================================================ */
:root {
  --ochre:        #C8871A;
  --ochre-light:  #E5A83C;
  --ochre-pale:   rgba(200,135,26,0.12);
  --forest:       #1A3C28;
  --forest-mid:   #2D5E3E;
  --forest-light: #4A7357; /* lighter sage-green for the quick-services strip (Session 25) */
  --forest-dark:  #0F2018;
  --savanna:      #F5EDD8;
  --savanna-light:#F9F3E1; /* slightly lighter shade of savanna (Who We Are strip) */
  --earth:        #8B5E3C;
  --sky:          #1B3A5C;
  /* Warm espresso/cocoa/savanna family (Session 27 — warm top-bar identity) */
  --espresso:        #3D2E1E;   /* deep warm brown (quick-services text / nav accents) */
  --espresso-dark:   #2B2115;   /* darkest warm brown (utility bar) */
  --caramel:         #8A5E0E;   /* ochre-tinted warm brown (gov header gradient end) */
  --espresso-pale:   rgba(61,46,30,0.08);
  --cream:        #FDFAF4;
  --text-dark:    #0F1E14;
  --text-mid:     #3D4F43;
  --text-light:   #6B7C71;
  --white:        #FFFFFF;
  --border:       rgba(0,0,0,0.08);
  --shadow-sm:    0 2px 10px rgba(0,0,0,0.06);
  --shadow-md:    0 4px 24px rgba(0,0,0,0.10);
  --shadow-lg:    0 12px 48px rgba(0,0,0,0.14);
  --ease:         all 0.25s cubic-bezier(0.25,0.46,0.45,0.94);
}

*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 16px; }
body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text-dark); overflow-x: hidden; line-height: 1.6; }
img { max-width: 100%; height: auto; display: block; }
a { text-decoration: none; color: inherit; transition: var(--ease); }
ul, ol { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
h1, h2, h3, h4 { font-family: 'Playfair Display', serif; line-height: 1.15; }

.skip-link { position: absolute; top: -40px; left: 0; z-index: 9999; background: var(--forest); color: #fff; padding: 8px 16px; border-radius: 0 0 8px 0; font-size: 0.85rem; }
.skip-link:focus { top: 0; }

/* ================================================================
   UTILITY BAR
================================================================ */
.utility-bar {
  /* Warm espresso — deep coffee-brown, no green (Session 27 warm identity) */
  background: linear-gradient(135deg, #2B2115 0%, #3D2F1E 100%); color: rgba(255,248,238,0.72);
  font-size: 0.72rem; letter-spacing: 0.05em; padding: 0.45rem 2rem;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.5rem;
  border-bottom: 1px solid rgba(229,168,60,0.28);
}
.utility-bar a { color: rgba(255,248,238,0.62); }
.utility-bar a:hover { color: var(--ochre-light); }
.utility-left { display: flex; align-items: center; gap: 0.6rem; }
.utility-right { display: flex; gap: 1.4rem; flex-wrap: wrap; }

/* ================================================================
   GOVERNMENT HEADER — warm cocoa/caramel gradient
   ================================================================ */
.gov-header {
  background: linear-gradient(135deg, #3D2E1E 0%, #54401F 55%, #6B4E2E 100%);
  padding: 1rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem;
  border-bottom: 1px solid rgba(229,168,60,0.3);
  box-shadow: 0 4px 24px rgba(43,33,21,0.35);
  position: relative;
}
.gov-header::before { display: none; }
.gov-header::after { display: none; }
.logo-block { display: flex; align-items: center; gap: 1.1rem; text-decoration: none; }
.logo-coat { width: 58px; height: 58px; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; flex-shrink: 0; }
.logo-coat-img { border-radius: 6px; box-shadow: 0 2px 12px rgba(0,0,0,0.25), 0 0 0 1px rgba(229,168,60,0.35); }
.logo-text .ministry { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: #FFF6E8; line-height: 1.2; text-shadow: 0 1px 3px rgba(0,0,0,0.3); }
.logo-text .tagline { font-family: 'Titillium Web', sans-serif; font-size: 0.62rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-top: 2px; }
.header-search { display: flex; align-items: center; background: rgba(255,246,232,0.1); border: 1px solid rgba(255,246,232,0.2); border-radius: 8px; overflow: hidden; transition: border-color 0.2s ease; }
.header-search:focus-within { border-color: rgba(229,168,60,0.6); }
.header-search input { background: none; border: none; outline: none; color: #FFF6E8; font-family: 'DM Sans', sans-serif; font-size: 0.82rem; padding: 0.5rem 1rem; width: 200px; }
.header-search input::placeholder { color: rgba(255,246,232,0.45); }
.header-search button { background: var(--ochre); color: #fff; padding: 0.5rem 1rem; font-size: 0.82rem; font-weight: 600; transition: var(--ease); }
.header-search button:hover { background: var(--ochre-light); }

/* ================================================================
   MAIN NAVIGATION
================================================================ */
.main-nav { background: var(--cream); border-bottom: none; position: sticky; top: 0; z-index: 500; box-shadow: 0 2px 16px rgba(0,0,0,0.07); }
/* Uganda flag tricolour strip (black / yellow / red) between the main nav
   and the hero section — inspired by the TIMS site. */
.main-nav::after {
  content: "";
  position: absolute;
  bottom: -6px; left: 0; right: 0; height: 6px;
  background: linear-gradient(
    to bottom,
    #000000 0%, #000000 33.33%,
    #FCDC04 33.33%, #FCDC04 66.66%,
    #D90000 66.66%, #D90000 100%
  );
  z-index: 501;
}
.nav-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: space-between; }
.nav-links { display: flex; align-items: center; gap: 0; }
.nav-links > li { position: relative; }
.nav-links > li > a { display: flex; align-items: center; gap: 0.25rem; padding: 1.1rem 1rem; font-size: 0.82rem; font-weight: 600; color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em; border-bottom: none; border-top: 3px solid transparent; transition: var(--ease); }
.nav-links > li > a:hover, .nav-links > li.active > a { color: var(--espresso); border-top-color: var(--ochre); background: var(--ochre-pale); }
.nav-links > li > a .arrow { font-size: 0.6rem; opacity: 0.5; transition: var(--ease); }
.nav-links > li:hover > a .arrow { opacity: 1; transform: rotate(180deg); }
.dropdown { position: absolute; top: calc(100% + 2px); left: 0; background: #fff; border-radius: 12px; box-shadow: var(--shadow-lg); border: 1px solid var(--border); min-width: 200px; padding: 0.6rem 0; opacity: 0; visibility: hidden; transform: translateY(8px); transition: all 0.2s ease; z-index: 200; }
.nav-links > li:hover .dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.dropdown a { display: block; padding: 0.55rem 1.2rem; font-size: 0.82rem; color: var(--text-mid); font-weight: 500; }
.dropdown a:hover { background: var(--savanna); color: var(--espresso); padding-left: 1.5rem; }
.nav-actions { display: flex; align-items: center; gap: 0.6rem; }
.nav-btn { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 1rem; border-radius: 8px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; transition: var(--ease); }
.nav-btn-outline { border: 1.5px solid var(--espresso); color: var(--espresso); }
.nav-btn-outline:hover { background: var(--espresso); color: #fff; }
.nav-btn-primary { background: var(--ochre); color: #fff; }
.nav-btn-primary:hover { background: var(--ochre-light); transform: translateY(-1px); }
.hamburger { display: none; flex-direction: column; gap: 5px; padding: 0.6rem; border-radius: 8px; border: 1.5px solid var(--border); }
.hamburger span { display: block; width: 22px; height: 2px; background: var(--forest); border-radius: 2px; transition: var(--ease); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }
.mobile-nav { display: none; background: #fff; border-top: 2px solid var(--border); padding: 1rem 2rem 2rem; max-height: 0; overflow: hidden; transition: max-height 0.35s ease; }
.mobile-nav.open { max-height: 1150px; display: block; }
.mobile-nav a { display: block; padding: 0.7rem 0; font-size: 0.9rem; font-weight: 600; color: var(--text-mid); border-bottom: 1px solid var(--border); }
.mobile-nav a:hover { color: var(--espresso); padding-left: 8px; }

/* ================================================================
   PAGE HERO
================================================================ */
.page-hero {
  /* Session 27: warm cream wave — darker caramel-cream at top, lightening to
     savanna cream at the bottom; bridges the cocoa gov-header into the page.
     5.16.16: lightened (was #C2A980→#EFE4CB) after user liked the lighter
     variant trialled on the AI page. */
   background: linear-gradient(180deg, #D8C9A5 0%, #E4D7BA 40%, #EEE5CF 75%, #F8F3E7 100%);
  padding: 0.9rem 2rem 5rem; position: relative; overflow: hidden;
}
.page-hero::before { content: ''; position: absolute; inset: 0; background-image: radial-gradient(rgba(61,46,30,0.05) 1px, transparent 1px); background-size: 28px 28px; }
/* Bottom fade ends in SAVANNA (not cream) — so every hero's lower edge flows
   into the warm savanna-tan band exactly like the AI + Publications heroes
   (whose next sections are savanna). This is the "dividing line" look.
   NOTE: AI + Publications are excluded via .page-hero--original (they already
   had this look naturally from their savanna next sections — see below). */
.page-hero::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 120px; background: linear-gradient(to top, var(--savanna), transparent); pointer-events: none; }
/* Revert AI + Publications heroes to their ORIGINAL cream fade — their savanna
   "dividing line" came from their savanna next sections, not from this fade. */
.page-hero--original::after { background: linear-gradient(to top, var(--cream), transparent); }
.page-hero-inner { max-width: 1400px; margin: 0 auto; position: relative; z-index: 1; display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 0 3rem; }
/* Universal hero grid placement — every child gets an explicit row so
   nothing auto-places side-by-side (the bug that put stats on the same
   row as the breadcrumb). Matches the Publications hero layout:
     row 1: breadcrumb (spans both columns)
     row 2: eyebrow
     row 3: h1 (col 1) + description (col 2)
     row 4: search bar (col 1) + stats (col 2)
   Pages without a description/search just have empty rows. */
.page-hero .breadcrumb { grid-column: 1 / -1; grid-row: 1; margin-bottom: 2.5rem; }
.page-hero .hero-eyebrow { grid-column: 1; grid-row: 2; }
.page-hero h1 { grid-column: 1; grid-row: 3; }
.page-hero .page-hero-desc { grid-column: 2; grid-row: 3; align-self: start; padding-top: 0.5rem; }
.page-hero .hero-search-bar { grid-column: 1; grid-row: 4; }
.page-hero .hero-stats { grid-column: 2; grid-row: 4; align-self: start; padding-top: 0.5rem; }
.page-hero .hero-pub-stats { grid-column: 2; grid-row: 4; align-self: start; padding-top: 0.5rem; }
.page-hero .hero-stat-strip { grid-column: 2; grid-row: 4; align-self: start; padding-top: 0.5rem; }
.page-hero .hero-actions { grid-column: 1; grid-row: 4; }
.page-hero .pub-hero-title { grid-column: 1; grid-row: 3; }
/* A wrapping <div> (Institutions/Projects style) spans col 1 rows 2-4 */
.page-hero .page-hero-inner > div:not(.hero-stats):not(.hero-pub-stats):not(.hero-stat-strip):not(.pub-hero-title):not(.hero-search-bar):not(.hero-actions) { grid-column: 1; grid-row: 2 / 5; }
.breadcrumb { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 2.5rem; font-size: 0.75rem; color: rgba(61,46,30,0.7); letter-spacing: 0.04em; }
.breadcrumb a { color: rgba(61,46,30,0.8); }
.breadcrumb a:hover { color: var(--ochre); }
.breadcrumb .sep { opacity: 0.4; }
.breadcrumb .current { color: var(--espresso); font-weight: 700; }
.hero-eyebrow { font-size: 0.72rem; letter-spacing: 0.24em; text-transform: uppercase; color: #6E3F0A; font-weight: 800; margin-bottom: 0.8rem; display: flex; align-items: center; gap: 0.6rem; }
.hero-eyebrow::before { content: ''; display: block; width: 28px; height: 2px; background: #6E3F0A; }
.hero-eyebrow::after { content: '\2726'; font-size: 0.55rem; color: #7A4A0E; opacity: 0.85; }
.page-hero h1 { font-size: clamp(2.2rem, 4vw, 3.4rem); font-weight: 900; color: #2A1A0A; line-height: 1.1; margin-bottom: 0.9rem; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
.page-hero h1 em { font-style: italic; font-weight: 900; color: #7A4A0E; text-shadow: 0 1px 0 rgba(255,255,255,0.4); }
/* Decorative tapering ochre swoosh under the H1 (typography sparkle) */
.page-hero h1::after { content: ''; display: block; width: 92px; height: 4px; margin-top: 0.85rem; border-radius: 3px; background: linear-gradient(90deg, #7A4A0E 0%, rgba(122,74,14,0.25) 70%, transparent 100%); }
.page-hero-desc { font-size: 0.96rem; color: #3A2C1E; line-height: 1.8; max-width: 620px; margin-bottom: 2rem; }

/* Hero stats strip */
.hero-stats { display: flex; gap: 2.5rem; flex-wrap: wrap; }
.hero-stat .num { font-family: 'Playfair Display', serif; font-size: 1.8rem; font-weight: 900; color: var(--ochre); display: block; line-height: 1; }
.hero-stat .lbl { font-size: 0.68rem; color: rgba(61,46,30,0.65); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 0.15rem; }

/* Institutions hero: raise the summary stats a bit off the bottom edge */
.page-hero--institutions .hero-stats { margin-bottom: 2.5rem; }

/* ================================================================
   FILTER TABS
================================================================ */
.filter-tabs-bar {
  background: #fff; border-bottom: 1px solid var(--border);
  position: sticky; top: 66px; z-index: 300; box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.filter-tabs-inner { max-width: 1400px; margin: 0 auto; padding: 0 2rem; }
.filter-tabs { display: flex; align-items: center; gap: 0; overflow-x: auto; scrollbar-width: none; }
.filter-tabs::-webkit-scrollbar { display: none; }
.filter-tab {
  padding: 1rem 1.3rem; font-size: 0.8rem; font-weight: 600; color: var(--text-mid);
  white-space: nowrap; border-bottom: 3px solid transparent; cursor: pointer; transition: var(--ease);
  background: none; border-top: none; border-left: none; border-right: none;
  display: flex; align-items: center; gap: 0.4rem;
}
.filter-tab:hover { color: var(--forest); background: var(--ochre-pale); }
.filter-tab.active { color: var(--forest); border-bottom-color: var(--ochre); background: var(--ochre-pale); }
.filter-tab .count { background: var(--border); color: var(--text-light); font-size: 0.64rem; padding: 0.1rem 0.45rem; border-radius: 100px; font-weight: 700; }
.filter-tab.active .count { background: var(--ochre-pale); color: var(--ochre); }

/* ================================================================
   PROJECTS OVERVIEW CARDS
================================================================ */
.projects-overview { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }

.projects-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.8rem; }

.project-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-sm); border: 1.5px solid var(--border);
  transition: var(--ease); display: flex; flex-direction: column;
}
.project-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: rgba(200,135,26,0.2); }

.project-card-cover {
  height: 200px; position: relative; overflow: hidden;
}
.project-cover-inner {
  width: 100%; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 0.5rem; position: relative;
}
.project-cover-inner .cover-icon { font-size: 3.5rem; filter: drop-shadow(0 2px 8px rgba(0,0,0,0.3)); }
.project-cover-inner .cover-num {
  font-family: 'Playfair Display', serif; font-size: 0.8rem; font-weight: 700;
  color: rgba(255,255,255,0.6); letter-spacing: 0.2em; text-transform: uppercase;
}

/* Status badge */
.project-status {
  position: absolute; top: 0.9rem; left: 0.9rem;
  font-size: 0.6rem; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700;
  padding: 0.25rem 0.75rem; border-radius: 100px;
}
.status-active    { background: rgba(34,197,94,0.9);  color: #fff; }
.status-completed { background: rgba(27,58,92,0.85);  color: #93C5FD; }
.status-ongoing   { background: rgba(200,135,26,0.9); color: #fff; }

/* Funder badge */
.project-funder {
  position: absolute; bottom: 0.9rem; right: 0.9rem;
  font-size: 0.58rem; font-weight: 700; letter-spacing: 0.06em;
  background: rgba(0,0,0,0.5); backdrop-filter: blur(6px); color: rgba(255,255,255,0.9);
  padding: 0.2rem 0.6rem; border-radius: 6px;
}

.project-card-body { padding: 1.5rem 1.5rem 1rem; flex: 1; display: flex; flex-direction: column; }
.project-number { font-size: 0.62rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); font-weight: 700; margin-bottom: 0.3rem; }
.project-card-body h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; margin-bottom: 0.7rem; }
.project-card-body p { font-size: 0.8rem; color: var(--text-mid); line-height: 1.7; flex: 1; }

/* Project meta pills */
.project-meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1rem; }
.meta-pill {
  display: flex; align-items: center; gap: 0.3rem;
  background: var(--savanna); color: var(--text-mid);
  font-size: 0.65rem; font-weight: 600; padding: 0.3rem 0.7rem; border-radius: 100px;
}

.project-card-footer {
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between;
}
.project-cost { font-size: 0.78rem; }
.project-cost .amount { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--forest); }
.project-cost .currency { font-size: 0.65rem; color: var(--text-light); display: block; margin-top: 0.1rem; }
.btn-read-more {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: var(--forest); color: #fff; padding: 0.5rem 1.1rem;
  border-radius: 8px; font-size: 0.75rem; font-weight: 700; transition: var(--ease);
}
.btn-read-more:hover { background: var(--forest-mid); transform: translateY(-1px); }

/* ================================================================
   FEATURED ACTIVE PROJECT (KLICD — full width)
================================================================ */
.featured-project {
  background: var(--savanna); padding: 3rem 2rem;
  border-top: 2px solid rgba(200,135,26,0.15);
  border-bottom: 2px solid rgba(200,135,26,0.15);
}
.featured-project-inner { max-width: 1400px; margin: 0 auto; }
.section-label {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.65rem; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 1.2rem;
}
.section-label::before { content: ''; display: block; width: 20px; height: 2px; background: var(--ochre); }

.featured-project-card {
  background: #fff; border-radius: 20px; overflow: hidden;
  box-shadow: var(--shadow-md); display: grid; grid-template-columns: 1fr 1.6fr;
}
.featured-project-visual {
  background: linear-gradient(135deg, #1A3C28 0%, #0F2018 40%, #1B3A5C 100%);
  padding: 2.5rem; display: flex; flex-direction: column; justify-content: space-between; min-height: 420px;
}
.featured-project-visual .big-icon { font-size: 5rem; margin-bottom: auto; }
.featured-visual-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin-top: 2rem; }
.vis-stat .num { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 900; color: var(--ochre-light); }
.vis-stat .lbl { font-size: 0.62rem; color: rgba(255,255,255,0.55); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-top: 0.2rem; }
.vis-components { margin-top: 1.5rem; }
.vis-component-item {
  display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.07); font-size: 0.76rem; color: rgba(255,255,255,0.7);
}
.vis-component-item:last-child { border-bottom: none; }
.comp-num { background: var(--ochre); color: #fff; width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.65rem; font-weight: 700; flex-shrink: 0; }

.featured-project-body { padding: 2.5rem 2.5rem 2rem; }
.featured-project-body .active-badge {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: rgba(34,197,94,0.1); color: #16A34A; border: 1px solid rgba(34,197,94,0.25);
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 0.3rem 0.8rem; border-radius: 100px; margin-bottom: 0.9rem;
}
.featured-project-body .active-badge::before { content: '●'; font-size: 0.5rem; }
.featured-project-body h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--text-dark); line-height: 1.25; margin-bottom: 0.4rem; }
.featured-project-body .acronym { font-size: 0.75rem; color: var(--ochre); font-weight: 700; letter-spacing: 0.1em; margin-bottom: 1rem; }
.featured-project-body p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.8; margin-bottom: 1rem; }
.featured-project-body h4 { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--forest); margin: 1.2rem 0 0.6rem; }

.project-detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-bottom: 1rem; }
.detail-item { background: var(--savanna); border-radius: 10px; padding: 0.7rem 1rem; }
.detail-item .label { font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-light); font-weight: 700; }
.detail-item .value { font-size: 0.85rem; font-weight: 600; color: var(--text-dark); margin-top: 0.15rem; }

.focus-areas { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.2rem; }
.focus-tag {
  background: var(--ochre-pale); border: 1px solid rgba(200,135,26,0.2);
  color: var(--ochre); font-size: 0.68rem; font-weight: 700;
  padding: 0.3rem 0.75rem; border-radius: 100px;
}
.featured-cta { display: flex; gap: 0.7rem; flex-wrap: wrap; margin-top: 1.5rem; }
.btn-primary-lg {
  background: var(--forest); color: #fff; padding: 0.85rem 1.8rem;
  border-radius: 10px; font-weight: 700; font-size: 0.85rem; transition: var(--ease);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-primary-lg:hover { background: var(--forest-mid); transform: translateY(-2px); }
.btn-outline-lg {
  border: 1.5px solid var(--forest); color: var(--forest); padding: 0.85rem 1.8rem;
  border-radius: 10px; font-weight: 700; font-size: 0.85rem; transition: var(--ease);
  display: inline-flex; align-items: center; gap: 0.5rem;
}
.btn-outline-lg:hover { background: var(--forest); color: #fff; }

/* ================================================================
   PROJECT DETAIL SECTIONS (individual full sections)
================================================================ */
.project-section {
  max-width: 1400px; margin: 0 auto;
  padding: 4rem 2rem; border-bottom: 1px solid var(--border);
}
.project-section:last-of-type { border-bottom: none; }

.project-section-header { display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; margin-bottom: 2.5rem; }
.project-section-header.full { grid-template-columns: 1fr; }
.project-section-eyebrow {
  font-size: 0.65rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.5rem;
  display: flex; align-items: center; gap: 0.6rem;
}
.project-section-eyebrow::before { content: ''; display: block; width: 18px; height: 2px; background: var(--ochre); }
.project-section h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.5rem, 2.5vw, 2rem); font-weight: 700; color: var(--text-dark); line-height: 1.2; }
.project-section h2 em { font-style: italic; color: var(--ochre); }

/* Status / meta ribbon */
.project-ribbon {
  display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px; padding: 0.9rem 1.2rem;
  min-width: 240px;
}
.ribbon-item { text-align: center; padding: 0 0.8rem; }
.ribbon-item:not(:last-child) { border-right: 1px solid var(--border); }
.ribbon-item .r-val { font-family: 'Playfair Display', serif; font-size: 1rem; font-weight: 700; color: var(--forest); display: block; }
.ribbon-item .r-lbl { font-size: 0.58rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-light); font-weight: 700; }

/* Two-column content split */
.two-col { display: grid; grid-template-columns: 1.2fr 1fr; gap: 3rem; align-items: start; }
.two-col.reverse { grid-template-columns: 1fr 1.2fr; }
.prose h4 { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--forest); margin: 1.3rem 0 0.5rem; }
.prose p { font-size: 0.87rem; color: var(--text-mid); line-height: 1.85; margin-bottom: 0.9rem; }
.prose p:last-child { margin-bottom: 0; }

/* Outcomes list */
.outcomes-card {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 100%);
  border-radius: 16px; padding: 1.8rem; color: #fff;
}
.outcomes-card h4 { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--ochre-light); margin-bottom: 1rem; }
.outcome-item {
  display: flex; gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08); font-size: 0.78rem; color: rgba(255,255,255,0.8); line-height: 1.5;
}
.outcome-item:last-child { border-bottom: none; }
.outcome-item::before { content: '✓'; color: var(--ochre-light); font-weight: 700; flex-shrink: 0; margin-top: 0.05rem; }

/* Achievements card */
.achievements-card {
  background: var(--savanna); border-radius: 16px; padding: 1.8rem;
  border: 1.5px solid rgba(200,135,26,0.2);
}
.achievements-card h4 { font-family: 'Playfair Display', serif; font-size: 0.95rem; color: var(--forest); margin-bottom: 1rem; }
.achievement-item {
  display: flex; gap: 0.75rem; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.06); font-size: 0.78rem; color: var(--text-mid); line-height: 1.5;
}
.achievement-item:last-child { border-bottom: none; }
.achievement-item::before { content: '★'; color: var(--ochre); font-size: 0.7rem; flex-shrink: 0; margin-top: 0.1rem; }

/* Rationalised agency card (UWEC under UWA) — ochre/cream, no green */
.rationalised-agency-card {
  margin-top: 1rem;
  background: linear-gradient(135deg, #FDFAF4 0%, #F5EDD8 100%);
  border: 1.5px solid rgba(200,135,26,0.28);
  border-radius: 16px;
  padding: 1.6rem 1.7rem;
  position: relative;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(200,135,26,0.08);
}
.rationalised-agency-card::before {
  content: "";
  position: absolute;
  top: -30px; right: -30px;
  width: 140px; height: 140px;
  background: radial-gradient(circle, rgba(229,168,60,0.14) 0%, rgba(229,168,60,0) 70%);
  pointer-events: none;
}
.ra-eyebrow {
  position: relative;
  display: inline-block;
  font-size: 0.6rem; font-weight: 700;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: #fff;
  background: var(--ochre);
  padding: 0.22rem 0.7rem;
  border-radius: 999px;
  margin: 0 0 0.8rem;
}
.ra-title {
  position: relative;
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem; font-weight: 700;
  color: var(--forest-dark);
  margin: 0 0 0.5rem;
  line-height: 1.35;
}
.ra-abbr { color: var(--ochre); font-weight: 600; font-size: 0.85rem; }
.ra-desc {
  position: relative;
  font-size: 0.8rem; line-height: 1.6;
  color: var(--text-mid);
  margin: 0 0 1rem;
}
.ra-link {
  position: relative;
  display: inline-flex; align-items: center; gap: 0.35rem;
  font-size: 0.78rem; font-weight: 700;
  color: var(--ochre);
  text-decoration: none;
  padding: 0.42rem 1rem;
  border: 1px solid rgba(200,135,26,0.35);
  border-radius: 999px;
  background: rgba(200,135,26,0.06);
  transition: all 0.2s ease;
}
.ra-link:hover {
  background: var(--ochre);
  color: #fff;
  border-color: var(--ochre);
  transform: translateY(-1px);
}

/* Components grid (for KLICD) */
.components-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.component-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px; padding: 1.2rem;
  border-left: 4px solid var(--ochre); transition: var(--ease);
}
.component-card:hover { border-color: var(--ochre); box-shadow: var(--shadow-sm); }
.component-card .comp-head { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.5rem; }
.component-card .comp-badge { background: var(--ochre); color: #fff; font-size: 0.62rem; font-weight: 700; padding: 0.2rem 0.55rem; border-radius: 6px; }
.component-card h5 { font-family: 'DM Sans', sans-serif; font-size: 0.82rem; font-weight: 700; color: var(--text-dark); }
.component-card p { font-size: 0.75rem; color: var(--text-mid); line-height: 1.65; }

/* ================================================================
   PROJECT CARD — EDITABLE COVER IMAGE SYSTEM
   Each .project-card-cover has:
     - A CSS gradient background (shows through when no photo is set)
     - .card-cover-img: the replaceable photo (transparent 1px by default)
     - .card-cover-overlay: gradient scrim + label rendered above the photo
   To add a photo: simply replace the src="data:image/gif..." value
   on .card-cover-img with your own image URL.
================================================================ */
.card-cover-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center; display: block;
  transition: transform 0.5s ease;
}
.project-card:hover .card-cover-img { transform: scale(1.05); }
.card-cover-overlay {
  position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.5) 0%, transparent 55%);
  display: flex; align-items: flex-end; padding: 0.8rem 0.9rem;
}
.cover-label {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase; color: rgba(255,255,255,0.7);
}

/* ================================================================
   INSTITUTIONS PAGE — TILE COVER IMAGES
   Each institution tile shows a photo of its head office / premises
   with a scrim so the abbreviation badge stays readable.
=============================================================== */
.inst-card .project-card-cover::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.1) 45%, rgba(0,0,0,0.35) 100%);
  pointer-events: none;
}
.inst-card .project-cover-inner { z-index: 2; }
.inst-card .project-status, .inst-card .project-funder { z-index: 3; }
.inst-card .project-cover-inner .cover-num {
  font-size: 1.15rem; letter-spacing: 0.22em; color: #fff;
  background: rgba(10,25,15,0.55); border: 1px solid rgba(255,255,255,0.25);
  padding: 0.45rem 1.1rem; border-radius: 8px; backdrop-filter: blur(2px);
}
.inst-card .project-card-cover:hover .card-cover-img { transform: scale(1.05); }

/* ================================================================
   PROJECT DETAIL SECTION — EDITABLE HERO IMAGE STRIP
   Each detail section has a .project-hero-img-wrap at the top.
   To add a header image: replace src="data:image/gif..." with your URL.
   The CSS gradient background shows through when no image is supplied.
================================================================ */
.project-hero-img-wrap {
  width: 100%; height: 260px; position: relative; overflow: hidden;
  border-radius: 16px; margin-bottom: 2.5rem;
}
.project-hero-img-wrap img {
  width: 100%; height: 100%; object-fit: cover; object-position: center; display: block;
}
.project-hero-img-wrap .hero-img-overlay {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to right, rgba(0,0,0,0.3) 0%, transparent 60%);
}

/* Sites map placeholder */
.sites-visual {
  background: linear-gradient(135deg, #0F2018 0%, #1A3C28 60%, #1B3A5C 100%);
  border-radius: 16px; padding: 2rem; min-height: 280px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem; text-align: center;
}
.sites-visual .map-icon { font-size: 4rem; }
.sites-visual h5 { font-family: 'Playfair Display', serif; font-size: 1rem; color: var(--ochre-light); }
.sites-visual p { font-size: 0.78rem; color: rgba(255,255,255,0.65); line-height: 1.6; max-width: 300px; }
.sites-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; justify-content: center; margin-top: 0.5rem; }
.sites-tag { background: rgba(200,135,26,0.2); color: var(--ochre-light); font-size: 0.65rem; font-weight: 600; padding: 0.25rem 0.65rem; border-radius: 100px; }

/* Section divider */
.section-divider {
  border: none; border-top: 2px solid var(--border);
  max-width: 1400px; margin: 0 auto 0; padding: 0 2rem;
}

/* ================================================================
   CTA STRIP
================================================================ */
.projects-cta {
  background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%);
  padding: 4rem 2rem;
}
.projects-cta-inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.projects-cta-text .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem; }
.projects-cta-text h3 { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #fff; font-weight: 700; }
.projects-cta-text p { color: rgba(255,255,255,0.7); margin-top: 0.4rem; font-size: 0.9rem; max-width: 480px; }
.cta-buttons { display: flex; gap: 0.8rem; flex-wrap: wrap; }
.cta-btn-white { background: #fff; color: var(--forest); padding: 0.9rem 1.8rem; border-radius: 10px; font-weight: 700; font-size: 0.85rem; transition: var(--ease); }
.cta-btn-white:hover { background: var(--savanna); transform: translateY(-2px); }
.cta-btn-outline-w { border: 2px solid rgba(255,255,255,0.45); color: #fff; padding: 0.9rem 1.8rem; border-radius: 10px; font-weight: 700; font-size: 0.85rem; transition: var(--ease); }
.cta-btn-outline-w:hover { border-color: #fff; background: rgba(255,255,255,0.1); }

/* ================================================================
   FOOTER
================================================================ */
footer { background: var(--text-dark); color: rgba(255,255,255,0.55); padding: 4.5rem 2rem 2rem; }
.footer-grid { max-width: 1400px; margin: 0 auto 3rem; display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 3rem; }
.footer-brand .ministry { color: #fff; font-size: 1rem; }
.footer-brand p { font-size: 0.82rem; line-height: 1.75; margin-top: 1rem; color: rgba(255,255,255,0.5); }
.footer-brand .tagline { color: var(--ochre-light); }
.footer-social { display: flex; gap: 0.6rem; margin-top: 1.2rem; }
.footer-social a { width: 36px; height: 36px; background: rgba(255,255,255,0.07); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 0.85rem; transition: var(--ease); }
.footer-social a:hover { background: var(--ochre); color: #fff; }
.footer-col h5 { font-size: 0.72rem; letter-spacing: 0.14em; text-transform: uppercase; color: #fff; font-weight: 700; margin-bottom: 1.2rem; }
.footer-col a { display: block; color: rgba(255,255,255,0.5); font-size: 0.82rem; padding: 0.3rem 0; transition: var(--ease); }
.footer-col a:hover { color: var(--ochre-light); padding-left: 4px; }
.footer-bottom { max-width: 1400px; margin: 0 auto; border-top: 1px solid rgba(255,255,255,0.07); padding-top: 1.5rem; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; font-size: 0.72rem; }
.footer-bottom-links { display: flex; gap: 1.5rem; }
.footer-bottom-links a { color: rgba(255,255,255,0.4); }
.footer-bottom-links a:hover { color: var(--ochre-light); }

/* ================================================================
   ANIMATIONS & UTILITIES
================================================================ */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }

/* ================================================================
   RESPONSIVE
================================================================ */
@media (max-width: 1100px) {
  .projects-grid { grid-template-columns: repeat(2, 1fr); }
  .featured-project-card { grid-template-columns: 1fr; }
  .featured-project-visual { min-height: 260px; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .featured-visual-stats { grid-template-columns: repeat(4, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .two-col, .two-col.reverse { grid-template-columns: 1fr; }
  .components-grid { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-section-header { grid-template-columns: 1fr; }
  .project-ribbon { flex-direction: row; flex-wrap: wrap; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; text-align: center; }
  .projects-cta-inner { flex-direction: column; }
  .utility-right { display: none; }
  .header-search { display: none; }
  .nav-links { display: none; }
  .hamburger { display: flex; }
  .hero-stats { gap: 1.5rem; }
}
/* ================================================================
   CONTACT US PAGE — ochre/forest/cream design system
================================================================ */
.contact-section { background: var(--cream); padding: 4rem 2rem 5rem; }
.contact-inner { max-width: 1400px; margin: 0 auto; }

.contact-info-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-bottom: 3rem;
}
.contact-info-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 2rem 1.6rem;
  box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.contact-info-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(200,135,26,0.25); }
.contact-info-icon {
  width: 52px; height: 52px;
  background: var(--ochre-pale);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin-bottom: 1.2rem;
}
.contact-info-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 0.8rem;
}
.contact-info-text { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; margin-bottom: 0.2rem; }
.contact-info-text a { color: var(--ochre); font-weight: 600; }
.contact-info-text a:hover { color: var(--ochre-light); }
.contact-info-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  margin-top: 0.9rem;
  color: var(--forest); font-size: 0.8rem; font-weight: 700;
}
.contact-info-link:hover { color: var(--ochre); gap: 0.5rem; }

.contact-main-grid {
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 2rem;
  align-items: start;
  margin-top: 2.5rem;
}
.contact-form-wrap {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 2.2rem;
  box-shadow: var(--shadow-sm);
}
.contact-form-head { margin-bottom: 1.6rem; }
.contact-form-head .section-eyebrow { color: var(--ochre); }
.contact-form-head p:last-child { font-size: 0.88rem; color: var(--text-mid); margin-top: 0.3rem; }

.contact-form .form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}
.contact-form .form-field { margin-bottom: 1.2rem; }
.contact-form label {
  display: block;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text-mid);
  margin-bottom: 0.45rem;
}
.contact-form input,
.contact-form select,
.contact-form textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  color: var(--text-dark);
  background: var(--cream);
  outline: none;
  transition: var(--ease);
}
.contact-form input:focus,
.contact-form select:focus,
.contact-form textarea:focus {
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px var(--ochre-pale);
  background: #fff;
}
.contact-form textarea { resize: vertical; min-height: 130px; }

.contact-map-wrap { display: flex; flex-direction: column; gap: 1.2rem; }
.contact-map-card {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.contact-map-card iframe { display: block; }
.contact-quick-card {
  background: var(--forest);
  border-radius: 16px;
  padding: 1.8rem 1.6rem;
}
.contact-quick-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  margin-bottom: 1rem;
}
.contact-quick-list { list-style: none; padding: 0; margin: 0; }
.contact-quick-list li { border-bottom: 1px solid rgba(255,255,255,0.08); }
.contact-quick-list li:last-child { border-bottom: none; }
.contact-quick-list a {
  display: block;
  padding: 0.6rem 0;
  color: rgba(255,255,255,0.75);
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--ease);
}
.contact-quick-list a:hover { color: var(--ochre-light); padding-left: 4px; }

/* Write to Us — physical postal address block */
.contact-write-wrap { margin-top: 2rem; }
.contact-write-card {
  background: var(--savanna);
  border: 1.5px solid rgba(200,135,26,0.22);
  border-radius: 18px;
  padding: 2.2rem 2.4rem;
  box-shadow: var(--shadow-sm);
  position: relative;
  overflow: hidden;
}
.contact-write-card::before {
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 180px; height: 100%;
  background: linear-gradient(135deg, rgba(200,135,26,0.10), rgba(229,168,60,0.04));
  pointer-events: none;
}
.contact-write-card .section-eyebrow { color: var(--ochre); position: relative; }
.contact-write-card .section-title { color: var(--forest); margin: 0.2rem 0 0.6rem; position: relative; }
.contact-write-card .section-title em { color: var(--ochre); font-style: italic; }
.contact-write-intro {
  color: var(--text-mid);
  font-size: 0.95rem;
  margin-bottom: 1.4rem;
  max-width: 640px;
  position: relative;
}
.contact-write-address {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  line-height: 1.85;
  color: var(--forest);
  font-style: normal;
  padding: 1.2rem 1.6rem;
  border-left: 3px solid var(--ochre);
  background: #fff;
  border-radius: 8px;
  display: inline-block;
  margin: 0;
  position: relative;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

@media (max-width: 992px) {
  .contact-info-grid { grid-template-columns: 1fr; }
  .contact-main-grid { grid-template-columns: 1fr; }
  .contact-write-card { padding: 1.8rem; }
}
@media (max-width: 768px) {
  .contact-form .form-row { grid-template-columns: 1fr; }
  .contact-form-wrap { padding: 1.6rem; }
  .contact-write-address { font-size: 0.98rem; padding: 1rem 1.2rem; }
}

/* ================================================================
   LEGAL / DOCUMENT PAGES — Privacy, Terms, Accessibility
================================================================ */
.legal-section { background: var(--cream); padding: 3.5rem 2rem 5rem; }
.legal-inner {
  max-width: 900px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
.legal-content {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 2.5rem 2.8rem;
  box-shadow: var(--shadow-sm);
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.85;
}
.legal-content h1 { display: none; }
.legal-content h2 {
  font-family: 'Playfair Display', serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--forest);
  margin: 1.8rem 0 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.legal-content h2:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.legal-content h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--forest);
  margin: 1.4rem 0 0.6rem;
}
.legal-content p { margin-bottom: 1rem; }
.legal-content p:first-of-type {
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
}
.legal-content ul { list-style: disc; margin: 0 0 1rem 1.4rem; }
.legal-content ol { list-style: decimal; margin: 0 0 1rem 1.4rem; }
.legal-content li { margin-bottom: 0.5rem; }
.legal-content a { color: var(--ochre); font-weight: 600; }
.legal-content a:hover { color: var(--ochre-light); }
.legal-content strong { color: var(--forest); }

.legal-contact-card {
  background: linear-gradient(135deg, var(--forest) 0%, var(--forest-mid) 60%, var(--sky) 100%);
  border-radius: 16px;
  padding: 2rem 2.2rem;
  color: #fff;
}
.legal-contact-card h3 {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
}
.legal-contact-card p { color: rgba(255,255,255,0.75); font-size: 0.88rem; margin-bottom: 1rem; }
.legal-contact-card ul { list-style: none; padding: 0; margin: 0 0 1.2rem; }
.legal-contact-card li { padding: 0.35rem 0; font-size: 0.85rem; color: rgba(255,255,255,0.85); }
.legal-contact-card li a { color: var(--ochre-light); font-weight: 600; }
.legal-contact-card li a:hover { color: #fff; }

@media (max-width: 768px) {
  .legal-content { padding: 1.6rem 1.4rem; }
}

/* ================================================================
   SITEMAP PAGE
================================================================ */
.sitemap-section { background: var(--cream); padding: 3.5rem 2rem 5rem; }
.sitemap-inner { max-width: 1400px; margin: 0 auto; }
.sitemap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1.8rem;
  align-items: start;
}
.sitemap-col {
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.8rem 1.8rem 1.6rem;
  box-shadow: var(--shadow-sm);
}
.sitemap-col-hdr {
  font-family: 'Playfair Display', serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 1rem;
  padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--ochre);
}
.sitemap-list { list-style: none; padding: 0; margin: 0; }
.sitemap-list li { border-bottom: 1px solid var(--border); }
.sitemap-list li:last-child { border-bottom: none; }
.sitemap-list a {
  display: block;
  padding: 0.55rem 0;
  color: var(--text-mid);
  font-size: 0.88rem;
  font-weight: 500;
  text-decoration: none;
  transition: var(--ease);
}
.sitemap-list a:hover { color: var(--ochre); padding-left: 4px; }
.sitemap-list--news li { padding: 0.55rem 0; }
.sitemap-list--news a { padding: 0; display: inline; }
.sitemap-list--news time { display: block; font-size: 0.7rem; color: var(--text-light); margin-top: 0.2rem; }
.sitemap-xml-link {
  margin-top: 2rem;
  padding: 1.2rem 1.6rem;
  background: var(--savanna);
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.sitemap-xml-link p { margin: 0; font-size: 0.85rem; color: var(--text-mid); }
.sitemap-xml-link a { color: var(--ochre); font-weight: 700; }

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

/* ================================================================
   e-SERVICES PORTAL  (archive-mtwa_service.php)
   Scoped with .esvc- prefix
=============================================================== */
.esvc-inner { max-width: 1400px; margin: 0 auto; }

.esvc-intro { background: var(--savanna); padding: 4.5rem 2rem; }
.esvc-intro-head { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.esvc-intro-head .section-label,
.esvc-intro-head h2 { text-align: center; }
.esvc-intro-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700; color: var(--forest); margin-bottom: 0.8rem;
}
.esvc-intro-head p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.75; }

.esvc-steps {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem; list-style: none; margin: 0; padding: 0;
}
.esvc-step {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 16px; padding: 2rem 1.6rem; box-shadow: var(--shadow-sm);
  position: relative; transition: var(--ease);
}
.esvc-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.esvc-step-num {
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: var(--forest); color: var(--ochre-light);
  font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900;
  margin-bottom: 1rem;
}
.esvc-step h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: 0.4rem; }
.esvc-step p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; }

.esvc-tabs {
  position: sticky; top: 0; z-index: 20;
  background: #fff; border-bottom: 1px solid var(--border);
  padding: 0.8rem 2rem; box-shadow: 0 2px 10px rgba(0,0,0,0.04);
}
.esvc-tabs-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; gap: 0.6rem; flex-wrap: wrap; align-items: center;
}
.esvc-tab {
  padding: 0.55rem 1.1rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: var(--cream);
  font-size: 0.8rem; font-weight: 600; color: var(--text-mid);
  transition: var(--ease);
}
.esvc-tab:hover { border-color: var(--ochre); color: var(--ochre); }
.esvc-tab.active { background: var(--forest); border-color: var(--forest); color: #fff; }

.esvc-section { background: var(--cream); padding: 4.5rem 2rem 5rem; }
.esvc-grid {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem; align-items: stretch;
}
.esvc-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 16px; padding: 1.8rem; box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.esvc-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: rgba(200,135,26,0.35); }
.esvc-card[hidden] { display: none; }
.esvc-card-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; margin-bottom: 1.1rem; }
.esvc-icon {
  width: 52px; height: 52px; border-radius: 12px;
  background: var(--ochre-pale); color: var(--ochre);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.esvc-icon.dashicons { width: 52px; height: 52px; font-size: 26px; line-height: 1; }
.esvc-badge {
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--forest-mid); background: rgba(45,94,62,0.1);
  padding: 0.32rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.esvc-card-title {
  font-family: 'Playfair Display', serif;
  font-size: 1.2rem; font-weight: 700; color: var(--forest);
  margin-bottom: 0.6rem; line-height: 1.3;
}
.esvc-card-desc { font-size: 0.88rem; color: var(--text-mid); line-height: 1.7; flex-grow: 1; }
.esvc-card-foot {
  margin-top: 1.4rem; padding-top: 1.1rem;
  border-top: 1px solid var(--border);
  display: flex; align-items: center; justify-content: space-between; gap: 1rem;
}
.esvc-domain {
  font-size: 0.72rem; color: var(--text-light); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; max-width: 45%;
}
.esvc-card-foot a {
  font-size: 0.82rem; font-weight: 700; color: var(--ochre);
  white-space: nowrap; display: inline-flex; align-items: center; gap: 0.3rem;
}
.esvc-card-foot a:hover { color: var(--forest); }

.esvc-empty {
  text-align: center; padding: 3.5rem 1rem; max-width: 520px; margin: 0 auto;
}
.esvc-empty[hidden] { display: none; }
.esvc-empty-icon {
  font-size: 46px; color: var(--ochre-light); opacity: 0.7;
  width: auto; height: auto; margin-bottom: 1rem;
}
.esvc-empty h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; font-weight: 700; color: var(--forest); margin-bottom: 0.5rem; }
.esvc-empty p { color: var(--text-light); font-size: 0.9rem; }

.esvc-help {
  background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%);
  padding: 4rem 2rem;
}
.esvc-help-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap;
}
.esvc-help-inner .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem; }
.esvc-help-inner h3 { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #fff; font-weight: 700; }
.esvc-help-inner p { color: rgba(255,255,255,0.7); margin-top: 0.4rem; font-size: 0.9rem; max-width: 520px; }
.esvc-help-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

@media (max-width: 992px) {
  .esvc-steps { grid-template-columns: repeat(2, 1fr); }
  .esvc-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .esvc-steps { grid-template-columns: 1fr; }
  .esvc-grid { grid-template-columns: 1fr; }
  .esvc-help-inner { flex-direction: column; align-items: flex-start; }
}

/* ================================================================
   EVENTS PAGE  (archive-mtwa_event.php / single-mtwa_event.php)
   Scoped with .evt- prefix
=============================================================== */
.evt-inner { max-width: 1400px; margin: 0 auto; }

.evt-section-head { margin-bottom: 2.5rem; }
.evt-section-head .section-label { margin-bottom: 0.6rem; }
.evt-section-head h2 {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700; color: var(--forest);
}
.evt-section-head--light .section-label { color: var(--ochre); }
.evt-section-head--light h2 { color: var(--forest); }

.evt-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.3rem; border-radius: 10px;
  font-size: 0.82rem; font-weight: 700; transition: var(--ease);
}
.evt-btn--primary { background: var(--ochre); color: #fff; }
.evt-btn--primary:hover { background: var(--ochre-light); transform: translateY(-2px); }
.evt-btn--ghost { border: 1.5px solid var(--border); color: var(--forest-mid); }
.evt-btn--ghost:hover { border-color: var(--ochre); color: var(--ochre); }

/* Featured events — asymmetric grid */
.evt-featured { background: var(--cream); padding: 5rem 2rem; }
.evt-featured-grid {
  display: grid;
  grid-template-columns: 1.55fr 1fr;
  grid-auto-rows: minmax(0, auto);
  gap: 1.8rem;
}
.evt-feat-card {
  background: #fff; border: 1.5px solid var(--border);
  border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm);
  display: flex; flex-direction: column; transition: var(--ease);
}
.evt-feat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.evt-feat-card--hero { grid-column: 1; grid-row: span 2; }
.evt-feat-card:not(.evt-feat-card--hero) { grid-column: 2; }
.evt-feat-card__media { display: block; position: relative; overflow: hidden; }
.evt-feat-card__img { width: 100%; height: 100%; object-fit: cover; display: block; }
.evt-feat-card--hero .evt-feat-card__media { height: 320px; }
.evt-feat-card:not(.evt-feat-card--hero) .evt-feat-card__media { height: 170px; }
.evt-feat-card__ph {
  display: flex; align-items: center; justify-content: center;
  height: 100%; min-height: 150px; font-size: 2.6rem;
  color: var(--ochre-light); background: var(--savanna);
}
.evt-feat-card__body { padding: 1.6rem; display: flex; flex-direction: column; flex: 1; }
.evt-feat-card__meta { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.evt-feat-card__date { font-size: 0.75rem; font-weight: 700; color: var(--ochre); }
.evt-feat-card__badge {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
  background: var(--ochre-pale); color: var(--ochre);
  padding: 0.3rem 0.7rem; border-radius: 999px;
}
.evt-feat-card__title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--forest); line-height: 1.3; margin-bottom: 0.6rem; }
.evt-feat-card__title a { color: inherit; }
.evt-feat-card__excerpt { font-size: 0.86rem; color: var(--text-mid); line-height: 1.7; flex-grow: 1; }
.evt-feat-card__foot { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin: 1rem 0; }
.evt-feat-card__venue, .evt-feat-card__time, .evt-feat-card__fee { font-size: 0.75rem; color: var(--text-light); font-weight: 600; }
.evt-feat-card__fee { color: var(--ochre); }

/* Calendar: sidebar + list */
.evt-calendar { background: var(--savanna); padding: 5rem 2rem; }
.evt-calendar__grid { display: grid; grid-template-columns: 300px 1fr; gap: 2.5rem; align-items: start; }

.evt-sidebar { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow-sm); }
.evt-sidebar-label { display: block; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--forest); margin-bottom: 0.5rem; }
.evt-search-input {
  width: 100%; padding: 0.7rem 0.9rem; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 0.85rem; font-family: inherit; color: var(--text-dark);
  background: var(--cream);
}
.evt-search-input:focus { outline: 2px solid var(--ochre); outline-offset: 1px; }
.evt-filter-group { margin-top: 1.4rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.evt-filter-title { font-size: 0.78rem; font-weight: 700; color: var(--forest); cursor: pointer; }
.evt-filter-options { margin-top: 0.7rem; display: flex; flex-direction: column; gap: 0.4rem; }
.evt-filter-checkbox { display: flex; align-items: center; gap: 0.55rem; font-size: 0.83rem; color: var(--text-mid); cursor: pointer; }
.evt-filter-checkbox input { accent-color: var(--ochre); width: 15px; height: 15px; }
.evt-filter-count { margin-left: auto; font-size: 0.7rem; color: var(--text-light); background: var(--cream); padding: 0.1rem 0.5rem; border-radius: 999px; }
.evt-clear-filters { margin-top: 1.2rem; width: 100%; padding: 0.6rem; border-radius: 10px; background: var(--savanna); color: var(--ochre); font-size: 0.78rem; font-weight: 700; }
.evt-clear-filters:hover { background: var(--ochre-pale); }

.evt-list-header { display: flex; justify-content: space-between; align-items: flex-end; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; }
.evt-list-header .section-label { margin-bottom: 0.4rem; }
.evt-list-header h2 { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 700; color: var(--forest); }
.evt-list-count { font-size: 0.85rem; color: var(--text-light); }
.evt-list-count strong { color: var(--ochre); font-size: 1.2rem; }

.evt-list { display: flex; flex-direction: column; gap: 1rem; }
.evt-row {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 1.1rem 1.4rem; display: grid; grid-template-columns: 84px 1fr auto;
  gap: 1.2rem; align-items: center; transition: var(--ease);
}
.evt-row:hover { box-shadow: var(--shadow-md); border-color: rgba(200,135,26,0.35); }
.evt-row[hidden] { display: none; }
.evt-row__date {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  background: var(--forest); color: #fff; border-radius: 12px;
  padding: 0.6rem 0.4rem; min-height: 68px;
}
.evt-row__month { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ochre-light); font-weight: 700; }
.evt-row__day { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; line-height: 1.1; }
.evt-row__cat { font-size: 0.62rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ochre); }
.evt-row__title { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--forest); margin: 0.15rem 0 0.35rem; }
.evt-row__title a { color: inherit; }
.evt-row__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.75rem; color: var(--text-light); }
.evt-row__fee { color: var(--ochre); font-weight: 700; }

.evt-empty, .evt-noresults { text-align: center; padding: 3rem 1rem; background: #fff; border: 1.5px dashed var(--border); border-radius: 14px; }
.evt-empty span, .evt-noresults span { font-size: 2.4rem; display: block; margin-bottom: 0.8rem; }
.evt-empty h3, .evt-noresults h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--forest); margin-bottom: 0.4rem; }
.evt-empty p, .evt-noresults p { font-size: 0.85rem; color: var(--text-light); }
.evt-noresults[hidden] { display: none; }

/* Key dates (dark band) */
.evt-keydates { background: #D9CCAE; padding: 5rem 2rem; }
.evt-keydates__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.evt-kdate { background: #fff; border: 1px solid var(--border); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow-sm); }
.evt-kdate__date { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); }
.evt-kdate h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--forest); margin: 0.5rem 0 0.5rem; }
.evt-kdate p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.65; }

/* CTA */
.evt-cta { background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%); padding: 4rem 2rem; }
.evt-cta__inner { max-width: 1400px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.evt-cta__inner .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem; }
.evt-cta__inner h3 { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #fff; font-weight: 700; }
.evt-cta__inner p { color: rgba(255,255,255,0.7); margin-top: 0.4rem; font-size: 0.9rem; max-width: 520px; }
.evt-cta__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Single event */
.evt-single-content { max-width: 1400px; margin: 0 auto; padding: 3rem 2rem; }
.evt-single-head { text-align: center; max-width: 820px; margin: 0 auto 2rem; }
.evt-single-cat {
  display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  background: var(--ochre-pale); color: var(--ochre); padding: 0.35rem 0.85rem; border-radius: 999px; margin-bottom: 1rem;
}
.evt-single-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.8rem); font-weight: 900; color: var(--forest); line-height: 1.15; }
.evt-single-dates { display: flex; justify-content: center; align-items: center; gap: 1rem; margin-top: 1.4rem; flex-wrap: wrap; }
.evt-single-date { display: flex; align-items: center; gap: 0.6rem; background: var(--forest); color: #fff; border-radius: 12px; padding: 0.5rem 1rem; }
.evt-single-date__dd { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 900; color: var(--ochre-light); line-height: 1; }
.evt-single-date__my { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); }
.evt-single-daterange { color: var(--ochre); font-weight: 900; }
.evt-single-hero { margin: 0 0 2rem; }
.evt-single-hero__img { width: 100%; max-height: 460px; object-fit: cover; border-radius: 18px; }
.evt-single-info {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
  background: var(--savanna); border-radius: 16px; padding: 1.4rem; margin-bottom: 2.5rem;
}
.evt-single-info__item .label { display: block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ochre); margin-bottom: 0.3rem; }
.evt-single-info__item .value { font-size: 0.85rem; color: var(--text-dark); font-weight: 600; line-height: 1.5; }
.evt-single-cta { background: var(--savanna); padding: 2.5rem 2rem; }
.evt-single-cta__inner { max-width: 1400px; margin: 0 auto; }

/* ================================================================
   EVENT COUNTDOWN TIMERS  (homepage cards, archive rows, single)
   Ochre + cream palette — no green. data-countdown JS in js/countdown.js
   ================================================================ */

/* Inline chip — homepage event cards + archive rows */
.evt-countdown {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 0.9rem;
  padding: 0.42rem 0.9rem;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: var(--ochre);
  background: linear-gradient(135deg, rgba(200,135,26,0.08), rgba(229,168,60,0.06));
  border: 1px solid rgba(200,135,26,0.30);
  border-radius: 999px;
  white-space: nowrap;
  width: fit-content;
  font-variant-numeric: tabular-nums;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.evt-countdown .evt-cd-icon {
  font-size: 0.85rem;
  line-height: 1;
  filter: hue-rotate(0deg);
}
.evt-countdown .evt-cd-text {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.event-card:hover .evt-countdown {
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(200,135,26,0.15);
}
.evt-countdown--inline { margin-top: 0.7rem; }
.evt-countdown[hidden], .evt-countdown[data-countdown][hidden] { display: none !important; }

/* Hero countdown block — single event page */
.evt-single-countdown {
  position: relative;
  margin: 0 0 2.5rem;
  padding: 2rem 2.2rem;
  border-radius: 20px;
  background: linear-gradient(135deg, #FDFAF4 0%, #F5EDD8 100%);
  border: 1.5px solid rgba(200,135,26,0.25);
  box-shadow: 0 4px 24px rgba(200,135,26,0.08);
  overflow: hidden;
}
.evt-single-countdown::before {
  content: "";
  position: absolute;
  top: -40px; right: -40px;
  width: 220px; height: 220px;
  background: radial-gradient(circle, rgba(229,168,60,0.18) 0%, rgba(229,168,60,0) 70%);
  pointer-events: none;
}
.evt-single-countdown__label {
  position: relative;
  text-align: center;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 1.1rem;
}
.evt-single-countdown__grid {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 78px;
  padding: 0.9rem 0.6rem 0.7rem;
  background: #fff;
  border-radius: 14px;
  border: 1px solid rgba(200,135,26,0.18);
  box-shadow: 0 2px 10px rgba(200,135,26,0.06);
}
.cd-num {
  font-family: 'Playfair Display', serif;
  font-size: 2.2rem;
  font-weight: 900;
  line-height: 1;
  color: var(--forest-dark);
  font-variant-numeric: tabular-nums;
  margin-bottom: 0.35rem;
}
.cd-lbl {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ochre);
}
.cd-sep {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--ochre);
  opacity: 0.45;
  align-self: center;
  margin: -0.5rem 0;
}
@media (max-width: 640px) {
  .cd-unit { min-width: 62px; padding: 0.7rem 0.4rem 0.55rem; }
  .cd-num { font-size: 1.65rem; }
  .cd-sep { display: none; }
  .evt-single-countdown { padding: 1.5rem 1rem; }
}

@media (max-width: 992px) {
  .evt-featured-grid { grid-template-columns: 1fr; }
  .evt-feat-card--hero,
  .evt-feat-card:not(.evt-feat-card--hero) { grid-column: auto; grid-row: auto; }
  .evt-calendar__grid { grid-template-columns: 1fr; }
  .evt-keydates__grid { grid-template-columns: repeat(2, 1fr); }
  .evt-single-info { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 640px) {
  .evt-keydates__grid { grid-template-columns: 1fr; }
  .evt-row { grid-template-columns: 64px 1fr; }
  .evt-row__action { grid-column: 1 / -1; }
  .evt-list-header { flex-direction: column; align-items: flex-start; }
  .evt-cta__inner { flex-direction: column; align-items: flex-start; }
  .evt-single-info { grid-template-columns: 1fr; }
}

/* ================================================================
   WTD 2026 EVENT TIMELINE CARDS  (single-mtwa_event.php)
   Scoped with .wtd-timeline .wtd-card
   Renders the OCR-extracted event timeline as attractive cards
   with date badges, instead of a plain <ul> list.
================================================================ */
.wtd-timeline { margin: 3rem 0 2rem; }
.wtd-timeline__intro {
  font-family: 'Playfair Display', serif;
  font-size: 1.15rem;
  line-height: 1.75;
  color: var(--text-dark);
  max-width: 760px;
  margin: 0 auto 2.5rem;
  text-align: center;
  padding: 1.5rem 2rem;
  border-top: 2px solid var(--ochre);
  border-bottom: 1px solid rgba(26,60,40,0.1);
  background: var(--cream);
  border-radius: 0 0 12px 12px;
}
.wtd-timeline__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.5rem;
  max-width: 1200px;
  margin: 0 auto;
}
.wtd-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(26,60,40,0.08);
  border: 1px solid rgba(26,60,40,0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  display: flex;
  min-width: 0;
}
.wtd-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 28px rgba(26,60,40,0.16);
}
.wtd-card__badge {
  flex-shrink: 0;
  width: 80px;
  background: linear-gradient(160deg, var(--forest) 0%, var(--forest-mid) 100%);
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.2rem 0.5rem;
  gap: 0.15rem;
}
.wtd-card__day {
  font-family: 'Playfair Display', serif;
  font-size: 2rem;
  font-weight: 900;
  color: var(--ochre-light);
  line-height: 1;
}
.wtd-card__month {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.8);
}
.wtd-card__body {
  flex: 1;
  padding: 1.2rem 1.4rem;
  min-width: 0;
}
.wtd-card__date {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ochre);
  margin: 0 0 0.5rem;
}
.wtd-card__desc {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text-dark);
  margin: 0;
  overflow-wrap: break-word;
}
/* Main event card — ochre accent stripe to mark the flagship day. */
.wtd-card--main {
  border: 2px solid var(--ochre);
  box-shadow: 0 4px 20px rgba(200,135,26,0.18);
}
.wtd-card--main .wtd-card__badge {
  background: linear-gradient(160deg, var(--ochre) 0%, var(--ochre-light) 100%);
}
.wtd-card--main .wtd-card__day { color: #fff; }
.wtd-card--main .wtd-card__date { color: var(--forest); }
.wtd-card--main:hover {
  box-shadow: 0 8px 28px rgba(200,135,26,0.28);
}
.wtd-timeline__source {
  font-size: 0.72rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  margin: 2rem 0 0;
}

@media (max-width: 768px) {
  .wtd-timeline__grid { grid-template-columns: 1fr; gap: 1rem; }
  .wtd-card__badge { width: 68px; padding: 1rem 0.4rem; }
  .wtd-card__day { font-size: 1.6rem; }
  .wtd-card__body { padding: 1rem 1.1rem; }
}
@media (max-width: 480px) {
  .wtd-timeline__intro { font-size: 0.88rem; margin-bottom: 1.5rem; }
  .wtd-card__desc { font-size: 0.8rem; }
}

/* ================================================================
   CAREERS & RECRUITMENT  (archive-mtwa_job / single-mtwa_job /
   page-careers-account)  Scoped with .careers- .job- .acct-
=============================================================== */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.careers-inner { max-width: 1400px; margin: 0 auto; }

.careers-how { background: var(--cream); padding: 5rem 2rem; }
.careers-how__head { text-align: center; max-width: 680px; margin: 0 auto 3rem; }
.careers-how__head .section-label,
.careers-how__head h2 { text-align: center; }
.careers-how__head h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--forest); }
.careers-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; list-style: none; margin: 0; padding: 0; }
.careers-step { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 2rem 1.6rem; box-shadow: var(--shadow-sm); transition: var(--ease); }
.careers-step:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.careers-step__num { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--forest); color: var(--ochre-light); font-family: 'Playfair Display', serif; font-size: 1.3rem; font-weight: 900; margin-bottom: 1rem; }
.careers-step h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: 0.4rem; }
.careers-step p { font-size: 0.85rem; color: var(--text-mid); line-height: 1.6; }

.careers-jobs { background: var(--savanna); padding: 5rem 2rem; }
.careers-jobs__head { display: flex; justify-content: space-between; align-items: flex-end; gap: 1.5rem; flex-wrap: wrap; margin-bottom: 1.8rem; }
.careers-jobs__head .section-label { margin-bottom: 0.4rem; }
.careers-jobs__head h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--forest); }
.careers-search__input { width: 300px; padding: 0.75rem 1rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.85rem; font-family: inherit; background: #fff; }
.careers-search__input:focus { outline: 2px solid var(--ochre); outline-offset: 1px; }

.careers-tabs { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-bottom: 1.8rem; }
.careers-tab { padding: 0.5rem 1rem; border-radius: 999px; border: 1.5px solid var(--border); background: #fff; font-size: 0.78rem; font-weight: 600; color: var(--text-mid); transition: var(--ease); }
.careers-tab:hover { border-color: var(--ochre); color: var(--ochre); }
.careers-tab.active { background: var(--forest); border-color: var(--forest); color: #fff; }

.careers-list { display: flex; flex-direction: column; gap: 1.2rem; }
.job-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 1.6rem 1.8rem; display: grid; grid-template-columns: 1fr auto;
  gap: 1.5rem; align-items: center; box-shadow: var(--shadow-sm); transition: var(--ease);
}
.job-card:hover { box-shadow: var(--shadow-md); border-color: rgba(200,135,26,0.35); }
.job-card[hidden] { display: none; }
.job-card__cat { display: inline-block; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); background: var(--ochre-pale); padding: 0.28rem 0.7rem; border-radius: 999px; margin-bottom: 0.5rem; }
.job-card__title { font-family: 'Playfair Display', serif; font-size: 1.25rem; font-weight: 700; color: var(--forest); line-height: 1.3; margin-bottom: 0.4rem; }
.job-card__title a { color: inherit; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.78rem; color: var(--text-light); margin-bottom: 0.6rem; }
.job-card__pill { background: rgba(27,58,92,0.1); color: var(--sky); padding: 0.15rem 0.6rem; border-radius: 999px; font-weight: 700; }
.job-card__desc { font-size: 0.85rem; color: var(--text-mid); line-height: 1.65; }
.job-card__side { display: flex; flex-direction: column; align-items: flex-end; gap: 0.6rem; text-align: right; }
.job-card__closing { font-size: 0.75rem; color: var(--text-mid); font-weight: 600; }
.job-card__ref { font-size: 0.7rem; color: var(--text-light); }

.careers-empty, .careers-noresults { text-align: center; padding: 3rem 1rem; background: #fff; border: 1.5px dashed var(--border); border-radius: 14px; }
.careers-empty span, .careers-noresults span { font-size: 2.4rem; display: block; margin-bottom: 0.8rem; }
.careers-empty h3, .careers-noresults h3 { font-family: 'Playfair Display', serif; font-size: 1.2rem; color: var(--forest); margin-bottom: 0.4rem; }
.careers-empty p, .careers-noresults p { font-size: 0.85rem; color: var(--text-light); }
.careers-noresults[hidden] { display: none; }

.careers-alerts { background: var(--cream); padding: 5rem 2rem; }
.careers-alerts__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; }
.careers-alerts__copy .section-label { margin-bottom: 0.6rem; }
.careers-alerts__copy h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--forest); margin-bottom: 0.8rem; }
.careers-alerts__copy p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.7; max-width: 460px; }
.careers-alerts__form { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-sm); }

.careers-field { margin-bottom: 1.1rem; }
.careers-field label { display: block; font-size: 0.78rem; font-weight: 700; color: var(--forest); margin-bottom: 0.35rem; }
.careers-field input[type="text"],
.careers-field input[type="email"],
.careers-field input[type="tel"],
.careers-field input[type="password"],
.careers-field input[type="file"],
.careers-field textarea {
  width: 100%; padding: 0.75rem 0.95rem; border: 1.5px solid var(--border);
  border-radius: 10px; font-size: 0.88rem; font-family: inherit; background: var(--cream); color: var(--text-dark);
}
.careers-field input:focus, .careers-field textarea:focus { outline: 2px solid var(--ochre); outline-offset: 1px; }
.careers-alert-cats { border: 0; padding: 0; margin: 0 0 1.2rem; }
.careers-alert-cats legend { font-size: 0.78rem; font-weight: 700; color: var(--forest); margin-bottom: 0.5rem; }
.careers-alert-cats label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0.8rem 0.4rem 0; font-size: 0.82rem; color: var(--text-mid); }
.careers-alert-cats input { accent-color: var(--ochre); }

.careers-notice { padding: 1rem 1.2rem; border-radius: 12px; font-size: 0.88rem; line-height: 1.6; margin-bottom: 1.2rem; }
.careers-notice--ok { background: rgba(15,118,110,0.1); color: #0f766e; border: 1px solid rgba(15,118,110,0.25); }
.careers-notice--err { background: rgba(220,38,38,0.08); color: #b91c1c; border: 1px solid rgba(220,38,38,0.25); }

.careers-account { background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%); padding: 4rem 2rem; }
.careers-account__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.careers-account__inner .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem; }
.careers-account__inner h3 { font-family: 'Playfair Display', serif; font-size: 1.7rem; color: #fff; font-weight: 700; }
.careers-account__inner p { color: rgba(255,255,255,0.7); margin-top: 0.4rem; font-size: 0.9rem; max-width: 520px; }
.careers-account__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.careers-contact { background: var(--savanna); padding: 3.5rem 2rem; }
.careers-contact__inner { display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.careers-contact__inner .section-label { margin-bottom: 0.4rem; }
.careers-contact__inner h3 { font-family: 'Playfair Display', serif; font-size: 1.5rem; font-weight: 700; color: var(--forest); }
.careers-contact__inner p { color: var(--text-mid); font-size: 0.9rem; max-width: 480px; }

/* Single job */
.job-single-content { max-width: 1400px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.job-single-head { border-bottom: 1px solid var(--border); padding-bottom: 1.6rem; margin-bottom: 2rem; }
.job-single-head__top { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; }
.job-single-cat { display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ochre); background: var(--ochre-pale); padding: 0.32rem 0.75rem; border-radius: 999px; }
.job-single-cat--type { color: var(--sky); background: rgba(27,58,92,0.1); }
.job-single-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--forest); line-height: 1.15; }
.job-single-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.82rem; color: var(--text-mid); margin-top: 1rem; }
.job-single-block { margin: 2rem 0; }
.job-single-block h2 { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--forest); margin-bottom: 0.9rem; }
.job-single-list { list-style: none; margin: 0; padding: 0; }
.job-single-list li { position: relative; padding: 0.45rem 0 0.45rem 1.6rem; font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; }
.job-single-list li::before { content: ''; position: absolute; left: 0; top: 1rem; width: 8px; height: 8px; border-radius: 2px; background: var(--ochre); }
.job-side-list { list-style: none; margin: 0; padding: 0; }
.job-side-list li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.55rem 0; border-bottom: 1px solid var(--border); font-size: 0.82rem; }
.job-side-list li:last-child { border-bottom: 0; }
.job-side-list span { color: var(--text-light); }
.job-side-list strong { color: var(--text-dark); text-align: right; }

.job-apply { margin-top: 2.5rem; background: var(--savanna); border-radius: 18px; padding: 2.2rem; }
.job-apply__head { margin-bottom: 1.4rem; }
.job-apply__head .section-label { margin-bottom: 0.4rem; }
.job-apply__head h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--forest); }
.job-apply__form { max-width: 720px; }
.job-apply__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.job-apply__hint { font-size: 0.8rem; color: var(--text-light); margin: 0.4rem 0 1rem; }
.job-apply__hint a { color: var(--ochre); font-weight: 700; }

/* Account page */
.careers-account-body { background: var(--cream); padding: 5rem 2rem; }
.acct-grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 2.5rem; align-items: start; }
.acct-panel { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 2.2rem; box-shadow: var(--shadow-sm); }
.acct-panel--alt { background: var(--savanna); }
.acct-title { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--forest); font-weight: 700; margin-bottom: 0.4rem; }
.acct-sub { font-size: 0.88rem; color: var(--text-light); margin-bottom: 1.4rem; }
.acct-block-title { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--forest); margin: 1.2rem 0 1rem; }
.acct-profile-hdr { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.4rem; }
.acct-avatar img { width: 64px; height: 64px; border-radius: 50%; }
.acct-logout { display: inline-block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--ochre); font-weight: 700; }
.acct-apps { list-style: none; margin: 0; padding: 0; }
.acct-app { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding: 0.9rem 0; border-bottom: 1px solid var(--border); }
.acct-app:last-child { border-bottom: 0; }
.acct-app h4 { font-size: 0.92rem; color: var(--forest); margin-bottom: 0.15rem; }
.acct-app h4 a { color: inherit; }
.acct-app__date { font-size: 0.72rem; color: var(--text-light); }
.acct-app__status { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ochre); background: var(--ochre-pale); padding: 0.3rem 0.7rem; border-radius: 999px; }
.acct-none { font-size: 0.88rem; color: var(--text-light); margin-bottom: 1rem; }

@media (max-width: 992px) {
  .careers-steps { grid-template-columns: repeat(2, 1fr); }
  .careers-alerts__grid { grid-template-columns: 1fr; }
  .acct-grid { grid-template-columns: 1fr; }
  .job-card { grid-template-columns: 1fr; }
  .job-card__side { align-items: flex-start; text-align: left; }
}

@media (max-width: 640px) {
  .careers-steps { grid-template-columns: 1fr; }
  .careers-search__input { width: 100%; }
  .job-apply__row { grid-template-columns: 1fr; }
  .careers-account__inner, .careers-contact__inner { flex-direction: column; align-items: flex-start; }
}

/* Newsletter notices on the dark homepage section */
.newsletter .careers-notice { background: #fff; }
.newsletter .careers-notice--ok { color: #0f766e; border-color: rgba(15,118,110,0.3); }
.newsletter .careers-notice--err { color: #b91c1c; border-color: rgba(220,38,38,0.3); }

/* ================================================================
   CUSTOM LOGIN PAGE  (page-login.php — MTWA-branded auth card)
   Ochre/savanna palette matching the registration page.
=============================================================== */
.login-page {
  min-height: calc(100vh - 200px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 1.5rem;
  position: relative;
  background: var(--savanna);
  overflow: hidden;
}
.login-bg {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 30% 20%, rgba(200,135,26,0.06) 0%, transparent 50%),
              radial-gradient(ellipse at 80% 80%, rgba(229,168,60,0.08) 0%, transparent 50%);
  pointer-events: none;
}
.login-card-wrapper {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 880px;
}
.login-card {
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(61,46,30,0.12), 0 8px 24px rgba(61,46,30,0.08);
  background: #fff;
  min-height: 460px;
  border: 1.5px solid var(--border);
}

/* LEFT: branding panel — ochre gradient */
.login-card__brand {
  flex: 0 0 40%;
  background: linear-gradient(160deg, var(--ochre) 0%, #B07318 60%, var(--espresso) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 3rem 2.5rem;
  position: relative;
}
.login-brand__inner {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}
.login-brand__crest {
  width: 100px;
  height: auto;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  margin-bottom: 0.5rem;
  background: rgba(255,255,255,0.95);
  border-radius: 12px;
  padding: 8px;
  box-sizing: border-box;
}
.login-brand__title {
  font-family: 'Playfair Display', serif;
  font-size: 1.25rem;
  font-weight: 700;
  line-height: 1.4;
  color: #fff;
  margin: 0;
}
.login-brand__tagline {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.85);
  font-weight: 600;
  letter-spacing: 0.05em;
  margin: 0;
}
.login-brand__divider {
  width: 48px;
  height: 2px;
  background: rgba(255,255,255,0.4);
  border-radius: 1px;
  margin: 0.5rem 0;
}
.login-brand__welcome {
  font-size: 0.8rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin: 0;
  max-width: 240px;
}
.login-brand__register {
  font-size: 0.78rem;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  transition: color 0.2s;
  margin-top: 0.5rem;
  background: rgba(255,255,255,0.15);
  padding: 0.5rem 1rem;
  border-radius: 999px;
}
.login-brand__register:hover {
  background: rgba(255,255,255,0.25);
  text-decoration: none;
}

/* RIGHT: form panel — cream background matching registration */
.login-card__form {
  flex: 1;
  padding: 3rem 3.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--cream);
}
.login-form__inner {
  width: 100%;
  max-width: 320px;
}
.login-form__heading {
  font-family: 'Playfair Display', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--forest);
  margin: 0 0 1.5rem;
}
.login-form { display: flex; flex-direction: column; gap: 1.2rem; }
.login-field { display: flex; flex-direction: column; gap: 0.4rem; }
.login-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--espresso);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.login-field input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: #fff;
  color: var(--text-dark);
  transition: border-color 0.2s, box-shadow 0.2s;
  box-sizing: border-box;
}
.login-field input:focus {
  outline: none;
  border-color: var(--ochre);
  box-shadow: 0 0 0 3px var(--ochre-pale);
}
.login-pw-wrap { position: relative; }
.login-pw-wrap input { padding-right: 2.75rem; }
.login-pw-toggle {
  position: absolute;
  right: 0.5rem;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.4rem;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
}
.login-pw-toggle:hover { color: var(--ochre); }
.login-pw-toggle--active { color: var(--ochre); }
.login-pw-toggle svg { width: 18px; height: 18px; }

.login-form__options {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: -0.3rem;
}
.login-remember {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  color: var(--text-mid);
  cursor: pointer;
}
.login-remember input { accent-color: var(--ochre); }

.login-submit {
  width: 100%;
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  color: #fff;
  background: var(--ochre);
  border: none;
  border-radius: 10px;
  cursor: pointer;
  transition: background 0.2s, transform 0.1s, box-shadow 0.2s;
  margin-top: 0.5rem;
}
.login-submit:hover { background: var(--ochre-light); box-shadow: 0 4px 16px rgba(200,135,26,0.3); }
.login-submit:active { transform: scale(0.98); }

.login-form__footer {
  display: flex;
  justify-content: space-between;
  margin-top: 1.5rem;
  font-size: 0.78rem;
}
.login-form__footer a {
  color: var(--text-light);
  text-decoration: none;
  transition: color 0.2s;
}
.login-form__footer a:hover { color: var(--ochre); }

/* Notices */
.login-notice {
  padding: 0.7rem 1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.login-notice--error {
  background: rgba(220,38,38,0.08);
  border: 1px solid rgba(220,38,38,0.2);
  color: #b91c1c;
}
.login-notice--ok {
  background: rgba(15,118,110,0.08);
  border: 1px solid rgba(15,118,110,0.2);
  color: #0f766e;
}
.login-notice--locked {
  background: var(--ochre-pale);
  border: 1px solid rgba(200,135,26,0.25);
  color: var(--ochre);
}

/* Responsive */
@media (max-width: 768px) {
  .login-card { flex-direction: column; min-height: auto; }
  .login-card__brand { flex: none; padding: 2.5rem 2rem; }
  .login-card__form { padding: 2.5rem 2rem; }
  .login-brand__crest { width: 70px; }
  .login-brand__title { font-size: 1.1rem; }
  .login-brand__welcome { display: none; }
}
@media (max-width: 480px) {
  .login-page { padding: 1.5rem 1rem; }
  .login-card__brand { padding: 2rem 1.5rem; }
  .login-card__form { padding: 2rem 1.5rem; }
  .login-form__heading { font-size: 1.3rem; }
  .login-form__footer { flex-direction: column; gap: 0.5rem; align-items: flex-start; }
}

/* ================================================================
   APPLICANT PORTAL  (page-portal.php — dashboard, tabs, cards)
=============================================================== */
.portal-hero {
  background: linear-gradient(135deg, var(--ochre) 0%, #B07318 70%, var(--espresso) 100%);
  padding: 2.5rem 2rem 2rem;
  color: #fff;
}
.portal-hero__inner { max-width: 1200px; margin: 0 auto; }
.portal-hero .breadcrumb a { color: rgba(255,255,255,0.8); }
.portal-hero .breadcrumb .sep { color: rgba(255,255,255,0.4); }
.portal-hero .breadcrumb .current { color: #fff; }
.portal-hero__head {
  display: flex; align-items: center; gap: 1.2rem;
  margin-top: 1.5rem; flex-wrap: wrap;
}
.portal-hero__avatar img {
  width: 56px; height: 56px; border-radius: 50%;
  border: 3px solid rgba(255,255,255,0.3);
}
.portal-hero__head h1 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; margin: 0; color: #fff;
}
.portal-hero__email { font-size: 0.85rem; color: rgba(255,255,255,0.7); margin: 0; }
.portal-hero__logout {
  margin-left: auto; font-size: 0.78rem; font-weight: 600;
  color: #fff; text-decoration: none;
  background: rgba(255,255,255,0.15); padding: 0.5rem 1rem; border-radius: 999px;
  transition: background 0.2s;
}
.portal-hero__logout:hover { background: rgba(255,255,255,0.25); }

.portal-body { background: var(--cream); padding: 2.5rem 2rem 4rem; }
.portal-inner { max-width: 1200px; margin: 0 auto; }

/* Tabs */
.portal-tabs {
  display: flex; gap: 0.5rem; margin-bottom: 2rem;
  border-bottom: 2px solid var(--border); padding-bottom: 0;
  overflow-x: auto; flex-wrap: nowrap;
}
.portal-tab {
  display: flex; align-items: center; gap: 0.4rem;
  padding: 0.8rem 1.2rem; font-size: 0.85rem; font-weight: 600;
  color: var(--text-mid); text-decoration: none;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  white-space: nowrap; transition: color 0.2s, border-color 0.2s;
}
.portal-tab:hover { color: var(--ochre); }
.portal-tab.is-active { color: var(--ochre); border-bottom-color: var(--ochre); }
.portal-tab__badge {
  font-size: 0.65rem; font-weight: 700; background: var(--ochre-pale);
  color: var(--ochre); padding: 0.15rem 0.5rem; border-radius: 999px;
}
.portal-tab__badge--alert { background: rgba(220,38,38,0.1); color: #b91c1c; }

/* Stats */
.portal-stats {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 2rem;
}
.portal-stat {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  padding: 1.5rem; text-align: center; box-shadow: var(--shadow-sm);
}
.portal-stat__num {
  font-family: 'Playfair Display', serif; font-size: 2.2rem; font-weight: 900;
  color: var(--forest); display: block; line-height: 1;
}
.portal-stat__label { font-size: 0.72rem; color: var(--text-light); text-transform: uppercase; letter-spacing: 0.08em; margin-top: 0.4rem; display: block; }
.portal-stat--alert .portal-stat__num { color: var(--ochre); }
.portal-stat--success .portal-stat__num { color: #0f766e; }

/* Panels */
.portal-panel {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  margin-bottom: 1.5rem; overflow: hidden; box-shadow: var(--shadow-sm);
}
.portal-panel--alert { border-color: rgba(200,135,26,0.25); }
.portal-panel__title {
  font-family: 'Playfair Display', serif; font-size: 1.1rem; color: var(--forest);
  padding: 1.2rem 1.5rem; margin: 0; border-bottom: 1px solid var(--border);
  background: var(--savanna-light);
}
.portal-panel__body { padding: 0.5rem 1.5rem 1.2rem; }

/* Section heading */
.portal-section__heading {
  font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--forest);
  margin: 0 0 1.5rem; font-weight: 700;
}

/* Interview cards (overview) */
.portal-interview-card {
  display: flex; align-items: center; gap: 1rem;
  padding: 1rem 0; border-bottom: 1px solid var(--border);
}
.portal-interview-card:last-child { border-bottom: none; }
.portal-interview-card__date {
  flex-shrink: 0; width: 52px; text-align: center;
  background: var(--ochre); color: #fff; border-radius: 10px; padding: 0.4rem;
}
.portal-interview-card__day { font-size: 1.3rem; font-weight: 900; display: block; line-height: 1; }
.portal-interview-card__mon { font-size: 0.65rem; text-transform: uppercase; letter-spacing: 0.05em; }
.portal-interview-card__body { flex: 1; }
.portal-interview-card__body h4 { font-size: 0.95rem; color: var(--forest); margin: 0 0 0.2rem; }
.portal-interview-card__body p { font-size: 0.78rem; color: var(--text-light); margin: 0; display: flex; gap: 1rem; }
.portal-interview-card__link { font-size: 0.78rem; font-weight: 600; color: var(--ochre); text-decoration: none; white-space: nowrap; }
.portal-interview-card__link:hover { text-decoration: underline; }

/* Job rows (overview) */
.portal-job-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 0.8rem 0; border-bottom: 1px solid var(--border);
  text-decoration: none; transition: background 0.2s;
}
.portal-job-row:hover { background: var(--savanna-light); }
.portal-job-row:last-child { border-bottom: none; }
.portal-job-row h4 { font-size: 0.9rem; color: var(--forest); margin: 0; }
.portal-job-row__meta { font-size: 0.75rem; color: var(--text-light); }
.portal-job-row__closing { font-size: 0.75rem; color: var(--ochre); font-weight: 600; }
.portal-view-all {
  display: block; text-align: center; padding: 0.8rem;
  font-size: 0.8rem; font-weight: 600; color: var(--ochre); text-decoration: none;
}

/* Job cards (positions tab) */
.portal-job-list { display: flex; flex-direction: column; gap: 0.8rem; }
.portal-job-card {
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 1.2rem; text-decoration: none; transition: border-color 0.2s, box-shadow 0.2s;
}
.portal-job-card:hover { border-color: var(--ochre); box-shadow: 0 4px 16px rgba(200,135,26,0.1); }
.portal-job-card__head { display: flex; justify-content: space-between; align-items: start; gap: 0.8rem; margin-bottom: 0.5rem; }
.portal-job-card__head h4 { font-size: 0.95rem; color: var(--forest); margin: 0; }
.portal-job-card__summary { font-size: 0.8rem; color: var(--text-mid); line-height: 1.5; margin: 0 0 0.6rem; }
.portal-job-card__meta { display: flex; gap: 1rem; font-size: 0.75rem; color: var(--text-light); flex-wrap: wrap; }
.portal-job-card__deadline { font-weight: 600; color: var(--ochre); }
.portal-job-card__deadline--urgent { color: #b91c1c; }

/* Application cards */
.portal-app-list { display: flex; flex-direction: column; gap: 0.6rem; }
.portal-app-card {
  display: flex; justify-content: space-between; align-items: center;
  background: #fff; border: 1.5px solid var(--border); border-radius: 12px;
  padding: 1rem 1.2rem;
}
.portal-app-card__main h4 { font-size: 0.9rem; margin: 0; }
.portal-app-card__main h4 a { color: var(--forest); text-decoration: none; }
.portal-app-card__main h4 a:hover { color: var(--ochre); }
.portal-app-card__date { font-size: 0.75rem; color: var(--text-light); }

/* Badges */
.portal-badge {
  font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em;
  padding: 0.3rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.portal-badge--neutral { background: rgba(0,0,0,0.05); color: var(--text-mid); }
.portal-badge--pending { background: rgba(200,135,26,0.1); color: var(--ochre); }
.portal-badge--info { background: rgba(59,130,246,0.1); color: #2563eb; }
.portal-badge--alert { background: rgba(220,38,38,0.1); color: #b91c1c; }
.portal-badge--ok { background: rgba(15,118,110,0.1); color: #0f766e; }
.portal-badge--err { background: rgba(220,38,38,0.1); color: #b91c1c; }

/* Interview detail (interviews tab) */
.portal-interview-detail {
  background: #fff; border: 1.5px solid var(--border); border-radius: 14px;
  margin-bottom: 1rem; overflow: hidden;
}
.portal-interview-detail.is-past { opacity: 0.6; }
.portal-interview-detail__head {
  display: flex; align-items: center; gap: 1rem;
  padding: 1.2rem 1.5rem; border-bottom: 1px solid var(--border);
  background: var(--savanna-light);
}
.portal-interview-detail__date {
  flex-shrink: 0; width: 56px; text-align: center;
  background: var(--ochre); color: #fff; border-radius: 10px; padding: 0.5rem;
}
.portal-interview-detail__day { font-size: 1.4rem; font-weight: 900; display: block; line-height: 1; }
.portal-interview-detail__mon { font-size: 0.65rem; text-transform: uppercase; }
.portal-interview-detail__head h4 { font-size: 1rem; color: var(--forest); margin: 0 0 0.2rem; }
.portal-interview-detail__head p { font-size: 0.8rem; color: var(--text-mid); margin: 0; }
.portal-interview-detail__head .portal-badge { margin-left: auto; }
.portal-interview-detail__body { padding: 1rem 1.5rem; font-size: 0.85rem; line-height: 1.6; color: var(--text-mid); }
.portal-interview-detail__body p { margin: 0.3rem 0; }
.portal-interview-detail__body strong { color: var(--forest); }
.portal-interview-detail__instr { margin-top: 0.5rem; padding: 0.8rem; background: var(--savanna-light); border-radius: 8px; }
.portal-interview-detail__actions {
  padding: 1rem 1.5rem; display: flex; gap: 0.8rem; border-top: 1px solid var(--border);
}
.portal-interview-detail__confirmed {
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: #0f766e; background: rgba(15,118,110,0.05);
}
.portal-interview-detail__declined {
  padding: 1rem 1.5rem; border-top: 1px solid var(--border);
  font-size: 0.85rem; color: #b91c1c; background: rgba(220,38,38,0.05);
}

/* Buttons */
.portal-btn {
  display: inline-flex; align-items: center; gap: 0.4rem;
  padding: 0.7rem 1.5rem; font-size: 0.85rem; font-weight: 700;
  border: none; border-radius: 10px; cursor: pointer; text-decoration: none;
  transition: background 0.2s, transform 0.1s;
}
.portal-btn--primary { background: var(--ochre); color: #fff; }
.portal-btn--primary:hover { background: var(--ochre-light); }
.portal-btn--ghost { background: transparent; color: var(--forest); border: 1.5px solid var(--border); }
.portal-btn--ghost:hover { border-color: var(--ochre); color: var(--ochre); }
.portal-btn:active { transform: scale(0.98); }
.portal-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Empty state */
.portal-empty { font-size: 0.88rem; color: var(--text-light); margin-bottom: 1rem; }

/* Notices */
.portal-notice { padding: 0.7rem 1rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 1rem; }
.portal-notice--ok { background: rgba(15,118,110,0.08); border: 1px solid rgba(15,118,110,0.2); color: #0f766e; }
.portal-notice--err { background: rgba(220,38,38,0.08); border: 1px solid rgba(220,38,38,0.2); color: #b91c1c; }

/* Profile form */
.portal-form { display: flex; flex-direction: column; gap: 1rem; max-width: 600px; }
.portal-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.portal-form__field { display: flex; flex-direction: column; gap: 0.3rem; }
.portal-form__field label { font-size: 0.75rem; font-weight: 600; color: var(--espresso); text-transform: uppercase; letter-spacing: 0.05em; }
.portal-form__field input, .portal-form__field textarea {
  width: 100%; padding: 0.7rem 1rem; font-size: 0.88rem;
  border: 1.5px solid var(--border); border-radius: 10px;
  background: #fff; color: var(--text-dark); box-sizing: border-box;
  transition: border-color 0.2s;
}
.portal-form__field input:focus, .portal-form__field textarea:focus {
  outline: none; border-color: var(--ochre); box-shadow: 0 0 0 3px var(--ochre-pale);
}

/* Responsive */
@media (max-width: 992px) {
  .portal-stats { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 768px) {
  .portal-form__row { grid-template-columns: 1fr; }
  .portal-interview-card { flex-wrap: wrap; }
  .portal-interview-card__link { width: 100%; margin-top: 0.5rem; }
  .portal-interview-detail__head { flex-wrap: wrap; }
  .portal-interview-detail__head .portal-badge { margin-left: 0; }
}
@media (max-width: 480px) {
  .portal-stats { grid-template-columns: 1fr; }
  .portal-tabs { font-size: 0.78rem; }
  .portal-tab { padding: 0.6rem 0.8rem; }
}

/* Mobile: hide the action buttons (kept in the mobile drawer) but keep the hamburger */
@media (max-width: 992px) {
  .nav-actions .nav-btn { display: none; }
}

/* ================================================================
   MOBILE ROBUSTNESS — prevent grid/flex min-content horizontal
   overflow on small screens (winning rules; appended last)
================================================================ */
@media (max-width: 768px) {
  .content-sidebar > *, .news-single-layout > *, .news-rail,
  .esvc-grid > *, .dept-grid > *, .pub-grid > *,
  .publications-layout > *, .acct-grid > *, .news-below-widgets > *,
  .evt-featured-grid > *, .evt-keydates__grid > *, .evt-calendar__grid > *,
  .careers-alerts__grid > *, .careers-list > *, .related-grid > * { min-width: 0; }

  .pillars-grid { grid-template-columns: 1fr; }
  .dept-grid { grid-template-columns: 1fr 1fr; }

  .newsletter-inner > * { min-width: 0; }
  .newsletter-form { flex-wrap: wrap; }
  .search-bar { flex-wrap: wrap; }
  .search-bar input { min-width: 0; flex: 1 1 auto; }

  .sidebar-card, .article-body, .job-single-list li, .job-single-block,
  .esvc-card, .pub-card, .pub-sidebar, .dept-card, .newsletter-text,
  .evt-feat-card, .evt-row, .evt-kdate, .related-card-body,
  .news-article-title, .job-single-title, .job-card, .acct-title,
  h1, h2, h3, h4, p, li { overflow-wrap: break-word; }
}
@media (max-width: 480px) {
  .dept-grid { grid-template-columns: 1fr; }
  .esvc-card { padding: 1.3rem; }
  .sidebar-card { padding: 1.2rem; }
  .news-single-content, .job-single-content { padding-left: 1rem; padding-right: 1rem; }
}

/* Override inline grid styles on the About structure section */
@media (max-width: 768px) {
  .dept-grid { grid-template-columns: 1fr 1fr !important; }
  .org-connector-v { margin-left: auto !important; margin-right: auto !important; }
}
@media (max-width: 480px) {
  .dept-grid { grid-template-columns: 1fr !important; }
  .cat-tabs { flex-wrap: wrap; }
}

/* About page units grid (inline-styled) — collapse on mobile */
@media (max-width: 992px) { .units-grid { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 480px) { .units-grid { grid-template-columns: 1fr !important; } }

/* Publications CTA text — prevent min-content overflow */
@media (max-width: 480px) {
  .pub-cta-inner > *, .pub-cta-text { min-width: 0; }
}

/* Hero search bar — let the input shrink on small screens */
@media (max-width: 480px) {
  .hero-search-bar input { min-width: 0; padding: 0.7rem 0.8rem; font-size: 0.85rem; }
  .hero-search-bar button { padding: 0.7rem 0.8rem; font-size: 0.8rem; }
}

/* Publications CTA form — let input shrink on small screens */
@media (max-width: 480px) {
  .pub-cta-form { min-width: 0; flex: 1 1 100%; }
  .pub-cta-form input { min-width: 0; }
  .pub-cta-form button { padding: 0.7rem 0.8rem; font-size: 0.8rem; }
}

/* ================================================================
   AI FEATURES  ("Ask the Pearl" chat widget + trip planner +
   AI & Digital Innovation page)  Scoped .pearl- .ai-
================================================================ */
.pearl-chat { position: fixed; bottom: 1.25rem; right: 1.25rem; z-index: 1000; font-family: 'DM Sans', sans-serif; }
.pearl-chat__toggle {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: var(--ochre); color: #fff; border: 1px solid rgba(255,255,255,0.45); border-radius: 999px;
  padding: 0.8rem 1.2rem; box-shadow: 0 6px 20px rgba(200,135,26,0.35), var(--shadow-lg);
  backdrop-filter: blur(3px); font-weight: 700; font-size: 0.9rem; transition: var(--ease);
}
.pearl-chat__toggle:hover { background: var(--ochre-light); transform: translateY(-2px); }
.pearl-chat__toggle:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.pearl-chat__toggle-icon { font-size: 1.1rem; }
.pearl-chat__panel {
  position: absolute; bottom: 3.6rem; right: 0; width: 340px; max-width: calc(100vw - 2.5rem);
  background: #fff; border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-lg);
  overflow: hidden; display: flex; flex-direction: column; max-height: 70vh;
}
.pearl-chat__head { background: linear-gradient(135deg, #3D2E1E 0%, #54401F 55%, #6B4E2E 100%); color: #fff; padding: 0.8rem 1rem; display: flex; justify-content: space-between; align-items: center; }
.pearl-chat__head strong { font-family: 'Playfair Display', serif; font-size: 1rem; }
.pearl-chat__head small { display: block; color: rgba(255,255,255,0.75); font-size: 0.66rem; margin-top: 0.1rem; }
.pearl-chat__close { background: none; border: none; color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; }
.pearl-chat__close:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 4px; }
.pearl-chat__messages { padding: 1rem; overflow-y: auto; flex: 1; display: flex; flex-direction: column; gap: 0.6rem; min-height: 160px; max-height: 46vh; }
.pearl-msg { display: flex; }
/* AI replies are a column: bubble on top, then the action pill and the
   feedback row BELOW the answer (horizontal), not squeezed beside it. */
.pearl-msg--ai { flex-direction: column; align-items: flex-start; }
.pearl-msg--user { justify-content: flex-end; }
.pearl-msg__bubble { max-width: 82%; padding: 0.6rem 0.9rem; border-radius: 12px; font-size: 0.85rem; line-height: 1.5; background: var(--savanna); color: var(--text-dark); white-space: pre-wrap; word-break: break-word; }
.pearl-msg--user .pearl-msg__bubble { background: var(--forest); color: #fff; }
.pearl-msg--ai .pearl-msg__bubble a { color: var(--ochre); font-weight: 700; text-decoration: underline; word-break: break-all; }
.pearl-msg--ai .pearl-msg__bubble a:hover { color: var(--ochre-light); }
.pearl-msg__bubble--typing { opacity: 0.6; }
.pearl-chat__form { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem; border-top: 1px solid var(--border); background: #fff; }
.pearl-chat__form input { flex: 1; min-width: 0; border: 1.5px solid var(--border); border-radius: 10px; padding: 0.6rem 0.8rem; font-size: 0.85rem; font-family: inherit; }
.pearl-chat__form input:focus { outline: 2px solid var(--ochre); outline-offset: 1px; }
.pearl-chat__form button { background: var(--ochre); color: #fff; border: none; border-radius: 10px; padding: 0.6rem 1rem; font-weight: 700; font-size: 0.85rem; }
.pearl-chat__form button:disabled { opacity: 0.6; }
.pearl-chat__disclaimer { font-size: 0.64rem; color: var(--text-light); text-align: center; padding: 0.4rem; background: var(--cream); }

.ai-section { background: var(--cream); padding: 5rem 2rem; }
.ai-section--alt { background: var(--savanna); }
.ai-inner { max-width: 1200px; margin: 0 auto; }
.ai-intro { text-align: center; max-width: 760px; margin: 0 auto 3rem; }
.ai-intro .section-label, .ai-intro h2 { text-align: center; }
.ai-intro h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: var(--forest); margin-bottom: 0.8rem; }
.ai-intro p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.75; }
.ai-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.ai-card { background: #fff; border: 1.5px solid var(--border); border-radius: 16px; padding: 1.6rem; box-shadow: var(--shadow-sm); transition: var(--ease); }
.ai-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.ai-card__icon { font-size: 1.8rem; display: block; margin-bottom: 0.8rem; }
.ai-card h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--forest); margin-bottom: 0.4rem; }
.ai-card p { font-size: 0.84rem; color: var(--text-mid); line-height: 1.6; }
.ai-card--cta { display: flex; flex-direction: column; gap: 1rem; justify-content: space-between; }
.ai-card--cta .evt-btn { align-self: flex-start; }
.ai-list { list-style: none; margin: 0 auto; padding: 0; max-width: 820px; }
.ai-list li { position: relative; padding: 0.8rem 0 0.8rem 1.8rem; font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; }
.ai-list li::before { content: ''; position: absolute; left: 0; top: 1.15rem; width: 9px; height: 9px; border-radius: 2px; background: var(--ochre); }
.ai-list a { color: var(--ochre); font-weight: 700; }
.ai-note { margin-top: 2.5rem; padding: 1.1rem 1.4rem; background: #fff; border-left: 4px solid var(--ochre); border-radius: 0 12px 12px 0; max-width: 860px; margin-left: auto; margin-right: auto; }
.ai-note p { font-size: 0.82rem; color: var(--text-mid); line-height: 1.65; margin: 0; }

/* Pearl purpose section (Session 27 — content discovery + sector understanding) */
.ai-section--purpose { background: var(--savanna); }
.ai-purpose { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3rem; align-items: start; max-width: 1200px; margin: 0 auto; }
.ai-purpose__intro .section-label { color: var(--ochre); font-weight: 700; }
.ai-purpose__intro h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 3vw, 2.6rem); font-weight: 700; color: var(--forest); margin-bottom: 1rem; }
.ai-purpose__intro h2 em { color: var(--ochre); }
.ai-purpose__intro p { color: var(--text-mid); font-size: 0.98rem; line-height: 1.8; }
.ai-purpose__intro strong { color: var(--espresso); }
.ai-purpose__points { display: grid; gap: 1.1rem; }
.ai-point { display: flex; gap: 1rem; align-items: flex-start; background: #fff; border: 1.5px solid var(--border); border-left: 4px solid var(--ochre); border-radius: 0 14px 14px 0; padding: 1.2rem 1.4rem; box-shadow: var(--shadow-sm); }
.ai-point__icon { font-size: 1.5rem; flex-shrink: 0; margin-top: 0.2rem; }
.ai-point h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--espresso); margin-bottom: 0.3rem; }
.ai-point p { font-size: 0.84rem; color: var(--text-mid); line-height: 1.6; margin: 0; }
@media (max-width: 900px) { .ai-purpose { grid-template-columns: 1fr; gap: 2rem; } }


.ai-planner { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; }
.ai-planner__panel { background: #fff; border: 1.5px solid var(--border); border-radius: 18px; padding: 2rem; box-shadow: var(--shadow-sm); }
.ai-planner__panel--results { background: var(--savanna); }
.ai-fieldset { border: 0; padding: 0; margin: 0 0 1.2rem; }
.ai-fieldset legend { font-size: 0.82rem; font-weight: 700; color: var(--forest); margin-bottom: 0.6rem; }
.ai-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.ai-tags label { display: inline-flex; align-items: center; gap: 0.4rem; font-size: 0.82rem; color: var(--text-mid); background: var(--cream); border: 1.5px solid var(--border); border-radius: 999px; padding: 0.4rem 0.8rem; cursor: pointer; }
.ai-tags input { accent-color: var(--ochre); }
.ai-planner__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; margin-bottom: 1.2rem; }
.ai-planner select { width: 100%; padding: 0.75rem 0.95rem; border: 1.5px solid var(--border); border-radius: 10px; font-size: 0.88rem; font-family: inherit; background: var(--cream); }
.pearl-note { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; }
#pearl-planner-results ol { margin: 1rem 0 1rem 1.3rem; padding: 0; }
#pearl-planner-results li { margin-bottom: 0.6rem; font-size: 0.88rem; color: var(--text-mid); line-height: 1.55; }
.pearl-itinerary { margin-top: 1.2rem; padding: 1.2rem 1.4rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; font-size: 0.88rem; line-height: 1.7; color: var(--text-dark); white-space: pre-wrap; word-break: break-word; }

.ai-cta { background: linear-gradient(130deg, var(--forest) 0%, var(--forest-mid) 50%, var(--sky) 100%); padding: 4rem 2rem; }
.ai-cta__inner { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 2rem; flex-wrap: wrap; }
.ai-cta__inner .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre-light); font-weight: 700; margin-bottom: 0.4rem; }
.ai-cta__inner h3 { font-family: 'Playfair Display', serif; font-size: 1.6rem; color: #fff; font-weight: 700; }
.ai-cta__inner p { color: rgba(255,255,255,0.7); margin-top: 0.4rem; font-size: 0.9rem; max-width: 520px; }
.ai-cta__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

@media (max-width: 992px) {
  .ai-cards { grid-template-columns: repeat(2, 1fr); }
  .ai-planner { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .ai-cards { grid-template-columns: 1fr; }
  .ai-planner__row { grid-template-columns: 1fr; }
  .ai-cta__inner { flex-direction: column; align-items: flex-start; }
  .pearl-chat { bottom: 0.75rem; right: 0.75rem; }
  .pearl-chat__panel { right: -0.5rem; width: calc(100vw - 2.5rem); }
}

/* Homepage AI section */
.ai-home { background: var(--savanna); padding: 3.5rem 2rem; border-top: 1px solid rgba(0,0,0,0.06); }
.ai-home__inner { max-width: 1400px; margin: 0 auto; }
.ai-home__text { max-width: 760px; }
.ai-home__text .eyebrow { font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ochre); font-weight: 700; margin-bottom: 0.4rem; }
.ai-home__text h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 700; color: var(--forest); margin-bottom: 0.6rem; }
.ai-home__text p { color: var(--text-mid); font-size: 0.95rem; line-height: 1.7; }
.ai-home__actions { display: flex; gap: 0.8rem; flex-wrap: wrap; margin-top: 1.4rem; }

/* Ensure the hidden attribute wins over display rules on AI widgets */
.pearl-chat__panel[hidden],
#pearl-planner-ai[hidden] { display: none !important; }

/* Consent checkbox */
.mtwa-consent { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.78rem; color: var(--text-mid); line-height: 1.5; cursor: pointer; }
.mtwa-consent input { accent-color: var(--ochre); margin-top: 0.15rem; flex-shrink: 0; }
.mtwa-consent a { color: var(--ochre); font-weight: 700; }
.newsletter-consent .mtwa-consent { color: rgba(255,255,255,0.85); }
.newsletter-consent .mtwa-consent a { color: var(--ochre-light); }

/* Cookie consent banner */
.mtwa-cookie {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2000;
  background: var(--forest-dark); color: #fff;
  padding: 1rem 1.5rem; display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; box-shadow: 0 -4px 20px rgba(0,0,0,0.25); font-size: 0.82rem;
}
.mtwa-cookie[hidden] { display: none !important; }
.mtwa-cookie__text { max-width: 820px; }
.mtwa-cookie__text p { margin: 0; line-height: 1.5; }
.mtwa-cookie__actions { display: flex; gap: 0.8rem; align-items: center; flex-wrap: wrap; }
.mtwa-cookie__actions button {
  background: var(--ochre); color: #fff; border: none; border-radius: 8px;
  padding: 0.5rem 1.2rem; font-weight: 700; cursor: pointer; font-size: 0.82rem;
}
.mtwa-cookie__actions button:hover { background: var(--ochre-light); }
.mtwa-cookie__actions a { color: var(--ochre-light); text-decoration: underline; }
@media (max-width: 640px) { .mtwa-cookie__actions { width: 100%; justify-content: space-between; } }

/* Consent statement inside white sidebar cards (news subscribe) — text matches --text-light */
.sidebar-consent .mtwa-consent { color: var(--text-light); }
.sidebar-consent .mtwa-consent a { color: var(--ochre); }

/* Tablet: shrink nav action buttons to prevent horizontal overflow (993-1150px window) */
@media (max-width: 1150px) {
  .nav-actions .nav-btn { padding: 0.45rem 0.6rem; font-size: 0.68rem; }
  .nav-actions { gap: 0.35rem; }
}
@media (max-width: 1040px) {
  .nav-actions .nav-btn { padding: 0.4rem 0.5rem; font-size: 0.65rem; }
  .nav-actions { gap: 0.25rem; }
  .nav-inner { padding: 0 1.2rem; }
}

/* ================================================================
   SITE SEARCH — header button, overlay + results page
   (replicated from the Uganda Museums search feature, v2 convention)
=============================================================== */
.header-search .header-search-btn {
  background: none; border: none; cursor: pointer; outline: none;
  color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 0.82rem; padding: 0.5rem 1rem; width: 100%;
  display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap;
}
.header-search .header-search-btn:hover {
  color: var(--ochre-light);
  background: rgba(200, 135, 26, 0.12);
}

.mtwa-search-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  padding: 2rem;
}
.mtwa-search-overlay.is-open { display: flex; }
.mtwa-search-backdrop {
  position: absolute; inset: 0; background: rgba(10, 20, 15, 0.72);
  backdrop-filter: blur(4px);
}
.mtwa-search-panel {
  position: relative; z-index: 1; width: 100%; max-width: 720px;
  max-height: 82vh; display: flex; flex-direction: column;
  background: var(--cream); border-radius: 16px;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35); overflow: hidden;
}
.mtwa-search-panel__hdr {
  display: flex; align-items: center; gap: 0.5rem;
  padding: 0.8rem 1rem; background: var(--forest);
}
.mtwa-search-panel__hdr input {
  flex: 1; min-width: 0;
  background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 8px; color: #fff; font-family: 'DM Sans', sans-serif;
  font-size: 1rem; padding: 0.7rem 1rem; outline: none;
}
.mtwa-search-panel__hdr input::placeholder { color: rgba(255, 255, 255, 0.5); }
.mtwa-search-close {
  background: var(--ochre); color: #fff; border: none; border-radius: 8px;
  width: 40px; height: 40px; font-size: 1.1rem; cursor: pointer;
  display: grid; place-items: center; transition: var(--ease); flex-shrink: 0;
}
.mtwa-search-close:hover { background: var(--ochre-light); }
.mtwa-search-results {
  overflow-y: auto; padding: 1rem 1.2rem;
  display: flex; flex-direction: column; gap: 1.1rem;
}
.mtwa-search-overlay__hint {
  color: var(--text-light); text-align: center; padding: 2rem 0; font-size: 0.9rem;
}
.mtwa-search-col { display: flex; flex-direction: column; gap: 0.5rem; min-width: 0; }
.mtwa-search-col__label {
  font-family: 'Playfair Display', serif; font-size: 0.9rem; text-transform: uppercase;
  letter-spacing: 0.1em; color: var(--ochre); font-weight: 700; margin-bottom: 0.2rem;
  border-bottom: 1px solid var(--savanna); padding-bottom: 0.4rem;
}
.mtwa-search-result {
  display: flex; gap: 0.8rem; align-items: flex-start;
  background: #fff; border: 1px solid rgba(26, 60, 40, 0.08); border-radius: 12px;
  padding: 0.7rem; text-decoration: none; color: var(--text-dark);
  transition: var(--ease); min-width: 0;
}
.mtwa-search-result:hover { background: var(--savanna); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.mtwa-search-result__thumb { width: 56px; height: 56px; object-fit: cover; border-radius: 8px; flex-shrink: 0; background: #ddd; }
.mtwa-search-result__body { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.mtwa-search-result__title { font-weight: 700; font-size: 0.9rem; line-height: 1.4; }
.mtwa-search-result__excerpt {
  font-size: 0.78rem; color: var(--text-light); line-height: 1.5;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.mtwa-search-result__meta { font-size: 0.72rem; color: var(--text-light); }
.mtwa-search-result mark, .srch-item mark, .srch-item__snippet mark {
  background: rgba(200, 135, 26, 0.28); color: inherit; padding: 0 2px; border-radius: 3px;
}
.mtwa-search-panel__ftr {
  display: flex; align-items: center; gap: 1rem;
  padding: 0.7rem 1.2rem; border-top: 1px solid var(--savanna);
  background: #fff; font-size: 0.8rem; color: var(--text-light);
}
.mtwa-search-clear {
  background: none; border: 1px solid var(--forest); color: var(--forest); border-radius: 6px;
  padding: 0.3rem 0.8rem; cursor: pointer; font-weight: 600; font-size: 0.75rem; transition: var(--ease);
}
.mtwa-search-clear:hover { background: var(--forest); color: #fff; }
.mtwa-search-panel__ftr a { margin-left: auto; color: var(--ochre); font-weight: 700; text-decoration: none; }
.mtwa-search-panel__ftr a:hover { text-decoration: underline; }

/* Search results page */
.srch-results { background: var(--cream); padding: 3rem 2rem 5rem; }
.srch-results__container { max-width: 980px; margin: 0 auto; }
.srch-summary { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 1.8rem; }
.srch-summary__count { font-family: 'Playfair Display', serif; font-size: 1.3rem; color: var(--forest); font-weight: 700; }
.srch-summary__keywords { font-size: 0.85rem; color: var(--text-light); }
.srch-summary__keywords strong { color: var(--forest); }
.srch-summary__tags { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; }
.srch-tag { background: var(--savanna); color: var(--forest); border-radius: 6px; padding: 0.15rem 0.6rem; font-size: 0.72rem; font-weight: 600; }
.srch-list { display: flex; flex-direction: column; gap: 1rem; }
.srch-item {
  display: flex; gap: 1.2rem; background: #fff; border: 1px solid rgba(26, 60, 40, 0.08);
  border-radius: 14px; padding: 1rem; box-shadow: var(--shadow-sm);
  min-width: 0; transition: var(--ease);
}
.srch-item:hover { box-shadow: var(--shadow-md); }
.srch-item__thumb { width: 180px; flex-shrink: 0; border-radius: 10px; overflow: hidden; }
.srch-item__thumb img { width: 100%; height: 120px; object-fit: cover; display: block; }
.srch-item__body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.4rem; }
.srch-item__meta { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.srch-item__type {
  background: var(--forest); color: var(--ochre-light); font-size: 0.62rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.1em; padding: 0.2rem 0.6rem; border-radius: 5px;
}
.srch-item__date { font-size: 0.72rem; color: var(--text-light); }
.srch-item__title { font-family: 'Playfair Display', serif; font-size: 1.05rem; margin: 0; }
.srch-item__title a { color: var(--forest); text-decoration: none; }
.srch-item__title a:hover { color: var(--ochre); }
.srch-item__snippet { font-size: 0.82rem; color: var(--text-light); line-height: 1.6; margin: 0; }
.srch-item__view { color: var(--ochre); font-weight: 700; font-size: 0.78rem; text-decoration: none; }
.srch-item__view:hover { text-decoration: underline; }
.srch-empty { text-align: center; padding: 3.5rem 1rem; }
.srch-empty__icon { font-size: 3rem; margin-bottom: 1rem; }
.srch-empty h2 { font-family: 'Playfair Display', serif; color: var(--forest); font-size: 1.5rem; margin-bottom: 0.5rem; }
.srch-empty p { color: var(--text-light); max-width: 520px; margin: 0 auto; font-size: 0.9rem; line-height: 1.7; }

/* Mobile search trigger (visible in the nav drawer) */
.mtwa-search-mobile {
  display: flex; align-items: center; gap: 0.5rem; width: 100%;
  background: var(--forest); color: #fff; border: none; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 0.9rem; font-weight: 600;
  padding: 0.8rem 1rem; cursor: pointer; margin-bottom: 0.5rem;
}
.mtwa-search-mobile:hover { background: var(--forest-mid); }

@media (max-width: 720px) {
  .srch-item { flex-direction: column; }
  .srch-item__thumb { width: 100%; }
  .srch-item__thumb img { height: 180px; }
  .mtwa-search-overlay { padding: 0.8rem; }
  .mtwa-search-results { padding: 0.8rem; }
}

/* Single publication page */
.pub-single { background: var(--cream); padding: 3rem 2rem 5rem; }
.pub-single__container { max-width: 900px; margin: 0 auto; }
.pub-single__meta { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1.5rem; }
.pub-single__meta-tag {
  background: #fff; border: 1px solid rgba(26, 60, 40, 0.12); border-radius: 8px;
  color: var(--forest); font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.9rem;
}
.pub-single__content {
  background: #fff; border: 1px solid rgba(26, 60, 40, 0.08); border-radius: 16px;
  box-shadow: var(--shadow-sm); padding: 2rem 2.2rem; margin-bottom: 1.5rem;
  font-size: 0.95rem; line-height: 1.8; color: var(--text-dark);
}
.pub-single__content p { margin: 0 0 1rem; }
.pub-single__content p:last-child { margin-bottom: 0; }
.pub-single__actions { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem; }
.pub-single__btn {
  display: inline-flex; align-items: center; gap: 0.5rem;
  padding: 0.75rem 1.6rem; border-radius: 10px;
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 700;
  text-decoration: none; transition: var(--ease);
}
.pub-single__btn--view {
  background: var(--forest); color: #fff;
}
.pub-single__btn--view:hover { background: var(--forest-mid); }
.pub-single__btn--dl {
  background: var(--ochre); color: #fff;
}
.pub-single__btn--dl:hover { background: var(--ochre-light); }
.pub-single__back a { color: var(--ochre); font-weight: 700; font-size: 0.85rem; text-decoration: none; }
.pub-single__back a:hover { text-decoration: underline; }

/* Publications hero: snug below the main menu (breadcrumb sits right under the nav
   with room to breathe — shorter hero, single-column flow so the breadcrumb gets
   full width instead of being squeezed into a narrow grid column). Scoped to
   single publications (no search bar); the archive keeps its 2-column grid. */
.page-hero--compact { padding-top: 0.9rem; padding-bottom: 3rem; }
.page-hero--compact:not(:has(.hero-search-bar)) .page-hero-inner { display: block; }
.page-hero--compact:not(:has(.hero-search-bar)) .breadcrumb { margin-bottom: 2.5rem; }
/* Single-publication hero: block flow (no search bar — no need for the grid) */
.page-hero--compact:not(:has(.hero-search-bar)) .page-hero-inner { display: block; }
/* Resource Center kicker directly under the hero title */
.pub-hero-subtitle {
  font-size: 1rem; font-weight: 700; color: var(--ochre-light);
  letter-spacing: 0.04em; margin-top: -0.4rem;
}

/* ================================================================
   EVENT GALLERIES (mtwa_gallery CPT) — single + archive + lightbox
   Theme 5.6.0
================================================================ */

/* Fallback gradient when a gallery card has no thumbnail */
.dest-card:not(:has(img)) { background: linear-gradient(135deg, var(--forest), var(--forest-dark)); }

/* ── Single gallery: hero ─────────────────────────────────────── */
.gal-hero { background: var(--cream); padding: 2.6rem 2rem 3.5rem; }
.gal-hero-inner {
  max-width: 1400px; margin: 0 auto;
  display: grid; grid-template-columns: 1.1fr 0.9fr;
  gap: 2.8rem; align-items: center;
}
.gal-hero-eyebrow {
  font-size: 0.7rem; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--ochre); font-weight: 700; margin-bottom: 0.6rem;
}
.gal-hero-title {
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.9rem, 3.4vw, 3rem);
  color: var(--forest); font-weight: 700; line-height: 1.15;
  margin-bottom: 1.1rem;
}
.gal-hero-meta { display: flex; flex-wrap: wrap; gap: 0.55rem; margin-bottom: 1.1rem; }
.gal-chip {
  display: inline-flex; align-items: center; gap: 0.2rem;
  background: #fff; border: 1px solid rgba(26,60,40,0.14);
  color: var(--forest); font-size: 0.75rem; font-weight: 600;
  padding: 0.4rem 0.9rem; border-radius: 100px;
}
.gal-hero-desc {
  font-size: 1.02rem; line-height: 1.7; color: var(--text-mid);
  font-weight: 500; margin-bottom: 0.9rem;
}
.gal-hero-body { color: var(--text-mid); font-size: 0.93rem; line-height: 1.75; }
.gal-hero-body p { margin-bottom: 0.8rem; }
.gal-hero-body p:last-child { margin-bottom: 0; }
.gal-hero-media { min-width: 0; }
.gal-hero-figure {
  position: relative; margin: 0; border-radius: 18px; overflow: hidden;
  box-shadow: var(--shadow-md); aspect-ratio: 4 / 3;
}
.gal-hero-figure img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.gal-hero-count {
  position: absolute; left: 1rem; bottom: 1rem;
  background: rgba(15,32,24,0.82); color: #fff;
  font-size: 0.75rem; font-weight: 600; letter-spacing: 0.04em;
  padding: 0.45rem 0.95rem; border-radius: 100px;
  backdrop-filter: blur(4px);
}

/* ── Single gallery: photo grid ───────────────────────────────── */
.gal-section { background: var(--savanna); padding: 4rem 2rem; }
.gal-section-inner { max-width: 1400px; margin: 0 auto; }
.gal-photos-count { color: var(--text-light); text-transform: none; letter-spacing: 0; }
.gal-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 1rem;
}
.gal-thumb {
  position: relative; display: block; padding: 0; margin: 0;
  border: none; background: none; cursor: zoom-in;
  border-radius: 14px; overflow: hidden;
  aspect-ratio: 3 / 2; text-align: left;
}
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s ease; }
.gal-thumb:hover img, .gal-thumb:focus-visible img { transform: scale(1.07); }
.gal-thumb:focus-visible { outline: 3px solid var(--ochre); outline-offset: 2px; }
.gal-thumb::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,25,15,0.6) 0%, transparent 50%);
  opacity: 0; transition: var(--ease);
}
.gal-thumb:hover::after { opacity: 1; }
.gal-thumb-zoom {
  position: absolute; top: 0.7rem; right: 0.7rem; z-index: 2;
  background: rgba(15,32,24,0.72); color: #fff;
  width: 2.1rem; height: 2.1rem; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-size: 0.95rem; opacity: 0; transition: var(--ease);
}
.gal-thumb:hover .gal-thumb-zoom, .gal-thumb:focus-visible .gal-thumb-zoom { opacity: 1; }
.gal-thumb-cap {
  position: absolute; left: 0.8rem; right: 0.8rem; bottom: 0.8rem; z-index: 2;
  color: #fff; font-size: 0.78rem; line-height: 1.4;
  text-shadow: 0 1px 3px rgba(0,0,0,0.6); opacity: 0; transition: var(--ease);
}
.gal-thumb:hover .gal-thumb-cap { opacity: 1; }

/* ── Lightbox ─────────────────────────────────────────────────── */
.gal-lightbox {
  position: fixed; inset: 0; z-index: 9990;
  background: rgba(10,25,15,0.94);
  display: flex; align-items: center; justify-content: center;
  flex-direction: column; padding: 1.5rem;
}
.gal-lightbox[hidden] { display: none; }
.gal-lb-figure {
  margin: 0 auto; max-width: min(1200px, 94vw);
  display: flex; flex-direction: column; align-items: center; gap: 0.8rem;
}
.gal-lb-figure img {
  max-width: 100%; max-height: 78vh; width: auto; height: auto;
  object-fit: contain; border-radius: 10px;
  box-shadow: var(--shadow-lg);
}
.gal-lb-caption {
  color: rgba(255,255,255,0.85); font-size: 0.9rem; text-align: center;
  max-width: 760px; line-height: 1.5; min-height: 1.2em;
}
.gal-lb-counter {
  position: absolute; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
  color: rgba(255,255,255,0.75); font-size: 0.8rem; letter-spacing: 0.08em;
  background: rgba(15,32,24,0.65); padding: 0.35rem 0.9rem; border-radius: 100px;
}
.gal-lb-close, .gal-lb-prev, .gal-lb-next {
  position: absolute; z-index: 2;
  background: rgba(255,255,255,0.12); color: #fff; border: 1px solid rgba(255,255,255,0.25);
  width: 3rem; height: 3rem; border-radius: 50%;
  font-size: 1.5rem; line-height: 1; cursor: pointer; transition: var(--ease);
  display: flex; align-items: center; justify-content: center;
}
.gal-lb-close:hover, .gal-lb-prev:hover, .gal-lb-next:hover {
  background: var(--ochre); border-color: var(--ochre);
}
.gal-lb-close { top: 1.2rem; right: 1.2rem; }
.gal-lb-prev  { left: 1.2rem;  top: 50%; transform: translateY(-50%); }
.gal-lb-next  { right: 1.2rem; top: 50%; transform: translateY(-50%); }
.gal-lb-close:focus-visible, .gal-lb-prev:focus-visible, .gal-lb-next:focus-visible {
  outline: 3px solid var(--ochre-light); outline-offset: 2px;
}

/* ── Single gallery: more galleries ───────────────────────────── */
.gal-more { background: var(--cream); padding: 4rem 2rem 5rem; }
.gal-more-inner { max-width: 1400px; margin: 0 auto; }
.gal-more-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem;
}
.gal-more-card {
  background: #fff; border: 1px solid var(--border); border-radius: 14px;
  overflow: hidden; box-shadow: var(--shadow-sm); display: block;
  transition: var(--ease);
}
.gal-more-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gal-more-card img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.gal-more-card-body { padding: 1rem 1.1rem 1.15rem; min-width: 0; }
.gal-more-card-body h3 {
  font-family: 'Playfair Display', serif; font-size: 1.05rem;
  color: var(--forest); font-weight: 700; margin: 0 0 0.6rem;
}
.gal-more-card-body .gal-chip { margin-bottom: 0; }

/* ── Archive /galleries ───────────────────────────────────────── */
.gal-archive { background: var(--cream); padding: 2rem 2rem 5rem; }
.gal-archive-inner { max-width: 1400px; margin: 0 auto; }
.gal-archive-stats {
  display: flex; flex-wrap: wrap; gap: 1.5rem;
  background: var(--forest); color: #fff; border-radius: 14px;
  padding: 1.1rem 1.6rem; margin-bottom: 2.2rem;
}
.gal-archive-stat { font-size: 0.85rem; color: rgba(255,255,255,0.82); }
.gal-archive-stat strong {
  font-family: 'Playfair Display', serif; font-size: 1.5rem; color: var(--ochre-light);
  margin-right: 0.3rem;
}
.gal-archive-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.4rem;
}
.gal-card {
  background: #fff; border: 1px solid var(--border); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-sm); display: block;
  transition: var(--ease);
}
.gal-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); }
.gal-card-img { position: relative; }
.gal-card-img img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.gal-card-count {
  position: absolute; right: 0.8rem; bottom: 0.8rem;
  background: rgba(15,32,24,0.8); color: #fff;
  font-size: 0.72rem; font-weight: 600; padding: 0.3rem 0.75rem; border-radius: 100px;
}
.gal-card-body { padding: 1.15rem 1.2rem 1.3rem; min-width: 0; }
.gal-card-body .gal-chip { margin-bottom: 0.6rem; }
.gal-card-body h3 {
  font-family: 'Playfair Display', serif; font-size: 1.25rem;
  color: var(--forest); font-weight: 700; margin: 0 0 0.35rem;
}
.gal-card-dates { color: var(--text-light); font-size: 0.8rem; font-weight: 600; }
.gal-card-body p { color: var(--text-mid); font-size: 0.86rem; line-height: 1.6; margin: 0.55rem 0 0.8rem; }
.gal-card-link { color: var(--ochre); font-weight: 700; font-size: 0.82rem; }
.gal-card:hover .gal-card-link { text-decoration: underline; }
.gal-archive-empty {
  background: #fff; border: 1px dashed rgba(26,60,40,0.25);
  border-radius: 14px; padding: 3rem; text-align: center; color: var(--text-light);
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 992px) {
  .gal-hero-inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .gal-hero-media { order: -1; }
  .gal-hero-media figure { max-width: 640px; margin: 0 auto; }
  .gal-more-grid { grid-template-columns: repeat(2, 1fr); }
  .gal-lb-prev  { left: 0.6rem; }
  .gal-lb-next  { right: 0.6rem; }
}
@media (max-width: 640px) {
  .gal-hero { padding: 2rem 1.2rem 2.5rem; }
  .gal-section, .gal-more, .gal-archive { padding: 2.5rem 1.2rem; }
  .gal-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 0.7rem; }
  .gal-more-grid { grid-template-columns: 1fr; }
  .gal-archive-grid { grid-template-columns: 1fr; }
  .gal-lb-close { top: 0.8rem; right: 0.8rem; }
  .gal-lb-close, .gal-lb-prev, .gal-lb-next { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .gal-lb-figure img { max-height: 70vh; }
}

/* ================================================================
   PEARL ASSISTANT v2 — chips, action card, feedback, voice (theme 5.7.0)
================================================================ */

/* Mic button — prominent voice-input control, distinct from Send */
.pearl-chat__mic {
  background: var(--forest) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 50% !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  min-width: 2.4rem !important;
  padding: 0 !important;
  font-size: 1.05rem !important;
  cursor: pointer;
  flex: 0 0 auto;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.15s;
}
.pearl-chat__mic:hover { background: var(--forest-mid) !important; transform: scale(1.08); }
.pearl-chat__mic:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.pearl-chat__mic.is-listening {
  background: var(--ochre) !important;
  color: #fff !important;
  animation: pearl-pulse 1.2s ease-in-out infinite;
  position: relative;
}
.pearl-chat__mic.is-listening::after {
  content: '';
  position: absolute;
  top: -2px; right: -2px;
  width: 8px; height: 8px;
  background: var(--ochre);
  border: 2px solid #fff;
  border-radius: 50%;
  animation: pearl-rec-dot 0.8s ease-in-out infinite;
}
.pearl-chat__mic[hidden] { display: none !important; }
.pearl-chat__mic-label {
  font-size: 0.68rem; font-weight: 700; color: var(--ochre);
  white-space: nowrap; flex: 0 0 auto;
  animation: pearl-rec-dot 0.8s ease-in-out infinite;
}
.pearl-chat__mic-label[hidden] { display: none !important; }
@media (prefers-reduced-motion: reduce) {
  .pearl-chat__mic-label { animation: none; }
}
@keyframes pearl-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(200,135,26,0.5); }
  50%      { box-shadow: 0 0 0 8px rgba(200,135,26,0); }
}
@keyframes pearl-rec-dot {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.3; }
}
@media (prefers-reduced-motion: reduce) {
  .pearl-chat__mic.is-listening { animation: none; }
  .pearl-chat__mic.is-listening::after { animation: none; opacity: 1; }
  .pearl-chat__mic:hover { transform: none; }
}

/* ================================================================
   GLOBAL REDUCED-MOTION GUARD (WCAG 2.3.3) — disables Ken Burns,
   scroll-reveal transitions, and hero auto-advance animations.
   ================================================================ */
@media (prefers-reduced-motion: reduce) {
  .hero-slide__bg { transition: none !important; transform: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }
  .reveal-delay-1, .reveal-delay-2, .reveal-delay-3, .reveal-delay-4 { transition-delay: 0s !important; }
  * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* Quick-reply chips */
.pearl-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.1rem 0 0.2rem; }
.pearl-chip {
  background: #fff !important; color: var(--forest) !important;
  border: 1.5px solid var(--ochre) !important; border-radius: 100px !important;
  padding: 0.35rem 0.8rem !important; font-size: 0.75rem !important; font-weight: 600 !important;
  cursor: pointer; transition: var(--ease);
}
.pearl-chip:hover { background: var(--ochre) !important; color: #fff !important; }
.pearl-chip:focus-visible { outline: 2px solid var(--forest); outline-offset: 2px; }
.pearl-chip--link { background: var(--ochre) !important; color: #fff !important; text-decoration: none; display: inline-flex; align-items: center; gap: 0.3rem; }
.pearl-chip--link::after { content: '\2192'; font-weight: 700; }
.pearl-chip--link:hover { background: var(--ochre-light) !important; color: #fff !important; }

/* Result-card action link under an answer */
.pearl-action {
  display: inline-flex; align-items: center; gap: 0.35rem;
  margin-top: 0.55rem; padding: 0.45rem 0.9rem;
  background: var(--forest); color: #fff !important;
  border-radius: 100px; font-size: 0.78rem; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
}
.pearl-action:hover { background: var(--forest-mid); }

/* Green-button suggestions (primary + related actions) */
.pearl-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.pearl-actions__btn {
  display: inline-flex; align-items: center; gap: 0.3rem;
  padding: 0.4rem 0.8rem; border-radius: 100px; font-size: 0.75rem; font-weight: 700;
  text-decoration: none !important; white-space: nowrap;
  border: 1.5px solid var(--forest); background: #fff; color: var(--forest) !important;
}
.pearl-actions__btn--primary { background: var(--forest); color: #fff !important; }
.pearl-actions__btn:hover { background: var(--forest-mid); color: #fff !important; }
.pearl-actions__btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }

/* Related on-site links */
.pearl-related {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.7rem;
  margin-top: 0.5rem; font-size: 0.72rem; line-height: 1.5;
}
.pearl-related__label { color: var(--text-light); font-weight: 600; }
.pearl-related__link { color: var(--ochre); font-weight: 700; text-decoration: underline; }
.pearl-related__link:hover { color: var(--ochre-light); }
.pearl-related__link:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; border-radius: 2px; }

/* Feedback buttons */
.pearl-fb {
  display: flex; align-items: center; gap: 0.4rem;
  margin-top: 0.5rem; font-size: 0.72rem; color: var(--text-light);
}
.pearl-fb__note { margin-right: 0.2rem; }
.pearl-fb__btn {
  background: #fff !important; color: var(--text-mid) !important;
  border: 1px solid var(--border) !important; border-radius: 50% !important;
  width: 1.7rem !important; height: 1.7rem !important; padding: 0 !important;
  font-size: 0.85rem !important; line-height: 1; cursor: pointer;
}
.pearl-fb__btn:hover { border-color: var(--ochre) !important; }
.pearl-fb__btn:focus-visible { outline: 2px solid var(--ochre); outline-offset: 2px; }
.pearl-fb__btn:disabled { opacity: 0.45; cursor: default; }
.pearl-fb__btn.is-selected { background: var(--ochre) !important; color: #fff !important; }

/* ================================================================
   NOTICES & ADVERTS (archive-mtwa_advert.php / single-mtwa_advert.php)
   Government-style notices hub: category tabs, status filter, cards.
=============================================================== */

/* Notice status badges (Open / Closes today / Closed) */
.notice-status {
  display: inline-flex; align-items: center; gap: 0.3rem;
  font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em;
  padding: 0.28rem 0.7rem; border-radius: 999px; white-space: nowrap;
}
.notice-status--open   { background: rgba(15,118,110,0.1);  color: #0f766e; border: 1px solid rgba(15,118,110,0.25); }
.notice-status--closing{ background: var(--ochre-pale);     color: #9a5b00; border: 1px solid rgba(200,135,26,0.35); }
.notice-status--closed { background: rgba(107,124,113,0.12);color: var(--text-light); border: 1px solid var(--border); }

/* Page body + toolbar */
.notices-body { max-width: 1400px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.notices-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; flex-wrap: wrap; margin-bottom: 1.6rem;
}
.notice-status-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.notice-status-pill {
  padding: 0.45rem 1rem; border-radius: 999px;
  border: 1.5px solid var(--border); background: #fff;
  font-size: 0.78rem; font-weight: 600; color: var(--text-mid);
  cursor: pointer; transition: var(--ease); font-family: inherit;
}
.notice-status-pill:hover { border-color: var(--ochre); color: var(--ochre); }
.notice-status-pill.active { background: var(--forest); border-color: var(--forest); color: #fff; }
.notice-status-pill[hidden] { display: none; }
.notices-count { font-size: 0.8rem; color: var(--text-light); }

/* Sections (groups) */
.notices-groups { display: flex; flex-direction: column; gap: 2.4rem; }
.notice-group[hidden] { display: none; }
.notice-group-head {
  display: flex; align-items: baseline; gap: 0.8rem;
  margin-bottom: 1rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--savanna);
}
.notice-group-head h2 {
  font-family: 'Playfair Display', serif; font-size: 1.5rem;
  font-weight: 700; color: var(--forest); margin: 0;
}
.notice-group-count { font-size: 0.72rem; font-weight: 700; color: var(--ochre); background: var(--ochre-pale); padding: 0.2rem 0.65rem; border-radius: 999px; }
.notices-list { display: flex; flex-direction: column; gap: 1.1rem; }

/* Notice cards */
.notice-card {
  display: grid; grid-template-columns: 1fr auto; gap: 1.4rem;
  align-items: center; background: #fff;
  border: 1.5px solid var(--border); border-radius: 16px;
  padding: 1.5rem 1.7rem; box-shadow: var(--shadow-sm);
  transition: var(--ease);
}
.notice-card:hover { box-shadow: var(--shadow-md); border-color: rgba(200,135,26,0.35); transform: translateY(-2px); }
.notice-card[hidden] { display: none; }
.notice-card__top { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.notice-card__cat {
  font-size: 0.62rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--ochre); background: var(--ochre-pale);
  padding: 0.28rem 0.7rem; border-radius: 999px;
}
.notice-card__title { font-family: 'Playfair Display', serif; font-size: 1.22rem; font-weight: 700; color: var(--forest); line-height: 1.3; margin-bottom: 0.45rem; }
.notice-card__title a { color: inherit; }
.notice-card__title a:hover { color: var(--ochre); }
.notice-card__meta { display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; font-size: 0.78rem; color: var(--text-light); margin-bottom: 0.55rem; }
.notice-card__closing { font-weight: 600; color: var(--text-mid); }
.notice-card__desc { font-size: 0.85rem; color: var(--text-mid); line-height: 1.65; }
.notice-card__side { display: flex; flex-direction: column; align-items: stretch; gap: 0.6rem; min-width: 210px; }
.notice-card__dl { justify-content: center; }
.notice-card__size { font-weight: 500; opacity: 0.75; }

/* Empty state */
.notices-empty { margin-top: 1rem; }

/* Supplier guidance section */
.notice-guide { background: var(--savanna); padding: 4rem 2rem; border-top: 2px solid rgba(0,0,0,0.05); }
.notice-guide-inner { max-width: 1400px; margin: 0 auto; }
.notice-guide-head { max-width: 760px; margin-bottom: 2.6rem; }
.notice-guide-head .section-label { margin-bottom: 0.4rem; }
.notice-guide-head h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); color: var(--forest); margin-bottom: 0.8rem; }
.notice-guide-head p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.75; }
.notice-guide-steps { list-style: none; margin: 0 0 2.2rem; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.notice-guide-step {
  background: #fff; border: 1.5px solid var(--border); border-radius: 16px;
  padding: 1.6rem 1.6rem 1.8rem; box-shadow: var(--shadow-sm);
}
.notice-guide-step__num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.2rem; height: 2.2rem; border-radius: 50%;
  background: var(--forest); color: var(--ochre-light);
  font-family: 'Playfair Display', serif; font-weight: 900; font-size: 1.05rem;
  margin-bottom: 0.9rem;
}
.notice-guide-step h3 { font-family: 'Playfair Display', serif; font-size: 1.05rem; color: var(--forest); margin-bottom: 0.45rem; }
.notice-guide-step p { font-size: 0.84rem; color: var(--text-mid); line-height: 1.65; margin: 0; }
.notice-guide-actions { display: flex; gap: 0.8rem; flex-wrap: wrap; }

/* Procurement contact strip */
.notice-contact { padding: 3.5rem 2rem; background: var(--cream); }
.notice-contact-inner {
  max-width: 1400px; margin: 0 auto;
  display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap;
  background: #fff; border: 1.5px solid var(--border); border-radius: 18px;
  padding: 2.2rem 2.4rem; box-shadow: var(--shadow-sm);
}
.notice-contact-inner .section-label { margin-bottom: 0.4rem; }
.notice-contact-inner h3 { font-family: 'Playfair Display', serif; font-size: 1.4rem; color: var(--forest); margin-bottom: 0.5rem; }
.notice-contact-inner p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.7; max-width: 640px; margin: 0; }
.notice-contact__actions { flex-shrink: 0; }

/* Single notice page */
.notice-single-content { max-width: 1400px; margin: 0 auto; padding: 2.5rem 2rem 4rem; }
.notice-single-head { border-bottom: 1px solid var(--border); padding-bottom: 1.6rem; margin-bottom: 2rem; }
.notice-single-head__top { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-bottom: 0.7rem; align-items: center; }
.notice-single-cat {
  display: inline-block; font-size: 0.64rem; font-weight: 700; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ochre); background: var(--ochre-pale);
  padding: 0.32rem 0.75rem; border-radius: 999px;
}
.notice-single-title { font-family: 'Playfair Display', serif; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; color: var(--forest); line-height: 1.15; }
.notice-single-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.4rem; font-size: 0.84rem; color: var(--text-mid); margin-top: 1rem; }
.notice-single-meta strong { color: var(--text-dark); font-weight: 700; }

/* PDF download box */
.notice-dl {
  display: grid; grid-template-columns: auto 1fr auto; gap: 1.2rem;
  align-items: center; background: var(--savanna);
  border: 1.5px solid rgba(200,135,26,0.25); border-radius: 16px;
  padding: 1.6rem 1.8rem; margin-top: 2rem;
}
.notice-dl__icon {
  width: 3rem; height: 3rem; border-radius: 12px;
  background: var(--forest); color: var(--ochre-light);
  display: flex; align-items: center; justify-content: center; font-size: 1.4rem;
}
.notice-dl__body .section-label { margin-bottom: 0.25rem; }
.notice-dl__body h2 { font-family: 'Playfair Display', serif; font-size: 1.25rem; color: var(--forest); margin-bottom: 0.3rem; }
.notice-dl__body p { font-size: 0.84rem; color: var(--text-mid); line-height: 1.6; margin: 0; }
.notice-dl__actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.4rem; }
.notice-dl__size { font-size: 0.72rem; color: var(--text-light); text-align: center; }
.notice-closed-note { margin-top: 1.6rem; }
.notice-closed-note a { color: inherit; font-weight: 700; text-decoration: underline; }

/* Responsive */
@media (max-width: 992px) {
  .notice-card { grid-template-columns: 1fr; }
  .notice-card__side { align-items: flex-start; min-width: 0; }
  .notice-guide-steps { grid-template-columns: 1fr; }
  .notice-dl { grid-template-columns: auto 1fr; }
  .notice-dl__actions { grid-column: 1 / -1; }
}
@media (max-width: 640px) {
  .notices-body { padding: 2rem 1rem 3rem; }
  .notice-dl { grid-template-columns: 1fr; text-align: left; }
  .notice-dl__icon { width: 2.6rem; height: 2.6rem; font-size: 1.2rem; }
  .notice-contact-inner { padding: 1.6rem 1.4rem; }
}

/* Job adverts section on the notices page */
.notice-group-more {
  margin-left: auto; font-size: 0.75rem; font-weight: 700;
  color: var(--ochre); white-space: nowrap;
}
.notice-group-more:hover { color: var(--ochre-light); }
.notice-group-note {
  font-size: 0.82rem; color: var(--text-mid); line-height: 1.65;
  margin: -0.4rem 0 1rem;
}
.notice-card__pill {
  background: rgba(27,58,92,0.1); color: var(--sky);
  padding: 0.15rem 0.6rem; border-radius: 999px; font-weight: 700;
}
@media (max-width: 640px) {
  .notice-group-more { margin-left: 0; }
}

/* Empty section note inside notice groups */
.notice-group-empty {
  padding: 1.4rem 1.6rem; background: #fff;
  border: 1.5px dashed var(--border); border-radius: 14px;
  font-size: 0.85rem; color: var(--text-light);
}

/* ================================================================
   TRIP PLANNER RECOMMENDATION CARDS (Session 27 — expanded dataset)
================================================================ */
.trip-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr)); gap: 1.2rem; margin-top: 1.2rem; }
.trip-card {
  background: #fff; border-radius: 16px; overflow: hidden;
  border: 1.5px solid var(--border); box-shadow: var(--shadow-sm);
  transition: var(--ease); display: flex; flex-direction: row;
}
.trip-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: rgba(200,135,26,0.3); }
.trip-card--nearby { border-style: dashed; border-color: var(--border); opacity: 0.92; }
.trip-card__icon { font-size: 1.8rem; padding: 1.2rem 0.6rem 1.2rem 1.2rem; flex-shrink: 0; }
.trip-card__body { padding: 1rem 1.2rem 1.2rem 0.4rem; min-width: 0; }
.trip-card__name { font-family: 'Playfair Display', serif; font-size: 1.05rem; font-weight: 700; color: var(--espresso); margin-bottom: 0.35rem; }
.trip-card__desc { font-size: 0.8rem; color: var(--text-light); line-height: 1.55; margin-bottom: 0.6rem; }
.trip-card__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1rem; margin-bottom: 0.5rem; }
.trip-meta-item { font-size: 0.72rem; color: var(--text-mid); font-weight: 600; }
.trip-card__stay { font-size: 0.74rem; color: var(--text-mid); background: var(--savanna-light); border-radius: 8px; padding: 0.4rem 0.6rem; margin-bottom: 0.5rem; line-height: 1.5; }
.trip-card__stay strong { color: var(--espresso); font-weight: 700; }
.trip-card__tags { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.trip-tag { font-size: 0.66rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; background: var(--ochre-pale); color: var(--ochre); padding: 0.15rem 0.5rem; border-radius: 100px; }
.trip-nearby-badge { display: inline-block; margin-top: 0.4rem; font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); border: 1px solid var(--border); padding: 0.1rem 0.5rem; border-radius: 100px; }

/* Verify & Book official-portals panel (below the AI itinerary) */
.trip-portals { margin-top: 1.2rem; padding: 1.4rem; background: var(--savanna-light, #F5EDD8); border-radius: 14px; border: 1px solid rgba(200,135,26,0.25); }
.trip-portals__title { font-size: 0.82rem; font-weight: 700; color: var(--espresso); margin-bottom: 1rem; display: flex; align-items: center; gap: 0.4rem; }
.trip-portals__title::before { content: '\2705'; font-size: 0.9rem; }
.trip-portals__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr)); gap: 0.7rem; }
.trip-portal-link { display: flex; align-items: flex-start; gap: 0.6rem; padding: 0.7rem 0.9rem; background: #fff; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; transition: var(--ease); }
.trip-portal-link:hover { border-color: var(--ochre); transform: translateY(-2px); box-shadow: var(--shadow-sm); }
.trip-portal-link__icon { font-size: 1.2rem; line-height: 1; flex: 0 0 auto; margin-top: 0.1rem; }
.trip-portal-link__body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.trip-portal-link__name { font-size: 0.8rem; font-weight: 700; color: var(--espresso); line-height: 1.25; }
.trip-portal-link__badge { font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ochre); background: var(--ochre-pale, rgba(200,135,26,0.12)); padding: 0.1rem 0.4rem; border-radius: 100px; display: inline-block; width: fit-content; }

/* ================================================================
   NEWS PAGE — ochre accent overrides (scoped to .news-main)
   Replaces forest-green with darker ochre shades on sidebar headers,
   search button, filter tabs, read-more buttons, pagination,
   and form focus states.
   ================================================================ */
.news-main .sidebar-card-hdr {
	background: linear-gradient(135deg, #8A5E0E 0%, #C8871A 100%);
	color: #fff;
}
.news-main .search-bar button {
	background: #8A5E0E;
}
.news-main .search-bar button:hover {
	background: #A8731A;
}
.news-main .filter-tab.active {
	background: #8A5E0E;
	color: #fff;
	border-color: #8A5E0E;
}
.news-main .filter-tab:hover {
	border-color: #8A5E0E;
	color: #8A5E0E;
}
.news-main .form-input:focus {
	border-color: #8A5E0E;
	box-shadow: 0 0 0 3px rgba(138,94,14,0.18);
}
.news-main .btn-forest {
	background: #8A5E0E;
}
.news-main .btn-forest:hover {
	background: #A8731A;
}
.news-main .btn-read-more {
	background: #8A5E0E;
}
.news-main .btn-read-more:hover {
	background: #A8731A;
}
.news-main .news-grid-card-footer a {
	color: #8A5E0E;
}
.news-main .news-grid-card-footer a:hover {
	color: #A8731A;
}
.news-main .page-numbers:hover {
	border-color: #8A5E0E;
	color: #8A5E0E;
}
.news-main .page-numbers.current {
	background: #8A5E0E;
	color: #fff;
	border-color: #8A5E0E;
}
.news-main .news-feature-body h2 {
	color: var(--espresso);
}
.news-main .news-feature-body h2 a:hover {
	color: #8A5E0E;
}
.news-main .news-article-title {
	color: var(--espresso);
}
.news-main .sidebar-card h3 {
	color: #8A5E0E;
}
.news-main .sidebar-card-hdr__all {
	margin-left: auto;
	font-size: 0.65rem;
	font-weight: 700;
	color: #fff;
	opacity: 0.9;
	text-decoration: none;
	white-space: nowrap;
}
.news-main .sidebar-card-hdr__all:hover {
	opacity: 1;
	text-decoration: underline;
}

/* ================================================================
   SINGLE NEWS ARTICLE — ochre accent overrides (scoped to .news-single-content)
   Replaces forest-green with darker ochre shades on sidebar headers,
   buttons, article title, form focus, and share buttons.
   ================================================================ */
.news-single-content .sidebar-card-hdr {
	background: linear-gradient(135deg, #8A5E0E 0%, #C8871A 100%);
	color: #fff;
}
.news-single-content .btn-forest {
	background: #8A5E0E;
}
.news-single-content .btn-forest:hover {
	background: #A8731A;
}
.news-single-content .btn-outline-forest {
	border-color: #8A5E0E;
	color: #8A5E0E;
}
.news-single-content .btn-outline-forest:hover {
	background: #8A5E0E;
	color: #fff;
}
.news-single-content .news-article-title {
	color: var(--espresso);
}
.news-single-content .form-input:focus {
	border-color: #8A5E0E;
	box-shadow: 0 0 0 3px rgba(138,94,14,0.18);
}
.news-single-content .share-copy {
	background: #8A5E0E;
}
.news-single-content .sidebar-card h3 {
	color: #8A5E0E;
}
.news-single-content .news-article-cats .badge {
	color: #8A5E0E;
}

/* ================================================================
   EVENTS PAGE — tile beautification + countdowns
   Scoped overrides for .evt-feat-card (featured tiles) and
   .evt-row (calendar list tiles). Warm ochre accent, hover lift,
   image zoom, thumbnails, and live countdown chips on every tile.
   ================================================================ */

/* ---- Featured tiles ---- */
.evt-feat-card {
	border-radius: 20px;
	box-shadow: 0 4px 20px rgba(26,20,10,0.06);
	overflow: hidden;
}
.evt-feat-card:hover { transform: translateY(-5px); box-shadow: 0 16px 42px rgba(26,20,10,0.15); }
.evt-feat-card__media { position: relative; }
.evt-feat-card__media::after {
	content: '';
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(26,20,10,0) 48%, rgba(26,20,10,0.55) 100%);
	opacity: 0.85; transition: opacity 0.3s ease; pointer-events: none;
}
.evt-feat-card:hover .evt-feat-card__media::after { opacity: 1; }
.evt-feat-card__img { transition: transform 0.55s cubic-bezier(0.2,0.6,0.2,1); }
.evt-feat-card:hover .evt-feat-card__img { transform: scale(1.06); }
.evt-feat-card__body { padding: 1.7rem; }
.evt-feat-card__title { font-size: 1.3rem; }
.evt-feat-card--hero { border-radius: 22px; }
.evt-feat-card--hero .evt-feat-card__title { font-size: 1.55rem; }
.evt-feat-card--hero .evt-feat-card__media { height: 340px; }
.evt-feat-card__badge { background: linear-gradient(135deg, var(--ochre), var(--ochre-light)); color: #fff; }
.evt-feat-card__body .evt-countdown { margin: 0.5rem 0 1rem; }

/* ---- Calendar list tiles ---- */
.evt-list { gap: 1.1rem; }
.evt-row {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding: 1.05rem 1.4rem;
	border-radius: 16px;
	border: 1.5px solid var(--border);
	background: #fff;
	position: relative;
	overflow: hidden;
	transition: var(--ease);
}
.evt-row::before {
	content: '';
	position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
	background: linear-gradient(180deg, var(--ochre-light), var(--ochre));
	transform: scaleY(0); transform-origin: top; transition: transform 0.3s ease;
}
.evt-row:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 32px rgba(26,20,10,0.11);
	border-color: rgba(200,135,26,0.45);
}
.evt-row:hover::before { transform: scaleY(1); }
.evt-row[hidden] { display: none; }

.evt-row__date {
	flex: 0 0 auto;
	width: 72px; min-height: 72px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	background: linear-gradient(150deg, var(--ochre) 0%, var(--ochre-light) 100%);
	color: #fff; border-radius: 14px; padding: 0.55rem 0.4rem;
	box-shadow: 0 5px 16px rgba(200,135,26,0.28);
}
.evt-row__month { font-size: 0.62rem; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255,255,255,0.95); font-weight: 800; }
.evt-row__day { font-family: 'Playfair Display', serif; font-size: 1.6rem; font-weight: 900; line-height: 1.05; }

.evt-row__thumb {
	flex: 0 0 auto;
	width: 88px; height: 88px; border-radius: 12px; overflow: hidden;
	display: flex; align-items: center; justify-content: center;
	background: var(--savanna); text-decoration: none;
}
.evt-row__img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.45s ease; }
.evt-row:hover .evt-row__img { transform: scale(1.08); }
.evt-row__ph { font-size: 1.8rem; color: var(--ochre-light); }

.evt-row__content { flex: 1 1 auto; min-width: 0; }
.evt-row__cat { color: var(--ochre); }
.evt-row__title { font-size: 1.1rem; margin: 0.15rem 0 0.4rem; }
.evt-row__title a:hover { color: var(--ochre); }
.evt-row__meta { gap: 0.35rem 1.1rem; }
.evt-row .evt-countdown { margin-top: 0.6rem; }
.evt-row__action { flex: 0 0 auto; }

@media (max-width: 768px) {
	.evt-row { flex-wrap: wrap; padding: 1rem 1.1rem; gap: 0.9rem; }
	.evt-row__date { width: 62px; min-height: 62px; }
	.evt-row__day { font-size: 1.35rem; }
	.evt-row__thumb { width: 62px; height: 62px; }
	.evt-row__content { flex: 1 1 calc(100% - 150px); }
	.evt-row__action { flex: 1 1 100%; }
	.evt-row__action .evt-btn { width: 100%; justify-content: center; }
}