/* ===== COLOUR SYSTEM ===== */
:root{
  --clr-main-light:#faeea7;
  --clr-main-blue:#87b1cb;
  --clr-neutral-light:#d6d6d6;
  --clr-neutral-dark:#4a4a4a;
  --clr-brand-green:#00963f;
  --clr-accent:#ff4e59;
  --clr-white:#ffffff;
}

/* ------------------------------------------------------------------ */
/* 1.  Stronger colour for section titles & subtitles (not hero) */
/* ------------------------------------------------------------------ */
.why-title,
.label-small,
.areas-heading,
.faq-heading,
.faq-intro {
  color:black !important;                 /* darker / bolder */
}

/* 1. Larger base font for elderly accessibility (20px) */
html { font-size:110%; scroll-behavior:smooth; }
body { font-family:"Helvetica Neue",Arial,sans-serif; color:var(--clr-neutral-dark); line-height:1.6; }
/* 2. Skip link */
.skip-link {
  position:absolute; left:-999px; background:#000; color:#fff; padding:.5rem; z-index:2000;
}
.skip-link:focus { left:.5rem; top:.5rem; }
/* 3. Focus-visible */
:focus-visible { outline:3px solid var(--clr-accent); outline-offset:2px; }


/* ===== GLOBAL ===== */
html{scroll-behavior:smooth;}
body{font-family:"Helvetica Neue",Arial,sans-serif;color:var(--clr-neutral-dark);line-height:1.6;}
a,button,input,select,textarea{outline-offset:2px;}
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible{outline:3px solid var(--clr-accent);}
.text-brand-green{color:var(--clr-brand-green);}
.bg-neutral-dark{background:var(--clr-neutral-dark);}

/* BUTTONS */
.btn-accent{background:var(--clr-accent);color:var(--clr-white);border:none;}
.btn-accent:hover,.btn-accent:focus{background:#e64351;color:var(--clr-white);}

/* NAVBAR */
.navbar-nav .nav-link{font-weight:500;color:var(--clr-neutral-dark);margin-inline:.75rem;}
.navbar-nav .nav-link:hover,.navbar-nav .nav-link:focus{color:var(--clr-main-blue);}
.phone-number a:hover,.phone-number a:focus{text-decoration:underline;}
.vr{opacity:.25;}

.navbar-brand img {
  width: 36px;
  height: auto;
}


header {
  position: sticky !important;
  top: 0;
  z-index: 1020;
}

/* make sure all h1s have an explicit size */
h1 {
  font-size: clamp(2.2rem, 5vw, 3.6rem);
  line-height: 1.15;
}



/* HERO */
.hero{min-height:80vh;background:url(hero.jpg) center/cover no-repeat;position:relative;display:flex;align-items:center;}
.hero-overlay{position:absolute;inset:0;background:rgba(0,0,0,.45);}
.hero-copy{position:relative;max-width:46rem;color:var(--clr-white);padding-block:4rem;}
.hero-copy h1{font-size:clamp(2.2rem,5vw,3.6rem);line-height:1.15;}
.highlight-yellow{color:var(--clr-main-light);}
.hero-form{max-width:40rem;}
.hero-form .form-control{border:none;border-radius:9999px 0 0 9999px;padding-inline:1.4rem;}
.hero-form .btn{border-radius:0 9999px 9999px 0;padding-inline:1.5rem;}

/* ========= NEW WHY SECTION ========= */
.why-section{overflow:hidden;background:#fff;position:relative;}
/* soft abstract blob */
.why-shape{
  position:absolute;top:0;right:50%;width:120%;height:120%;
  background:var(--clr-main-light);
  opacity:.15;
  transform:translate(40%,-20%) rotate(8deg);
  border-radius:50%;
}
/* dotted pattern */
.why-dots{
  position:absolute;top:-40px;right:-120px;width:360px;height:360px;
  background-image:radial-gradient(var(--clr-neutral-light) 20%,transparent 20%);
  background-size:20px 20px;opacity:.4;
}

.label-small{
  letter-spacing:.08em;
  font-size:.75rem;
  color:var(--clr-neutral-dark);
}
.why-title{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  color:var(--clr-neutral-dark);
}
.why-text{font-size:1.1rem;}

.why-card{
  position:relative;z-index:1;border:1px solid rgba(0,0,0,.05);
}
.why-list li{
  padding-block:.9rem;
  border-bottom:1px solid var(--clr-neutral-light);
  font-size:1.05rem;
  line-height:1.4;
  display:flex;gap:.75rem;align-items:flex-start;
}
.why-list li:last-child{border-bottom:none;}
.check-icon{
  flex:0 0 1.3rem;height:1.3rem;
  border:2px solid var(--clr-main-blue);
  border-radius:50%;
  position:relative;top:2px;
}
.check-icon::after{
  content:"";position:absolute;inset:0;
  width:.55rem;height:.3rem;margin:.2rem auto 0;
  border-bottom:2px solid var(--clr-main-blue);
  border-left:2px solid var(--clr-main-blue);
  transform:rotate(-45deg);
}

/* ----------------------------------------------------- *
   “EXPLORE” CARD REFINEMENTS  (new/updated styles)
 * ----------------------------------------------------- */

.info-card{
  background:var(--clr-white);
  border-radius:1.25rem;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  height:100%;
}
.info-card img{
  aspect-ratio:1/1;
  object-fit:cover;
}
.info-card-body{
  position:relative;
  padding:1.5rem 1.75rem 3.5rem;  /* extra bottom room for CTA */
  flex-grow:1;
  background:#f8f8f8;
}
.info-card-title{
  font-weight:600;
  font-size:1.1rem;
  color:var(--clr-neutral-dark);
  margin-bottom:.35rem;
}
.info-card-text{font-size:1rem;margin-bottom:.4rem;}
.role{color:var(--clr-neutral-dark);font-size:.9rem;display:block}

/* ===================================================== *
   CARD CTA – text + circular arrow on the same row
 * ===================================================== */

.card-cta-link{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:1rem;

  position:absolute;       /* sits at bottom of card panel */
  left:1.75rem;
  right:1.75rem;
  bottom:1.25rem;

  text-decoration:none;
}

.cta-text{
  font-weight:600;         /* bold */
  font-size:1.05rem;       /* larger for readability */
  color:var(--clr-neutral-dark);
}

/* circular arrow */
.cta-arrow{
  width:38px;
  height:38px;
  border-radius:50%;
  background:var(--clr-accent);           /* ★ always red fill */
  display:flex;
  justify-content:center;
  align-items:center;

  font-size:1.25rem;
  color:var(--clr-white);

  transition:transform .25s, filter .25s;
}
.cta-arrow::before{content:"\2192";}      /* → */

/* hover / focus state – lift & slight shade */
.card-cta-link:hover .cta-arrow,
.card-cta-link:focus .cta-arrow{
  transform:translateY(-2px);
  filter:brightness(0.93);
}

/* maintain underline-free but keyboard focus-visible */
.card-cta-link:focus .cta-text{text-decoration:underline;}



/* ===================================================== *
   AREAS WE SERVE
 * ===================================================== */

.areas-heading{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.2;
  color:var(--clr-neutral-dark);
}

.areas-subtitle{
  font-size:1.15rem;
  color:var(--clr-neutral-dark);
}

.area-pill{
  display:inline-block;
  padding:.4rem 1.1rem;
  border-radius:1.5rem;
  background:var(--clr-main-light);     /* soft yellow pill */
  color:var(--clr-neutral-dark);
  font-weight:600;
  text-decoration:none;
  transition:background .2s, transform .2s;
}
.area-pill:hover,
.area-pill:focus{
  background:var(--clr-accent);         /* brand red on hover */
  color:var(--clr-white);
  transform:translateY(-2px);
}

/* TESTIMONIAL SECTION */
.testimonial-heading{font-size:clamp(2rem,4vw,3rem);font-weight:700;line-height:1.2;color:var(--clr-neutral-dark);max-width:34rem;}
.testimonial-img{width:100%;border-radius:1rem;object-fit:cover;}
.big-quote{font-size:7rem;line-height:0;color:var(--clr-neutral-dark);display:inline-block;margin-bottom:1rem;}
.testimonial-text{font-size:1.15rem;color:var(--clr-neutral-dark);margin-bottom:1.75rem;}
.testimonial-author{font-weight:600;color:var(--clr-brand-green);}
.carousel-nav{font-size:2rem;border:none;background:none;color:var(--clr-accent);transition:transform .2s;}
.carousel-nav:hover,.carousel-nav:focus{transform:translateY(-2px);}
.counter{color:var(--clr-neutral-dark);}
.nav-cluster{display:flex;justify-content:flex-start;align-items:center;gap:1.5rem;margin-top:.5rem;}
@media (max-width:991.98px){
  .testimonial-text{font-size:1rem;}
  .big-quote{font-size:4rem;}
}

.btn-primary {
  background-color: var(--clr-accent);
  border-color:    var(--clr-accent);
  color:           #fff;
}


/* ========== FAQ SECTION (only shape edit below) ========== */
.faq-section{position:relative;overflow:hidden;background:#fff;}

.faq-shape{
  position:absolute;
  top:-15%;                 /* slightly up so curve not too low */
  left:-10%;                /* start further left */
  width:120%;               /* stretch width so it reaches right edge */
  height:140%;
  background:var(--clr-main-light);
  opacity:.15;
  transform:rotate(-6deg);
  border-radius:50%;
}

/* dotted overlay unchanged */
.faq-dots{
  position:absolute;right:-120px;top:-60px;width:360px;height:360px;
  background-image:radial-gradient(var(--clr-neutral-light) 22%,transparent 22%);
  background-size:22px 22px;opacity:.4;
}

/* headings & intro (darker now via --clr-heading) */
.faq-heading{
  font-size:clamp(2rem,4vw,3rem);
  font-weight:700;
  line-height:1.2;
}
.faq-intro{font-size:1.15rem;color:var(--clr-heading);}

/* accordion cards (unchanged) */
.faq-card .accordion-button{
  background:#f8f8f8;border:none;font-weight:600;font-size:1rem;
  padding:1.1rem 1.4rem;border-radius:.75rem;
}
.faq-card .accordion-button:not(.collapsed){
  background:var(--clr-main-light);color:var(--clr-heading);
  box-shadow:inset 0 0 0 1px var(--clr-main-light);
}
.faq-card .accordion-body{padding:1rem 1.4rem 1.25rem;font-size:1rem;}
.faq-card{border:none;}
.faq-card+.faq-card{margin-top:1rem;}

@media (max-width:767.98px){
  .faq-intro{font-size:1rem;margin-top:1.25rem;}
  .faq-shape{left:-30%;width:160%;}     /* ensure full bleed on mobile */
}

/* ────────────────────────────────────────────────────────── *
   FINAL CTA (background-image, no overlay)
 * ────────────────────────────────────────────────────────── */
.final-cta {
  position: relative;
  height: 80vh;

  /* use your own image here */
  background: url('cta.jpg') center/cover no-repeat;
}
.final-cta .container { z-index: 1; }
.final-cta .card {
  background: var(--clr-white);
  border-radius: .75rem;
  box-shadow: 0 .5rem 1rem rgba(0,0,0,0.1);
  text-align: center;
}

/* ------------------------------------------------------------------ */
/* FOOTER (copied from contact.css)                                   */
/* ------------------------------------------------------------------ */
footer,
footer h4,
footer p,
footer small {
  color: var(--clr-white)!important;
}
footer .list-unstyled a {
  color: var(--clr-main-light)!important;
}
footer .list-unstyled a:hover,
footer .list-unstyled a:focus {
  text-decoration: underline!important;
}
.bg-neutral-dark { background: var(--clr-neutral-dark)!important; }
.text-main-light { color: var(--clr-main-light)!important; }

/* ─── SOCIAL LINKS ───────────────────────────────────────────────── */
.social-links a {
  display: inline-block;
  transition: color .2s;
}
.social-links a:hover,
.social-links a:focus {
  color: var(--clr-accent) !important;  /* switch to your red on hover */
}



/* ===================================================== *
   MOBILE: place quote mark under the image
 * ===================================================== */
@media (max-width:575.98px){   /* phones */
  .big-quote{
    position:static;          /* stop absolute overlap */
    display:block;
    margin:1rem 0 0;          /* space above quote */
    line-height:1;            /* tighten gap */
  }
}

/* ===================================================== *
   HERO – MOBILE LAYOUT & TYPE SIZE
 * ===================================================== */
@media (max-width:575.98px){

  /* 1 ▸ stack phone + button */
  .hero-form .input-group{
    flex-direction:column;             /* vertical instead of inline */
    gap:.75rem;
  }
  .hero-form .form-control{
    border-radius:9999px !important;   /* pill all round */
    width:100%;
  }
  .hero-form .btn{
    width:100%;
    border-radius:9999px !important;
  }

  /* 2 ▸ slightly smaller headline & body copy */
  .hero-copy h1{
    font-size:1.85rem;                 /* was ~2.2–3.6 via clamp */
    line-height:1.25;
  }
  .hero-copy p{
    font-size:1rem;                    /* down from 1.15rem lead */
  }
}
/* ===================================================== *
   HERO – MOBILE PLACEHOLDER SIZE & CENTERED HELP TEXT
 * ===================================================== */
@media (max-width:575.98px){

  /* smaller placeholder so full line fits */
  .hero-form .form-control::placeholder{
    font-size:.85rem;          /* was 1rem; tweak until it shows fully */
  }

  /* centre-align help text under button */
  .hero-form .form-text{
    text-align:center;
    display:block;
    margin-top:.35rem;
  }
}

/* ================================================================== *
   TABLET / SMALL-DESKTOP FIXES  (≥ 576px and < 992px)
 * ================================================================== */
@media (min-width:576px) and (max-width:991.98px){



  /* ---------- 2. TESTIMONIALS ------------------------------------ */
  /* slightly smaller quote mark */
  .big-quote{
    font-size:5.5rem;
  }

  /* centre nav cluster under text block */
  .nav-cluster{
    justify-content:center;
    margin-top:1rem;
  }

  /* image and text stack nicely */
  #testimonials .row.g-lg-5{
    row-gap:2rem;
  }
}


/* ============================================================= *
   HIDE CTA ARROW ON TABLET (576px–991.98px)
 * ============================================================= */
@media (min-width: 576px) and (max-width: 991.98px) {
  .cta-arrow {
    display: none !important;
  }
}

/* ------------------------------------------------------------------ */
/* NAVBAR (as About)                                                  */
/* ------------------------------------------------------------------ */
header {
  position: sticky !important;
  top: 0;
  z-index: 1020;
  background: var(--clr-white);
  box-shadow: 0 .125rem .25rem rgba(0,0,0,.075);
}
.navbar-nav .nav-link {
  font-weight: 500;
  color: var(--clr-neutral-dark);
  margin-inline: .75rem;
}
.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
  color: var(--clr-main-blue);
}
.phone-number a:hover,
.phone-number a:focus {
  text-decoration: underline;
}
.vr { opacity: .25; }
header .navbar { padding-block: 1rem; }
.navbar-brand { font-size: 1.5rem; }
@media (min-width:1200px) {
  header .btn-accent { margin-left:1rem!important; }
}

.btn-accent {
  padding: .75rem 1.5rem;      /* ← add this */
}

/* ────────────────────────────────────────────────────────── *
   NAVBAR SHRINK & NO‐WRAP FOR 992px–1199px (lg to just shy of xl)
 * ────────────────────────────────────────────────────────── */
@media (min-width: 992px) and (max-width: 1199.98px) {
  /* 1) Hide the phone number pill to free up width */
  .phone-number { display: none !important; }

  /* 2) Force the nav‐links to stay on one line and shrink their padding/font */
  .navbar-nav {
    flex-wrap: nowrap;       /* never wrap */
  }
  .navbar-nav .nav-link {
    margin: 0 0.5rem;        /* tighter spacing */
    padding: 0.25rem 0.5rem; /* smaller click targets */
    font-size: 0.9rem;       /* slightly smaller text */
    white-space: nowrap;     /* prevent breaking */
  }

  /* 3) Shrink the main CTA button just for this band */
  header .btn-accent {
    padding: 0.4rem 0.8rem;
    font-size: 0.9rem;
    white-space: nowrap;
    margin-left: 1rem;       /* keep it from pressing into the links */
  }

  /* 4) Bump brand/logo over just a little */
  .navbar-brand {
    margin-right: 1rem;
  }

  /* 5) Collapse any extra container padding so we get every pixel */
  header .container {
    padding-left: 1rem;
    padding-right: 1rem;
  }
}


@media (max-width: 575.98px) {
  /* 1) Make sure the container stays a flex row, and space items out */
  header .navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  /* 2) Hide the phone number on phones, so it doesn’t push things off screen */
  .phone-number {
    display: none ;
  }

  /* 3) Stop the brand wrapper from growing — so the toggler naturally sits to its right */
  .navbar .d-flex.align-items-center.flex-grow-1.flex-lg-grow-0 {
    flex-grow: 0 ;
  }

  /* 4) Remove any leftover absolute‐position rules on the toggler */
  .navbar-toggler {
    position: relative ;
    left: auto ;
    transform: none ;
    margin: 0 ;
    top: auto ;
  }
}

/* 1. Make each .info-card-body a column flex container */
.info-card-body {
  display: flex;
  flex-direction: column;
}

/* 2. Push the button to the bottom of the card */
.info-card-body .btn {
  margin-top: auto;
  margin-top: 2rem !important;   /* takes up all leftover space above */
  align-self: start;  /* keeps it left-aligned */
}

/* ─── FINAL CTA: LESS PADDING ON MOBILE ───────────────────────────────── */
@media (max-width: 575.98px) {
  .final-cta .card {
    /* shrink the fixed max-width so it doesn’t overflow */
    max-width: 90% !important;
    /* replace p-5 (3rem) with something lighter */
    padding: 1.5rem !important;
    margin: 1rem auto; /* give it breathing room top & bottom */
  }
}