/* --- CSS Variables (Root) for Easy Theme Management --- */
:root {
  --font-heading: 'Playfair Display', serif;
  --font-body: 'Open Sans', sans-serif;
  
  --color-dark-green: #0d3322;
  --color-dark-green-light: #0f3d29;
  --color-dark-green-lighter: #145239;
  --color-text-light: #fff;
  --color-text-dark: #123524;
  --color-gold: #d4af37;
  --color-gold-shadow: rgba(212,175,55,0.5); 
  --color-gold-shadow-hover: rgba(212,175,55,0.6); 
  --color-gold-shadow-strong: rgba(212,175,55,0.8);
  --color-bg: #ffffff;
  --color-bg-input: #f1f8f2;
  --color-light-green-bg: #e6f2ec;
  --color-mission-green: #5da57d; /* <-- NEW */
  --color-border: #ddd;
  --color-text-muted: #333;
  --color-shadow-light: rgba(0,0,0,0.15);
  --color-shadow-dark: rgba(0,0,0,0.3);
  --color-shadow-darker: rgba(0,0,0,0.35);
  --color-shadow-hover: rgba(0,0,0,0.2);
}

html {
  scroll-behavior: smooth;
}


/* --- FLOATING PILL HEADER (Glassmorphism & Fixed) --- */

/* Wrapper: Fixed position so it floats OVER the hero without taking up space */
header.floating-header {
  position: fixed;        /* Changed from sticky to fixed */
  top: 20px;              /* Keeps the gap from the very top edge */
  left: 0; 
  right: 0;               /* Ensures it stays centered */
  z-index: 1000;
  width: 100%;
  padding: 0 1rem;
  pointer-events: none;   /* Allows clicking through the empty space */
  box-sizing: border-box;
  max-width: 100vw; 
  overflow: hidden;
}

/* The Pill: Glassmorphism Style */
.navbar-pill {
  pointer-events: auto;   /* Re-enable clicking on the bar itself */
  
  /* GLASSMORPHISM BACKGROUND */
  /* Using your dark green variable (#0d3322) converted to RGBA with 0.5 opacity */
  background: rgba(13, 51, 34, 0.5); 
  
  /* The Blur Effect */
  backdrop-filter: blur(15px);
  -webkit-backdrop-filter: blur(15px); /* Safari support */
  
  /* Glass Border */
  border: 1px solid rgba(255, 255, 255, 0.2);
  
  /* Layout & Shape */
  max-width: 1140px;
  margin: 0 auto;
  padding: 10px 25px;
  border-radius: 50px;
  
  display: flex;
  justify-content: space-between;
  align-items: center;
  
  /* Softer shadow for glass look */
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
}

/* --- Left: Logo --- */
/* --- Left: Text Logo --- */
/* --- Left: Text Logo with Gradient --- */
.nav-left {
  display: flex;
  align-items: center;
}

.logo-text {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  letter-spacing: 0.5px;

  /* Gradient Text Magic */
  background: linear-gradient(135deg, var(--color-gold), var(--color-text-light), var(--color-gold));
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  
  /* Fallback for browsers that don't support text-clip */
  color: var(--color-gold); 

  transition: transform 0.3s ease;
}

.logo-text:hover {
  transform: scale(1.05);
  /* Note: Gradients cannot be transitioned smoothly like colors, 
     so we use a scale effect for interaction instead. */
}

/* --- Center: Navigation --- */
.nav-center {
  display: flex;
  gap: 25px;
  margin: 0 20px;
}

/* Hide nav links on mobile/tablet to prevent breaking layout */
@media (max-width: 850px) {
  .nav-center {
    display: none; 
  }
}

.nav-center a {
  color: var(--color-text-light);
  text-decoration: none;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 0.9rem;
  text-transform: uppercase; /* Matches the Mortzz style */
  letter-spacing: 0.5px;
  transition: color 0.3s;
  position: relative;
}

.nav-center a:hover {
  color: var(--color-gold);
}

/* --- Right: CTA Button (The Red/Gold Button) --- */
.nav-right {
  display: flex;
  align-items: center;
}

a.header-cta-pill {
  /* Use RED if you strictly want the screenshot look, 
     but GOLD is better for your brand. 
     Uncomment the red line below if you prefer red. */
  
  background-color: #d4af37; /* Strict Screenshot Match */
  /* background-color: var(--color-gold); */ /* Brand Match */
  
  color: #fff !important; 
  padding: 0.7rem 1.8rem;
  border-radius: 50px;
  font-weight: 700;
  text-decoration: none;
  font-family: var(--font-body);
  font-size: 0.9rem;
  box-shadow: 0 4px 15px rgba(0,0,0,0.3);
  transition: all 0.3s ease;
  white-space: nowrap;
}

/* Hover effect for the button */
a.header-cta-pill:hover {
  background-color: #fff;
  color: var(--color-dark-green) !important;
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 255, 255, 0.4);
}

/* --- Headings --- */
h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); 
  color: var(--color-text-light);
}

h1 {
  font-size: 72px;
}

h2 {
  font-size: 48px;
}

h3 {
  font-size: 36px;
}

/* --- Base & Font Styles --- */
body {
  margin: 0;
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text-dark);
  font-size: 20px;
  line-height: 1.5; 
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* --- Main Content Container --- */
.container {
  max-width: 1140px; 
  margin-left: auto;
  margin-right: auto;
  padding-left: 2rem;
  padding-right: 2rem;
  box-sizing: border-box; 
  overflow: hidden;
}

/* --- Updated Header Styling --- */

/* Logo Image sizing */
.header-logo-img {
  height: 95px; /* Adjust this height to fit your navbar preference */
  width: auto;
  display: block;
  transition: transform 0.3s ease;
}

.logo-link:hover .header-logo-img {
  transform: scale(1.05);
}



/* Standard Nav Links */
header nav a {
  
  color: var(--color-text-light);
  text-decoration: none;
  
  font-family: var(--font-body);
  font-size: 0.9em;
  transition: color 0.3s;
}

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

/* "Contact Us" Button Styling */
a.header-cta {
  background-color: var(--color-gold);
  color: var(--color-dark-green) !important; /* Force dark text for contrast */
  padding: 0.6rem 1.5rem;
  border-radius: 50px; /* Pill shape */
  font-weight: 700;
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: all 0.3s ease;
  margin-left: 1.5rem; /* Extra spacing before the button */
}

a.header-cta:hover {
  background-color: #fff; /* White on hover */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(212, 175, 55, 0.4); /* Gold glow */
}


/* --- Animation --- */
.reveal {
  opacity: 0;
  transform: translateY(50px); /* Start a little lower for more dramatic rise */
  /* specific transitions make it smoother than 'all' */
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
  will-change: opacity, transform; /* Helps browser optimize rendering */
}

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

/* --- Hero Section --- */
.hero {
  background: linear-gradient(rgba(13,51,34,0.85), rgba(13,51,34,0.85)), url('hero-bg\ \(2\).jpg') center/cover;
  color: var(--color-text-light);
  padding: 10rem 0; 
  text-align: center;
  min-height: 100%;
  overflow: hidden; 
  width: 100%;
}

.hero-highlight{
  margin-bottom: 1rem;
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light), var(--color-gold));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light); /* Fallback */
  
}

.hero h1 {
  font-family: var(--font-heading); 
  background: transparent;
  font-weight: 300 ;
  line-height: 1.2;
  color: var(--color-text-light) !important; /* Fallback */
}
.hero p {
  font-size: 1.25rem;
  margin: 1rem auto 2rem;
  max-width: 650px; 
}

/* --- Re-usable CTA Button --- */
.cta-btn {
  display: inline-block; 
  text-decoration: none; 
  background: linear-gradient(135deg, var(--color-gold), var(--color-text-light), var(--color-gold));
  color: var(--color-dark-green);
  border: none;
  padding: 1rem 2rem;
  margin: 0.5rem;
  border-radius: 10px;
  font-size: 20px;
  cursor: pointer;
  font-weight: bold;
  font-family: var(--font-body);
  transition: transform 0.25s, box-shadow 0.25s;
}
.cta-btn:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--color-shadow-hover);
}

/* --- Marquee Strip (Updated) --- */
.marquee-bar {
  background: var(--color-dark-green);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  border-bottom: 1px solid var(--color-gold);
  
  overflow: hidden; 
  white-space: nowrap;
  padding: 1.5rem 0; /* Increased padding to fit larger text */
  
  position: relative;
  z-index: 5;
}

.marquee-track {
  display: inline-block;
  white-space: nowrap;
  /* Speed: 40s (Adjust as needed) */
  animation: marquee-scroll 40s linear infinite;
  padding-left: 0; /* FIX: Starts visible immediately */
}

.marquee-item {
  font-family: var(--font-heading);
  font-weight: 700;
  font-size: 36px; 
  letter-spacing: 2px;
  color: var(--color-text-light);
  display: inline-block;
  padding-right: 4rem; /* Spacing between repeated text */
}

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

/* Loop Animation */
@keyframes marquee-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    /* Moves left by 50% of the track width (covering 2 of the 4 text sets) */
    /* Since set 3 is identical to set 1, the loop is seamless */
    transform: translateX(-50%); 
  }
}

/* Mobile Adjustment */
@media (max-width: 768px) {
  .marquee-item {
    font-size: 24px; /* Scaled down slightly for mobile screens */
    padding-right: 2rem;
  }
  .marquee-bar {
    padding: 1rem 0;
  }
}

/* --- General Section (Standardized) --- */
.hero h2{
    margin-bottom:-20px !important;
}
    
.section {
  /* 1. Gap Control: 50px Top + 50px Bottom = 100px visible white space between sections (due to margin collapsing behavior, this creates a consistent rhythm) */
  margin: 50px auto;
  
  /* 2. Internal Spacing: Standard padding for content */
  padding: 50px 0; 
  
  max-width: 1140px;
  /* margin-left/right auto handles the centering */
  box-sizing: border-box;
}

/* Ensure the title inside sections doesn't add accidental extra height */
.section h2 {
  text-align: center;
  margin-bottom: 2rem;
  margin-top: 0; /* Prevents double spacing at the top */
}


/* --- Testimonials Carousel --- */
.testimonials .container {
  /* We need to set a specific position for the arrows */
  position: relative;
  
}

.testimonials h2 {
  color: var(--color-dark-green);
  
}

.testimonial-carousel-wrapper {
  position: relative;
  /* This clips the cards that are outside the viewport */
  overflow: hidden; 
  margin: 0 -0.75rem; /* Counteract card padding */
  
}

.testimonial-carousel {
  display: flex;
  transition: transform 0.5s ease-in-out;
  gap: 20px; /* Add 20px gap */
  
}

/* This is the new .testimonial-card style. */
.testimonial-card {
  /* Mobile-first: 1 card visible */
  flex: 0 0 100%;
  box-sizing: border-box;
  /* Remove side padding for gap */
  
  /* Re-add your original styling */
  background: linear-gradient(145deg, var(--color-dark-green-light), var(--color-dark-green-lighter));
  border-radius: 16px;
  padding: 2rem; 
  box-shadow: 6px 6px 16px var(--color-shadow-dark);
  /* Remove hover transition */
  transition: none; 
  color: var(--color-text-light);
}


.testimonial-card .stars {
  color: var(--color-gold);
  font-size: 1.1rem;
  margin-bottom: 0.5rem;
}
.testimonial-card strong {
  display: block;
  margin-top: 1rem;
  font-weight: bold;
  font-family: var(--font-heading); 
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Tablet: 2 cards visible */
@media (min-width: 600px) {
  .testimonial-card {
    /* Adjust flex-basis to account for the 20px gap */
    flex-basis: calc((100% - 20px) / 2);
  }
}

/* Desktop: 3 cards visible */
@media (min-width: 1140px) {
  .testimonial-card {
    /* Adjust flex-basis to account for two 20px gaps */
    flex-basis: calc((100% - 40px) / 3);
  }
}


/* Dot Indicator Styling */
.carousel-dots {
  text-align: center;
  padding: 1.5rem 0 0;
}
.dot {
  display: inline-block;
  width: 12px;
  height: 12px;
  margin: 0 6px;
  background-color: #ccc;
  border-radius: 50%;
  cursor: pointer;
  transition: background-color 0.3s ease;
}
.dot.active {
  background-color: var(--color-gold);
}

/* --- About Section --- */
.about {
  background-color: var(--color-dark-green);
  color: var(--color-text-light);
  border-radius: 12px;
  margin: 100px auto;
}

.about-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 2rem;
}

.about-logo {
  flex: 1;
  min-width: 260px;
  text-align: center;
}

.about-logo img {
  width: 220px;
  height: 220px;
  object-fit: contain;
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  box-shadow: 0 0 15px var(--color-gold-shadow);
  background: var(--color-text-light);
  padding: 1rem;
}

.about-content {
  flex: 2;
  min-width: 280px;
  text-align: left; 
}

.about-content h2 {
  
  margin-bottom: 1rem;
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light); /* Fallback */
  text-align: left; 
}



/* --- Redesigned Mission Section (Asymmetrical Grid) --- */
.mission {
  background: var(--color-dark-green-lighter); 
  color: var(--color-text-light);
  border-radius: 12px;
  padding: 4rem 2rem;
}

.mission-asym-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 20px; 
  max-width: 1140px;
  margin: 0 auto;
  /* Grid automatically makes items in the same row equal height, 
     but we need the children to fill that height. */
}

/* --- Row 1, Col 1: Text Area --- */
.mission-cell-text {
  grid-column: span 4;
  background: transparent;
  padding-right: 3rem;
  
  display: flex;
  flex-direction: column;
  justify-content: center; 
  
  /* FORCE LEFT ALIGNMENT */
  text-align: left; 
  align-items: flex-start; /* This forces flex children (eyebrow, title) to the left */
}

.mission-eyebrow {
  margin-left: 0;
  margin-right: auto;
  /* ... keep existing styles ... */
  display: inline-block;
  width: fit-content;
  background: var(--color-gold);
  color: var(--color-dark-green);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4);
}
.mission-title-large {
  font-size: 3rem;
  
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light);
}

h2.mission-title-large {
  text-align: left; /* Explicitly overrides the global center align */
  font-size: 3rem;
  margin: 0 0 1.5rem 0;
  
  /* Gradient Text */
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light);
  
  line-height: 1.1; /* Tighter line height for large text */
}

.mission-desc {
  font-size: 1.1rem;
  line-height: 1.8;
  color: #e0e0e0;
  margin-bottom: 1.5rem;
}

.mission-highlight {
  font-size: 1.15rem;
  color: var(--color-text-light);
  margin-bottom: 2rem;
}

.mission-highlight strong {
  color: var(--color-gold);
}

/* --- Progress Bar --- */
.mission-progress-container {
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  width: 100%;
  height: 24px;
  overflow: hidden;
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.2);
}

.mission-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), #f9e29c);
  border-radius: 50px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding-right: 10px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5); /* Internal Glow */
}

.progress-text {
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--color-dark-green);
  font-family: var(--font-body);
}

/* --- The Glowing Glass Cards --- */
.glass-card {
  /* Layout: ensure it fills the grid cell height */
  height: 100%; 
  box-sizing: border-box; /* Includes padding in height calc */
  
  /* Glassmorphism */
  background: rgba(255, 255, 255, 0.05);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  /* The Glow (Gold Border + Shadow) */
  border: 1px solid #d4af37; /* Semi-transparent Gold Border */
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.15); /* Soft Gold Glow */
  
  border-radius: 20px;
  padding: 2.5rem 2rem;
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.glass-card:hover {
  transform: translateY(-5px);
  /* Brighter glow on hover */
  box-shadow: 0 0 30px rgba(212, 175, 55, 0.4);
  border-color: var(--color-gold);
}

/* Grid Spanning */
.mission-cell-card:nth-of-type(2) {
  grid-column: span 2; /* 33% */
}

.mission-cell-card:nth-of-type(3),
.mission-cell-card:nth-of-type(4) {
  grid-column: span 3; /* 50% */
}

/* --- Content inside Glass Cards (Updated Fonts) --- */

/* 1. Icon Styling */
.mission-icon img {
  width: 55px;
  margin-bottom: 1.5rem;
  /* Added drop shadow to match Stats icons */
  filter: drop-shadow(0 0 6px var(--color-gold-shadow-strong)); 
  transition: transform 0.5s ease;
}

/* Hover effect: Rotates like the Stats icons */
.glass-card:hover .mission-icon img {
  transform: rotate(10deg) scale(1.1);
}

/* 2. Heading Styling (Matches "Philly Homeownership" numbers) */
.mission-cell-card h3 {
  font-family: var(--font-heading); 
  font-size: 2.2rem; /* Larger font size */
  line-height: 1.1;
  color: var(--color-gold);
  margin: 0 0 1rem 0; 
}

/* 3. Paragraph Styling (Matches Stats text) */
.mission-cell-card p {
  font-family: var(--font-body);
  font-size: 1rem; 
  line-height: 1.6;
  color: #ddd; /* Crisp light grey */
  opacity: 1; 
  margin: 0;
  max-width: 90%; 
}

/* --- Mobile Responsiveness --- */
@media (max-width: 900px) {
  .mission-asym-grid {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
  }
  
  .mission-cell-text {
    padding-right: 0;
    margin-bottom: 1rem;
    text-align: left; /* Keep left align even on mobile? Or switch to center? */
  }
  
  .glass-card {
    min-height: 250px; /* Ensure cards have height on mobile */
  }
}


/* --- Movement Pillars Section --- */
.pillars {
  background-color: var(--color-bg); 
  border-radius: 12px;
  text-align: center;
  /* Reset padding to match other sections, or keep 0 if strictly intended */
  padding: 0px 0px !important; 
}

.pillars-title {
  background: var(--color-dark-green);
  margin-bottom: 2rem;
  /*background: linear-gradient(45deg, var(--color-dark-green), var(--color-dark-green-lighter)); */
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  
}

.pillars-intro {
  max-width: 750px;
  margin: 0 auto 3rem auto;
  
  line-height: 1.6;
  color: var(--color-text-dark);
}

.pillars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto;
  gap: 20px;
}

/* stack to one column on small screens */
@media (max-width: 600px) {
  .pillars-grid {
    grid-template-columns: 1fr;
  }
}

.pillar-box {
  background: linear-gradient(145deg, var(--color-dark-green), var(--color-dark-green-lighter));
  border: 3px solid var(--color-gold);
  border-radius: 20px;
  padding: 50px;
  text-align: center;
  box-shadow: 0 0 20px var(--color-gold-shadow);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  color: var(--color-text-light);
  min-width: 250px;
  
}
.pillar-box:hover {
  transform: translateY(-10px) scale(1.01);
  box-shadow: 0 15px 35px var(--color-gold-shadow-hover);
}
.pillar-icon img {
  width: 60px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 6px var(--color-gold-shadow-strong));
  transition: transform 0.5s ease;
}
.pillar-box:hover .pillar-icon img {
  transform: rotate(10deg) scale(1.01);
}
.pillar-box h3 {
  font-family: var(--font-heading); 
  color: var(--color-gold);

  margin-bottom: 0.5rem;
}
.pillar-box p {
  
  color: var(--color-text-light);
}
.pillar-box::after {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
}
.pillar-box:hover::after {
  animation: shine 1.5s forwards;
}

/* Keyframes for shine animation (used by pillars and stats) */
@keyframes shine {
  0% { left: -75%; }
  100% { left: 125%; }
}

/* --- New Stats Section Design (3 Cards) --- */

.stats {
  /* Set the background to Dark Green */
  background: var(--color-dark-green); 
  
  /* Optional: Add the gradient for that "Premium" depth */
  background: linear-gradient(to bottom, var(--color-dark-green), var(--color-dark-green-lighter));
  
  color: var(--color-text-light); /* Ensures text is white */
  border-radius: 12px;
  text-align: center;
  padding: 4rem 0;
}

/* --- Keep the rest of the Stats CSS below this... --- */
.stats-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

.stats-eyebrow {
  display: inline-block; /* Ensures the background wraps the text tightly */
  
  /* The "Investment" Badge Look */
  background: var(--color-gold);
  color: var(--color-dark-green);
  
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.85rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  
  /* Pill Shape */
  padding: 0.5rem 1.5rem;
  border-radius: 50px;
  margin-bottom:20px;
  
  /* Spacing & Glow */
  
  box-shadow: 0 4px 15px rgba(212, 175, 55, 0.4); /* Gold Glow */
}

.stats-title {
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

.stats-subtext {
  font-size: 1.1rem;
  line-height: 1.7;
  color: #e0e0e0; 
}

/* --- 3-Column Grid --- */
.stats-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); /* Slightly smaller min-width */
  gap: 1.5rem; /* Slightly tighter gap */
  
  max-width: 1000px; /* Reduced from 1140px to match Why Own exactly */
  
  margin: 0 auto;
}

/* --- Stat Card (Pillar Style) --- */
.stat-card-pillar {
  /* GLASSMORPHISM BACKGROUND */
  background: rgba(255, 255, 255, 0.05); 
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  
  border: 2px solid var(--color-gold);
  border-radius: 20px;
  
  /* Reduced padding to make the card physically smaller */
  padding: 2rem 1.5rem; 
  
  text-align: center;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
  transition: all 0.4s ease;
  position: relative;
  overflow: hidden;
  color: var(--color-text-light);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
}

/* Hover remains the same */
.stat-card-pillar:hover {
  background: rgba(255, 255, 255, 0.1); 
  transform: translateY(-10px) scale(1.02);
  box-shadow: 0 15px 35px var(--color-gold-shadow-hover);
}

/* Icon Styling */
.stat-icon-wrapper img {
  width: 60px;
  margin-bottom: 1rem;
  filter: drop-shadow(0 0 6px var(--color-gold-shadow-strong));
  transition: transform 0.5s ease;
}

.stat-card-pillar:hover .stat-icon-wrapper img {
  transform: rotate(10deg) scale(1.1);
}

/* Typography inside Card */
.stat-number {
  font-family: var(--font-heading);
  font-size: 3.5rem; 
  line-height: 1;
  color: var(--color-gold);
  margin: 0.5rem 0;
}

.stat-card-pillar h4 {
  font-family: var(--font-body);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-bottom: 1rem;
  color: var(--color-text-light);
  min-height: 1.2em; /* Ensures alignment if titles vary in length */
}

.stat-card-pillar p {
  font-size: 1rem;
  color: #ddd;
  margin: 0 auto;
}

/* Shine Animation */
.stat-card-pillar .shine-effect {
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, transparent, rgba(255,255,255,0.4), transparent);
  transform: skewX(-25deg);
  pointer-events: none; 
}

.stat-card-pillar:hover .shine-effect {
  animation: shine 1.5s forwards;
}

/* --- Why Own Section (Redesigned) --- */
.why-own {
  margin-bottom: 100px !important;
  background: var(--color-dark-green);
  color: var(--color-text-light);
  border-radius: 12px;
  background: linear-gradient(to bottom, var(--color-dark-green), var(--color-dark-green-lighter));
}

.why-own-header {
  text-align: center;
  max-width: 800px;
  margin: 0 auto 3rem auto;
}

.why-own-title {
  text-align: center;
  margin-bottom: 1.5rem;
  font-size: 3rem;
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light);
}

.why-own-subtext {
  font-family: var(--font-body);
  font-size: 1.15rem;
  line-height: 1.8;
  color: #e0e0e0;
}

.why-own-subtext strong {
  color: var(--color-gold);
}

/* --- The Grid --- */
.why-own-grid {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: center;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}

/* --- Shared Card Styles (Both look the same initially) --- */
.why-own-box {
  flex: 1;
  min-width: 300px;
  text-align: center;
  padding: 3rem 2rem;
  border-radius: 20px;
  position: relative;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  
  /* Shared Background: A rich dark green gradient for both */
  background: linear-gradient(145deg, var(--color-dark-green-light), var(--color-dark-green));
  
  /* Shared Shadow (Subtle depth) */
  box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

.why-own-box img {
  width: 80px;
  margin-bottom: 1.5rem;
  transition: transform 0.3s ease;
}

.why-own-box h3 {
  font-family: var(--font-heading);
  font-size: 2rem;
  margin-bottom: 1rem;
}

.why-own-box p {
  font-size: 1.05rem;
  line-height: 1.6;
  color: var(--color-text-light); /* Both have white text */
}

/* Shared Hover Effect: Both lift up slightly */
.why-own-box:hover {
  transform: translateY(-8px);
}

/* --- RENT Specifics (Neutral / Silver) --- */
.card-rent {
  border: 2px solid rgba(255, 255, 255, 0.2); /* Silver/Glass border */
}

.card-rent h3 {
  color: #ddd; /* Slightly off-white heading */
}

.card-rent:hover {
  border-color: rgba(255, 255, 255, 0.5); /* Brighter silver on hover */
}

/* --- OWN Specifics (Gold / Glowing) --- */
.card-own {
  border: 2px solid var(--color-gold); /* Gold border */
  /* The Glow Effect is unique to this card */
  box-shadow: 0 0 20px rgba(212, 175, 55, 0.2); 
}

.card-own h3 {
  color: var(--color-gold); /* Gold heading */
}

.card-own:hover {
  /* Stronger Glow on hover */
  box-shadow: 0 0 40px rgba(212, 175, 55, 0.5);
  border-color: #fff; /* Border flashes white on hover for effect */
}


/* --- Status Badges --- */
.card-status {
  text-transform: uppercase;
  font-size: 0.8rem;
  letter-spacing: 1px;
  font-weight: 700;
  padding: 0.4rem 1rem;
  border-radius: 50px;
  margin-bottom: 2rem;
  display: inline-block;
}

.status-loss {
  background: rgba(255, 255, 255, 0.15);
  color: #ddd;
}

.status-gain {
  background: var(--color-gold);
  color: var(--color-dark-green);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
}

/* --- Form Section (REDESIGNED) --- */

.qualify-form {
  /* Change from dark gradient to a clean white card (or your preference) */
  background: var(--color-dark-green); 
  border: 1px solid var(--color-border);
  padding: 2.5rem; /* Consistent internal padding */
  border-radius: 12px;
  
  box-shadow: 0 8px 24px rgba(0,0,0,0.08); 
  
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
  align-items: center;
  justify-content: center;
  
  max-width: 1140px; 
  
  /* REMOVED margin-top: 50px; to fix the gap issue */
  
}


/* Desktop: 2-column layout */
@media (min-width: 600px) {
  .qualify-form {
    grid-template-columns: 1fr 1fr; /* Two equal columns */
    gap: 1.5rem; /* A bit more space on desktop */
    padding: 2.5rem;
  }
}

/* Helper class to make an item span both columns */
.form-span-2 {
  /* On desktop (2-col grid), this spans from col 1 to the end (-1) */
  grid-column: 1 / -1; 
  
}

.qualify-form label {
  display: flex;
  flex-direction: column;
}



.qualify-form input, 
.qualify-form select {
  padding: 0.9rem;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: var(--font-body);
  background: var(--color-bg-input);
  color: var(--color-text-dark);
  width: 100%; /* Ensure they fill their container */
  box-sizing: border-box; /* Proper padding calculation */
}

.qualify-form select:invalid {
  color: #6c757d; 
}

/* Ensure the button uses the cta style but fits the grid */
.qualify-form .cta-btn {
  width: 100%; /* Make button fill its grid cell */
  padding: 1rem; /* Adjust padding for a larger button */
  font-size: 1.1rem;
}

/* --- Accessibility Helper Class --- */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border-width: 0;
}

/* --- FAQ Section --- */
.faq {
  max-width: 1140px; 
  margin: 0px auto 5rem auto; 
  background: var(--color-dark-green);
  padding: 3rem 2rem; 
  border-radius: 12px;
  color: var(--color-text-light);
  
}
.faq h2 {
  text-align: center;
  margin-bottom: 2rem;
  color: var(--color-text-light);
}
.faq h2::after {
  content: "";
  display: block;
  width: 80px;
  height: 3px;
  background: var(--color-gold);
  margin: 0.5rem auto 0;
  border-radius: 2px;
}
details {
  background: var(--color-text-light);
  padding: 1rem 1.2rem;
  border-radius: 10px;
  margin-bottom: 1rem;
  box-shadow: 6px 6px 16px var(--color-shadow-light);
  transition: transform 0.25s, box-shadow 0.25s;
}
details:hover {
  transform: translateY(-3px);
  box-shadow: 8px 8px 20px var(--color-shadow-hover);
}
details summary {
  font-weight: bold;
  cursor: pointer;
  color: var(--color-dark-green);
  list-style: none; /* Remove default arrow */
}
details[open] summary {
  color: var(--color-gold);
}
details summary::before {
  content: '➕ ';
  color: var(--color-gold);
  font-weight: bold;
}
details[open] summary::before {
  content: '➖ ';
}
details p {
  margin-top: 0.5rem;
  color: var(--color-text-muted);
}
.faq-cta {
  text-align: center;
  margin-top: 2rem;
}
.faq-cta a {
  display: inline-block;
  padding: 0.9rem 1.6rem;
  background: linear-gradient(135deg, var(--color-gold), var(--color-text-light), var(--color-gold));
  color: var(--color-dark-green);
  border-radius: 8px;
  font-weight: bold;
  text-decoration: none;
  transition: transform 0.25s, box-shadow 0.25s;
}
.faq-cta a:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px var(--color-shadow-hover);
}

/* --- Premium Footer Design --- */
.footer {
  background: var(--color-dark-green);
  /* Optional: Subtle gradient for depth */
  background: linear-gradient(to bottom, var(--color-dark-green), #0a291b);
  color: var(--color-text-light);
  padding: 4rem 0 2rem 0;
  margin-top: 100px;
  border-top: 4px solid var(--color-gold); /* Gold accent on top */
}

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* Brand gets more space */
  gap: 3rem;
  margin-bottom: 3rem;
  text-align: left;
}

/* Col 1: Brand */
.footer-logo {
  font-family: var(--font-heading);
  font-size: 1.8rem;
  color: var(--color-gold);
  margin-bottom: 1rem;
}

.brand-col p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: #ccc;
  max-width: 300px;
  margin: 0; /* Align left properly */
}

/* Col 2 & 3: Headings */
.footer-col h4 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
  letter-spacing: 0.5px;
}

/* Links List */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 0.8rem;
}

.footer-links a {
  text-decoration: none;
  color: #ccc;
  font-size: 0.95rem;
  transition: color 0.3s ease, padding-left 0.3s ease;
}

.footer-links a:hover {
  color: var(--color-gold);
  padding-left: 5px; /* Subtle slide effect */
}

/* Contact & CTA */
.footer-contact-link {
  display: block;
  font-size: 1.1rem;
  color: var(--color-gold);
  text-decoration: none;
  font-weight: 700;
  margin-bottom: 1rem;
}

.footer-cta-btn {
  display: inline-block;
  padding: 0.6rem 1.2rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid var(--color-gold);
  color: var(--color-gold);
  text-decoration: none;
  border-radius: 4px;
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  transition: all 0.3s ease;
  margin-bottom: 1.5rem;
}

.footer-cta-btn:hover {
  background: var(--color-gold);
  color: var(--color-dark-green);
}

/* --- Updated Social Icons Styling --- */
.footer-socials {
  margin-top: 1rem;
}

.footer-socials a {
  display: inline-flex;       /* Ensures icon centers perfectly */
  justify-content: center;
  align-items: center;
  
  width: 40px;
  height: 40px;
  margin-right: 10px;
  
  border: 1px solid rgba(255, 255, 255, 0.2); /* Subtle border */
  border-radius: 50%;         /* Circle shape */
  
  color: #ccc;                /* Icon color */
  text-decoration: none;
  font-size: 1.1rem;          /* Icon size */
  transition: all 0.3s ease;
}

.footer-socials a:hover {
  background: var(--color-gold);
  border-color: var(--color-gold);
  color: var(--color-dark-green); /* Icon turns dark green on gold background */
  transform: translateY(-3px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.3); /* Gold Glow */
}

/* Bottom Bar */
.footer-divider {
  height: 1px;
  background: rgba(255,255,255,0.1); /* Very faint line */
  margin-bottom: 2rem;
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.85rem;
  color: #888;
}

.footer-bottom p {
  margin: 0;
}

.footer-legal a {
  color: #888;
  text-decoration: none;
  margin-left: 20px;
  transition: color 0.3s;
}

.footer-legal a:hover {
  color: var(--color-gold);
}

.cta-final {
  background: var(--color-dark-green);
  color: var(--color-text-light);
  text-align: center;
  border-radius: 12px;
  /* Matches your standard section spacing */
  margin: 100px auto; 
  padding: 4rem 2rem;
}

/* The Gradient Text Title */
.cta-title-gradient {
  background: linear-gradient(45deg, var(--color-gold), var(--color-text-light));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  color: var(--color-text-light);
  margin-bottom: 1.5rem;
}

@media (max-width: 768px) {

  /* --- 1. Global Typography & Alignment Reset --- */
  /* Force center alignment everywhere on mobile */
  body, 
  .section, 
  .container, 
  p, 
  h1, h2, h3, h4, h5, h6, 
  .mission-cell-text, 
  .about-content,
  .mission-desc, 
  .why-own-subtext, 
  .stats-subtext {
    text-align: center !important;
  }

  /* Specific Font Sizes */
  h1 { font-size: 36px !important; }
  h2 { font-size: 28px !important; }
  h3 { font-size: 24px !important; }
  h4 { font-size: 20px !important; }
  
  p, .mission-desc, .why-own-subtext, .stats-subtext, .pillar-box p {
    font-size: 14px !important;
    line-height: 1.6; 
  }

  .mission-eyebrow, .stats-eyebrow {
    font-size: 14px !important;
    /* Center the eyebrow pills */
    margin-left: auto !important;
    margin-right: auto !important;
  }

  /* --- 2. "Floating Card" Sections (Green Box with White Edges) --- */
  /* Added .testimonials to this list so it aligns perfectly with the others */
  .about, 
  .why-own, 
  .stats, 
  .mission,
  .faq,
  .cta-final,
  .testimonials { 
    /* Reveal white background on sides (The "20px padding" effect) */
    margin: 60px 20px !important; 
    
    /* Reset width to fit inside the margins */
    width: auto !important;
    max-width: none !important;
    
    /* Adjust internal padding */
    padding: 3rem 1.5rem !important;
    
    /* Ensure rounded corners are visible */
    border-radius: 16px !important;
  }

  /* --- 3. Grid Resets (Stack everything vertically) --- */
  .mission-asym-grid, 
  .stats-grid-3, 
  .why-own-grid, 
  .about-container,
  .pillars-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 30px !important;
  }

  .why-own-box {
    min-width: 0 !important; /* Removes the 300px restriction */
    width: 100% !important;  /* Forces card to fit the container */
    box-sizing: border-box !important; /* Ensures padding doesn't add to width */
  }

  /* --- 4. Specific Section Fixes --- */
  
  /* About Section Specifics */
  .about-container {
    align-items: center !important;
  }
  .about-logo img {
    width: 140px; 
    height: 140px;
  }
  
  /* Mission Section Specifics */
  .mission-cell-text {
    padding-right: 0 !important;
    align-items: center !important; /* Centers flex children like the eyebrow */
  }
  
  /* Ensure Glass Cards have height on mobile */
  .glass-card {
    min-height: auto !important;
    height: auto !important;
    padding: 2.5rem 1.5rem !important;
  }

  /* Progress Bar Alignment */
  #progress-bar {
  /* 1. Initial State: Start at 0 width */
  width: 0%; 
  
  height: 100%;
  background: linear-gradient(90deg, var(--color-gold), #f9e29c);
  border-radius: 50px;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  
  /* 2. The Physics: 
     Duration: 2.5 seconds
     Timing Function: cubic-bezier(0.2, 1, 0.2, 1) 
     -> This specific curve starts fast and slows down heavily near the end. */
  transition: width 2.5s cubic-bezier(0.2, 1, 0.2, 1);
}
  /* Hero adjustments */
  .hero {
    padding: 6rem 0 !important;
  }
  
  /* Container Spacing for transparent sections (Hero, Pillars, etc.) */
  .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* --- Footer Mobile Styles --- */
  .footer {
    text-align: center; /* Center everything on mobile */
    padding: 3rem 0;
  }

  .footer-grid {
    grid-template-columns: 1fr; /* Stack columns */
    gap: 2.5rem;
    text-align: center;
  }
  
  .brand-col p {
    margin: 0 auto; /* Center paragraph */
  }

  .footer-bottom {
    flex-direction: column; /* Stack copyright and legal */
    gap: 1rem;
    text-align: center;
  }

  .footer-legal a {
    margin: 0 10px; /* Adjust spacing for centered layout */
  }

  /* --- 5. Mobile Button Standardization (Added) --- */
  /* Targets: Main CTA, Header Pill, Footer CTA, FAQ Link, Form Button */
  .cta-btn,
  a.header-cta-pill,
  .footer-cta-btn,
  .faq-cta a,
  button[type="submit"] {
    font-size: 14px !important;
    font-weight: 600 !important; /* Semi-bold */
    border-radius: 55px !important;
    
    /* Ensure nice touch target size */
    padding: 12px 24px !important; 
    
    /* Optional: Ensure text doesn't wrap awkwardly */
    white-space: nowrap; 
    display: inline-flex;
    justify-content: center;
    align-items: center;
  }

  /* Specific fix for the long text in the FAQ link on mobile */
  .faq-cta a {
    white-space: normal; /* Allow text wrapping for long questions */
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Make the form button full width on mobile */
  .qualify-form .cta-btn {
    width: 100% !important;
  }
  overflow: hidden;
}