/*
 * GURU NANAK NAAM LEVA SANGAT — Main stylesheet (UI/UX Pro Max redesign)
 * Appearance only. No content. All palette values from tokens.css.
 *
 * Pattern:  Storytelling + Trust (progressive reveal, narrative arc)
 * Style:    Accessible & Ethical · WCAG AA+ throughout
 * Fonts:    Lora (heading) + Nunito Sans (body) — loaded via functions.php
 *
 * Structure:
 *   1.  Reset & base
 *   2.  Elementor overrides
 *   3.  Layout utilities
 *   4.  Eyebrow / meta labels
 *   5.  Buttons — all variants
 *   6.  Sections — backgrounds, rhythm
 *   7.  Segnaposto (visible placeholder)
 *   8.  Icon wells
 *   9.  Cards — generic + program variant
 *  10.  Hero band
 *  11.  Impact / stat strip
 *  12.  FAQ / accordion
 *  13.  Quote block (letter / sangat voice)
 *  14.  Tag badges
 *  15.  Site header (sticky, backdrop-blur, mobile menu)
 *  16.  Site footer
 *  17.  Mobile CTA bar (fixed bottom)
 *  18.  Forms (CF7 placeholder styling)
 *  19.  Utility helpers
 *  20.  Responsive
 *  21.  Motion (scroll-reveal + prefers-reduced-motion)
 */

/* ══ 1. Reset & base ═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  font-family:     var(--font-body);
  font-size:       var(--fs-body);        /* 17px */
  line-height:     var(--lh-body);        /* 1.7 */
  color:           var(--c-text);
  background:      var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
  font-family:  var(--font-heading);
  line-height:  var(--lh-heading);
  color:        var(--c-primary);
  margin-top:   0;
  margin-bottom: var(--sp-4);
}

h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }
h4 { font-size: var(--fs-h4); }

p { margin-top: 0; margin-bottom: var(--sp-4); }
p:last-child { margin-bottom: 0; }

a {
  color:           var(--c-cta-icon);
  text-decoration: none;
  transition:      color var(--t-fast) var(--ease-out);
}
a:hover { color: var(--c-cta-btn); }
a:focus-visible {
  outline:        3px solid var(--c-cta-icon);
  outline-offset: 3px;
  border-radius:  2px;
}

ul, ol { padding-left: var(--sp-6); margin-bottom: var(--sp-4); }
li { margin-bottom: var(--sp-2); }

img { max-width: 100%; height: auto; display: block; }

hr {
  border: none;
  border-top: 1px solid var(--c-border);
  margin: var(--sp-8) 0;
}

/* ══ 2. Elementor overrides ══════════════════════════════════════════════════ */
.elementor-section-wrap,
.e-con { overflow-x: clip; }

/* Elementor resets button styles — restore ours */
.elementor-widget-button .elementor-button { all: unset; cursor: pointer; display: inline-flex; }
.elementor-widget-heading .elementor-heading-title { margin: 0; }

/* Container default: no extra margin */
.e-con > .e-con-inner { padding: 0; }

/* Ensure elementor HTML widget doesn't break grid */
.elementor-widget-html { width: 100%; }

/* ══ 3. Layout utilities ═══════════════════════════════════════════════════════ */
.gnnls-container {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--gutter);
}
.gnnls-container--narrow  { max-width: var(--max-w-narrow); }
.gnnls-container--wide    { max-width: 1360px; }

/* CSS grid helpers — used inside Elementor HTML widgets or custom sections */
.gnnls-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap:                   var(--sp-8);
}
.gnnls-grid-2 { grid-template-columns: repeat(2, 1fr); }
.gnnls-grid-3 { grid-template-columns: repeat(3, 1fr); }
.gnnls-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1023px) {
  .gnnls-grid-4 { grid-template-columns: repeat(2, 1fr); }
  .gnnls-grid-3 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 639px) {
  .gnnls-grid-2,
  .gnnls-grid-3,
  .gnnls-grid-4 { grid-template-columns: 1fr; }
}

/* ══ 4. Eyebrow / meta labels ══════════════════════════════════════════════════ */
.eyebrow {
  display:        block;
  font-family:    var(--font-body);
  font-size:      var(--fs-xs);          /* 13px */
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--c-cta-icon);
  margin-bottom:  var(--sp-3);
}

/* Eyebrow on dark/primary backgrounds */
.section-primary .eyebrow,
.hero-band       .eyebrow { color: var(--c-accent-on-dark); }

/* ══ 5. Buttons — all variants ══════════════════════════════════════════════════ */

/* ── Base ── */
/*
 * Elementor stores CSS classes on the widget WRAPPER (.elementor-widget),
 * not on the <a> element. So .btn is on the wrapper and we need the
 * descendant selector .btn .elementor-button to reach the actual <a>.
 */
.btn .elementor-button,
.btn-secondary .elementor-button,
.btn-outline-white .elementor-button {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  gap:             var(--sp-2);
  /* Elementor's own .elementor-button rule sets content-box, which beats the
     global * reset — without this, min-height excludes padding and the button
     renders 72px instead of 44px. */
  box-sizing:      border-box;
  min-height:      var(--tap);           /* 44px minimum touch target */
  padding:         .8em 2em;
  background:      var(--c-cta-btn);
  color:           var(--c-on-cta) !important;
  font-family:     var(--font-body);
  font-weight:     700;
  font-size:       var(--fs-small);
  line-height:     1;
  border-radius:   var(--radius);
  border:          2px solid transparent;
  cursor:          pointer;
  text-decoration: none !important;
  white-space:     nowrap;
  box-shadow:      var(--shadow-cta);
  transition:      background    var(--t-fast) var(--ease-out),
                   box-shadow    var(--t-fast) var(--ease-out),
                   transform     var(--t-fast) var(--ease-out),
                   border-color  var(--t-fast) var(--ease-out);
  -webkit-user-select: none;
  user-select:     none;
}
.btn:hover .elementor-button {
  background:  var(--c-cta-btn-hover);
  box-shadow:  0 6px 24px rgba(168,69,36,.40);
  transform:   translateY(-2px);
  color:       var(--c-on-cta) !important;
}
.btn:active .elementor-button {
  transform: translateY(0);
  box-shadow: var(--shadow-cta);
}
.btn .elementor-button:focus-visible {
  outline:        3px solid var(--c-cta-icon);
  outline-offset: 4px;
}

/* ── Secondary (ghost, on light) ── */
.btn-secondary .elementor-button {
  background:  transparent;
  color:       var(--c-primary) !important;
  border:      2px solid var(--c-primary);
  box-shadow:  none;
  cursor:      pointer;
}
.btn-secondary:hover .elementor-button {
  background: var(--c-primary);
  color:      var(--c-on-primary) !important;
  box-shadow: var(--shadow-sm);
}
.btn-secondary .elementor-button:focus-visible {
  outline: 3px solid var(--c-primary);
  outline-offset: 4px;
}

/* On a dark section the teal-on-teal secondary button measured 1:1 contrast —
   invisible. Inherit the white-outline treatment there instead. */
.section-primary .btn-secondary .elementor-button,
.page-hero      .btn-secondary .elementor-button {
  color:        var(--c-on-primary) !important;
  border-color: rgba(255,255,255,.70);
}
.section-primary .btn-secondary:hover .elementor-button,
.page-hero      .btn-secondary:hover .elementor-button {
  background:   rgba(255,255,255,.12);
  border-color: var(--c-on-primary);
  color:        var(--c-on-primary) !important;
}
.section-primary .btn-secondary .elementor-button:focus-visible,
.page-hero      .btn-secondary .elementor-button:focus-visible {
  outline: 3px solid rgba(255,255,255,.85);
}

/* ── Outline white (on primary/dark backgrounds) ── */
.btn-outline-white .elementor-button {
  background:  transparent;
  color:       var(--c-on-primary) !important;
  border:      2px solid rgba(255,255,255,.70);
  box-shadow:  none;
  cursor:      pointer;
}
.btn-outline-white:hover .elementor-button {
  background:   rgba(255,255,255,.12);
  border-color: var(--c-on-primary);
  color:        var(--c-on-primary) !important;
}
.btn-outline-white .elementor-button:focus-visible {
  outline: 3px solid rgba(255,255,255,.85);
  outline-offset: 4px;
}

/* ── Text link button (no background) ── */
.btn-text {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-2);
  min-height:      var(--tap);
  padding:         .4em 0;
  background:      none;
  color:           var(--c-cta-icon) !important;
  font-weight:     700;
  font-size:       var(--fs-small);
  border:          none;
  cursor:          pointer;
  text-decoration: none;
  transition:      color var(--t-fast) var(--ease-out), gap var(--t-fast) var(--ease-out);
}
.btn-text:hover {
  color: var(--c-cta-btn) !important;
  gap:   var(--sp-3);
}

/* ── CTA group (horizontal pair of buttons) ── */
.cta-group {
  display:     flex;
  flex-wrap:   wrap;
  gap:         var(--sp-4);
  align-items: center;
}

/* ══ 6. Sections ════════════════════════════════════════════════════════════════ */
.section-light   { background: var(--c-bg);      }
.section-surface { background: var(--c-surface);  }
.section-primary { background: var(--c-primary);  color: var(--c-on-primary); }
.section-alt     { background: var(--c-surface-alt); }

.section-primary h1,
.section-primary h2,
.section-primary h3,
.section-primary h4 { color: var(--c-on-primary); }

/* The Elementor Kit colours .elementor-heading-title at (0,2,0), which outranks
   the (0,1,1) rule above and left dark-section headings teal-on-teal (1:1).
   Qualifying with the tag lifts us to (0,2,1) so the light colour wins. */
.section-primary h1.elementor-heading-title,
.section-primary h2.elementor-heading-title,
.section-primary h3.elementor-heading-title,
.section-primary h4.elementor-heading-title,
.page-hero      h1.elementor-heading-title,
.page-hero      h2.elementor-heading-title,
.page-hero      h3.elementor-heading-title,
.page-hero      h4.elementor-heading-title,
/* .impact-strip is a dark band in its own right and does not carry
   .section-primary on the home page, so its H2 ("Every rupee reaches a real
   person.") was left teal on teal at 1.0:1 — invisible. */
.impact-strip   h1.elementor-heading-title,
.impact-strip   h2.elementor-heading-title,
.impact-strip   h3.elementor-heading-title,
.impact-strip   h4.elementor-heading-title { color: var(--c-on-primary); }

.section-primary p,
.section-primary li { color: rgba(255,255,255,.88); }

.section-primary a { color: var(--c-accent); }
.section-primary a:hover { color: #fff; }

/* Vertical rhythm */
.section-pad    { padding-block: var(--sp-24); } /* 96px */
.section-pad-sm { padding-block: var(--sp-16); } /* 64px */
.section-pad-lg { padding-block: var(--sp-32); } /* 128px */
.section-pad-xs { padding-block: var(--sp-12); } /* 48px */

/* Visual divider between sections */
.section-divider {
  width:  60px;
  height: 3px;
  background: var(--c-accent);
  margin: 0 0 var(--sp-8);
  border-radius: 2px;
}
.section-primary .section-divider { background: rgba(255,255,255,.4); }

/* ══ 7. Segnaposto (visible placeholder) ═══════════════════════════════════════ */
.segnaposto {
  background:    #FFF3CD;
  color:         #664D03;
  border:        1px dashed #FFC107;
  border-radius: 3px;
  padding:       .15em .5em;
  font-size:     .85em;
  font-weight:   700;
  font-style:    normal;
}

/* ══ 8. Icon wells ═════════════════════════════════════════════════════════════ */
.icon-well {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           56px;
  height:          56px;
  border-radius:   var(--radius-lg);
  background:      rgba(27,74,90,.08);
  color:           var(--c-primary);
  flex-shrink:     0;
  margin-bottom:   var(--sp-4);
}
.icon-well svg { width: 28px; height: 28px; }
.section-primary .icon-well { background: rgba(255,255,255,.15); color: var(--c-accent); }

/* ══ 9. Cards ══════════════════════════════════════════════════════════════════ */
.card {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-8);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out),
                 border-color var(--t-base) var(--ease-out);
  cursor:        default;
}
.card:has(a) { cursor: pointer; }
.card:hover {
  box-shadow:   var(--shadow);
  transform:    translateY(-4px);
  border-color: rgba(27,74,90,.15);
}
.card:active { transform: translateY(-2px); }

/* Program card — rust accent bar on top */
.card-program {
  border-top:    4px solid var(--c-cta-icon);
  padding-top:   calc(var(--sp-8) - 4px);
  display:       flex;
  flex-direction:column;
}
.card-program .card-body    { flex: 1; }
.card-program .card-footer  { margin-top: var(--sp-6); }
.card-program h3 { font-size: var(--fs-h4); color: var(--c-primary); margin-bottom: var(--sp-2); }

/* Surface variant (on --c-surface backgrounds) */
.card-surface {
  background: var(--c-bg);
  border:     1px solid var(--c-border);
}

/* Stat card */
.stat-card {
  text-align:   center;
  padding:      var(--sp-8) var(--sp-6);
  border-radius: var(--radius-lg);
  background:   rgba(255,255,255,.08);
  border:       1px solid rgba(255,255,255,.12);
}
.stat-card .stat-number {
  font-family:  var(--font-heading);
  font-size:    clamp(2.5rem, 5vw, 3.75rem);
  font-weight:  700;
  color:        var(--c-accent);
  line-height:  1;
  margin-bottom: var(--sp-2);
}
.stat-card .stat-label {
  font-size:   var(--fs-small);
  color:       rgba(255,255,255,.80);
  font-weight: 600;
  line-height: 1.4;
}

/* ══ 10a. Page hero (inner pages) ══════════════════════════════════════════════ */
/*
 * A compact hero for inner pages (About, Programs, Impact, etc.).
 * Same teal gradient as the home hero-band but shorter.
 * Grain texture via SVG data-URI overlay.
 */
.page-hero {
  position:   relative;
  overflow:   hidden;
  background: linear-gradient(135deg, var(--c-primary) 0%, #0e2d38 55%, #1a4a3c 100%);
  padding:    clamp(64px, 10vw, 112px) 0 clamp(56px, 8vw, 96px);
}

/* Grain texture overlay */
.page-hero::before {
  content:         '';
  position:        absolute;
  inset:           0;
  background:      url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events:  none;
  z-index:         1;
}

/* Subtle diagonal wave at the bottom */
.page-hero::after {
  content:   '';
  position:  absolute;
  bottom:    -1px;
  left:      0;
  right:     0;
  height:    56px;
  background: var(--c-bg);
  clip-path: polygon(0 100%, 100% 40%, 100% 100%);
  z-index:   2;
}
.page-hero > * { position: relative; z-index: 3; }

/* Text resets on dark background */
.page-hero h1,
.page-hero h2,
.page-hero h3 { color: var(--c-on-primary); }

.page-hero p,
.page-hero li { color: rgba(255,255,255,.85); }

.page-hero .eyebrow { color: var(--c-accent-on-dark); }

/* Page hero inner content container */
.page-hero__inner {
  max-width: var(--max-w);
  margin:    0 auto;
  padding:   0 var(--gutter);
}

/* ══ 10. Hero band ═════════════════════════════════════════════════════════════ */
.hero-band {
  position:       relative;
  min-height:     clamp(480px, 72vh, 720px);
  display:        flex;
  align-items:    center;
  overflow:       hidden;
  background:     linear-gradient(135deg, var(--c-primary) 0%, #0f2d38 100%);
}

/* Decorative grain texture overlay */
.hero-band::before {
  content:    '';
  position:   absolute;
  inset:      0;
  background: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.035'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index:    1;
}

/* Diagonal accent shape */
.hero-band::after {
  content:     '';
  position:    absolute;
  bottom:      -2px;
  left:        0;
  right:       0;
  height:      80px;
  background:  var(--c-bg);
  clip-path:   polygon(0 100%, 100% 0, 100% 100%);
  z-index:     2;
}
.hero-band.hero-band--surface::after { background: var(--c-surface); }

.hero-band > * { position: relative; z-index: 3; }

.hero-band__inner {
  max-width:  var(--max-w);
  margin:     0 auto;
  padding:    var(--sp-32) var(--gutter) var(--sp-24);
  width:      100%;
}

.hero-band h1 {
  color:       var(--c-on-primary);
  max-width:   18ch;
  margin-bottom: var(--sp-6);
}

.hero-band .hero-sub {
  font-size:   var(--fs-body);
  color:       rgba(255,255,255,.82);
  max-width:   52ch;
  margin-bottom: var(--sp-8);
  line-height: 1.75;
}

/* Gurmukhi decorative line in hero */
.hero-gurmukhi {
  font-size:    var(--fs-small);
  color:        rgba(255,255,255,.55);
  margin-bottom: var(--sp-6);
  font-style:   italic;
}

/* ══ 11. Impact / stat strip ════════════════════════════════════════════════════ */
.impact-strip {
  background:    var(--c-primary);
  color:         var(--c-on-primary);
  padding-block: var(--sp-24);
  position:      relative;
}
/* Override Elementor's column default — counters must flow as a row */
.impact-strip.e-flex {
  flex-direction: row !important;
  flex-wrap:      wrap !important;
  justify-content: center;
  align-items:    flex-start;
  gap:            var(--sp-8) !important;
}
.impact-strip.e-flex > .elementor-widget {
  flex: 1 1 100px;
  min-width: 0;
}

/* Counter widgets inside impact-strip */
.impact-strip .elementor-counter-number-wrapper { color: var(--c-accent); font-size: clamp(2rem, 4vw, 3rem); }
.impact-strip .elementor-counter-number-suffix   { color: var(--c-accent); }
.impact-strip .elementor-counter-title { color: rgba(255,255,255,.80); font-size: var(--fs-small); font-weight: 600; }
.impact-strip .elementor-counter       { text-align: center; }

/* Stat grid inside impact strip */
.impact-stat-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap:                   var(--sp-6);
  max-width:             var(--max-w);
  margin:                0 auto;
  padding:               0 var(--gutter);
}

/* ══ 12. FAQ / Accordion ═══════════════════════════════════════════════════════ */
.faq .elementor-tab-title {
  font-family:   var(--font-heading);
  font-size:     var(--fs-body);
  font-weight:   600;
  color:         var(--c-primary);
  padding:       var(--sp-4) var(--sp-6);
  border-radius: var(--radius);
  cursor:        pointer;
  transition:    background var(--t-fast) var(--ease-out),
                 color      var(--t-fast) var(--ease-out);
}
.faq .elementor-tab-title:hover       { background: rgba(27,74,90,.06); }
.faq .elementor-tab-title.elementor-active {
  background: var(--c-surface);
  color:      var(--c-primary);
}
.faq .elementor-tab-content {
  padding:    0 var(--sp-6) var(--sp-4);
  color:      var(--c-muted);
  font-size:  var(--fs-body);
  line-height: var(--lh-body);
}
.faq .elementor-accordion-item {
  border-bottom: 1px solid var(--c-border);
  margin-bottom: 0;
}
.faq .elementor-accordion-icon { color: var(--c-cta-icon); }

/* ══ 13. Quote block (letter / sangat voice) ════════════════════════════════════ */
.quote-block {
  position:     relative;
  padding:      var(--sp-8) var(--sp-8) var(--sp-8) var(--sp-10);
  border-left:  4px solid var(--c-accent);
  background:   var(--c-surface);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
  font-family:  var(--font-heading);
  font-size:    var(--fs-h4);
  font-style:   italic;
  color:        var(--c-primary);
  line-height:  1.6;
  margin:       var(--sp-8) 0;
}
.quote-block cite {
  display:   block;
  margin-top: var(--sp-4);
  font-style: normal;
  font-family: var(--font-body);
  font-size:  var(--fs-small);
  font-weight: 600;
  color:      var(--c-muted);
}

/* Decorative large quotation mark */
.quote-block::before {
  content:   '"';
  position:  absolute;
  top:       -20px;
  left:      var(--sp-6);
  font-size: 5rem;
  color:     var(--c-accent);
  opacity:   .20;
  font-family: var(--font-heading);
  line-height: 1;
}

/* ══ 14. Tag badges ════════════════════════════════════════════════════════════ */
.tag {
  display:       inline-flex;
  align-items:   center;
  gap:           var(--sp-1);
  padding:       .25em .75em;
  font-size:     var(--fs-xs);
  font-weight:   700;
  border-radius: var(--radius-pill);
  white-space:   nowrap;
}
.tag--primary  { background: rgba(27,74,90,.10);   color: var(--c-primary);  }
.tag--cta      { background: rgba(168,69,36,.10);  color: var(--c-cta-btn);  }
.tag--accent   { background: rgba(201,138,62,.15); color: #7a4e10;           }
.tag--success  { background: rgba(22,163,74,.10);  color: #15803d;           }

/* ══ 15. Site header ═══════════════════════════════════════════════════════════ */
/*
 * Fixed, not sticky.
 *
 * Two problems had to be solved. First, the header IS an Elementor container,
 * and Elementor's own .e-con rule sets position:relative at a specificity that
 * beat a plain .site-header — so it computed as relative and z-index fell back
 * to auto. Second, even once sticky applied it still scrolled away: the header
 * template renders inside a wrapper (.elementor-<id>) that is only as tall as
 * the header itself, and a sticky element cannot outlive its parent's box.
 *
 * Fixed sidesteps the parent entirely. The space it no longer occupies in flow
 * is given back on .site-main below, so nothing hides underneath it.
 */
.site-header,
.site-header.e-con {
  position:       fixed !important;
  top:            0;
  left:           0;
  right:          0;
  width:          100%;
  z-index:        1000 !important;
  background:     rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom:  1px solid var(--c-border);
  min-height:     72px;
  display:        flex;
  align-items:    center;
  transition:     box-shadow var(--t-fast) var(--ease-out);
}
.site-header.is-scrolled { box-shadow: var(--shadow); }

/* Reserve the height the fixed header took out of the flow. --header-h is the
   header's own min-height; the admin bar pushes everything down when present. */
:root { --header-h: 72px; }
body { padding-top: var(--header-h); }
body.admin-bar .site-header,
body.admin-bar .site-header.e-con { top: 32px; }
@media screen and (max-width: 782px) {
  body.admin-bar .site-header,
  body.admin-bar .site-header.e-con { top: 46px; }
}
/* Anchor links must not land under the fixed header. */
[id] { scroll-margin-top: calc(var(--header-h) + var(--sp-4)); }

/* ── Logo area ── */
.site-logo {
  display:     flex;
  align-items: center;
  gap:         var(--sp-3);
  text-decoration: none !important;
  flex-shrink: 0;
}
.site-logo__icon {
  width:           44px;
  height:          44px;
  border-radius:   50%;
  background:      var(--c-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}
.site-logo__icon span { color: #fff; font-size: 1rem; font-weight: 700; line-height: 1; }

.site-logo__text { display: flex; flex-direction: column; gap: 1px; }
.site-logo__name {
  font-family:  var(--font-heading);
  font-size:    1rem;
  font-weight:  700;
  color:        var(--c-primary);
  line-height:  1.2;
  white-space:  nowrap;
}
.site-logo__slogan {
  font-size:  0.7rem;
  color:      var(--c-muted);
  line-height: 1.2;
  white-space: nowrap;
}

/* ── Nav links ── */
.site-nav {
  display:     flex;
  align-items: center;
  gap:         var(--sp-1);
  flex-wrap:   wrap;
}
.site-nav a {
  display:       inline-flex;
  align-items:   center;
  min-height:    var(--tap);
  padding:       0 var(--sp-3);
  font-weight:   600;
  font-size:     var(--fs-small);
  color:         var(--c-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  white-space:   nowrap;
  cursor:        pointer;
  transition:    color      var(--t-fast) var(--ease-out),
                 background var(--t-fast) var(--ease-out);
}
.site-nav a:hover { color: var(--c-primary); background: rgba(27,74,90,.06); }
.site-nav a:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.site-nav a.current-menu-item { color: var(--c-primary); font-weight: 700; }

/* ── Donate CTA in nav ── */
.site-nav .donate-link,
.site-nav .donate-link:visited {
  background:    var(--c-cta-btn);
  color:         #fff !important;
  border-radius: var(--radius);
  padding:       0 var(--sp-5);
  box-shadow:    0 2px 8px rgba(168,69,36,.25);
  font-weight:   700;
  cursor:        pointer;
  transition:    background var(--t-fast) var(--ease-out),
                 box-shadow  var(--t-fast) var(--ease-out),
                 transform   var(--t-fast) var(--ease-out);
}
.site-nav .donate-link:hover {
  background:  var(--c-cta-btn-hover);
  box-shadow:  0 4px 16px rgba(168,69,36,.35);
  transform:   translateY(-1px);
  color:       #fff !important;
}

/* ── Mobile hamburger button ── */
.hamburger {
  display:         none;
  flex-direction:  column;
  justify-content: center;
  align-items:     center;
  gap:             5px;
  width:           var(--tap);
  height:          var(--tap);
  background:      none;
  border:          none;
  cursor:          pointer;
  padding:         var(--sp-2);
  border-radius:   var(--radius-sm);
  transition:      background var(--t-fast) var(--ease-out);
}
.hamburger:hover  { background: rgba(27,74,90,.06); }
.hamburger:focus-visible { outline: 3px solid var(--c-primary); outline-offset: 2px; }
.hamburger__line  {
  width:           22px;
  height:          2px;
  background:      var(--c-text);
  border-radius:   2px;
  transition:      transform var(--t-base) var(--ease-out),
                   opacity   var(--t-fast) var(--ease-out);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] .hamburger__line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* ── Mobile nav drawer ── */
.nav-drawer {
  display:    none;
  position:   fixed;
  top:        72px;
  left:       0;
  right:      0;
  bottom:     0;
  min-height: calc(100dvh - 72px);
  background: var(--c-bg);
  z-index:    999;
  padding:    var(--sp-6) var(--gutter);
  overflow-y: auto;
  border-top: 1px solid var(--c-border);
  box-shadow: var(--shadow-lg);
}
.nav-drawer.is-open { display: block; }
.nav-drawer a {
  display:       flex;
  align-items:   center;
  min-height:    var(--tap);
  padding:       0 var(--sp-4);
  font-size:     var(--fs-body);
  font-weight:   600;
  color:         var(--c-text);
  border-radius: var(--radius-sm);
  text-decoration: none;
  border-bottom:  1px solid var(--c-border);
  cursor:        pointer;
  transition:    background var(--t-fast) var(--ease-out);
}
.nav-drawer a:hover { background: var(--c-surface); color: var(--c-primary); }
.nav-drawer a:last-child { border-bottom: none; }
.nav-drawer .donate-link {
  margin-top:    var(--sp-4);
  display:       flex;
  align-items:   center;
  justify-content: center;
  min-height:    52px;
  background:    var(--c-cta-btn);
  color:         #fff !important;
  border-radius: var(--radius);
  font-weight:   700;
  text-align:    center;
  box-shadow:    var(--shadow-cta);
}

/* Header inner layout wrapper */
.header-inner {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  width:           100%;
  max-width:       var(--max-w);
  margin:          0 auto;
  padding:         0 var(--gutter);
  gap:             var(--sp-4);
}

/* ══ 16. Site footer ═══════════════════════════════════════════════════════════ */
.site-footer {
  background:    var(--c-primary);
  color:         rgba(255,255,255,.82);
}

/* Footer columns — children are Elementor e-con-boxed, need flex sizing to sit side-by-side */
.site-footer.e-flex.e-parent > .e-con-boxed.e-child {
  flex:      1 1 180px !important;
  min-width: 0 !important;
}

.footer-inner {
  max-width:  var(--max-w);
  margin:     0 auto;
  padding:    var(--sp-24) var(--gutter) var(--sp-12);
  display:    grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap:        var(--sp-12);
}

.site-footer h4,
.site-footer h5 {
  font-family:   var(--font-body);
  font-size:     var(--fs-small);
  font-weight:   700;
  color:         #fff;
  letter-spacing: .06em;
  text-transform: uppercase;
  margin-bottom: var(--sp-4);
}

.site-footer p  { color: rgba(255,255,255,.72); font-size: var(--fs-small); line-height: 1.7; }
.site-footer a  { color: rgba(255,255,255,.65); font-size: var(--fs-small); transition: color var(--t-fast) var(--ease-out); }
.site-footer a:hover { color: #fff; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: var(--sp-2); }

.footer-brand__slogan-en {
  font-size:   var(--fs-xs);
  color:       rgba(255,255,255,.45);
  margin-top:  var(--sp-2);
  font-style:  italic;
}

/* Legal bar */
.footer-legal {
  max-width:     var(--max-w);
  margin:        0 auto;
  padding:       var(--sp-6) var(--gutter);
  border-top:    1px solid rgba(255,255,255,.12);
  display:       flex;
  align-items:   center;
  justify-content: space-between;
  flex-wrap:     wrap;
  gap:           var(--sp-4);
  font-size:     var(--fs-xs);
  color:         rgba(255,255,255,.50);
}
.footer-legal a { color: rgba(255,255,255,.55); }
.footer-legal a:hover { color: rgba(255,255,255,.90); }
.footer-legal__links { display: flex; gap: var(--sp-6); }

/* ══ 17. Mobile CTA bar ════════════════════════════════════════════════════════ */
.mobile-cta-bar {
  display:    none;
  position:   fixed;
  bottom:     0;
  left:       0;
  right:      0;
  z-index:    900;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--c-border);
  padding:    var(--sp-3) var(--gutter);
  box-shadow: 0 -4px 24px rgba(27,74,90,.12);
}
.mobile-cta-bar .btn { width: 100%; justify-content: center; }

/* ══ 18. Forms ═════════════════════════════════════════════════════════════════ */
/* Styles for CF7 forms and the donate program selector */
.gnnls-form label {
  display:     block;
  font-weight: 600;
  font-size:   var(--fs-small);
  color:       var(--c-text);
  margin-bottom: var(--sp-2);
  cursor:      pointer;
}
.gnnls-form input[type="text"],
.gnnls-form input[type="email"],
.gnnls-form input[type="tel"],
.gnnls-form textarea,
.gnnls-form select {
  width:         100%;
  min-height:    var(--tap);
  padding:       var(--sp-3) var(--sp-4);
  font-family:   var(--font-body);
  font-size:     var(--fs-body);
  color:         var(--c-text);
  background:    var(--c-bg);
  border:        1px solid var(--c-border-input);
  border-radius: var(--radius);
  transition:    border-color var(--t-fast) var(--ease-out),
                 box-shadow   var(--t-fast) var(--ease-out);
  outline:       none;
  appearance:    none;
}
.gnnls-form input:focus,
.gnnls-form textarea:focus,
.gnnls-form select:focus {
  border-color: var(--c-primary);
  box-shadow:   0 0 0 3px rgba(27,74,90,.15);
}

/* Program radio selector (donate page) */
.program-radio-item {
  display:       flex;
  align-items:   flex-start;
  gap:           var(--sp-3);
  padding:       var(--sp-4) var(--sp-5);
  border:        1.5px solid var(--c-border);
  border-radius: var(--radius);
  background:    var(--c-bg);
  cursor:        pointer;
  transition:    border-color var(--t-fast) var(--ease-out),
                 background   var(--t-fast) var(--ease-out),
                 box-shadow   var(--t-fast) var(--ease-out);
}
.program-radio-item:hover {
  border-color: var(--c-primary);
  background:   rgba(27,74,90,.03);
}
.program-radio-item input[type="radio"] {
  margin-top:   3px;
  accent-color: var(--c-cta-btn);
  width:        18px;
  height:       18px;
  flex-shrink:  0;
  cursor:       pointer;
}
.program-radio-item:has(input:checked) {
  border-color: var(--c-cta-btn);
  background:   rgba(168,69,36,.04);
  box-shadow:   0 0 0 2px rgba(168,69,36,.20);
}

/* ══ 19. Utility helpers ═══════════════════════════════════════════════════════ */
.text-center  { text-align: center; }
.text-right   { text-align: right; }
.text-muted   { color: var(--c-muted) !important; }
.text-white   { color: #fff !important; }
.text-primary { color: var(--c-primary) !important; }
.text-accent  { color: var(--c-accent) !important; }

.fw-700 { font-weight: 700; }
.fw-600 { font-weight: 600; }

.max-ch-65 { max-width: 65ch; }
.max-ch-48 { max-width: 48ch; }

.mt-auto { margin-top: auto; }

/* Visible focus skip link */
.skip-link {
  position:   absolute;
  top:        -100px;
  left:       var(--sp-4);
  background: var(--c-primary);
  color:      #fff;
  padding:    var(--sp-2) var(--sp-4);
  border-radius: var(--radius);
  font-weight: 700;
  z-index:    9999;
  transition: top var(--t-fast);
}
.skip-link:focus { top: var(--sp-4); }

/* ══ 20. Responsive ════════════════════════════════════════════════════════════ */
@media (max-width: 1199px) {
  .footer-inner {
    grid-template-columns: 1fr 1fr;
    gap: var(--sp-10);
  }
}

@media (max-width: 1023px) {
  .section-pad    { padding-block: var(--sp-16); }
  .section-pad-sm { padding-block: var(--sp-12); }
  .section-pad-lg { padding-block: var(--sp-20); }
  .section-pad-xs { padding-block: var(--sp-10); }

  .hero-band { min-height: clamp(380px, 60vh, 560px); }
  .hero-band__inner { padding-block: var(--sp-24) var(--sp-16); }
}

@media (max-width: 767px) {
  /* Nav: hide desktop nav, show hamburger + drawer */
  .site-nav    { display: none !important; }
  .hamburger   { display: flex; }

  /* Mobile logo: hide slogan on very small screens */
  .site-logo__slogan { display: none; }

  .section-pad    { padding-block: var(--sp-12); }
  .section-pad-sm { padding-block: var(--sp-10); }
  .section-pad-lg { padding-block: var(--sp-16); }
  .section-pad-xs { padding-block: var(--sp-8); }

  .gnnls-container { padding: 0 var(--sp-4); }
  .hero-band__inner { padding: var(--sp-20) var(--sp-4) var(--sp-16); }

  .mobile-cta-bar { display: block; }

  /* Footer mobile: single column */
  .footer-inner { grid-template-columns: 1fr; gap: var(--sp-8); }
  .footer-legal { flex-direction: column; gap: var(--sp-3); text-align: center; }
  .footer-legal__links { justify-content: center; }

  /* CTA group stacks on mobile */
  .cta-group { flex-direction: column; align-items: stretch; }
  .cta-group .btn,
  .cta-group .btn-outline-white,
  .cta-group .btn-secondary { justify-content: center; }
}

@media (max-width: 479px) {
  .hero-band h1 { font-size: clamp(1.75rem, 8vw, 2.25rem); }
  .stat-card .stat-number { font-size: 2.5rem; }
}

/* ══ 21. Motion ════════════════════════════════════════════════════════════════ */

/* Scroll-reveal: start invisible, JS adds .is-visible */
@media (prefers-reduced-motion: no-preference) {
  .e-con,
  .elementor-widget {
    opacity:    0;
    transform:  translateY(20px);
    transition: opacity  var(--t-slow) var(--ease-out),
                transform var(--t-slow) var(--ease-out);
  }

  /* Staggered reveal inside containers */
  .e-con .elementor-widget:nth-child(2) { transition-delay: 80ms;  }
  .e-con .elementor-widget:nth-child(3) { transition-delay: 160ms; }
  .e-con .elementor-widget:nth-child(4) { transition-delay: 240ms; }
  .e-con .elementor-widget:nth-child(5) { transition-delay: 320ms; }
  .e-con .elementor-widget:nth-child(6) { transition-delay: 400ms; }

  .is-visible.e-con,
  .is-visible.elementor-widget {
    opacity:   1;
    transform: none;
  }

  /* The Elementor editor rebuilds elements after the IntersectionObserver has
     already run, so those copies never receive .is-visible and the canvas looks
     empty. Opt the editor preview out of the reveal entirely. */
  body.elementor-editor-active .e-con,
  body.elementor-editor-active .elementor-widget {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }
}

/* Always show for reduced motion users */
@media (prefers-reduced-motion: reduce) {
  .e-con,
  .elementor-widget {
    opacity:    1 !important;
    transform:  none !important;
    transition: none !important;
  }
}

/* Hover states: no transform on touch devices (avoids layout issues) */
@media (hover: none), (pointer: coarse) {
  .card:hover  { transform: none; }
  .btn:hover .elementor-button { transform: none; }
}

/* ══ Sticky header: add shadow on scroll (JS adds .is-scrolled) ══════════════ */
/* See functions.php wp_footer hook where IntersectionObserver is registered */

/* ══ 22. Image slider ══════════════════════════════════════════════════════════ */
.gnnls-slider {
  position:  relative;
  overflow:  hidden;
  background: var(--c-primary);
  min-height: 420px;
  max-height: 520px;
}
.gnnls-slider__track {
  display:    flex;
  height:     100%;
  width:      100%;
  transition: none;
}
.gnnls-slider__slide {
  flex:       0 0 100%;
  min-height: 420px;
  max-height: 520px;
  position:   relative;
  display:    flex;
  align-items: flex-end;
}
/* Real photo slides — <img> fills the slide, ::before adds colour overlay */
.gnnls-slider__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  z-index: 0;
}
/* Colour overlay sits above image, below text */
.gnnls-slider__slide::before {
  content: ''; position: absolute; inset: 0;
  z-index: 1; pointer-events: none;
}
.gnnls-slider__slide::after { content: none; } /* remove old emoji */

/* Per-slide dark fallback + overlay tint */
.gnnls-slider__slide--1 { background: #0a1a22; }
.gnnls-slider__slide--1::before {
  background: linear-gradient(100deg, rgba(27,74,90,.88) 35%, rgba(27,74,90,.30) 100%);
}
.gnnls-slider__slide--2 { background: #1a0f08; }
.gnnls-slider__slide--2::before {
  background: radial-gradient(ellipse at 35% 55%, rgba(0,0,0,.65) 0%, rgba(0,0,0,.40) 100%);
}
.gnnls-slider__slide--3 { background: #0d1a10; }
.gnnls-slider__slide--3::before {
  background: linear-gradient(135deg, rgba(10,26,34,.92) 0%, rgba(46,110,94,.50) 100%);
}
.gnnls-slider__slide--4 { background: #0a1520; }
.gnnls-slider__slide--4::before {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.50) 45%, rgba(0,0,0,.15) 100%);
}

/* ── Unique per-slide layout designs ── */

/* Slide 1 (Langar): amber left-border accent, text bottom-left (default) */
.gnnls-slider__slide--1 .gnnls-slider__overlay {
  border-left: 4px solid var(--c-accent);
  padding-left: calc(var(--sp-8) + 4px);
}

/* Slide 2 (Vidya): centred frosted-glass card */
.gnnls-slider__slide--2 {
  align-items: center !important;
  justify-content: center !important;
}
.gnnls-slider__slide--2 .gnnls-slider__overlay {
  background:         rgba(255,255,255,.11);
  backdrop-filter:    blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border:             1px solid rgba(255,255,255,.20);
  border-radius:      var(--radius-lg);
  text-align:         center;
  padding:            var(--sp-8) var(--sp-10);
  max-width:          520px;
}
.gnnls-slider__slide--2 .gnnls-slider__sub {
  color:        var(--c-accent);
  margin-top:   0;
  margin-bottom: var(--sp-3);
}

/* Slide 3 (Sehat): text right-aligned with amber rule above label */
.gnnls-slider__slide--3 .gnnls-slider__overlay {
  margin-left:   auto;
  text-align:    right;
  padding-right: var(--sp-10);
}
.gnnls-slider__slide--3 .gnnls-slider__sub::before {
  content: '';
  display: block;
  width:   48px;
  height:  3px;
  background: var(--c-accent);
  margin: 0 0 var(--sp-3) auto;
}

/* Slide 4 (Housing): text anchored to top, oversized italic caption */
.gnnls-slider__slide--4 { align-items: flex-start !important; }
.gnnls-slider__slide--4 .gnnls-slider__overlay { padding-top: var(--sp-10); }
.gnnls-slider__slide--4 .gnnls-slider__caption {
  font-size: clamp(1.6rem, 4vw, 3rem);
  max-width:  18ch;
}

.gnnls-slider__overlay {
  position: relative;
  z-index:  2;
  padding:  var(--sp-16) var(--sp-8) var(--sp-12);
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}
.gnnls-slider__caption {
  display:       inline-block;
  font-family:   var(--font-heading);
  font-size:     clamp(1.2rem, 3.5vw, 2.2rem);
  font-style:    italic;
  color:         #fff;
  line-height:   1.35;
  text-shadow:   0 2px 12px rgba(0,0,0,.35);
  max-width:     26ch;
}
.gnnls-slider__sub {
  display:    block;
  margin-top: var(--sp-3);
  font-size:  var(--fs-small);
  color:      rgba(255,255,255,.70);
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

/* Prev / Next arrow buttons */
.gnnls-slider__prev,
.gnnls-slider__next {
  position:  absolute;
  top:       50%;
  transform: translateY(-50%);
  z-index:   10;
  width:     48px;
  height:    48px;
  display:   flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,.12);
  border:    1px solid rgba(255,255,255,.20);
  border-radius: 50%;
  color:     #fff;
  font-size: 1.4rem;
  cursor:    pointer;
  transition: background var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.gnnls-slider__prev { left: var(--sp-4); }
.gnnls-slider__next { right: var(--sp-4); }
.gnnls-slider__prev:hover,
.gnnls-slider__next:hover {
  background:  rgba(255,255,255,.22);
  border-color: rgba(255,255,255,.40);
}
.gnnls-slider__prev:focus-visible,
.gnnls-slider__next:focus-visible {
  outline: 3px solid rgba(255,255,255,.70);
  outline-offset: 2px;
}

/* Dots indicator */
.gnnls-slider__dots {
  position: absolute;
  bottom:   var(--sp-5);
  left:     50%;
  transform: translateX(-50%);
  display:  flex;
  gap:      var(--sp-2);
  z-index:  10;
}
.gnnls-slider__dot {
  width:     10px;
  height:    10px;
  border-radius: 50%;
  background: rgba(255,255,255,.35);
  border:    none;
  cursor:    pointer;
  padding:   0;
  transition: background var(--t-fast) var(--ease-out),
              transform  var(--t-fast) var(--ease-out);
  -webkit-appearance: none;
  appearance: none;
}
.gnnls-slider__dot.is-active {
  background: #fff;
  transform:  scale(1.2);
}
.gnnls-slider__dot:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

/* Slide transition: JS adds .is-transitioning, then repositions with transform */
.gnnls-slider--animated .gnnls-slider__track {
  transition: transform 500ms var(--ease-out);
}

@media (max-width: 767px) {
  .gnnls-slider,
  .gnnls-slider__slide { min-height: 300px; max-height: 380px; }
  .gnnls-slider__overlay { padding: var(--sp-10) var(--sp-4) var(--sp-10); }
  .gnnls-slider__prev { left: var(--sp-2); }
  .gnnls-slider__next { right: var(--sp-2); }
}

/* ══ 23. Founder / committee card ═══════════════════════════════════════════════ */
.founder-section {
  background: var(--c-bg);
}
.founder-grid {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap:                   var(--sp-8);
  margin-top:            var(--sp-10);
}
.founder-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  padding:       var(--sp-8);
  text-align:    center;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
.founder-card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-3px);
}
.founder-card__avatar {
  width:           80px;
  height:          80px;
  border-radius:   50%;
  background:      var(--c-primary);
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto var(--sp-4);
  font-family:     var(--font-heading);
  font-size:       1.6rem;
  font-weight:     700;
  color:           #fff;
  letter-spacing:  .02em;
}
.founder-card__name {
  font-family:   var(--font-heading);
  font-size:     var(--fs-h4);
  color:         var(--c-primary);
  margin-bottom: var(--sp-1);
  font-weight:   700;
}
.founder-card__role {
  font-size:    var(--fs-xs);
  font-weight:  700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color:        var(--c-cta-icon);
  margin-bottom: var(--sp-3);
}
.founder-card__bio {
  font-size:   var(--fs-small);
  color:       var(--c-muted);
  line-height: 1.65;
  margin:      0;
}

/*
 * Elementor containers wrap children inside an .e-con-inner flex div.
 * We override that inner wrapper to use CSS grid so we control column count.
 * !important needed to override Elementor's own display:flex on .e-con-inner.
 */

/* Programs grid — 3 columns */
.programs-grid > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 1023px) {
  .programs-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
  .programs-grid > .e-con-inner { grid-template-columns: 1fr !important; }
}

/* Values grid — 3 columns */
.values-grid > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 767px) {
  .values-grid > .e-con-inner { grid-template-columns: 1fr !important; }
}

/* Impact stats row — 4 columns */
.impact-stats-row > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 1023px) {
  .impact-stats-row > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
  .impact-stats-row > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
}

/* Team grid — 2 columns (about page) */
.team-grid > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 767px) {
  .team-grid > .e-con-inner { grid-template-columns: 1fr !important; }
}

/* Categories grid — 2 columns (get-involved page) */
.cats-grid > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(2, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 767px) {
  .cats-grid > .e-con-inner { grid-template-columns: 1fr !important; }
}

/* Programs summary grid — 3 columns (impact page) */
.progs-grid > .e-con-inner {
  display:               grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap:                   var(--sp-6) !important;
  flex-wrap:             unset !important;
  width:                 100%;
}
@media (max-width: 1023px) {
  .progs-grid > .e-con-inner { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 639px) {
  .progs-grid > .e-con-inner { grid-template-columns: 1fr !important; }
}

/* ══ 24. Photo-based founder / committee card ══════════════════════════════════ */
.founder-card--photo {
  padding:   0;
  text-align: left;
  overflow:  hidden;
}
.founder-card__photo-wrap {
  position: relative;
  overflow: hidden;
  border-radius: calc(var(--radius-lg) - 1px) calc(var(--radius-lg) - 1px) 0 0;
}
.founder-card__photo-wrap img {
  width:        100%;
  height:       200px;
  object-fit:   cover;
  object-position: top center;
  display:      block;
  transition:   transform var(--t-slow) var(--ease-out);
}
.founder-card__photo-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(27,74,90,.90) 0%, rgba(27,74,90,.0) 55%);
  opacity:    0;
  transition: opacity var(--t-base) var(--ease-out);
  display:    flex;
  align-items: flex-end;
  padding:    var(--sp-4);
}
.founder-card__photo-overlay-role {
  color:          #fff;
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.founder-card:hover .founder-card__photo-wrap img { transform: scale(1.07); }
.founder-card:hover .founder-card__photo-overlay  { opacity: 1; }
.founder-card--photo .founder-card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
}

/* ══ 25. Team photo cards (About page) ════════════════════════════════════════ */
.team-grid-raw {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   var(--sp-6);
  margin-top:            var(--sp-8);
}
.team-card {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow:    var(--shadow-sm);
  overflow:      hidden;
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
.team-card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-3px);
}
.team-card__photo-wrap {
  position: relative;
  overflow: hidden;
}
.team-card__photo-wrap img {
  width:           100%;
  height:          180px;
  object-fit:      cover;
  object-position: top center;
  display:         block;
  transition:      transform var(--t-slow) var(--ease-out);
}
.team-card__photo-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(27,74,90,.90) 0%, rgba(27,74,90,.0) 50%);
  opacity:    0;
  transition: opacity var(--t-base) var(--ease-out);
  display:    flex;
  align-items: flex-end;
  padding:    var(--sp-3);
}
.team-card:hover .team-card__photo-wrap img { transform: scale(1.07); }
.team-card:hover .team-card__photo-overlay  { opacity: 1; }
.team-card__photo-overlay-role {
  color:          #fff;
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .10em;
}
.team-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
}
.team-card__name {
  font-family:   var(--font-heading);
  font-size:     var(--fs-h4);
  font-weight:   700;
  color:         var(--c-primary);
  margin-bottom: var(--sp-1);
  line-height:   1.3;
}
.team-card__role {
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .10em;
  color:          var(--c-cta-icon);
}
@media (max-width: 767px) {
  .team-grid-raw { grid-template-columns: repeat(2, 1fr); gap: var(--sp-4); }
  .team-card__photo-wrap img { height: 150px; }
}
@media (max-width: 479px) {
  .team-grid-raw { grid-template-columns: 1fr; }
}

/* ══ 26. Mission photo section — full-bleed quote over image ═══════════════ */
.mission-photo-section {
  position: relative;
  min-height: 540px;
  overflow:   hidden;
  display:    flex;
  align-items: center;
}
.mission-photo-section__bg {
  position:       absolute;
  inset:          0;
  width:          100%;
  height:         100%;
  object-fit:     cover;
  object-position: center 30%;
  z-index:        0;
  filter:         brightness(.38) saturate(.75);
  transition:     filter 1.4s var(--ease-out);
}
.mission-photo-section:hover .mission-photo-section__bg { filter: brightness(.44) saturate(.8); }
.mission-photo-section__overlay {
  position: relative;
  z-index:  1;
  width:    100%;
  padding:  var(--sp-20) var(--sp-6);
}
.mission-photo-section__inner {
  max-width: 780px;
}
.mission-photo-section__eyebrow {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color:          var(--c-accent);
  margin-bottom:  var(--sp-5);
}
.mission-quote {
  margin:       0 0 var(--sp-8);
  padding-left: var(--sp-7);
  border-left:  4px solid var(--c-accent);
}
.mission-quote__text {
  font-family:  var(--font-heading);
  font-size:    clamp(1.35rem, 2.8vw, 2.1rem);
  font-style:   italic;
  font-weight:  600;
  line-height:  1.5;
  color:        #fff;
  margin-bottom: var(--sp-4);
}
.mission-quote__cite {
  display:        block;
  font-size:      var(--fs-sm);
  color:          rgba(255,255,255,.6);
  font-style:     normal;
  letter-spacing: .04em;
}
.mission-photo-section__actions {
  display:    flex;
  gap:        var(--sp-4);
  flex-wrap:  wrap;
  margin-top: var(--sp-2);
}
@media (max-width: 767px) {
  .mission-photo-section { min-height: 420px; }
  .mission-photo-section__overlay { padding: var(--sp-14) var(--sp-6); }
}

/* ══ 27. Sewa story cards — 3-column photo strip ═══════════════════════════ */
.story-cards-wrap {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-6);
  margin-top:            var(--sp-10);
}
.story-card {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
.story-card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-5px);
}
.story-card__photo-wrap {
  position:   relative;
  overflow:   hidden;
  flex-shrink: 0;
}
.story-card__photo-wrap img {
  width:           100%;
  height:          230px;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform var(--t-slow) var(--ease-out),
                   filter   var(--t-slow) var(--ease-out);
  filter:          brightness(.9);
}
.story-card:hover .story-card__photo-wrap img {
  transform: scale(1.07);
  filter:    brightness(1);
}
/* Qualified with span: this was written for the raw-HTML card, where the badge
   IS the span. On the Elementor cards the class sits on the widget wrapper, and
   unqualified it painted a 170x166 amber slab across the photo. */
span.story-card__badge {
  position:       absolute;
  bottom:         var(--sp-3);
  left:           var(--sp-3);
  background:     var(--c-accent);
  color:          #fff;
  font-size:      0.68rem;
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .10em;
  padding:        3px 10px;
  border-radius:  3px;
  pointer-events: none;
}
.story-card__body {
  padding: var(--sp-5) var(--sp-6) var(--sp-6);
  flex:    1;
  display: flex;
  flex-direction: column;
}
.story-card__title {
  font-family:   var(--font-heading);
  font-size:     var(--fs-h4);
  font-weight:   700;
  color:         var(--c-primary);
  line-height:   1.3;
  margin-bottom: var(--sp-3);
}
.story-card__text {
  font-size:   var(--fs-sm);
  color:       var(--c-muted);
  line-height: 1.7;
  flex:        1;
}
.story-card__link {
  display:        inline-block;
  margin-top:     var(--sp-4);
  font-size:      var(--fs-xs);
  font-weight:    700;
  color:          var(--c-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom:  1.5px solid transparent;
  transition:     border-color var(--t-fast) var(--ease-out);
}
.story-card__link:hover { border-color: var(--c-accent); }
@media (max-width: 1023px) { .story-cards-wrap { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .story-cards-wrap { grid-template-columns: 1fr; } }

/* ══ 28. Split photo + CTA section ════════════════════════════════════════ */
.split-photo-cta {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  min-height:            500px;
}
.split-photo-cta__photo {
  position: relative;
  overflow: hidden;
}
.split-photo-cta__photo img {
  width:           100%;
  height:          100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform 1.2s var(--ease-out);
}
.split-photo-cta:hover .split-photo-cta__photo img { transform: scale(1.04); }
.split-photo-cta__photo-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to right, rgba(0,0,0,.35) 0%, rgba(0,0,0,.0) 60%);
  pointer-events: none;
}
.split-photo-cta__body {
  background:     var(--c-primary);
  padding:        var(--sp-16) var(--sp-14);
  display:        flex;
  flex-direction: column;
  justify-content: center;
  gap:            var(--sp-5);
}
.split-photo-cta__eyebrow {
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--c-accent);
}
.split-photo-cta__heading {
  font-family: var(--font-heading);
  font-size:   clamp(1.65rem, 3vw, 2.5rem);
  font-weight: 700;
  color:       #fff;
  line-height: 1.2;
}
.split-photo-cta__text {
  font-size:   var(--fs-sm);
  color:       rgba(255,255,255,.72);
  line-height: 1.75;
  max-width:   40ch;
}
.split-photo-cta__stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4) var(--sp-6);
  padding: var(--sp-5) 0;
  border-top:    1px solid rgba(255,255,255,.15);
  border-bottom: 1px solid rgba(255,255,255,.15);
}
.split-photo-cta__stat-num {
  font-family: var(--font-heading);
  font-size:   clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 700;
  color:       var(--c-accent);
  line-height: 1;
}
.split-photo-cta__stat-label {
  font-size: var(--fs-xs);
  color:     rgba(255,255,255,.6);
  margin-top: var(--sp-1);
}
.split-photo-cta__actions { display: flex; gap: var(--sp-4); flex-wrap: wrap; }
@media (max-width: 1023px) {
  .split-photo-cta__body { padding: var(--sp-12) var(--sp-8); }
}
@media (max-width: 767px) {
  .split-photo-cta {
    grid-template-columns: 1fr;
    grid-template-rows: 280px auto;
  }
  .split-photo-cta__body { padding: var(--sp-10) var(--sp-6); }
}

/* ══ 29. Photo-header program cards ═══════════════════════════════════════ */
.programs-grid-photo {
  display:               grid;
  grid-template-columns: repeat(3, 1fr);
  gap:                   var(--sp-5);
  margin-top:            var(--sp-8);
}
.prog-photo-card {
  background:    var(--c-bg);
  border:        1px solid var(--c-border);
  border-radius: var(--radius-lg);
  overflow:      hidden;
  display:       flex;
  flex-direction: column;
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
.prog-photo-card:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-4px);
}
.prog-photo-card__img-wrap {
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.prog-photo-card__img-wrap img {
  width:           100%;
  height:          150px;
  object-fit:      cover;
  object-position: center;
  display:         block;
  filter:          brightness(.8) saturate(.9);
  transition:      transform var(--t-slow) var(--ease-out),
                   filter   var(--t-slow) var(--ease-out);
}
.prog-photo-card:hover .prog-photo-card__img-wrap img {
  transform: scale(1.07);
  filter:    brightness(.95) saturate(1.05);
}
.prog-photo-card__img-overlay {
  position:   absolute;
  inset:      0;
  background: linear-gradient(to top, rgba(27,74,90,.85) 0%, rgba(27,74,90,.0) 55%);
  display:    flex;
  align-items: flex-end;
  padding:    var(--sp-3) var(--sp-4);
}
.prog-photo-card__name-overlay {
  font-family:  var(--font-heading);
  font-size:    var(--fs-sm);
  font-weight:  700;
  color:        #fff;
  line-height:  1.25;
}
.prog-photo-card__body {
  padding: var(--sp-4) var(--sp-5) var(--sp-5);
  flex: 1; display: flex; flex-direction: column;
}
.prog-photo-card__desc {
  font-size:   var(--fs-sm);
  color:       var(--c-muted);
  line-height: 1.65;
  flex:        1;
  margin-bottom: var(--sp-4);
}
.prog-photo-card__cta {
  display:        inline-block;
  font-size:      var(--fs-xs);
  font-weight:    700;
  color:          var(--c-accent);
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: .08em;
  border-bottom:  1.5px solid transparent;
  transition:     border-color var(--t-fast) var(--ease-out);
  align-self:     flex-start;
}
.prog-photo-card__cta:hover { border-color: var(--c-accent); }
@media (max-width: 1023px) { .programs-grid-photo { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 639px)  { .programs-grid-photo { grid-template-columns: 1fr; } }

/* ══ 30. Founder grid — 5-card layout ════════════════════════════════════ */
.founder-grid {
  grid-template-columns: repeat(3, 1fr);
}
@media (max-width: 1199px) { .founder-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 767px)  { .founder-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 479px)  { .founder-grid { grid-template-columns: 1fr; } }

/* ══ 31. About — Vision / Mission two-column dark section ════════════════ */
.about-vm-section {
  background: var(--c-primary);
  padding:    var(--sp-16) var(--sp-6);
}
.about-vm-section .gnnls-container { max-width: 1100px; margin: 0 auto; }
.about-vm-section .section-eyebrow {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--c-accent);
  margin-bottom:  var(--sp-8);
}
.vm-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   var(--sp-12);
}
.vm-block {
  border-top: 3px solid var(--c-accent);
  padding-top: var(--sp-6);
}
.vm-block__label {
  display:        block;
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .12em;
  color:          var(--c-accent);
  margin-bottom:  var(--sp-3);
}
.vm-block__heading {
  font-family:   var(--font-heading);
  font-size:     var(--fs-h3);
  font-weight:   700;
  color:         #fff;
  line-height:   1.25;
  margin-bottom: var(--sp-4);
}
.vm-block__text {
  font-size:   var(--fs-sm);
  color:       rgba(255,255,255,.72);
  line-height: 1.8;
}
@media (max-width: 767px) {
  .vm-grid { grid-template-columns: 1fr; gap: var(--sp-8); }
}

/* ══ 32. About — Vand Chakna closing quote section ═══════════════════════ */
.vand-chakna-section {
  padding:    var(--sp-16) var(--sp-6);
  background: var(--c-surface);
  text-align: center;
}
.vand-chakna-section .gnnls-container {
  max-width:  740px;
  margin:     0 auto;
}
.vand-chakna-section .vc-gurmukhi {
  display:       block;
  font-family:   var(--font-heading);
  font-size:     clamp(1.5rem, 3vw, 2.2rem);
  font-style:    italic;
  color:         var(--c-accent);
  margin-bottom: var(--sp-6);
  opacity:       .8;
}
.vand-chakna-section p {
  font-size:     var(--fs-base);
  color:         var(--c-muted);
  line-height:   1.85;
  margin-bottom: var(--sp-4);
}
.vand-chakna-section p:last-child { margin-bottom: 0; }
.vand-chakna-section .vc-emphasis {
  font-family:  var(--font-heading);
  font-size:    var(--fs-h4);
  font-weight:  700;
  color:        var(--c-primary);
  line-height:  1.4;
  margin-top:   var(--sp-6);
  padding-top:  var(--sp-6);
  border-top:   2px solid var(--c-border);
}

/* ══ 33. Elementor-native card adapters ═══════════════════════════════════ */
/*
 * The home page cards are built from real Elementor widgets so the client can
 * edit every photo, heading, paragraph and link. That puts the content inside
 * Elementor's own container/widget wrappers, which arrive with display:flex,
 * their own padding and their own button styling. These rules adapt the card
 * components to that structure. The raw-HTML variants of the same components
 * are still used elsewhere (About page team cards), so the original rules above
 * are left intact rather than rewritten.
 */

/* ── Grids: beat Elementor's .e-con { display:flex } ── */
.programs-grid-photo.e-con,
.story-cards-wrap.e-con,
.founder-grid.e-con {
  display:  grid;
  gap:      var(--sp-6);
  padding:  0;
  width:    100%;
}
.programs-grid-photo.e-con { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }
.story-cards-wrap.e-con    { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }
.founder-grid.e-con        { grid-template-columns: repeat(3, 1fr); margin-top: var(--sp-8); }

/* ── Card shells ── */
.prog-photo-card.e-con,
.story-card.e-con,
.founder-card.e-con {
  display:        flex;
  flex-direction: column;
  padding:        0;
  gap:            0;
  overflow:       hidden;
  background:     var(--c-bg);
  border:         1px solid var(--c-border);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow-sm);
  transition:     box-shadow var(--t-base) var(--ease-out),
                  transform  var(--t-base) var(--ease-out);
}
.prog-photo-card.e-con:hover,
.story-card.e-con:hover,
.founder-card.e-con:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-4px);
}

/* ── Media area: image widget + heading widget stacked ── */
.prog-photo-card__img-wrap.e-con,
.story-card__photo-wrap.e-con,
.founder-card__photo-wrap.e-con {
  position:    relative;
  display:     block;
  overflow:    hidden;
  padding:     0;
  gap:         0;
  flex-shrink: 0;
  width:       100%;
}
.prog-photo-card__img-wrap.e-con img,
.story-card__photo-wrap.e-con img,
.founder-card__photo-wrap.e-con img {
  width:           100%;
  object-fit:      cover;
  object-position: center;
  display:         block;
  transition:      transform var(--t-slow) var(--ease-out),
                   filter    var(--t-slow) var(--ease-out);
}
.prog-photo-card__img-wrap.e-con  img { height: 150px; filter: brightness(.8)  saturate(.9); }
.story-card__photo-wrap.e-con     img { height: 190px; filter: brightness(.88) saturate(.95); }
.founder-card__photo-wrap.e-con   img { height: auto; aspect-ratio: 4 / 5; object-position: center 20%; filter: brightness(.9)  saturate(.95); }

.prog-photo-card.e-con:hover .prog-photo-card__img-wrap img,
.story-card.e-con:hover     .story-card__photo-wrap img,
.founder-card.e-con:hover   .founder-card__photo-wrap img {
  transform: scale(1.07);
  filter:    brightness(1) saturate(1.05);
}

/* The label widget sits over the photo, so it must leave the image's flow. */
.prog-photo-card__name.elementor-widget,
.story-card__badge.elementor-widget,
.founder-card__photo-overlay.elementor-widget {
  position: absolute;
  margin:   0;
  z-index:  2;
}

/* Programme name: gradient scrim across the foot of the photo. */
.prog-photo-card__name.elementor-widget {
  inset:       auto 0 0 0;
  padding:     var(--sp-6) var(--sp-4) var(--sp-3);
  background:  linear-gradient(to top,
                 rgba(27,74,90,.92) 0%,
                 rgba(27,74,90,.72) 45%,
                 rgba(27,74,90,0)  100%);
  pointer-events: none;
}
/*
 * The six programme names read white on that scrim. Two selectors (0,2,0) is
 * what the Elementor kit uses for `.elementor-widget-heading
 * .elementor-heading-title { color: var(--e-global-color-primary) }`, and
 * post-293.css is enqueued after this file — so an equally specific rule here
 * lost the tie on source order and every name was painted #1B4A5A, the exact
 * colour of the scrim behind it. Invisible text, not dark text.
 *
 * Adding .elementor-widget takes this to three selectors, so it wins on
 * specificity and no longer depends on which stylesheet loads last. The shadow
 * is insurance for the pale end of a photograph, not the main contrast — the
 * scrim carries that.
 */
.prog-photo-card__name.elementor-widget .elementor-heading-title {
  font-family:  var(--font-heading);
  font-size:    var(--fs-small);
  font-weight:  700;
  color:        #fff;
  line-height:  1.25;
  margin:       0;
  text-shadow:  0 1px 3px rgba(0,0,0,.45);
}

/* Story badge and committee role: small amber pill, top-left of the photo.
   The wrapper is only a positioner — the pill is the span inside it, so the
   wrapper must stay transparent and shrink to its content. */
.story-card__badge.elementor-widget,
.founder-card__photo-overlay.elementor-widget {
  top:        var(--sp-3);
  left:       var(--sp-3);
  right:      auto;
  bottom:     auto;
  width:      auto;
  height:     auto;
  background: none;
  padding:    0;
  line-height: 0;
}
.story-card__badge span,
.founder-card__photo-overlay span {
  display:        inline-block;
  background:     var(--c-cta-btn);
  color:          #fff;
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding:        4px 10px;
  border-radius:  var(--radius-sm, 4px);
  line-height:    1.4;
}
.story-card__badge p,
.founder-card__photo-overlay p { margin: 0; }

/* ── Card bodies ── */
.prog-photo-card__body.e-con,
.story-card__body.e-con,
.founder-card__body.e-con {
  display:        flex;
  flex-direction: column;
  /* Elementor sets flex-grow on its containers, so the shorthand alone lost and
     the body stopped short of the card foot — leaving a ragged gap that pushed
     each card's link to a different height. The longhand wins and lets the body
     fill, so the links line up across a row whatever the text length. */
  flex-grow:      1 !important;
  flex-basis:     auto;
  gap:            var(--sp-2);
  padding:        var(--sp-5, 1.25rem) var(--sp-6) var(--sp-6);
  width:          100%;
}

.prog-photo-card__desc p,
.story-card__text p,
.founder-card__bio p {
  font-size:     var(--fs-small);
  color:         var(--c-muted);
  line-height:   1.65;
  margin:        0;
}
.prog-photo-card__desc.elementor-widget,
.story-card__text.elementor-widget { flex: 1; }

.story-card__title .elementor-heading-title,
.founder-card__name .elementor-heading-title {
  font-family: var(--font-heading);
  font-size:   var(--fs-h5, 1.125rem);
  font-weight: 700;
  color:       var(--c-primary);
  line-height: 1.3;
  margin:      0;
}
.founder-card__role p {
  font-size:      var(--fs-xs);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color:          var(--c-cta-icon);
  margin:         0;
}

/* ── Card links: strip Elementor's button chrome back to a text link ── */
.prog-photo-card__cta .elementor-button,
.story-card__link .elementor-button {
  display:         inline-block;
  /* The Kit styles .elementor-button from a sheet that loads after this one,
     so the fill has to be forced off rather than merely unset. */
  background-color: transparent !important;
  background-image: none;
  border:          none;
  box-shadow:      none;
  padding:         0 !important;
  min-height:      0;
  border-radius:   0;
  font-size:       var(--fs-xs);
  font-weight:     700;
  color:           var(--c-cta-icon) !important;
  text-transform:  uppercase;
  letter-spacing:  .08em;
  text-decoration: none !important;
  border-bottom:   1.5px solid transparent;
  transition:      border-color var(--t-fast) var(--ease-out),
                   color        var(--t-fast) var(--ease-out);
}
.prog-photo-card__cta .elementor-button:hover,
.story-card__link .elementor-button:hover {
  color:        var(--c-cta-btn) !important;
  border-color: currentColor;
  transform:    none;
  box-shadow:   none;
}
.prog-photo-card__cta.elementor-widget,
.story-card__link.elementor-widget { align-self: flex-start; margin-top: auto; }

/* ── Responsive ── */
@media (min-width: 768px) and (max-width: 1199px) {
  .founder-grid.e-con { grid-template-columns: repeat(6, 1fr); }
  .founder-grid.e-con > .founder-card { grid-column: span 2; }
  .founder-grid.e-con > .founder-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (min-width: 768px) and (max-width: 1199px) {
  .founder-grid.e-con { grid-template-columns: repeat(6, 1fr); }
  .founder-grid.e-con > .founder-card { grid-column: span 2; }
  .founder-grid.e-con > .founder-card:nth-child(4) { grid-column: 2 / span 2; }
}
@media (max-width: 1023px) {
  .programs-grid-photo.e-con,
  .story-cards-wrap.e-con { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px)  {
  .founder-grid.e-con { grid-template-columns: repeat(2, 1fr); }
  .founder-grid.e-con > .founder-card:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    justify-self: center;
    width: calc(50% - var(--sp-3, 12px));
  }
}
@media (max-width: 639px)  {
  .programs-grid-photo.e-con,
  .story-cards-wrap.e-con { grid-template-columns: 1fr; }
}
@media (max-width: 479px)  {
  .founder-grid.e-con { grid-template-columns: 1fr; }
  .founder-grid.e-con > .founder-card:last-child:nth-child(odd) { width: 100%; }
  .founder-card__photo-wrap.e-con img { max-height: 420px; }
}

/* ── Card affordance and touch target ──────────────────────────────────────
 * Two problems the UX audit measured on the card grids:
 *
 * 1. The whole card lifted on hover but only the small link was clickable, so
 *    the card advertised an interaction it did not offer.
 * 2. That link was 121x24px — well under the 44px minimum touch target.
 *
 * Both are solved by stretching the existing link across the card: the entire
 * card becomes the hit area, while the accessibility tree still sees exactly
 * one link with its real text, so keyboard and screen-reader users are
 * unaffected. Cards with no link (committee) keep the default cursor.
 */
.prog-photo-card.e-con,
.story-card.e-con { position: relative; cursor: pointer; }

.prog-photo-card__cta .elementor-button::after,
.story-card__link .elementor-button::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
}

/* Keep the link itself a comfortable target for keyboard focus and for when
   the stretched layer is not in play. */
.prog-photo-card__cta .elementor-button,
.story-card__link .elementor-button {
  min-height:  var(--tap);
  display:     inline-flex;
  align-items: center;
}

/* The focus ring must follow the visible link, not the stretched hit area. */
.prog-photo-card__cta .elementor-button:focus-visible,
.story-card__link .elementor-button:focus-visible {
  outline:        3px solid var(--c-cta-icon);
  outline-offset: 3px;
}

/* Reinforce the hover on the link when anywhere on the card is hovered. */
.prog-photo-card.e-con:hover .prog-photo-card__cta .elementor-button,
.story-card.e-con:hover .story-card__link .elementor-button {
  color:        var(--c-cta-btn) !important;
  border-color: currentColor;
}

/* Elementor sets position:relative on both the widget wrapper and the body
   container, which captured the stretched layer and held it to the link's own
   121x45px box. Making that branch static lets the card be the containing
   block. The media wrapper stays relative — the label overlay anchors to it. */
.prog-photo-card__body.e-con,
.story-card__body.e-con,
.prog-photo-card__desc.elementor-widget,
.story-card__text.elementor-widget,
.story-card__title.elementor-widget,
.prog-photo-card__cta.elementor-widget,
.story-card__link.elementor-widget { position: static; }

/* The scroll-reveal puts transform:translateY on every .e-con and
   .elementor-widget. A transform makes an element the containing block for its
   absolutely positioned descendants, so the widgets inside a card were
   capturing the stretched link and holding it to the link's own box. Revealing
   the card as one unit fixes that, and is the better effect anyway — the card
   animates in whole rather than its parts arriving separately. */
.prog-photo-card .e-con,
.prog-photo-card .elementor-widget,
.story-card .e-con,
.story-card .elementor-widget,
.founder-card .e-con,
.founder-card .elementor-widget {
  opacity:    1 !important;
  transform:  none !important;
  transition: none !important;
}

/* ══ 34. Home hero ════════════════════════════════════════════════════════ */
/*
 * The hero measured 362px tall (46% of an 784px viewport) with its content
 * running to 1492px while every other section is anchored to 1200px, and 10px
 * of top padding. It read as a thin banner rather than an opening statement.
 * This gives it real height, aligns it to the shared column, and layers two
 * soft washes over the flat fill so the block has some depth behind the type.
 */
.hero-home {
  position:   relative;
  min-height: clamp(520px, 76vh, 780px);
  display:    flex;
  align-items: center;
  overflow:   hidden;
}
.hero-home::before {
  content:  '';
  position: absolute;
  inset:    0;
  background:
    radial-gradient(90ch 60ch at 82% 18%, rgba(255,255,255,.09) 0%, rgba(255,255,255,0) 62%),
    radial-gradient(70ch 50ch at 8% 92%,  rgba(193,81,47,.20)  0%, rgba(193,81,47,0)  60%);
  pointer-events: none;
}
.hero-home > * { position: relative; z-index: 1; }

.hero-home__inner.e-con {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--sp-4);
  padding-block:  var(--sp-20);
  max-width:      1200px;
  margin-inline:  auto;
  width:          100%;
}
.hero-home__inner > .elementor-widget { max-width: 60ch; }

/* Scoped to the h1: unqualified this also caught the eyebrow — itself a
   heading widget — and rendered it at 68px teal-on-teal behind the hero. */
.hero-home h1.elementor-heading-title {
  font-size:      clamp(2.6rem, 5.4vw, 4.25rem);
  line-height:    1.05;
  letter-spacing: -0.015em;
  margin:         0;
}
.hero-home__inner > .elementor-widget-text-editor p {
  font-size:   clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.6;
  max-width:   54ch;
}

/* CTAs on one line with a real gap, wrapping only when they must. */
.hero-home__actions.e-con {
  display:   flex;
  flex-flow: row wrap;
  gap:       var(--sp-4);
  padding:   0;
  width:     auto;
  max-width: none;
  margin-top: var(--sp-2);
}
.hero-home__actions .elementor-widget { width: auto; }

/* Quiet credibility line under the buttons — the reassurance a donor looks for
   before clicking, without competing with the headline. */
.hero-home__trust.elementor-widget { margin-top: var(--sp-4); }
.hero-home__trust p {
  font-size:      var(--fs-xs);
  letter-spacing: .04em;
  color:          rgba(255,255,255,.72) !important;
  margin:         0;
}

@media (max-width: 767px) {
  .hero-home { min-height: clamp(440px, 68vh, 620px); }
  .hero-home__inner.e-con { padding-block: var(--sp-16); }
  .hero-home__actions.e-con { width: 100%; }
  .hero-home__actions .elementor-widget { width: 100%; }
  .hero-home__actions .elementor-button { width: 100%; }
}

/* ══ 35. Section rhythm ═══════════════════════════════════════════════════ */
/*
 * The stories and teachings sections both sit on --c-surface and are adjacent,
 * so they merged into one 1,449px beige slab with no visible seam. Alternating
 * the second one restores the light/dark cadence the rest of the page has.
 */
.section-surface + .section-surface { background: var(--c-bg); }

/* The raw-HTML blocks carry no section padding, so they butted straight up
   against their neighbours while every Elementor section had 96px. */
.mission-photo-section,
.split-photo-cta { margin-block: 0; }

/* The eyebrow is a heading widget, so the Kit colours it teal — invisible on
   the dark hero. Same fix as the headings, applied to whatever tag it renders. */
.hero-home .eyebrow .elementor-heading-title,
.page-hero .eyebrow .elementor-heading-title,
.hero-band .eyebrow .elementor-heading-title,
.section-primary .eyebrow .elementor-heading-title,
.impact-strip .eyebrow .elementor-heading-title,
.mission-photo-section .eyebrow .elementor-heading-title,
.split-photo-cta .eyebrow .elementor-heading-title {
  /* On-dark token, same as the rule further down — not --c-accent, which is
     3.31:1 here. Both rules are kept in agreement so neither can be read as
     the intended colour. */
  color:          var(--c-accent-on-dark) !important;
  font-size:      var(--fs-xs);
  font-weight:    700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* Elementor containers default to a column, which stacked the two hero CTAs. */
.hero-home__actions.e-con {
  flex-direction: row !important;
  align-items:    center;
}
@media (max-width: 767px) {
  .hero-home__actions.e-con { flex-direction: column !important; align-items: stretch; }
}

/*
 * The eyebrow is a heading widget, so what paints its text is the Kit's rule on
 * .elementor-heading-title — teal — not the colour set on the .eyebrow wrapper
 * above. Every dark-ground context therefore has to be named HERE as well, or
 * the eyebrow renders teal on teal at 1.0:1 and vanishes.
 *
 * .page-hero and .hero-band were missing from this list until 2026-10-05. The
 * defect was invisible on the gallery page only because a per-widget colour
 * global set in Elementor happened to cover it; regenerating the page removed
 * that global and the eyebrow disappeared. Fixed in CSS so it holds for every
 * page whether or not anyone sets a colour in the editor.
 *
 * --c-accent is 3.31:1 here, below the 4.5:1 floor at 13px. The on-dark token
 * measures 5.16:1 on --c-primary.
 */
.hero-home .eyebrow .elementor-heading-title,
.page-hero .eyebrow .elementor-heading-title,
.hero-band .eyebrow .elementor-heading-title,
.section-primary .eyebrow .elementor-heading-title,
.impact-strip .eyebrow .elementor-heading-title,
.mission-photo-section .eyebrow .elementor-heading-title,
.split-photo-cta .eyebrow .elementor-heading-title {
  color: var(--c-accent-on-dark) !important;
}

/* ══ 36. Mission band (Elementor-native) ══════════════════════════════════ */
/*
 * The band is now real widgets, so the photo is an image widget that has to be
 * lifted out of the flow to sit behind the copy, and the scrim moves onto the
 * section itself rather than a wrapper div that no longer exists.
 */
.mission-photo-section.e-con {
  position:   relative;
  display:    flex;
  align-items: center;
  min-height: clamp(460px, 62vh, 640px);
  padding:    0;
  overflow:   hidden;
  isolation:  isolate;
}

/* The photograph, held behind everything. */
.mission-photo-section__bg.elementor-widget {
  position: absolute;
  inset:    0;
  margin:   0;
  z-index:  0;
  width:    100%;
  height:   100%;
}
.mission-photo-section__bg img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
  /* Dark enough that white type clears 4.5:1 over the brightest part of a
     photograph we have not seen yet — the client's image is unknown at build
     time, so the scrim is sized for the worst case, not the placeholder. */
  filter:     brightness(.42) saturate(.8);
}

/* Teal wash over the photo, so the band belongs to the palette rather than
   whatever colours happen to be in the picture. */
.mission-photo-section.e-con::after {
  content:  '';
  position: absolute;
  inset:    0;
  z-index:  1;
  background:
    linear-gradient(90deg, rgba(27,74,90,.88) 0%, rgba(27,74,90,.62) 48%, rgba(27,74,90,.30) 100%);
  pointer-events: none;
}

.mission-photo-section__inner.e-con {
  position:       relative;
  z-index:        2;
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  gap:            var(--sp-4);
  max-width:      1200px;
  margin-inline:  auto;
  width:          100%;
  padding-block:  var(--sp-20);
}

/* The quote reads as a pull-quote: amber rule, large italic serif. */
.mission-photo-section__inner .mission-quote__text.elementor-widget {
  max-width:    62ch;
  border-left:  3px solid var(--c-accent);
  padding-left: var(--sp-5, 1.25rem);
}
.mission-quote__text p {
  font-family: var(--font-heading);
  font-style:  italic;
  font-size:   clamp(1.35rem, 2.5vw, 2.1rem);
  line-height: 1.38;
  color:       #fff !important;
  margin:      0;
}
.mission-quote__cite p {
  font-size:      var(--fs-small);
  color:          rgba(255,255,255,.80) !important;
  font-style:     normal;
  letter-spacing: .01em;
  margin:         0;
}

/* Same row, real gap — the old raw <a class="btn"> tags got no button styling
   at all because every button rule here targets the Elementor wrapper. */
.mission-photo-section__actions.e-con {
  display:        flex;
  flex-direction: row !important;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            var(--sp-4);
  padding:        0;
  width:          auto;
  max-width:      none;
  margin-top:     var(--sp-2);
}
.mission-photo-section__actions .elementor-widget { width: auto; }

@media (max-width: 767px) {
  .mission-photo-section.e-con { min-height: clamp(400px, 58vh, 540px); }
  .mission-photo-section__inner.e-con { padding-block: var(--sp-16); }
  .mission-photo-section.e-con::after {
    background: linear-gradient(180deg, rgba(27,74,90,.86) 0%, rgba(27,74,90,.72) 100%);
  }
  .mission-photo-section__actions.e-con { flex-direction: column !important; align-items: stretch; width: 100%; }
  .mission-photo-section__actions .elementor-widget,
  .mission-photo-section__actions .elementor-button { width: 100%; }
}

/* The image widget wraps the <img>, so height:100% resolved against a wrapper
   that was not itself constrained — the photo rendered 1008px tall in a 484px
   band and only its top half was visible. Pinning the img to the section makes
   object-position:center crop from the middle, as intended. */
.mission-photo-section__bg.elementor-widget,
.mission-photo-section__bg.elementor-widget > * {
  height: 100%;
}
.mission-photo-section__bg img {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
}

/* ══ 37. Arc photo slider ═════════════════════════════════════════════════ */
/*
 * Five panels on a shallow arc: the active one stands upright and in colour,
 * its neighbours fall back, desaturate and drop slightly, and the panels beyond
 * those sit further back still — so the eye is led to the middle of the strip.
 * The bowed top and bottom edges come from the SVG clip path in functions.php.
 */
.arc-slider.e-con {
  overflow: hidden;
  padding-block: var(--sp-20);
}
.arc-slider__inner.e-con {
  display:        flex;
  flex-direction: column;
  align-items:    center;
  text-align:     center;
  gap:            var(--sp-3);
  max-width:      1200px;
  margin-inline:  auto;
  width:          100%;
  padding:        0 var(--sp-6);
}
.arc-slider__inner .eyebrow,
.arc-slider__inner > .elementor-widget-heading { text-align: center; }

/* The track is wider than the page on purpose — the outer panels are meant to
   run past the edges so the strip reads as continuous. */
/*
 * Three-panel window.
 *
 * The strip itself is a flex row of the five panels; the script slides it so
 * the active panel lands in the middle. The window that clips it to three
 * panels is a wrapper the script inserts (.arc-slider__window) — the clip has
 * to live on an element that is NOT the one being transformed, or it would
 * move with its own content.
 */
.arc-slider__window {
  overflow:      hidden;
  margin-inline: auto;
  width:         100%;
  /*
   * A flex item defaults to min-width:auto, so this could not shrink below the
   * track inside it — the track is width:max-content, which at 375px made the
   * window 551px wide despite width:100%.
   *
   * That mattered beyond the slider: in a column flex container align-items
   * centres each item within the flex LINE, and the line's cross-size is set by
   * the widest item. The oversized window therefore moved the centring axis for
   * its siblings too, pushing the eyebrow and the "Where your dasvandh goes."
   * heading off the right edge of the phone, where the section's overflow:hidden
   * silently clipped them — no horizontal page scroll, just missing words.
   */
  min-width:     0;
}
.arc-slider__track.e-con {
  --arc-gap:       clamp(12px, 1.6vw, 26px);
  display:         flex;
  flex-direction:  row !important;
  align-items:     center;
  justify-content: flex-start;
  gap:             var(--arc-gap);
  width:           max-content;
  max-width:       none;
  transform:       translateX(var(--arc-shift, 0px));
  transition:      transform .7s var(--ease-out, cubic-bezier(.22,1,.36,1));
  padding:         var(--sp-8) 0 0;
}
.arc-slide.e-con {
  position:   relative;
  flex:       0 0 auto;
  width:      clamp(190px, 21vw, 330px);
  aspect-ratio: 3 / 3.4;
  padding:    0;
  gap:        0;
  overflow:   hidden;
  clip-path:  url(#gnnls-arc);
  transform-origin: center center;
  transition: transform .7s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              filter    .7s var(--ease-out, cubic-bezier(.22,1,.36,1)),
              opacity   .7s var(--ease-out, cubic-bezier(.22,1,.36,1));
  transform:  translateY(18px) scale(.80);
  filter:     grayscale(1) brightness(.82);
  opacity:    .55;
}
.arc-slide__img.elementor-widget,
.arc-slide__img.elementor-widget > * { height: 100%; }
.arc-slide__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
}

/* Immediate neighbours of the active panel. */
.arc-slide.is-near {
  transform: translateY(9px) scale(.90);
  filter:    grayscale(.85) brightness(.9);
  opacity:   .8;
}

/* The active panel: upright, full colour, lifted. */
.arc-slide.is-active {
  transform: translateY(0) scale(1);
  filter:    grayscale(0) brightness(1);
  opacity:   1;
  z-index:   3;
}

/*
 * The circular button was removed on request. The link itself is kept as an
 * invisible cover over the active panel: it is where the panel's label comes
 * from (the caption below is rendered from this text), and it keeps the panel
 * clickable through to its programme without any visible control.
 */
.arc-slide__link.elementor-widget {
  position: absolute;
  inset:    0;
  margin:   0;
  z-index:  4;
}
.arc-slide__link .elementor-button {
  display:          block;
  width:            100%;
  height:           100%;
  min-height:       0;
  padding:          0 !important;
  background-color: transparent !important;
  background-image: none;
  border:           none;
  box-shadow:       none;
  border-radius:    0;
  font-size:        0;
  color:            transparent !important;
  cursor:           pointer;
}
.arc-slide__link .elementor-button::before,
.arc-slide__link .elementor-button::after { content: none; }
/* Only the panel in the middle is reachable; the other two are decorative. */
.arc-slide:not(.is-active) .arc-slide__link { pointer-events: none; }
.arc-slide__link .elementor-button:focus-visible {
  outline: 3px solid var(--c-accent);
  outline-offset: -6px;
}

/* Caption strip under the arc — shows the active panel's label. */
.arc-slider__caption {
  margin-top:  var(--sp-6);
  font-family: var(--font-heading);
  font-size:   clamp(1.25rem, 2.2vw, 1.75rem);
  font-weight: 700;
  color:       var(--c-primary);
  min-height:  1.6em;
  transition:  opacity .35s var(--ease-out, ease);
}
.arc-slider__dots {
  display:         flex;
  justify-content: center;
  gap:             0;            /* each button already carries 44px of space */
  margin-top:      var(--sp-2);
}
/*
 * The dot stays 9px to the eye, but the button is a full 44px touch target:
 * a transparent box around a drawn dot. Since the circular panel button was
 * removed, these are the only control on the slider, so they have to be
 * properly tappable rather than a 9px pinpoint.
 */
.arc-slider__dot {
  width: var(--tap); height: var(--tap);
  border: none; padding: 0; cursor: pointer;
  background: none;
  display: inline-grid; place-items: center;
  -webkit-tap-highlight-color: transparent;
}
.arc-slider__dot::before {
  content: '';
  width: 9px; height: 9px; border-radius: 50%;
  background: rgba(27,74,90,.25);
  transition: background var(--t-fast) var(--ease-out, ease), transform var(--t-fast) var(--ease-out, ease);
}
.arc-slider__dot.is-active::before { background: var(--c-primary); transform: scale(1.35); }
.arc-slider__dot:hover::before { background: rgba(27,74,90,.55); }
.arc-slider__dot:focus-visible { outline: 3px solid var(--c-cta-icon); outline-offset: -6px; border-radius: 50%; }

@media (max-width: 767px) {
  .arc-slider.e-con { padding-block: var(--sp-16); }
  .arc-slide.e-con  { width: clamp(150px, 46vw, 240px); }
  .arc-slider__track.e-con { gap: 10px; }
}
@media (prefers-reduced-motion: reduce) {
  .arc-slide.e-con, .arc-slide__link .elementor-button { transition: none; }
}

/* ══ 38. Donate — programme choice cards ═════════════════════════════════ */
/*
 * Replaces the inline-styled radio list. Each card is a real link carrying its
 * programme in the query string, so the choice is functional today rather than
 * waiting on a payment integration.
 */
.donate-choice-grid.e-con {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   var(--sp-4);
  padding:               0;
  width:                 100%;
  margin-block:          var(--sp-6) var(--sp-10);
}
.donate-choice.e-con {
  position:       relative;
  display:        flex;
  flex-direction: column;
  gap:            var(--sp-2);
  padding:        var(--sp-5, 1.25rem) var(--sp-6) var(--sp-6);
  background:     var(--c-bg);
  border:         1px solid var(--c-border);
  border-radius:  var(--radius-lg);
  box-shadow:     var(--shadow-sm);
  cursor:         pointer;
  transition:     box-shadow  var(--t-base) var(--ease-out),
                  transform   var(--t-base) var(--ease-out),
                  border-color var(--t-base) var(--ease-out);
}
.donate-choice.e-con:hover {
  box-shadow:   var(--shadow);
  transform:    translateY(-3px);
  border-color: var(--c-cta-icon);
}
.donate-choice__name .elementor-heading-title {
  font-family: var(--font-heading);
  font-size:   var(--fs-h5, 1.125rem);
  font-weight: 700;
  color:       var(--c-primary);
  line-height: 1.3;
  margin:      0;
}
.donate-choice__desc p {
  font-size:   var(--fs-small);
  color:       var(--c-muted);
  line-height: 1.6;
  margin:      0;
  flex:        1;
}
.donate-choice__desc.elementor-widget { flex: 1; }

/* The whole card is the target; the link keeps its own text for assistive tech. */
.donate-choice__cta.elementor-widget { margin-top: auto; position: static; }
.donate-choice__cta .elementor-button {
  display:          inline-flex;
  align-items:      center;
  min-height:       var(--tap);
  padding:          0 !important;
  background-color: transparent !important;
  background-image: none;
  border:           none;
  box-shadow:       none;
  border-radius:    0;
  font-size:        var(--fs-xs);
  font-weight:      700;
  text-transform:   uppercase;
  letter-spacing:   .08em;
  color:            var(--c-cta-icon) !important;
  text-decoration:  none !important;
  border-bottom:    1.5px solid transparent;
  transition:       color var(--t-fast) var(--ease-out),
                    border-color var(--t-fast) var(--ease-out);
}
.donate-choice__cta .elementor-button::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
}
.donate-choice.e-con:hover .donate-choice__cta .elementor-button {
  color:        var(--c-cta-btn) !important;
  border-color: currentColor;
}
.donate-choice__cta .elementor-button:focus-visible {
  outline: 3px solid var(--c-cta-icon);
  outline-offset: 3px;
}
/* The reveal transform would otherwise become the containing block and trap
   the stretched link inside the card body, as it did on the home page cards. */
.donate-choice .e-con,
.donate-choice .elementor-widget {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

@media (max-width: 767px) {
  .donate-choice-grid.e-con { grid-template-columns: 1fr; }
}

/* ══ 39. Placeholder panels and small print ══════════════════════════════ */
/*
 * Panels awaiting a plugin or an embed (Contact Form 7, the Maps iframe). The
 * placeholder itself must stay visible and marked — GATE 4 refuses to pass
 * while one is open — but the panel around it does not need to be raw HTML
 * with inline styles, so the chrome lives here and the copy stays editable.
 */
.placeholder-panel.elementor-widget {
  background:    var(--c-surface);
  border:        1px solid var(--c-border);
  border-radius: var(--radius);
  padding:       var(--sp-8);
}
.placeholder-panel--centred.elementor-widget { text-align: center; }
.placeholder-panel p { margin: 0 0 var(--sp-3); }
.placeholder-panel p:last-child { margin-bottom: 0; }

/* Was an inline font-size/colour pair on several paragraphs. */
.small-print {
  font-size: var(--fs-xs);
  color:     var(--c-muted);
}
.section-primary .small-print,
.page-hero .small-print { color: rgba(255,255,255,.72); }

/* Was an inline border declaration on the contact page rule. */
.elementor-widget-text-editor hr {
  border:      none;
  border-top:  1px solid var(--c-border);
  margin:      var(--sp-6) 0;
}

/* ══ 40. Split photo / CTA band (Elementor-native) ═══════════════════════ */
.split-photo-cta.e-con {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   0;
  padding:               0;
  align-items:           stretch;
  overflow:              hidden;
}
.split-photo-cta__photo.e-con {
  position: relative;
  padding:  0;
  min-height: clamp(360px, 46vh, 560px);
  overflow: hidden;
}
.split-photo-cta__img.elementor-widget,
.split-photo-cta__img.elementor-widget > * { height: 100%; }
.split-photo-cta__img img {
  position: absolute;
  inset:    0;
  width:    100%;
  height:   100%;
  object-fit: cover;
  object-position: center;
  display:  block;
}
/* Teal veil so the photo sits in the palette and the seam with the dark half
   is not a hard edge. */
.split-photo-cta__photo.e-con::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(27,74,90,.30) 0%, rgba(27,74,90,.70) 100%);
  pointer-events: none;
}

.split-photo-cta__body.e-con {
  display:        flex;
  flex-direction: column;
  align-items:    flex-start;
  justify-content: center;
  gap:            var(--sp-4);
  background:     var(--c-primary);
  padding:        var(--sp-16) clamp(var(--sp-6), 5vw, var(--sp-16));
}
.split-photo-cta__heading .elementor-heading-title {
  font-family: var(--font-heading);
  font-size:   clamp(1.8rem, 3.2vw, 2.7rem);
  line-height: 1.16;
  color:       var(--c-on-primary) !important;
  margin:      0;
}
.split-photo-cta__heading em { font-style: italic; color: var(--c-accent); }
.split-photo-cta__text p {
  color:       rgba(255,255,255,.88) !important;
  line-height: 1.7;
  max-width:   54ch;
  margin:      0;
}

.split-photo-cta__stats.e-con {
  display:               grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap:                   var(--sp-5, 1.25rem) var(--sp-8);
  padding:               0;
  width:                 100%;
  margin-block:          var(--sp-3);
}
.split-photo-cta__stat.e-con { padding: 0; gap: 2px; }
.split-photo-cta__stat-num p {
  font-family: var(--font-heading);
  font-size:   clamp(1.6rem, 2.6vw, 2.25rem);
  font-weight: 700;
  color:       var(--c-accent) !important;
  line-height: 1.1;
  margin:      0;
}
.split-photo-cta__stat-label p {
  font-size: var(--fs-xs);
  color:     rgba(255,255,255,.78) !important;
  letter-spacing: .03em;
  margin: 0;
}

.split-photo-cta__actions.e-con {
  display:        flex;
  flex-direction: row !important;
  flex-wrap:      wrap;
  align-items:    center;
  gap:            var(--sp-4);
  padding:        0;
  width:          auto;
  max-width:      none;
  margin-top:     var(--sp-2);
}
.split-photo-cta__actions .elementor-widget { width: auto; }

@media (max-width: 899px) {
  .split-photo-cta.e-con { grid-template-columns: 1fr; }
  .split-photo-cta__photo.e-con { min-height: clamp(240px, 34vh, 360px); }
  .split-photo-cta__body.e-con  { padding: var(--sp-12) var(--sp-6); }
}
@media (max-width: 479px) {
  .split-photo-cta__stats.e-con { grid-template-columns: 1fr; }
  .split-photo-cta__actions.e-con { flex-direction: column !important; align-items: stretch; width: 100%; }
  .split-photo-cta__actions .elementor-widget,
  .split-photo-cta__actions .elementor-button { width: 100%; }
}

/* ══ 41. Gallery ═════════════════════════════════════════════════════════ */
/*
 * Masonry-ish tile grid. Every tile opens Elementor's own lightbox, so the
 * overlay, keyboard navigation and focus trapping come from the plugin rather
 * than another script — and it picks up whatever caption and alt the client
 * sets on the attachment.
 */
.gallery-grid.e-con {
  display:               grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap:                   var(--sp-4);
  padding:               0;
  width:                 100%;
  margin-top:            var(--sp-8);
}
.gallery-tile.e-con {
  position:      relative;
  padding:       0;
  gap:           0;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: var(--radius);
  background:    var(--c-surface-alt);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
/* Every third tile runs taller, so the grid reads as a composed wall rather
   than a uniform contact sheet. */
.gallery-tile.e-con:nth-child(3n + 1) { aspect-ratio: 4 / 5; }
.gallery-tile.e-con:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-3px);
}
.gallery-tile__img.elementor-widget,
.gallery-tile__img.elementor-widget > * { height: 100%; }
.gallery-tile__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
  cursor:     zoom-in;
  transition: transform var(--t-slow) var(--ease-out),
              filter    var(--t-slow) var(--ease-out);
}
.gallery-tile.e-con:hover .gallery-tile__img img {
  transform: scale(1.06);
  filter:    brightness(1.04);
}
/* Elementor wraps a lightbox image in its own anchor. */
.gallery-tile__img a {
  display: block;
  height:  100%;
  outline-offset: 3px;
}
.gallery-tile__img a:focus-visible {
  outline: 3px solid var(--c-cta-icon);
}

/* A quiet zoom affordance, so the tile reads as openable before hover. */
.gallery-tile.e-con::after {
  content:     '';
  position:    absolute;
  right:       var(--sp-3);
  bottom:      var(--sp-3);
  width:       32px;
  height:      32px;
  border-radius: 50%;
  background:  rgba(27,74,90,.78);
  opacity:     0;
  transform:   scale(.8);
  transition:  opacity var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-out);
  pointer-events: none;
  z-index:     2;
  background-image:
    linear-gradient(#fff, #fff), linear-gradient(#fff, #fff);
  background-size: 12px 2px, 2px 12px;
  background-position: center, center;
  background-repeat: no-repeat;
}
.gallery-tile.e-con:hover::after { opacity: 1; transform: scale(1); }

/* The reveal transform would make each tile the containing block and pin the
   zoom badge to the wrong element, as it did on the home page cards. */
.gallery-tile .e-con,
.gallery-tile .elementor-widget {
  opacity: 1 !important; transform: none !important; transition: none !important;
}

@media (max-width: 767px) {
  .gallery-grid.e-con { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sp-3); }
}

/* Elementor's lightbox chrome, nudged onto the palette. */
.elementor-lightbox .dialog-widget-content { background: rgba(14,45,56,.97); }
.elementor-lightbox .elementor-lightbox-item img { border-radius: var(--radius); }

/* ══ 42. Photo strip (interior pages) ════════════════════════════════════ */
/*
 * The quieter counterpart to the home page arc slider. Interior pages get a
 * band of photographs that open in the same lightbox as the gallery, without
 * motion competing with the page's own content.
 */
.photo-strip__grid.e-con {
  display:               grid;
  grid-template-columns: repeat(4, 1fr);
  gap:                   var(--sp-4);
  padding:               0;
  width:                 100%;
  margin-block:          var(--sp-8) var(--sp-6);
}
.photo-strip__tile.e-con {
  position:      relative;
  padding:       0;
  gap:           0;
  aspect-ratio:  4 / 3;
  overflow:      hidden;
  border-radius: var(--radius);
  background:    var(--c-surface-alt);
  box-shadow:    var(--shadow-sm);
  transition:    box-shadow var(--t-base) var(--ease-out),
                 transform  var(--t-base) var(--ease-out);
}
/* The first tile spans two columns and runs taller, so the band has a focal
   point instead of reading as four equal thumbnails. */
.photo-strip__tile.e-con:first-child {
  grid-column: span 2;
  grid-row:    span 2;
  aspect-ratio: auto;
}
.photo-strip__tile.e-con:hover {
  box-shadow: var(--shadow);
  transform:  translateY(-3px);
}
.photo-strip__img.elementor-widget,
.photo-strip__img.elementor-widget > * { height: 100%; }
.photo-strip__img img {
  width:      100%;
  height:     100%;
  object-fit: cover;
  object-position: center;
  display:    block;
  cursor:     zoom-in;
  transition: transform var(--t-slow) var(--ease-out);
}
.photo-strip__tile.e-con:hover .photo-strip__img img { transform: scale(1.06); }
.photo-strip__img a { display: block; height: 100%; outline-offset: 3px; }
.photo-strip__img a:focus-visible { outline: 3px solid var(--c-cta-icon); }

.photo-strip .e-con,
.photo-strip .elementor-widget {
  opacity: 1 !important; transform: none !important; transition: none !important;
}
/* The reveal still applies to the band as a whole. */
.photo-strip.e-con { opacity: inherit; }

@media (max-width: 899px) {
  .photo-strip__grid.e-con { grid-template-columns: repeat(2, 1fr); }
  .photo-strip__tile.e-con:first-child { grid-column: span 2; grid-row: auto; aspect-ratio: 16 / 9; }
}
@media (max-width: 479px) {
  .photo-strip__grid.e-con { grid-template-columns: 1fr; }
  .photo-strip__tile.e-con:first-child { grid-column: auto; }
}

/* ══ 43. Footer social + legal bar ═══════════════════════════════════════ */
.footer-social {
  display:         flex;
  justify-content: center;
  gap:             var(--sp-3);
  margin-bottom:   var(--sp-6);
}
/* 44x44 hit area even though the mark itself is 20px — the icon is the whole
   affordance here, so it has to be a real touch target. */
.footer-social__link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  width:           var(--tap);
  height:          var(--tap);
  border-radius:   50%;
  color:           rgba(255,255,255,.72);
  background:      rgba(255,255,255,.08);
  text-decoration: none;
  transition:      background var(--t-fast) var(--ease-out),
                   color      var(--t-fast) var(--ease-out);
}
.footer-social__link:hover {
  background: var(--c-cta-btn);
  color:      #fff;
}
.footer-social__link:focus-visible {
  outline:        3px solid var(--c-accent);
  outline-offset: 3px;
  color:          #fff;
}
.footer-social__link svg { display: block; }

.footer-social--pending {
  display:    block;
  text-align: center;
}

.footer-legal {
  display:         flex;
  flex-wrap:       wrap;
  justify-content: space-between;
  align-items:     center;
  gap:             var(--sp-3);
  font-size:       var(--fs-xs);
  color:           rgba(255,255,255,.55);
}
.footer-legal__links { display: flex; flex-wrap: wrap; gap: var(--sp-4); }
/* Was a per-link inline colour on each anchor. */
.footer-legal a {
  color:           rgba(255,255,255,.62);
  text-decoration: none;
  border-bottom:   1px solid transparent;
  transition:      color var(--t-fast) var(--ease-out),
                   border-color var(--t-fast) var(--ease-out);
}
.footer-legal a:hover { color: #fff; border-color: currentColor; }
.footer-legal a:focus-visible {
  outline: 2px solid var(--c-accent);
  outline-offset: 3px;
  color: #fff;
}
.footer-credit { color: rgba(255,255,255,.45); }
.footer-credit a { color: rgba(255,255,255,.62); }

@media (max-width: 767px) {
  .footer-legal { justify-content: center; text-align: center; }
  .footer-legal__links { justify-content: center; }
}

/* ══ 44. Header/footer audit fixes ═══════════════════════════════════════ */
/*
 * Footer column links measured 17 of 19 under 24px tall — far below the 44px
 * touch minimum, and stacked links that small are easy to mis-tap on a phone.
 * Padding gives each one a real hit area without changing how the list reads.
 */
.site-footer a,
.footer-col a {
  display:       inline-block;
  /* 44px is the floor, not the target. Padding alone left these at 42px and the
     legal row at 34px — close enough to look fine and still fail a thumb. */
  min-height:    var(--tap);
  padding-block: 10px;
  line-height:   1.4;
}
.footer-legal a,
.footer-legal__cc {
  display:     inline-flex;
  align-items: center;
  min-height:  var(--tap);
  padding-block: 0;
}
/*
 * Already a 44px circle, so no extra padding — but `.site-footer a` above beats
 * the .footer-social__link rule in section 43 on specificity and resets it to
 * inline-block, which kills the flex centring and drops the 20px mark into the
 * top-left corner of the circle. Restore it here, where it wins.
 */
.site-footer .footer-social__link {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  padding-block:   0;
}

/* Current page marked in the nav. Scoped to menu links: an unscoped
   .site-header selector also caught the logo link and drew the bar there. */
.site-header .gnnls-menu a[aria-current="page"] {
  color:         var(--c-primary);
  font-weight:   700;
  border-bottom: 2px solid var(--c-cta-btn);
}
.nav-drawer .gnnls-menu a[aria-current="page"] {
  color:       var(--c-cta-icon);
  font-weight: 700;
}

/* ══ 45. Theme header/footer (standalone theme) ══════════════════════════ */
/*
 * The header and footer are theme PHP now rather than Elementor containers, so
 * they no longer arrive wrapped in .e-con. These rules cover the markup in
 * header.php and footer.php; the Elementor-era rules above still apply to page
 * content and are left alone.
 */

/* Menus come from wp_nav_menu(), so they are <ul> rather than bare anchors. */
.gnnls-menu {
  display:    flex;
  align-items: center;
  gap:        var(--sp-5, 1.25rem);
  list-style: none;
  margin:     0;
  padding:    0;
}
.gnnls-menu li { margin: 0; }
.site-nav .gnnls-menu a {
  display:         inline-flex;
  align-items:     center;
  min-height:      var(--tap);
  color:           var(--c-primary);
  font-weight:     600;
  font-size:       var(--fs-small);
  text-decoration: none;
  border-bottom:   2px solid transparent;
  transition:      color var(--t-fast) var(--ease-out),
                   border-color var(--t-fast) var(--ease-out);
}
.site-nav .gnnls-menu a:hover { color: var(--c-cta-btn); }
.site-nav .gnnls-menu a:focus-visible {
  outline: 3px solid var(--c-cta-icon);
  outline-offset: 3px;
}

/* The donate item is the primary CTA; the class is set on the menu item. */
.site-nav .gnnls-menu .donate-link > a {
  background:    var(--c-cta-btn);
  color:         var(--c-on-cta);
  padding:       0 var(--sp-5, 1.25rem);
  border-radius: var(--radius);
  border-bottom: none;
}
.site-nav .gnnls-menu .donate-link > a:hover {
  background: var(--c-cta-btn-hover);
  color:      var(--c-on-cta);
}

.gnnls-menu-missing {
  margin: 0; font-size: var(--fs-xs); color: var(--c-muted);
}

/* ── Footer ── */
.site-footer-wrap {
  background: var(--c-primary);
  color:      rgba(255,255,255,.88);
}
.site-footer-wrap h3 {
  color:          var(--c-on-primary);
  font-size:      var(--fs-small);
  font-weight:    700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin:         0 0 var(--sp-4);
}
.site-footer-wrap p,
.site-footer-wrap address { color: rgba(255,255,255,.80); }
.site-footer-wrap a { color: rgba(255,255,255,.80); }
.site-footer-wrap a:hover { color: #fff; }

.footer-grid {
  display:               grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap:                   var(--sp-10);
  padding-block:         var(--sp-16) var(--sp-10);
}
.footer-col .gnnls-menu {
  flex-direction: column;
  align-items:    flex-start;
  gap:            0;
}
.footer-col .gnnls-menu a { display: inline-block; padding-block: 9px; }

.site-logo--footer {
  display:         inline-flex;
  align-items:     center;
  gap:             var(--sp-3);
  text-decoration: none;
  margin-bottom:   var(--sp-4);
}
.site-logo--footer .site-logo__name {
  color: var(--c-on-primary); font-weight: 700;
}
.footer-gurmukhi {
  font-size: var(--fs-small);
  color:     var(--c-accent) !important;
  margin-top: var(--sp-4);
}
.footer-nap { font-style: normal; line-height: 1.9; }

.site-footer {
  border-top:    1px solid rgba(255,255,255,.14);
  padding-block: var(--sp-8);
}

@media (max-width: 1023px) {
  .footer-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-8); }
}
@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr; }
  /* The desktop nav is replaced by the drawer below this width. */
  .site-nav { display: none; }
}
@media (min-width: 768px) {
  .hamburger { display: none; }
}

/* The drawer menu is the same <ul> as the header one, so without this it
   inherited the horizontal row and the items ran off the side of the screen. */
.nav-drawer .gnnls-menu {
  flex-direction: column;
  align-items:    stretch;
  gap:            0;
  width:          100%;
}
.nav-drawer .gnnls-menu a {
  display:         block;
  width:           100%;
  min-height:      var(--tap);
  padding:         var(--sp-4) var(--sp-6);
  font-size:       var(--fs-h5, 1.125rem);
  font-weight:     600;
  color:           var(--c-primary);
  text-decoration: none;
  border-bottom:   1px solid var(--c-border);
}
.nav-drawer .gnnls-menu a:hover,
.nav-drawer .gnnls-menu a:focus-visible { background: var(--c-surface); }
.nav-drawer .gnnls-menu .donate-link > a {
  background:    var(--c-cta-btn);
  color:         var(--c-on-cta);
  border-bottom: none;
  margin:        var(--sp-4) var(--sp-6);
  width:         auto;
  border-radius: var(--radius);
  text-align:    center;
}

/* EN | IT switcher, last item of the primary menu (see functions.php). */
.gnnls-menu .menu-lang {
  display:     flex;
  align-items: center;
  gap:         var(--sp-2, .5rem);
  white-space: nowrap;
}
.gnnls-menu .menu-lang__sep { color: var(--c-muted); }
.gnnls-menu .menu-lang a[aria-current="true"] { font-weight: 700; }
.site-nav .gnnls-menu .menu-lang a { font-weight: 400; }
.site-nav .gnnls-menu .menu-lang a[aria-current="true"] { font-weight: 700; }
.nav-drawer .gnnls-menu .menu-lang {
  padding:       var(--sp-4) var(--sp-6);
  border-bottom: 1px solid var(--c-border);
}
.nav-drawer .gnnls-menu .menu-lang a {
  display:       inline-flex;
  width:         auto;
  padding:       0 var(--sp-2, .5rem);
  border-bottom: none;
  font-weight:   400;
}
.nav-drawer .gnnls-menu .menu-lang a[aria-current="true"] { font-weight: 700; }

/* The custom logo is now a plain <img> inside the .site-logo anchor, so it
   needs its own sizing — the_custom_logo()'s own wrapper is no longer there. */
.site-logo__img {
  display:    block;
  height:     44px;
  width:      auto;
  max-width:  none;
  border-radius: 50%;
}
/* Belt and braces: nothing in the header that is not a nav menu link may draw
   the current-page bar, whatever markup a plugin adds. */
.site-header a:not(.gnnls-menu a)[aria-current="page"],
.site-logo[aria-current="page"],
.custom-logo-link[aria-current="page"] {
  border-bottom: none;
  font-weight:  inherit;
}

/* ══ 46. Audit fixes ═════════════════════════════════════════════════════ */
/*
 * Secondary buttons were rendering as teal text on the PRIMARY terracotta fill
 * — 1.63:1, effectively unreadable. The base button rule sets that fill for all
 * three variants, and the transparent override was being beaten further down
 * the cascade. Forced here so the variant always wins over the shared base.
 */
.btn-secondary .elementor-button {
  background-color: transparent !important;
  background-image: none !important;
  color:            var(--c-primary) !important;
  border-color:     var(--c-primary);
}
.btn-secondary:hover .elementor-button {
  background-color: var(--c-primary) !important;
  color:            var(--c-on-primary) !important;
}
/* On a dark section it inverts instead — see section 24. */
.section-primary .btn-secondary .elementor-button,
.page-hero      .btn-secondary .elementor-button,
.impact-strip   .btn-secondary .elementor-button {
  color:        var(--c-on-primary) !important;
  border-color: rgba(255,255,255,.70);
}
.section-primary .btn-secondary:hover .elementor-button,
.page-hero      .btn-secondary:hover .elementor-button,
.impact-strip   .btn-secondary:hover .elementor-button {
  background-color: rgba(255,255,255,.12) !important;
  color:            var(--c-on-primary) !important;
}

/*
 * The lightbox anchor Elementor wraps around a photo-strip image had no width:
 * it is inline-block and the image inside is absolutely positioned, so it
 * collapsed to 0px and the tiles could not be opened at all.
 */
.photo-strip__img a,
.gallery-tile__img a,
.arc-slide__img a {
  display: block;
  width:   100%;
  height:  100%;
}

/* The Gurmukhi slogan measured 3.31:1 on the teal footer — the accent gold is
   a fill colour, not a text colour on dark. Same lighter gold as the eyebrows. */
.footer-gurmukhi,
.site-logo__slogan { color: var(--c-accent-on-dark) !important; }

/*
 * Correction: the slogan appears twice on different grounds. In the header it
 * sits on white, where the light gold measured 1.87:1 — I had assumed it was
 * always on teal and made it worse. Each copy now takes a colour that suits
 * the ground it is actually on.
 */
.site-header .site-logo__slogan { color: var(--c-muted) !important; }
.site-footer-wrap .footer-gurmukhi,
.site-footer-wrap .site-logo__slogan { color: var(--c-accent-on-dark) !important; }

/*
 * Inline text links used --c-cta-icon (#C1512F), which the tokens note is
 * 4.68:1 on white but only 4.16:1 on --c-surface — under the floor on every
 * surface-coloured section. The darker CTA tone clears both.
 */
.btn-text,
.testo a,
.elementor-widget-text-editor a,
.story-card__text a,
p a:not(.elementor-button):not(.footer-social__link) {
  color: var(--c-cta-btn);
}
.section-primary p a:not(.elementor-button),
.page-hero p a:not(.elementor-button),
.impact-strip p a:not(.elementor-button),
.site-footer-wrap p a:not(.elementor-button) { color: rgba(255,255,255,.88); }

/* Accordion bodies are their own widget, so the inline-link colour above did
   not reach them — FAQ answers still used the 4.16:1 tone. */
.elementor-tab-content a:not(.elementor-button),
.elementor-accordion a:not(.elementor-button) { color: var(--c-cta-btn); }

/*
 * Line length. Body paragraphs ran the full container — measured at 163
 * characters per line on /transparency/, against the 65–75 the design rules
 * ask for. Long measures are tiring to read because the eye loses the start of
 * the next line.
 *
 * Capped by measure rather than pixels so it holds at any font size. Card and
 * caption text already sits well under this, so those are untouched; centred
 * copy keeps its auto margins so it stays centred once the cap applies.
 */
.elementor-widget-text-editor p,
.testo p { max-width: 55ch; }   /* measured: ~71 rendered characters */

.arc-slider__inner .elementor-widget-text-editor p,
.gallery-header .elementor-widget-text-editor p,
.photo-strip .elementor-widget-text-editor p,
[style*="text-align:center"] .elementor-widget-text-editor p,
.elementor-widget-text-editor[class*="center"] p { margin-inline: auto; }

/* These set their own measure deliberately and must not be clipped further. */
.mission-quote__text p,
.split-photo-cta__text p,
.hero-home__inner > .elementor-widget-text-editor p { max-width: none; }
.hero-home__inner > .elementor-widget-text-editor p { max-width: 54ch; }

/* Pull quotes set at display sizes need their own, tighter measure — 55ch at
   a larger font is a much wider line than at body size. */
.vc-emphasis p,
.mission-quote__text p { max-width: 24ch; }
.vc-emphasis p { max-width: 30ch; }

/* ══ 47. Container centring ══════════════════════════════════════════════ */
/*
 * Every page section was pinned to the left edge: .gnnls-container has
 * `margin: 0 auto`, but Elementor sets container margins through its own
 * logical longhands (--margin-inline-start and friends), which beat a plain
 * shorthand. Measured at 1440px: content sat at left:10 with up to 670px of
 * dead space on the right.
 *
 * The parent theme used to centre these, so the problem only surfaced when the
 * site moved to the standalone theme — nothing was centring them any more.
 */
.gnnls-container.e-con,
.e-con.gnnls-container {
  margin-inline: auto !important;
}

/* Elementor's own inner wrapper on boxed containers needs the same. */
.e-con > .e-con-inner {
  margin-inline: auto !important;
}

/* Full-bleed bands stay full width — they centre their own inner box. */
.mission-photo-section.e-con,
.split-photo-cta.e-con,
.arc-slider__track.e-con {
  margin-inline: 0 !important;
}

/*
 * Default measure for section content.
 *
 * Several generators build a section's inner container without the
 * .gnnls-container class, relying on the old parent theme to constrain it.
 * With the standalone theme nothing did, so those pages ran edge to edge —
 * /transparency/ had an h1 1385px wide.
 *
 * Every top-level section's own inner container now takes the page measure and
 * centres, which is what .gnnls-container would have done. Full-bleed bands and
 * the halves of the split CTA opt out below.
 */
.elementor > .e-con > .e-con,
.elementor > .e-con > .e-con-inner {
  max-width:     var(--max-w);
  margin-inline: auto;
}

/* Bands that are meant to span the full width, and the grids inside cards. */
.mission-photo-section > .e-con,
.mission-photo-section > .e-con-inner,
.split-photo-cta > .e-con,
.split-photo-cta > .e-con-inner,
.arc-slider > .e-con,
.arc-slider > .e-con-inner {
  max-width: none;
}
/* The split CTA's two halves fill their grid cells. */
.split-photo-cta__photo.e-con,
.split-photo-cta__body.e-con { max-width: none; margin-inline: 0; }
/* Narrow sections keep their tighter measure. */
.gnnls-container--narrow.e-con { max-width: var(--max-w-narrow) !important; }

/* ══ 48. Cookie consent ══════════════════════════════════════════════════ */
/*
 * A bottom sheet, not a full-screen modal. Nothing on this site needs consent
 * before it can render — no analytics, no embeds, no third-party script — so
 * locking the page behind an overlay would block reading for no benefit. The
 * consent still gates: assets/js/cookie.js withholds the non-essential
 * categories until a choice is made.
 *
 * Fixed, so the banner overlays the page rather than pushing it down: the
 * layout underneath must measure the same with the banner up as without it.
 *
 * Below the skip link's 9999 on purpose — a keyboard user must always be able
 * to reach "Skip to content", and the two never overlap (one top, one bottom).
 */
.gnnls-cc {
  position:   fixed;
  inset:      auto 0 0 0;
  z-index:    9990;
  padding:    var(--sp-4);
  /* Clears the iOS home indicator and Android gesture bar. */
  padding-bottom: calc(var(--sp-4) + env(safe-area-inset-bottom, 0px));
  background: var(--c-surface);
  border-top: 3px solid var(--c-primary);
  box-shadow: 0 -8px 32px rgba(27, 74, 90, .16);
  font-family: var(--font-body);
  animation:  gnnls-cc-in 260ms ease-out both;
}

@keyframes gnnls-cc-in {
  from { transform: translateY(100%); }
  to   { transform: none; }
}

.gnnls-cc__inner {
  max-width:     var(--max-w);
  margin-inline: auto;
}

.gnnls-cc__title {
  margin:      0 0 var(--sp-2);
  font-family: var(--font-heading);
  font-size:   var(--fs-h4);
  line-height: var(--lh-heading);
  color:       var(--c-primary);
}

.gnnls-cc__text {
  margin:      0 0 var(--sp-4);
  /* 70ch keeps the line length inside the 65–75 character band even though the
     banner itself runs the full 1200px measure. */
  max-width:   70ch;
  font-size:   var(--fs-small);
  line-height: var(--lh-body);
  color:       var(--c-text);
}

/*
 * The colour deliberately is NOT set here. The site-wide in-paragraph link rule
 * (`p a:not(...)`) carries higher specificity and paints this terracotta, the
 * same as every other body link — 5.27:1 on this surface, AA pass. Declaring
 * --c-primary here only produced a rule that lost and a link that did not match
 * the rest of the site.
 */
.gnnls-cc__text a {
  text-decoration:       underline;
  text-underline-offset: 2px;
}

/* ── Category rows (shown only after "Choose") ─────────────────────────── */
.gnnls-cc__cats {
  display:               grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap:                   var(--sp-4);
  margin:                0 0 var(--sp-6);
  padding:               var(--sp-4);
  background:            var(--c-bg);
  border:                1px solid var(--c-border);
  border-radius:         var(--radius);
}
.gnnls-cc__cats[hidden] { display: none; }

.gnnls-cc__row {
  display:     flex;
  gap:         var(--sp-3);
  align-items: flex-start;
  /* The whole row is the label, so the 44px target covers the text too, not
     just the 16px box. */
  min-height:  var(--tap);
  cursor:      pointer;
  font-size:   var(--fs-small);
  color:       var(--c-text);
}

.gnnls-cc__row input {
  flex:         0 0 auto;
  width:        20px;
  height:       20px;
  margin-top:   2px;
  accent-color: var(--c-primary);
  cursor:       pointer;
}
/* The necessary category cannot be switched off; say so with the cursor too. */
.gnnls-cc__row input:disabled,
.gnnls-cc__row:has(input:disabled) { cursor: not-allowed; }

.gnnls-cc__row strong { display: block; }

.gnnls-cc__desc {
  display:     block;
  margin-top: 2px;
  font-size:   var(--fs-xs);
  line-height: 1.5;
  color:       var(--c-muted);
}

/* ── Actions ───────────────────────────────────────────────────────────── */
.gnnls-cc__actions {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--sp-3);
}

/*
 * Accept and reject are the same size and sit side by side at the same level.
 * A "reject" that is smaller, greyed out, or hidden behind a second screen is
 * not a free choice, so the only difference between them is fill vs outline.
 */
.gnnls-cc__btn {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  min-height:      var(--tap);
  padding:         var(--sp-3) var(--sp-6);
  box-sizing:      border-box;   /* Elementor sets content-box on buttons */
  border:           2px solid var(--c-primary);
  border-radius:   var(--radius-pill);
  background:      transparent;
  color:           var(--c-primary);   /* 9.66:1 on white, 8.58:1 on surface */
  font-family:     var(--font-body);
  font-size:       var(--fs-small);
  font-weight:     700;
  line-height:     1.2;
  cursor:          pointer;
  transition:      background-color var(--t-fast), color var(--t-fast);
}

.gnnls-cc__btn:hover {
  background: var(--c-primary);
  color:      var(--c-on-primary);
}

.gnnls-cc__btn--primary {
  background: var(--c-primary);
  color:      var(--c-on-primary);     /* 9.66:1 */
}
.gnnls-cc__btn--primary:hover {
  background:   var(--c-primary-hover);
  border-color: var(--c-primary-hover);
}

/* "Choose" opens the detail — a third-order action, so no border. */
.gnnls-cc__btn--quiet {
  border-color:    transparent;
  color:           var(--c-primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}
.gnnls-cc__btn--quiet:hover {
  background:   transparent;
  color:        var(--c-primary-hover);
  border-color: transparent;
}

.gnnls-cc__btn:focus-visible {
  outline:        3px solid var(--c-cta-btn);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  .gnnls-cc { animation: none; }
}

/*
 * The consent trigger in the footer is a <button> for semantics but has to read
 * as the fourth item in the legal link row. Browsers give buttons their own
 * font, background and border, none of which are inherited, so all three are
 * reset here rather than the element being faked with an anchor.
 */
.footer-legal__cc {
  padding:         6px 0;
  border:          0;
  border-bottom:   1px solid transparent;
  background:      none;
  font-family:     inherit;
  font-size:       inherit;
  line-height:     1.4;
  color:           rgba(255, 255, 255, .62);
  cursor:          pointer;
  transition:      color var(--t-fast) var(--ease-out),
                   border-color var(--t-fast) var(--ease-out);
}
.footer-legal__cc:hover { color: #fff; border-color: currentColor; }
.footer-legal__cc:focus-visible {
  outline:        2px solid var(--c-accent);
  outline-offset: 3px;
  color:          #fff;
}

/* ══ 49. Placeholder marker on block-level widgets ═══════════════════════ */
/*
 * .segnaposto is an inline badge — amber fill, dashed border, .85em text. On a
 * counter widget it painted a box around a 69px number, clipped it, and broke
 * the stat grid. The class still has to be there: check-placeholders.php counts
 * it, and it is the one signal GATE 4 has that a figure is unverified.
 *
 * So the badge is suppressed on a counter and replaced with a marker that does
 * not touch the box model — a dashed rule under the stat, plus a small amber
 * "unverified" tag on its own line. The number keeps its size and the grid keeps
 * its rhythm.
 */
.elementor-widget-counter.segnaposto,
.impact-stat.segnaposto {
  background:    none;
  border:        0;
  border-bottom: 2px dashed #FFC107;
  border-radius: 0;
  padding:       0 0 var(--sp-3);
  font-size:     inherit;
  font-weight:   inherit;
  color:         inherit;
}

.elementor-widget-counter.segnaposto::after,
.impact-stat.segnaposto::after {
  content:       'unverified';
  display:       block;
  margin-top:    var(--sp-2);
  font-size:     var(--fs-xs);
  font-weight:   700;
  letter-spacing: .08em;
  text-transform: uppercase;
  /* #FFC107 on the teal strip is 8.9:1; the badge colours were designed for a
     light ground and would be unreadable here. */
  color:         #FFC107;
}

/* ══ 50. Our Impact stat grid ════════════════════════════════════════════ */
/*
 * The counters sat in a wrapping flex row with flex: 1 1 100px. That works for
 * six; at eight the seventh fills the first row and the last one wraps alone and
 * stretches to the full 949px, so "Active programs" read as a separate banner
 * rather than the eighth stat. Labels of different lengths also gave each item a
 * different height, so the baselines never lined up.
 *
 * A fixed four-column grid gives two rows of four, equal columns, and a shared
 * row height. Scoped to .impact-strip.section-pad, which is the combination this
 * page uses — on the home page the two classes sit on different elements, so the
 * home strip is untouched.
 */
.impact-strip.section-pad.e-con {
  display:               grid !important;
  grid-template-columns: repeat(4, 1fr);
  align-items:           start;
  gap:                   var(--sp-8) var(--sp-6);
}

@media (max-width: 1024px) {
  .impact-strip.section-pad.e-con { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 767px) {
  .impact-strip.section-pad.e-con { grid-template-columns: repeat(2, 1fr); }
}

/* The flex basis from the widget settings would otherwise fight the grid. */
.impact-strip.section-pad.e-con > .elementor-element {
  flex:      none;
  min-width: 0;
}

/* ══ 51. Impact counter numbers ══════════════════════════════════════════ */
/*
 * The same wrapper-versus-inner trap as the eyebrow, and found the same way.
 *
 * Section 11 colours .elementor-counter-number-WRAPPER, but the digits live in
 * .elementor-counter-number inside it, which the Elementor Kit colours teal.
 * On the teal impact strip that is 1.0:1 — the numbers were invisible on both
 * the home page and Our Impact, with only the gold "+" suffix showing, so the
 * strip read as a row of plus signs.
 *
 * It went unnoticed because the client had set a per-widget colour global on
 * each counter in Elementor, which covered it. Regenerating those pages dropped
 * the globals and the digits vanished. Fixed here so it holds regardless of what
 * is or is not set in the editor.
 *
 * --c-accent-on-dark is 5.16:1 on --c-primary. The decorative --c-accent would
 * be 3.31:1 — enough for 69px display text, but these are the figures the whole
 * page is built around and they should not sit on the threshold.
 */
.impact-strip .elementor-counter-number,
.impact-strip .elementor-counter-number-prefix,
.impact-strip .elementor-counter-number-suffix {
  color: var(--c-accent-on-dark) !important;
}

/*
 * The label under each figure had the same problem one level down: the Kit
 * paints .elementor-counter-title with --c-secondary (#2E6E5E), which is 1.61:1
 * on the teal strip at 19px. The number was legible and the word under it was
 * not, which is the worse of the two failure modes — a figure with no readable
 * label states nothing. White at 88% matches the body copy used on every other
 * dark section (12.3:1 here).
 */
.impact-strip .elementor-counter-title {
  color: rgba(255, 255, 255, .88) !important;
}

/* ══ 52. Contact details tap targets ═════════════════════════════════════ */
/*
 * The email, phone and PEC links in the NAP block each sit on their own line
 * after a <br>, so they are standalone actions rather than links inside a
 * sentence — WCAG's inline-link exemption does not cover them. They measured
 * 23px tall, which made the email address the hardest thing to tap on the one
 * page whose entire job is getting in touch.
 *
 * Scoped to .contact-nap so it cannot inflate genuine in-sentence links, such
 * as the "email us at …" line in the form column next to it.
 */
.contact-nap a {
  display:     inline-flex;
  align-items: center;
  min-height:  var(--tap);
}

/* ══ 53. Standalone text CTAs ════════════════════════════════════════════ */
/*
 * A paragraph whose entire content is one link is a call to action, not a link
 * inside a sentence, so the inline-link exemption from the minimum target size
 * does not apply to it. "Read our transparency statement →" on /our-impact/
 * measured 23px tall.
 *
 * Marked with a class rather than matched structurally: a selector like
 * `p > a:only-child` also catches a sentence that happens to end in a link,
 * and padding those out would space running text unevenly.
 */
.link-cta a {
  display:        inline-flex;
  align-items:    center;
  min-height:     var(--tap);
  font-weight:    700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* ══ 54. Card body copy at the 16px floor ════════════════════════════════ */
/*
 * These five are reading copy — a card description, a story, a founder's bio, a
 * quote attribution — not labels, and they were set at --fs-small (15px). The
 * floor for body text on a phone is 16px, so each sat just under it on exactly
 * the device where it matters.
 *
 * Raised here rather than by changing --fs-small, because that token is also
 * carrying genuine UI labels — stat labels, counter titles, footer meta — where
 * 15px is correct and where growing the type would push the footer and the stat
 * grid around for no benefit.
 *
 * Applied at every width, not behind a mobile media query: the difference on
 * desktop is one pixel, and a single value is easier to keep right than two.
 * Both the wrapper and its inner <p> are named because Elementor's text widget
 * puts the paragraph inside the classed element.
 */
.prog-photo-card__desc, .prog-photo-card__desc p,
.story-card__text,      .story-card__text p,
.founder-card__bio,     .founder-card__bio p,
.mission-quote__cite,   .mission-quote__cite p,
.donate-choice__desc,   .donate-choice__desc p {
  font-size: 1rem;      /* 16px */
}

/* ══ 55. Arc slider centring on narrow screens ═══════════════════════════ */
/*
 * The slider window is deliberately three panels wide — 551px — which is wider
 * than a 375px phone, and that is the intended look: the outer panels run past
 * the edges so the strip reads as continuous.
 *
 * What was not intended: in a column flex container, align-items centres each
 * child within the flex LINE, and the line's cross-size is the widest child. The
 * oversized window therefore set the centring axis for its siblings at x=310 on
 * a 375px screen, so the eyebrow and the "Where your dasvandh goes." heading
 * were centred on the window rather than on the page and ran off the right edge,
 * where the section's overflow:hidden clipped them. No horizontal page scroll —
 * just words missing on a phone.
 *
 * Two changes, both narrow:
 *   - the text children are stretched to the container width, so they centre on
 *     the page regardless of how wide the window is;
 *   - the window is centred on the container explicitly, so its panels overflow
 *     evenly on both sides instead of only to the right.
 */
.arc-slider__inner.e-con { align-items: stretch; }

.arc-slider__inner > .elementor-widget-heading,
.arc-slider__inner .eyebrow,
.arc-slider__caption { text-align: center; }

/*
 * These two must be sized against the CONTAINER, not the flex line. With
 * align-items:stretch they otherwise inherit the line's 551px cross-size from
 * the window and the caption runs off the right edge exactly as the heading did.
 * A percentage width resolves against the container's content box, so 100% here
 * means the page column, not the window.
 */
.arc-slider__caption,
.arc-slider__dots { width: 100%; }

.arc-slider__dots {
  display:         flex;
  justify-content: center;
}

/* Width and centring are the column's job now; gnnls-slider.js offsets the
   track so the middle panel lands on that centre. */
.arc-slider__window { width: 100%; }

/* ══ 56. Keep cards selectable inside the Elementor editor ═══════════════ */
/*
 * The programme, story and donate cards use a stretched link: the CTA button's
 * ::after is position:absolute; inset:0 over the whole card, so a visitor can
 * click anywhere on the card and not just the small "Donate Now →" text.
 *
 * On the front end that is the behaviour we want. In the Elementor editor it
 * means every click on the card — including on the photograph — lands on that
 * invisible layer and selects the button, so the image widget cannot be reached
 * and its picture cannot be swapped. That is what made the six programme photos
 * look unchangeable.
 *
 * The layer is removed only while the editor is open, the same opt-out the
 * scroll-reveal uses. Nothing about the published page changes.
 */
body.elementor-editor-active .prog-photo-card__cta  .elementor-button::after,
body.elementor-editor-active .story-card__link      .elementor-button::after,
body.elementor-editor-active .donate-choice__cta    .elementor-button::after {
  content: none;
}

/*
 * Decorative veils over photographs must never take a click. They are tints and
 * gradients, not controls, and while they sit above an image widget they block
 * selecting that image in the editor exactly as the stretched link did.
 */
.split-photo-cta__photo::after,
.mission-photo-section__bg,
.prog-photo-card__img-overlay {
  pointer-events: none;
}

/* ══ 57. Slider captions, editable in Elementor ══════════════════════════ */
/*
 * The text under the slider is each slide's own button text — the same string
 * also labels that slide's dot. On the front end that button is an invisible
 * full-slide click target (font-size:0, stretched to inset:0), which is right
 * for visitors and useless for editing: there is nothing to click, so the only
 * way in was the Navigator panel.
 *
 * Inside the editor the button becomes a plain, readable label pinned to the
 * foot of its slide. Click it and Elementor opens its Text field; whatever is
 * typed there becomes the caption under the slider and the dot's aria-label.
 * The published page is untouched — these rules only apply under
 * body.elementor-editor-active.
 */
body.elementor-editor-active .arc-slide__link.elementor-widget {
  inset:   auto 0 0 0;          /* foot of the slide, not the whole of it */
  z-index: 5;
}

body.elementor-editor-active .arc-slide__link .elementor-button {
  display:        block;
  height:         auto;
  padding:        6px 10px !important;
  font-size:      var(--fs-xs);
  font-weight:    700;
  line-height:    1.3;
  text-align:     center;
  color:          #fff !important;
  background-color: rgba(27, 74, 90, .92) !important;
  border-radius:  0;
  /* A dashed edge marks it as an editing aid rather than part of the design. */
  outline:        1px dashed rgba(255, 255, 255, .5);
  outline-offset: -3px;
  cursor:         text;
}

/*
 * Reaching slides four and five while editing.
 *
 * The window deliberately clips the strip to three panels, so two slides are
 * always off-screen. Unfolding the track in the editor was tried and rejected:
 * the slides are sized with a fixed width and wrapping the row collapsed them
 * to zero. Instead the dots stay live — autoplay is off in the editor, so
 * clicking a dot brings that slide to the middle and holds it there, and its
 * caption can then be clicked and edited.
 *
 * The dots are the editing control, so they get a visible hit area.
 */
body.elementor-editor-active .arc-slider__dots {
  padding: var(--sp-2) 0;
}

body.elementor-editor-active .arc-slider__dot {
  cursor: pointer;
  outline: 1px dashed rgba(27, 74, 90, .45);
  outline-offset: 3px;
}


/* contact form */

/* ==========================================================================
   Pro UX/UI Contact Form 7 Styling
   ========================================================================== */
/* ==========================================================================
   GURU NANAK NAAM LEVA SANGAT — Contact Form 7 Tokenized UI Component
   ========================================================================== */

/* Component Card Container */
.gn-form-card {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: var(--sp-8);
  background-color: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  color: var(--c-text);
  font-family: var(--font-body);
}

@media (max-width: 640px) {
  .gn-form-card {
    padding: var(--sp-6);
  }
}

/* Header Section */
.gn-form-header {
  margin-bottom: var(--sp-6);
}

.gn-form-title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  line-height: var(--lh-heading);
  color: var(--c-primary);
  margin: 0 0 var(--sp-2) 0;
  font-weight: 700;
}

.gn-form-subtitle {
  font-size: var(--fs-small);
  line-height: var(--lh-body);
  color: var(--c-muted);
  margin: 0;
}

/* Structural Grid */
.gn-form-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-4);
}

@media (max-width: 640px) {
  .gn-form-grid {
    grid-template-columns: 1fr;
  }
}

/* Field Group & Labels */
.gn-field-group {
  display: flex;
  flex-direction: column;
  margin-bottom: var(--sp-4);
}

.gn-field-group.gn-full {
  grid-column: 1 / -1;
}

.gn-label {
  display: block;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--c-primary);
  margin-bottom: var(--sp-2);
}

.gn-required {
  color: var(--c-cta-btn);
  margin-left: var(--sp-1);
}

.gn-optional {
  font-weight: 400;
  text-transform: none;
  color: var(--c-muted);
}

/* Inputs & Textareas */
.gn-input,
.gn-textarea {
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--c-text);
  background-color: var(--c-surface);
  border: 1px solid var(--c-border-input);
  border-radius: var(--radius);
  transition: border-color var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out),
              background-color var(--t-fast) var(--ease-out);
  box-sizing: border-box;
}

.gn-textarea {
  min-height: 140px;
  resize: vertical;
}

.gn-input::placeholder,
.gn-textarea::placeholder {
  color: var(--c-muted);
  opacity: 0.75;
}

/* Interactive States: Hover & Accessible Focus */
.gn-input:hover,
.gn-textarea:hover {
  background-color: var(--c-surface-alt);
}

.gn-input:focus,
.gn-textarea:focus {
  outline: none;
  background-color: var(--c-bg);
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(27, 74, 90, 0.20);
}

/* Links */
.gn-link {
  color: var(--c-secondary);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color var(--t-fast) var(--ease-out);
}

.gn-link:hover {
  color: var(--c-secondary-hover);
}

/* Checkbox (Acceptance) UX */
.gn-checkbox-group .wpcf7-list-item {
  margin: 0;
}

.gn-checkbox-group label {
  display: flex;
  align-items: center;
  font-size: var(--fs-small);
  color: var(--c-text);
  cursor: pointer;
}

.gn-checkbox-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  margin-right: var(--sp-3);
  accent-color: var(--c-primary);
  border-radius: var(--radius-sm);
  cursor: pointer;
}

/* Form CTA Button */
.gn-form-action {
  margin-top: var(--sp-6);
}

.gn-btn-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: var(--tap);
  padding: var(--sp-3) var(--sp-8);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 700;
  color: var(--c-on-cta);
  background-color: var(--c-cta-btn);
  border: none;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-cta);
  cursor: pointer;
  transition: background-color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out),
              box-shadow var(--t-fast) var(--ease-out);
}

.gn-btn-cta:hover {
  background-color: var(--c-cta-btn-hover);
  box-shadow: 0 6px 18px rgba(168, 69, 36, 0.40);
  transform: translateY(-1px);
}

.gn-btn-cta:active {
  transform: translateY(0);
}

/* CF7 System Response & Validation Messages */
.gn-form-card .wpcf7-not-valid-tip {
  color: var(--c-cta-btn);
  font-size: var(--fs-xs);
  font-weight: 700;
  margin-top: var(--sp-1);
}

.gn-form-card .wpcf7-response-output {
  margin: var(--sp-6) 0 0 0 !important;
  padding: var(--sp-4) !important;
  border-radius: var(--radius) !important;
  font-size: var(--fs-small) !important;
  line-height: var(--lh-body) !important;
  font-family: var(--font-body) !important;
}

.gn-form-card .wpcf7-form.sent .wpcf7-response-output {
  background-color: var(--c-surface) !important;
  border: 2px solid var(--c-secondary) !important;
  color: var(--c-secondary) !important;
}

.gn-form-card .wpcf7-form.failed .wpcf7-response-output,
.gn-form-card .wpcf7-form.invalid .wpcf7-response-output {
  background-color: var(--c-surface) !important;
  border: 2px solid var(--c-cta-btn) !important;
  color: var(--c-cta-btn) !important;
}

.gn-form-card .wpcf7-spinner {
  margin-left: var(--sp-3);
}