/* ==========================================================================
   PPDCL Biogas Plant — Gujjar Colony, Lahore
   Single stylesheet per project tech-stack rules (see CLAUDE.md)
   ========================================================================== */

/* ---- Design Tokens ---- */
:root {
  --color-primary: #005C4E;      /* teal-green */
  --color-primary-dark: #00473c;
  --color-accent: #2E7D32;       /* biogas / nature green */
  /* Deep Pakistan-flag green. Replaces the previous navy (#1a3c6e) as the
     site's dark anchor tone — footer, counter strip, CTA gradients, a11y
     button. Kept clearly darker and cooler than --color-primary so the
     green-on-green gradients still read as two distinct tones rather than
     a flat block. */
  --color-forest: #0B3D2E;
  --color-forest-deep: #072A20;  /* darkest step, for gradient depth */
  --color-gold: #F5A623;         /* accent for badges/highlights */
  --color-white: #FFFFFF;
  --color-light: #F5F5F5;
  --color-text: #1c2b28;
  --color-text-muted: #57645f;
  --color-border: #e1e6e4;
  --color-placeholder-bg: #fff8ec;
  --color-placeholder-border: #F5A623;

  --font-en: 'Inter', Arial, sans-serif;
  --font-ur: 'Noto Nastaliq Urdu', serif;

  --container-width: 1180px;
  --radius: 10px;
  --shadow: 0 4px 18px rgba(0, 40, 30, 0.08);
  --shadow-lg: 0 12px 40px rgba(0, 40, 30, 0.16);

  --header-height: 78px;
}

/* ---- Reset & Base ---- */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-en);
  color: var(--color-text);
  line-height: 1.6;
  background: var(--color-white);
  -webkit-font-smoothing: antialiased;
}

/* Faint fixed Government of Punjab seal watermark, visible through the site's
   light backgrounds, fading out on colored/dark bands and never behind opaque
   cards — content and readability are unaffected. */
.page-watermark {
  position: fixed;
  inset: 0;
  background-image: url('../assets/images/govt-seal.png');
  background-repeat: no-repeat;
  background-position: center;
  background-size: min(80vw, 1000px);
  opacity: 0.05;
  pointer-events: none;
  z-index: 0;
}

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; margin: 0; padding: 0; }
button { font-family: inherit; cursor: pointer; }

h1, h2, h3, h4 {
  font-weight: 800;
  line-height: 1.2;
  margin: 0 0 0.6em;
  color: var(--color-primary);
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.3rem); }
h3 { font-size: 1.3rem; }
p { margin: 0 0 1em; color: var(--color-text-muted); }

.container {
  width: 100%;
  max-width: var(--container-width);
  margin: 0 auto;
  padding: 0 20px;
}

.section { padding: 64px 0; }
.section--tight { padding: 44px 0; }
.section--light { background: rgba(245, 245, 245, 0.94); }
.section--forest { background: linear-gradient(120deg, var(--color-forest) 0%, var(--color-primary) 100%); color: var(--color-white); }
.section--forest h2 { color: var(--color-white); }

.section-heading { text-align: center; max-width: 720px; margin: 0 auto 40px; }
.section-heading p { margin: 0; }
.eyebrow {
  display: inline-block;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent);
  margin-bottom: 10px;
}

/* ---- Buttons ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease, color 0.15s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn--primary { background: var(--color-gold); color: #1a1200; }
.btn--primary:hover { box-shadow: 0 10px 24px rgba(245, 166, 35, 0.4); }
.btn--outline { background: transparent; color: var(--color-white); border-color: rgba(255,255,255,0.7); }
.btn--outline:hover { background: rgba(255,255,255,0.12); }
.btn--solid { background: var(--color-primary); color: var(--color-white); }
.btn--solid:hover { box-shadow: 0 10px 24px rgba(0, 92, 78, 0.35); }
.btn--block { width: 100%; justify-content: center; }

/* ---- Placeholder marker (Developer Rule #4) ---- */
.placeholder {
  display: inline-block;
  padding: 2px 10px;
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  border-radius: 6px;
  color: #8a6100;
  font-size: 0.85em;
  font-style: italic;
}

/* ==========================================================================
   Header / Navigation
   ========================================================================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--color-white);
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.header-inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  height: var(--header-height);
  gap: 20px;
  max-width: none;
  padding: 0 32px;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}
.brand-logo { height: 48px; width: auto; }

.main-nav { justify-self: center; }
.main-nav ul { display: flex; gap: 4px; align-items: center; }
.main-nav a {
  display: block;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--color-text);
  border-radius: 6px;
  transition: background 0.15s ease, color 0.15s ease;
}
.main-nav a:hover,
.main-nav a:focus { background: var(--color-light); color: var(--color-primary); }
.main-nav a.active { color: var(--color-primary); background: rgba(0,92,78,0.08); }

/* ---- Dropdown (The Project > Overview / Leadership & Team) ---- */
.main-nav li.has-dropdown { position: relative; }
.main-nav li.has-dropdown > a::after {
  content: "\f107";
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 0.75em;
  margin-inline-start: 6px;
  opacity: 0.6;
}
.main-nav .dropdown-menu {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  min-width: 220px;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 8px;
  z-index: 30;
  margin: 4px 0 0;
}
.main-nav li.has-dropdown:hover > .dropdown-menu,
.main-nav li.has-dropdown:focus-within > .dropdown-menu {
  display: block;
}
.main-nav .dropdown-menu li { width: 100%; }
.main-nav .dropdown-menu a {
  padding: 10px 12px;
  font-size: 0.9rem;
  white-space: nowrap;
}

.header-actions { display: flex; align-items: center; gap: 10px; }
.lang-toggle {
  border: 1px solid var(--color-border);
  background: var(--color-white);
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--color-primary);
}
.lang-toggle:hover { background: var(--color-light); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
}
.nav-toggle span { width: 26px; height: 3px; background: var(--color-primary); border-radius: 2px; transition: 0.2s; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
  position: relative;
  min-height: 78vh;
  display: flex;
  align-items: center;
  color: var(--color-white);
  background-color: var(--color-primary);
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: -40px;
  background-size: cover;
  /* Which part of the photo stays in frame when it's cropped to fill. Exposed
     as a variable so the hero image can be art-directed without touching this
     rule — e.g. set --hero-focus: 70% center on index.html to push a
     centre-framed plant toward the clear right side of the scrim. */
  background-position: var(--hero-focus, center);
  transition: transform 0.3s ease-out;
  will-change: transform;
  z-index: 0;
}

/* Directional scrim. The previous rule dimmed the WHOLE image evenly, which hid
   the plant behind the headline. This concentrates the darkness behind the text
   column on the left and clears toward the right, so the subject of the photo
   stays visible. Behind the text it is no darker than the old overlay was, so
   headline legibility/contrast is unchanged — only the photo side gets brighter. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(0, 25, 20, 0.82) 0%,
    rgba(0, 25, 20, 0.72) 32%,
    rgba(0, 40, 30, 0.40) 56%,
    rgba(0, 45, 35, 0.12) 78%,
    rgba(0, 45, 35, 0.04) 100%
  );
  z-index: 1;
}
/* In Urdu the text column sits on the right, so the scrim has to follow it. */
html[dir="rtl"] .hero::before { transform: scaleX(-1); }

/* .hero-content is also a .container, which is margin:0 auto — so narrowing IT
   would centre the text block rather than keep it left. Constrain the children
   instead: the container keeps its normal page gutter alignment, and each text
   element is capped so the copy stays in the scrim's dark zone. */
.hero-content { position: relative; z-index: 2; }
.hero-content .eyebrow,
.hero-content h1,
.hero-content .lede,
.hero-content .hero-actions { max-width: 540px; }
.hero-content h1 { color: var(--color-white); }
.hero-content .lede { color: rgba(255,255,255,0.92); font-size: 1.15rem; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 24px; }

.page-hero {
  background: linear-gradient(120deg, var(--color-primary), var(--color-accent));
  color: var(--color-white);
  padding: 68px 0 56px;
  text-align: center;
}
.page-hero h1 { color: var(--color-white); margin-bottom: 10px; }
.page-hero p { color: rgba(255,255,255,0.9); max-width: 680px; margin: 0 auto; font-size: 1.05rem; }
.page-hero .eyebrow { color: var(--color-gold); }

/* ---- Highlight badges strip ---- */
.badge-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: -46px;
  position: relative;
  z-index: 3;
}
.badge-card {
  background: var(--color-white);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  padding: 22px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
  border-top: 4px solid var(--color-gold);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.badge-card:hover { transform: translateY(-5px); box-shadow: 0 18px 40px rgba(0, 40, 30, 0.2); }
.badge-card i { font-size: 1.6rem; color: var(--color-primary); transition: transform 0.25s ease; }
.badge-card:hover i { transform: scale(1.15); }
.badge-card span { font-weight: 700; font-size: 0.95rem; color: var(--color-text); }

/* ==========================================================================
   Counter Strip
   ========================================================================== */
.counter-strip {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  text-align: center;
}
.counter-item .counter-value {
  font-size: clamp(1.15rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--color-primary);
  display: block;
  white-space: nowrap;
}
.counter-item .counter-label {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  font-weight: 600;
}
.section--forest .counter-value { color: var(--color-gold); }
.section--forest .counter-label { color: rgba(255,255,255,0.75); }

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

.card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 28px 24px;
  box-shadow: var(--shadow);
  height: 100%;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-color: rgba(0, 92, 78, 0.25);
}
.card i { font-size: 1.9rem; color: var(--color-accent); margin-bottom: 14px; display: inline-block; transition: transform 0.25s ease; }
.card:hover i { transform: scale(1.15) rotate(-4deg); }
.card h3 { margin-bottom: 8px; }

.icon-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  color: var(--color-text);
}
.icon-list i {
  color: var(--color-accent);
  background: rgba(46, 125, 50, 0.1);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  min-width: 32px;
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}

/* ---- Tables ---- */
.data-table { width: 100%; border-collapse: collapse; background: var(--color-white); box-shadow: var(--shadow); border-radius: var(--radius); overflow: hidden; }
.data-table th, .data-table td { text-align: left; padding: 16px 18px; border-bottom: 1px solid var(--color-border); }
.data-table th { background: var(--color-primary); color: var(--color-white); font-weight: 700; width: 38%; }
.data-table tr:last-child td { border-bottom: none; }
.table-wrap { overflow-x: auto; }

/* ==========================================================================
   Process Steps (Technology page)
   ========================================================================== */
.process-illustration {
  max-width: 780px;
  margin: 0 auto 40px;
}
.process-illustration img {
  width: 100%;
  height: auto;
  filter: drop-shadow(0 16px 30px rgba(0, 40, 30, 0.18));
}
.process-flow {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  counter-reset: step;
}
.process-step {
  position: relative;
  text-align: center;
  padding: 0 14px;
}
.process-step .step-circle {
  width: 68px;
  height: 68px;
  border-radius: 50%;
  background: var(--color-primary);
  color: var(--color-white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 16px;
  position: relative;
  z-index: 2;
  box-shadow: 0 6px 16px rgba(0,92,78,0.3);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.process-step:hover .step-circle {
  transform: scale(1.1) translateY(-3px);
  box-shadow: 0 12px 24px rgba(245, 166, 35, 0.45);
  background: var(--color-gold);
  color: #1a1200;
}
.process-step::after {
  content: "";
  position: absolute;
  top: 34px;
  left: calc(50% + 40px);
  width: calc(100% - 80px);
  height: 3px;
  background: repeating-linear-gradient(90deg, var(--color-gold) 0 10px, transparent 10px 18px);
}
.process-step:last-child::after { display: none; }
.process-step h3 { font-size: 1.05rem; }
.process-step p { font-size: 0.9rem; }

/* ==========================================================================
   CTA Band
   ========================================================================== */
.cta-band {
  background: linear-gradient(120deg, var(--color-forest-deep), var(--color-forest) 45%, var(--color-primary));
  color: var(--color-white);
  text-align: center;
  padding: 56px 0;
}
.cta-band h2 { color: var(--color-white); }
.cta-band p { color: rgba(255,255,255,0.88); max-width: 620px; margin: 0 auto 24px; }

/* ==========================================================================
   Announcement Modal
   ========================================================================== */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 25, 20, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
  padding: 20px;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}
.modal-overlay.is-open { opacity: 1; visibility: visible; }
.modal-box {
  background: var(--color-white);
  border-radius: 14px;
  max-width: 520px;
  width: 100%;
  padding: 36px 32px 30px;
  position: relative;
  box-shadow: var(--shadow-lg);
  transform: translateY(16px) scale(0.98);
  transition: transform 0.25s ease;
  border-top: 6px solid var(--color-gold);
}
.modal-overlay.is-open .modal-box { transform: translateY(0) scale(1); }
.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  background: var(--color-light);
  border: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 1.1rem;
  color: var(--color-text-muted);
}
.modal-close:hover { background: var(--color-border); }
.modal-box .eyebrow { color: var(--color-gold); }
.modal-box h2 { font-size: 1.4rem; margin-bottom: 12px; }
.modal-box p { margin-bottom: 22px; }

/* ==========================================================================
   Gallery + Lightbox
   ========================================================================== */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}
.gallery-item {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  cursor: pointer;
  box-shadow: var(--shadow);
  aspect-ratio: 4/3;
  background: var(--color-light);
}
.gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.gallery-item:hover img { transform: scale(1.05); }
.gallery-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 12px 14px;
  background: linear-gradient(0deg, rgba(0,0,0,0.72), transparent);
  color: var(--color-white);
  font-size: 0.85rem;
  font-weight: 600;
}

.lightbox-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 2100;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.2s ease, visibility 0.2s ease;
  padding: 30px;
}
.lightbox-overlay.is-open { opacity: 1; visibility: visible; }
.lightbox-overlay img { max-width: 90vw; max-height: 80vh; border-radius: 8px; }
.lightbox-caption { color: var(--color-white); text-align: center; margin-top: 14px; font-weight: 600; }
.lightbox-close, .lightbox-nav {
  position: absolute;
  background: rgba(255,255,255,0.12);
  border: none;
  color: var(--color-white);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 1.3rem;
}
.lightbox-close { top: 24px; right: 24px; }
.lightbox-nav.prev { left: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav.next { right: 24px; top: 50%; transform: translateY(-50%); }
.lightbox-nav:hover, .lightbox-close:hover { background: rgba(255,255,255,0.25); }

/* ==========================================================================
   Leadership & Team (team.html)
   ========================================================================== */
.team-avatar {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(0, 92, 78, 0.08);
  color: var(--color-primary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2rem;
  margin: 0 auto 16px;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.leadership-feature {
  display: flex;
  gap: 28px;
  align-items: flex-start;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
  max-width: 820px;
  margin: 0 auto;
}
.leadership-feature .team-avatar { width: 110px; height: 110px; font-size: 2.6rem; margin: 0; }
.leadership-feature h3 { margin-bottom: 2px; }
.leadership-feature .team-title { color: var(--color-accent); font-weight: 700; font-size: 0.9rem; margin-bottom: 14px; display: block; }
.leadership-feature .team-email { font-size: 0.88rem; margin-top: 12px; display: inline-block; }
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.team-card {
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 24px 18px;
  text-align: center;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.team-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.team-card:hover .team-avatar { transform: scale(1.08); }
.team-card h3 { font-size: 1rem; margin-bottom: 4px; }
.team-card .team-title { display: block; color: var(--color-text-muted); font-size: 0.85rem; margin-bottom: 8px; }
.team-card .team-email { font-size: 0.78rem; word-break: break-all; }
.team-card .team-tag {
  display: inline-block;
  margin-top: 8px;
  padding: 2px 10px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.15);
  color: #8a6100;
  font-size: 0.72rem;
  font-weight: 700;
}

/* ==========================================================================
   Video (Home page)
   ========================================================================== */
.video-frame {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius);
  overflow: hidden;
  background: linear-gradient(135deg, var(--color-primary), var(--color-forest-deep));
  box-shadow: var(--shadow-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: not-allowed;
}
.video-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(circle at 20% 30%, rgba(255,255,255,0.08) 0, transparent 45%),
    radial-gradient(circle at 80% 75%, rgba(255,255,255,0.06) 0, transparent 40%);
}
.video-play-btn {
  position: relative;
  z-index: 2;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: rgba(255,255,255,0.16);
  border: 2px solid rgba(255,255,255,0.5);
  color: #fff;
  font-size: 1.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
}
.video-frame:hover .video-play-btn { transform: scale(1.1); background: rgba(255,255,255,0.26); }
.video-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 2;
  padding: 18px 24px;
  background: linear-gradient(0deg, rgba(0,0,0,0.55), transparent);
  color: #fff;
  text-align: left;
}
.video-caption strong { display: block; font-size: 1rem; }
.video-caption span { font-size: 0.82rem; opacity: 0.85; }

/* ==========================================================================
   Directory & Updates (sample/placeholder content)
   ========================================================================== */
.sample-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--color-placeholder-bg);
  border: 1px dashed var(--color-placeholder-border);
  border-radius: 8px;
  padding: 14px 18px;
  color: #8a6100;
  font-size: 0.88rem;
  margin-bottom: 28px;
}
.sample-banner i { font-size: 1.1rem; }
.directory-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.directory-card { position: relative; }
.directory-card .sample-tag {
  position: absolute;
  top: 14px;
  right: 14px;
  padding: 2px 9px;
  border-radius: 999px;
  background: var(--color-placeholder-bg);
  border: 1px solid var(--color-placeholder-border);
  color: #8a6100;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
}
.directory-card .directory-category { color: var(--color-accent); font-weight: 700; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; }

.updates-list { max-width: 760px; margin: 0 auto; }
.update-item {
  display: flex;
  gap: 20px;
  padding: 18px 20px;
  margin: 0 -20px;
  border-bottom: 1px solid var(--color-border);
  border-radius: 8px;
  transition: background 0.2s ease, transform 0.2s ease;
}
.update-item:last-child { border-bottom: none; }
.update-item:hover { background: var(--color-light); transform: translateX(4px); }
html[dir="rtl"] .update-item:hover { transform: translateX(-4px); }
.update-date {
  min-width: 110px;
  font-weight: 700;
  color: var(--color-primary);
  font-size: 0.85rem;
}
.update-body h3 { font-size: 1.02rem; margin-bottom: 4px; }
.update-body p { margin-bottom: 0; font-size: 0.9rem; }

/* ==========================================================================
   Biogas Potential Calculator (Investment page)
   ========================================================================== */
.calc-card {
  max-width: 780px;
  margin: 0 auto;
  background: var(--color-white);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 32px;
}
.calc-mode-toggle {
  display: flex;
  gap: 10px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.calc-mode-btn {
  flex: 1;
  min-width: 200px;
  padding: 12px 16px;
  border-radius: 999px;
  border: 2px solid var(--color-border);
  background: var(--color-white);
  color: var(--color-text-muted);
  font-weight: 700;
  font-size: 0.9rem;
}
.calc-mode-btn.is-active {
  border-color: var(--color-primary);
  background: rgba(0, 92, 78, 0.08);
  color: var(--color-primary);
}
.calc-input-row {
  display: flex;
  align-items: flex-end;
  gap: 16px;
  flex-wrap: wrap;
}
.calc-input-row .form-field { flex: 1; min-width: 220px; margin-bottom: 0; }
.calc-input-row .form-field[hidden] { display: none; }
.calc-hint { font-size: 0.78rem; color: var(--color-text-muted); }
.calc-input-row .btn { height: 48px; }
.calc-error {
  display: none;
  color: #c0392b;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 14px;
}
.calc-error.is-visible { display: block; }
.calc-results { margin-top: 30px; padding-top: 26px; border-top: 1px dashed var(--color-border); }
.calc-results-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  text-align: center;
}
.calc-results-grid .counter-value {
  color: var(--color-primary);
  font-size: clamp(1.05rem, 2.6vw, 1.5rem);
  white-space: nowrap;
}
.calc-disclaimer {
  margin: 22px 0 0;
  font-size: 0.82rem;
  color: var(--color-text-muted);
  text-align: center;
}

/* ==========================================================================
   Forms (Contact)
   ========================================================================== */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.form-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 18px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-weight: 700; font-size: 0.9rem; color: var(--color-text); }
.form-field label .req { color: #c0392b; }
.form-field input,
.form-field select,
.form-field textarea {
  padding: 12px 14px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.95rem;
  background: var(--color-white);
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(0,92,78,0.12);
}
.form-field .error-msg { color: #c0392b; font-size: 0.8rem; display: none; }
.form-field.has-error input,
.form-field.has-error select,
.form-field.has-error textarea { border-color: #c0392b; }
.form-field.has-error .error-msg { display: block; }
.captcha-box {
  border: 1px dashed var(--color-border);
  border-radius: 8px;
  padding: 16px;
  background: var(--color-light);
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}
.form-success {
  display: none;
  background: #eafaf1;
  border: 1px solid var(--color-accent);
  color: #1b5e20;
  padding: 14px 18px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
}
.form-success.is-visible { display: block; }

.contact-info-card {
  background: var(--color-primary);
  color: var(--color-white);
  border-radius: var(--radius);
  padding: 32px 28px;
}
.contact-info-card h3 { color: var(--color-white); }
.contact-info-card .info-row { display: flex; gap: 12px; margin-bottom: 18px; align-items: flex-start; }
.contact-info-card .info-row i { margin-top: 3px; color: var(--color-gold); }
.contact-info-card .placeholder { background: rgba(255,255,255,0.12); border-color: var(--color-gold); color: #ffe9bf; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer {
  background: linear-gradient(160deg, var(--color-primary) 0%, var(--color-forest) 45%, var(--color-forest-deep) 100%);
  color: rgba(255,255,255,0.85);
  padding-top: 52px;
}
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1.4fr; gap: 32px; padding-bottom: 32px; border-bottom: 1px solid rgba(255,255,255,0.14); }
.footer-brand { display: flex; gap: 14px; align-items: flex-start; }
.footer-brand img { height: 44px; background: #fff; padding: 8px 12px; border-radius: 8px; }
.footer-col h4 { color: var(--color-white); font-size: 1rem; margin-bottom: 14px; }
.footer-col ul li { margin-bottom: 10px; }
.footer-col a:hover { color: var(--color-gold); }
.footer-col address { font-style: normal; }
.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 20px 0;
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
}

/* ==========================================================================
   Accessibility Widget + Scroll-to-top
   ========================================================================== */
.a11y-widget {
  position: fixed;
  left: 18px;
  bottom: 18px;
  z-index: 950;
}
.a11y-toggle {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-forest);
  color: var(--color-white);
  border: none;
  font-size: 1.3rem;
  box-shadow: var(--shadow-lg);
}
.a11y-panel {
  position: absolute;
  bottom: 60px;
  left: 0;
  background: var(--color-white);
  border-radius: 10px;
  box-shadow: var(--shadow-lg);
  padding: 14px;
  width: 200px;
  display: none;
  gap: 8px;
  flex-direction: column;
}
.a11y-panel.is-open { display: flex; }
.a11y-panel button {
  border: 1px solid var(--color-border);
  background: var(--color-light);
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  text-align: left;
}
.a11y-panel button:hover { background: var(--color-border); }
.a11y-panel button[aria-pressed="true"] { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }

.back-to-top {
  position: fixed;
  right: 18px;
  bottom: 18px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--color-gold);
  color: #1a1200;
  border: none;
  font-size: 1.2rem;
  box-shadow: var(--shadow-lg);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: 0.2s ease;
  z-index: 950;
}
.back-to-top.is-visible { opacity: 1; visibility: visible; transform: translateY(0); }

/* ==========================================================================
   Urdu / RTL
   ========================================================================== */
html[dir="rtl"] body,
html[dir="rtl"] input,
html[dir="rtl"] select,
html[dir="rtl"] textarea,
html[dir="rtl"] button {
  font-family: var(--font-ur);
}
html[dir="rtl"] body { line-height: 2.1; }
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4 { line-height: 1.9; }
html[dir="rtl"] .eyebrow { letter-spacing: 0; }
html[dir="rtl"] .lang-toggle { font-family: var(--font-en); }
html[dir="rtl"] .a11y-panel button { text-align: right; }
html[dir="rtl"] .main-nav .dropdown-menu { left: auto; right: 0; }
html[dir="rtl"] .main-nav li.has-dropdown > a::after { transform: scaleX(-1); }

/* Keep the brand logo pinned to the physical left and header-actions pinned to the
   physical right in both languages — only the nav's own content mirrors for RTL reading.
   Without this, flex row order fully reverses under dir="rtl" and the logo jumps to the
   right, which reads as broken rather than intentional on a bilingual site. */
html[dir="rtl"] .header-inner { direction: ltr; }
html[dir="rtl"] .header-inner > * { direction: rtl; }
html[dir="rtl"] .directory-card .sample-tag { right: auto; left: 14px; }

/* Under RTL, CSS Grid keeps DOM order but reverses visual column order, so
   step 1 renders on the right and each next step renders to its LEFT. The
   connector must overflow this step's box in that same direction (left)
   to bridge toward the next step — mirroring the left/width anchor the
   LTR rule uses on the right. Without this it still overflows rightward,
   off into empty space instead of toward the next step. */
html[dir="rtl"] .process-step::after {
  left: auto;
  right: calc(50% + 40px);
}

/* High contrast mode (toggled via JS on <html>).
   Darkening containers alone isn't enough: several elements set their own
   explicit text color (p, nav links, badge/card text, form labels, table
   cells) which otherwise keeps rendering dark-on-dark against the new
   black/near-black backgrounds. Every such element gets an explicit
   override below rather than relying on inheriting the body's white. */
html.high-contrast body { background: #000; color: #fff; }
html.high-contrast .site-header,
html.high-contrast .main-nav,
html.high-contrast .main-nav .dropdown-menu,
html.high-contrast .section--light,
html.high-contrast .card,
html.high-contrast .badge-card,
html.high-contrast .team-card,
html.high-contrast .leadership-feature,
html.high-contrast .calc-card,
html.high-contrast .data-table,
html.high-contrast .modal-box { background: #111; color: #fff; }
html.high-contrast .data-table th { background: #000; }
html.high-contrast .data-table td { color: #fff; border-color: #333; }
html.high-contrast h1, html.high-contrast h2, html.high-contrast h3, html.high-contrast h4 { color: #ffd54a; }
html.high-contrast .eyebrow { color: #ffd54a; }
html.high-contrast .counter-value { color: var(--color-gold); }
html.high-contrast p,
html.high-contrast .icon-list li,
html.high-contrast .badge-card span,
html.high-contrast .counter-label,
html.high-contrast .team-title,
html.high-contrast .update-date,
html.high-contrast .directory-category,
html.high-contrast .calc-hint,
html.high-contrast .form-field label { color: #e8e8e8; }
html.high-contrast .main-nav a { color: #fff; }
html.high-contrast .main-nav a:hover,
html.high-contrast .main-nav a:focus,
html.high-contrast .main-nav a.active { color: #ffd54a; background: rgba(255,255,255,0.12); }
html.high-contrast .nav-toggle span { background: #fff; }
html.high-contrast .form-field input,
html.high-contrast .form-field select,
html.high-contrast .form-field textarea { background: #fff; color: #111; }

/* ==========================================================================
   Utility
   ========================================================================== */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.stack { display: flex; flex-direction: column; gap: 14px; }

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 991px) {
  .badge-strip { grid-template-columns: 1fr; margin-top: -30px; }
  .counter-strip { grid-template-columns: repeat(2, 1fr); }
  .grid-3, .grid-2 { grid-template-columns: 1fr; }
  .footer-grid { grid-template-columns: 1fr; }
  .process-flow { grid-template-columns: 1fr; }
  .process-step::after { display: none; }
  .form-grid { grid-template-columns: 1fr; }
  .gallery-grid { grid-template-columns: repeat(2, 1fr); }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .directory-grid { grid-template-columns: 1fr; }
  .leadership-feature { flex-direction: column; text-align: center; }
  .leadership-feature .team-avatar { margin: 0 auto; }
}

@media (max-width: 768px) {
  .main-nav {
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    background: var(--color-white);
    box-shadow: 0 10px 20px rgba(0,0,0,0.08);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.25s ease;
  }
  .main-nav.is-open { max-height: 80vh; overflow-y: auto; }
  .main-nav ul { flex-direction: column; padding: 10px 20px 20px; gap: 2px; }
  .main-nav a { padding: 12px 10px; }
  .main-nav li.has-dropdown > a::after { float: right; }
  .main-nav .dropdown-menu {
    display: block;
    position: static;
    box-shadow: none;
    padding: 0 0 0 16px;
    margin: 0;
  }
  .main-nav .dropdown-menu a { padding: 10px; font-size: 0.88rem; color: var(--color-text-muted); }
  .nav-toggle { display: flex; }
  .lang-toggle { padding: 7px 12px; font-size: 0.8rem; }
  .brand-logo { height: 36px; }
  .header-inner { gap: 6px; padding: 0 16px; }
  .header-actions { gap: 6px; }
  .hero { min-height: 62vh; text-align: left; }
  /* On phones the text spans the full width, so a left-to-right scrim would
     leave part of the headline over bare photo. Switch to a vertical scrim:
     lighter at the top where the plant shows, deepening behind the text below. */
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(0, 25, 20, 0.45) 0%,
      rgba(0, 25, 20, 0.66) 45%,
      rgba(0, 25, 20, 0.80) 100%
    );
  }
  html[dir="rtl"] .hero::before { transform: none; }
  .hero-content .eyebrow,
  .hero-content h1,
  .hero-content .lede,
  .hero-content .hero-actions { max-width: none; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .counter-strip { grid-template-columns: 1fr 1fr; }
  .gallery-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: 1fr; }
  .update-item { flex-direction: column; gap: 4px; }
}

/* ==========================================================================
   Very Large Screens (ultra-wide monitors, true 4K / 60"+ displays viewed
   from a distance — e.g. lobby/kiosk/presentation screens). Root font-size
   is the primary lever: nearly all type on the site is rem/clamp(rem,vw,rem)
   based, so raising it cascades proportional size increases everywhere
   without hunting down every component. Structural px values that don't
   scale via rem (header height, logo, hero column width, content column
   width) get explicit bumps alongside it.
   ========================================================================== */
@media (min-width: 2200px) {
  html { font-size: 18px; }
  :root {
    --container-width: 1340px;
    --header-height: 92px;
  }
  .brand-logo { height: 58px; }
  .hero-content { max-width: 920px; }
  .lang-toggle { padding: 10px 18px; font-size: 1rem; }
  .nav-toggle span { width: 30px; height: 3.5px; }
}

@media (min-width: 3200px) {
  html { font-size: 22px; }
  :root {
    --container-width: 1560px;
    --header-height: 110px;
  }
  .brand-logo { height: 70px; }
  .hero-content { max-width: 1120px; }
  .hero { min-height: 70vh; }
  .lang-toggle { padding: 12px 22px; font-size: 1.1rem; }
  .main-nav a { padding: 14px 20px; }
  .nav-toggle span { width: 34px; height: 4px; }
  .badge-strip { gap: 26px; }
}