/* ==========================================================================
   SATPATHA NATURE FOUNDATION — Design System
   Forest green / lime / earthy gold / charcoal / warm off-white / stone grey
   ========================================================================== */

:root {
  /* Brand palette (derived from logo) */
  --forest: #1f4d34;
  --forest-dark: #143726;
  --forest-light: #2e6b48;
  --lime: #8dc63f;
  --lime-light: #b3e05c;
  --gold: #d68c3a;
  --gold-dark: #b96f26;
  --charcoal: #22261f;
  --offwhite: #faf7f0;
  --stone: #e7e3d8;
  --stone-dark: #cfc9b8;
  --white: #ffffff;

  /* semantic */
  --bg: var(--offwhite);
  --bg-alt: var(--stone);
  --text: var(--charcoal);
  --text-muted: #5b5f53;
  --border: var(--stone-dark);
  --focus: #0b6e4f;

  --radius-sm: 10px;
  --radius-md: 18px;
  --radius-lg: 28px;
  --shadow-sm: 0 2px 10px rgba(31, 77, 52, 0.08);
  --shadow-md: 0 10px 30px rgba(31, 77, 52, 0.12);
  --shadow-lg: 0 20px 50px rgba(20, 55, 38, 0.18);

  --container: 1240px;
  --header-h: 84px;

  --font-body: 'Inter', 'Noto Sans Kannada', system-ui, -apple-system, Segoe UI, sans-serif;
  --font-display: 'Fraunces', 'Noto Sans Kannada', Georgia, serif;
  --font-kn: 'Noto Sans Kannada', 'Inter', sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root { color-scheme: light; }
}

* , *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * , *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

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

.kn { font-family: var(--font-kn); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--forest-dark);
  line-height: 1.2;
  margin: 0 0 0.5em;
  font-weight: 600;
}
h1 { font-size: clamp(2.1rem, 4.5vw, 3.4rem); }
h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); }
p { margin: 0 0 1em; color: var(--text); }
.text-muted { color: var(--text-muted); }

/* Focus visibility (WCAG) */
a:focus-visible, button:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--forest);
  color: #fff;
  padding: 12px 20px;
  z-index: 1000;
  border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; }

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

.section { padding: 64px 0; }
.section-tight { padding: 40px 0; }
@media (min-width: 1024px) { .section { padding: 96px 0; } }

.section-alt { background: var(--bg-alt); }
.section-forest { background: var(--forest); color: #eef4ee; }
.section-forest h2, .section-forest h3 { color: #fff; }
.section-forest p { color: #e3efe4; }
.section-forest .text-muted { color: #cfe0d3; }
.section-forest strong { color: #fff; }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 700;
  color: var(--forest);
  margin-bottom: 14px;
}
.eyebrow::before {
  content: "";
  display: inline-block;
  width: 22px;
  height: 2px;
  background: var(--gold);
  border-radius: 2px;
}

.section-head {
  max-width: 720px;
  margin: 0 0 40px;
}
.section-head.center { margin-left: auto; margin-right: auto; text-align: center; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 48px;
  padding: 12px 26px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.98rem;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--gold); color: #2a1a05; box-shadow: var(--shadow-sm); }
.btn-primary:hover { background: var(--gold-dark); box-shadow: var(--shadow-md); }
.btn-secondary { background: transparent; border-color: currentColor; color: var(--forest); }
.btn-secondary:hover { background: var(--forest); color: #fff; border-color: var(--forest); }
.section-forest .btn-secondary { color: #fff; }
.section-forest .btn-secondary:hover { background: #fff; color: var(--forest-dark); }
.btn-ghost { background: rgba(255,255,255,0.14); color: #fff; border-color: rgba(255,255,255,0.5); }
.btn-ghost:hover { background: #fff; color: var(--forest-dark); }
.btn-lime { background: var(--lime); color: #16341f; }
.btn-lime:hover { background: var(--lime-light); }
.btn-block { width: 100%; }
.btn-sm { min-height: 40px; padding: 8px 18px; font-size: 0.88rem; }

/* ============================== HEADER ============================== */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(250, 247, 240, 0.96);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: 0 4px 20px rgba(20,55,38,0.10); }
/* The header needs more breathing room than the site's normal 1240px
   content column (that's sized for reading body copy, not for a logo +
   8 nav links + language toggle + button all sharing one row) — give it
   its own wider ceiling so the nav has the space it was designed for. */
.site-header .container { max-width: 1600px; }
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 10px;
  height: var(--header-h);
  min-width: 0;
}
.brand { display: flex; align-items: center; gap: 10px; min-width: 0; flex-shrink: 0; }
.brand img { height: 50px; width: auto; flex-shrink: 0; }
@media (min-width: 768px) { .brand img { height: 58px; } }

/* A tasteful 3D lift on the logo mark wherever it appears — the artwork
   itself is never redrawn or recoloured, only given depth via shadow. */
.brand img,
.footer-brand img,
.mobile-drawer .panel-head img,
.admin-brand img,
.admin-login-card img {
  filter: drop-shadow(0 3px 2px rgba(20, 40, 25, 0.25)) drop-shadow(0 8px 14px rgba(20, 40, 25, 0.18));
}
.brand-text { display: none; }

/* Desktop nav, brand text and the header buttons all need real estate at
   the same time, so they share one breakpoint with a comfortable margin —
   below it, everything collapses to the compact mobile header + drawer
   instead of risking any row wrapping or clipping. */
@media (min-width: 1680px) {
  .brand-text { display: block; line-height: 1.15; white-space: nowrap; }
  .brand-text .en { font-family: var(--font-display); font-weight: 700; font-size: 0.96rem; color: var(--forest-dark); letter-spacing: 0.01em; }
  .brand-text .kn { font-size: 0.74rem; color: var(--text-muted); }
}

.nav-desktop { display: none; }
@media (min-width: 1680px) {
  .nav-desktop {
    display: flex; align-items: center; gap: 2px; flex-shrink: 1; flex-wrap: nowrap; min-width: 0;
    /* Safety net: if a substituted fallback font ever renders wider than
       expected, the nav scrolls horizontally within itself instead of
       clipping invisibly or breaking the layout. Scrollbar hidden since
       this is only meant to be reached in that edge case. */
    overflow-x: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  /* Hidden scrollbar: this is a last-resort safety net for content that
     shouldn't normally overflow at all now that the header has proper
     room to work with (see .site-header .container above) — a visible
     scrollbar here reads as a layout bug even when nothing is actually
     cut off, so scrolling still works (trackpad/drag) without the bar. */
  .nav-desktop::-webkit-scrollbar { display: none; }
  .nav-desktop a {
    padding: 9px 14px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 0.98rem;
    color: var(--text);
    white-space: nowrap;
    transition: background-color 0.15s, color 0.15s;
  }
  .nav-desktop a:hover, .nav-desktop a[aria-current="page"] {
    background: var(--forest);
    color: #fff;
  }
  /* Kannada glyphs render noticeably wider than Latin at the same
     font-size, so the Kannada nav needs its own tighter sizing to keep
     all 8 links on one row without scrolling. */
  html[lang="kn"] .nav-desktop { gap: 0; }
  html[lang="kn"] .nav-desktop a { padding: 8px 10px; font-size: 0.88rem; }
  html[lang="kn"] .header-actions { gap: 6px; }
  html[lang="kn"] .lang-toggle button { padding: 8px 9px; }
  html[lang="kn"] .btn.btn-sm { padding: 8px 14px; font-size: 0.82rem; }
}

.header-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.lang-toggle {
  display: inline-flex;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  overflow: hidden;
  background: #fff;
}
.lang-toggle button {
  border: none;
  background: transparent;
  padding: 8px 12px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-muted);
  min-height: 44px;
}
.lang-toggle button[aria-pressed="true"] { background: var(--forest); color: #fff; }

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: #fff;
  cursor: pointer;
}
@media (min-width: 1680px) { .menu-toggle { display: none; } }
.menu-toggle svg { width: 22px; height: 22px; }

.mobile-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
}
.mobile-drawer.open { display: block; }
.mobile-drawer .backdrop {
  position: absolute; inset: 0;
  background: rgba(20, 55, 38, 0.55);
}
.mobile-drawer .panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(86vw, 380px);
  background: var(--offwhite);
  box-shadow: var(--shadow-lg);
  padding: 20px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 18px;
  animation: slideIn 0.25s ease;
}
@keyframes slideIn { from { transform: translateX(100%); } to { transform: translateX(0); } }
.mobile-drawer .panel-head { display: flex; justify-content: space-between; align-items: center; }
.mobile-drawer .close-btn {
  width: 44px; height: 44px; border-radius: 10px; border: 1.5px solid var(--border);
  background: #fff; cursor: pointer;
}
.mobile-drawer nav a {
  display: block;
  padding: 14px 12px;
  font-size: 1.08rem;
  font-weight: 600;
  border-bottom: 1px solid var(--border);
  min-height: 44px;
}
.mobile-drawer .cta-row { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; }

/* ============================== HERO ============================== */
.hero {
  position: relative;
  min-height: 640px;
  display: flex;
  align-items: center;
  color: #fff;
  overflow: hidden;
  background: linear-gradient(160deg, var(--forest-dark), var(--forest) 60%);
}
.hero .hero-bg {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0.55;
}
.hero .hero-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(20,55,38,0.75) 0%, rgba(20,55,38,0.55) 45%, rgba(20,55,38,0.92) 100%);
}
.hero-content { position: relative; z-index: 2; max-width: 780px; padding: 100px 0 70px; }
.hero-content .brand-en {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5.5vw, 3.6rem);
  font-weight: 700;
  margin-bottom: 4px;
  color: #fff;
}
.hero-content .brand-kn { font-family: var(--font-kn); font-size: clamp(1.1rem, 2.6vw, 1.5rem); color: var(--lime-light); margin-bottom: 18px; }
.hero-content .tagline-en { font-size: clamp(1.15rem, 2.4vw, 1.5rem); font-weight: 600; color: #fff; margin-bottom: 6px; }
.hero-content .tagline-kn { font-family: var(--font-kn); font-size: clamp(1rem, 2vw, 1.15rem); color: #e7f2e9; margin-bottom: 20px; }
.hero-content .supporting { color: #dfeee2; max-width: 560px; margin-bottom: 30px; font-size: 1.05rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; }
.hero-leaf-motif {
  position: absolute;
  right: -60px; top: -60px;
  width: 340px; height: 340px;
  opacity: 0.18;
  z-index: 1;
}
@media (max-width: 640px) { .hero { min-height: 560px; } }

/* generic page hero (inner pages) */
.page-hero {
  position: relative;
  background: linear-gradient(150deg, var(--forest-dark), var(--forest));
  color: #fff;
  padding: 70px 0 56px;
  overflow: hidden;
}
.page-hero .container { position: relative; z-index: 2; }
.page-hero h1 { color: #fff; margin-bottom: 10px; }
.page-hero .kn { color: var(--lime-light); font-size: 1.05rem; margin-bottom: 12px; display: block; }
.page-hero p { color: #dfeee2; max-width: 640px; }
.breadcrumb { font-size: 0.85rem; color: #cfe0d3; margin-bottom: 18px; }
.breadcrumb a:hover { text-decoration: underline; }
.mountain-motif { position: absolute; bottom: -2px; left: 0; right: 0; opacity: 0.4; z-index: 1; pointer-events: none; }

/* ============================== CARDS ============================== */
.card {
  background: #fff;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
  height: 100%;
  display: flex;
  flex-direction: column;
}
.card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.card-media { position: relative; aspect-ratio: 16/10; overflow: hidden; background: var(--stone); }
.card-media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.card:hover .card-media img { transform: scale(1.06); }
.card-body { padding: 22px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.card-tag {
  display: inline-flex;
  align-self: flex-start;
  background: rgba(214, 140, 58, 0.14);
  color: var(--gold-dark);
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 999px;
}
.card h3 { margin-bottom: 2px; }
.card .meta { font-size: 0.85rem; color: var(--text-muted); display: flex; flex-wrap: wrap; gap: 10px; }
.card .meta span { display: inline-flex; align-items: center; gap: 5px; }
.card-footer { margin-top: auto; display: flex; gap: 10px; flex-wrap: wrap; padding-top: 6px; }

.grid {
  display: grid;
  gap: 28px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) { .grid-2 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, 1fr); }
  .grid-4 { grid-template-columns: repeat(4, 1fr); }
}
@media (min-width: 640px) and (max-width: 899px) {
  .grid-4 { grid-template-columns: repeat(2, 1fr); }
}

/* Initiative icon cards */
.icon-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.icon-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: var(--lime); }
.icon-badge {
  width: 52px; height: 52px;
  border-radius: 14px;
  display: flex; align-items: center; justify-content: center;
  background: var(--forest);
  box-shadow: inset 0 -2px 0 rgba(0,0,0,0.12);
  font-size: 1.4rem;
  filter: grayscale(0.15);
  flex-shrink: 0;
}
.icon-card .impact { font-size: 0.85rem; font-weight: 700; color: var(--forest); }
.icon-card a.link-arrow { font-weight: 700; color: var(--forest); display: inline-flex; align-items: center; gap: 6px; margin-top: auto; }
.icon-card a.link-arrow:hover { color: var(--gold-dark); }

/* Stats */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  text-align: center;
}
@media (min-width: 768px) { .stats-grid { grid-template-columns: repeat(4, 1fr); } }
.stat-item .num {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 3rem);
  font-weight: 700;
  color: var(--lime-light);
  line-height: 1;
}
.stat-item .label { margin-top: 8px; font-size: 0.92rem; color: #dfeee2; }
.placeholder-badge {
  display: inline-block;
  font-size: 0.65rem;
  background: rgba(255,255,255,0.15);
  padding: 2px 8px;
  border-radius: 999px;
  margin-top: 6px;
  color: #fff;
}

/* Forms */
.form-grid { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.field { display: flex; flex-direction: column; gap: 6px; }
.field label { font-weight: 700; font-size: 0.92rem; }
.field .req { color: var(--gold-dark); }
.field input, .field select, .field textarea {
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 1rem;
  font-family: inherit;
  background: #fff;
  color: var(--text);
  min-height: 48px;
}
.field textarea { min-height: 120px; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--forest); }
.field-hint { font-size: 0.8rem; color: var(--text-muted); }
.field-error { font-size: 0.82rem; color: #a3242c; display: none; }
.field.invalid input, .field.invalid select, .field.invalid textarea { border-color: #a3242c; }
.field.invalid .field-error { display: block; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; min-width: 0; }
.checkbox-row label { min-width: 0; overflow-wrap: break-word; }
.checkbox-row input { width: 20px; height: 20px; margin-top: 3px; flex-shrink: 0; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 10px; }
.chip-check {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.9rem;
  background: #fff;
}
.chip-check input { width: 16px; height: 16px; }
.form-status {
  padding: 14px 16px;
  border-radius: var(--radius-sm);
  font-weight: 600;
  display: none;
  margin-top: 8px;
}
.form-status.success { display: block; background: rgba(141,198,63,0.18); color: var(--forest-dark); border: 1px solid var(--lime); }
.form-status.error { display: block; background: #fbe6e6; color: #a3242c; border: 1px solid #e3a3a3; }

/* Filters */
.filter-bar {
  display: flex;
  flex-direction: column;
  gap: 16px;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 22px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.filter-bar .filter-row-top {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.filter-bar .search-field { flex: 1 1 260px; position: relative; }
.filter-bar .search-field input {
  width: 100%;
  height: 48px;
  padding-left: 42px;
  border-radius: 999px;
  background: var(--bg);
}
.filter-bar .search-field input:focus {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(31, 77, 52, 0.12);
}
.filter-bar .search-field svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--text-muted); pointer-events: none; }
.filter-bar .tabs-row { display: flex; flex-wrap: wrap; gap: 10px; }
.filter-bar .chip-group-label {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-right: 4px;
  align-self: center;
}
.filter-bar .chip-row { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); }
.chip-filter {
  border: 1.5px solid var(--border);
  background: var(--bg);
  padding: 8px 16px;
  border-radius: 999px;
  font-size: 0.86rem;
  font-weight: 600;
  cursor: pointer;
  min-height: 42px;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.15s ease;
}
.chip-filter:hover { border-color: var(--forest); color: var(--forest-dark); transform: translateY(-1px); }
.chip-filter[aria-pressed="true"] { background: var(--forest); border-color: var(--forest); color: #fff; box-shadow: var(--shadow-sm); }
.chip-filter[aria-pressed="true"]:hover { transform: none; color: #fff; }

/* Segmented status control (e.g. Upcoming / Past Events) — visually
   distinct from category chip filters below it. */
.tabs-segment {
  display: inline-flex;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 4px;
  gap: 2px;
}
.tabs-segment button {
  border: none;
  background: transparent;
  padding: 9px 20px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-muted);
  min-height: 40px;
  transition: background-color 0.15s ease, color 0.15s ease;
}
.tabs-segment button[aria-pressed="true"] { background: var(--forest); color: #fff; box-shadow: var(--shadow-sm); }

/* Gallery masonry */
.masonry {
  columns: 1;
  column-gap: 20px;
}
@media (min-width: 640px) { .masonry { columns: 2; } }
@media (min-width: 1024px) { .masonry { columns: 3; } }
.masonry .g-item {
  break-inside: avoid;
  margin-bottom: 20px;
  border-radius: var(--radius-md);
  overflow: hidden;
  position: relative;
  cursor: zoom-in;
  border: 1px solid var(--border);
}
.masonry .g-item img { width: 100%; height: auto; display: block; transition: transform .4s; }
.masonry .g-item:hover img { transform: scale(1.05); }
.masonry .g-caption {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: linear-gradient(0deg, rgba(20,55,38,0.85), transparent);
  color: #fff; padding: 26px 14px 12px; font-size: 0.85rem;
}

/* Lightbox */
.lightbox {
  position: fixed; inset: 0; z-index: 300;
  background: rgba(15, 30, 20, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: 20px;
}
.lightbox.open { display: flex; }
.lightbox img { max-height: 84vh; max-width: 100%; border-radius: 12px; }
.lightbox .lb-cap { color: #fff; text-align: center; margin-top: 12px; max-width: 700px; }
.lightbox button.lb-close, .lightbox button.lb-nav {
  position: absolute;
  background: rgba(255,255,255,0.14);
  border: 1.5px solid rgba(255,255,255,0.5);
  color: #fff;
  width: 48px; height: 48px;
  border-radius: 50%;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
}
.lightbox button.lb-close { top: 20px; right: 20px; }
.lightbox button.lb-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.lightbox button.lb-next { right: 20px; top: 50%; transform: translateY(-50%); }

/* Timeline (About page) */
.timeline { position: relative; padding-left: 32px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 3px; background: var(--stone-dark); border-radius: 3px; }
.timeline-item { position: relative; padding-bottom: 34px; }
.timeline-item:last-child { padding-bottom: 0; }
.timeline-item::before {
  content: ""; position: absolute; left: -32px; top: 4px;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--lime); border: 3px solid var(--forest);
}
.timeline-item .year { font-weight: 800; color: var(--forest); font-family: var(--font-display); font-size: 1.1rem; }

/* Testimonials */
.testimonial-card {
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 26px; display: flex; flex-direction: column; gap: 14px;
}
.testimonial-card .quote { font-family: var(--font-display); font-size: 1.1rem; font-style: italic; color: var(--forest-dark); }
.testimonial-card .person { display: flex; align-items: center; gap: 12px; }
.testimonial-card .person img { width: 46px; height: 46px; border-radius: 50%; object-fit: cover; }
.testimonial-card .person .name { font-weight: 700; font-size: 0.92rem; }
.testimonial-card .person .role { font-size: 0.8rem; color: var(--text-muted); }

/* Team */
.team-card { text-align: center; }
.team-card .photo { aspect-ratio: 1/1; border-radius: var(--radius-md); overflow: hidden; margin-bottom: 14px; background: var(--stone); }
.team-card .photo img { width: 100%; height: 100%; object-fit: cover; }

/* Value tiles */
.value-tile { display: flex; gap: 14px; align-items: flex-start; padding: 20px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border); }
.value-tile .icon-badge { width: 44px; height: 44px; border-radius: 12px; font-size: 1.2rem; }

/* Blog article typography */
.article-body { font-size: 1.08rem; max-width: 760px; margin: 0 auto; }
.article-body h2 { margin-top: 1.6em; }
.article-body h3 { margin-top: 1.3em; }
.article-body blockquote {
  border-left: 4px solid var(--lime);
  margin: 2em 0;
  padding: 6px 0 6px 22px;
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-style: italic;
  color: var(--forest-dark);
}
.article-body figure { margin: 2em 0; }
.article-body figcaption { font-size: 0.85rem; color: var(--text-muted); margin-top: 8px; text-align: center; }
.article-body img { border-radius: var(--radius-md); }

/* Newsletter */
.newsletter-box {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--forest-dark), var(--forest) 65%);
  color: #fff;
  border-radius: var(--radius-lg);
  padding: 40px;
  display: grid;
  gap: 26px;
  box-shadow: var(--shadow-md);
}
.newsletter-box::before {
  content: "";
  position: absolute;
  right: -70px; top: -90px;
  width: 260px; height: 260px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(141,198,63,0.28), transparent 70%);
  pointer-events: none;
}
@media (min-width: 900px) {
  /* Fixed-width second column (rather than `auto`) so this track can't be
     inflated by the checkbox row's long unwrapped consent text during the
     browser's intrinsic-sizing pass — that was squeezing the text column
     down to a sliver. */
  .newsletter-box { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: center; padding: 46px 50px; }
}
.newsletter-box .icon-badge { background: rgba(255,255,255,0.14); box-shadow: none; margin-bottom: 14px; }
.newsletter-box h3 { color: #fff; }
.newsletter-box p.text-muted { color: #cfe0d3; }
.newsletter-box form { min-width: 0; width: 100%; }
.newsletter-form {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  min-width: 0;
  background: #fff;
  border-radius: 999px;
  padding: 5px;
  box-shadow: var(--shadow-sm);
}
.newsletter-form input[type=email] {
  flex: 1 1 220px;
  min-width: 0;
  border: none;
  border-radius: 999px;
  padding: 12px 18px;
  min-height: 44px;
  background: transparent;
}
.newsletter-form input[type=email]:focus { outline: none; box-shadow: none; background: var(--bg); }
.newsletter-form .btn { flex-shrink: 0; }
.newsletter-box .checkbox-row label { color: #dfeee2; }
.newsletter-box .checkbox-row a { color: #fff; }

/* Footer */
.site-footer { background: var(--charcoal); color: #d8ddd2; padding: 64px 0 24px; }
.footer-grid { display: grid; gap: 36px; grid-template-columns: 1fr; margin-bottom: 40px; }
@media (min-width: 768px) { .footer-grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; } }
.footer-brand img { height: 60px; width: auto; margin-bottom: 14px; background: #fff; padding: 8px; border-radius: 12px; }
.footer-brand .kn { color: var(--lime-light); font-family: var(--font-kn); }
.site-footer h4 { color: #fff; font-family: var(--font-body); font-size: 0.92rem; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: 16px; }
.site-footer ul li { margin-bottom: 10px; }
.site-footer a { color: #c7cec1; }
.site-footer a:hover { color: var(--lime-light); }
.footer-social { display: flex; gap: 10px; margin-top: 16px; }
.footer-social a {
  width: 40px; height: 40px; border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.25);
  display: flex; align-items: center; justify-content: center;
}
.footer-social a:hover { background: var(--lime); border-color: var(--lime); color: var(--forest-dark); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.14);
  padding-top: 24px;
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; align-items: center;
  font-size: 0.85rem; color: #9aa192;
}
.footer-bottom .legal-links { display: flex; gap: 16px; flex-wrap: wrap; }

/* Utility */
.text-center { text-align: center; }
.mt-0 { margin-top: 0; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.badge-demo {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(214,140,58,0.15); color: var(--gold-dark);
  font-size: 0.72rem; font-weight: 800; padding: 4px 10px; border-radius: 999px;
  text-transform: uppercase; letter-spacing: 0.04em;
}
.demo-banner {
  background: var(--gold);
  color: #2a1a05;
  text-align: center;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 8px 16px;
}
.demo-banner a { text-decoration: underline; }

.two-col { display: grid; gap: 40px; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 900px) { .two-col { grid-template-columns: 1fr 1fr; } }
.two-col.reverse { direction: rtl; }
.two-col.reverse > * { direction: ltr; }
.rounded-photo { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); }

.empty-state, .error-state, .loading-state {
  text-align: center;
  padding: 60px 20px;
  border: 2px dashed var(--border);
  border-radius: var(--radius-lg);
  color: var(--text-muted);
}

.pagination { display: flex; gap: 10px; justify-content: center; margin-top: 40px; flex-wrap: wrap; }
.pagination button {
  min-width: 44px; min-height: 44px;
  border-radius: 10px; border: 1.5px solid var(--border); background: #fff;
  cursor: pointer; font-weight: 700;
}
.pagination button[aria-current="true"] { background: var(--forest); color: #fff; border-color: var(--forest); }

.faq-item { border-bottom: 1px solid var(--border); }
.faq-item summary {
  cursor: pointer; padding: 18px 4px; font-weight: 700; font-size: 1.02rem;
  display: flex; justify-content: space-between; align-items: center; list-style: none;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; font-size: 1.4rem; color: var(--forest); }
.faq-item[open] summary::after { content: "–"; }
.faq-item p { padding-bottom: 18px; color: var(--text-muted); }

.sidebar-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius-md); padding: 22px; }
.sidebar-card + .sidebar-card { margin-top: 20px; }

.progress-cap { font-size: 0.85rem; color: var(--text-muted); }