/* =====================================================================
   COMMUNITY CONNECTIONS SUPPORT SERVICES - MAIN STYLESHEET
   Sections:
     1. Variables & global base
     2. Header & navigation
     3. Shared hero styles (home + every inner page)
     4. Home page (hero buttons, specialized care)
     5. Footer
     6. Services page
     7. Contact page
     8. About page
     9. Who We Support page
    10. How It Works page
    11. Reviews page
    13. Responsive rules
   ===================================================================== */


/* ================= 1. VARIABLES & GLOBAL BASE ================= */
:root {
  --navy: #163459;
  --navy-dark: #0e2744;
  --green: #36743e;          /* brand green: lines, icons, large text */
  --green-dark: #2b5d32;     /* darker green: buttons & small text (better contrast) */
  --mint: #eaf6f2;
  --cream: #e2dac2;
  --text: #333333;
  /* Navy fade on the left of every inner-page banner (behind the heading text).
     Lower the numbers to show more of the photo, raise them for stronger text contrast. */
  --hero-fade: linear-gradient(90deg, rgba(22, 52, 89, 0.85) 0%, rgba(22, 52, 89, 0.62) 28%, rgba(22, 52, 89, 0.22) 45%, rgba(22, 52, 89, 0) 62%);
  --contact-blue: #2f5380;   /* blue behind the contact section (also used for the wave above and the footer below) */
  --page-bg: #eaf6f2;        /* background of the whole site AND the wave's bottom layer - change it here */
}

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

html {
  scroll-behavior: smooth;
}

body {
  font-family: 'Poppins', Arial, Helvetica, sans-serif;
  color: var(--text);
  background-color: var(--page-bg);
  line-height: 1.6;
}

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

/* Text for screen readers only (keeps heading order correct without showing it) */
.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* Visible keyboard focus for accessibility */
a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 3px;
}


/* ================= 2. HEADER & NAVIGATION ================= */
.navbar {
  background-color: #ffffff;
  padding: 15px 5%;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

.nav-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
  width: 100%;
}

.logo {
  display: flex;
  align-items: center;
}

.logo a {
  display: block;
  line-height: 0;
}

.logo img {
  height: clamp(70px, 9vw, 110px);
  width: auto;
  display: block;
  object-fit: contain;
}

/* Safety net: the logo image already contains the company name, so any
   leftover duplicate text next to it on older pages is hidden. */
.logo-text {
  display: none;
}

/* Phone pill - must never stretch */
.header-phone {
  flex: 0 0 auto;
  width: auto;
  background-color: var(--navy);
  color: #ffffff;
  padding: 10px 24px;
  border-radius: 30px;
  border: 2px solid var(--cream);
  text-decoration: none;
  font-weight: 600;
  font-size: 15px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.header-phone:hover {
  background-color: var(--navy-dark);
}

.nav-links {
  margin-top: 15px;
  border-top: 1px solid #eeeeee;
  padding-top: 12px;
}

.nav-links ul {
  display: flex;
  justify-content: center;
  list-style: none;
  gap: 10px 25px;
  flex-wrap: wrap;
}

.nav-links a {
  text-decoration: none;
  color: var(--navy);
  font-weight: 600;
  font-size: 14px;
  transition: color 0.2s ease;
}

.nav-links a.active,
.nav-links a:hover {
  color: var(--green-dark);
}

/* Phone pill + hamburger button sit together on the right */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  flex: 0 0 auto;
}

/* Hamburger button - hidden on desktop, shown at 900px and below */
.nav-toggle {
  display: none;
  width: 46px;
  height: 46px;
  padding: 0;
  background: #ffffff;
  border: 2px solid var(--navy);
  border-radius: 12px;
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}

.nav-toggle .bar {
  display: block;
  width: 22px;
  height: 3px;
  background-color: var(--navy);
  border-radius: 2px;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

/* Turns into an X when open */
.nav-toggle[aria-expanded="true"] .bar:nth-child(1) {
  transform: translateY(8px) rotate(45deg);
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(2) {
  opacity: 0;
}

.nav-toggle[aria-expanded="true"] .bar:nth-child(3) {
  transform: translateY(-8px) rotate(-45deg);
}

/* Phones and tablets: menu collapses into the hamburger.
   (Uses the .js class so the links stay visible if JavaScript is off.) */
@media (max-width: 900px) {
  .js .nav-toggle {
    display: flex;
  }

  .js .nav-links {
    display: none;
    margin-top: 12px;
  }

  .js .nav-links.open {
    display: block;
  }

  .nav-links ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .nav-links li {
    border-bottom: 1px solid #eeeeee;
  }

  .nav-links li:last-child {
    border-bottom: none;
  }

  .nav-links a {
    display: block;
    padding: 14px 8px;
    font-size: 16px;
  }
}

/* Small phones: phone pill shrinks to a round call button */
@media (max-width: 520px) {
  .phone-text {
    display: none;
  }

  .header-phone {
    width: 46px;
    height: 46px;
    padding: 0;
    justify-content: center;
    font-size: 18px;
  }
}


/* ================= 3. SHARED HERO STYLES ================= */
/* Home hero */
.hero {
  background: linear-gradient(rgba(0, 0, 0, 0.35), rgba(0, 0, 0, 0.35)),
              var(--home-hero-img, url('sunset-hero.jpg')) center/cover no-repeat;
  min-height: 480px;
  display: flex;
  align-items: center;
  padding: 60px 8%;
  color: #ffffff;
}

.hero-content {
  position: relative;
  z-index: 2;            /* keeps text above the wave divider */
  max-width: 580px;
}

.script-title {
  font-family: 'Caveat', cursive;
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  margin-bottom: 15px;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.4);
}

.hero-subtext {
  font-size: 17px;
  margin-bottom: 28px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.4);
}

/* Inner-page heroes: each page sets its own image + fade, the rest is shared */
.services-hero {
  --hero-img: url('services-hero.jpg');
  --hero-grad: var(--hero-fade);
}

.contact-hero {
  --hero-img: url('contact-hero.jpg');
  --hero-grad: var(--hero-fade);
  min-height: 280px;
  padding: 60px 30px;
}

.about-hero {
  --hero-img: url('about-hero.jpg');
  --hero-grad: var(--hero-fade);
  min-height: 380px;
  padding: 60px 30px;
}

.support-hero {
  --hero-img: url('who-we-support-hero.jpg');
  --hero-pos: right 20%;   /* keeps everyone's faces in the banner */
  --hero-grad: var(--hero-fade);
  min-height: 380px;
  padding: 80px 30px;
}

.how-hero {
  --hero-img: url('how-it-works-hero.jpg');
  --hero-pos: right 12%;   /* keeps the people's heads in view: 0% = top of photo, 100% = bottom */
  --hero-grad: var(--hero-fade);
  min-height: 380px;
  padding: 80px 30px;
}

.reviews-hero {
  --hero-img: url('reviews-hero.jpg');
  --hero-grad: var(--hero-fade);
  min-height: 340px;
  padding: 60px 40px;
}

.services-hero,
.contact-hero,
.about-hero,
.support-hero,
.how-hero,
.reviews-hero {
  display: flex;
  align-items: center;
  position: relative;
  overflow: hidden;
  color: #ffffff;
  background: var(--hero-grad), var(--hero-img) var(--hero-pos, center right) / cover no-repeat #163459;
}

.contact-hero .hero-content,
.about-hero .hero-content,
.support-hero .hero-content,
.how-hero .hero-content {
  position: relative;
  z-index: 2;
  max-width: 520px;
}

.contact-hero .hero-content {
  max-width: 600px;
}

.contact-hero .script-title,
.about-hero .script-title,
.support-hero .script-title,
.how-hero .script-title {
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  color: #ffffff;
  margin-bottom: 5px;
  line-height: 1;
}

.contact-hero .hero-subtext,
.support-hero .hero-subtext,
.how-hero .hero-subtext {
  font-size: clamp(1.05rem, 2.2vw, 1.3rem);
  color: #ffffff;
  font-weight: 500;
  margin: 0;
}


/* ================= 3b. WAVE DIVIDER UNDER EVERY HERO =================
   Layered white / green / navy waves. The last (bottom) wave takes the
   colour of the section underneath via --wave-next, so it blends in.
   To change the look, edit the shapes below or the wave height.          */
:root {
  --wave-h: clamp(48px, 6.5vw, 90px);
}

:is(.hero, .services-hero, .contact-hero, .about-hero, .support-hero, .how-hero, .reviews-hero) {
  position: relative;
  overflow: hidden;
  padding-bottom: calc(60px + var(--wave-h));
}

/* Line the banner text up with the logo and the Home/Services pages */
.contact-hero,
.about-hero,
.support-hero,
.how-hero {
  padding-left: 8%;
  padding-right: 8%;
}

/* Colour of the section that comes right after each hero */
.hero,
.services-hero,
.about-hero,
.support-hero,
.how-hero,
.reviews-hero  { --wave-next: var(--page-bg); }

/* Contact page: the section under its hero is blue, so the wave matches that */
.contact-hero  { --wave-next: var(--contact-blue); }

/* Fixed brand layers: white edge, green band, navy band */
:is(.hero, .services-hero, .contact-hero, .about-hero, .support-hero, .how-hero, .reviews-hero)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--wave-h);
  pointer-events: none;
  z-index: 1;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%2336743e' d='M0,48 C320,28 560,28 720,48 S1160,68 1440,34 L1440,140 L0,140 Z'/%3E%3Cpath fill='%23ffffff' d='M0,62 C320,42 560,42 720,62 S1160,82 1440,48 L1440,140 L0,140 Z'/%3E%3Cpath fill='%23163459' d='M0,76 C320,56 560,56 720,76 S1160,96 1440,62 L1440,140 L0,140 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}

/* Bottom layer: same shape as a mask, filled with the next section's colour */
:is(.hero, .services-hero, .contact-hero, .about-hero, .support-hero, .how-hero, .reviews-hero)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: var(--wave-h);
  pointer-events: none;
  z-index: 1;
  background-color: var(--wave-next, #ffffff);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,88 C320,68 560,68 720,88 S1160,108 1440,74 L1440,140 L0,140 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath d='M0,88 C320,68 560,68 720,88 S1160,108 1440,74 L1440,140 L0,140 Z'/%3E%3C/svg%3E") center bottom / 100% 100% no-repeat;
}


/* ================= 4. HOME PAGE ================= */
.hero-buttons {
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

.btn-primary {
  background-color: var(--green-dark);
  color: #ffffff;
  padding: 12px 26px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

.btn-primary:hover {
  background-color: #234a28;
}

.btn-outline {
  background-color: rgba(22, 52, 89, 0.6);
  color: #ffffff;
  padding: 12px 28px;
  border-radius: 30px;
  border: 1.5px solid #ffffff;
  text-decoration: none;
  font-weight: 600;
  transition: background-color 0.3s ease;
}

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

/* Specialized Care */
.specialized-care-section {
  background-color: var(--page-bg);
  padding: 60px 20px;
  text-align: center;
  width: 100%;
}

.specialized-care-section .container {
  max-width: 1100px;
  margin: 0 auto;
}

.section-title-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin-bottom: 40px;
}

.section-title-wrapper .section-title {
  color: var(--green);
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 1px;
  margin: 0;
}

.section-title-wrapper .title-line {
  height: 2px;
  width: 80px;
  background-color: var(--green);
}

.care-grid {
  display: flex;
  align-items: stretch;
  justify-content: space-between;
}

.care-card {
  flex: 1;
  padding: 10px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.care-icon {
  width: 75px;
  height: 75px;
  background-color: var(--navy);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  margin-bottom: 15px;
}

.care-card h3 {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: 8px;
  letter-spacing: 0.5px;
}

.care-card p {
  color: var(--navy);
  font-size: 0.95rem;
  line-height: 1.4;
  margin: 0;
  max-width: 250px;
}

.care-divider {
  width: 2px;
  background-color: var(--green);
  margin: 10px 0;
}


/* ================= 5. FOOTER ================= */
/* Navy footer with a curved white + green wave across the top.
   The wave is drawn by .wave-shape; the navy below it is the footer's
   own background. Change --footer-wave-h to make the wave taller/flatter.
   --footer-above is the colour of whatever sits above the footer.        */
:root {
  --footer-wave-h: clamp(64px, 7.5vw, 105px);
}

.footer {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: linear-gradient(
    to bottom,
    var(--footer-above, var(--page-bg)) 0,
    var(--footer-above, var(--page-bg)) calc(var(--footer-wave-h) - 1px),
    var(--navy) calc(var(--footer-wave-h) - 1px)
  );
  padding-top: calc(var(--footer-wave-h) * 0.66 + 22px);  /* tagline sits below the dip of the wave */
  padding-bottom: 22px;
}

.wave-shape {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--footer-wave-h);
  pointer-events: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 140' preserveAspectRatio='none'%3E%3Cpath fill='%23163459' d='M0,52 C320,72 560,72 720,52 S1160,32 1440,66 L1440,140 L0,140 Z'/%3E%3Cpath fill='%23ffffff' d='M0,64 C320,84 560,84 720,64 S1160,44 1440,78 L1440,140 L0,140 Z'/%3E%3Cpath fill='%2336743e' d='M0,78 C320,98 560,98 720,78 S1160,58 1440,92 L1440,140 L0,140 Z'/%3E%3Cpath fill='%23163459' d='M0,92 C320,112 560,112 720,92 S1160,72 1440,106 L1440,140 L0,140 Z'/%3E%3C/svg%3E") center top / 100% 100% no-repeat;
}

.footer-content-row {
  max-width: 1300px;
  margin: 0 auto;
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
}

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

.footer-center-tagline p {
  font-family: 'Caveat', cursive;
  color: #ffffff;
  font-size: 32px;
  font-weight: 700;
  margin: 0;
  text-shadow: 1px 2px 4px rgba(0, 0, 0, 0.3);
}

.footer-right-social {
  position: absolute;
  right: 30px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
}

.footer-icons {
  display: flex;
  gap: 10px;
}

.footer-icon-btn {
  width: 38px;
  height: 38px;
  background-color: var(--green);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  font-size: 16px;
  transition: background-color 0.3s ease, transform 0.2s ease;
}

.footer-icon-btn:hover {
  background-color: var(--green-dark);
  transform: translateY(-2px);
}

.copyright-text {
  color: #b0c4de;
  font-size: 12px;
  text-align: center;
  width: 100%;
  display: block;
  margin-top: 15px;
  position: relative;
  z-index: 2;
}


/* ================= 6. SERVICES PAGE ================= */
.services-grid-section {
  padding: 60px 20px;
  background-color: var(--page-bg);
}

.services-grid-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
}

.service-card {
  background: #ffffff;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.06);
  display: flex;
  flex-direction: column;
  transition: transform 0.3s ease;
}

.service-card:hover {
  transform: translateY(-4px);
}

/* Soft placeholder colour behind the photo while it loads (or if a photo is missing) */
.service-card-img {
  background: linear-gradient(135deg, #d7ebe3, #c5dbe9);
  min-height: 180px;
}

.service-card-img img {
  width: 100%;
  height: 180px;
  object-fit: cover;
  object-position: center 22%;   /* keeps heads and faces in view (0% = top of photo, 50% = middle) */
  display: block;
}

.service-card-body {
  padding: 25px 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  position: relative;
}

/* Floating navy icon overlapping the top of the card body */
.service-card-body .service-icon {
  width: 55px;
  height: 55px;
  background-color: var(--navy);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  margin-top: -45px;
  margin-bottom: 15px;
  border: 3px solid #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.service-card-body h3 {
  color: var(--navy);
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.service-card-body p {
  color: #555555;
  font-size: 0.9rem;
  line-height: 1.5;
  margin-bottom: 20px;
  flex: 1;
}

.service-btn {
  background-color: var(--navy);
  color: #ffffff;
  padding: 10px 22px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: 600;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background-color 0.3s ease;
}

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


/* ================= 7. CONTACT PAGE ================= */
.contact-navy-section {
  background-color: var(--contact-blue);
  padding: 70px 20px;
}

.contact-navy-section .container {
  max-width: 1200px;
  margin: 0 auto;
}

.contact-navy-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr);
  gap: 50px;
  align-items: center;
}

.contact-navy-info h2 {
  color: #ffffff;
  font-size: 1.8rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 10px;
}

.section-title-line {
  margin-bottom: 20px;
}

.section-title-line .green-line {
  width: 140px;
  height: 4px;
  background-color: var(--green);
  border-radius: 2px;
}

.contact-navy-info p {
  color: #e0e6ed;
  font-size: 0.95rem;
  line-height: 1.6;
  margin-bottom: 30px;
}

.navy-details-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.navy-details-list li {
  display: flex;
  align-items: center;
  gap: 15px;
}

.navy-icon-circle {
  width: 40px;
  height: 40px;
  background-color: var(--green);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  flex-shrink: 0;
}

.navy-details-list li > a,
.navy-details-list li > span {
  min-width: 0;
  overflow-wrap: anywhere;   /* long web/email addresses wrap instead of pushing the page wider */
}

.navy-details-list a,
.navy-details-list span {
  color: #ffffff;
  font-size: 0.95rem;
  text-decoration: none;
  transition: color 0.3s ease;
}

.navy-details-list a:hover {
  color: #7fe0a8; /* lighter green - the brand green is too dark on this blue */
}

.contact-white-form-card {
  background: #ffffff;
  padding: 40px;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}

.footer-on-blue {
  --footer-above: var(--contact-blue);   /* footer wave starts from the contact blue, not the mint page colour */
}

.contact-white-form-card h3 {
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 25px;
}

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

.contact-white-form-card .form-group {
  margin-bottom: 18px;
}

.contact-white-form-card input,
.contact-white-form-card textarea {
  width: 100%;
  padding: 12px 15px;
  border: 1px solid #c9d1d6;
  border-radius: 6px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: #333333;
  background-color: #fafbfc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.contact-white-form-card input:focus,
.contact-white-form-card textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(54, 116, 62, 0.2);
  background-color: #ffffff;
}

/* Button sits on the right without float (float broke the card height) */
.green-submit-btn {
  background-color: var(--green-dark);
  color: #ffffff;
  padding: 12px 28px;
  border: none;
  border-radius: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.92rem;
  display: flex;
  width: fit-content;
  margin-left: auto;
  align-items: center;
  justify-content: center;
  gap: 10px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.green-submit-btn:hover {
  background-color: #234a28;
}


/* Contact form: privacy note + thank-you / error message */
.contact-white-form-card .form-note {
  font-size: 0.8rem;
  color: #64748b;
  line-height: 1.45;
  margin: 0 0 16px;
}

.contact-white-form-card .form-status {
  margin: 14px 0 0;
  font-size: 0.92rem;
  line-height: 1.5;
}

.contact-white-form-card .form-status:empty {
  display: none;
}

.contact-white-form-card .form-status.ok {
  color: var(--green-dark);
  font-weight: 600;
}

.contact-white-form-card .form-status.error {
  color: #b42318;
}

.green-submit-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}


/* ================= 8. ABOUT PAGE ================= */

/* While Wesley's photo (about-hero.jpg) isn't in the folder yet, a soft green glow fills the
   right side. Once the photo exists it covers the glow automatically. */
.about-hero {
  background:
    var(--hero-grad),
    var(--hero-img) center right / cover no-repeat,
    radial-gradient(circle at 80% 50%, rgba(54, 116, 62, 0.38), rgba(54, 116, 62, 0) 42%) #163459;
}

.about-hero .hero-subtitle-bold {
  font-size: 1.25rem;
  font-weight: 700;
  color: #ffffff;
  margin-bottom: 20px;
}

.about-hero .hero-body-text {
  font-size: 0.95rem;
  color: #ffffff;
  line-height: 1.6;
  margin-bottom: 25px;
}

.about-hero .script-tagline {
  line-height: 1.25;   /* script font looks better with tighter lines */
  font-family: 'Caveat', cursive;
  font-size: 1.8rem;
  color: #ffffff;
}

.about-cards-section {
  background-color: var(--page-bg);
  padding: 50px 20px 80px 20px;
}

.about-cards-section .container {
  max-width: 1000px;
  margin: 0 auto;
}

.about-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
}

.about-feature-card {
  background: #ffffff;
  padding: 30px 20px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.about-feature-card .card-icon {
  font-size: 2rem;
  color: var(--navy);
  margin-bottom: 15px;
}

.about-feature-card h3 {
  color: var(--navy);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.3;
  margin: 0;
}


/* ================= 9. WHO WE SUPPORT PAGE ================= */
.support-main-section {
  padding: 60px 20px 80px 20px;
  background-color: var(--page-bg);
}

.support-container {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 15px;
}

.support-intro-text {
  font-size: 1.15rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.5;
  margin-bottom: 35px;
}

/* 2-column checkmark grid */
.support-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 25px 40px;
  margin-bottom: 50px;
}

.support-item {
  display: flex;
  align-items: center;
  gap: 15px;
}

.support-item .check-circle {
  width: 34px;
  height: 34px;
  min-width: 34px;
  background-color: var(--green);
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
}

.support-item .support-item-text {
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 600;
  line-height: 1.4;
}

/* "Our Approach" mint card */
.approach-card {
  background-color: var(--mint);
  border-radius: 18px;
  padding: 35px 40px;
  display: flex;
  align-items: center;
  gap: 30px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.03);
}

.approach-icon-box {
  width: 80px;
  height: 80px;
  min-width: 80px;
  background-color: var(--navy);
  color: #ffffff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 2.2rem;
}

.approach-title {
  font-family: 'Caveat', cursive;
  font-size: 2.7rem;
  color: var(--navy);
  margin: 0 0 8px 0;
  line-height: 1;
}

.approach-content p {
  color: var(--navy);
  font-size: 1.05rem;
  line-height: 1.6;
  margin: 0;
}

/* ================= 10. HOW IT WORKS PAGE ================= */
.how-main-section {
  padding: 60px 20px 80px 20px;
  background-color: var(--page-bg);
  text-align: center;
}

.how-container {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 15px;
}

.how-steps-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 25px;
  margin: 25px 0 60px;
}

.step-card {
  background: #ffffff;
  border: 1px solid #e0e0e0;
  border-radius: 16px;
  padding: 40px 20px 30px 20px;
  position: relative;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.step-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

/* Number badge (top centre) */
.step-badge {
  position: absolute;
  top: -22px;
  left: 50%;
  transform: translateX(-50%);
  width: 44px;
  height: 44px;
  background-color: var(--green-dark);
  color: #ffffff;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  box-shadow: 0 3px 8px rgba(54, 116, 62, 0.3);
}

.step-icon {
  font-size: 2.2rem;
  color: var(--navy);
  margin-top: 10px;
  margin-bottom: 20px;
}

.step-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 12px;
}

.step-card p {
  font-size: 0.92rem;
  color: #555555;
  line-height: 1.5;
  margin: 0;
}

.how-bottom-tagline {
  font-family: 'Caveat', cursive;
  font-size: 2.8rem;
  color: var(--navy);
  margin-top: 20px;
  margin-bottom: 0;
}


.how-cta {
  margin: 26px 0 0;
}

/* ================= 11. REVIEWS PAGE ================= */
.reviews-hero .hero-content {
  max-width: 1200px;
  margin: 0 auto;
  width: 100%;
}

.script-hero-title {
  font-family: 'Caveat', cursive;
  font-size: clamp(2.6rem, 5.5vw, 3.8rem);
  color: #ffffff;
  margin: 0 0 5px 0;
  font-weight: 700;
  line-height: 1.1;
}

.hero-subtitle {
  color: #ffffff;
  font-size: clamp(1.05rem, 2.2vw, 1.25rem);
  margin: 0;
  opacity: 0.95;
}

.reviews-container {
  max-width: 1100px;
  margin: 60px auto;
  padding: 0 20px;
}

/* Reviews on the left, form on the right */
.reviews-split-wrapper {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 340px;
  gap: 30px;
  align-items: start;
}

.reviews-grid-2x2 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
}

.review-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 28px 24px;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.review-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.08);
}

.quote-icon {
  font-size: 1.6rem;
  color: var(--green);
  margin-bottom: 14px;
  display: block;
}

.review-text {
  font-size: 0.95rem;
  color: #334155;
  line-height: 1.6;
  margin-bottom: 22px;
  overflow-wrap: anywhere;
}

.review-author strong {
  display: block;
  color: var(--navy);
  font-size: 1.05rem;
}

.review-author span {
  font-size: 0.85rem;
  color: #64748b;
  font-style: italic;
}

/* Shown when there are no approved reviews yet */
.reviews-empty {
  grid-column: 1 / -1;
  background: #ffffff;
  border: 1px dashed #b8c7d1;
  border-radius: 14px;
  padding: 36px 24px;
  text-align: center;
  color: #475569;
  line-height: 1.6;
}

/* ----- Review form card ----- */
.review-form-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 28px 26px;
  box-shadow: 0 6px 22px rgba(8, 40, 70, 0.1);
  border-top: 5px solid var(--green);
  position: sticky;
  top: 20px;
}

.review-form-card h2 {
  font-family: 'Caveat', cursive;
  font-size: 2.3rem;
  line-height: 1;
  color: var(--navy);
  margin: 0 0 6px;
}

.review-form-card .form-subtext {
  color: #475569;
  font-size: 0.92rem;
  margin: 0 0 18px;
}

.review-form .form-group {
  margin-bottom: 15px;
}

.review-form label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 5px;
}

.review-form input[type="text"],
.review-form select,
.review-form textarea {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid #c9d1d6;
  border-radius: 8px;
  font-family: 'Poppins', sans-serif;
  font-size: 0.92rem;
  color: #333333;
  background-color: #fafbfc;
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

.review-form textarea {
  resize: vertical;
  min-height: 110px;
}

.review-form input:focus,
.review-form select:focus,
.review-form textarea:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(54, 116, 62, 0.2);
  background-color: #ffffff;
}

/* Hidden spam trap - people never see it */
.hp-field {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.review-form .consent-row {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-weight: 400;
  font-size: 0.82rem;
  color: #475569;
  line-height: 1.45;
  margin-bottom: 10px;
  cursor: pointer;
}

.review-form .consent-row input {
  margin-top: 3px;
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  accent-color: var(--green);
}

.review-form .form-note {
  font-size: 0.78rem;
  color: #64748b;
  margin: 0 0 14px;
  line-height: 1.45;
}

.submit-btn {
  width: 100%;
  background-color: var(--green-dark);
  color: #ffffff;
  padding: 13px 24px;
  border: none;
  border-radius: 30px;
  font-family: 'Poppins', sans-serif;
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.submit-btn:hover {
  background-color: #234a28;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: wait;
}

.form-status {
  margin: 12px 0 0;
  font-size: 0.88rem;
  line-height: 1.45;
}

.form-status:empty {
  display: none;
}

.form-status.ok {
  color: var(--green-dark);
  font-weight: 600;
}

.form-status.error {
  color: #b42318;
}

.thank-you-banner {
  text-align: center;
  margin-top: 60px;
  margin-bottom: 20px;
}

.script-thank-you {
  font-family: 'Caveat', cursive;
  font-size: 2.8rem;
  color: var(--navy);
  font-weight: 700;
}


/* ================= 13. RESPONSIVE RULES ================= */
@media (max-width: 992px) {
  .services-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .contact-navy-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 40px;
  }

  .how-steps-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 40px 25px;
  }
}

@media (max-width: 900px) {
  /* form drops below the reviews */
  .reviews-split-wrapper {
    grid-template-columns: 1fr;
  }
  .review-form-card {
    position: static;
    max-width: 560px;
    width: 100%;
    margin: 0 auto;
  }
}

@media (max-width: 600px) {
  .reviews-grid-2x2 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .review-card {
    padding: 22px 20px;
  }
}

@media (max-width: 768px) {
  /* Home: compact phone layout - icon on the left, text on the right */
  .specialized-care-section {
    padding: 40px 20px 36px;
  }

  .section-title-wrapper {
    gap: 12px;
    margin-bottom: 20px;
  }

  .section-title-wrapper .section-title {
    font-size: 1.35rem;
    letter-spacing: 0.5px;
  }

  .section-title-wrapper .title-line {
    width: 28px;
  }

  .care-grid {
    flex-direction: column;
    gap: 0;
    max-width: 460px;
    margin: 0 auto;
  }

  .care-card {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 16px;
    align-items: center;
    text-align: left;
    padding: 16px 4px;
  }

  .care-icon {
    grid-row: 1 / span 2;
    width: 56px;
    height: 56px;
    font-size: 1.3rem;
    margin-bottom: 0;
  }

  .care-card h3 {
    font-size: 0.95rem;
    margin-bottom: 2px;
    align-self: end;
  }

  .care-card p {
    max-width: none;
    font-size: 0.9rem;
    align-self: start;
  }

  .care-divider {
    width: 100%;
    height: 1px;
    margin: 0;
    opacity: 0.5;
  }

  /* Footer: icons drop below the tagline instead of overlapping it */
  .footer-content-row {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .footer-right-social {
    position: static;
    transform: none;
  }

  .footer-center-tagline p {
    font-size: 26px;
  }

  /* Inner pages */
  .about-cards-grid,
  .support-list-grid {
    grid-template-columns: 1fr;
  }

  .approach-card {
    flex-direction: column;
    text-align: center;
    padding: 30px 20px;
  }
}

@media (max-width: 700px) {
  .logo img {
    height: 70px;
  }

  .header-container {
    flex-direction: column;
    gap: 12px;
  }

  /* On phones the text spans the photo, so use a light, even overlay (text has its own shadow) */
  :root {
    --hero-fade: linear-gradient(rgba(22, 52, 89, 0.4), rgba(22, 52, 89, 0.4));
  }

  .hero {
    padding: 50px 6% calc(50px + var(--wave-h));
    min-height: 420px;
  }
}

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

@media (max-width: 600px) {
  .form-row-double {
    grid-template-columns: 1fr;
  }

  .contact-white-form-card {
    padding: 28px 20px;
  }
}

@media (max-width: 576px) {
  .how-steps-grid {
    grid-template-columns: 1fr;
    gap: 45px;
  }

  .how-bottom-tagline {
    font-size: 2.2rem;
  }
}

/* ================= 13b. SERVICE POP-UPS (Learn More) ================= */
.service-modal {
  border: none;
  border-radius: 16px;
  padding: 0;
  margin: auto;
  width: calc(100% - 32px);
  max-width: 520px;
  max-height: calc(100dvh - 32px);
  overflow: auto;
  color: var(--text);
  background: #ffffff;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
}

.service-modal[open] {
  animation: modalIn 0.2s ease;
}

.service-modal::backdrop {
  background: rgba(22, 52, 89, 0.65);
}

@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Stop the page behind the pop-up from scrolling */
body:has(dialog[open]) {
  overflow: hidden;
}

.service-modal-inner {
  position: relative;
  padding: 38px 30px 30px;
  text-align: center;
}

.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #eef2f5;
  color: var(--navy);
  font-size: 26px;
  line-height: 1;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.modal-close:hover {
  background: #dde6ec;
}

.modal-icon {
  width: 60px;
  height: 60px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--navy);
  color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
}

.service-modal h3 {
  color: var(--navy);
  font-size: 1.4rem;
  font-weight: 700;
  margin-bottom: 14px;
}

.service-modal p {
  color: #444444;
  font-size: 0.98rem;
  line-height: 1.65;
  margin-bottom: 14px;
  text-align: left;
}

.service-modal ul {
  margin: 0 0 16px 20px;
  text-align: left;
  color: #444444;
  line-height: 1.65;
}

.service-modal .service-btn {
  margin-top: 6px;
}

@media (prefers-reduced-motion: reduce) {
  .service-modal[open] {
    animation: none;
  }
}


@media (min-width: 701px) and (max-width: 1000px) {
  :root {
    --hero-fade: linear-gradient(90deg, rgba(22, 52, 89, 0.75) 0%, rgba(22, 52, 89, 0.5) 55%, rgba(22, 52, 89, 0.25) 100%);
  }
}

/* A soft shadow keeps white banner text readable over a lighter photo */
:is(.services-hero, .contact-hero, .about-hero, .support-hero, .how-hero, .reviews-hero) :is(.script-title, .hero-subtext, .hero-subtitle, .hero-subtitle-bold, .hero-body-text, .script-tagline, .script-hero-title) {
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 2px 12px rgba(0, 0, 0, 0.55);
}


/* ================= 14. PHONE-FIRST TIGHTENING ================= */

/* Floating "Call us" button - only appears on phones (see 700px block below) */
.call-fab {
  display: none;
  position: fixed;
  right: 14px;
  bottom: 14px;
  z-index: 50;
  align-items: center;
  gap: 8px;
  padding: 13px 20px;
  background-color: var(--green-dark);
  color: #ffffff;
  border-radius: 30px;
  border: 2px solid #ffffff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
  font-weight: 600;
  font-size: 15px;
  text-decoration: none;
}

.call-fab:hover {
  background-color: #234a28;
}

/* Footer: stack the icons under the tagline on tablets too, so they never overlap it */
@media (max-width: 900px) {
  .footer-content-row {
    flex-direction: column;
    text-align: center;
    gap: 20px;
  }

  .footer-right-social {
    position: static;
    transform: none;
  }
}

/* Specialized Care becomes compact rows: icon on the left, text on the right */
@media (max-width: 768px) {
  .care-grid {
    gap: 0;
    max-width: 520px;
    margin: 0 auto;
  }

  .care-card {
    flex: none;
    display: grid;
    grid-template-columns: 54px 1fr;
    column-gap: 16px;
    row-gap: 2px;
    align-items: center;
    text-align: left;
    padding: 16px 4px;
  }

  .care-icon {
    grid-row: 1 / span 2;
    width: 54px;
    height: 54px;
    font-size: 1.2rem;
    margin: 0;
  }

  .care-card h3 {
    margin: 0;
    font-size: 0.95rem;
    align-self: end;
  }

  .care-card p {
    margin: 0;
    max-width: none;
    font-size: 0.9rem;
    align-self: start;
  }

  .care-divider {
    width: 100%;
    height: 1px;
    margin: 0;
    background-color: rgba(54, 116, 62, 0.35);
  }
}

@media (max-width: 700px) {
  /* Smaller waves so they don't eat the screen */
  :root {
    --wave-h: 48px;
    --footer-wave-h: 72px;
  }

  /* Shorter heroes */
  .hero {
    min-height: 0;
    padding: 34px 6% calc(30px + var(--wave-h));
  }

  .services-hero,
  .contact-hero,
  .about-hero,
  .support-hero,
  .how-hero,
  .reviews-hero {
    min-height: 0;
    padding: 34px 20px calc(28px + var(--wave-h));
  }

  .hero-subtext {
    font-size: 16px;
    margin-bottom: 20px;
  }

  .btn-primary,
  .btn-outline {
    padding: 11px 22px;
    font-size: 15px;
  }

  /* Tighter section spacing on every page */
  .specialized-care-section {
    padding: 34px 16px 44px;
  }

  .services-grid-section {
    padding: 36px 16px;
  }

  .about-cards-section {
    padding: 32px 16px 48px;
  }

  .support-main-section,
  .how-main-section {
    padding: 36px 16px 48px;
  }

  .contact-navy-section {
    padding: 40px 16px;
  }

  .reviews-container {
    margin: 36px auto;
  }

  .thank-you-banner {
    margin-top: 36px;
  }

  /* Services cards: shorter photos and tighter gaps so six cards don't make a huge scroll */
  .services-grid {
    gap: 18px;
  }

  .service-card-img {
    min-height: 140px;
  }

  .service-card-img img {
    height: 140px;
  }

  .service-card-body {
    padding: 20px 16px;
  }

  /* About page: the three cards become compact rows */
  .about-cards-grid {
    gap: 12px;
  }

  .about-feature-card {
    flex-direction: row;
    justify-content: flex-start;
    gap: 16px;
    padding: 16px 18px;
    text-align: left;
  }

  .about-feature-card .card-icon {
    width: 44px;
    margin: 0;
    font-size: 1.7rem;
    text-align: center;
    flex-shrink: 0;
  }

  .about-feature-card h3 {
    font-size: 1rem;
  }

  /* Section heading stays on one line */
  .section-title-wrapper {
    gap: 12px;
    margin-bottom: 20px;
  }

  .section-title-wrapper .section-title {
    font-size: 1.25rem;
    letter-spacing: 0.5px;
  }

  .section-title-wrapper .title-line {
    width: 30px;
  }

  /* Show the floating call button, leave room under the footer text for it */
  .call-fab {
    display: inline-flex;
  }

  .footer {
    padding-bottom: 80px;
  }
}

/* ================= 15. PHONE POLISH ================= */
/* iPhone notch / landscape: keep content out of the cut-outs */
body {
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

/* Phones & tablets: header stays at the top while scrolling so the menu and phone button are always one tap away */
@media (max-width: 900px) {
  .navbar {
    position: sticky;
    top: 0;
    z-index: 100;
  }

  /* a long open menu scrolls inside itself instead of running off short screens */
  .js .nav-links.open {
    max-height: calc(100vh - 100px);
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
  }

  /* 16px text in form boxes stops iPhones zooming the page when you tap a field */
  :is(.contact-white-form-card, .review-form) :is(input[type="text"], input[type="email"], input[type="tel"], select, textarea) {
    font-size: 16px;
  }

  /* bigger tap targets (44px is the phone guideline) */
  .footer-icon-btn {
    width: 44px;
    height: 44px;
    font-size: 18px;
  }
}

/* Call button and footer clear the iPhone's bottom bar */
@media (max-width: 700px) {
  .call-fab {
    right: calc(14px + env(safe-area-inset-right));
    bottom: calc(14px + env(safe-area-inset-bottom));
  }

  .footer {
    padding-bottom: calc(80px + env(safe-area-inset-bottom));
  }
}

/* Phones download the smaller photo versions (name-mobile.jpg) so pages load faster on mobile data */
@media (max-width: 700px) {
  :root                { --home-hero-img: url('sunset-hero-mobile.jpg'); }
  .services-hero       { --hero-img: url('services-hero-mobile.jpg'); }
  .contact-hero        { --hero-img: url('contact-hero-mobile.jpg'); }
  .support-hero        { --hero-img: url('who-we-support-hero-mobile.jpg'); }
  .how-hero            { --hero-img: url('how-it-works-hero-mobile.jpg'); }
  .reviews-hero        { --hero-img: url('reviews-hero-mobile.jpg'); }

  /* About: on phones Wesley's photo sits across the top, fading into navy, with the text below it
     (so the text never covers his face). Photo = about-hero-mobile.jpg, shown full width. */
  .about-hero {
    --hero-img: url('about-hero-mobile.jpg');
    padding-top: calc(100vw * 0.77 - 10px);
    background:
      linear-gradient(to bottom, rgba(22, 52, 89, 0) 0, rgba(22, 52, 89, 0) calc(100vw * 0.5), #163459 calc(100vw * 0.77)),
      var(--hero-img) top center / 100% auto no-repeat,
      #163459;
  }

  /* Who We Support: taller on phones with the text at the bottom, so the title doesn't cover the faces */
  .support-hero {
    min-height: 250px;
    align-items: flex-end;
    --hero-pos: center top;
  }
}

/* Phones: less empty space between the last content and the footer wave */
@media (max-width: 700px) {
  .about-cards-section {
    padding-bottom: 20px;
  }

  .support-main-section,
  .how-main-section {
    padding-bottom: 24px;
  }
}

/* Respect visitors who prefer less motion */
@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    scroll-behavior: auto !important;
  }
}
 /* Our Approach card: slightly deeper green so it stands out from the page */
.approach-card {
  background-color: #d2eadf;
  border: 1px solid #b9dccb;
  box-shadow: 0 4px 15px rgba(22, 52, 89, 0.08);
}