:root {
    --green-dark: #1a5c2a;
    --green-mid: #2d8a47;
    --green-light: #4caf6a;
    --green-pale: #e8f5ec;
    --green-subtle: #f0faf3;
    --white: #ffffff;
    --off-white: #f8fdf9;
    --text-dark: #0f2e18;
    --text-mid: #2a5c3a;
    --text-muted: #5a8a6a;
    --border: #c8e6cf;
    --gold: #e8a020;
    --shadow: 0 4px 24px rgba(26,92,42,0.13);
    --shadow-lg: 0 12px 48px rgba(26,92,42,0.18);
  }

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

  html { scroll-behavior: smooth; }

  body {
    font-family: 'Source Sans 3', sans-serif;
    color: var(--text-dark);
    background: var(--white);
    overflow-x: hidden;
  }

  /* ─── NAV ─────────────────────────────── */
  nav {
    position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 2px solid var(--green-light);
    padding: 0 5%;
    display: flex; align-items: center; justify-content: space-between;
    height: 68px;
    box-shadow: 0 2px 16px rgba(26,92,42,0.08);
  }
  .nav-brand {
    display: flex; align-items: center; gap: 12px;
    text-decoration: none;
  }
  .nav-logo-wrap {
    display: flex; align-items: center; justify-content: center;
    width: 48px; height: 48px; flex-shrink: 0;
  }
  .nav-gov-logo {
    width: 46px; height: 46px; object-fit: contain;
    filter: drop-shadow(0 1px 3px rgba(26,92,42,0.2));
  }
  .nav-logo {
    width: 44px; height: 44px;
    background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
    border-radius: 10px;
    display: flex; align-items: center; justify-content: center;
    color: white; font-weight: 800; font-size: 1.1rem; letter-spacing: -1px;
  }
  .nav-title-text { line-height: 1.1; }
  .nav-title-text strong {
    display: block; color: var(--green-dark); font-size: 0.85rem; font-weight: 700; letter-spacing: 0.05em;
  }
  .nav-title-text span { color: var(--text-muted); font-size: 0.72rem; }
  .nav-links { display: flex; gap: 28px; list-style: none; }
  .nav-links a {
    color: var(--text-mid); text-decoration: none; font-size: 0.88rem; font-weight: 600;
    letter-spacing: 0.03em; padding-bottom: 2px;
    border-bottom: 2px solid transparent; transition: all 0.25s;
  }
  .nav-links a:hover { color: var(--green-dark); border-color: var(--green-light); }

  /* ─── HERO ─────────────────────────────── */
  .hero {
    min-height: 100vh;
    background: linear-gradient(160deg, var(--green-dark) 0%, var(--green-mid) 55%, #3da85c 100%);
    position: relative; overflow: hidden;
    display: flex; align-items: center; padding: 100px 5% 60px;
  }
  .hero::before {
    content: '';
    position: absolute; inset: 0;
    background:
      radial-gradient(ellipse 60% 80% at 75% 40%, rgba(255,255,255,0.07) 0%, transparent 70%),
      repeating-linear-gradient(45deg, transparent, transparent 40px, rgba(255,255,255,0.025) 40px, rgba(255,255,255,0.025) 41px);
  }
  .hero-geo {
    position: absolute; right: -60px; top: 50%; transform: translateY(-50%);
    width: 620px; height: 620px; border-radius: 50%;
    background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12);
  }
  .hero-geo::before {
    content: ''; position: absolute; inset: 50px; border-radius: 50%;
    background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.1);
  }
  .hero-content { position: relative; z-index: 2; max-width: 680px; }
  .hero-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.3);
    color: white; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em;
    padding: 6px 16px; border-radius: 100px; margin-bottom: 28px;
    text-transform: uppercase;
  }
  .hero-badge span { width: 6px; height: 6px; background: var(--gold); border-radius: 50%; }
  .hero h1 {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(2.8rem, 5vw, 4.2rem);
    color: white; line-height: 1.1; margin-bottom: 24px;
    text-shadow: 0 2px 20px rgba(0,0,0,0.2);
  }
  .hero h1 em { font-style: normal; color: #a8f0be; }
  .hero p {
    color: rgba(255,255,255,0.88); font-size: 1.15rem; line-height: 1.75;
    margin-bottom: 44px; font-weight: 300;
  }
  .hero-stats {
    display:flex;gap:0;margin-bottom:44px;overflow:hidden;border-radius:16px;
    background:linear-gradient(135deg,rgba(255,255,255,.115),rgba(255,255,255,.065));
    border:1px solid rgba(255,255,255,.17);
    box-shadow:0 16px 42px rgba(6,52,26,.18),inset 0 1px 0 rgba(255,255,255,.11);
    backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  }
  .hero-stat {
    flex:1;text-align:center;padding:21px 18px;
    border-right:1px solid rgba(255,255,255,.16);
    background:transparent;
  }
  .hero-stat:first-child { border-radius:0; }
  .hero-stat:last-child { border-right:none;border-radius:0; }
  .hero-stat-num {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 2rem; font-weight: 800; color: white; display: block;
  }
  .hero-stat-label { font-size: 0.75rem; color: rgba(255,255,255,0.7); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
  .hero-cta {
    display: flex; gap: 16px; flex-wrap: wrap;
  }
  .btn-primary {
    background: white; color: var(--green-dark);
    padding: 14px 32px; border-radius: 8px;
    font-weight: 700; font-size: 0.92rem; text-decoration: none;
    box-shadow: 0 4px 20px rgba(0,0,0,0.2); transition: all 0.25s;
    letter-spacing: 0.02em;
  }
  .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 30px rgba(0,0,0,0.3); }
  .btn-outline {
    border: 2px solid rgba(255,255,255,0.6); color: white;
    padding: 14px 32px; border-radius: 8px;
    font-weight: 600; font-size: 0.92rem; text-decoration: none;
    transition: all 0.25s;
  }
  .btn-outline:hover { background: rgba(255,255,255,0.12); border-color: white; }

  /* ─── SECTIONS ─────────────────────────── */
  section { padding: 90px 5%; }
  .section-label {
    font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em;
    text-transform: uppercase; color: var(--green-mid);
    margin-bottom: 12px;
  }
  .section-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: clamp(2rem, 3.5vw, 2.8rem);
    color: var(--green-dark); line-height: 1.2; margin-bottom: 20px;
  }
  .section-desc {
    font-size: 1.05rem; color: var(--text-muted); line-height: 1.8; max-width: 640px;
  }
  .container { max-width: 1200px; margin: 0 auto; }
  .section-header { margin-bottom: 56px; }
  .section-header.center { text-align: center; }
  .section-header.center .section-desc { margin: 0 auto; }
  .divider {
    width: 60px; height: 4px; border-radius: 2px;
    background: linear-gradient(90deg, var(--green-mid), var(--green-light));
    margin: 20px 0 28px;
  }
  .center .divider { margin: 20px auto 28px; }

  /* ─── OVERVIEW / AIM ───────────────────── */
  .overview { background: var(--green-subtle); }
  .aim-card {
    background: linear-gradient(135deg, var(--green-dark) 0%, var(--green-mid) 100%);
    border-radius: 20px; padding: 48px 56px;
    color: white; position: relative; overflow: hidden; margin-bottom: 56px;
  }
  .aim-card::before {
    content: '"'; position: absolute; right: 40px; top: 0;
    font-size: 14rem; color: rgba(255,255,255,0.07);
    font-family: 'Merriweather', Georgia, serif; line-height: 1;
  }
  .aim-card h3 {
    font-family: 'Merriweather', Georgia, serif; font-size: 1.6rem;
    margin-bottom: 16px; color: #a8f0be;
  }
  .aim-card p { font-size: 1.2rem; line-height: 1.8; color: rgba(255,255,255,0.92); max-width: 680px; }

  .roles-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 24px; }
  .role-card {
    background: white; border-radius: 16px; padding: 32px;
    border: 1px solid var(--border); box-shadow: var(--shadow);
    transition: all 0.3s;
  }
  .role-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
  .role-icon {
    width: 52px; height: 52px; border-radius: 12px;
    background: var(--green-pale); display: flex; align-items: center; justify-content: center;
    margin-bottom: 20px; font-size: 1.5rem;
  }
  .role-card h4 {
    font-family: 'Merriweather', Georgia, serif; font-size: 1.15rem;
    color: var(--green-dark); margin-bottom: 10px;
  }
  .role-card .chair {
    display: inline-block; font-size: 0.75rem; font-weight: 700;
    color: var(--green-mid); background: var(--green-pale);
    padding: 4px 10px; border-radius: 100px; margin-bottom: 14px; letter-spacing: 0.05em;
  }
  .role-card ul { list-style: none; }
  .role-card ul li {
    font-size: 0.9rem; color: var(--text-muted); padding: 5px 0;
    border-bottom: 1px solid var(--green-pale); display: flex; gap: 8px; align-items: flex-start;
  }
  .role-card ul li::before { content: '▸'; color: var(--green-light); flex-shrink: 0; font-size: 0.8rem; margin-top: 2px; }
  .role-card ul li:last-child { border-bottom: none; }

  /* ─── MONITORING ──────────────────────── */
  .monitoring { background: white; }
  .monitor-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 20px; margin-top: 48px; }
  .monitor-item {
    background: var(--green-subtle); border-radius: 14px; padding: 28px;
    border-left: 4px solid var(--green-mid); transition: all 0.25s;
  }
  .monitor-item:hover { background: var(--green-pale); transform: translateX(4px); }
  .monitor-item h4 { font-size: 1rem; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
  .monitor-item p { font-size: 0.88rem; color: var(--text-muted); line-height: 1.6; }

  /* ─── STATS UPDATE ─────────────────────── */
  .stats-update { background: var(--green-pale); }
  .phases-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; margin-bottom: 48px; }
  .phase-card {
    background: white; border-radius: 20px; padding: 36px;
    box-shadow: var(--shadow); border-top: 5px solid;
  }
  .phase-card.ph1 { border-color: var(--green-dark); }
  .phase-card.ph2 { border-color: var(--green-light); }
  .phase-badge {
    display: inline-block; font-size: 0.72rem; font-weight: 800; letter-spacing: 0.12em;
    text-transform: uppercase; padding: 5px 14px; border-radius: 100px; margin-bottom: 16px;
  }
  .ph1 .phase-badge { background: var(--green-dark); color: white; }
  .ph2 .phase-badge { background: var(--green-pale); color: var(--green-dark); }
  .phase-card h3 {
    font-family: 'Merriweather', Georgia, serif; font-size: 1.6rem; color: var(--green-dark); margin-bottom: 6px;
  }
  .phase-card .sub { font-size: 0.9rem; color: var(--text-muted); margin-bottom: 24px; }
  .phase-metrics { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 24px; }
  .phase-metric { background: var(--green-subtle); border-radius: 10px; padding: 16px; text-align: center; }
  .phase-metric .num { font-family: 'Merriweather', Georgia, serif; font-size: 1.8rem; font-weight: 800; color: var(--green-dark); }
  .phase-metric .lbl { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-top: 4px; }
  .progress-bar-wrap { margin-top: 8px; }
  .progress-bar-wrap label { font-size: 0.82rem; color: var(--text-muted); font-weight: 600; display: flex; justify-content: space-between; margin-bottom: 6px; }
  .progress-bar { height: 8px; background: var(--green-pale); border-radius: 100px; overflow: hidden; }
  .progress-fill { height: 100%; border-radius: 100px; background: linear-gradient(90deg, var(--green-dark), var(--green-mid)); }
  .phase-note { font-size: 0.82rem; color: var(--text-muted); line-height: 1.6; padding-top: 16px; border-top: 1px solid var(--border); }

  /* Totals row */
  .totals-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 56px; }
  .total-card {
    background: var(--green-dark); border-radius: 16px; padding: 28px 24px; text-align: center; color: white;
  }
  .total-card .big { font-family: 'Merriweather', Georgia, serif; font-size: 2.4rem; font-weight: 800; }
  .total-card .lbl { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255,255,255,0.7); margin-top: 4px; }

  /* ─── SECTORS ─────────────────────────── */
  .sectors { background: white; }
  .sectors-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 18px; }
  .sector-card {
    border-radius: 16px; overflow: hidden; border: 1px solid var(--border);
    transition: all 0.3s;
  }
  .sector-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
  .sector-top { padding: 28px 24px; }
  .sector-pct { font-family: 'Merriweather', Georgia, serif; font-size: 2.4rem; font-weight: 800; color: white; }
  .sector-bar-wrap { height: 4px; background: rgba(255,255,255,0.3); margin-top: 12px; border-radius: 2px; }
  .sector-bar { height: 100%; background: white; border-radius: 2px; }
  .sector-bottom { padding: 18px 24px; background: white; }
  .sector-name { font-weight: 700; font-size: 0.95rem; color: var(--green-dark); margin-bottom: 4px; }
  .sector-data { font-size: 0.82rem; color: var(--text-muted); }
  .sector-data strong { color: var(--green-mid); }

  /* ─── DISTRICT TABLE ───────────────────── */
  .districts { background: var(--green-subtle); }
  .table-wrap { overflow-x: auto; border-radius: 16px; box-shadow: var(--shadow); margin-top: 40px; }
  table { width: 100%; border-collapse: collapse; background: white; font-size: 0.85rem; }
  thead tr { background: var(--green-dark); }
  thead th { color: white; padding: 14px 16px; text-align: left; font-weight: 700; font-size: 0.8rem; letter-spacing: 0.04em; white-space: nowrap; }
  thead th:first-child { border-radius: 16px 0 0 0; }
  thead th:last-child { border-radius: 0 16px 0 0; }
  tbody tr { border-bottom: 1px solid var(--green-pale); transition: background 0.15s; }
  tbody tr:hover { background: var(--green-subtle); }
  tbody tr:last-child { border-bottom: none; background: var(--green-pale); font-weight: 700; }
  tbody td { padding: 12px 16px; color: var(--text-dark); }
  .prog-cell { min-width: 80px; }
  .prog-pill { display: inline-flex; align-items: center; gap: 6px; }
  .prog-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; }
  .prog-high { background: var(--green-light); }
  .prog-mid { background: var(--gold); }
  .prog-low { background: #e06060; }

  /* ─── E-COMMERCE ──────────────────────── */
  .ecommerce { background: white; }
  .ec-intro {
    display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-bottom: 56px;
  }
  .ec-visual {
    background: linear-gradient(135deg, var(--green-dark), var(--green-mid));
    border-radius: 20px; padding: 48px; text-align: center; color: white;
  }
  .ec-visual .big-num { font-family: 'Merriweather', Georgia, serif; font-size: 5rem; font-weight: 800; }
  .ec-visual .big-lbl { font-size: 1rem; opacity: 0.8; margin-top: 8px; }
  .ec-visual .amount { font-size: 1.4rem; font-weight: 700; margin-top: 16px; color: #a8f0be; }
  .ec-list { list-style: none; }
  .ec-list li {
    padding: 14px 0; border-bottom: 1px solid var(--border);
    display: flex; align-items: center; gap: 14px;
  }
  .ec-list li:last-child { border-bottom: none; }
  .ec-list .icon {
    width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0;
    background: var(--green-pale); display: flex; align-items: center; justify-content: center; font-size: 1.1rem;
  }
  .ec-list .info strong { display: block; font-size: 0.9rem; color: var(--green-dark); }
  .ec-list .info span { font-size: 0.8rem; color: var(--text-muted); }

  /* ─── FIELD VISITS ──────────────────────── */
  .visits { background: var(--green-pale); }
  .visits-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 40px; }
  .visit-card {
    background: white; border-radius: 12px; padding: 20px;
    box-shadow: 0 2px 10px rgba(26,92,42,0.08); border: 1px solid var(--border);
    transition: all 0.2s;
  }
  .visit-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
  .visit-card .district { font-weight: 700; color: var(--green-dark); font-size: 0.92rem; margin-bottom: 10px; }
  .visit-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
  .visit-phase { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); }
  .visit-count { font-weight: 700; color: var(--green-mid); font-size: 0.88rem; }
  .visit-dates { font-size: 0.75rem; color: var(--text-muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--green-pale); }

  /* ─── FOOTER ──────────────────────────── */
  footer {
    background: var(--green-dark); color: white; padding: 60px 5% 30px;
  }
  .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 48px; }
  .footer-brand h3 { font-family: 'Merriweather', Georgia, serif; font-size: 1.4rem; margin-bottom: 14px; color: #a8f0be; }
  .footer-brand p { font-size: 0.88rem; color: rgba(255,255,255,0.65); line-height: 1.8; }
  .footer-col h4 { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.12em; color: rgba(255,255,255,0.5); margin-bottom: 16px; }
  .footer-col ul { list-style: none; }
  .footer-col ul li { margin-bottom: 10px; }
  .footer-col ul li a { color: rgba(255,255,255,0.75); text-decoration: none; font-size: 0.88rem; transition: color 0.2s; }
  .footer-col ul li a:hover { color: #a8f0be; }
  .footer-bottom {
    border-top: 1px solid rgba(255,255,255,0.12); padding-top: 28px;
    display: flex; justify-content: space-between; align-items: center;
    font-size: 0.82rem; color: rgba(255,255,255,0.45);
  }
  .footer-bottom strong { color: rgba(255,255,255,0.7); }

  /* ─── SOCIAL MEDIA ────────────────────── */
  .social-bar {
    display: flex; align-items: center; gap: 10px; margin-top: 20px;
  }
  .social-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 18px; border-radius: 100px;
    font-size: 0.82rem; font-weight: 700; text-decoration: none;
    transition: all 0.25s; letter-spacing: 0.02em; border: 2px solid transparent;
  }
  .social-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
  .social-btn.fb {
    background: #1877f2; color: white;
  }
  .social-btn.fb:hover { background: #0d65d9; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(24,119,242,0.4); }
  .social-btn.tt {
    background: #010101; color: white;
  }
  .social-btn.tt:hover { background: #2a2a2a; transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); }
  .social-btn.ig {
    background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); color: white;
  }
  .social-btn.ig:hover { filter: brightness(1.1); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(188,24,136,0.4); }
  .float-btn.ig { background: linear-gradient(45deg,#f09433,#e6683c,#dc2743,#cc2366,#bc1888); }

  /* BSDI Roles section */
  .bsdi-roles { background: var(--green-dark); padding: 90px 5%; }
  .bsdi-roles .section-label { color: #a8f0be; }
  .bsdi-roles .section-title { color: white; }
  .bsdi-roles .section-desc { color: rgba(255,255,255,0.72); }
  .bsdi-roles .divider { background: linear-gradient(90deg,#a8f0be,#4caf6a); }
  .roles-4-grid {
    display: grid; grid-template-columns: repeat(2,1fr); gap: 28px; margin-top: 56px;
  }
  .role4-card {
    background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.15);
    border-radius: 20px; padding: 40px 36px;
    display: flex; gap: 24px; align-items: flex-start;
    transition: all 0.3s; position: relative; overflow: hidden;
  }
  .role4-card::before {
    content: ''; position: absolute; inset: 0; border-radius: 20px;
    background: linear-gradient(135deg, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
  }
  .role4-card:hover { background: rgba(255,255,255,0.11); transform: translateY(-4px); border-color: rgba(255,255,255,0.3); }
  .role4-num {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 3.5rem; font-weight: 800;
    color: rgba(255,255,255,0.12); line-height: 1; flex-shrink: 0;
    min-width: 56px;
  }
  .role4-body {}
  .role4-icon { font-size: 2rem; margin-bottom: 12px; display: block; }
  .role4-card h3 {
    font-family: 'Merriweather', Georgia, serif; font-size: 1.3rem;
    color: #a8f0be; margin-bottom: 12px; line-height: 1.3;
  }
  .role4-card p { font-size: 0.92rem; color: rgba(255,255,255,0.75); line-height: 1.75; }
  @media (max-width: 700px) { .roles-4-grid { grid-template-columns: 1fr; } }

  /* Hero social row */
  .hero-social { display: flex; gap: 10px; margin-bottom: 28px; flex-wrap: wrap; }
  .hero-social-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 18px; border-radius: 100px;
    font-size: 0.8rem; font-weight: 700; text-decoration: none;
    transition: all 0.25s; color: white;
    border: 1.5px solid rgba(255,255,255,0.4);
    background: rgba(255,255,255,0.12); backdrop-filter: blur(4px);
  }
  .hero-social-btn svg { width: 15px; height: 15px; flex-shrink: 0; }
  .hero-social-btn:hover { background: rgba(255,255,255,0.22); border-color: rgba(255,255,255,0.7); transform: translateY(-2px); }

  /* Floating social sidebar */
  .float-social {
    position: fixed; left: 20px; top: 50%; transform: translateY(-50%);
    z-index: 900; display: flex; flex-direction: column; gap: 10px;
  }
  .float-btn {
    width: 44px; height: 44px; border-radius: 12px;
    display: flex; align-items: center; justify-content: center;
    text-decoration: none; transition: all 0.25s;
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
  }
  .float-btn svg { width: 20px; height: 20px; }
  .float-btn.fb { background: #1877f2; }
  .float-btn.tt { background: #010101; }
  .float-btn.yt { background: #ff0000; }
  .float-btn:hover { transform: scale(1.15) translateX(4px); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }
  .float-label {
    position: absolute; left: 54px; background: var(--green-dark); color: white;
    font-size: 0.75rem; font-weight: 700; padding: 5px 10px; border-radius: 6px;
    white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s;
  }
  .float-btn:hover .float-label { opacity: 1; }

  /* Footer social */
  .footer-social { margin-top: 20px; display: flex; gap: 10px; }
  .footer-social-btn {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 16px; border-radius: 100px; text-decoration: none;
    font-size: 0.78rem; font-weight: 700; transition: all 0.25s;
    border: 1.5px solid rgba(255,255,255,0.2); color: rgba(255,255,255,0.85);
    background: rgba(255,255,255,0.07);
  }
  .footer-social-btn svg { width: 14px; height: 14px; }
  .footer-social-btn:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.5); color: white; }

  @media (max-width: 768px) { .float-social { display: none; } }

  /* ─── ANIMATIONS ──────────────────────── */
  @keyframes fadeUp {
    from { opacity: 0; transform: translateY(24px); }
    to { opacity: 1; transform: translateY(0); }
  }
  .hero-content > * { animation: fadeUp 0.7s ease both; }
  .hero-badge { animation-delay: 0.1s; }
  .hero h1 { animation-delay: 0.25s; }
  .hero p { animation-delay: 0.4s; }
  .hero-stats { animation-delay: 0.55s; }
  .hero-cta { animation-delay: 0.7s; }

  /* ─── RESPONSIVE ──────────────────────── */
  @media (max-width: 900px) {
    .nav-links { display: none; }
    .phases-grid { grid-template-columns: 1fr; }
    .totals-row { grid-template-columns: 1fr 1fr; }
    .ec-intro { grid-template-columns: 1fr; }
    .footer-grid { grid-template-columns: 1fr 1fr; }
    .hero-geo { display: none; }
  }
  @media (max-width: 600px) {
    .totals-row { grid-template-columns: 1fr 1fr; }
    .footer-grid { grid-template-columns: 1fr; }
    .hero-stats { flex-direction: column; }
    .hero-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.2); }
    .hero-stat:first-child { border-radius: 12px 12px 0 0; }
    .hero-stat:last-child { border-radius: 0 0 12px 12px; border-bottom: none; }
  }

  /* ─── PROJECTS SECTION ─────────────────── */
  .dist-tabs-wrap {
    overflow-x: auto; margin-bottom: 0;
    border-bottom: 2px solid var(--border);
    background: white; border-radius: 14px 14px 0 0;
    box-shadow: 0 2px 8px rgba(26,92,42,0.06);
  }
  .dist-tabs {
    display: flex; flex-wrap: wrap; gap: 0; padding: 12px 12px 0;
    min-width: 600px;
  }
  .dist-tab {
    background: none; border: none; cursor: pointer;
    padding: 10px 14px; border-radius: 8px 8px 0 0;
    font-size: 0.8rem; font-weight: 600; color: var(--text-muted);
    font-family: inherit; transition: all 0.2s; display: flex; align-items: center; gap: 6px;
    border-bottom: 2px solid transparent; margin-bottom: -2px;
    white-space: nowrap;
  }
  .dist-tab:hover { color: var(--green-dark); background: var(--green-pale); }
  .dist-tab.active { color: var(--green-dark); border-color: var(--green-dark); background: var(--green-subtle); }
  .tab-count { background: var(--green-pale); color: var(--green-mid); font-size: 0.68rem; font-weight: 800; padding: 2px 6px; border-radius: 100px; }
  .dist-tab.active .tab-count { background: var(--green-dark); color: white; }

  .dist-panels { background: white; border-radius: 0 0 14px 14px; box-shadow: var(--shadow); overflow: hidden; }
  .dist-panel { display: none; }
  .dist-panel.active { display: block; }

  .phase-tab-header {
    padding: 14px 24px; font-size: 0.82rem; font-weight: 700;
    letter-spacing: 0.05em; text-transform: uppercase;
  }
  .ph1-header { background: var(--green-dark); color: white; }
  .ph2-header { background: var(--green-mid); color: white; }

  .proj-table-wrap { overflow-x: auto; }
  .proj-table { width: 100%; border-collapse: collapse; font-size: 0.83rem; }
  .proj-table thead th {
    background: var(--green-subtle); color: var(--green-dark);
    padding: 10px 14px; text-align: left; font-weight: 700;
    font-size: 0.75rem; letter-spacing: 0.04em; text-transform: uppercase;
    border-bottom: 1px solid var(--border); white-space: nowrap;
  }
  .proj-table tbody tr { border-bottom: 1px solid #f0faf3; transition: background 0.1s; }
  .proj-table tbody tr:hover { background: var(--green-subtle); }
  .proj-table tbody td { padding: 10px 14px; vertical-align: top; color: var(--text-dark); }
  .proj-table tbody td:first-child { color: var(--text-muted); font-size: 0.75rem; width: 36px; }
  .proj-table tbody td:last-child { min-width: 100px; }
  .sector-tag {
    display: inline-block; font-size: 0.7rem; font-weight: 700; padding: 2px 8px;
    border-radius: 100px; background: var(--green-pale); color: var(--green-dark);
    white-space: nowrap;
  }

  /* ─── THREE-PHASE PROJECT CYCLE ───────── */
  .proj-cycle { background: white; }
  .cycle-grid {
    display: grid; grid-template-columns: 1fr 1fr 1fr;
    gap: 0; border: 1px solid var(--border);
    border-radius: 16px; overflow: hidden;
    box-shadow: var(--shadow-lg); margin-top: 56px;
  }
  .cycle-card {
    padding: 40px 32px; position: relative;
    border-right: 1px solid var(--border); transition: background 0.3s;
  }
  .cycle-card:last-child { border-right: none; }
  .cycle-card:nth-child(1) { background: #f7fbf9; }
  .cycle-card:nth-child(2) { background: #fdfaf2; }
  .cycle-card:nth-child(3) { background: #f9f7ff; }
  .cycle-card:hover:nth-child(1) { background: #eef7f2; }
  .cycle-card:hover:nth-child(2) { background: #faf5e6; }
  .cycle-card:hover:nth-child(3) { background: #f3f0fb; }
  .cycle-arrow {
    position: absolute; right: -18px; top: 50%; transform: translateY(-50%);
    width: 36px; height: 36px; background: var(--gold);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: white; font-size: 14px; z-index: 2;
    box-shadow: 0 2px 12px rgba(232,160,32,0.4);
  }
  .cycle-num {
    font-size: 0.7rem; color: var(--text-muted);
    letter-spacing: 0.15em; margin-bottom: 16px; font-weight: 700;
    text-transform: uppercase;
  }
  .cycle-title {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 1.5rem; font-weight: 700; color: var(--green-dark); margin-bottom: 6px;
  }
  .cycle-sub {
    font-size: 0.72rem; color: var(--text-muted);
    text-transform: uppercase; letter-spacing: 0.12em; font-weight: 700; margin-bottom: 22px;
  }
  .cycle-card:nth-child(1) .cycle-num { color: var(--green-mid); }
  .cycle-card:nth-child(2) .cycle-num { color: var(--gold); }
  .cycle-card:nth-child(3) .cycle-num { color: #8e74c9; }
  .cycle-steps { list-style: none; display: flex; flex-direction: column; gap: 10px; }
  .cycle-steps li {
    display: flex; align-items: flex-start; gap: 10px;
    font-size: 0.88rem; color: var(--text-mid); line-height: 1.55;
  }
  .c-dot {
    width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 5px;
  }
  .cycle-card:nth-child(1) .c-dot { background: var(--green-mid); }
  .cycle-card:nth-child(2) .c-dot { background: var(--gold); }
  .cycle-card:nth-child(3) .c-dot { background: #8e74c9; }
  @media (max-width: 800px) {
    .cycle-grid { grid-template-columns: 1fr; }
    .cycle-card { border-right: none; border-bottom: 1px solid var(--border); }
    .cycle-card:last-child { border-bottom: none; }
    .cycle-arrow { display: none; }
  }
  /* ─── MAJOR ACHIEVEMENTS ──────────────── */
  .achievements {
    background: linear-gradient(160deg, var(--green-dark) 0%, #1e7a3a 50%, #256b35 100%);
    padding: 90px 5%; position: relative; overflow: hidden;
  }
  .achievements::before {
    content: '';
    position: absolute; inset: 0;
    background: repeating-linear-gradient(
      -45deg, transparent, transparent 40px,
      rgba(255,255,255,0.02) 40px, rgba(255,255,255,0.02) 41px
    );
    pointer-events: none;
  }
  .achievements::after {
    content: '';
    position: absolute; right: -120px; top: -120px;
    width: 480px; height: 480px; border-radius: 50%;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    pointer-events: none;
  }
  .ach-header .section-label { color: #a8f0be; }
  .ach-header .section-title { color: white; }
  .ach-header .section-desc { color: rgba(255,255,255,0.75); }
  .ach-header .divider { background: linear-gradient(90deg,#a8f0be,#4caf6a); }

  .ach-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; margin-top: 56px; position: relative; z-index: 1;
  }
  .ach-card {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 20px; padding: 36px 24px;
    text-align: center; backdrop-filter: blur(6px);
    transition: all 0.35s; position: relative; overflow: hidden;
  }
  .ach-card::before {
    content: '';
    position: absolute; bottom: 0; left: 0; right: 0;
    height: 4px; border-radius: 0 0 20px 20px;
  }
  .ach-card:nth-child(1)::before { background: #4caf6a; }
  .ach-card:nth-child(2)::before { background: #e84040; }
  .ach-card:nth-child(3)::before { background: var(--gold); }
  .ach-card:nth-child(4)::before { background: #42a5f5; }
  .ach-card:nth-child(5)::before { background: #ffca28; }
  .ach-card:hover {
    background: rgba(255,255,255,0.14);
    transform: translateY(-6px);
    box-shadow: 0 16px 48px rgba(0,0,0,0.25);
    border-color: rgba(255,255,255,0.35);
  }
  .ach-icon {
    font-size: 2.8rem; margin-bottom: 20px;
    display: block; line-height: 1;
    filter: drop-shadow(0 2px 8px rgba(0,0,0,0.2));
  }
  .ach-bar-wrap {
    width: 100%; background: rgba(255,255,255,0.1);
    border-radius: 100px; height: 6px; margin-bottom: 20px; overflow: hidden;
  }
  .ach-bar {
    height: 100%; border-radius: 100px;
    animation: growBar 1.4s ease both;
  }
  .ach-card:nth-child(1) .ach-bar { background: #4caf6a; }
  .ach-card:nth-child(2) .ach-bar { background: #e84040; }
  .ach-card:nth-child(3) .ach-bar { background: var(--gold); }
  .ach-card:nth-child(4) .ach-bar { background: #42a5f5; }
  .ach-card:nth-child(5) .ach-bar { background: #ffca28; }
  @keyframes growBar {
    from { width: 0; }
  }
  .ach-count {
    font-family: 'Merriweather', Georgia, serif;
    font-size: 3.2rem; font-weight: 800; color: white;
    line-height: 1; margin-bottom: 12px;
    text-shadow: 0 2px 16px rgba(0,0,0,0.2);
  }
  .ach-label {
    font-size: 0.82rem; color: rgba(255,255,255,0.8);
    line-height: 1.5; font-weight: 600;
  }
  .ach-total-banner {
    margin-top: 40px; position: relative; z-index: 1;
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.2);
    border-radius: 14px; padding: 20px 32px;
    display: flex; align-items: center; justify-content: center;
    gap: 40px; flex-wrap: wrap;
  }
  .ach-total-item { text-align: center; }
  .ach-total-item .big { font-family:'Merriweather',Georgia,serif; font-size:1.8rem; font-weight:800; color:white; }
  .ach-total-item .lbl { font-size:0.75rem; color:rgba(255,255,255,0.65); text-transform:uppercase; letter-spacing:0.1em; margin-top:4px; }
  .ach-divider { width:1px; height:44px; background:rgba(255,255,255,0.2); }

  @media (max-width:900px) { .ach-grid { grid-template-columns: repeat(3,1fr); } }
  @media (max-width:600px) { .ach-grid { grid-template-columns: 1fr 1fr; } }

/* ===== 2026 database-driven refresh ===== */
.nav-gov-logo{width:46px;height:46px;object-fit:contain;display:block;background:transparent}
.nav-links-clean{gap:22px!important;flex:1;justify-content:center}
.nav-external{display:inline-flex;align-items:center;justify-content:center;background:var(--green-mid);color:#fff;text-decoration:none;font-weight:700;padding:10px 16px;border-radius:10px;white-space:nowrap;transition:.2s ease}
.nav-external:hover{transform:translateY(-1px);background:var(--green-dark)}
.hero-inner{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(300px,.88fr);gap:56px;align-items:center;max-width:1500px;margin:0 auto}
.hero-logo-area{
  position:relative;display:flex;align-items:center;justify-content:center;min-height:520px;
  padding:34px;border-radius:34px;overflow:hidden;isolation:isolate;
  background:linear-gradient(145deg,rgba(255,255,255,.07),rgba(255,255,255,.025));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 28px 70px rgba(7,52,27,.20);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)
}
.hero-logo-area::before{
  content:'';position:absolute;width:78%;aspect-ratio:1;border-radius:50%;z-index:-1;
  border:1px solid rgba(255,255,255,.13);
  background:radial-gradient(circle,rgba(255,255,255,.07) 0%,rgba(255,255,255,.025) 54%,transparent 72%);
  box-shadow:0 0 90px rgba(191,233,203,.08)
}
.hero-logo-area::after{
  content:'';position:absolute;inset:18px;border-radius:28px;z-index:-1;pointer-events:none;
  border:1px solid rgba(255,255,255,.055)
}
.hero-bsdi-logo{
  position:relative;z-index:1;width:min(500px,88%);height:auto;max-height:515px;object-fit:contain;
  background:transparent;filter:drop-shadow(0 18px 30px rgba(5,41,22,.26));
  transition:transform .35s ease,filter .35s ease
}
.hero-logo-area:hover .hero-bsdi-logo{transform:translateY(-3px);filter:drop-shadow(0 24px 36px rgba(5,41,22,.32))}
.hero-content{max-width:800px}
.hero-content strong{color:#fff}
.data-ach-grid{grid-template-columns:repeat(3,1fr)}
.data-ach-grid .ach-card{min-height:180px}
.phases-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}
.phase-card.ph3{border-top:4px solid #d4ad54}
.phase-card.ph3 .phase-badge{background:#f5ead0;color:#6b5218}
.sector-data-layout{display:grid;grid-template-columns:minmax(320px,.85fr) minmax(360px,1.15fr);gap:56px;align-items:center;margin-top:56px}
.sector-chart-wrap{position:relative;display:flex;align-items:center;justify-content:center}
#sectorPieChart{max-width:100%;cursor:pointer;filter:drop-shadow(0 8px 32px rgba(26,92,42,.16))}
#pie-centre{position:absolute;text-align:center;pointer-events:none}
#pie-centre-pct{font-family:'Merriweather',Georgia,serif;font-size:1.55rem;font-weight:800;color:var(--green-dark)}
#pie-centre-name{font-size:.78rem;color:var(--text-muted);font-weight:700;margin-top:3px}
#pie-centre-amt{font-size:.72rem;color:var(--green-mid);margin-top:2px}
.sector-legend-head,.sector-legend-row{display:grid;grid-template-columns:minmax(0,1fr) 90px 75px;gap:14px;align-items:center}
.sector-legend-head{font-size:.75rem;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.08em;margin-bottom:12px}
.sector-legend-row{padding:9px 0;border-bottom:1px solid var(--border);font-size:.9rem}
.sector-legend-row .value,.sector-legend-row .share{text-align:right;font-weight:700;color:var(--green-dark)}
.sector-name{display:flex;gap:9px;align-items:center;min-width:0}.sector-name span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.sector-swatch{width:11px;height:11px;border-radius:50%;flex:0 0 11px}
.district-table-scroll{overflow-x:auto}.district-table-scroll table{min-width:1420px}
.phase3-state{font-size:.78rem;line-height:1.25;white-space:nowrap}.phase3-state strong{display:block;color:var(--green-dark)}
.project-browser-section{background:var(--green-subtle);padding:90px 5%}
.project-controls{display:grid;grid-template-columns:minmax(260px,1fr) 160px 220px auto;gap:12px;margin:28px 0 18px}
.project-controls input,.project-controls select{width:100%;border:1px solid var(--border);background:#fff;border-radius:10px;padding:12px 14px;font:inherit;color:var(--text);outline:none}
.project-controls input:focus,.project-controls select:focus{border-color:var(--green-mid);box-shadow:0 0 0 3px rgba(45,138,71,.1)}
.project-controls button,.project-pagination button{border:0;border-radius:10px;padding:11px 18px;font-weight:700;cursor:pointer;background:var(--green-mid);color:#fff}.project-controls button:hover,.project-pagination button:hover:not(:disabled){background:var(--green-dark)}
.project-results-meta{display:flex;justify-content:space-between;gap:20px;font-size:.9rem;color:var(--text-muted);margin:8px 2px 14px}
.project-table-wrap{overflow-x:auto}.project-table{min-width:1120px}.project-table td:nth-child(4){min-width:360px;white-space:normal;line-height:1.35}.project-table td:last-child{min-width:180px;white-space:normal}
.project-phase-badge{display:inline-flex;border-radius:999px;padding:3px 9px;font-size:.75rem;font-weight:800;background:var(--green-pale);color:var(--green-dark)}
.project-status{font-weight:700;font-size:.8rem}.project-progress-mini{height:5px;background:#e7efe9;border-radius:3px;margin-top:5px;overflow:hidden}.project-progress-mini span{display:block;height:100%;background:var(--green-mid);border-radius:3px}
.project-pagination{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.project-pagination button:disabled{opacity:.4;cursor:not-allowed}
.visits-grid .visit-card{height:100%}
@media(max-width:1180px){nav{gap:16px}.nav-links-clean{gap:12px!important}.nav-links-clean a{font-size:.82rem}.hero-inner{grid-template-columns:1fr .7fr}.hero-logo-area{min-height:400px}.phases-grid-three{grid-template-columns:1fr}.data-ach-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:900px){.nav-links-clean{display:none}.nav-external{margin-left:auto}.hero-inner{grid-template-columns:1fr}.hero-logo-area{min-height:auto;padding:15px 0 0}.hero-bsdi-logo{width:min(360px,80%)}.sector-data-layout{grid-template-columns:1fr}.project-controls{grid-template-columns:1fr 1fr}.project-controls input{grid-column:1/-1}.data-ach-grid{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.nav-title-text strong{font-size:.78rem}.nav-title-text span{font-size:.67rem}.nav-gov-logo{width:38px;height:38px}.nav-external{padding:8px 10px;font-size:.78rem}.data-ach-grid{grid-template-columns:1fr}.project-controls{grid-template-columns:1fr}.project-controls input{grid-column:auto}.project-results-meta{flex-direction:column;gap:5px}.hero-logo-area{display:none}}
.hero-inner{width:100%;position:relative;z-index:2}
.hero-eyebrow{display:inline-flex;align-items:center;gap:9px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.27);color:#fff;font-size:.76rem;font-weight:800;letter-spacing:.1em;padding:7px 15px;border-radius:999px;margin-bottom:26px}
.hero-eyebrow span{width:7px;height:7px;border-radius:50%;background:var(--gold)}

/* ===== Patch: contrast + external sites ===== */
.achievements .section-header{position:relative;z-index:1}
.achievements .section-label{color:#b8f3c8!important;text-shadow:0 1px 8px rgba(0,0,0,.15)}
.achievements .section-title{color:#fff!important;text-shadow:0 2px 18px rgba(0,0,0,.24)}
.achievements .section-desc{color:rgba(255,255,255,.86)!important}
.achievements .divider{background:linear-gradient(90deg,#b8f3c8,#63d883)!important}
.nav-actions{display:flex;align-items:center;gap:10px;flex:0 0 auto}
.nav-external-secondary{background:var(--green-mid);color:#fff;border:none}
.nav-external-secondary:hover{background:var(--green-dark);color:#fff}
@media(max-width:1280px){.nav-actions{gap:7px}.nav-external{padding:9px 12px;font-size:.8rem}}
@media(max-width:900px){.nav-actions{margin-left:auto}.nav-external-secondary{display:none}}


/* ===== Patch v4: institutional typography + polished hero presentation ===== */
.hero h1,.section-title,.hero-stat-num,.ach-count,.ach-total-item .big,.phase-card h3,.phase-metric .num,.total-card .big,.sector-pct,.ec-visual .big-num,.footer-brand h3,#pie-centre-pct{letter-spacing:-.015em}
.hero-stat-num{line-height:1.14;text-shadow:0 2px 16px rgba(0,0,0,.12)}
.hero-stat-label{font-weight:700;color:rgba(255,255,255,.76)}
@media(max-width:1180px){.hero-logo-area{padding:26px;border-radius:28px}.hero-logo-area::after{inset:14px;border-radius:23px}}
@media(max-width:900px){.hero-logo-area{padding:24px;max-width:520px;width:100%;margin:0 auto}.hero-stats{box-shadow:0 12px 30px rgba(6,52,26,.16)}}

/* ===== Performance pass: faster first paint and off-screen rendering ===== */
.hero-logo-area{backdrop-filter:none;-webkit-backdrop-filter:none}
main section:not(.hero), body>section:not(.hero){content-visibility:auto;contain-intrinsic-size:900px}
footer{content-visibility:auto;contain-intrinsic-size:420px}


/* ===== v10: map-free performance + responsive refinement ===== */
html{scroll-padding-top:82px}
body{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.table-wrap{-webkit-overflow-scrolling:touch;scrollbar-width:thin;scrollbar-color:var(--green-mid) var(--green-pale)}
.table-wrap::-webkit-scrollbar{height:9px}.table-wrap::-webkit-scrollbar-track{background:var(--green-pale)}.table-wrap::-webkit-scrollbar-thumb{background:var(--green-mid);border-radius:999px}
.nav-brand{min-width:0}.nav-title-text{min-width:0}.nav-title-text strong{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.visits-grid{align-items:stretch}.visit-card{display:flex;flex-direction:column;min-width:0}.visit-card .district{font-size:1rem}.visit-card .visit-count{text-align:right}.visit-card .visit-dates{margin-top:auto}

@media(max-width:900px){
  .nav-external-secondary{display:inline-flex}
  .hero{min-height:auto;padding-top:104px;padding-bottom:56px}
}
@media(max-width:760px){
  nav{height:64px;padding:0 16px;gap:10px}
  .nav-brand{gap:8px;flex:1 1 auto;overflow:hidden}
  .nav-gov-logo{width:38px;height:38px;flex:0 0 38px}
  .nav-title-text strong{max-width:210px;font-size:.76rem;letter-spacing:.035em}
  .nav-title-text span{display:none}
  .nav-actions{gap:6px;flex:0 0 auto}
  .nav-external{padding:8px 10px;font-size:.74rem;border-radius:9px}
  section,.project-browser-section{padding:64px 18px}
  .hero{padding:94px 18px 44px}
  .hero h1{font-size:clamp(2.35rem,10.5vw,3.15rem);margin-bottom:18px}
  .hero p{font-size:1rem;line-height:1.62;margin-bottom:28px}
  .hero-eyebrow{margin-bottom:20px}
  .section-header{margin-bottom:38px}
  .section-title{font-size:clamp(1.8rem,8vw,2.35rem)}
  .section-desc{font-size:.98rem;line-height:1.65}
  .hero-stats{display:grid;grid-template-columns:1fr 1fr;flex-direction:initial;margin-bottom:0;border-radius:14px}
  .hero-stat{padding:16px 10px;border-right:1px solid rgba(255,255,255,.16);border-bottom:1px solid rgba(255,255,255,.16)}
  .hero-stat:nth-child(2n){border-right:none}.hero-stat:nth-child(n+3){border-bottom:none}
  .hero-stat:first-child,.hero-stat:last-child{border-radius:0}
  .hero-stat-num{font-size:1.48rem}.hero-stat-label{font-size:.66rem}
  .totals-row{gap:10px}.total-card{padding:18px 10px}.total-card .big{font-size:1.65rem}
  .data-ach-grid{gap:12px}.ach-card{padding:20px 12px}.ach-count{font-size:2rem}
  .sector-data-layout{gap:30px}.sector-legend-head,.sector-legend-row{grid-template-columns:minmax(0,1fr) 72px 60px;gap:8px}
  .table-wrap{margin-top:24px;border-radius:12px}
  table{font-size:.8rem}thead th,tbody td{padding:10px 12px}
  .district-table-scroll,.project-table-wrap{margin-left:-18px;margin-right:-18px;border-radius:0;box-shadow:none}
  .district-table-scroll table{min-width:1260px}.project-table{min-width:980px}
  .project-controls{gap:9px}.project-controls input,.project-controls select{padding:11px 12px}
  .project-pagination{justify-content:space-between}.project-pagination button{flex:1}
  .visits-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:28px}.visit-card{padding:16px}
  .footer-grid{gap:30px}.footer-bottom{gap:14px;flex-wrap:wrap}
}
@media(max-width:640px){.nav-external-secondary{display:none}}
@media(max-width:480px){
  .nav-title-text{display:none}
  .nav-brand{flex:0 1 auto}.nav-gov-logo{width:36px;height:36px;flex-basis:36px}
  .nav-external{font-size:.72rem;padding:8px 9px}
  .hero{padding-top:88px}.hero h1{font-size:2.35rem}
  .hero-eyebrow{font-size:.66rem;padding:6px 11px;letter-spacing:.075em}
  .visits-grid{grid-template-columns:1fr}
  .sector-legend-head,.sector-legend-row{grid-template-columns:minmax(0,1fr) 64px 52px;font-size:.82rem}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-content>*{animation:none!important}.visit-card,.nav-external,.btn-primary,.btn-outline{transition:none!important}}