.family-note{max-width:900px;margin:4rem auto;padding:0 1rem;text-align:center;font-size:1.2rem;line-height:2}.family-note strong{color:#036}

.feature-section{padding:2rem 1rem;background-color:snow}
.feature-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:5rem;max-width:800px;margin:0 auto;text-align:center}
@media (min-width:768px){.feature-grid{grid-template-columns:repeat(4,1fr)}}
.feature-item{display:flex;flex-direction:column;align-items:center;opacity:0;transform:translateY(40px);transition:all 0.6s ease-out}
.feature-item.visible{opacity:1;transform:translateY(0)}
.feature-item:nth-child(1){transition-delay:0.1s}
.feature-item:nth-child(2){transition-delay:0.2s}
.feature-item:nth-child(3){transition-delay:0.3s}
.feature-item:nth-child(4){transition-delay:0.4s}
.feature-item:nth-child(5){transition-delay:0.5s}
.feature-item img{width:50px;height:50px;margin-bottom:.1rem}
.feature-item span{font-size:1.2rem;font-weight:500;color:#00008B}

.leaflet-info{background-color:#fff;color:#036;padding:3rem 1rem}
.leaflet-info .content{max-width:800px;margin:0 auto;text-align:center}
.leaflet-info h2{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:1rem}
.leaflet-info .intro{font-size:1.1rem;line-height:1.6}

.leaflet-welcome{background-color:#fff;color:#036;padding:3rem 1rem;text-align:center}
.leaflet-welcome .content{max-width:800px;margin:0 auto 2rem;font-size:1.1rem;line-height:1.7}
.leaflet-welcome h2{font-family:'Playfair Display',serif;font-size:1.4rem;margin-bottom:1rem;color:#036}
.leaflet-welcome .image-block img{max-width:100%;height:auto;border-radius:6px;margin:2rem 0}

.service-selector{padding:3rem 1rem;text-align:center;background:#f5f7fa}
.section-heading{font-size:1.8rem;color:#036;margin-bottom:2rem}
.service-grid{display:flex;justify-content:center;gap:2rem;flex-wrap:wrap}
.service-card{background:#fff;padding:1.5rem;border-radius:8px;width:350px;box-shadow:0 2px 10px rgb(0 0 0 / .05);transition:transform 0.3s ease}
.service-card:hover{transform:translateY(-4px)}
.service-icon{width:64px;height:64px;margin-bottom:1rem}
.service-card h3{font-size:1.3rem;color:#036;margin-bottom:1rem}
.service-card button{background:#036;color:#fff;border:none;padding:.6rem 1.2rem;border-radius:4px;cursor:pointer}

section.leaflet-why{max-width:900px;margin:4rem auto;padding:2rem 1rem;background:#f5f7fa;border-radius:10px;box-shadow:0 4px 12px rgb(0 0 0 / .08);color:#036;line-height:1.8}
section.leaflet-why h2{text-align:center;font-size:1.4rem;color:#1e90ff;margin-bottom:1.5rem}
section.leaflet-why p{font-size:1.1rem;padding:0 1rem;text-align:justify}
section.leaflet-why:hover{background:#e8f0ff;transition:background 0.3s ease}

.quote-intro{text-align:center;background:linear-gradient(180deg,#f8fafc 0%,#ffffff 100%);padding:4rem 1.5rem;border-radius:1rem;box-shadow:0 4px 20px rgb(0 0 0 / .05);margin:3rem auto;max-width:700px;transition:all 0.3s ease}
.quote-intro h2{font-size:2rem;color:#222;margin-bottom:1rem;font-weight:700}
.quote-intro p{font-size:1.1rem;color:#555;margin-bottom:2rem;line-height:1.6}
.quote-btn{background:#07f;color:#fff;border:none;padding:.9rem 2rem;font-size:1.1rem;font-weight:600;border-radius:9999px;cursor:pointer;box-shadow:0 4px 14px rgb(0 119 255 / .3);transition:all 0.25s ease}
.quote-btn:hover{background:#005fcc;transform:translateY(-2px);box-shadow:0 6px 16px rgb(0 119 255 / .4)}
.quote-btn:active{transform:translateY(0);box-shadow:0 3px 10px rgb(0 119 255 / .2)}

.highlight-blue{color:#1e90ff;font-weight:600}

.leaflet-steps{background:#036;color:#fff;padding:2rem 1rem;text-align:center}
.leaflet-steps h2{color:#fff;font-size:1.6rem;margin-bottom:1rem}
.leaflet-steps p{margin-bottom:2rem;max-width:700px;margin-left:auto;margin-right:auto;line-height:1.5;font-size:1rem}

.steps-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;max-width:800px;margin:auto}
.step-item{background:#1e90ff;border-radius:8px;padding:1rem 0.8rem;transition:transform 0.3s,box-shadow 0.3s}
.step-item:hover{transform:translateY(-3px);box-shadow:0 4px 12px rgb(0 0 0 / .2)}
.step-number{width:40px;height:40px;margin:0 auto 0.6rem auto;background:#fff;color:#036;font-weight:700;font-size:1rem;border-radius:50%;display:flex;justify-content:center;align-items:center}
.step-item h3{font-size:1rem;margin-bottom:0.4rem;color:#fff}
.step-item p{font-size:0.9rem;line-height:1.4;color:#f0f8ff}

#scroll-top-btn{position:fixed;bottom:20px;right:20px;width:40px;height:40px;color:rgba(100,100,100,0.4);cursor:pointer;opacity:0;pointer-events:none;transition:opacity 0.4s,transform 0.3s,color 0.3s;z-index:999}
#scroll-top-btn.visible{opacity:1;pointer-events:auto}
#scroll-top-btn:hover{color:rgba(100,100,100,0.8);transform:scale(1.1)}

.faq{max-width:900px;margin:4rem auto;padding:0 1rem}
.faq h2{text-align:center;font-size:2rem;color:#003366;margin-bottom:2rem}
.faq-item{background:#f9f9f9;border:1px solid #ddd;border-radius:8px;margin-bottom:1rem;transition:background 0.3s}
.faq-item:hover{background:#eef5ff}
.faq-question{width:100%;text-align:left;padding:1rem;background:none;border:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;color:#1e90ff;font-weight:600;font-size:1.1rem}
.faq-question::after{content:'+';font-size:1.3rem;transition:0.3s}
.faq-item.open .faq-question::after{content:'−'}
.faq-answer{max-height:0;overflow:hidden;padding:0 1rem;font-size:1.05rem;color:#222;line-height:1.7;transition:max-height 0.3s ease}
.faq-item.open .faq-answer{max-height:500px;padding-bottom:1rem}
/* ------------------------- */
/* Impact Section Base       */
/* ------------------------- */
.impact-section {
  font-family: Inter, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  color: #1a1a1a;
  padding: 60px 20px;
}

.impact-wrap {
  max-width: 980px;
  margin: 0 auto;
}

.impact-title {
  font-weight: 800;
  font-size: 32px;
  line-height: 1.2;
  margin-bottom: 40px;
  text-align: center;
}

/* ------------------------- */
/* Grid Layout               */
/* ------------------------- */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

@media(max-width:860px){
  .impact-grid { grid-template-columns: 1fr 1fr; }
}

@media(max-width:560px){
  .impact-grid { grid-template-columns: 1fr; }
  .impact-title { font-size: 28px; }
}

/* ------------------------- */
/* Card Styles + Hover       */
/* ------------------------- */
.impact-card {
  background: #fff;
  border-radius: 18px;
  padding: 28px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.05);
  transition: transform .3s ease, box-shadow .3s ease;

  /* Animation prep */
  opacity: 0;
  transform: translateY(30px);
}

.impact-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 32px rgba(0,0,0,0.08);
}

/* Visible when scrolled */
.impact-card.visible {
  opacity: 1;
  transform: translateY(0);
  transition: transform 0.8s cubic-bezier(.16,.84,.44,1), opacity 0.8s ease;
}

/* Staggered delays for 3 cards */
.impact-grid .impact-card:nth-child(1).visible { transition-delay: 0.05s; }
.impact-grid .impact-card:nth-child(2).visible { transition-delay: 0.20s; }
.impact-grid .impact-card:nth-child(3).visible { transition-delay: 0.35s; }

/* ------------------------- */
/* Metric / Number Styling   */
/* ------------------------- */
.impact-metric {
  display: flex;
  align-items: flex-end;
  gap: 12px;
}

.impact-number {
  font-size: 44px;
  font-weight: 900;
  color: #1e3a8a;
  line-height: 1;
  position: relative;
}

.impact-unit {
  font-size: 20px;
  color: #f0b429;
  margin-bottom: 6px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.impact-body {
  font-size: 16px;
  line-height: 1.6;
  color: #333;
}