/* ===================================
   CSS CUSTOM PROPERTIES (VARIABLES)
   =================================== */

:root {
  /* Colors */
  --color-black: #000;
  --color-white: #fff;
  --color-green: #096839;
  --color-green-dark: rgb(9, 104, 57);
  --color-green-darker: rgb(6, 77, 41);
  --color-green-mid: #1a7e4f;
  --color-mint: rgb(229, 244, 207);
  --color-mint-pale: #f4faf0;
  --color-warm-bg: #fdfbf7;
  --color-gold: #d4af37;
  --text-color: #1a2a1e;

  /* Fonts */
  --font-sans: "Source Sans 3", "Verdana", sans-serif;
  --font-serif: "Playfair Display", "Times New Roman", serif;
  --font-script: "Dancing Script", cursive;

  /* Spacing (based on 0.25rem units) */
  --spacing-unit: 0.25rem;

  /* Font sizes */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.75rem;
  --text-3xl: 2rem;
  --text-4xl: 2.5rem;
  --text-5xl: 3.5rem;
  --text-7xl: 5rem;

  /* Font weights */
  --font-light: 300;
  --font-regular: 400;
  --font-medium: 500;
  --font-semibold: 600;
  --font-bold: 700;

  /* Line heights */
  --leading-tight: 1.25;
  --leading-snug: 1.375;
  --leading-normal: 1.5;
  --leading-relaxed: 1.625;

  /* Border radius */
  --radius-sm: 0.25rem;
  --radius: 0.5rem;
  --radius-xl: 0.75rem;
  --radius-2xl: 1rem;
  --radius-3xl: 1.5rem;
  --radius-full: 9999px;

  /* Transitions */
  --transition-fast: 150ms;
  --transition-normal: 300ms;
  --transition-slow: 500ms;
  --transition-slower: 700ms;

  /* Containers */
  --container-max: 80rem;
}

/* ===================================
   RESET & BASE STYLES
   =================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
}

body {
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  color: var(--text-color);
  background-color: var(--color-warm-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ===================================
   TYPOGRAPHY
   =================================== */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  line-height: var(--leading-tight);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: var(--text-color);
}

h1 {
  font-size: var(--text-4xl);
  line-height: 1.2;
}

h2 {
  font-size: var(--text-3xl);
  line-height: 1.2;
}

h3 {
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
}

h4 {
  font-size: var(--text-xl);
}

h5 {
  font-size: var(--text-xs);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  letter-spacing: 3px;
  text-transform: uppercase;
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 2.5);
}

p {
  margin-bottom: calc(var(--spacing-unit) * 4);
  line-height: var(--leading-relaxed);
}

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

ul {
  list-style: none;
}

/* ===================================
   LAYOUT
   =================================== */

#wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.container {
  width: 100%;
  max-width: var(--container-max);
  margin: 0 auto;
  padding: 0 calc(var(--spacing-unit) * 6);
}

/* ===================================
   HEADER & NAVIGATION
   =================================== */

header {
  background-color: var(--color-green-dark);
}

header .max-width {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: calc(var(--spacing-unit) * 6);
}

#sf-logo img {
  height: calc(var(--spacing-unit) * 14);
  width: auto;
}

@media (min-width: 48rem) {
  header {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 8);
  }
}

@media (min-width: 64rem) {
  header {
    padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 12);
  }

}

nav ul {
  display: flex;
  gap: calc(var(--spacing-unit) * 8);
  align-items: center;
  flex-wrap: wrap;
}

nav li {
  position: relative;
  font-weight: var(--font-semibold);
  font-size: var(--text-sm);
  cursor: pointer;
  color: var(--color-white);
  transition: color var(--transition-normal);
}

nav li:hover {
  color: var(--color-gold);
}

/* Dropdown indicators - add arrows for About and Give */
.nav-about::after,
.nav-give::after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: calc(var(--spacing-unit) * 2);
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  vertical-align: middle;
  transition: transform var(--transition-normal);
}

.nav-about:hover::after,
.nav-give:hover::after {
  transform: rotate(180deg);
}

/* Dropdown menus - matches React site exactly */
nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: calc(var(--spacing-unit) * 2); /* pt-2 = 8px */
  width: 14rem; /* w-56 = 224px */
  z-index: 50;
}

nav li:hover > ul {
  display: block;
}

/* Inner wrapper with visual styling */
nav li ul::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--color-white);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(229, 244, 207, 0.2);
  pointer-events: none;
  margin-top: calc(var(--spacing-unit) * 2);
}

nav li ul li {
  position: relative;
  width: 100%;
  text-align: left;
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 4); /* py-3 px-4 = 12px 16px */
  font-size: var(--text-sm);
  color: var(--color-green);
  font-weight: var(--font-medium);
  transition: background-color 200ms;
  border-bottom: 1px solid var(--color-mint);
  cursor: pointer;
  background: transparent;
  margin: 0;
  display: block;
}

nav li ul li:first-child {
  margin-top: calc(var(--spacing-unit) * 2);
}

nav li ul li:last-child {
  border-bottom: 0;
}

nav li ul li::after {
  display: none;
}

nav li ul li:hover {
  background-color: var(--color-mint);
  color: var(--color-green);
}

/* Donate button in nav */
.nav-donate {
  background-color: var(--color-gold);
  color: var(--text-color);
  padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 6);
  border-radius: var(--radius-2xl);
  font-weight: var(--font-semibold);
  transition: all var(--transition-normal);
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
}

.nav-donate .heart-icon {
  width: calc(var(--spacing-unit) * 4);
  height: calc(var(--spacing-unit) * 4);
  stroke-width: 2;
}

.nav-donate:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
  color: var(--text-color);
}

/* ===================================
   BUTTONS
   =================================== */

button,
.btn-primary,
.btn-outline,
.btn-gold {
  display: inline-block;
  padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 6);
  border-radius: var(--radius-2xl);
  font-size: var(--text-sm);
  font-weight: var(--font-semibold);
  font-family: var(--font-sans);
  text-align: center;
  cursor: pointer;
  border: none;
  transition: all var(--transition-normal);
}

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

.support-options a.btn-primary {
  color: var(--color-white);
}


.btn-primary:hover {
  background-color: var(--color-green-dark);
}

.btn-primary:active {
  transform: scale(0.95);
}

.btn-outline {
  background-color: transparent;
  color: var(--color-green);
  border: 2px solid var(--color-green);
}

.btn-outline:hover {
  background-color: var(--color-green);
  color: var(--color-white);
}

.btn-outline:active {
  transform: scale(0.95);
}

.btn-gold {
  background-color: var(--color-gold);
  color: var(--text-color);
}

.btn-gold:hover {
  filter: brightness(1.1);
  transform: translateY(-2px);
}

.btn-gold:active {
  transform: scale(0.95);
}

/* =================================== 
   max-width: keep all content within a consistent width
   =================================== */
.max-width {
  width: 100%;
  padding-left: 1rem;
  padding-right: 1rem;
  margin: 0 auto;
}

@media (min-width: 48rem) {
  .max-width {
    padding-left: 4rem;
    padding-right: 4rem;
  }
}

@media (min-width: 64rem) {
  .max-width {
    padding-left: 6rem;
    padding-right: 6rem;
  }
}

@media (min-width: 80rem) {
  .max-width {
    padding-left: 8rem;
    padding-right: 8rem;
  }
}
/*   =================================== */




/* ===================================
   HERO SECTION
   =================================== */

.page-hero {
  position: relative;
  overflow: hidden;
  background-color: var(--color-green-darker);
  color: var(--color-white);
  padding-top: calc(var(--spacing-unit) * 12);
  padding-bottom: calc(var(--spacing-unit) * 12);
  padding-left: calc(var(--spacing-unit) * 6);
  padding-right: calc(var(--spacing-unit) * 6);
  text-align: left;
}


.page-hero img {
  width: 30rem;
  margin-bottom: 0;
  display: block;
  position: relative;
  z-index: 10;
}

.page-hero h3 {
  font-family: var(--font-script);
  font-size: var(--text-2xl);
  font-weight: var(--font-regular);
  color: var(--color-gold);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: 0;
  position: relative;
  z-index: 10;
}

.page-hero h1 {
  font-size: var(--text-4xl);
  margin-top: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 8);
  margin-left: 0;
  line-height: var(--leading-tight);
  color: var(--color-white);
  font-weight: var(--font-bold);
  position: relative;
  z-index: 10;
  text-align: left;
}

@media (min-width: 48rem) {
  .page-hero h1 {
    font-size: var(--text-5xl);
    margin-bottom: calc(var(--spacing-unit) * 10);
  }
}

@media (min-width: 64rem) {
  .page-hero h1 {
    font-size: var(--text-7xl);
    margin-bottom: calc(var(--spacing-unit) * 12);
  }
}

.page-hero p {
  font-size: var(--text-base);
  font-weight: 300;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  margin-left: 0;
  padding-left: 0;
  color: var(--color-white);
  position: relative;
  z-index: 10;
  text-align: left;
  max-width: 672px;
}

@media (min-width: 48rem) {
  .page-hero p {
    font-size: var(--text-lg);
  }
}

.page-hero p:last-of-type {
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.page-hero button {
  margin-top: calc(var(--spacing-unit) * 4);
  margin-left: 0;
  position: relative;
  z-index: 10;
}

/* ===================================
   SECTIONS
   =================================== */

section {
  padding: calc(var(--spacing-unit) * 12) 0;
}

@media (min-width: 48rem) {
  section {
    padding-top: calc(var(--spacing-unit) * 16) 0;
  }
}

@media (min-width: 64rem) {
  section {
    padding: calc(var(--spacing-unit) * 20) 0;
  }
}

section h2 {
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

section h5 {
  text-align: center;
}

section  p {
  text-align: center;
  font-size: clamp(var(--text-base), 4vw, var(--text-lg));
}

/* Support Our Work Section */
#support-our-work {
  background-color: var(--color-white);
}

#support-our-work h2, #support-our-work h5  {
  color: var(--color-green-dark);
  text-align: left;
}

#support-our-work .give-card h4 {
  color: var(--color-white);
}
#support-our-work p {
  text-align: left;
}

/* Why Support Matters Section */
#why-support-matters {
  background-color: var(--color-green-dark);
}

#why-support-matters h2 {
  font-size: clamp(var(--text-2xl), 4vw, var(--text-4xl));
  color: var(--color-gold);
}

#why-support-matters p  {
  color: var(--color-white);
}

/* Our Impact Section */
#our-impact {
  background-color: var(--color-mint);
}

#our-impact .grid-elem {
  background-color: var(--color-white);
  border: 1px solid var(--color-black);
  border-radius: 1.25rem;
  text-align: left;
}

#our-impact h5, #our-impact h2, #our-impact p, #our-impact .grid-elem p {
  text-align: left;
}

#our-impact h2 {
  color: var(--color-green-dark);
}

/* In Suffolk County Section (Quote) */
#in-suffolk-county {
  background-color: #f7f9fb; /* Per user instructions */
  padding: calc(var(--spacing-unit) * 16) calc(var(--spacing-unit) * 6);
  text-align: center;
}

#in-suffolk-county p {
  font-family: var(--font-serif);
  font-size: clamp(var(--text-xl), 3vw, var(--text-3xl));
  font-style: italic;
  line-height: var(--leading-snug);
  max-width: 48rem;
  margin: 0 auto calc(var(--spacing-unit) * 4);
  color: var(--color-green-dark);
}

#in-suffolk-county cite {
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-style: normal;
  font-weight: var(--font-semibold);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gold);
}

/* ===================================
   GRID LAYOUTS
   =================================== */

/* Four-Two-One Grid (for Give Cards) */
.grid-four-two-one {
  width: 100%;
}


/* Give Cards with Hover Effects */
.give-card {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  cursor: pointer;
  transition: all var(--transition-slow);
  display: block;
}

.give-card:hover {
  transform: translateY(calc(var(--spacing-unit) * -2));
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.give-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-slower);
}

.give-card:hover img {
  transform: scale(1.1);
}

/* Gradient overlay */
.give-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.2));
  opacity: 0.6;
  transition: opacity var(--transition-slow);
}

.give-card:hover::after {
  opacity: 0.8;
}

.give-card-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  padding: calc(var(--spacing-unit) * 8);
  color: var(--color-white);
  z-index: 10;
  transition: transform var(--transition-slow);
}

.give-card-content span {
  display: block;
  font-size: 10px;
  font-weight: var(--font-bold);
  letter-spacing: 2.4px;
  text-transform: uppercase;
  color: var(--color-gold);
  margin-bottom: calc(var(--spacing-unit) * 2);
  opacity: 0;
  transform: translateY(calc(var(--spacing-unit) * 4));
  transition: all var(--transition-slow);
}

.give-card:hover .give-card-content span {
  opacity: 1;
  transform: translateY(0);
}

.give-card-content h4 {
  font-family: var(--font-serif);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  font-weight: var(--font-bold);
  margin: 0;
}

/* Three-Two-One Grid (for Impact Items) */
.grid-three-two-one {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
  margin-top: calc(var(--spacing-unit) * 12);
  max-width: 72rem;
  margin-left: auto;
  margin-right: auto;
}

@media (min-width: 48rem) {
  .grid-three-two-one {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid-three-two-one {
    grid-template-columns: repeat(3, 1fr);
  }
}

.grid-elem {
  text-align: center;
  padding: calc(var(--spacing-unit) * 6);
}

.grid-elem svg {
  width: calc(var(--spacing-unit) * 12);
  height: calc(var(--spacing-unit) * 12);
  margin: 0 auto calc(var(--spacing-unit) * 4);
  color: var(--color-green);
  stroke-width: 1.5;
}

.grid-elem h3 {
  font-size: var(--text-xl);
  margin-bottom: calc(var(--spacing-unit) * 3);
  color: var(--text-color);
}

.grid-elem p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin: 0;
  color: var(--text-color);
}

/* ===================================
   FOOTER
   =================================== */

footer {
  background-color: var(--color-green-dark);
  color: var(--color-white);
  padding-top: 2rem;
  padding-bottom: 2rem;
}

footer .max-width {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
} 



@media (min-width: 48rem) {
  footer .max-width {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 16);
  }
}

@media (min-width: 64rem) {
  footer .max-width {
    grid-template-columns: repeat(3, 1fr);
  }
}

.footer-area h3 {
  font-size: var(--text-lg);
  font-family: var(--font-sans);
  font-weight: var(--font-semibold);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: var(--color-white);
}

.footer-area-logo .ls-logo {
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.footer-area-logo .ls-logo img {
  height: calc(var(--spacing-unit) * 20);
  width: auto;
}

.footer-area-logo p {
  font-size: var(--text-base);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  opacity: 0.9;
  font-style: italic;
}

.footer-area-logo div {
  font-size: var(--text-sm);
  opacity: 0.7;
}

.footer-area p {
  font-size: var(--text-sm);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 2);
  opacity: 0.8;
}

.footer-area ul {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 3);
}

@media (min-width: 48rem) {
  .footer-area-quick-links ul {
    grid-template-columns: repeat(2, 1fr);
    gap: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 6);
  }
}

.footer-area ul li {
  margin-bottom: 0;
}

.footer-area ul li a {
  color: var(--color-white);
  font-size: var(--text-sm);
  opacity: 0.8;
  transition: opacity var(--transition-normal);
  display: inline-block;
}

.footer-area ul li a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-wide-area {
  grid-column: 1 / -1;
  padding-top: calc(var(--spacing-unit) * 12);
  margin-top: calc(var(--spacing-unit) * 4);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  text-align: center;
}

.footer-wide-area > p:first-child {
  font-size: var(--text-sm);
  opacity: 0.6;
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.terms-and-privacy {
  display: flex;
  gap: calc(var(--spacing-unit) * 8);
  justify-content: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
  flex-wrap: wrap;
}

.terms-and-privacy a {
  font-size: var(--text-sm);
  color: var(--color-white);
  opacity: 0.7;
  transition: opacity var(--transition-normal);
}

.terms-and-privacy a:hover {
  opacity: 1;
  text-decoration: underline;
}

.footer-wide-area .foundation {
  font-size: var(--text-xs);
  opacity: 0.6;
  margin-bottom: 0;
}

/* ===================================
   RESPONSIVE TYPOGRAPHY
   =================================== */

@media (min-width: 48rem) {
  h1 {
    font-size: var(--text-5xl);
  }

  h2 {
    font-size: var(--text-4xl);
  }

  h3 {
    font-size: var(--text-2xl);
  }
}

@media (min-width: 64rem) {
  h1 {
    font-size: clamp(var(--text-4xl), 5vw, var(--text-7xl));
  }
}

/* ===================================
   UTILITY CLASSES
   =================================== */
.no-break {
  white-space: nowrap;
}
.text-center {
  text-align: center;
}

.text-green {
  color: var(--color-green);
}

.text-gold {
  color: var(--color-gold);
}

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

.bg-warm {
  background-color: var(--color-warm-bg);
}

.bg-mint {
  background-color: var(--color-mint-pale);
}

/* ===================================
   ABOUT PAGE STYLES
   =================================== */

/* Our History Section */
#our-history {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#our-history h2 {
  color: var(--color-green-dark);
}

#our-history blockquote {
  font-weight: bold;
  color: var(--color-green-dark);
  font-style: italic;
}
.content-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  align-items: center;
}

@media (min-width: 64rem) {
  .content-two-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

.column-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-2xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

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

.column-text {
  text-align: left;
}

.column-text h5 {
  text-align: left;
}

.column-text h2 {
  text-align: left;
}

.column-text p {
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 4);
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

.column-text blockquote {
  padding: calc(var(--spacing-unit) * 6);
  background-color: var(--color-mint-pale);
  border-left: 4px solid var(--color-gold);
  margin: calc(var(--spacing-unit) * 4) 0;
}

.column-text blockquote p {
  font-weight: var(--font-semibold);
  color: var(--color-green);
  font-style: italic;
  margin-bottom: 0;
}

/* Who We Are Section */
#who-we-are {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#who-we-are .max-width {
  max-width: 80rem;
  margin: 0 auto;
}

#who-we-are h2 {
  font-size: var(--text-5xl);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 8);
  color: var(--color-green-dark);
}

#who-we-are > .max-width > p {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 4);
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

/* Accordion Styles */
.accordion {
  margin-top: calc(var(--spacing-unit) * 12);
}

.accordion-item {
  border: 1px solid rgba(9, 104, 57, 0.1);
  border-radius: var(--radius-xl);
  margin-bottom: calc(var(--spacing-unit) * 4);
  background-color: var(--color-white);
  overflow: hidden;
  transition: all var(--transition-normal);
}

.accordion-item:hover {
  border-color: rgba(9, 104, 57, 0.2);
}

.accordion-item h3 {
  padding: calc(var(--spacing-unit) * 6);
  margin: 0;
  cursor: pointer;
  font-size: var(--text-xl);
  color: var(--color-green);
  position: relative;
  transition: background-color var(--transition-normal);
}

.accordion-item h3::after {
  content: "+";
  position: absolute;
  right: calc(var(--spacing-unit) * 6);
  top: 50%;
  transform: translateY(-50%);
  font-size: var(--text-2xl);
  font-weight: var(--font-light);
  color: var(--color-gold);
  transition: transform var(--transition-normal);
}

.accordion-item:hover h3 {
  background-color: var(--color-mint-pale);
}

.accordion-item.active h3::after {
  content: "−";
  transform: translateY(-50%) rotate(0deg);
}

.accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height var(--transition-slow);
}

.accordion-item.active .accordion-content {
  max-height: 2000px;
}

.accordion-content-inner {
  padding: 0 calc(var(--spacing-unit) * 6) calc(var(--spacing-unit) * 6);
}

.accordion-content p {
  text-align: left;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: rgba(26, 42, 30, 0.7);
}

.accordion-content p:last-child {
  margin-bottom: 0;
}

.accordion-content ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

.accordion-content ul li {
  display: flex;
  gap: calc(var(--spacing-unit) * 4);
  margin-bottom: calc(var(--spacing-unit) * 4);
  align-items: flex-start;
}

.accordion-content ul li:last-child {
  margin-bottom: 0;
}

.accordion-content ul li::before {
  content: "";
  width: calc(var(--spacing-unit) * 1.5);
  height: calc(var(--spacing-unit) * 1.5);
  background-color: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: calc(var(--spacing-unit) * 1.5);
}

.accordion-content strong {
  display: block;
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 0.5);
  font-weight: var(--font-semibold);
}

.accordion-content .text-muted {
  color: rgba(26, 42, 30, 0.7);
}

/* What We Support Section */
#what-we-support {
  background-color: var(--color-mint);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#what-we-support h5 {
  text-align: center;
}

#what-we-support h2 {
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 8);
}

#what-we-support > .max-width > p {
  text-align: center;
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

#what-we-support .support-card {
  border: 1px solid black;
}
.grid-four-two-one {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
  .grid-four-two-one {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid-four-two-one {
    grid-template-columns: repeat(4, 1fr);
  }
}

.support-card {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 8);
  border-radius: var(--radius-2xl);
  text-align: center;
  border: 1px solid rgba(9, 104, 57, 0.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-normal);
}

.support-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.support-card svg {
  width: calc(var(--spacing-unit) * 8);
  height: calc(var(--spacing-unit) * 8);
  color: var(--color-green);
  margin: 0 auto calc(var(--spacing-unit) * 6);
  transform: scale(1.25);
}

.support-card h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-xl);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.support-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0;
  color: rgba(26, 42, 30, 0.7);
}

/* Governance Section */
#governance {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#governance .max-width {
  max-width: 80rem;
  margin: 0 auto;
}

#governance h5 {
  text-align: center;
}

#governance h2 {
  color: var(--color-green-dark);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 8);
}

#governance p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
}

#governance p.highlight {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-green);
  font-weight: var(--font-medium);
  margin-bottom: 0;
}

/* CTA Legacy Section */
#cta-legacy {
  background-color: var(--color-mint-pale);
  padding: calc(var(--spacing-unit) * 12) 0;
  text-align: center;
}

#cta-legacy h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 8);
  text-align: center;
}

/* ===================================
   VISION PAGE STYLES
   =================================== */

/* Page Header (alternative to page-hero) */
.page-header {
  background-color: var(--color-green-darker);
  color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
  text-align: center;
}

.page-header h1 {
  font-size: var(--text-4xl);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: var(--color-white);
  text-align: center;
}

@media (min-width: 48rem) {
  .page-header h1 {
    font-size: var(--text-5xl);
  }
}

.page-header h2 {
  font-size: var(--text-3xl);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: var(--color-gold);
  text-align: center;
  line-height: var(--leading-tight);
}

@media (min-width: 48rem) {
  .page-header h2 {
    font-size: var(--text-5xl);
  }
}

.page-header p {
  font-size: var(--text-lg);
  font-weight: var(--font-light);
  color: var(--color-white);
  text-align: center;
  margin-bottom: 0;
  max-width: 42rem;
  margin-left: auto;
  margin-right: auto;
  opacity: 0.9;
}

@media (min-width: 48rem) {
  .page-header p {
    font-size: var(--text-xl);
  }
}

/* Vision Quote Section */
#vision-quote {
  background-color: var(--color-mint);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#vision-quote blockquote {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

#vision-quote blockquote p {
  font-size: var(--text-2xl);
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--color-green);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  text-align: center;
}

@media (min-width: 48rem) {
  #vision-quote blockquote p {
    font-size: var(--text-3xl);
  }
}

#vision-quote blockquote p:last-child {
  margin-bottom: 0;
}

/* Vision Details Section */
#vision-details {
  background-color: var(--color-mint-pale);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#vision-details .max-width {
  max-width: 56rem;
  margin: 0 auto;
}

#vision-details h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 8);
  color: var(--color-green);
}

#vision-details p {
  text-align: left;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: rgba(26, 42, 30, 0.7);
}

#vision-details button {
  display: block;
  margin: calc(var(--spacing-unit) * 8) auto 0;
}

/* Bringing Vision to Life Section */
#bringing-vision-to-life {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#bringing-vision-to-life h5 {
  text-align: left;
}

#bringing-vision-to-life h2 {
  color: var(--color-green-dark);
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 10);
}

#bringing-vision-to-life > .max-width > p {
  text-align: left;
  font-size: var(--text-lg);
  margin-bottom: calc(var(--spacing-unit) * 10);
  color: rgba(26, 42, 30, 0.7);
}

.grid-five-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
  .grid-five-columns {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .grid-five-columns {
    grid-template-columns: repeat(5, 1fr);
  }
}

.vision-pillar {
  position: relative;
  padding-left: calc(var(--spacing-unit) * 6);
  border-left: 2px solid var(--color-gold);
}

.vision-pillar h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-lg);
  line-height: var(--leading-tight);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.vision-pillar p {
  font-size: var(--text-xs);
  line-height: var(--leading-relaxed);
  margin: 0;
  text-align: left;
  color: rgba(26, 42, 30, 0.7);
}

/* Looking Ahead Section */
#looking-ahead {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 16) 0;
  text-align: center;
}

#looking-ahead .max-width {
  max-width: 80rem;
  margin: 0 auto;
}

#looking-ahead h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: center;
}

#looking-ahead p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 4);
  text-align: center;
  color: rgba(26, 42, 30, 0.7);
}

#looking-ahead p:last-child {
  margin-bottom: 0;
}

/* ===================================
   GIVE PAGE STYLES
   =================================== */

/* Ways to Give Section */
#ways-to-give {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

.give-content-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  align-items: start;
}

@media (min-width: 64rem) {
  .give-content-two-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

.give-content-left h2 {
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.give-content-left p {
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.give-badge {
  display: inline-flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 2);
  padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 4);
  background-color: var(--color-mint);
  border-radius: var(--radius-full);
  color: var(--color-green);
  font-weight: var(--font-bold);
  font-size: var(--text-sm);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

.give-badge svg {
  width: calc(var(--spacing-unit) * 4);
  height: calc(var(--spacing-unit) * 4);
}

.give-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 6);
  margin-top: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
  .give-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.give-option-card {
  padding: calc(var(--spacing-unit) * 6);
  background-color: var(--color-white);
  border: 1px solid rgba(9, 104, 57, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.give-option-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.give-option-card svg {
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 4);
  width: calc(var(--spacing-unit) * 8);
  height: calc(var(--spacing-unit) * 8);
}

.give-option-card h3 {
  font-size: var(--text-xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.give-option-card p {
  font-size: var(--text-sm);
  text-align: left;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
  flex-grow: 1;
}

.give-option-card a {
  width: 100%;
  text-align: center;
  padding: calc(var(--spacing-unit) * 2);
  font-size: var(--text-sm);
}

.give-content-right {
  position: relative;
  height: 100%;
}

.give-content-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius-3xl);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

/* Special Giving Section */
#special-giving {
  background-color: var(--color-mint);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#special-giving h5 {
  text-align: center;
}

#special-giving h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 4);
}

#special-giving > .max-width > p {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.give-campaigns-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
  max-width: 72rem;
  margin: 0 auto;
}

@media (min-width: 48rem) {
  .give-campaigns-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .give-campaigns-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.campaign-card {
  padding: calc(var(--spacing-unit) * 8);
  background-color: var(--color-white);
  border: 1px solid rgba(9, 104, 57, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-normal);
  text-align: center;
}

.campaign-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.campaign-card h3 {
  font-size: var(--text-xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.campaign-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
}

/* Donor Recognition Section */
#donor-recognition {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

.recognition-two-column {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 16);
  align-items: center;
}

@media (min-width: 64rem) {
  .recognition-two-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

.recognition-content h5 {
  text-align: left;
}

.recognition-content h2 {
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.recognition-content p {
  text-align: left;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
}

.recognition-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.recognition-list li {
  display: flex;
  align-items: start;
  gap: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 4);
  color: rgba(26, 42, 30, 0.7);
}

.recognition-list li::before {
  content: "";
  width: calc(var(--spacing-unit) * 1.5);
  height: calc(var(--spacing-unit) * 1.5);
  background-color: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: calc(var(--spacing-unit) * 2);
}

.recognition-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

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

/* ===================================
   SCHOLARSHIPS PAGE STYLES
   =================================== */

/* Scholarship Intro Section */
#scholarship-intro {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#scholarship-intro h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

#scholarship-intro > .max-width > p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
  color: rgba(26, 42, 30, 0.7);
}

.scholarship-programs {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 16);
}

.scholarship-program {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  align-items: center;
}

@media (min-width: 64rem) {
  .scholarship-program {
    grid-template-columns: repeat(2, 1fr);
  }

  .scholarship-program.reverse {
    direction: rtl;
  }

  .scholarship-program.reverse > * {
    direction: ltr;
  }
}

.program-badge {
  display: inline-block;
  padding: calc(var(--spacing-unit) * 1) calc(var(--spacing-unit) * 4);
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: var(--text-xs);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.scholarship-program-content h3 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 4);
  text-align: left;
}

.scholarship-program-content h4 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 3);
  text-align: left;
}

.scholarship-program-content p {
  text-align: left;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
}

.check-list {
  list-style: none;
  margin: 0 0 calc(var(--spacing-unit) * 8) 0;
  padding: 0;
}

.check-list li {
  display: flex;
  align-items: center;
  gap: calc(var(--spacing-unit) * 3);
  margin-bottom: calc(var(--spacing-unit) * 3);
  font-size: var(--text-sm);
  color: rgba(26, 42, 30, 0.7);
}

.check-list li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-unit) * 4.5);
  height: calc(var(--spacing-unit) * 4.5);
  background-color: var(--color-mint);
  color: var(--color-green);
  border-radius: 50%;
  flex-shrink: 0;
  font-weight: var(--font-bold);
}

.program-note {
  font-size: var(--text-sm);
  font-style: italic;
  color: rgba(26, 42, 30, 0.7);
  margin-bottom: 0;
}

.scholarship-program-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
}

.scholarship-program-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Collaborative Model Section */
#collaborative-model {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 16) 0;
  position: relative;
}

#collaborative-model h5 {
  text-align: center;
}

#collaborative-model h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

#collaborative-model > .max-width > p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
  color: rgba(26, 42, 30, 0.7);
}

.partnership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
  max-width: 72rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
}

@media (min-width: 48rem) {
  .partnership-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .partnership-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.partnership-card {
  padding: calc(var(--spacing-unit) * 10);
  background-color: var(--color-white);
  border-radius: var(--radius-3xl);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
  text-align: center;
  transition: box-shadow var(--transition-normal);
}

.partnership-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.partnership-icon {
  width: calc(var(--spacing-unit) * 16);
  height: calc(var(--spacing-unit) * 16);
  background-color: rgba(212, 175, 55, 0.1);
  color: var(--color-gold);
  border-radius: var(--radius-2xl);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto calc(var(--spacing-unit) * 6);
}

.partnership-card h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-xl);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.partnership-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin: 0;
  color: rgba(26, 42, 30, 0.7);
}

.model-details {
  max-width: 64rem;
  margin: 0 auto;
  background-color: var(--color-white);
  border-radius: var(--radius-3xl);
  padding: calc(var(--spacing-unit) * 10);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  align-items: center;
}

@media (min-width: 48rem) {
  .model-details {
    grid-template-columns: repeat(2, 1fr);
  }
}

.model-content h4 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-2xl);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: left;
}

.model-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 4);
}

.model-list li {
  display: flex;
  align-items: start;
  gap: calc(var(--spacing-unit) * 3);
}

.model-list li::before {
  content: "✓";
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(var(--spacing-unit) * 5);
  height: calc(var(--spacing-unit) * 5);
  background-color: rgba(212, 175, 55, 0.2);
  color: var(--color-gold);
  border-radius: 50%;
  flex-shrink: 0;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  margin-top: calc(var(--spacing-unit) * 0.5);
}

.model-quote {
  padding: calc(var(--spacing-unit) * 8);
  background-color: rgba(229, 244, 207, 0.2);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-mint);
}

.model-quote p {
  color: var(--color-green);
  font-family: var(--font-serif);
  font-style: italic;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  text-align: center;
  margin: 0;
}

/* Pathway Opportunity Section */
#pathway-opportunity {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#pathway-opportunity h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

#pathway-opportunity > .max-width > p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 10);
  color: rgba(26, 42, 30, 0.7);
}

.opportunities-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
  .opportunities-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .opportunities-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.opportunity-item {
  text-align: center;
}

.opportunity-icon {
  width: calc(var(--spacing-unit) * 12);
  height: calc(var(--spacing-unit) * 12);
  background-color: var(--color-mint);
  color: var(--color-green);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto calc(var(--spacing-unit) * 4);
}

.opportunity-item h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 2);
  text-align: center;
}

.opportunity-item p {
  font-size: var(--text-xs);
  text-align: center;
  margin: 0;
  color: rgba(26, 42, 30, 0.7);
}

/* Funding Support Section */
#funding-support {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#funding-support h5 {
  text-align: center;
}

#funding-support h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

#funding-support > .max-width > p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 10);
  color: rgba(26, 42, 30, 0.7);
}

.funding-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 6);
}

@media (min-width: 48rem) {
  .funding-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .funding-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.funding-card {
  padding: calc(var(--spacing-unit) * 8);
  background-color: var(--color-white);
  border: 1px solid rgba(9, 104, 57, 0.1);
  border-radius: var(--radius-sm);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-normal);
  text-align: center;
  display: flex;
  flex-direction: column;
}

.funding-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.funding-card h3 {
  font-size: var(--text-xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 3);
}

.funding-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 6);
  color: rgba(26, 42, 30, 0.7);
  flex-grow: 1;
}

/* ===================================
   BRICK CAMPAIGN STYLES
   =================================== */

/* Permanent Mark Section */
#permanent-mark {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#permanent-mark .max-width {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 16);
  align-items: center;
}

@media (min-width: 64rem) {
  #permanent-mark .max-width {
    grid-template-columns: repeat(2, 1fr);
  }
}

#permanent-mark h5 {
  text-align: left;
}

#permanent-mark h2 {
  text-align: left;
}

#permanent-mark p {
  text-align: left;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

.brick-quote {
  padding: calc(var(--spacing-unit) * 6);
  background-color: var(--color-mint-pale);
  border-left: 4px solid var(--color-gold);
  border-radius: var(--radius-sm);
  font-style: italic;
  font-weight: var(--font-semibold);
  color: var(--color-green);
  text-align: left;
  margin: calc(var(--spacing-unit) * 6) 0;
}

.brick-quote p {
  margin: 0;
  text-align: left;
}

.brick-walkway-image {
  width: 100%;
  height: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-sm);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.1);
  object-fit: cover;
  display: block;
}

/* Brick Options Section */
#brick-options {
  background-color: var(--color-mint);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#brick-options h5,
#brick-options h2,
#brick-options > .max-width > p {
  text-align: center;
}

#brick-options > .max-width > p {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.brick-options-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 8);
  max-width: 90rem;
  margin: 0 auto;
}

@media (min-width: 48rem) {
  .brick-options-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .brick-options-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

.brick-option-card {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 8);
  border-radius: var(--radius-sm);
  border: 1px solid rgba(9, 104, 57, 0.1);
  text-align: center;
  transition: all var(--transition-normal);
  display: flex;
  flex-direction: column;
}

.brick-option-card:hover {
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.brick-size {
  display: inline-block;
  padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 6);
  background-color: var(--color-green);
  color: var(--color-white);
  font-size: var(--text-xl);
  font-weight: var(--font-bold);
  border-radius: var(--radius-full);
  margin: 0 auto calc(var(--spacing-unit) * 4);
}

.brick-price {
  font-size: var(--text-4xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-gold);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.brick-spec {
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-bottom: calc(var(--spacing-unit) * 1);
}

.brick-spec:first-of-type {
  font-size: var(--text-lg);
  color: var(--color-green);
  letter-spacing: 1px;
}

.brick-spec:last-of-type {
  color: rgba(9, 104, 57, 0.6);
  margin-bottom: calc(var(--spacing-unit) * 4);
}

.brick-option-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin-bottom: calc(var(--spacing-unit) * 6);
  flex-grow: 1;
}

.brick-option-card .btn-primary {
  width: 100%;
  margin: 0;
}

/* Ways to Personalize Section */
#ways-to-personalize {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#ways-to-personalize h5,
#ways-to-personalize h2,
#ways-to-personalize > .max-width > p {
  text-align: center;
}

#ways-to-personalize > .max-width > p {
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.personalize-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  max-width: 80rem;
  margin: 0 auto;
}

@media (min-width: 48rem) {
  .personalize-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 64rem) {
  .personalize-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.personalize-item {
  text-align: center;
  padding: 0;
}

.personalize-item svg {
  width: calc(var(--spacing-unit) * 8);
  height: calc(var(--spacing-unit) * 8);
  color: var(--color-gold);
  margin: 0 auto calc(var(--spacing-unit) * 4);
  display: block;
  transition: transform var(--transition-normal);
}

.personalize-item:hover svg {
  transform: scale(1.1);
}

.personalize-item h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  text-align: center;
  margin: 0;
}

/* Legacy CTA Section */
#legacy-cta {
  background-color: var(--color-mint-pale);
  color: var(--color-green);
  padding: calc(var(--spacing-unit) * 16) 0;
  text-align: center;
}

#legacy-cta h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 8);
  text-align: center;
}

#legacy-cta .btn-gold {
  display: inline-block;
}

/* ===================================
   BRACELET CAMPAIGN STYLES
   =================================== */

/* Exclusive Design Section */
#exclusive-design {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#exclusive-design h5,
#exclusive-design h2 {
	text-align: left;
}

#exclusive-design > .max-width > p {
	text-align: left;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

.bracelet-content-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 12);
	align-items: center;
	margin-top: calc(var(--spacing-unit) * 12);
}

@media (min-width: 64rem) {
	.bracelet-content-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.bracelet-pricing {
	padding: calc(var(--spacing-unit) * 8) calc(var(--spacing-unit) * 4);
	background-color: var(--color-mint-pale);
	border-left: 4px solid var(--color-gold);
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
}

.price {
	font-size: var(--text-4xl);
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	margin-bottom: calc(var(--spacing-unit) * 1);
}

.price-note {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	font-weight: var(--font-bold);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

.bracelet-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing-unit) * 2);
}

.bracelet-features li {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 3);
	color: var(--color-green);
	font-weight: var(--font-semibold);
	font-size: var(--text-sm);
}

.bracelet-features li::before {
	content: "";
	width: calc(var(--spacing-unit) * 1.5);
	height: calc(var(--spacing-unit) * 1.5);
	background-color: var(--color-gold);
	border-radius: var(--radius-full);
	flex-shrink: 0;
}

.bracelet-buttons {
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing-unit) * 4);
	margin-top: calc(var(--spacing-unit) * 6);
}

@media (min-width: 40rem) {
	.bracelet-buttons {
		flex-direction: row;
	}
}

.bracelet-buttons .btn-gold,
.bracelet-buttons .btn-outline {
	padding: calc(var(--spacing-unit) * 2) calc(var(--spacing-unit) * 12);
	font-size: var(--text-sm);
}

.bracelet-image {
	width: 100%;
	max-width: 28rem;
	aspect-ratio: 3 / 2;
	background-color: var(--color-mint);
	border-radius: var(--radius-3xl);
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(212, 175, 55, 0.1);
	object-fit: cover;
	display: block;
	margin: 0 auto;
	transition: transform var(--transition-slower);
}

.bracelet-image:hover {
	transform: scale(1.1);
}

.image-caption {
	text-align: center;
	font-style: italic;
	font-size: var(--text-sm);
	color: rgba(26, 42, 30, 0.7);
	margin-top: calc(var(--spacing-unit) * 4);
}

/* Symbol of Connection Section */
#symbol-of-connection {
	background-color: var(--color-mint);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#symbol-of-connection .max-width {
	max-width: 64rem;
	margin: 0 auto;
}

#symbol-of-connection h5,
#symbol-of-connection h2,
#symbol-of-connection > .max-width > p {
	text-align: center;
}

#symbol-of-connection > .max-width > p {
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

.connection-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
	.connection-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.connection-card {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 8);
	border-radius: var(--radius-2xl);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
	border: 1px solid rgba(9, 104, 57, 0.1);
}

.connection-card h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-xl);
	margin-bottom: calc(var(--spacing-unit) * 4);
	text-align: left;
}

.connection-card p {
	text-align: left;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 6);
}

.design-features,
.impact-features {
	list-style: none;
	padding: 0;
	margin: 0;
	display: flex;
	flex-direction: column;
	gap: calc(var(--spacing-unit) * 3);
}

.design-features li {
	display: flex;
	align-items: start;
	gap: calc(var(--spacing-unit) * 3);
	font-size: var(--text-sm);
}

.design-features li::before {
	content: "";
	width: calc(var(--spacing-unit) * 4.5);
	height: calc(var(--spacing-unit) * 4.5);
	min-width: calc(var(--spacing-unit) * 4.5);
	background-color: transparent;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526'/%3E%3Ccircle cx='12' cy='8' r='6'/%3E%3C/svg%3E");
	background-size: 18px 18px;
	background-position: center;
	background-repeat: no-repeat;
	margin-top: calc(var(--spacing-unit) * 0.5);
}

.impact-features {
	gap: calc(var(--spacing-unit) * 4);
}

.impact-features li {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 4);
	padding: calc(var(--spacing-unit) * 4);
	background-color: var(--color-mint-pale);
	border-radius: var(--radius-xl);
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-green);
}

.impact-features li::before {
	content: "";
	width: calc(var(--spacing-unit) * 6);
	height: calc(var(--spacing-unit) * 6);
	min-width: calc(var(--spacing-unit) * 6);
	background-color: transparent;
	background-size: 24px 24px;
	background-position: center;
	background-repeat: no-repeat;
}

.impact-features li:first-child::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 9.5a5.5 5.5 0 0 1 9.591-3.676.56.56 0 0 0 .818 0A5.49 5.49 0 0 1 22 9.5c0 2.29-1.5 4-3 5.5l-5.492 5.313a2 2 0 0 1-3 .019L5 15c-1.5-1.5-3-3.2-3-5.5'/%3E%3C/svg%3E");
}

.impact-features li:last-child::before {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21.42 10.922a1 1 0 0 0-.019-1.838L12.83 5.18a2 2 0 0 0-1.66 0L2.6 9.08a1 1 0 0 0 0 1.832l8.57 3.908a2 2 0 0 0 1.66 0z'/%3E%3Cpath d='M22 10v6'/%3E%3Cpath d='M6 12.5V16a6 3 0 0 0 12 0v-3.5'/%3E%3C/svg%3E");
}

/* How to Purchase Section */
#how-to-purchase {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#how-to-purchase h5,
#how-to-purchase h2,
#how-to-purchase > .max-width > p {
	text-align: center;
}

#how-to-purchase > .max-width > p {
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

.purchase-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 8);
	max-width: 64rem;
	margin: 0 auto;
}

@media (min-width: 48rem) {
	.purchase-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.purchase-card {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 10);
	border: 1px solid rgba(9, 104, 57, 0.1);
	border-radius: var(--radius-3xl);
	text-align: center;
	transition: box-shadow var(--transition-normal);
}

.purchase-card:hover {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.purchase-card svg {
	width: calc(var(--spacing-unit) * 10);
	height: calc(var(--spacing-unit) * 10);
	color: var(--color-gold);
	margin: 0 auto calc(var(--spacing-unit) * 6);
	display: block;
}

.purchase-card h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-2xl);
	margin-bottom: calc(var(--spacing-unit) * 4);
	text-align: center;
}

.purchase-card p {
	text-align: center;
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 6);
}

.purchase-card .address {
	font-size: var(--text-sm);
	font-weight: var(--font-bold);
	color: var(--color-gold);
	text-transform: uppercase;
	letter-spacing: 2px;
	margin: 0;
}

.phone-link {
	font-size: var(--text-2xl);
	font-weight: var(--font-bold);
	color: var(--color-green);
	text-decoration: none;
	transition: color var(--transition-normal);
	display: inline-block;
}

.phone-link:hover {
	color: var(--color-gold);
}

.bracelet-quote {
	font-family: var(--font-serif);
	font-size: var(--text-xl);
	font-style: italic;
	text-align: center;
	color: var(--color-green);
	margin: calc(var(--spacing-unit) * 16) 0 calc(var(--spacing-unit) * 8);
}

.bracelet-quote + .text-center {
	margin-top: 0;
}

.bracelet-quote + .text-center .btn-gold {
	padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 12);
}

/* ===================================
   CIRCLE OF FRIENDS STYLES
   =================================== */

/* Join Circle Section */
#join-circle {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#join-circle .max-width {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 16);
	align-items: center;
}

@media (min-width: 64rem) {
	#join-circle .max-width {
		grid-template-columns: repeat(2, 1fr);
	}
}

#join-circle h2 {
	text-align: left;
}

#join-circle p {
	text-align: left;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

#join-circle .btn-gold {
	margin-top: calc(var(--spacing-unit) * 8);
	padding: calc(var(--spacing-unit) * 2.5) calc(var(--spacing-unit) * 12);
}

.circle-image {
	width: 100%;
	border-radius: var(--radius-3xl);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(212, 175, 55, 0.1);
	display: block;
	position: relative;
}

/* Circle Levels Grid */
.circle-levels-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 6);
	margin-top: calc(var(--spacing-unit) * 20);
}

@media (min-width: 48rem) {
	.circle-levels-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.circle-levels-grid {
		grid-template-columns: repeat(4, 1fr);
	}
}

.circle-level-card {
	background-color: var(--color-white);
	border: 1px solid rgba(9, 104, 57, 0.1);
	padding: calc(var(--spacing-unit) * 8);
	text-align: center;
	border-radius: var(--radius-sm);
	transition: all var(--transition-normal);
}

.circle-level-card:hover {
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.circle-level-card svg {
	width: calc(var(--spacing-unit) * 6);
	height: calc(var(--spacing-unit) * 6);
	color: var(--color-gold);
	margin: 0 auto calc(var(--spacing-unit) * 4);
	display: block;
	transition: transform var(--transition-normal);
}

.circle-level-card:hover svg {
	transform: scale(1.1);
}

.circle-level-card h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-lg);
	margin-bottom: calc(var(--spacing-unit) * 1);
	text-align: center;
}

.circle-level-card .brick-price {
	color: var(--color-gold);
	font-weight: var(--font-bold);
	font-size: var(--text-xl);
	margin-bottom: calc(var(--spacing-unit) * 4);
	font-family: var(--font-sans);
}

.circle-level-card p {
	font-size: 10px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: rgba(26, 42, 30, 0.7);
	text-align: center;
	margin: 0;
}

/* Impact Section */
#impact {
	background-color: var(--color-mint);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#impact .max-width {
	max-width: 64rem;
	margin: 0 auto;
}

#impact h5,
#impact h2,
#impact > .max-width > p {
	text-align: center;
}

#impact > .max-width > p {
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

.impact-grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 6);
}

@media (min-width: 40rem) {
	.impact-grid {
		grid-template-columns: repeat(2, 1fr);
	}
}

.impact-item {
	display: flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 3);
	padding: calc(var(--spacing-unit) * 6);
	background-color: var(--color-white);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(9, 104, 57, 0.1);
	box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
}

.impact-item::before {
	content: "";
	width: calc(var(--spacing-unit) * 2);
	height: calc(var(--spacing-unit) * 2);
	min-width: calc(var(--spacing-unit) * 2);
	background-color: var(--color-gold);
	border-radius: var(--radius-full);
}

.impact-item span {
	font-size: var(--text-sm);
	font-weight: var(--font-semibold);
	color: var(--color-green);
	text-align: left;
}

#impact > .max-width > p:last-of-type {
	margin-top: calc(var(--spacing-unit) * 12);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
	font-style: italic;
	color: var(--color-green);
	text-align: center;
}

/* Circle Donors Section */
#circle-donors {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#circle-donors h2 {
	text-align: center;
}

#circle-donors > .max-width > p {
	text-align: center;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

#circle-donors .max-width > div {
	max-width: 64rem;
	margin: 0 auto;
}

.donors-section {
	margin-bottom: calc(var(--spacing-unit) * 12);
}

.donors-section:last-child {
	margin-bottom: 0;
}

.donors-section h3 {
	color: var(--color-gold);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 4px;
	font-size: var(--text-xs);
	margin-bottom: calc(var(--spacing-unit) * 4);
	text-align: center;
}

.donors-section h3::after {
	content: "";
	display: block;
	width: 100%;
	height: 1px;
	background-color: rgba(212, 175, 55, 0.3);
	margin-top: calc(var(--spacing-unit) * 4);
}

.donor-names {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 8);
	text-align: center;
	margin-top: calc(var(--spacing-unit) * 8);
}

@media (min-width: 48rem) {
	.donor-names {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.donor-names {
		grid-template-columns: repeat(3, 1fr);
	}
}

/* Adjust grid for smaller donor lists */
.donors-section:nth-child(4) .donor-names,
.donors-section:nth-child(5) .donor-names {
	grid-template-columns: 1fr;
}

@media (min-width: 48rem) {
	.donors-section:nth-child(4) .donor-names,
	.donors-section:nth-child(5) .donor-names {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (min-width: 64rem) {
	.donors-section:nth-child(5) .donor-names {
		grid-template-columns: 1fr;
	}
}

.donor-names span {
	color: var(--color-green);
	font-family: var(--font-serif);
	font-size: var(--text-lg);
}

/* Thank You Section */
#thank-you {
	background-color: var(--color-mint-pale);
	color: var(--color-green);
	padding: calc(var(--spacing-unit) * 16) 0;
	text-align: center;
}

#thank-you h2 {
	font-size: var(--text-3xl);
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	margin-bottom: calc(var(--spacing-unit) * 4);
	text-align: center;
}

#thank-you p {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	margin-bottom: calc(var(--spacing-unit) * 8);
	max-width: 48rem;
	margin-left: auto;
	margin-right: auto;
	text-align: center;
}

#thank-you .btn-gold {
	display: inline-block;
}

/* ===================================
   BROADWAY REVUE & EVENTS STYLES
   =================================== */

/* Page Hero Override for Events */
#page-events .page-hero h2 {
	font-family: var(--font-script);
	font-weight: 400;
	color: var(--color-gold);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

/* Main Event Section */
#main-event {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#main-event .max-width {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 16);
	align-items: center;
}

@media (min-width: 64rem) {
	#main-event .max-width {
		grid-template-columns: repeat(2, 1fr);
	}
}

#main-event h5 {
	text-align: left;
}

#main-event h2 {
	text-align: left;
}

#main-event > .max-width > p {
	text-align: left;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	font-size: var(--text-lg);
	margin-bottom: calc(var(--spacing-unit) * 6);
}

.event-features {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 4);
}

@media (min-width: 40rem) {
	.event-features {
		grid-template-columns: repeat(3, 1fr);
	}
}

.event-feature {
	padding: calc(var(--spacing-unit) * 4);
	background-color: var(--color-mint-pale);
	border-radius: var(--radius-sm);
	text-align: center;
}

.event-feature svg {
	width: calc(var(--spacing-unit) * 6);
	height: calc(var(--spacing-unit) * 6);
	color: var(--color-green);
	margin: 0 auto calc(var(--spacing-unit) * 2);
	display: block;
}

.event-feature span {
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-green);
}

.video-container {
	aspect-ratio: 16 / 9;
	border-radius: var(--radius-sm);
	overflow: hidden;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
	border: 1px solid rgba(212, 175, 55, 0.1);
	position: relative;
}

.video-container iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Tickets Section */
#tickets {
	background-color: var(--color-mint);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#tickets h5,
#tickets h2,
#tickets > .max-width > p {
	text-align: center;
}

#tickets > .max-width > p {
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

#tickets .btn-gold {
	display: inline-flex;
	align-items: center;
	gap: calc(var(--spacing-unit) * 2);
	padding: calc(var(--spacing-unit) * 3) calc(var(--spacing-unit) * 8);
	font-size: var(--text-sm);
	opacity: 0.6;
	cursor: not-allowed;
}

#tickets .btn-gold svg {
	width: calc(var(--spacing-unit) * 4.5);
	height: calc(var(--spacing-unit) * 4.5);
}

.ticket-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 8);
	max-width: 80rem;
	margin: 0 auto;
}

@media (min-width: 48rem) {
	.ticket-options {
		grid-template-columns: repeat(3, 1fr);
	}
}

.ticket-card {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 8);
	border-radius: var(--radius-sm);
	border: 1px solid rgba(9, 104, 57, 0.1);
	text-align: center;
	display: flex;
	flex-direction: column;
}

.ticket-card svg {
	width: calc(var(--spacing-unit) * 6);
	height: calc(var(--spacing-unit) * 6);
	color: var(--color-green);
	margin: 0 auto calc(var(--spacing-unit) * 4);
	display: block;
}

.ticket-card h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-xl);
	margin-bottom: calc(var(--spacing-unit) * 3);
	text-align: center;
}

.ticket-card p {
	font-size: var(--text-sm);
	text-align: center;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 6);
	flex-grow: 1;
}

.ticket-card > span {
	padding-top: calc(var(--spacing-unit) * 4);
	border-top: 1px solid rgba(9, 104, 57, 0.1);
	font-size: var(--text-xs);
	font-weight: var(--font-bold);
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--color-gold);
}

/* Support Event Section */
#support-event {
	background-color: var(--color-white);
	padding: calc(var(--spacing-unit) * 16) 0;
}

#support-event h5,
#support-event h2,
#support-event > .max-width > p {
	text-align: center;
}

#support-event > .max-width > p {
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 12);
}

.support-options {
	display: grid;
	grid-template-columns: 1fr;
	gap: calc(var(--spacing-unit) * 8);
	max-width: 80rem;
	margin: 0 auto calc(var(--spacing-unit) * 12);
}

@media (min-width: 48rem) {
	.support-options {
		grid-template-columns: repeat(2, 1fr);
	}
}

.support-options > div {
	padding: calc(var(--spacing-unit) * 6);
	background-color: var(--color-mint-pale);
	border-left: 4px solid var(--color-green);
	border-radius: var(--radius-sm);
	display: flex;
	flex-direction: column;
}

.support-options h3 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-xl);
	margin-bottom: calc(var(--spacing-unit) * 3);
	text-align: left;
}

.support-options p {
	font-size: var(--text-sm);
	text-align: left;
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

.support-options ul {
	list-style: disc;
	margin-left: calc(var(--spacing-unit) * 5);
	margin-bottom: calc(var(--spacing-unit) * 4);
}

.support-options ul li {
	font-size: var(--text-sm);
	color: rgba(26, 42, 30, 0.7);
	margin-bottom: calc(var(--spacing-unit) * 1);
}

.support-options strong {
	font-weight: var(--font-semibold);
	color: var(--color-green);
}

.support-options a {
	color: var(--color-green);
	font-weight: var(--font-bold);
	font-size: var(--text-sm);
	text-decoration: none;
}

.support-options a:hover {
	text-decoration: underline;
}

.support-options .btn-primary {
	margin-top: auto;
	text-align: center;
	padding: calc(var(--spacing-unit) * 2);
	font-size: var(--text-sm);
}

#support-event > .max-width > div:last-child {
	max-width: 48rem;
	margin: 0 auto;
	padding: calc(var(--spacing-unit) * 8);
	background-color: var(--color-warm-bg);
	border: 1px solid rgba(9, 104, 57, 0.1);
	border-radius: var(--radius-sm);
	text-align: center;
}

#support-event > .max-width > div:last-child h4 {
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-green);
	font-size: var(--text-lg);
	margin-bottom: calc(var(--spacing-unit) * 4);
	text-align: center;
}

#support-event > .max-width > div:last-child p {
	font-size: var(--text-sm);
	line-height: var(--leading-relaxed);
	color: rgba(26, 42, 30, 0.7);
	margin: 0;
	text-align: center;
}

/* Support Mission Section */
#support-mission {
	background-color: var(--color-green-darker);
	color: var(--color-white);
	padding: calc(var(--spacing-unit) * 20) 0;
	text-align: center;
}

#support-mission .max-width {
	max-width: 48rem;
	margin: 0 auto;
}

#support-mission h2 {
	font-size: var(--text-3xl);
	font-family: var(--font-serif);
	font-weight: var(--font-bold);
	color: var(--color-white);
	margin-bottom: calc(var(--spacing-unit) * 6);
	text-align: center;
}

#support-mission p {
	font-size: var(--text-lg);
	line-height: var(--leading-relaxed);
	margin-bottom: calc(var(--spacing-unit) * 10);
	opacity: 0.8;
	text-align: center;
}

#support-mission .btn-gold {
	display: inline-block;
}

.ticket-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

.ticket-card {
	border: 1px solid #ddd;
	padding: 2rem;
	border-radius: 8px;
	background: white;
}

.ticket-card svg {
	margin-bottom: 1rem;
	color: var(--color-green);
}

.support-options {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
	gap: 2rem;
	margin: 2rem 0;
}

@media (max-width: 768px) {
	.support-options {
		grid-template-columns: 1fr;
	}
}

/* ===================================
   TERMS & CONDITIONS STYLES
   =================================== */

.prose {
	max-width: 800px;
	margin: 0 auto;
}

.prose h3 {
	margin-top: 2rem;
	margin-bottom: 1rem;
	color: var(--color-green);
}

.prose p {
	margin-bottom: 1rem;
	line-height: 1.6;
}

.prose ul {
	margin: 1rem 0;
	padding-left: 2rem;
}

.prose ul li {
	margin-bottom: 0.5rem;
}

/* ===================================
   IMPACT PAGE STYLES
   =================================== */

/* Measuring Success Section */
#measuring-success {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#measuring-success h5,
#measuring-success h2,
#measuring-success > .max-width > p {
  text-align: center;
}

#measuring-success > .max-width > p {
  max-width: 56rem;
  margin: 0 auto calc(var(--spacing-unit) * 12);
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

.stat-card {
  text-align: center;
  padding: calc(var(--spacing-unit) * 8);
  background-color: var(--color-mint-pale);
  border-radius: var(--radius-2xl);
  border: 1px solid rgba(9, 104, 57, 0.1);
}

.stat-number {
  font-size: var(--text-4xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 2);
}

.stat-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 3px;
  font-weight: var(--font-semibold);
  color: var(--color-gold);
}

/* Strategic Framework Section */
#strategic-framework {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#strategic-framework .max-width {
  max-width: 64rem;
  margin: 0 auto;
}

#strategic-framework h5,
#strategic-framework h2,
#strategic-framework > .max-width > p {
  text-align: center;
}

#strategic-framework > .max-width > p {
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.framework-list {
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 8);
}

.framework-item {
  display: flex;
  gap: calc(var(--spacing-unit) * 6);
  padding: calc(var(--spacing-unit) * 8);
  background-color: var(--color-white);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(9, 104, 57, 0.05);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  transition: box-shadow var(--transition-normal);
}

.framework-item:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.framework-item > svg {
  width: calc(var(--spacing-unit) * 12);
  height: calc(var(--spacing-unit) * 12);
  min-width: calc(var(--spacing-unit) * 12);
  padding: calc(var(--spacing-unit) * 3);
  background-color: var(--color-mint);
  color: var(--color-green);
  border-radius: var(--radius-full);
}

.framework-item h3 {
  font-size: var(--text-xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 2);
  text-align: left;
}

.framework-item p {
  text-align: left;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin: 0;
}

/* Testimonial Section */
#testimonial {
  background-color: var(--color-mint);
  padding: calc(var(--spacing-unit) * 16) 0;
}

#testimonial .content-two-column {
  gap: calc(var(--spacing-unit) * 16);
  align-items: center;
}

#testimonial .column-text h5,
#testimonial .column-text h2 {
  text-align: left;
}

#testimonial .column-text p {
  text-align: left;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin-bottom: calc(var(--spacing-unit) * 6);
}

#testimonial .column-image {
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-3xl);
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  border: 1px solid rgba(212, 175, 55, 0.1);
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 4);
}

#testimonial .column-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

/* CTA Expand Section */
#cta-expand {
  background-color: var(--color-mint-pale);
  padding: calc(var(--spacing-unit) * 16) 0;
  text-align: center;
  border-top: 4px solid var(--color-gold);
}

#cta-expand .max-width {
  max-width: 48rem;
  margin: 0 auto;
}

#cta-expand h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: center;
}

#cta-expand p {
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  margin-bottom: calc(var(--spacing-unit) * 8);
  text-align: center;
  color: rgba(26, 42, 30, 0.7);
}

#cta-expand button {
  margin: 0 auto;
}

/* ===================================
   SUFFOLK COUNTY PAGE STYLES
   =================================== */

/* Commitment Section */
#commitment {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 10) 0;
}

#commitment .max-width {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

#commitment h2 {
  text-align: center;
}

#commitment p {
  text-align: center;
  font-size: var(--text-lg);
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
}

/* Three Pillars Section */
#three-pillars {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 8) 0;
}

.pillar-card {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 10);
  border-radius: var(--radius-3xl);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
  text-align: center;
  transition: all var(--transition-normal);
}

.pillar-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

.pillar-card svg {
  width: calc(var(--spacing-unit) * 16);
  height: calc(var(--spacing-unit) * 16);
  padding: calc(var(--spacing-unit) * 4);
  background-color: var(--color-mint);
  color: var(--color-green);
  border-radius: var(--radius-2xl);
  margin: 0 auto calc(var(--spacing-unit) * 6);
  display: block;
  transition: transform var(--transition-normal);
}

.pillar-card:hover svg {
  transform: scale(1.1);
}

.pillar-card h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-xl);
  margin-bottom: calc(var(--spacing-unit) * 4);
  text-align: center;
}

.pillar-card p {
  font-size: var(--text-sm);
  text-align: center;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin: 0;
}

/* How We Support Section */
#how-we-support {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#how-we-support h2 {
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.support-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 12);
  max-width: 80rem;
  margin: 0 auto;
}

@media (min-width: 48rem) {
  .support-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

.support-item {
  display: flex;
  gap: calc(var(--spacing-unit) * 6);
}

.support-item svg {
  width: calc(var(--spacing-unit) * 12);
  height: calc(var(--spacing-unit) * 12);
  min-width: calc(var(--spacing-unit) * 12);
  padding: calc(var(--spacing-unit) * 3);
  background-color: var(--color-green);
  color: var(--color-gold);
  border-radius: var(--radius-full);
}

.support-item h3 {
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  color: var(--color-green);
  font-size: var(--text-xl);
  margin-bottom: calc(var(--spacing-unit) * 3);
  text-align: left;
}

.support-item p {
  font-size: var(--text-sm);
  text-align: left;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin: 0;
}

/* Family Partnership Section */
#family-partnership {
  background-color: var(--color-warm-bg);
  padding: calc(var(--spacing-unit) * 12) 0;
  position: relative;
  overflow: hidden;
}

#family-partnership .max-width {
  max-width: 80rem;
  margin: 0 auto;
}

#family-partnership .content-two-column {
  background-color: var(--color-white);
  border-radius: var(--radius-3xl);
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
  border: 1px solid rgba(212, 175, 55, 0.1);
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 64rem) {
  #family-partnership .content-two-column {
    grid-template-columns: repeat(2, 1fr);
  }
}

.column-highlight {
  background-color: var(--color-green);
  color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12);
}

@media (min-width: 64rem) {
  .column-highlight {
    padding: calc(var(--spacing-unit) * 16);
  }
}

.column-highlight h2 {
  font-size: var(--text-3xl);
  color: var(--color-white);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: left;
}

@media (min-width: 48rem) {
  .column-highlight h2 {
    font-size: var(--text-4xl);
  }
}

.column-highlight p {
  font-size: var(--text-lg);
  opacity: 0.9;
  line-height: var(--leading-relaxed);
  text-align: left;
  margin-bottom: calc(var(--spacing-unit) * 8);
}

.column-highlight::after {
  content: "";
  display: block;
  width: calc(var(--spacing-unit) * 20);
  height: calc(var(--spacing-unit) * 1);
  background-color: var(--color-gold);
  margin-top: calc(var(--spacing-unit) * 8);
}

.column-list {
  padding: calc(var(--spacing-unit) * 12);
}

@media (min-width: 64rem) {
  .column-list {
    padding: calc(var(--spacing-unit) * 16);
  }
}

.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: calc(var(--spacing-unit) * 6);
}

.checklist li {
  display: flex;
  align-items: start;
  gap: calc(var(--spacing-unit) * 4);
}

.checklist li::before {
  content: "";
  width: calc(var(--spacing-unit) * 6);
  height: calc(var(--spacing-unit) * 6);
  min-width: calc(var(--spacing-unit) * 6);
  background-color: var(--color-mint);
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--spacing-unit) * 1);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23096839' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-size: 14px 14px;
  background-position: center;
  background-repeat: no-repeat;
}

.checklist li {
  font-weight: var(--font-medium);
  color: rgba(26, 42, 30, 0.7);
}

/* Education Pathway Section */
#education-pathway {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#education-pathway .max-width {
  max-width: 64rem;
  margin: 0 auto;
  text-align: center;
}

#education-pathway h2 {
  text-align: center;
}

#education-pathway > .max-width > p {
  font-size: var(--text-lg);
  text-align: center;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin-bottom: calc(var(--spacing-unit) * 12);
}

.outcome-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: calc(var(--spacing-unit) * 6);
}

@media (min-width: 48rem) {
  .outcome-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.outcome-card {
  padding: calc(var(--spacing-unit) * 6);
  background-color: rgba(229, 244, 207, 0.2);
  border-radius: var(--radius-2xl);
  border: 1px solid var(--color-mint);
}

.outcome-card p {
  color: var(--color-green);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  font-style: italic;
  margin: 0;
  text-align: center;
}

/* Measuring Impact Section */
#measuring-impact {
  background-color: var(--color-green);
  color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#measuring-impact .max-width {
  max-width: 80rem;
  margin: 0 auto;
}

#measuring-impact .content-two-column {
  gap: calc(var(--spacing-unit) * 16);
  align-items: center;
}

#measuring-impact .column-text h2 {
  font-size: var(--text-3xl);
  color: var(--color-gold);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: left;
}

@media (min-width: 48rem) {
  #measuring-impact .column-text h2 {
    font-size: var(--text-5xl);
  }
}

#measuring-impact .column-text p {
  font-size: var(--text-lg);
  opacity: 0.9;
  line-height: var(--leading-relaxed);
  text-align: left;
  color: var(--color-white);
}

#measuring-impact .column-list .checklist li {
  padding: calc(var(--spacing-unit) * 4);
  background-color: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(4px);
  border-radius: var(--radius-xl);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--color-white);
}

#measuring-impact .column-list .checklist li::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23d4af37' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E");
  background-color: transparent;
  background-size: 20px 20px;
  width: calc(var(--spacing-unit) * 5);
  height: calc(var(--spacing-unit) * 5);
  min-width: calc(var(--spacing-unit) * 5);
}

/* Community Partnership Section */
#community-partnership {
  background-color: var(--color-white);
  padding: calc(var(--spacing-unit) * 12) 0;
}

#community-partnership .max-width {
  max-width: 48rem;
  margin: 0 auto;
  text-align: center;
}

#community-partnership::before {
  content: "";
  display: block;
  width: calc(var(--spacing-unit) * 16);
  height: calc(var(--spacing-unit) * 16);
  background-color: var(--color-mint);
  color: var(--color-green);
  border-radius: var(--radius-full);
  margin: 0 auto calc(var(--spacing-unit) * 8);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24' fill='none' stroke='%23096839' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m11 17 2 2a1 1 0 1 0 3-3'/%3E%3Cpath d='m14 14 2.5 2.5a1 1 0 1 0 3-3l-3.88-3.88a3 3 0 0 0-4.24 0l-.88.88a1 1 0 1 1-3-3l2.81-2.81a5.79 5.79 0 0 1 7.06-.87l.47.28a2 2 0 0 0 1.42.25L21 4'/%3E%3Cpath d='m21 3 1 11h-2'/%3E%3Cpath d='M3 3 2 14l6.5 6.5a1 1 0 1 0 3-3'/%3E%3Cpath d='M3 4h8'/%3E%3C/svg%3E");
  background-size: 32px 32px;
  background-position: center;
  background-repeat: no-repeat;
}

#community-partnership h2 {
  font-size: var(--text-3xl);
  text-align: center;
  margin-bottom: calc(var(--spacing-unit) * 6);
}

@media (min-width: 48rem) {
  #community-partnership h2 {
    font-size: var(--text-4xl);
  }
}

#community-partnership p {
  font-size: var(--text-lg);
  text-align: center;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin: 0;
}

/* Building Stronger Section */
#building-stronger {
  background-color: var(--color-mint-pale);
  color: var(--color-green);
  padding: calc(var(--spacing-unit) * 12) 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}

#building-stronger .max-width {
  max-width: 64rem;
  margin: 0 auto;
  position: relative;
  z-index: 10;
}

#building-stronger h2 {
  font-size: var(--text-3xl);
  font-family: var(--font-serif);
  font-weight: var(--font-bold);
  margin-bottom: calc(var(--spacing-unit) * 6);
  text-align: center;
}

@media (min-width: 48rem) {
  #building-stronger h2 {
    font-size: var(--text-5xl);
  }
}

#building-stronger p {
  font-size: var(--text-xl);
  text-align: center;
  line-height: var(--leading-relaxed);
  color: rgba(26, 42, 30, 0.7);
  margin: 0 auto;
  max-width: 42rem;
}

/* ===================================
   UTILITY CLASSES
   =================================== */

.text-center {
	text-align: center;
}

.bg-mint-pale {
	background-color: var(--color-mint-pale);
}

.bg-warm-bg {
	background-color: var(--color-warm-bg);
}

.bg-mint {
	background-color: var(--color-mint);
}