.elementor-kit-5{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-5 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS */html {
  scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

[id] {
  scroll-margin-top: 5rem;
}

:root {
  /* === BRAND COLORS (exact from guidelines) === */
  --pa-color-primary: #073349;          /* Navy Blue — primary authority, headings, dark sections */
  --pa-color-primary-600: #05283A;      /* Darker navy variant */
  --pa-color-primary-400: #1A4A63;      /* Lighter navy for accents/hovers */

  /* Beige — main warm accent (harmonious with navy) */
  --pa-color-accent: #b78e69;
  --pa-color-accent-700: #8B6648;
  --pa-color-beige: #b78e69;
  --pa-color-gold: #b78e69;             /* Alias for backward/royal continuity in comments */

  /* Noble Gold now unified with official brand beige (#b78e69) for full consistency across header and hero */
  --pa-color-noble-gold: #b78e69;
  --pa-color-noble-gold-dark: #8B6648;

  /* Soft Grey — neutrals, borders, subtle alts */
  --pa-color-soft-grey: #d0d8dd;

  /* Support (keep minimal green for environment/CELI if needed; prioritize brand palette) */
  --pa-color-green: #14532D;            /* Retained for sustainability accents only */

  /* Text & Neutrals (high contrast on navy/beige) */
  --pa-color-text: #0F172A;
  --pa-color-text-muted: #334155;
  --pa-color-text-light: #475569;
  --pa-color-text-inverse: #F8FAFC;

  --pa-color-white: #FFFFFF;
  --pa-color-bg: #F8F5F0;               /* Warm off-white base (classic European feel; harmonizes with beige) */
  --pa-color-surface: #FFFFFF;
  --pa-color-surface-alt: #F1EDE6;      /* Warm subtle (can mix with soft grey) */
  --pa-color-surface-dark: #073349;     /* Official Navy for dark sections/hero */

  --pa-color-border: #E2D9C9;
  --pa-color-border-strong: #C9BBA3;    /* Can lean toward soft grey in practice */

  /* Success / Impact */
  --pa-color-success: #14532D;

  /* === TYPOGRAPHY (Brand Guidelines) === */
  --pa-font-sans: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; /* Body + UI for readability */
  --pa-font-serif: 'Cinzel', Georgia, "Times New Roman", Times, serif; /* Official: for texts, phrases, headings + motto (nobility & seriousness). Lucia BT cursive avoided on web for legibility. */

  /* Type scale (consistent with foundation) */
  --pa-font-size-xs: 0.75rem;
  --pa-font-size-sm: 0.875rem;
  --pa-font-size-base: 1rem;
  --pa-font-size-md: 1.125rem;
  --pa-font-size-lg: 1.25rem;
  --pa-font-size-xl: 1.5rem;
  --pa-font-size-2xl: 1.875rem;
  --pa-font-size-3xl: 2.25rem;
  --pa-font-size-4xl: 3rem;

  --pa-line-height-tight: 1.15;
  --pa-line-height-snug: 1.3;
  --pa-line-height-normal: 1.65;
  --pa-line-height-relaxed: 1.8;

  --pa-font-weight-normal: 400;
  --pa-font-weight-medium: 500;
  --pa-font-weight-semibold: 600;
  --pa-font-weight-bold: 700;

  --pa-letter-spacing-tight: -0.025em;
  --pa-letter-spacing-normal: 0;
  --pa-letter-spacing-wide: 0.02em;

  /* Spacing (foundation rhythm) */
  --pa-space-1: 0.25rem;
  --pa-space-2: 0.5rem;
  --pa-space-3: 0.75rem;
  --pa-space-4: 1rem;
  --pa-space-5: 1.25rem;
  --pa-space-6: 1.5rem;
  --pa-space-8: 2rem;
  --pa-space-10: 2.5rem;
  --pa-space-12: 3rem;
  --pa-space-16: 4rem;
  --pa-space-20: 5rem;
  --pa-space-24: 6rem;

  /* Layout */
  --pa-container-max-width: 1200px;
  --pa-container-wide: 1400px;
  --pa-container-narrow: 820px;

  /* Elevation & Shape — restrained, premium */
  --pa-radius-sm: 4px;
  --pa-radius-md: 8px;
  --pa-radius-lg: 12px;
  --pa-radius-xl: 16px;
  --pa-radius-full: 9999px;

  --pa-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.04);
  --pa-shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.08), 0 2px 4px -2px rgb(0 0 0 / 0.06);
  --pa-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.06);

  /* Motion */
  --pa-transition-fast: 120ms ease;
  --pa-transition-base: 220ms ease;
  --pa-transition-slow: 380ms ease;

  /* Z */
  --pa-z-sticky: 1020;
  --pa-z-modal: 1040;
}

/* ============================================
   BASE — Typography, links, containers, sections
============================================ */
html, body, .pa-section, .pa-container, .pa-btn, .elementor-widget-html {
  font-family: var(--pa-font-sans);
}

.pa-root,
[class^="pa-"] {
  color: var(--pa-color-text);
  line-height: var(--pa-line-height-normal);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Headings — confident, clear hierarchy (Cinzel serif for official nobility per Brand Guidelines; motto also uses this for readability) */
.pa-root h1, [class^="pa-"] h1, .pa-h1,
.pa-root h2, [class^="pa-"] h2, .pa-h2,
.pa-root h3, [class^="pa-"] h3, .pa-h3,
.pa-root h4, [class^="pa-"] h4, .pa-h4 {
  font-family: var(--pa-font-serif);
}

.pa-root h1, [class^="pa-"] h1, .pa-h1 {
  font-size: var(--pa-font-size-4xl);
  line-height: var(--pa-line-height-tight);
  font-weight: var(--pa-font-weight-bold);
  letter-spacing: var(--pa-letter-spacing-tight);
  color: var(--pa-color-primary);
  margin-block: 0  var(--pa-space-6);
}

.pa-root h2, [class^="pa-"] h2, .pa-h2 {
  font-size: var(--pa-font-size-3xl);
  line-height: var(--pa-line-height-snug);
  font-weight: var(--pa-font-weight-semibold);
  letter-spacing: var(--pa-letter-spacing-tight);
  color: var(--pa-color-primary);
  margin-block: 0 var(--pa-space-5);
}

.pa-root h3, [class^="pa-"] h3, .pa-h3 {
  font-size: var(--pa-font-size-2xl);
  line-height: var(--pa-line-height-snug);
  font-weight: var(--pa-font-weight-semibold);
  color: var(--pa-color-primary);
  margin-block: 0 var(--pa-space-4);
}

.pa-root h4, [class^="pa-"] h4, .pa-h4 {
  font-size: var(--pa-font-size-xl);
  font-weight: var(--pa-font-weight-semibold);
  color: var(--pa-color-primary);
  margin-block: 0 var(--pa-space-3);
}

/* Body text, links */
p, .pa-text {
  font-size: var(--pa-font-size-base);
  line-height: var(--pa-line-height-relaxed);
  color: var(--pa-color-text-muted);
  margin-block: 0 0;
}

a {
  color: var(--pa-color-accent);
  text-decoration: none;
  transition: color var(--pa-transition-base);
}
a:hover { color: var(--pa-color-primary); }
a:focus-visible {
  outline: 2px solid var(--pa-color-accent);
  outline-offset: 3px;
}

/* Motto / quote styling 
   Using Cinzel (official serif) for nobility and good web readability.
   (Guidelines specify Lucia BT cursive for prominence, but it is intentionally not used — client request: hard to read on website.)
*/
.pa-motto,
.pa-hero__motto {
  font-family: var(--pa-font-serif);
  font-style: italic;
  color: var(--pa-color-primary);
  font-size: var(--pa-font-size-lg);
  line-height: 1.4;
  letter-spacing: 0.01em;
}

/* Hero motto larger for impact */
.pa-hero__motto {
  font-size: 1.15rem;
}

/* Containers & Sections */
.pa-container {
  max-width: var(--pa-container-max-width);
  margin-inline: auto;
  padding-inline: 1.5rem;
}

.pa-section {
  padding-block: 5rem;
}
.pa-section--dense {
  padding-block: 3.5rem;
}
.pa-section--dark {
  background-color: var(--pa-color-surface-dark);
  color: var(--pa-color-text-inverse);
}
.pa-section--dark h2,
.pa-section--dark h3 {
  color: var(--pa-color-text-inverse);
}
.pa-section--alt {
  background-color: var(--pa-color-surface-alt);
}

/* ============================================
   BUTTONS — pa-btn (primary Beige accent #b78e69 per official Brand Guidelines — harmonious with Navy)
============================================ */
.pa-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 1.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  line-height: 1;
  border-radius: var(--pa-radius-md);
  text-decoration: none;
  transition: all var(--pa-transition-base);
  white-space: nowrap;
  border: 2px solid transparent;
  cursor: pointer;
  user-select: none;
}

.pa-btn--primary {
  background-color: var(--pa-color-accent);
  color: var(--pa-color-white);
  border-color: var(--pa-color-accent);
}
.pa-btn--primary:hover {
  background-color: var(--pa-color-accent-700);
  border-color: var(--pa-color-accent-700);
  transform: translateY(-1px);
  box-shadow: var(--pa-shadow-md);
}

.pa-btn--secondary {
  background-color: transparent;
  color: var(--pa-color-primary);
  border-color: var(--pa-color-primary);
}
.pa-btn--secondary:hover {
  background-color: var(--pa-color-primary);
  color: var(--pa-color-white);
}

.pa-btn--ghost {
  background-color: transparent;
  color: var(--pa-color-text-inverse);
  border-color: rgba(255,255,255,0.65);
}
.pa-btn--ghost:hover {
  background-color: rgba(255,255,255,0.12);
  border-color: var(--pa-color-white);
}

.pa-btn--large {
  padding: 1.05rem 2.25rem;
  font-size: 1.05rem;
}

.pa-btn--small {
  padding: 0.6rem 1.25rem;
  font-size: 0.875rem;
}

/* ============================================
   HEADER (light elegant with sticky)
============================================ */
.pa-header {
  position: sticky;
  top: 0;
  z-index: var(--pa-z-sticky);
  background: rgba(255, 255, 255, 0.96);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--pa-color-border);
  font-size: 0.95rem;
}

.pa-header .pa-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 72px;
  padding-block: 0.5rem;
}

.pa-header__logo {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 1.35rem;
  letter-spacing: -0.02em;
  color: var(--pa-color-primary);
  text-decoration: none;
  flex-shrink: 0;
}
.pa-header__logo span {
  color: var(--pa-color-accent);
}
.pa-header__logo img {
  height: 32px;
  width: auto;
  display: block;
}

.pa-header__desktop {
  display: flex;
  align-items: center;
  gap: 2rem;
}

.pa-header__nav ul {
  display: flex;
  gap: 1.75rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.pa-header__nav a {
  color: var(--pa-color-text-muted);
  font-weight: 500;
  padding-block: 0.25rem;
  transition: color var(--pa-transition-fast);
}
.pa-header__nav a:hover {
  color: var(--pa-color-primary);
}

.pa-header__cta {
  font-size: 0.875rem;
  padding: 0.65rem 1.35rem;
}

.pa-header__toggle {
  display: none;
  background: none;
  border: none;
  color: var(--pa-color-primary);
  cursor: pointer;
  padding: 0.5rem;
  min-width: 44px;
  min-height: 44px;
  align-items: center;
  justify-content: center;
  font-size: 1.75rem;
  line-height: 1;
  border-radius: var(--pa-radius-sm);
  transition: background var(--pa-transition-fast);
}

.pa-header__toggle:hover {
  background: var(--pa-color-surface-alt);
}

.pa-header__toggle:focus-visible {
  outline: 2px solid var(--pa-color-accent);
  outline-offset: 2px;
}

/* Hamburger icon states */
.pa-header__toggle-open,
.pa-header__toggle-close {
  display: block;
  line-height: 1;
}

.pa-header__toggle-close {
  display: none;
}

.pa-header.is-open .pa-header__toggle-open {
  display: none;
}

.pa-header.is-open .pa-header__toggle-close {
  display: block;
}

.pa-header__mobile {
  display: none;
  background: var(--pa-color-white);
  border-top: 1px solid var(--pa-color-border);
  padding: 0.5rem 1.5rem 1rem;
  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.08);
}

/* Animation for smartphone-friendly feel */
.pa-header.is-open .pa-header__mobile {
  display: block;
  animation: paMobileMenuOpen 0.22s ease forwards;
}

@keyframes paMobileMenuOpen {
  from {
    opacity: 0;
    transform: translateY(-6px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pa-header__mobile ul {
  list-style: none;
  margin: 0 0 0.75rem;
  padding: 0.25rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.pa-header__mobile a {
  color: var(--pa-color-text-muted);
  font-weight: 500;
  display: block;
  padding: 0.6rem 0.75rem;   /* generous tap target for smartphone */
  border-radius: var(--pa-radius-sm);
  transition: color var(--pa-transition-fast), background var(--pa-transition-fast);
}

.pa-header__mobile a:hover,
.pa-header__mobile a:active {
  color: var(--pa-color-primary);
  background: var(--pa-color-surface-alt);
}

.pa-header__mobile .pa-btn {
  display: block;
  width: 100%;
  text-align: center;
  margin-top: 0.5rem;
  padding: 0.7rem 1rem;
  font-size: 0.95rem;
}

@media (max-width: 768px) {
  .pa-header__desktop { display: none; }
  .pa-header__toggle { display: flex; }   /* ensure visible + flex centered for the icon */

  /* Smartphone tweaks for header */
  .pa-header .pa-container {
    min-height: 60px;
    padding-block: 0.25rem;
  }

  .pa-header__logo {
    font-size: 1.2rem;
  }

  .pa-header__logo img {
    height: 28px;
  }

  .pa-header__toggle {
    font-size: 1.8rem;
    min-width: 48px;
    min-height: 48px;
  }
}

/* ============================================
   HERO (Navy background per official brand #073349)
============================================ */
.pa-hero {
  position: relative;
  min-height: 88vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--pa-color-primary);
  color: var(--pa-color-text-inverse);
  border-bottom: 5px solid var(--pa-color-accent);
}

.pa-hero__bg {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(10, 31, 68, 0.88), rgba(10, 31, 68, 0.94)),
    url("https://picsum.photos/id/1016/2000/1200");
  background-size: cover;
  background-position: center 35%;
  z-index: 1;
  opacity: 0.85;
}

.pa-hero .pa-container {
  position: relative;
  z-index: 2;
  max-width: 860px;
  padding-block: 4rem 3rem;
}

.pa-hero__content {
  text-align: center;
}

.pa-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: var(--pa-radius-full);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  margin-bottom: 1.25rem;
  color: var(--pa-color-accent);
}

.pa-badge__dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: var(--pa-radius-full);
  background: var(--pa-color-accent);
  flex-shrink: 0;
}

.pa-hero__title {
  font-size: clamp(2.6rem, 5.8vw, 3.6rem);
  line-height: 1.05;
  font-weight: 700;
  letter-spacing: -0.04em;
  color: #fff;
  margin-bottom: 1.25rem;
}
.pa-hero__title .pa-accent {
  color: var(--pa-color-accent);
  display: block;
}

.pa-hero__subtitle {
  font-size: 1.15rem;
  line-height: 1.55;
  max-width: 52ch;
  color: #ffffff;
  margin-bottom: 2rem;
  margin-inline: auto;
}

.pa-hero__actions {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
}

.pa-hero__logo-wrap {
  text-align: center;
  margin-top: 2.5rem;
  margin-bottom: 2rem;
}

.pa-hero__logo {
  max-width: 220px;
  width: 100%;
  height: auto;
  display: inline-block;
}

/* Hero buttons now use the exact same color as the header primary button for full consistency */
.pa-hero .pa-btn--primary {
  background-color: var(--pa-color-accent);
  border-color: var(--pa-color-accent);
  color: #fff;
}
.pa-hero .pa-btn--primary:hover {
  background-color: var(--pa-color-accent-700);
  border-color: var(--pa-color-accent-700);
}

.pa-hero__motto {
  margin-top: 3rem;
  font-family: var(--pa-font-serif);
  font-size: 1.05rem;
  color: #f8f5f0;
  max-width: 42ch;
}

/* ============================================
   CARDS & GRIDS (pillars, projects, pathways)
============================================ */
.pa-grid {
  display: grid;
  gap: 1.5rem;
}
.pa-grid-2 { grid-template-columns: repeat(2, 1fr); }
.pa-grid-3 { grid-template-columns: repeat(3, 1fr); }
.pa-grid-4 { grid-template-columns: repeat(4, 1fr); }

@media (max-width: 1024px) {
  .pa-grid-3, .pa-grid-4 { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .pa-grid-2, .pa-grid-3, .pa-grid-4 { grid-template-columns: 1fr; }
}

.pa-card {
  background: var(--pa-color-surface);
  border: 1px solid var(--pa-color-border);
  border-radius: var(--pa-radius-lg);
  padding: 1.75rem;
  transition: transform var(--pa-transition-base), box-shadow var(--pa-transition-base);
  height: 100%;
  display: flex;
  flex-direction: column;
}
.pa-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--pa-shadow-md);
}

.pa-card__icon {
  width: 42px;
  height: 42px;
  color: var(--pa-color-accent);
  margin-bottom: 1rem;
  flex-shrink: 0;
}

/* Image support for larger visual cards (used in Get Involved section) */
.pa-card__image {
  margin: -1.75rem -1.75rem 1rem -1.75rem;
  border-radius: var(--pa-radius-lg) var(--pa-radius-lg) 0 0;
  overflow: hidden;
}
.pa-card__image img {
  width: 100%;
  height: 200px;
  object-fit: cover;
  display: block;
}

.pa-card__title {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--pa-color-primary);
  margin-bottom: 0.65rem;
}

.pa-card__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pa-color-text-muted);
  flex: 1;
}

.pa-card__meta {
  font-size: 0.8rem;
  color: var(--pa-color-text-light);
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--pa-color-border);
}

/* Project specific cards */
.pa-project-card .pa-card__title {
  font-size: 1.1rem;
}
.pa-project-card .pa-card__text {
  font-size: 0.92rem;
}

/* Pillar / focus cards on dark */
.pa-section--dark .pa-card {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.92);
}
.pa-section--dark .pa-card__title {
  color: #fff;
}

/* ============================================
   PILLARS (for mission / focus areas)
============================================ */
.pa-pillar {
  background: var(--pa-color-surface);
  border: 1px solid var(--pa-color-border);
  border-radius: var(--pa-radius-lg);
  padding: 1.85rem 1.6rem;
  text-align: left;
}
.pa-pillar__icon {
  width: 36px;
  height: 36px;
  color: var(--pa-color-accent);
  margin-bottom: 1rem;
}
.pa-pillar__title {
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
  color: var(--pa-color-primary);
}
.pa-pillar__text {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--pa-color-text-muted);
}

/* ============================================
   FOOTER
============================================ */
.pa-footer {
  background: var(--pa-color-primary);
  color: rgba(255,255,255,0.9);
  padding-block: 3.5rem 2rem;
  font-size: 0.9rem;
}
.pa-footer a {
  color: rgba(255,255,255,0.8);
}
.pa-footer a:hover {
  color: var(--pa-color-gold);
}

.pa-footer__grid {
  display: grid;
  grid-template-columns: 2fr 1fr;
  gap: 3rem;
}
@media (max-width: 768px) {
  .pa-footer__grid { grid-template-columns: 1fr; gap: 2rem; }
}

.pa-footer__brand-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.pa-footer__brand {
  font-weight: 700;
  letter-spacing: 1px;
  font-size: 0.95rem;
  color: #fff;
}
.pa-footer__tag {
  font-size: 0.7rem;
  letter-spacing: 2px;
  color: var(--pa-color-gold);
  text-transform: uppercase;
}

.pa-footer__text {
  max-width: 42ch;
  opacity: 0.85;
  line-height: 1.55;
}

.pa-footer__links-title {
  font-size: 0.75rem;
  letter-spacing: 1.5px;
  font-weight: 600;
  color: var(--pa-color-gold);
  margin-bottom: 0.85rem;
  text-transform: uppercase;
}
.pa-footer__links {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.pa-footer__bottom {
  margin-top: 3rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  font-size: 0.8rem;
  opacity: 0.75;
}
.pa-footer__bottom-right {
  text-align: right;
}

.pa-footer__family-link {
  margin-top: 0.75rem;
  font-size: 0.8rem;
  opacity: 0.7;
}

.pa-footer__copyright-note {
  margin-left: 1rem;
  display: inline-block;
}

@media (max-width: 768px) {
  .pa-footer__bottom-right {
    text-align: left;
  }

  .pa-footer__copyright-note {
    margin-left: 0;
    display: block;
    margin-top: 0.5rem;
  }
}

/* Preview-only: static header in index.html (production uses sticky) */
.pa-header--preview-static {
  position: static;
}

/* ============================================
   BADGES, EYEBROWS, INTRO TEXT
============================================ */
.pa-eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--pa-color-accent);
  margin-bottom: 0.6rem;
}

.pa-intro {
  font-size: 1.05rem;
  max-width: 68ch;
  color: var(--pa-color-text-muted);
}

/* ============================================
   STORY / ABOUT
============================================ */
.pa-story__intro {
  margin-bottom: 2.25rem;
}

.pa-story__block {
  margin-bottom: 2.75rem;
}

.pa-story__mission-lead {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--pa-color-text);
  max-width: 70ch;
}

.pa-text--spaced {
  margin-top: 0.75rem;
}

.pa-text--emphasis {
  font-weight: 500;
}

.pa-vision-box {
  margin-bottom: 2.75rem;
  background: var(--pa-color-surface-alt);
  padding: 1.75rem 2rem;
  border-radius: var(--pa-radius-lg);
  border-left: 5px solid var(--pa-color-accent);
}

.pa-vision-box .pa-motto {
  font-size: 1.3rem;
  margin: 0.6rem 0 0.9rem;
}

.pa-vision-box .pa-text {
  max-width: 62ch;
}

.pa-story__grid {
  gap: 2.25rem;
  margin-bottom: 2rem;
}

.pa-eyebrow--spaced {
  margin-bottom: 1rem;
}

/* ============================================
   GET INVOLVED
============================================ */
.pa-involve .pa-grid-3 {
  margin-top: 2rem;
}

.pa-card__action {
  margin-top: 1rem;
}

.pa-involve__note {
  text-align: center;
  margin-top: 2.5rem;
  font-size: 0.95rem;
  color: var(--pa-color-text-light);
}

/* ============================================
   CONTACT INTRO
============================================ */
.pa-contact-intro {
  padding-bottom: 2.5rem;
}

.pa-container--narrow {
  max-width: 860px;
}

.pa-contact-intro__inner {
  text-align: center;
}

.pa-contact-intro .pa-h2 {
  margin-bottom: 0.75rem;
}

.pa-intro--narrow {
  max-width: 58ch;
  margin-inline: auto;
}

.pa-form .field-group--spaced {
  margin-top: 1rem;
}

/* ============================================
   BEAUTIFUL FORM STYLING (for Elementor Form widget + static preview)
   Premium, trustworthy, brand-aligned look using pa- tokens.
   Works for both Elementor native forms and the demo form in index.html.
   Features: elegant top accent bar, refined inputs with hover + focus states
   using official beige accent, custom select arrow, good spacing, and
   consistent premium card treatment.
============================================ */
.pa-contact-intro + .elementor-widget-form .elementor-form,
.elementor-widget-form .elementor-form,
.pa-form {
  background: var(--pa-color-surface);
  border: 1px solid var(--pa-color-border);
  border-radius: var(--pa-radius-lg);
  padding: 2.25rem 2rem 2rem;
  box-shadow: var(--pa-shadow-md);
  position: relative;
}

/* Subtle top accent line for premium feel */
.pa-contact-intro + .elementor-widget-form .elementor-form::before,
.elementor-widget-form .elementor-form::before,
.pa-form::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(to right, var(--pa-color-accent), var(--pa-color-accent-700));
  border-radius: var(--pa-radius-lg) var(--pa-radius-lg) 0 0;
}

.elementor-form .elementor-field-group,
.pa-form .field-group {
  margin-bottom: 1.25rem;
}

.elementor-form label,
.pa-form label {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--pa-color-text);
  margin-bottom: 0.4rem;
  display: block;
}

.elementor-form input[type="text"],
.elementor-form input[type="email"],
.elementor-form input[type="tel"],
.elementor-form textarea,
.elementor-form select,
.pa-form input[type="text"],
.pa-form input[type="email"],
.pa-form input[type="tel"],
.pa-form textarea,
.pa-form select {
  width: 100%;
  padding: 0.9rem 1.1rem;
  font-size: 1rem;
  line-height: 1.4;
  border: 1px solid var(--pa-color-border-strong);
  border-radius: var(--pa-radius-md);
  background: #fff;
  color: var(--pa-color-text);
  transition: border-color var(--pa-transition-base), box-shadow var(--pa-transition-base);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.03) inset;
}

.elementor-form input:hover,
.elementor-form textarea:hover,
.elementor-form select:hover,
.pa-form input:hover,
.pa-form textarea:hover,
.pa-form select:hover {
  border-color: var(--pa-color-accent);
}

.elementor-form input:focus,
.elementor-form textarea:focus,
.elementor-form select:focus,
.pa-form input:focus,
.pa-form textarea:focus,
.pa-form select:focus {
  border-color: var(--pa-color-accent);
  box-shadow: 0 0 0 4px rgba(183, 142, 105, 0.18), 0 1px 2px rgba(0, 0, 0, 0.03) inset;
  outline: none;
}

/* Placeholder styling */
.elementor-form input::placeholder,
.elementor-form textarea::placeholder,
.pa-form input::placeholder,
.pa-form textarea::placeholder {
  color: var(--pa-color-text-light);
  opacity: 0.65;
}

/* Select specific polish */
.elementor-form select,
.pa-form select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%238B6648' viewBox='0 0 16 16'%3E%3Cpath d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  background-size: 1em;
  padding-right: 2.5rem;
}

/* Textarea taller and nicer */
.elementor-form textarea,
.pa-form textarea {
  min-height: 120px;
  resize: vertical;
}

/* Form submit button — exactly matches the site's .pa-btn--primary + .pa-btn--large style */
.elementor-form .elementor-field-type-submit button,
.pa-form button[type="submit"] {
  /* Base pa-btn properties for consistency */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100% !important;
  padding: 1.05rem 2.25rem;   /* matches .pa-btn--large */
  font-size: 1.05rem;         /* matches .pa-btn--large */
  font-weight: 600;
  line-height: 1;
  border-radius: var(--pa-radius-md);
  text-decoration: none;
  transition: all var(--pa-transition-base);
  white-space: nowrap;
  border: 2px solid var(--pa-color-accent);
  cursor: pointer;
  user-select: none;

  /* Primary color treatment */
  background-color: var(--pa-color-accent);
  color: var(--pa-color-white);
  margin-top: 0.75rem;
}

.elementor-form .elementor-field-type-submit button:hover,
.pa-form button[type="submit"]:hover {
  background-color: var(--pa-color-accent-700);
  border-color: var(--pa-color-accent-700);
  transform: translateY(-1px);
  box-shadow: var(--pa-shadow-md);
}

/* Subtle privacy note */
.pa-form-note {
  font-size: 0.78rem;
  color: var(--pa-color-text-light);
  margin-top: 1rem;
  line-height: 1.5;
  text-align: center;
}

/* Preview form wrapper (used in static index.html) */
.pa-form-wrapper {
  max-width: 820px;
  margin: -1rem auto 4rem;
  padding: 0 1.5rem;
}

/* Helper for two-column fields in forms (name + email etc.) */
.pa-form .two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

@media (max-width: 640px) {
  .pa-form .two-col {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   MISC — lists, dividers, small utils
============================================ */
.pa-list {
  list-style: none;
  padding-left: 0;
}
.pa-list li {
  position: relative;
  padding-left: 1.6rem;
  margin-bottom: 0.55rem;
}
.pa-list li:before {
  content: "•";
  position: absolute;
  left: 0;
  color: var(--pa-color-accent);
  font-weight: bold;
}

.pa-divider {
  height: 1px;
  background: var(--pa-color-border);
  margin-block: 2rem 0;
}

.pa-maxw-prose {
  max-width: 68ch;
}

/* Dark section text overrides */
.pa-section--dark .pa-text,
.pa-section--dark p {
  color: rgba(255,255,255,0.88);
}
.pa-section--dark .pa-card__text {
  color: rgba(255,255,255,0.82);
}

/* Accessibility */
:focus-visible {
  outline: 2px solid var(--pa-color-accent);
  outline-offset: 2px;
}

/* Print / reduced motion */
@media print {
  .pa-header, .pa-footer__bottom-right { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
}/* End custom CSS */