/* 
========================================================================
  Zanzavat Bahuudeshiya Shaikshanik Sanstha - Core Stylesheet
  Established. Empowering Lives.
========================================================================
  Table of Contents:
  1. Google Fonts Import & Variables
  2. Reset & Global Styles
  3. Typography & Marathi Anchors
  4. Header & Navigation (Responsive)
  5. Buttons & Interactive Elements
  6. Shared Components (Cards, Overlays, Counters)
  7. Page: Home (Hero Carousel, Who We Are, Insta Grid)
  8. Page: About Us (Mission/Vision, Leadership, Timeline)
  9. Page: Our Impact (Stats, Beneficiary Stories)
  10. Page: Programs (Focus Area Detailing)
  11. Page: Events (Listing & Dynamic Details View)
  12. Page: Gallery (Masonry & Scrolling Spotlight Slider)
  13. Page: Join Us & Contact (Forms & Fields)
  14. Page: Donate (QR Code & Bank Transfer Card)
  15. Footer Section
  16. Animation Keyframes & Reveal States
========================================================================
*/

/* 1. Google Fonts Import & Variables */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=Playfair+Display:ital,wght@0,400;0,600;0,700;1,400&family=Yatra+One&display=swap');
:root {
 /* Font Families */
 --font-sans: 'Inter', sans-serif;
 --font-serif: 'Playfair Display', serif;
 --font-marathi: 'Yatra One', cursive;

 /* Color Palette */
 --color-primary: #C82333;
 /* Warm crimson red */
 --color-primary-hover: #A71D2A;
 --color-secondary: #E05A47;
 /* Deep Orange */
 --color-secondary-hover: #C54433;
 --color-accent: #F4B41A;
 /* Golden Accent */
 --color-accent-hover: #D89A0E;
 --color-green: #2E7D32;
 /* Hope/Growth Green */
 --color-green-light: #E8F5E9;

 /* Neutrals */
 --color-white: #FFFFFF;
 --color-bg-light: #FAF9F6;
 /* Soft warm cream */
 --color-bg-alt: #F3F1EB;
 /* Beige/Neutral gray */
 --color-charcoal: #1E1E24;
 /* Deep dark charcoal */
 --color-text-dark: #232220;
 /* Soft dark grey for text */
 --color-text-muted: #6E6C68;
 /* Muted body text */
 --color-text-light: #FAF9F6;

 /* Borders and Shadows */
 --border-color: rgba(35, 34, 32, 0.1);
 --shadow-sm: 0 4px 6px rgba(0, 0, 0, 0.03);
 --shadow-md: 0 10px 25px rgba(0, 0, 0, 0.06);
 --shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
 --shadow-inset: inset 0 2px 4px rgba(0, 0, 0, 0.06);

 /* Border Radius */
 --radius-sm: 4px;
 --radius-md: 8px;
 --radius-lg: 16px;
 --radius-full: 9999px;

 /* Layout Width & Transitions */
 --max-width: 1200px;
 --transition-fast: 0.2s ease;
 --transition-normal: 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
 --transition-slow: 0.6s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.logo-img {
 width: 70px;
 height: 70px;
 object-fit: contain;
}
.team-grid{
  margin-top:50px;

  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));
  gap:25px;
}

.team-card.small{

  width:190px;
  max-width:100%;
  background:#fff;

  border-radius:16px;

  overflow:hidden;

  text-align:center;

  box-shadow:0 10px 30px rgba(0,0,0,.08);

  transition:.3s;
}

.team-card.small:hover{
  transform:translateY(-8px);
}

.team-card.small img{

  width:100%;
  height:180px;

  object-fit:cover;
}

.team-card.small h3{

  margin:15px 0 5px;

  font-size:18px;
}

.team-card.small span{

  display:block;

  margin-bottom:18px;

  color:#d62b2b;

  font-size:13px;

  font-weight:600;

  text-transform:uppercase;
}

/* 2. Reset & Global Styles */
*,
*::before,
*::after {
 box-sizing: border-box;
 margin: 0;
 padding: 0;
}

html {
 scroll-behavior: smooth;
 font-size: 16px;
}

body {
 font-family: var(--font-sans);
 background-color: var(--color-bg-light);
 color: var(--color-text-dark);
 line-height: 1.6;
 overflow-x: hidden;
 -webkit-font-smoothing: antialiased;
}

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

a {
 color: inherit;
 text-decoration: none;
 transition: var(--transition-fast);
}

ul {
 list-style: none;
}

section {
 padding: 80px 0;
 position: relative;
}

.container {
 width: 90%;
 max-width: var(--max-width);
 margin: 0 auto;
}

/* 3. Typography & Marathi Anchors */
h1,
h2,
h3,
h4,
h5,
h6 {
 font-family: var(--font-serif);
 font-weight: 700;
 line-height: 1.25;
 margin-bottom: 20px;
}

h1 {
 font-size: 3rem;
}

h2 {
 font-size: 2.25rem;
}

h3 {
 font-size: 1.75rem;
}

h4 {
 font-size: 1.25rem;
}

p {
 margin-bottom: 20px;
 color: var(--color-text-muted);
}

.section-tag {
 font-family: var(--font-sans);
 text-transform: uppercase;
 font-weight: 700;
 font-size: 0.85rem;
 letter-spacing: 2px;
 color: var(--color-primary);
 display: inline-block;
 margin-bottom: 12px;
 position: relative;
 padding-left: 24px;
}

.section-tag::before {
 content: '';
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 width: 16px;
 height: 2px;
 background-color: var(--color-primary);
}

.section-header {
 text-align: center;
 max-width: 700px;
 margin: 0 auto 60px auto;
}

.section-header.left-align {
 text-align: left;
 margin-left: 0;
}

/* Marathi Word Highlights */
.marathi-anchor {
 font-family: var(--font-marathi);
 color: var(--color-secondary);
 font-size: 1.15em;
 font-weight: 400;
 display: inline-block;
 padding: 0 6px;
 line-height: 1;
 text-shadow: 2px 2px 0px rgba(244, 180, 26, 0.25);
 transform: rotate(-1deg);
 position: relative;
 z-index: 1;
}

.marathi-anchor::after {
 content: '';
 position: absolute;
 left: 0;
 bottom: 0px;
 width: 100%;
 height: 6px;
 background-color: rgba(244, 180, 26, 0.2);
 z-index: -1;
 border-radius: var(--radius-sm);
}

/* 4. Header & Navigation */
header.site-header {
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 z-index: 1000;
 background-color: rgba(250, 249, 246, 0.95);
 backdrop-filter: blur(10px);
 border-bottom: 1px solid var(--border-color);
 transition: var(--transition-normal);
}

header.site-header.scrolled {
 box-shadow: var(--shadow-md);
 padding: 10px 0;
}

.nav-container {
 display: flex;
 justify-content: space-between;
 align-items: center;
 padding: 15px 0;
 transition: var(--transition-normal);
}

.site-logo {
 display: flex;
 align-items: center;
 gap: 12px;
}

.site-logo.logo-img {
 width: 45px;
 height: 45px;
 border-radius: 50%;
 object-fit: cover;
 background-color: var(--color-white);
 border: 2px solid var(--color-primary);
}

.site-logo.logo-text {
 font-family: var(--font-serif);
 font-weight: 700;
 font-size: 1.15rem;
 line-height: 1.1;
 color: var(--color-charcoal);
}

.site-logo.logo-subtitle {
 font-family: var(--font-sans);
 font-size: 0.7rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--color-primary);
 display: block;
}

.nav-menu {
 display: flex;
 align-items: center;
 gap: 16px;
}

.nav-link {
 font-size: 0.85rem;
 font-weight: 500;
 color: var(--color-text-dark);
 position: relative;
 padding: 6px 0;
}

.nav-link::after {
 content: '';
 position: absolute;
 bottom: 0;
 left: 0;
 width: 0;
 height: 2px;
 background-color: var(--color-primary);
 transition: var(--transition-normal);
}

.nav-link:hover::after,
.nav-link.active::after {
 width: 100%;
}

.nav-cta {
 display: flex;
 align-items: center;
 gap: 16px;
}

/* Mobile Hamburger Menu */
.hamburger {
 display: none;
 cursor: pointer;
 background: none;
 border: none;
 padding: 10px;
 position: relative;
 z-index: 1001;
}

.hamburger span {
 display: block;
 width: 25px;
 height: 3px;
 background-color: var(--color-charcoal);
 margin-bottom: 5px;
 transition: var(--transition-normal);
 border-radius: var(--radius-sm);
}

.hamburger span:last-child {
 margin-bottom: 0;
}

.hamburger.is-active span:nth-child(1) {
 transform: rotate(-45deg) translate(-5px, 6px);
}

.hamburger.is-active span:nth-child(2) {
 opacity: 0;
}

.hamburger.is-active span:nth-child(3) {
 transform: rotate(45deg) translate(-5px, -6px);
}

/* 5. Buttons & Interactive Elements */
.btn {
 display: inline-flex;
 align-items: center;
 justify-content: center;
 padding: 12px 28px;
 font-family: var(--font-sans);
 font-size: 0.95rem;
 font-weight: 600;
 border-radius: var(--radius-md);
 border: 2px solid transparent;
 cursor: pointer;
 transition: var(--transition-normal);
 text-align: center;
 gap: 8px;
}

.btn-primary {
 background-color: var(--color-primary);
 color: var(--color-white);
}

.btn-primary:hover {
 background-color: var(--color-primary-hover);
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(200, 35, 51, 0.3);
}

.btn-secondary {
 background-color: var(--color-secondary);
 color: var(--color-white);
}

.btn-secondary:hover {
 background-color: var(--color-secondary-hover);
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(224, 90, 71, 0.3);
}

.btn-accent {
 background-color: var(--color-accent);
 color: var(--color-charcoal);
}

.btn-accent:hover {
 background-color: var(--color-accent-hover);
 transform: translateY(-2px);
 box-shadow: 0 5px 15px rgba(244, 180, 26, 0.3);
}

.btn-outline {
 background-color: transparent;
 border-color: var(--color-primary);
 color: var(--color-primary);
}

.btn-outline:hover {
 background-color: var(--color-primary);
 color: var(--color-white);
 transform: translateY(-2px);
}

.btn-outline-light {
 background-color: transparent;
 border-color: var(--color-white);
 color: var(--color-white);
}

.btn-outline-light:hover {
 background-color: var(--color-white);
 color: var(--color-charcoal);
 transform: translateY(-2px);
}

.btn-sm {
 padding: 8px 18px;
 font-size: 0.85rem;
}

/* 6. Shared Components */

/* Cards */
.card-grid {
 display: grid;
 grid-template-columns: repeat(auto-fit, minmax(min(320px, 100%), 1fr));
 gap: 30px;
}

.card {
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 transition: var(--transition-normal);
 display: flex;
 flex-direction: column;
}

.card:hover {
 transform: translateY(-8px);
 box-shadow: var(--shadow-lg);
}

.card-img-wrapper {
 position: relative;
 overflow: hidden;
 aspect-ratio: 16 / 10;
}

.card-img-wrapper img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-slow);
}

.card:hover.card-img-wrapper img {
 transform: scale(1.06);
}

.card-content {
 padding: 24px;
 flex-grow: 1;
 display: flex;
 flex-direction: column;
}

.card-meta {
 font-size: 0.8rem;
 color: var(--color-text-muted);
 text-transform: uppercase;
 letter-spacing: 1px;
 margin-bottom: 12px;
 display: flex;
 align-items: center;
 gap: 8px;
}

.card-title {
 font-size: 1.35rem;
 margin-bottom: 12px;
 color: var(--color-charcoal);
}

.card-text {
 font-size: 0.95rem;
 margin-bottom: 20px;
 flex-grow: 1;
}

/* Image Overlay */
.image-overlay {
 position: relative;
}

.image-overlay::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, rgba(30, 30, 36, 0.3) 0%, rgba(30, 30, 36, 0.8) 100%);
 z-index: 1;
}

.overlay-content {
 position: relative;
 z-index: 2;
}

/* Stat counters */
.counter-section {
 background-color: var(--color-charcoal);
 color: var(--color-white);
 padding: 60px 0;
 border-top: 4px solid var(--color-accent);
}

.counter-grid {
 display: grid;
 grid-template-columns: repeat(4, 1fr);
 gap: 20px;
 text-align: center;
}

.counter-item {
 position: relative;
}

.counter-item:not(:last-child)::after {
 content: '';
 position: absolute;
 right: 0;
 top: 15%;
 height: 70%;
 width: 1px;
 background-color: rgba(250, 249, 246, 0.15);
}

.counter-num {
 font-family: var(--font-serif);
 font-size: clamp(2rem, 5vw, 3.5rem);
 font-weight: 700;
 color: var(--color-accent);
 line-height: 1;
 margin-bottom: 8px;
}

.counter-label {
 font-family: var(--font-sans);
 text-transform: uppercase;
 font-size: 0.85rem;
 letter-spacing: 1px;
 font-weight: 600;
 color: rgba(250, 249, 246, 0.8);
}

/* Call To Action Block */
.cta-banner {
 background-color: var(--color-primary);
 color: var(--color-white);
 border-radius: var(--radius-lg);
 padding: 60px 50px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 position: relative;
 overflow: hidden;
 box-shadow: var(--shadow-lg);
}

.cta-banner::before {
 content: '';
 position: absolute;
 top: -100px;
 right: -100px;
 width: 300px;
 height: 300px;
 background: radial-gradient(circle, rgba(244, 180, 26, 0.25) 0%, transparent 70%);
 border-radius: 50%;
}

.cta-banner-content {
 max-width: 65%;
 position: relative;
 z-index: 2;
}

.cta-banner-title {
 font-size: 2.25rem;
 margin-bottom: 15px;
}

.cta-banner-text {
 color: rgba(250, 249, 246, 0.9);
 margin-bottom: 0;
 font-size: 1.1rem;
}

.cta-banner-actions {
 display: flex;
 gap: 16px;
 position: relative;
 z-index: 2;
}

/* 7. Page: Home */

/* Hero Section */
.hero-slider-container {
 height: 90vh;
 min-height: 600px;
 position: relative;
 overflow: hidden;
}

.hero-slide {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 opacity: 0;
 visibility: hidden;
 transition: opacity 1s ease-in-out, visibility 1s ease-in-out;
 display: flex;
 align-items: center;
 background-size: cover;
 background-position: center;
 z-index: 1;
}

.hero-slide.active {
 opacity: 1;
 visibility: visible;
 z-index: 2;
}

.hero-slide::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(135deg, rgba(30, 30, 36, 0.9) 0%, rgba(30, 30, 36, 0.5) 100%);
}

.hero-content {
 position: relative;
 z-index: 3;
 color: var(--color-white);
 max-width: 800px;
 padding: 0 20px;
}

.hero-title {
 font-size: 3.5rem;
 margin-bottom: 20px;
 opacity: 0;
 transform: translateY(30px);
 transition: transform 0.8s ease 0.3s, opacity 0.8s ease 0.3s;
}

.hero-slide.active.hero-title {
 opacity: 1;
 transform: translateY(0);
}

.hero-subtitle {
 font-family: var(--font-sans);
 font-size: 1.25rem;
 font-weight: 500;
 color: var(--color-accent);
 margin-bottom: 30px;
 opacity: 0;
 transform: translateY(30px);
 transition: transform 0.8s ease 0.5s, opacity 0.8s ease 0.5s;
}

.hero-slide.active.hero-subtitle {
 opacity: 1;
 transform: translateY(0);
}

.hero-buttons {
 display: flex;
 gap: 16px;
 opacity: 0;
 transform: translateY(30px);
 transition: transform 0.8s ease 0.7s, opacity 0.8s ease 0.7s;
}

.hero-slide.active.hero-buttons {
 opacity: 1;
 transform: translateY(0);
}

.hero-controls {
 position: absolute;
 bottom: 40px;
 right: 5%;
 display: flex;
 gap: 12px;
 z-index: 10;
}

.hero-indicator {
 width: 12px;
 height: 12px;
 border-radius: 50%;
 background-color: rgba(255, 255, 255, 0.3);
 border: none;
 cursor: pointer;
 transition: var(--transition-fast);
 position: relative;
}

.hero-indicator::before {
 content: '';
 position: absolute;
 top: -15px;
 left: -15px;
 right: -15px;
 bottom: -15px;
}

.hero-indicator.active {
 background-color: var(--color-accent);
 transform: scale(1.25);
}

/* Home Who We Are */
.who-we-are-split {
 display: flex;
 gap: 60px;
 align-items: center;
}

.who-content {
 flex: 1;
}

.who-img-frame {
 flex: 1;
 position: relative;
}

.who-main-img {
 width: 85%;
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 border: 8px solid var(--color-white);
 position: relative;
 z-index: 2;
}

.who-offset-badge {
 position: absolute;
 right: 0;
 bottom: -20px;
 width: 200px;
 background-color: var(--color-accent);
 color: var(--color-charcoal);
 border-radius: var(--radius-md);
 padding: 24px;
 box-shadow: var(--shadow-lg);
 z-index: 3;
 text-align: center;
}

.who-badge-year {
 font-family: var(--font-serif);
 font-size: 2rem;
 font-weight: 700;
 line-height: 1;
 margin-bottom: 4px;
}

.who-badge-text {
 font-size: 0.8rem;
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1px;
}

/* Home Instagram Grid */
.insta-preview-container {
 display: grid;
 grid-template-columns: repeat(6, 1fr);
 gap: 15px;
 margin-top: 30px;
}

.insta-item {
 position: relative;
 aspect-ratio: 1;
 border-radius: var(--radius-md);
 overflow: hidden;
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
}

.insta-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-slow);
}

.insta-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(200, 35, 51, 0.85);
 /* brand crimson overlay */
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 color: var(--color-white);
 opacity: 0;
 transition: var(--transition-normal);
 padding: 15px;
 text-align: center;
}

.insta-item:hover img {
 transform: scale(1.1);
}

.insta-item:hover.insta-overlay {
 opacity: 1;
}

.insta-icon {
 font-size: 1.5rem;
 margin-bottom: 8px;
}

.insta-text {
 font-size: 0.8rem;
 line-height: 1.3;
}

/* 8. Page: About Us */
.about-history {
 display: flex;
 gap: 50px;
 align-items: center;
}

.history-text {
 flex: 1.2;
}

.history-graphics {
 flex: 0.8;
 background-color: var(--color-bg-alt);
 padding: 40px;
 border-radius: var(--radius-lg);
 border-left: 5px solid var(--color-primary);
}

.history-quote {
 font-family: var(--font-serif);
 font-size: 1.35rem;
 font-style: italic;
 color: var(--color-primary);
 margin-bottom: 16px;
}

.history-author {
 font-weight: 700;
 font-size: 0.9rem;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.mission-vision-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
 margin-top: 60px;
}

.mv-card {
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 padding: 40px;
 box-shadow: var(--shadow-sm);
 border-top: 4px solid var(--color-primary);
}

.mv-card.vision-card {
 border-top-color: var(--color-accent);
}

.mv-icon {
 width: 60px;
 height: 60px;
 border-radius: 50%;
 background-color: rgba(200, 35, 51, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-primary);
 font-size: 1.75rem;
 margin-bottom: 24px;
}

.vision-card.mv-icon {
 background-color: rgba(244, 180, 26, 0.15);
 color: var(--color-accent-hover);
}

/* Leadership Team */
.team-grid {
 display: flex;
 justify-content: center;
 gap: 50px;
 flex-wrap: wrap;
 margin-top: 40px;
}

.team-card {
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 width: 320px;
 text-align: center;
 transition: var(--transition-normal);
}

.team-card:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.team-img-container {
 width: 100%;
 aspect-ratio: 1;
 background-color: var(--color-bg-alt);
 position: relative;
 overflow: hidden;
}

.team-img-container img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.team-info {
 padding: 24px;
}

.team-name {
 font-size: 1.35rem;
 margin-bottom: 6px;
 color: var(--color-charcoal);
}

.team-role {
 font-family: var(--font-sans);
 text-transform: uppercase;
 font-weight: 700;
 font-size: 0.8rem;
 letter-spacing: 1px;
 color: var(--color-primary);
 margin-bottom: 12px;
}

.team-bio {
 font-size: 0.9rem;
 line-height: 1.5;
 margin-bottom: 15px;
}

.team-socials a {
 display: inline-flex;
 width: 36px;
 height: 36px;
 border-radius: 50%;
 background-color: var(--color-bg-alt);
 align-items: center;
 justify-content: center;
 margin: 0 4px;
}

.team-socials a:hover {
 background-color: var(--color-primary);
 color: var(--color-white);
}

/* Vertical Timeline */
.timeline-container {
 position: relative;
 max-width: 800px;
 margin: 60px auto 0 auto;
}

.timeline-container::before {
 content: '';
 position: absolute;
 top: 0;
 left: 50%;
 transform: translateX(-50%);
 width: 4px;
 height: 100%;
 background-color: var(--color-bg-alt);
}

.timeline-item {
 width: 50%;
 padding: 20px 40px;
 position: relative;
 box-sizing: border-box;
}

.timeline-item:nth-child(odd) {
 left: 0;
 text-align: right;
}

.timeline-item:nth-child(even) {
 left: 50%;
 text-align: left;
}

.timeline-dot {
 position: absolute;
 top: 30px;
 width: 20px;
 height: 20px;
 border-radius: 50%;
 background-color: var(--color-accent);
 border: 4px solid var(--color-white);
 box-shadow: var(--shadow-sm);
 z-index: 2;
}

.timeline-item:nth-child(odd).timeline-dot {
 right: -10px;
}

.timeline-item:nth-child(even).timeline-dot {
 left: -10px;
}

.timeline-date {
 font-family: var(--font-serif);
 font-size: 1.5rem;
 font-weight: 700;
 color: var(--color-primary);
 margin-bottom: 8px;
}

.timeline-card {
 background-color: var(--color-white);
 padding: 20px;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 display: inline-block;
 text-align: left;
 max-width: 100%;
}

.timeline-card h4 {
 margin-bottom: 6px;
}

.timeline-card p {
 font-size: 0.9rem;
 margin-bottom: 0;
}

/* 9. Page: Our Impact */
.impact-intro {
 display: flex;
 gap: 50px;
 align-items: center;
 margin-bottom: 60px;
}

.impact-intro-text {
 flex: 1.2;
}

.impact-intro-graphic {
 flex: 0.8;
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

.impact-stat-box {
 background-color: var(--color-white);
 padding: 30px 20px;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 text-align: center;
}

.impact-stat-num {
 font-family: var(--font-serif);
 font-size: 2.5rem;
 color: var(--color-primary);
 font-weight: 700;
 margin-bottom: 5px;
}

.impact-stat-label {
 font-size: 0.8rem;
 text-transform: uppercase;
 font-weight: 700;
 color: var(--color-text-muted);
}

.story-grid {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 40px;
}

.story-card {
 display: flex;
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
}

.story-img {
 width: 40%;
 background-color: var(--color-bg-alt);
}

.story-img img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

.story-content {
 width: 60%;
 padding: 30px;
}

.story-quote {
 font-style: italic;
 color: var(--color-text-muted);
 font-size: 0.95rem;
 margin-bottom: 20px;
 position: relative;
}

.story-quote::before {
 content: '"';
 font-family: var(--font-serif);
 font-size: 3rem;
 color: rgba(200, 35, 51, 0.15);
 position: absolute;
 left: -20px;
 top: -20px;
}

.story-author {
 font-weight: 700;
 font-size: 0.85rem;
 text-transform: uppercase;
}

.story-author span {
 display: block;
 font-weight: 400;
 color: var(--color-primary);
 font-size: 0.75rem;
}

/* 10. Page: Programs */
.programs-container {
 display: flex;
 flex-direction: column;
 gap: 100px;
}

.program-row {
 display: flex;
 gap: 60px;
 align-items: center;
}

.program-row:nth-child(even) {
 flex-direction: row-reverse;
}

.program-visual {
 flex: 1;
 position: relative;
}

.program-visual img {
 border-radius: var(--radius-lg);
 box-shadow: var(--shadow-lg);
 border: 6px solid var(--color-white);
}

.program-text {
 flex: 1;
}

.program-highlight-box {
 background-color: var(--color-white);
 border-left: 4px solid var(--color-accent);
 padding: 20px;
 border-radius: 0 var(--radius-md) var(--radius-md) 0;
 box-shadow: var(--shadow-sm);
 margin-bottom: 24px;
}

.program-highlight-box p {
 margin-bottom: 0;
 font-size: 0.95rem;
}

.program-stats {
 display: flex;
 gap: 20px;
}

.program-stat-item {
 flex: 1;
 background-color: var(--color-bg-alt);
 padding: 15px;
 border-radius: var(--radius-md);
 text-align: center;
}

.program-stat-val {
 font-family: var(--font-serif);
 font-size: 1.5rem;
 color: var(--color-primary);
 font-weight: 700;
}

.program-stat-lbl {
 font-size: 0.75rem;
 text-transform: uppercase;
 color: var(--color-text-muted);
}

/* 11. Page: Events */
.events-section-wrapper {
 min-height: 60vh;
}

/* Dynamic Event Detail View Styles */
.event-detail-container {
 display: none;
 /* Controlled by JS switcher */
}

.event-detail-back {
 display: inline-flex;
 align-items: center;
 gap: 8px;
 margin-bottom: 30px;
 font-weight: 600;
 color: var(--color-primary);
 cursor: pointer;
}

.event-detail-hero {
 height: 45vh;
 min-height: 300px;
 border-radius: var(--radius-lg);
 overflow: hidden;
 position: relative;
 background-size: cover;
 background-position: center;
 display: flex;
 align-items: flex-end;
 color: var(--color-white);
 margin-bottom: 40px;
}

.event-detail-hero::before {
 content: '';
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to top, rgba(30, 30, 36, 0.9) 0%, rgba(30, 30, 36, 0.3) 100%);
}

.event-detail-hero-content {
 position: relative;
 z-index: 2;
 padding: 40px;
 width: 100%;
}

.event-detail-meta {
 font-size: 0.85rem;
 text-transform: uppercase;
 letter-spacing: 2px;
 color: var(--color-accent);
 margin-bottom: 12px;
}

.event-detail-title {
 font-size: 2.5rem;
 margin-bottom: 0;
}

.event-detail-layout {
 display: flex;
 gap: 50px;
 margin-bottom: 60px;
}

.event-detail-main {
 flex: 1.3;
}

.event-detail-sidebar {
 flex: 0.7;
}

.event-detail-sidebar-box {
 background-color: var(--color-white);
 padding: 30px;
 border-radius: var(--radius-lg);
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
}

.event-detail-sidebar-title {
 font-size: 1.2rem;
 border-bottom: 2px solid var(--color-bg-alt);
 padding-bottom: 12px;
 margin-bottom: 20px;
}

.event-sidebar-info-item {
 display: flex;
 gap: 12px;
 margin-bottom: 20px;
}

.event-sidebar-info-item.icon {
 font-size: 1.25rem;
 color: var(--color-primary);
}

.event-sidebar-info-label {
 font-size: 0.8rem;
 text-transform: uppercase;
 color: var(--color-text-muted);
}

.event-sidebar-info-value {
 font-size: 0.95rem;
 font-weight: 500;
}

.event-detail-gallery {
 margin-top: 50px;
}

.event-detail-gallery-grid {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 gap: 20px;
}

.event-detail-gallery-item {
 border-radius: var(--radius-md);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 aspect-ratio: 4 / 3;
}

.event-detail-gallery-item img {
 width: 100%;
 height: 100%;
 object-fit: cover;
 transition: var(--transition-normal);
}

.event-detail-gallery-item:hover img {
 transform: scale(1.05);
}

/* 12. Page: Gallery */

/* Category Filters */
.gallery-filters {
 display: flex;
 justify-content: center;
 gap: 12px;
 flex-wrap: wrap;
 margin-bottom: 40px;
}

.filter-btn {
 background-color: var(--color-white);
 color: var(--color-text-dark);
 border: 1px solid var(--border-color);
 padding: 8px 20px;
 border-radius: var(--radius-full);
 font-family: var(--font-sans);
 font-size: 0.9rem;
 font-weight: 500;
 cursor: pointer;
 transition: var(--transition-fast);
}

.filter-btn.active,
.filter-btn:hover {
 background-color: var(--color-primary);
 color: var(--color-white);
 border-color: var(--color-primary);
}

/* Gallery Masonry Layout */
.gallery-masonry-grid {
 column-count: 3;
 column-gap: 20px;
}

.gallery-masonry-item {
 break-inside: avoid;
 margin-bottom: 20px;
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 overflow: hidden;
 box-shadow: var(--shadow-sm);
 border: 1px solid var(--border-color);
 cursor: pointer;
 position: relative;
 transition: var(--transition-normal);
}

.gallery-masonry-item:hover {
 transform: translateY(-5px);
 box-shadow: var(--shadow-lg);
}

.gallery-masonry-img {
 width: 100%;
 height: auto;
 display: block;
}

.gallery-masonry-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to bottom, transparent 30%, rgba(30, 30, 36, 0.85) 100%);
 display: flex;
 align-items: flex-end;
 padding: 20px;
 color: var(--color-white);
 opacity: 0;
 transition: var(--transition-normal);
}

.gallery-masonry-item:hover.gallery-masonry-overlay {
 opacity: 1;
}

.gallery-item-title {
 font-size: 1.1rem;
 margin-bottom: 4px;
}

.gallery-item-tag {
 font-size: 0.75rem;
 text-transform: uppercase;
 color: var(--color-accent);
 letter-spacing: 1px;
}

/* Lightbox Modal */
.lightbox-modal {
 display: none;
 position: fixed;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background-color: rgba(30, 30, 36, 0.95);
 z-index: 2000;
 justify-content: center;
 align-items: center;
 opacity: 0;
 transition: opacity var(--transition-normal);
}

.lightbox-modal.is-active {
 display: flex;
 opacity: 1;
}

.lightbox-content-wrapper {
 max-width: 80%;
 max-height: 80vh;
 position: relative;
}

.lightbox-image {
 max-width: 100%;
 max-height: 80vh;
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-lg);
}

.lightbox-close {
 position: absolute;
 top: 30px;
 right: 40px;
 background: none;
 border: none;
 color: var(--color-white);
 font-size: 2.5rem;
 cursor: pointer;
 z-index: 2002;
}

.lightbox-nav {
 position: absolute;
 top: 50%;
 transform: translateY(-50%);
 background-color: rgba(250, 249, 246, 0.15);
 color: var(--color-white);
 border: none;
 font-size: 1.5rem;
 width: 50px;
 height: 50px;
 border-radius: 50%;
 cursor: pointer;
 transition: var(--transition-fast);
 display: flex;
 align-items: center;
 justify-content: center;
 z-index: 2002;
}

.lightbox-nav:hover {
 background-color: rgba(250, 249, 246, 0.25);
}

.lightbox-prev {
 left: 40px;
}

.lightbox-next {
 right: 40px;
}

.lightbox-caption {
 color: var(--color-white);
 text-align: center;
 margin-top: 15px;
 font-size: 1.1rem;
}

/* Custom Spotlight Scrolling Image Slider */
.spotlight-section {
 background-color: var(--color-charcoal);
 color: var(--color-white);
 overflow: hidden;
 padding: 80px 0;
}

.spotlight-slider-wrapper {
 width: 100%;
 position: relative;
 overflow: hidden;
 margin-top: 40px;
}

.spotlight-track {
 display: flex;
 gap: 30px;
 width: max-content;
 align-items: center;
 padding: 40px 0;
 /* Will trigger scroll transitions via JS */
 will-change: transform;
}

.spotlight-slide {
 width: 300px;
 aspect-ratio: 4 / 3;
 border-radius: var(--radius-lg);
 overflow: hidden;
 position: relative;
 transition: transform var(--transition-normal), box-shadow var(--transition-normal), opacity var(--transition-normal);
 cursor: pointer;
 opacity: 0.5;
 transform: scale(0.9);
 flex-shrink: 0;
 box-shadow: 0 10px 20px rgba(0, 0, 0, 0.3);
}

.spotlight-slide img {
 width: 100%;
 height: 100%;
 object-fit: cover;
}

/* Spotlight State - Middle Active Element */
.spotlight-slide.is-spotlighted {
 opacity: 1;
 transform: scale(1.15);
 box-shadow: 0 20px 40px rgba(244, 180, 26, 0.25);
 border: 3px solid var(--color-accent);
}

.spotlight-slide-overlay {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 background: linear-gradient(to top, rgba(30, 30, 36, 0.8) 0%, transparent 100%);
 display: flex;
 align-items: flex-end;
 padding: 15px;
 color: var(--color-white);
 font-size: 0.85rem;
 opacity: 0;
 transition: var(--transition-normal);
}

.spotlight-slide.is-spotlighted.spotlight-slide-overlay {
 opacity: 1;
}

/* 13. Page: Join Us & Contact (Forms & Fields) */
.form-split-layout {
 display: flex;
 gap: 60px;
}

.form-details {
 flex: 0.8;
}

.form-wrapper {
 flex: 1.2;
 background-color: var(--color-white);
 padding: 40px;
 border-radius: var(--radius-lg);
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
}

.contact-info-list {
 margin-top: 30px;
}

.contact-info-item {
 display: flex;
 gap: 16px;
 margin-bottom: 24px;
}

.contact-info-item.icon {
 width: 44px;
 height: 44px;
 border-radius: 50%;
 background-color: rgba(200, 35, 51, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 color: var(--color-primary);
 font-size: 1.2rem;
 flex-shrink: 0;
}

.contact-info-title {
 font-weight: 700;
 font-size: 0.85rem;
 text-transform: uppercase;
 letter-spacing: 1px;
 color: var(--color-text-muted);
 margin-bottom: 2px;
}

.contact-info-val {
 font-size: 1.05rem;
 color: var(--color-charcoal);
 font-weight: 500;
}

/* Form Styles */
.form-group {
 margin-bottom: 20px;
}

.form-group-row {
 display: grid;
 grid-template-columns: 1fr 1fr;
 gap: 20px;
}

.form-label {
 display: block;
 font-size: 0.85rem;
 font-weight: 600;
 margin-bottom: 8px;
 text-transform: uppercase;
 letter-spacing: 1px;
}

.form-control {
 width: 100%;
 padding: 12px 16px;
 font-family: var(--font-sans);
 font-size: 0.95rem;
 background-color: var(--color-bg-light);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 outline: none;
 transition: var(--transition-fast);
}

.form-control:focus {
 border-color: var(--color-primary);
 background-color: var(--color-white);
 box-shadow: 0 0 0 3px rgba(200, 35, 51, 0.15);
}

textarea.form-control {
 resize: vertical;
 min-height: 120px;
}

.form-feedback {
 display: none;
 background-color: var(--color-green-light);
 color: var(--color-green);
 border: 1px solid var(--color-green);
 padding: 15px;
 border-radius: var(--radius-md);
 margin-bottom: 20px;
 font-weight: 500;
 text-align: center;
}

/* 14. Page: Donate (QR Code & Bank Transfer Card) */
.donate-split {
 display: flex;
 gap: 50px;
 align-items: flex-start;
}

.donate-story {
 flex: 1.2;
}

.donate-details-box {
 flex: 0.8;
 display: flex;
 flex-direction: column;
 gap: 30px;
 position: sticky;
 top: 100px;
}

.donate-card {
 background-color: var(--color-white);
 border-radius: var(--radius-lg);
 padding: 30px;
 border: 1px solid var(--border-color);
 box-shadow: var(--shadow-sm);
}

.donate-card-title {
 font-size: 1.35rem;
 border-bottom: 2px solid var(--color-bg-alt);
 padding-bottom: 12px;
 margin-bottom: 20px;
 display: flex;
 align-items: center;
 gap: 10px;
 color: var(--color-charcoal);
}

.donate-qr-wrapper {
 text-align: center;
}

.donate-qr-image {
 width: 200px;
 height: 200px;
 margin: 0 auto 15px auto;
 border: 2px dashed var(--color-secondary);
 border-radius: var(--radius-md);
 display: flex;
 align-items: center;
 justify-content: center;
 background-color: var(--color-bg-light);
 position: relative;
 overflow: hidden;
}

.donate-qr-image::before {
 content: 'Scan QR';
 position: absolute;
 bottom: 10px;
 font-size: 0.75rem;
 font-weight: 700;
 text-transform: uppercase;
 color: var(--color-text-muted);
}

/* Inside QR simulation graphics */
.donate-qr-placeholder {
 width: 140px;
 height: 140px;
 background-image: radial-gradient(var(--color-charcoal) 30%, transparent 30%), radial-gradient(var(--color-charcoal) 30%, transparent 30%);
 background-size: 8px 8px;
 background-position: 0 0, 4px 4px;
 opacity: 0.2;
}

.donate-qr-box {
 position: absolute;
 top: 15px;
 left: 15px;
 right: 15px;
 bottom: 30px;
 border: 2px solid var(--color-charcoal);
}

.bank-detail-item {
 display: flex;
 justify-content: space-between;
 padding: 12px 0;
 border-bottom: 1px dashed var(--border-color);
 font-size: 0.95rem;
}

.bank-detail-item:last-child {
 border-bottom: none;
}

.bank-detail-lbl {
 color: var(--color-text-muted);
}

.bank-detail-val {
 font-weight: 600;
 color: var(--color-charcoal);
 text-align: right;
 display: flex;
 align-items: center;
 gap: 8px;
}

.copy-btn {
 background: none;
 border: none;
 color: var(--color-primary);
 cursor: pointer;
 font-size: 0.8rem;
 padding: 2px 6px;
 border-radius: var(--radius-sm);
 background-color: var(--color-bg-light);
 border: 1px solid var(--border-color);
}

.copy-btn:hover {
 background-color: var(--color-primary);
 color: var(--color-white);
}

/* 15. Footer Section */
footer.site-footer {
 background-color: var(--color-charcoal);
 color: var(--color-white);
 padding: 80px 0 30px 0;
 border-top: 8px solid var(--color-primary);
}

.footer-grid {
 display: grid;
 grid-template-columns: 1.5fr 0.8fr 0.8fr 1.2fr;
 gap: 40px;
 margin-bottom: 60px;
}

.footer-brand h3 {
 font-size: 1.5rem;
 margin-bottom: 15px;
}

.footer-brand p {
 color: rgba(250, 249, 246, 0.7);
 font-size: 0.9rem;
 line-height: 1.6;
 margin-bottom: 24px;
}

.footer-social-links {
 display: flex;
 gap: 12px;
}

.footer-social-btn {
 width: 40px;
 height: 40px;
 border-radius: 50%;
 background-color: rgba(250, 249, 246, 0.1);
 display: flex;
 align-items: center;
 justify-content: center;
 transition: var(--transition-fast);
}

.footer-social-btn:hover {
 background-color: var(--color-primary);
 color: var(--color-white);
 transform: translateY(-2px);
}

.footer-links-title {
 font-family: var(--font-sans);
 font-size: 0.9rem;
 text-transform: uppercase;
 font-weight: 700;
 letter-spacing: 1.5px;
 margin-bottom: 24px;
 color: var(--color-accent);
}

.footer-links-list li {
 margin-bottom: 12px;
}

.footer-links-list a {
 color: rgba(250, 249, 246, 0.75);
 font-size: 0.9rem;
}

.footer-links-list a:hover {
 color: var(--color-accent);
 padding-left: 4px;
}

.footer-contact-item {
 display: flex;
 gap: 12px;
 margin-bottom: 16px;
 color: rgba(250, 249, 246, 0.85);
 font-size: 0.9rem;
}

.footer-contact-item.icon {
 color: var(--color-accent);
}

.footer-bottom {
 border-top: 1px solid rgba(250, 249, 246, 0.1);
 padding-top: 30px;
 display: flex;
 justify-content: space-between;
 align-items: center;
 font-size: 0.85rem;
 color: rgba(250, 249, 246, 0.6);
}

/* 16. Animation Keyframes & Reveal States */
.reveal {
 opacity: 0;
 transform: translateY(30px);
 transition: opacity 0.8s ease, transform 0.8s ease;
}

.reveal.active {
 opacity: 1;
 transform: translateY(0);
}

/* Responsive Media Queries */
@media (max-width: 1024px) {
 h1 {
  font-size: 2.5rem;
 }

 h2 {
  font-size: 2rem;
 }

 .who-we-are-split,
 .about-history,
 .story-grid,
 .program-row,
 .program-row:nth-child(even),
 .form-split-layout,
 .donate-split {
  flex-direction: column;
  gap: 40px;
 }

 .who-main-img {
  width: 100%;
 }


 .who-offset-badge {
  bottom: -10px;
  right: 10px;
 }

 .story-card {
  flex-direction: column;
 }

 .story-img,
 .story-content {
  width: 100%;
 }

 .story-img {
  aspect-ratio: 16 / 10;
 }

 .donate-details-box {
  position: static;
  width: 100%;
 }

 .gallery-masonry-grid {
  column-count: 2;
 }

 .footer-grid {
  grid-template-columns: 1fr 1fr;
 }
}

@media (max-width: 768px) {
 .hamburger {
  display: block;
 }

 .nav-menu {
  position: fixed;
  top: 0;
  right: -100%;
  width: 280px;
  height: 100vh;
  background-color: var(--color-white);
  flex-direction: column;
  justify-content: center;
  padding: 80px 40px;
  box-shadow: var(--shadow-lg);
  transition: var(--transition-normal);
  z-index: 1000;
  overflow-y: auto;
 }

 .nav-menu.is-active {
  right: 0;
 }

 .nav-menu.nav-link {
  font-size: 1.15rem;
  padding: 12px 24px;
  width: 100%;
  text-align: center;
  display: block;
 }

 .nav-cta {
  display: flex;
  align-items: center;
 }

 .counter-grid {
  grid-template-columns: 1fr 1fr;
 }

 .counter-item:not(:last-child)::after {
  display: none !important;
 }

 .counter-num {
  font-size: 2.25rem;
 }

 .counter-label {
  font-size: 0.7rem;
 }

 .impact-intro {
  flex-direction: column;
 }

 .impact-intro-graphic {
  width: 100%;
 }

 .impact-stat-num {
  font-size: 2rem;
 }

 .timeline-container::before {
  left: 20px;
 }

 .timeline-item {
  width: 100%;
  padding-left: 50px;
  padding-right: 0;
 }

 .timeline-item:nth-child(odd),
 .timeline-item:nth-child(even) {
  left: 0;
  text-align: left;
 }

 .timeline-dot {
  left: 10px !important;
  right: auto !important;
 }

 .cta-banner {
  flex-direction: column;
  text-align: center;
  padding: 40px 24px;
  gap: 24px;
 }

 .cta-banner-content {
  max-width: 100%;
 }

 .cta-banner-title {
  font-size: 1.75rem;
 }

 .gallery-filters {
  gap: 6px;
  flex-wrap: wrap;
 }

 .filter-btn {
  padding: 8px 16px;
  font-size: 0.8rem;
 }

 .gallery-masonry-grid {
  column-count: 1;
 }

 .event-detail-layout {
  flex-direction: column;
 }

 .event-detail-gallery-grid {
  grid-template-columns: 1fr 1fr;
 }

 .event-detail-hero {
  height: 40vh;
  min-height: 220px;
 }

 .event-detail-title {
  font-size: 1.75rem;
 }

 .hero-slider-container {
  height: 65vh;
  min-height: 400px;
 }

 .hero-title {
  font-size: 2rem;
 }

 .hero-subtitle {
  font-size: 1rem;
 }

 .hero-buttons {
  flex-direction: column;
  gap: 10px;
 }

 .hero-buttons.btn {
  width: 100%;
 }

 .insta-preview-container {
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
 }

 .team-grid {
  gap: 15px;
 }

 .team-card.small {
  width: 100%;
  max-width: 200px;
 }

 .lightbox-close {
  top: 15px;
  right: 15px;
  font-size: 2.25rem;
 }
 .lightbox-nav {
  width: 44px;
  height: 44px;
  font-size: 1.25rem;
 }
 .lightbox-prev {
  left: 15px;
 }
 .lightbox-next {
  right: 15px;
 }
 .copy-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
 }
 .form-group-row {
  grid-template-columns: 1fr;
 }
 .who-offset-badge {
  position: relative;
  bottom: 0;
  right: 0;
  margin: 20px auto 0 auto;
  width: 100%;
  max-width: 280px;
 }
 .spotlight-slide {
  width: 220px;
 }
 .container {
  width: 92%;
 }
}

@media (max-width: 480px) {
 .insta-preview-container {
  grid-template-columns: repeat(2, 1fr);
 }

 .form-group-row {
  grid-template-columns: 1fr;
 }

 .counter-grid {
  grid-template-columns: 1fr 1fr;
 }

 .counter-num {
  font-size: 1.75rem;
 }

 .event-detail-gallery-grid {
  grid-template-columns: 1fr;
 }

 .footer-grid {
  grid-template-columns: 1fr;
 }

 .footer-bottom {
  flex-direction: column;
  gap: 15px;
  text-align: center;
 }

 .hero-slider-container {
  height: 55vh;
  min-height: 350px;
 }

 .hero-title {
  font-size: 1.6rem;
 }

 .hero-subtitle {
  font-size: 0.9rem;
 }

 .section-header h2 {
  font-size: 1.5rem;
 }

 .team-grid {
  grid-template-columns: repeat(2, 1fr);
 }

 .team-card.small {
  max-width: 100%;
 }

 .impact-intro-graphic {
  grid-template-columns: 1fr 1fr;
  gap: 12px;
 }

 .spotlight-slide {
  width: 180px;
 }

 .image-overlay h1 {
  font-size: 2rem !important;
 }
}

.insta-preview-container >.insta-video {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border-color);
  box-shadow: var(--shadow-sm);
  aspect-ratio: 1;
}

.insta-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  border-radius: inherit;
  background: #000;
}

.ai-chat-launcher {
 position: fixed;
 right: 24px;
 bottom: 24px;
 z-index: 1500;
 display: inline-flex;
 align-items: center;
 gap: 9px;
 padding: 13px 18px;
 border: 0;
 border-radius: var(--radius-full);
 background: var(--color-charcoal);
 color: var(--color-white);
 box-shadow: var(--shadow-lg);
 cursor: pointer;
 font: 600 0.9rem var(--font-sans);
 transition: transform var(--transition-fast), background var(--transition-fast);
}

.ai-chat-launcher:hover {
 background: var(--color-primary);
 transform: translateY(-3px);
}

.ai-chat-launcher-icon { color: var(--color-accent); font-size: 1.2rem; }

.ai-chat-panel {
 position: fixed;
 right: 24px;
 bottom: 84px;
 z-index: 1499;
 display: flex;
 flex-direction: column;
 width: min(380px, calc(100vw - 32px));
 height: min(560px, calc(100vh - 120px));
 overflow: hidden;
 background: var(--color-white);
 border: 1px solid var(--border-color);
 border-radius: var(--radius-md);
 box-shadow: var(--shadow-lg);
 opacity: 0;
 pointer-events: none;
 transform: translateY(16px) scale(0.98);
 transition: opacity var(--transition-normal), transform var(--transition-normal);
}

.ai-chat-panel.is-open { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.ai-chat-header { display: flex; align-items: flex-start; justify-content: space-between; padding: 20px; background: var(--color-charcoal); color: var(--color-white); }
.ai-chat-header h2 { font-size: 1.25rem; margin: 3px 0 0; }
.ai-chat-eyebrow { color: var(--color-accent); font-size: 0.7rem; letter-spacing: 1.3px; text-transform: uppercase; }
.ai-chat-close { border: 0; background: transparent; color: var(--color-white); font-size: 1.7rem; line-height: 1; cursor: pointer; }
.ai-chat-messages { flex: 1; overflow-y: auto; padding: 18px; background: var(--color-bg-light); }
.ai-chat-message { width: fit-content; max-width: 88%; margin-bottom: 12px; padding: 10px 13px; border-radius: 12px; font-size: 0.9rem; white-space: pre-wrap; }
.ai-chat-message-assistant { background: var(--color-white); border: 1px solid var(--border-color); }
.ai-chat-message-user { margin-left: auto; background: var(--color-primary); color: var(--color-white); }
.ai-chat-form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border-color); background: var(--color-white); }
.ai-chat-form textarea { flex: 1; resize: none; min-width: 0; padding: 10px; border: 1px solid var(--border-color); border-radius: var(--radius-sm); font: 0.9rem var(--font-sans); }
.ai-chat-send { border: 0; border-radius: var(--radius-sm); padding: 0 14px; background: var(--color-primary); color: var(--color-white); cursor: pointer; font-weight: 600; }
.ai-chat-send:hover { background: var(--color-primary-hover); }

@media (max-width: 480px) {
 .ai-chat-launcher { right: 16px; bottom: 16px; }
 .ai-chat-panel { right: 16px; bottom: 76px; }
}