/* ═══════════════════════════════════════════════════════════════════════
   INGONYAMA TRUST — SHARED RESPONSIVE STYLESHEET
   Covers: all pages, all breakpoints (1440 / 1200 / 1024 / 768 / 480 / 320)
   Strategy: mobile-first clamp() for typography, grid override at breakpoints
   ═══════════════════════════════════════════════════════════════════════ */

/* ─── GLOBAL RESETS & BOX MODEL ─────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  overflow-x: hidden;
  min-width: 320px;
}

img, svg, video, iframe, embed, object {
  max-width: 100%;
  height: auto;
  display: block;
}

table {
  width: 100%;
  border-collapse: collapse;
}

.table-wrap {
  width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-wrap table { min-width: 560px; }
.hours-table { min-width: 0 !important; }

th, td {
  vertical-align: top;
  word-break: break-word;
}

/* ─── TOUCH TARGETS — WCAG 2.5.5 ────────────────────────────────────── */
a, button, [role="button"], input[type="submit"], input[type="button"] {
  min-height: 44px;
  min-width: 44px;
}

/* Inline links don't need 44px height */
p a, li a, .f-col a, .dropdown a, .mob-dropdown a,
.footer-bottom-links a, .util-links a, .nl-a, .breadcrumb a,
.pr-contact-card-row a {
  min-height: unset;
  min-width: unset;
}

/* Service icons in nav dropdown and footer */
.dropdown a, .mob-dropdown a { display:flex !important; align-items:center; gap:8px; }
.dd-svc-icon, .f-svc-icon { width:16px; height:16px; object-fit:contain; flex-shrink:0; opacity:.82; }

/* ─── PREVENT iOS INPUT ZOOM ─────────────────────────────────────────── */
input, select, textarea {
  font-size: max(16px, 1em);
}

/* ─── FLUID TYPOGRAPHY (clamp) ───────────────────────────────────────── */
.hero h1       { font-size: clamp(1.9rem, 5.5vw, 4.6rem); }
.sec-h2        { font-size: clamp(1.5rem, 4vw, 2.8rem); }
.trustee-heading { font-size: clamp(1.5rem, 3.5vw, 3rem); }
.bc-h          { font-size: clamp(1.4rem, 3vw, 2.2rem); }
.nl-h          { font-size: clamp(1.5rem, 3vw, 2.6rem); }
.ph-h1,
.page-hero h1  { font-size: clamp(1.6rem, 4.5vw, 3rem); }
.impact-num    { font-size: clamp(2rem, 5vw, 4rem); }

/* ─── SAFE AREA (notched phones) ─────────────────────────────────────── */
nav {
  padding-left: max(60px, env(safe-area-inset-left));
  padding-right: max(60px, env(safe-area-inset-right));
}

footer {
  padding-left: max(60px, env(safe-area-inset-left));
  padding-right: max(60px, env(safe-area-inset-right));
  padding-bottom: max(30px, env(safe-area-inset-bottom));
}

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

/* ─── FOCUS STYLES (keyboard nav) ────────────────────────────────────── */
:focus-visible {
  outline: 3px solid var(--g1, #7FCA75);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ─── HAMBURGER & MOBILE NAV — base (hidden on desktop) ─────────────── */
.ham {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  margin-left: 8px;
  flex-shrink: 0;
}

.ham span {
  display: block;
  height: 2.5px;
  border-radius: 2px;
  background: var(--g4, #1A4D20);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.ham.open span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.ham.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.ham.open span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* Mobile nav drawer — hidden by default, shown when .open */
.mob-nav {
  display: none;
  position: fixed;
  top: 88px;
  left: 0;
  right: 0;
  bottom: 0;
  background: #ffffff;
  z-index: 500;
  overflow-y: auto;
  overflow-x: hidden;
  flex-direction: column;
  gap: 2px;
  border-top: 3px solid var(--g1, #7FCA75);
  padding: 20px 20px 80px;
  -webkit-overflow-scrolling: touch;
}

.mob-nav.open { display: flex; }

.mob-nl-a {
  display: block;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt2, #3A3A3A);
  text-decoration: none;
  border-radius: 10px;
  transition: background 0.15s;
  min-height: 48px;
  display: flex;
  align-items: center;
}

.mob-nl-a:hover,
.mob-nl-a.active {
  background: var(--g-bg, #EDF7E8);
  color: var(--g3, #2D7A35);
}

.mob-dd-trigger {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 13px 16px;
  font-size: 15px;
  font-weight: 600;
  color: var(--txt2, #3A3A3A);
  border-radius: 10px;
  cursor: pointer;
  background: none;
  border: none;
  width: 100%;
  font-family: inherit;
  transition: background 0.15s;
  min-height: 48px;
  text-align: left;
}

.mob-dd-trigger:hover { background: var(--g-bg, #EDF7E8); color: var(--g3, #2D7A35); }
.mob-dd-trigger .chev { font-size: 10px; transition: transform 0.2s; display: inline-block; }
.mob-dd-trigger.open .chev { transform: rotate(180deg); }

.mob-dropdown {
  display: none;
  padding: 4px 0 4px 16px;
  flex-direction: column;
  gap: 1px;
}

.mob-dropdown.open { display: flex; }

.mob-dd-label {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--g1, #7FCA75);
  padding: 10px 12px 4px;
  display: block;
}

.mob-dropdown a {
  display: block;
  padding: 10px 12px;
  font-size: 14px;
  color: var(--txt3, #666);
  text-decoration: none;
  border-radius: 8px;
  transition: background 0.15s;
  min-height: 44px;
  display: flex;
  align-items: center;
}

.mob-dropdown a:hover { background: var(--g-bg, #EDF7E8); color: var(--g3, #2D7A35); }

.mob-cta {
  background: var(--o1, #D55727);
  color: #fff;
  padding: 14px 20px;
  border-radius: 9px;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  text-align: center;
  margin-top: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
}

.mob-cta:hover { background: #bf4a20; color: #fff; }

/* ─── SCROLL REVEAL ──────────────────────────────────────────────────── */
.reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.reveal.visible {
  opacity: 1 !important;
  transform: none !important;
}

/* Reduced motion: skip animation */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1440px — Large desktops (max content width)
   ═══════════════════════════════════════════════════════════════════════ */
@media (min-width: 1440px) {
  nav,
  .util-bar,
  .section,
  .section-alt,
  footer,
  .contact-section,
  .newsletter,
  .impact,
  .bottom-cta,
  .cta-banner,
  .page-hero-content,
  .ph-content,
  .breadcrumb,
  .filter-bar,
  .filter-strip,
  .search-strip,
  .faq-search-bar,
  .audit-strip,
  .intro-strip,
  .stats-strip,
  .testimonials-section,
  .yt-section {
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   1200px — Narrow desktops
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
  nav,
  .util-bar                        { padding-left: 32px; padding-right: 32px; }
  footer                           { padding-left: 32px; padding-right: 32px; }
  .section, .section-alt           { padding-left: 32px; padding-right: 32px; }
  .page-hero-content, .ph-content  { padding-left: 32px; padding-right: 32px; }
  .breadcrumb                      { padding-left: 32px; padding-right: 32px; }
  .filter-bar                      { padding-left: 32px; padding-right: 32px; }
  .bottom-cta, .cta-banner         { padding-left: 32px; padding-right: 32px; }
  .audit-strip, .intro-strip       { padding-left: 32px; padding-right: 32px; }
  .testimonials-section            { padding-left: 32px; padding-right: 32px; }
  .yt-section                      { padding-left: 32px; padding-right: 32px; }
  .stats-strip                     { padding-left: 32px; padding-right: 32px; }
  .newsletter                      { padding-left: 32px; padding-right: 32px; }
  .contact-section                 { padding-left: 32px; padding-right: 32px; }
  .impact                          { padding-left: 32px; padding-right: 32px; }
  .faq-search-bar                  { padding-left: 32px; padding-right: 32px; }
  .filter-strip, .search-strip     { padding-left: 32px; padding-right: 32px; }

  .services-grid   { grid-template-columns: repeat(2, 1fr); }
  .footer-grid     { grid-template-columns: 240px repeat(4, 1fr); gap: 28px; }
  .trustee-grid    { grid-template-columns: 400px 1fr; }
}

/* ═══════════════════════════════════════════════════════════════════════
   1024px — Tablets landscape / small laptops
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  /* ── NAV ── */
  .util-bar { display: none !important; }

  nav {
    padding: 0 24px !important;
    height: 68px !important;
    min-height: 68px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .brand img      { width: 46px !important; height: 46px !important; }
  .brand-txt .bn  { font-size: 14px !important; }
  .brand-txt .bs  { display: none !important; }
  .nav-links      { display: none !important; }
  .nav-item       { display: none !important; }
  .nav-cta        { display: none !important; }
  .ham            { display: flex !important; }
  .mob-nav        { top: 68px !important; }

  .filter-bar       { top: 68px; }
  .filter-strip     { top: 68px; }
  .search-strip     { top: 68px; }
  .faq-search-bar   { top: 68px; }

  /* Two-column collapses */
  .page-hero        { height: auto; min-height: 320px; }
  .tender-layout    { grid-template-columns: 1fr; }
  .t-side           { position: static; }
  .map-inner        { grid-template-columns: 1fr; }
  .map-embed        { height: 300px; }
  .trustee-grid     { grid-template-columns: 1fr; }
  .trustee-img-wrap { height: 320px; }
  .trustee-card     { grid-template-columns: 1fr; }
  .faq-layout       { grid-template-columns: 1fr; }
  .faq-side         { position: static; top: auto; }
  .docs-layout      { grid-template-columns: 1fr; }
  .docs-side        { position: static; top: auto; }
  .hero-right       { display: none; }
  .hero             { grid-template-columns: 1fr; }

  /* Sections */
  .section, .section-alt { padding: 60px 24px; }
  .contact-section  { padding: 50px 24px; }
  .newsletter       { padding: 50px 24px; }
  .impact           { padding: 40px 24px; }
  .bottom-cta       { padding: 40px 24px; }
  .footer-grid      { grid-template-columns: 1fr 1fr; gap: 24px; padding-bottom: 36px; }
  .footer-grid .f-brand { grid-column: 1 / -1; }
  footer            { padding: 44px 24px 20px; }
}


/* ═══════════════════════════════════════════════════════════════════════
   768px — Tablets portrait / large phones  ← MAIN MOBILE BREAKPOINT
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

  /* ── NAV ── */
  .util-bar { display: none; }

  nav {
    padding: 0 16px !important;
    height: 62px !important;
    min-height: 62px !important;
    overflow: visible !important;
    flex-wrap: nowrap !important;
    position: sticky;
    top: 0;
    z-index: 100;
  }

  .brand img      { width: 46px !important; height: 46px !important; }
  .brand-txt .bn  { font-size: 14px !important; }
  .brand-txt .bs  { display: none !important; }
  .nav-links      { display: none !important; }
  .nav-item       { display: none !important; }
  .nav-cta        { display: none !important; }
  .ham            { display: flex !important; }
  .mob-nav        { top: 62px !important; }

  /* ── STICKY BARS ── */
  .filter-bar     { top: 62px !important; padding: 12px 16px !important; flex-wrap: wrap !important; gap: 8px !important; }
  .filter-strip   { top: 62px !important; padding: 14px 16px !important; }
  .search-strip   { top: 62px !important; padding: 14px 16px !important; }
  .faq-search-bar { top: 62px !important; padding: 14px 16px !important; }
  .fb-label       { width: 100%; margin-bottom: 2px; }
  .fb-tag         { flex: 1 1 auto; min-width: 0; text-align: center; padding: 8px 8px; font-size: 12px; }
  .fb-search      { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-top: 4px !important; }
  .fb-search input { width: 100% !important; }
  .search-wrap    { grid-template-columns: 1fr !important; gap: 10px !important; }
  .faq-side       { position: static; top: auto; }
  .docs-side      { position: static; top: auto; }

  /* ── PAGE HERO ── */
  .page-hero        { height: auto !important; min-height: 240px !important; }
  .page-hero-content,
  .ph-content       { padding: 36px 16px 28px !important; }
  .ph-sub           { font-size: 13.5px !important; }
  .breadcrumb       { padding: 10px 16px !important; flex-wrap: wrap !important; }
  .ph-stats         { flex-wrap: wrap !important; gap: 10px !important; }
  .ph-stat          { flex: 1 1 140px !important; }
  .ph-quick         { flex-wrap: wrap !important; gap: 8px !important; }

  /* ── SECTIONS ── */
  .section, .section-alt { padding: 40px 16px !important; }
  .sec-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 24px !important; }
  .sec-lead   { font-size: 14px !important; }
  footer      { padding: 36px 16px 20px !important; }

  /* ── INDEX PAGE ── */
  .hero              { grid-template-columns: 1fr !important; min-height: auto !important; }
  .hero-right        { display: none !important; }
  .hero-left         { padding: 44px 16px 36px !important; }
  .hero-btns         { flex-direction: column !important; gap: 10px !important; }
  .btn-hero-p,
  .btn-hero-s        { justify-content: center !important; width: 100% !important; }

  .stats-bar         { grid-template-columns: 1fr 1fr !important; }
  .sb-item           { padding: 14px 10px !important; gap: 10px !important; }
  .sb-item:nth-child(2) { border-right: none !important; }

  .mv-grid           { grid-template-columns: 1fr !important; gap: 14px !important; margin-top: 28px !important; }
  .services-grid     { grid-template-columns: 1fr !important; gap: 12px !important; margin-top: 28px !important; }
  .impact-grid       { grid-template-columns: 1fr 1fr !important; }
  .impact            { padding: 36px 16px !important; }
  .events-grid       { grid-template-columns: 1fr !important; gap: 12px !important; }
  .news-grid         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .news-side         { grid-template-columns: 1fr !important; gap: 10px !important; }
  .res-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }
  .contact-grid      { grid-template-columns: 1fr !important; gap: 24px !important; }
  .cf-row            { grid-template-columns: 1fr !important; gap: 10px !important; }
  .nl-inner          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .nl-row            { flex-direction: column !important; gap: 10px !important; }
  .nl-btn            { width: 100% !important; }
  .newsletter        { padding: 50px 16px !important; }

  .heritage-grid     { grid-template-columns: 1fr !important; }
  .h-col-black       { border-left: none !important; border-top: 2px solid var(--o1) !important; }
  .heritage-intro    { padding: 32px 16px 16px !important; }
  .h-col-green,
  .h-col-black       { padding: 24px 16px !important; }

  .trustee-grid      { grid-template-columns: 1fr !important; min-height: auto !important; }
  .trustee-img-wrap  { height: 480px !important; min-height: 480px !important; }
  .trustee-img-wrap > img { display: none !important; }
  .t-img-overlay     { background: linear-gradient(to bottom, transparent 40%, var(--g4) 100%) !important; }
  .trustee-content   { padding: 28px 16px 36px !important; }

  .footer-grid       { grid-template-columns: 1fr 1fr !important; gap: 20px !important; }
  .footer-grid .f-brand { grid-column: 1 / -1 !important; }
  .footer-bottom     { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; }
  .footer-bottom-links { flex-wrap: wrap !important; gap: 10px !important; }
  .bottom-cta        { grid-template-columns: 1fr !important; padding: 32px 16px !important; gap: 18px !important; text-align: center !important; }
  .bc-btns           { justify-content: center !important; flex-wrap: wrap !important; gap: 10px !important; }
  .btn-bc-p, .btn-bc-s { text-align: center !important; justify-content: center !important; }
  .contact-section   { padding: 40px 16px !important; }

  /* ── WHO WE ARE / COMMUNITY SHARED ── */
  .intro-grid        { grid-template-columns: 1fr !important; gap: 20px !important; }
  .ia-stat-row       { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .mandate-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .vm-grid           { grid-template-columns: 1fr !important; gap: 14px !important; }
  .values-grid       { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .role-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .intro-strip       { grid-template-columns: 1fr !important; padding: 0 !important; }
  .intro-stat        { padding: 22px 20px !important; border-right: none !important; border-bottom: 1px solid rgba(127,202,117,.15) !important; }
  .intro-stat:last-child { border-bottom: none !important; }

  /* ── GOVERNANCE ── */
  .pillars-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .committees-grid   { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fw-grid           { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .wb-wrap           { grid-template-columns: 1fr !important; gap: 20px !important; }
  .pol-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }
  .pol-card          { grid-template-columns: 40px 1fr auto !important; gap: 10px !important; }
  .audit-strip       { padding: 32px 16px !important; }
  .audit-inner       { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .tl-row            { grid-template-columns: 80px 1fr !important; gap: 10px !important; }
  .cta-banner        { grid-template-columns: 1fr !important; gap: 20px !important; padding: 36px 16px !important; }
  .cta-btns          { flex-direction: column !important; align-items: stretch !important; gap: 10px !important; }
  .cta-btn-p,
  .cta-btn-s         { justify-content: center !important; text-align: center !important; }

  /* ── PROCUREMENT ── */
  .steps-grid        { grid-template-columns: 1fr !important; gap: 12px !important; }
  .featured-tender   { grid-template-columns: 1fr !important; gap: 18px !important; }
  .ft-h              { font-size: 1.4rem !important; }
  .tender-layout     { grid-template-columns: 1fr !important; }
  .t-side            { display: none !important; }
  .tender-card       { grid-template-columns: 1fr !important; gap: 14px !important; }
  .tc-cta            { align-items: flex-start !important; flex-direction: row !important; flex-wrap: wrap !important; }
  .notice-grid       { grid-template-columns: 1fr !important; gap: 12px !important; }
  .contact-banner    { grid-template-columns: 1fr !important; gap: 18px !important; text-align: center !important; }
  .docs-grid         { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .tabs-strip        { overflow-x: auto !important; -webkit-overflow-scrolling: touch !important; white-space: nowrap !important; padding: 0 16px !important; scrollbar-width: none !important; }
  .tabs-strip::-webkit-scrollbar { display: none !important; }
  .tabs              { min-width: max-content !important; flex-wrap: nowrap !important; }
  .tab               { flex-shrink: 0 !important; }

  /* ── RESOURCE CENTRE ── */
  .featured-grid     { grid-template-columns: 1fr !important; gap: 14px !important; }
  .gallery-grid      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
  .videos-grid       { grid-template-columns: 1fr !important; gap: 12px !important; }
  .facts-grid        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }

  /* ── ANNUAL REPORT ── */
  .reports-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }
  .fs-grid           { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .stats-inner       { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .progress-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── BENEFICIARY ── */
  .hero-stats        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .districts-grid    { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── CAREERS ── */
  .why-grid          { grid-template-columns: 1fr !important; gap: 20px !important; }
  .value-grid        { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .process-grid      { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── COMMUNITY DEVELOPMENT ── */
  .rev-wrap          { grid-template-columns: 1fr !important; gap: 24px !important; }
  .video-wrap        { grid-template-columns: 1fr !important; gap: 24px !important; }
  .bursary-wrap      { grid-template-columns: 1fr !important; gap: 24px !important; }
  .featured-proj     { grid-template-columns: 1fr !important; }
  .fp-img            { min-height: 220px !important; }
  .projects-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .devtypes-grid     { grid-template-columns: 1fr 1fr !important; gap: 10px !important; }
  .partners-grid     { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }

  /* ── COMMUNITY BENEFITS ── */
  .fund-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .bursary-grid      { grid-template-columns: 1fr !important; gap: 20px !important; }
  .agri-grid         { grid-template-columns: 1fr !important; gap: 20px !important; }
  .agri-img-wrap     { order: 1 !important; }
  .agri-content      { order: 2 !important; }
  .ts-grid           { grid-template-columns: 1fr !important; gap: 12px !important; }
  .app-grid          { grid-template-columns: 1fr 1fr !important; gap: 14px !important; }
  .app-grid::before  { display: none !important; }
  .lease-grid        { grid-template-columns: 1fr !important; gap: 10px !important; }
  .testimonials-section { padding: 40px 16px !important; }
  .testimonials-section .ts-eyebrow { font-size: 9px !important; letter-spacing: .12em !important; }
  .testimonials-section .ts-title { font-size: 1.2rem !important; line-height: 1.15 !important; }
  .testimonials-section .ts-lead { font-size: .8rem !important; line-height: 1.7 !important; }
  .testimonials-section div[style*="font-size:2.8rem"] { font-size: 1.2rem !important; line-height: 1.15 !important; }
  .testimonials-section p[style*="font-size:15px"] { font-size: .8rem !important; line-height: 1.7 !important; }

  /* ── CONTACT ── */
  .info-cards        { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .channels-grid     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .contact-main      { grid-template-columns: 1fr !important; gap: 20px !important; }
  .map-inner         { grid-template-columns: 1fr !important; }
  .map-embed         { height: 240px !important; }
  .form-wrap         { padding: 24px 16px !important; border-radius: 14px !important; }
  .faq-grid          { grid-template-columns: 1fr !important; gap: 10px !important; }

  /* ── FAQ ── */
  .faq-layout        { grid-template-columns: 1fr !important; gap: 20px !important; }
  .step-cards        { grid-template-columns: 1fr !important; gap: 12px !important; }
  .doc-checklist     { grid-template-columns: 1fr !important; gap: 8px !important; }
  .project-types     { grid-template-columns: 1fr !important; gap: 12px !important; }
  .info-panel        { grid-template-columns: 1fr !important; gap: 16px !important; }
  .action-cards      { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── NEWS & EVENTS ── */
  .featured-card     { grid-template-columns: 1fr !important; }
  .fc-img            { min-height: 200px !important; height: 200px !important; }
  .fc-body           { padding: 20px 16px !important; }
  .yt-section        { padding: 40px 16px !important; }
  .yt-grid           { grid-template-columns: 1fr !important; gap: 20px !important; margin-top: 20px !important; }
  .yt-stats          { grid-template-columns: 1fr 1fr !important; }
  .stats-strip       { grid-template-columns: 1fr 1fr !important; padding: 24px 16px !important; gap: 1px !important; }
  .ss-item           { padding: 18px 12px !important; border-right: none !important; }

  /* ── LEADERSHIP ── */
  .trustee-card      { grid-template-columns: 1fr !important; }
  .tc-img-wrap       { height: 440px !important; min-height: 440px !important; background: url('../assets/images/photos/raja.jpg') center 55% / cover no-repeat !important; filter: brightness(.9) !important; }
  .tc-img-wrap img   { display: none !important; }
  .tc-img-wrap::after { background: linear-gradient(to bottom, transparent 40%, var(--g4) 100%) !important; }
  .tc-body           { padding: 24px 16px !important; }
  .board-grid        { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }
  .sec-grid          { grid-template-columns: 1fr 1fr !important; gap: 12px !important; }

  /* ── REAL ESTATE ── */
  .dept-grid         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .timeline-strip    { grid-template-columns: 1fr !important; gap: 12px !important; }

  /* ── RURAL ECONOMIC ── */
  .dev-grid          { grid-template-columns: 1fr !important; gap: 12px !important; }
  .feat-project      { grid-template-columns: 1fr !important; gap: 18px !important; }
  .flow-grid         { grid-template-columns: 1fr !important; gap: 12px !important; }
  .partner-grid      { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   480px — Small phones
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
  nav               { height: 56px !important; padding: 0 12px !important; }
  .mob-nav          { top: 56px !important; }

  .section, .section-alt { padding: 30px 14px !important; }
  .page-hero-content,
  .ph-content       { padding: 28px 14px 20px !important; }

  /* Trustee image — shorter on very small phones */
  .trustee-img-wrap  { height: 380px !important; min-height: 380px !important; background-position: center 55% !important; }

  /* 2-col → 1-col collapses on tiny screens */
  .values-grid      { grid-template-columns: 1fr !important; }
  .ia-stat-row      { grid-template-columns: 1fr !important; }
  .fw-grid          { grid-template-columns: 1fr !important; }
  .app-grid         { grid-template-columns: 1fr !important; }
  .board-grid       { grid-template-columns: 1fr !important; }
  .sec-grid         { grid-template-columns: 1fr !important; }
  .stats-bar        { grid-template-columns: 1fr !important; }
  .impact-grid      { grid-template-columns: 1fr 1fr !important; }
  .footer-grid      { grid-template-columns: 1fr !important; }
  .gallery-grid     { grid-template-columns: 1fr !important; }
  .facts-grid       { grid-template-columns: 1fr !important; }
  .docs-grid        { grid-template-columns: 1fr !important; }
  .fs-grid          { grid-template-columns: 1fr !important; }
  .stats-strip      { grid-template-columns: 1fr !important; }
  .stats-inner      { grid-template-columns: 1fr 1fr !important; }
  .value-grid       { grid-template-columns: 1fr !important; }
  .devtypes-grid    { grid-template-columns: 1fr !important; }
  .partners-grid    { grid-template-columns: 1fr !important; }
  .partner-grid     { grid-template-columns: 1fr !important; }
  .yt-stats         { grid-template-columns: 1fr !important; }
  .audit-inner      { grid-template-columns: 1fr 1fr !important; }
  .info-cards       { grid-template-columns: 1fr !important; }
  .hero-stats       { grid-template-columns: 1fr 1fr !important; }

  .bottom-cta       { padding: 26px 14px !important; }
  .cta-banner       { padding: 28px 14px !important; }
  .footer-bottom-links { gap: 8px !important; }
  .tl-row           { grid-template-columns: 1fr !important; gap: 6px !important; }
  .breadcrumb       { font-size: 11px !important; }
  .fb-tag           { font-size: 11px !important; padding: 7px 8px !important; }
  .filter-bar       { gap: 6px !important; padding: 10px 12px !important; }
  .fc-img           { height: 180px !important; min-height: 180px !important; }
  .ph-stat          { flex: 1 1 100% !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   320px — Minimum supported width
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 375px) {
  nav               { padding: 0 10px !important; }
  .brand-txt .bn    { font-size: 12px !important; }
  .section, .section-alt { padding: 24px 12px !important; }
  .mob-nav          { padding: 16px 12px 70px !important; }
  .sb-item          { padding: 12px 8px !important; gap: 8px !important; }
  .footer-grid      { grid-template-columns: 1fr !important; }
  .impact-grid      { grid-template-columns: 1fr !important; }
  .stats-inner      { grid-template-columns: 1fr !important; }
  .hero-stats       { grid-template-columns: 1fr !important; }
}

/* ═══════════════════════════════════════════════════════════════════════
   FINAL HARDENING — covers per-page classes flagged in audit
   Loaded LAST so it wins over earlier rules of equal specificity.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── Sticky in-page tab/search strips on every page ── */
/* Default desktop offset = 88px nav. Tablet = 68px. Mobile <=768 = 62px. <=480 = 56px. */
.fq-search-strip,
.ar-tabs-strip,
.ct-tabs-strip,
.ne-tabs-strip,
.rc-search-strip,
.pr-tabs-strip {
  position: sticky;
  top: 88px;
  z-index: 50;
  background: #fff;
  border-bottom: 1px solid var(--bdr);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

@media (max-width: 1200px) {
  .fq-search-strip,
  .ar-tabs-strip,
  .ct-tabs-strip,
  .ne-tabs-strip,
  .rc-search-strip,
  .pr-tabs-strip { padding-left: 32px; padding-right: 32px; }
}

@media (max-width: 1024px) {
  .fq-search-strip,
  .ar-tabs-strip,
  .ct-tabs-strip,
  .ne-tabs-strip,
  .rc-search-strip,
  .pr-tabs-strip { top: 68px; padding-left: 24px; padding-right: 24px; }
}

@media (max-width: 768px) {
  .fq-search-strip,
  .ar-tabs-strip,
  .ct-tabs-strip,
  .ne-tabs-strip,
  .rc-search-strip,
  .pr-tabs-strip { top: 62px; padding-left: 16px; padding-right: 16px; white-space: nowrap; }

  /* Procurement search overflows narrow screens */
  .pr-search { min-width: 0 !important; width: 100%; }

  /* News & events search bar fits on phones */
  .ne-search { min-width: 0 !important; width: 100%; }
  .ne-search input { width: 100% !important; min-width: 0 !important; }

  /* FAQ search input padding tightens on narrow phones */
  .fq-search-wrap { height: auto !important; padding: 12px 16px !important; }
  .fq-search-wrap input { font-size: 16px; }

  /* Annual reports — featured book shrinks */
  .ar-latest { grid-template-columns: 1fr !important; }
  .ar-book { width: 150px !important; height: 200px !important; margin: 0 auto !important; }

  /* Beneficiary districts — tablet & phone */
  .bcu-page .districts-grid { grid-template-columns: 1fr !important; }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .bcu-page .districts-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 480px) {
  .fq-search-strip,
  .ar-tabs-strip,
  .ct-tabs-strip,
  .ne-tabs-strip,
  .rc-search-strip,
  .pr-tabs-strip { top: 56px; padding-left: 14px; padding-right: 14px; }

  .ar-book { width: 120px !important; height: 160px !important; }
  .fc-img { height: 160px !important; min-height: 160px !important; }

  /* Inline page-bottom CTAs (annual reports / news / faq / contact) — tighter on small phones */
  .ar-bottom, .ne-bottom, .fq-bottom, .ct-bottom { padding: 24px 14px !important; }
}

/* ── Leadership trustee image — replace hard min-height with fluid clamp ── */
@media (max-width: 1024px) {
  .ol-trustee { grid-template-columns: 1fr !important; }
  .ol-trustee-img { min-height: clamp(220px, 40vw, 380px) !important; }
}

/* ── Util bar — hide on tablet landscape too (gets cramped) ── */
@media (max-width: 900px) {
  .util-bar { display: none !important; }
}

/* ── Tables/embeds inside articles — never let them push horizontal scroll ── */
.section iframe,
.section video,
.section-alt iframe,
.section-alt video { max-width: 100%; width: 100%; }

/* ── Long-word break-anywhere safety net ── */
.section h1, .section h2, .section h3,
.section-alt h1, .section-alt h2, .section-alt h3,
.page-hero h1, .ph-h1, .sec-h2 { overflow-wrap: anywhere; word-break: normal; hyphens: auto; }

/* ── Forms — full-width on mobile, never overflow ── */
@media (max-width: 768px) {
  input[type="text"], input[type="email"], input[type="tel"], input[type="url"],
  input[type="search"], input[type="number"], input[type="password"],
  input[type="date"], textarea, select {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
}

/* ═══════════════════════════════════════════════════════════════════════
   THEME-CONSISTENCY TOKENS & UNIFIED CARD HOVER
   ───────────────────────────────────────────────────────────────────────
   Centralised values for radius / transition / shadow so every page uses
   the same animation feel. Loaded LAST so it wins where it needs to.
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  --card-radius:        16px;
  --card-radius-sm:     12px;
  --card-radius-lg:     20px;
  --card-pad:           28px;
  --card-pad-sm:        20px;

  --ease:               cubic-bezier(.2, .7, .25, 1);
  --t-fast:             .18s;
  --t-mid:              .28s;
  --t-slow:             .45s;

  --shadow-rest:        0 1px 2px rgba(15, 40, 18, .04), 0 2px 6px rgba(15, 40, 18, .04);
  --shadow-hover:       0 14px 40px rgba(45, 122, 53, .14), 0 4px 12px rgba(15, 40, 18, .06);
  --shadow-hover-warm:  0 14px 40px rgba(213, 87, 39, .15), 0 4px 12px rgba(15, 40, 18, .06);
}

/* ─── Unified card class list ───────────────────────────────────────────
   All card-like elements share the same hover feel:
     • slight translateY rise
     • soft brand-tinted shadow
     • border picks up the primary green
     • inner icons gently scale & shift colour
   Existing per-page :hover rules still apply — these rules layer on top.
   ─────────────────────────────────────────────────────────────────────── */
.service-card, .mv-card, .mi-item, .news-card, .evt-card, .sb-item,
.value-card, .vacancy-card, .intern-card, .empty-state, .proc-step,
.ar-card, .ar-latest, .ar-empty, .ar-no-match, .ar-help, .ar-notice, .ar-faq-item,
.district-card, .bottom-cta,
.intro-body, .intro-highlight, .fund-bar-item, .fund-visual, .agri-item, .ts-card,
.app-step, .app-notice,
.ct-form-card, .ct-info-card, .ct-dept, .ct-notice, .ct-channel,
.fq-item, .fq-empty, .fq-no-match, .fq-help,
.ne-featured, .ne-card, .ne-event, .ne-press-item, .ne-empty, .ne-subscribe,
.ol-intro, .ol-stat, .ol-trustee, .ol-pillar, .ol-member, .ol-sec-card,
.ol-empty, .ol-contact,
.pr-step, .pr-featured, .pr-card, .pr-archive-item, .pr-comp, .pr-doc,
.pr-contact-card, .pr-empty,
.rc-feat, .rc-card, .rc-paia, .rc-video, .rc-form, .rc-empty,
.ph-stat, .ar-hero-stat, .ct-hero-stat, .fq-hero-stat, .ne-hero-stat,
.ol-intro-badge, .pr-hero-stat, .rc-hero-stat {
  transition:
    transform     var(--t-mid)  var(--ease),
    box-shadow    var(--t-mid)  var(--ease),
    border-color  var(--t-mid)  var(--ease),
    background    var(--t-mid)  var(--ease);
  will-change: transform;
}

.service-card:hover, .mv-card:hover, .mi-item:hover, .news-card:hover, .evt-card:hover,
.value-card:hover, .vacancy-card:hover, .empty-state:hover, .proc-step:hover,
.ar-card:hover, .ar-faq-item:hover, .ar-help:hover, .ar-notice:hover,
.district-card:hover,
.intro-body:hover, .fund-bar-item:hover, .agri-item:hover, .ts-card:hover,
.app-step:hover, .app-notice:hover,
.ct-form-card:hover, .ct-info-card:hover, .ct-dept:hover, .ct-notice:hover, .ct-channel:hover,
.fq-item:hover, .fq-help:hover,
.ne-card:hover, .ne-event:hover, .ne-subscribe:hover,
.ol-intro:hover, .ol-pillar:hover, .ol-member:hover, .ol-sec-card:hover, .ol-contact:hover,
.pr-step:hover, .pr-card:hover, .pr-archive-item:hover, .pr-comp:hover, .pr-doc:hover,
.pr-contact-card:hover,
.rc-feat:hover, .rc-card:hover, .rc-paia:hover, .rc-video:hover, .rc-form:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(127, 202, 117, .55);  /* var(--g1) at 55% */
}

/* Hero-stat strip cards (translucent on dark hero) — lighter lift, brighter border */
.ph-stat, .ar-hero-stat, .ct-hero-stat, .fq-hero-stat, .ne-hero-stat,
.ol-intro-badge, .pr-hero-stat, .rc-hero-stat {
  transition:
    transform     var(--t-mid)  var(--ease),
    background    var(--t-mid)  var(--ease),
    border-color  var(--t-mid)  var(--ease);
}
.ph-stat:hover, .ar-hero-stat:hover, .ct-hero-stat:hover, .fq-hero-stat:hover,
.ne-hero-stat:hover, .ol-intro-badge:hover, .pr-hero-stat:hover, .rc-hero-stat:hover {
  transform: translateY(-3px);
  background: rgba(255, 255, 255, .12);
  border-color: rgba(127, 202, 117, .55);
}

/* Icon containers inside cards — scale gently when the parent card is hovered.
   Common icon-bubble class names across the project. */
.service-card:hover .sc-icon,
.mv-card:hover .mv-ico,
.value-card:hover .vc-icon,
.ts-card:hover .ts-ico,
.ct-dept:hover .ct-dept-ico,
.ct-channel:hover .ct-channel-ico,
.ne-event:hover .ne-event-ico,
.ol-pillar:hover .ol-pillar-ico,
.pr-step:hover .pr-step-ico,
.proc-step:hover .proc-circle,
.app-step:hover .app-step-num,
.fund-bar-item:hover .fbi-ico,
.fq-help:hover .fq-help-ico,
.ar-help:hover .ar-help-ico,
.pr-contact-card:hover .pr-contact-ico,
.rc-paia:hover .rc-paia-ico,
.ol-contact:hover .ol-contact-ico,
.district-card:hover .district-ico {
  transform: scale(1.08);
  transition: transform var(--t-mid) var(--ease), background var(--t-mid) var(--ease);
}

/* Press-list item — horizontal nudge already exists; keep it, just standardise easing */
.ne-press-item { transition: transform var(--t-mid) var(--ease), box-shadow var(--t-mid) var(--ease), border-color var(--t-mid) var(--ease); }
.ne-press-item:hover { transform: translateX(4px); border-color: rgba(127, 202, 117, .55); }

/* Active press (touch) — quicker press feedback so taps feel responsive */
@media (hover: none) {
  .service-card:active, .mv-card:active, .news-card:active, .evt-card:active,
  .value-card:active, .vacancy-card:active, .proc-step:active,
  .ar-card:active, .district-card:active, .agri-item:active, .ts-card:active,
  .ct-dept:active, .ct-channel:active, .ne-card:active, .ne-event:active,
  .ol-pillar:active, .ol-member:active, .pr-card:active, .pr-doc:active,
  .rc-card:active, .rc-video:active {
    transform: translateY(-2px) scale(.99);
    transition-duration: var(--t-fast);
  }
}

/* Buttons — unify hover lift across the project (.btn-* and .nav-cta variants) */
.btn-ph-p, .btn-ph-s, .btn-bc-p, .btn-bc-s,
.cta-btn-p, .cta-btn-s, .btn-cta-p, .btn-cta-s,
.btn-hero-p, .btn-hero-s, .btn-apply, .btn-download,
.nav-cta, .mob-cta, .cf-btn, .nl-btn {
  transition: transform var(--t-mid) var(--ease),
              box-shadow var(--t-mid) var(--ease),
              background var(--t-mid) var(--ease),
              color var(--t-mid) var(--ease);
}
.btn-ph-p:hover, .btn-bc-p:hover, .cta-btn-p:hover, .btn-cta-p:hover,
.btn-hero-p:hover, .btn-apply:hover, .nav-cta:hover {
  transform: translateY(-2px);
}
.btn-ph-s:hover, .btn-bc-s:hover, .cta-btn-s:hover, .btn-cta-s:hover,
.btn-hero-s:hover, .btn-download:hover {
  transform: translateY(-1px);
}

/* Reusable utility — opt-in card hover for future markup */
.card,
.u-card-hover {
  background: #fff;
  border: 1px solid var(--bdr);
  border-radius: var(--card-radius);
  padding: var(--card-pad);
  box-shadow: var(--shadow-rest);
  transition:
    transform     var(--t-mid)  var(--ease),
    box-shadow    var(--t-mid)  var(--ease),
    border-color  var(--t-mid)  var(--ease);
}
.card:hover,
.u-card-hover:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-hover);
  border-color: rgba(127, 202, 117, .55);
}

/* Respect user motion preference — disable lift, keep colour-only feedback */
@media (prefers-reduced-motion: reduce) {
  .service-card, .mv-card, .mi-item, .news-card, .evt-card,
  .value-card, .vacancy-card, .intern-card, .empty-state, .proc-step,
  .ar-card, .ar-latest, .ar-empty, .ar-no-match, .ar-help, .ar-notice, .ar-faq-item,
  .district-card, .intro-body, .intro-highlight, .fund-bar-item, .fund-visual,
  .agri-item, .ts-card, .app-step, .app-notice,
  .ct-form-card, .ct-info-card, .ct-dept, .ct-notice, .ct-channel,
  .fq-item, .fq-empty, .fq-no-match, .fq-help,
  .ne-featured, .ne-card, .ne-event, .ne-press-item, .ne-empty, .ne-subscribe,
  .ol-intro, .ol-stat, .ol-trustee, .ol-pillar, .ol-member, .ol-sec-card,
  .ol-empty, .ol-contact,
  .pr-step, .pr-featured, .pr-card, .pr-archive-item, .pr-comp, .pr-doc,
  .pr-contact-card, .pr-empty,
  .rc-feat, .rc-card, .rc-paia, .rc-video, .rc-form, .rc-empty,
  .ph-stat, .ar-hero-stat, .ct-hero-stat, .fq-hero-stat, .ne-hero-stat,
  .ol-intro-badge, .pr-hero-stat, .rc-hero-stat,
  .card, .u-card-hover {
    transition: border-color var(--t-fast) linear, background var(--t-fast) linear !important;
  }
  .service-card:hover, .mv-card:hover, .news-card:hover, .evt-card:hover,
  .value-card:hover, .vacancy-card:hover, .proc-step:hover,
  .ar-card:hover, .district-card:hover, .agri-item:hover, .ts-card:hover,
  .ct-dept:hover, .ct-channel:hover, .ne-card:hover, .ne-event:hover,
  .ol-pillar:hover, .ol-member:hover, .pr-card:hover, .pr-doc:hover,
  .rc-card:hover, .rc-video:hover, .card:hover, .u-card-hover:hover {
    transform: none !important;
  }
}

/* ─── Theme-consistency baseline ─────────────────────────────────────────
   Normalise radius/spacing on common card classes without forcing a redesign.
   Only adjusts elements that today use a smaller/different radius and would
   otherwise look out-of-step with the rest of the site.
   ─────────────────────────────────────────────────────────────────────── */
.service-card, .mv-card, .news-card, .evt-card,
.value-card, .vacancy-card,
.ar-card, .district-card,
.ts-card, .ct-dept, .ct-channel, .ct-notice,
.fq-item, .fq-help,
.ne-card, .ne-event,
.ol-pillar, .ol-member, .ol-sec-card,
.pr-card, .pr-doc, .pr-contact-card,
.rc-card, .rc-video, .rc-paia {
  border-radius: var(--card-radius);
}

.intern-card, .ne-featured, .pr-featured, .rc-feat,
.ar-latest, .ct-form-card, .ne-subscribe, .ol-intro {
  border-radius: var(--card-radius-lg);
}

/* Make page-section vertical rhythm slightly more consistent on big screens */
@media (min-width: 1025px) {
  .section, .section-alt { padding-top: 80px; padding-bottom: 80px; }
}

/* ═══════════════════════════════════════════════════════════════════════
   PRINT
   ═══════════════════════════════════════════════════════════════════════ */
@media print {
  .util-bar, nav, .mob-nav, .ham,
  .ticker, .bottom-cta, .newsletter,
  .contact-section, footer .f-socials { display: none !important; }

  body  { font-size: 12pt; color: #000; }
  a     { color: #000; text-decoration: underline; }
  .section, .section-alt { padding: 20px 0 !important; }
  .footer-grid { grid-template-columns: 1fr 1fr !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
}