/* ============================================================
   Sky Blue Pools Service — v1 stylesheet
   Sections: Tokens / Base / Buttons & Shared / Utility bar / Header & Nav
   / Hero + Form placeholder / Why Choose Us / Services / How It Works
   / Reviews carousel / FAQ accordion / Footer / Legal pages / Responsive
   Colors are pixel-sampled from the /reference screenshots (local only).
   ============================================================ */

/* ------------------------------------------------------------
   TOKENS
   ------------------------------------------------------------ */
:root {
  /* Brand colors (sampled from reference screenshots) */
  --ink:        #12191b;   /* near-black text + utility bar */
  --navy:       #011827;   /* dark CTA buttons */
  --blue-deep:  #0663a4;   /* links, accordion circles, heading accent */
  --blue-mid:   #296cb0;   /* "Why Choose Us" section background */
  --blue:       #3aabdc;   /* primary bright blue — buttons, arrows, accents */
  --blue-light: #79c7e8;   /* pills / badges */
  --blue-pale:  #a9d3eb;   /* reviews section background */
  --blue-tint:  #eaf3f8;   /* "What's Included?" boxes */
  --wave:       #52b9e2;   /* footer + section waves */
  --grey-band:  #606060;   /* footer CTA band */
  --amber:      #ffa826;   /* review stars */
  --white:      #ffffff;

  /* Typography */
  --font-head: "Oswald", "Arial Narrow", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Poppins", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Spacing scale */
  --sp-1: 0.25rem;
  --sp-2: 0.5rem;
  --sp-3: 1rem;
  --sp-4: 1.5rem;
  --sp-5: 2rem;
  --sp-6: 3rem;
  --sp-7: 4.5rem;
  --sp-8: 6rem;

  /* Layout */
  --container: 1280px;
  --radius: 12px;      /* uniform corner radius — every bordered/filled box on the old site uses one value */
  --radius-sm: 12px;   /* kept as an alias so existing references stay uniform */
  --shadow: 0 4px 0 var(--navy), 0 12px 30px rgba(1, 24, 39, 0.18);
  --shadow-soft: 0 10px 30px rgba(1, 24, 39, 0.12);
}

/* ------------------------------------------------------------
   BASE
   ------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

/* Offset anchor targets so the sticky header doesn't cover them */
:target,
#home, #why-choose-us, #services, #reviews, #faq, #contact {
  scroll-margin-top: 100px;
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden; /* guard against decorative full-bleed waves causing sideways scroll */
}

img { max-width: 100%; display: block; }

a { color: var(--blue-deep); text-decoration: none; }
a:hover { text-decoration: underline; }

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  margin: 0 0 var(--sp-3);
}

.container {
  width: 100%;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--sp-4);
}

.section-title {
  font-size: clamp(1.8rem, 3.4vw, 2.9rem);
  letter-spacing: 0.01em;
}

/* Italic outlined "Sky Blue Pools Service" accent — uniform across hero + sections */
.brand-accent {
  color: var(--blue-deep);
  font-style: italic;
  -webkit-text-stroke: 1.5px var(--navy);
  paint-order: stroke fill;
}

/* Visible focus for keyboard users */
:focus-visible {
  outline: 3px solid var(--blue-deep);
  outline-offset: 2px;
}

/* Check icons (bulleted lists) */
.check {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--blue);
  position: relative;
  margin-top: 3px;
}
.check::after {
  content: "";
  position: absolute;
  left: 7px; top: 4px;
  width: 5px; height: 10px;
  border: solid var(--white);
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg);
}
.check--sm { width: 18px; height: 18px; margin-top: 2px; }
.check--sm::after { left: 6px; top: 3px; width: 4px; height: 8px; border-width: 0 2px 2px 0; }

.stars, .review__stars { color: var(--amber); letter-spacing: 2px; }

/* ------------------------------------------------------------
   BUTTONS & SHARED PILLS
   ------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4em;
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 0.95rem;
  padding: 0.7em 1.4em;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.12s ease;
}
.btn:hover { text-decoration: none; transform: translateY(-2px); }

.btn--primary { background: var(--blue); color: var(--navy); }
.btn--navy    { background: var(--navy); color: var(--blue); }
.btn--light   { background: var(--blue-light); color: var(--navy); }
.btn--white   { background: var(--white); color: var(--blue); }
.btn--outline { background: transparent; color: var(--blue-deep); border-color: var(--blue-light); }

.pill {
  display: inline-block;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.95rem;
  padding: 0.45em 1.1em;
  border-radius: var(--radius);
  border: 2px solid var(--navy);
}
.pill--light { background: var(--blue-light); color: var(--navy); }
.pill--solid { background: var(--blue-deep); color: var(--white); border-color: var(--blue-deep); text-transform: none; }

/* ------------------------------------------------------------
   UTILITY BAR
   ------------------------------------------------------------ */
.utility-bar {
  background: var(--ink);
  color: var(--white);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.utility-bar__inner {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: var(--sp-4);
  min-height: 40px;
}
.utility-bar__item {
  display: inline-flex;
  align-items: center;
  gap: 0.45em;
  color: var(--white);
}
.utility-bar__item:hover { text-decoration: none; color: var(--blue); }
.icon { width: 15px; height: 15px; fill: var(--blue); flex: 0 0 auto; }

/* ------------------------------------------------------------
   HEADER & NAV
   ------------------------------------------------------------ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  box-shadow: 0 2px 12px rgba(1, 24, 39, 0.06);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  min-height: 82px;
}

/* Logo — full horizontal lockup (mark + wordmark) as one SVG */
.logo { display: inline-flex; align-items: center; }
.logo__img {
  display: block;
  height: 44px;
  width: auto;
}
.logo__img--footer { height: 52px; }

.nav { display: flex; align-items: center; }
.nav__menu {
  list-style: none;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin: 0;
  padding: 0;
}
.nav__menu > li > a {
  font-family: var(--font-head);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ink);
  font-size: 0.98rem;
}
.nav__menu > li > a:hover { color: var(--blue-deep); text-decoration: none; }

.nav__cta-mobile { display: none; }
.nav__cta-desktop { flex: 0 0 auto; }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 46px; height: 46px;
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  background: var(--blue);
  cursor: pointer;
  padding: 0;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 4px;
}
.nav__toggle-bar {
  display: block;
  width: 22px; height: 2.5px;
  background: var(--white);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

/* ------------------------------------------------------------
   HERO + FORM PLACEHOLDER
   ------------------------------------------------------------ */
.hero {
  position: relative;
  background: var(--white);
  padding: var(--sp-7) 0 var(--sp-8);
  overflow: hidden;
}
.hero::after { /* thin blue strip at bottom of hero, per reference */
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 10px;
  background: var(--blue-deep);
}
.hero__inner {
  display: grid;
  grid-template-columns: 1.1fr 599px;
  gap: var(--sp-6);
  align-items: start;
}
.hero__title {
  text-transform: uppercase;
  font-size: clamp(1.9rem, 3.8vw, 2.9rem);
  margin-bottom: var(--sp-4);
}
.hero__title-line { display: block; white-space: nowrap; }
.hero__title-brand {
  color: var(--blue-deep);
  font-style: italic;
  -webkit-text-stroke: 2.5px var(--navy);
  paint-order: stroke fill;
}
.hero__title-rule { color: var(--ink); margin-left: 0.28em; }
.hero__title-sub { color: var(--ink); display: block; margin-top: 0.1em; white-space: normal; }

.hero__bullets {
  list-style: none;
  margin: 0 0 var(--sp-5);
  padding: 0;
  display: grid;
  gap: var(--sp-3);
  max-width: 620px;
}
.hero__bullets li {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}

/* Reviews badge (bottom-left of hero copy) */
.reviews-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  background: var(--blue-light);
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  padding: 0.6rem 1rem;
  color: var(--navy);
}
.reviews-badge:hover { text-decoration: none; transform: translateY(-2px); }
.reviews-badge__icons { display: inline-flex; gap: 7px; }
.reviews-badge__dot {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--white);
  display: grid;
  place-items: center;
  border: 1px solid rgba(1, 24, 39, 0.18);
  overflow: hidden;
}
.reviews-badge__dot svg { width: 22px; height: 22px; display: block; }
.reviews-badge__dot--yelp { background: #d32323; }
.reviews-badge__text { display: flex; flex-direction: column; line-height: 1.2; }
.reviews-badge__line { font-weight: 700; font-size: 0.95rem; }
.reviews-badge__cta { font-weight: 700; font-size: 0.9rem; }

/* ------------------------------------------------------------
   GHL EMBEDDED FORM (hero + FAQ — same treatment)
   The GHL form renders with no container of its own — just the
   fields, labels and button. The card frame (white bg, border,
   shadow, padding) is provided here on the host page; the
   cross-origin iframe drops in transparent. Nothing inside the
   iframe can be styled from this file — form-internal styling is
   done in GHL's own Custom CSS panel.
   ------------------------------------------------------------ */
.hero__form,
.faq__form {
  width: 100%;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  /* Tight frame — most of the card's height is the iframe itself.
     Top padding gives the title breathing room from the card edge
     that visually matches the space below the form content (the GHL
     form carries its own ~30px bottom padding inside the iframe). */
  padding: 2.5rem clamp(0.85rem, 1.8vw, 1.35rem) 0.6rem;
  min-height: 360px;
  display: flex;
  flex-direction: column;
}
.quote-form-title {
  text-align: center;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  line-height: 1.15;
  margin: 0 0 0.35rem;
}
/* "Instant" matches the hero brand wordmark: deep blue with a navy outline */
.quote-form-title span {
  color: var(--blue-deep);
  -webkit-text-stroke: 1.5px var(--navy);
  paint-order: stroke fill;
}
.ghl-form__iframe {
  display: block;
  width: 100%;
  /* Reserves space to prevent layout shift; form_embed.js sets the
     real pixel height once the form reports it via postMessage. */
  min-height: 400px;
  border: 0;
}

/* ------------------------------------------------------------
   QUOTE MODAL — shared popup form opened by non-form CTAs
   ------------------------------------------------------------ */
.quote-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: clamp(1rem, 6vh, 4.5rem) 1rem 2rem;
  overflow-y: auto;
}
.quote-modal[hidden] { display: none; }
.quote-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(1, 24, 39, 0.6);
}
.quote-modal__dialog {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 560px;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 2.75rem clamp(0.85rem, 1.8vw, 1.35rem) 0.6rem;
  animation: quote-modal-in 0.18s ease-out;
}
@keyframes quote-modal-in {
  from { opacity: 0; transform: translateY(-14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.quote-modal__close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  width: 2rem;
  height: 2rem;
  display: grid;
  place-items: center;
  border: 0;
  background: transparent;
  font-size: 1.9rem;
  line-height: 1;
  color: var(--navy);
  cursor: pointer;
  border-radius: 50%;
}
.quote-modal__close:hover { background: var(--blue-tint); }
.quote-modal__body { min-height: 560px; }
.quote-modal__loading {
  text-align: center;
  color: var(--blue-deep);
  font-style: italic;
  padding: 4rem 0;
  margin: 0;
}
body.quote-modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .quote-modal__dialog { animation: none; }
}

/* ------------------------------------------------------------
   WHY CHOOSE US
   ------------------------------------------------------------ */
.why {
  position: relative;
  overflow: hidden; /* clips the scaled .why__wave so it can't push page width */
  background: var(--blue-mid);
  color: var(--white);
  padding: var(--sp-8) 0 calc(var(--sp-8) + 40px);
}
.why__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--sp-6);
  align-items: center;
}
.why__copy .pill { margin-bottom: var(--sp-5); }
.why__title { color: var(--white); font-size: clamp(1.7rem, 3.2vw, 2.6rem); }
.why__text { max-width: 42ch; margin-bottom: var(--sp-5); }
.why__text em { font-style: italic; }
.why__media { display: flex; justify-content: center; }

/* Production photos */
.why__img {
  width: 100%;
  max-width: 440px;
  height: auto;          /* keep the photo's full frame — no cropping */
  object-fit: contain;
  border-radius: var(--radius);
  display: block;
}

/* White curved wave at the bottom of the section */
.why__wave {
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 120px;
  background: var(--white);
  border-radius: 100% 100% 0 0 / 100px 100px 0 0;
  transform: scaleX(1.4);
}

/* ------------------------------------------------------------
   SERVICES GRID
   ------------------------------------------------------------ */
.services { padding: var(--sp-8) 0; text-align: center; }
.services__title { max-width: 22ch; margin: 0 auto var(--sp-3); }
.services__intro { max-width: 62ch; margin: 0 auto var(--sp-6); color: #33414a; }

.services__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-4);
  text-align: left;
}
.service-card {
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow-soft);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.service-card:hover,
.service-card:focus-within {
  transform: translateY(-8px);
  box-shadow: 0 6px 0 var(--navy), 0 22px 40px rgba(1, 24, 39, 0.22);
}
.service-card__img {
  display: block;
  width: 100%;
  height: 350px;
  object-fit: cover;        /* full-bleed, uniform height (matches old site) */
  object-position: center;
  border: none;
  border-radius: 0;
}
/* Per-photo focal points so the cover-crop keeps each subject in frame */
.services__grid .service-card:nth-child(2) .service-card__img { object-position: center 42%; }
.services__grid .service-card:nth-child(3) .service-card__img { object-position: center 60%; }
.service-card:hover .service-card__img { filter: saturate(1.15); }
.service-card__body { padding: var(--sp-5) var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-3); flex: 1; }
.service-card__title { font-size: 1.5rem; margin: 0; }
.service-card__desc { margin: 0; color: #33414a; }
.service-card__included {
  background: var(--blue-tint);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.service-card__included h4 {
  margin: 0 0 var(--sp-2);
  font-size: 1rem;
  letter-spacing: 0.03em;
}
.service-card__included ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.4rem; }
.service-card__included li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.95rem; }
.service-card__actions { margin-top: auto; display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem; }
.service-card__actions .btn { font-size: 0.82rem; padding: 0.6em 1em; }

/* ------------------------------------------------------------
   HOW IT WORKS
   ------------------------------------------------------------ */
.how { padding: var(--sp-8) 0; }
.how__head { text-align: center; }
.how__head .pill { margin-bottom: var(--sp-4); }
.how__title { max-width: 24ch; margin: 0 auto var(--sp-3); }
.how__intro { color: #33414a; margin-bottom: var(--sp-6); }
.how__body {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: var(--sp-6);
  align-items: start;
}
.how__media { display: flex; flex-direction: column; gap: var(--sp-4); align-items: center; }
.how__img {
  /* The photo ships with its own rounded frame + branded ribbon,
     so no border-radius / border here — just size it. */
  display: block;
  width: 100%;
  max-width: 440px;
  height: auto;
}
.how__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

.how__steps { list-style: none; margin: 0; padding: 0; }
.how-step {
  display: grid;
  grid-template-columns: 56px 1fr;
  gap: var(--sp-3);
  padding-bottom: var(--sp-5);
  position: relative;
}
.how-step:not(:last-child) .how-step__icon::after {
  content: "";
  position: absolute;
  left: 27px; top: 56px; bottom: 8px;
  width: 2px;
  background: linear-gradient(var(--blue), rgba(58,171,220,0.15));
}
.how-step__icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
  position: relative;
  background: var(--white);
}
.how-step__icon svg { width: 24px; height: 24px; fill: var(--blue-deep); }
.how-step__num {
  font-family: var(--font-head);
  font-weight: 700;
  text-transform: uppercase;
  font-size: 1.15rem;
}
.how-step__title { color: var(--blue); font-size: 1.1rem; margin: 0.1rem 0 0.4rem; }
.how-step__content p { margin: 0; color: #33414a; }

/* ------------------------------------------------------------
   REVIEWS CAROUSEL
   ------------------------------------------------------------ */
.reviews {
  position: relative;
  overflow: hidden;
  background: var(--blue-pale);
  padding: var(--sp-8) 0 calc(var(--sp-8) + 30px);
  text-align: center;
}
.reviews__title {
  color: var(--white);
  -webkit-text-stroke: 1.25px rgba(1, 24, 39, 0.3);
  paint-order: stroke fill;
  margin-bottom: var(--sp-6);
}
/* "Happy Customers" is upright (not italic) on the old site */
.reviews__title .accent {
  color: var(--blue-deep);
  font-style: normal;
  -webkit-text-stroke: 0;
}
/* asymmetric white wave along the bottom-left of the section */
.reviews__wave {
  position: absolute;
  left: 0; bottom: -1px;
  width: 100%;
  height: 96px;
  display: block;
}

.carousel {
  position: relative;
  max-width: 1040px;
  margin: 0 auto;
  /* Fluid arrow system — no breakpoints. The gutter shrinks with the
     viewport; when it's narrower than the arrow, the arrows overlap the
     card edges (like the reference site) instead of squeezing the slide. */
  --carousel-arrow-w: clamp(34px, 8vw, 46px);
  --carousel-gutter: clamp(4px, 4.5vw, 60px);
  padding: 0 var(--carousel-gutter);
}
.carousel__viewport { overflow: hidden; border-radius: var(--radius); }
.carousel__track {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  transition: transform 0.45s ease;
}
.carousel__slide {
  flex: 0 0 100%;
  background: var(--white);
  border: 2px solid var(--navy);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1rem, 3vw, var(--sp-5));
  padding: clamp(1.05rem, 3.5vw, var(--sp-5));
  text-align: left;
}
.review__body { display: flex; flex-direction: column; gap: var(--sp-3); }
.review__source {
  width: 44px; height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(1, 24, 39, 0.15);
  background: var(--white);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-soft);
}
.review__source svg { width: 24px; height: 24px; display: block; }
.review__quote { margin: 0; font-size: 1rem; color: var(--ink); }
.review__stars { font-size: 1.1rem; letter-spacing: 3px; }
.review__name { font-style: normal; font-weight: 700; }
.review__img {
  display: block;
  width: 100%;
  /* Desktop 2-col: align-self stretch matches the text column height.
     Stacked (<=1040): min/max-height keep it a band instead of a
     full-width square. One clamp pair covers every width. */
  align-self: stretch;
  min-height: clamp(190px, 40vw, 300px);
  max-height: clamp(230px, 46vw, 500px);
  object-fit: cover;
  border-radius: var(--radius);
}

.carousel__arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: var(--carousel-arrow-w);
  height: clamp(44px, 12vw, 60px);
  border: none;
  border-radius: var(--radius);
  background: var(--blue);
  color: var(--white);
  cursor: pointer;
  display: grid;
  place-items: center;
  z-index: 3;
}
.carousel__arrow:hover { background: var(--blue-deep); }
.carousel__arrow svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.carousel__arrow--prev { left: 0; }
.carousel__arrow--next { right: 0; }

.carousel__dots {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-top: var(--sp-4);
}
.carousel__dots button {
  width: 10px; height: 10px;
  border-radius: 50%;
  border: none;
  background: rgba(1,24,39,0.25);
  cursor: pointer;
  padding: 0;
}
.carousel__dots button[aria-current="true"] { background: var(--blue-deep); }

.reviews__actions {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ------------------------------------------------------------
   FAQ ACCORDION
   ------------------------------------------------------------ */
.faq { padding: var(--sp-8) 0; }
.faq__head { text-align: center; }
.faq__head .pill { margin-bottom: var(--sp-4); }
.faq__title { margin: 0 auto var(--sp-3); }
.faq__intro { max-width: 52ch; margin: 0 auto var(--sp-6); color: #33414a; }
.faq__body {
  display: grid;
  grid-template-columns: 539px 1fr;
  gap: var(--sp-5);
  align-items: start;
}

.accordion { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--sp-3); }
.accordion__item {
  border: 2px solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: 0 3px 0 var(--blue-deep);
  background: var(--white);
  overflow: hidden;
}
.accordion__trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 1.1rem 1.25rem;
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.02rem;
  text-align: left;
  color: var(--ink);
}
.accordion__icon {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blue-deep);
  color: var(--white);
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  line-height: 1;
  transition: transform 0.2s ease;
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(90deg); }
.accordion__panel { padding: 0 1.25rem 1.2rem; }
.accordion__panel p { margin: 0; color: #33414a; }

/* ------------------------------------------------------------
   FOOTER
   ------------------------------------------------------------ */
.site-footer { background: var(--white); }

/* Blue region that holds the grey CTA band and the cartoon water wave */
.site-footer__top {
  position: relative;
  background: var(--wave);
  padding-top: var(--sp-6);
}
.footer-cta {
  position: relative;
  z-index: 2;
  background: var(--grey-band);
  color: var(--white);
  border-radius: var(--radius);
  padding: clamp(1.75rem, 6vw, 4.75rem) clamp(1.5rem, 5vw, 4rem);
  min-height: clamp(180px, 26vw, 260px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-4);
  flex-wrap: wrap;
}
.footer-cta__title {
  color: var(--white);
  font-size: clamp(1.7rem, 3.5vw, 3rem);
  margin: 0;
  /* grow to fill the row, but `min-width: 0` lets it shrink and wrap the
     button below instead of forcing its 340px basis to become a height
     once the row wraps. */
  flex: 1 1 340px;
  min-width: 0;
}
.footer-cta__accent { color: var(--blue); }
.footer-cta__arrow {
  flex: 0 0 auto;
  width: clamp(90px, 12vw, 150px);
  height: auto;
  align-self: center;
}
.footer-cta__phone { flex: 0 0 auto; }
.footer-cta__phone svg { width: 18px; height: 18px; }

.site-footer__wave {
  display: block;
  width: 100%;
  height: auto;
  /* The SVG scales with viewport width (height:auto), so the pull-up that
     tucks its reserved top zone behind the grey card has to scale too —
     a fixed -58px hides half the wave on a phone. clamp() keeps the
     desktop value (-58px at >=1160w) and eases it to ~-19px on mobile so
     the whole wave shows below the card. */
  margin-top: clamp(-58px, -5vw, -10px);
}

.site-footer__main {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: var(--sp-5);
  padding-top: var(--sp-6);
  padding-bottom: var(--sp-5);
}
.site-footer__main h3 { font-size: 1.1rem; margin-bottom: var(--sp-3); }
.site-footer__main ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; }
.site-footer__main a { color: var(--ink); }
.site-footer__main a:hover { color: var(--blue-deep); }
.site-footer__contact li { display: flex; align-items: flex-start; gap: 0.5rem; }
.site-footer__contact address { font-style: normal; }

.site-footer__legal {
  border-top: 1px solid rgba(1,24,39,0.12);
  padding-top: var(--sp-4);
  padding-bottom: var(--sp-5);
  text-align: center;
  font-size: 0.82rem;
  color: #55636b;
}
.site-footer__legal p { margin: 0.2rem 0; }

/* ------------------------------------------------------------
   LEGAL PAGES (privacy-policy.html / terms-and-conditions.html)
   ------------------------------------------------------------ */
.legal-page { padding: var(--sp-7) 0 var(--sp-8); }
.legal-page h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: var(--sp-4); }
.legal-page h2 {
  font-size: 1.15rem;
  margin: var(--sp-5) 0 var(--sp-2);
  text-transform: none;
  color: var(--blue-deep);
}
.legal-page p { margin: 0 0 var(--sp-3); max-width: 70ch; }
.legal-page .legal-meta { color: #55636b; font-size: 0.9rem; }
.legal-page .back-link { display: inline-block; margin-top: var(--sp-5); }

/* ------------------------------------------------------------
   RESPONSIVE
   ------------------------------------------------------------ */
@media (max-width: 1040px) {
  .hero__inner { grid-template-columns: 1fr; }
  .hero__form { max-width: 599px; }
  .why__inner { grid-template-columns: 1fr; }
  .services__grid { grid-template-columns: 1fr; max-width: 460px; margin: 0 auto; }
  .service-card__img { height: 280px; }
  .how__body { grid-template-columns: 1fr; }
  .how__media { order: 2; }
  .carousel__slide { grid-template-columns: 1fr; }
  .faq__body { grid-template-columns: 1fr; }
  .faq__form { max-width: 599px; margin: 0 auto; }
  .site-footer__main { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 760px) {
  body { font-size: 16px; }

  .utility-bar__loc,
  .utility-bar__email { display: none; }
  .utility-bar__inner { justify-content: flex-end; }

  /* Mobile nav: hamburger + slide-down menu */
  .nav { position: static; }
  .nav__toggle { display: flex; }
  .nav__cta-desktop { display: none; }
  .nav__cta-mobile { display: block; }
  .nav__menu {
    position: absolute;
    left: 0; right: 0;
    top: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: var(--white);
    box-shadow: 0 12px 24px rgba(1,24,39,0.14);
    border-top: 2px solid var(--blue-deep);
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
  }
  .nav__menu.is-open { max-height: 460px; }
  .nav__menu > li { border-bottom: 1px solid rgba(1,24,39,0.08); }
  .nav__menu > li > a { display: block; padding: 1rem var(--sp-4); }
  .nav__cta-mobile { padding: var(--sp-3) var(--sp-4); border-bottom: none; }
  .nav__cta-mobile .btn { width: 100%; }

  .hero { padding: var(--sp-6) 0 var(--sp-7); }
  .hero__title-sub { font-size: 0.82em; }
  .hero__form,
  .faq__form { min-height: 360px; }

  .footer-cta__arrow { display: none; }
  .site-footer__main { grid-template-columns: 1fr; }
  .reviews__actions, .how__actions { flex-direction: column; }
  .reviews__actions .btn, .how__actions .btn { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .carousel__track { transition: none; }
  .btn:hover, .reviews-badge:hover, .service-card:hover { transform: none; }
}