/* ==========================================================================
   Georgia Water Pros — design system
   Single stylesheet, no build step. Tokens first, then layout, then
   components in the order they appear on the page.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */

:root {
  /* Deep ocean: navy structure, ocean blue for actions, bright cyan for
     highlights on dark surfaces.
     Contrast note: the picked #0d80cf only reaches 4.19:1 against white,
     just under the 4.5:1 AA floor for button text at this size, so --accent
     is one step deeper at 5.3:1. --accent-bright is reserved for dark
     backgrounds, where it has contrast to spare. */
  --navy: #0a2a43;
  --navy-2: #123a5a;
  --slate: #0a2a43;

  --brand: #0a5f9e;
  --brand-light: #e0eff9;

  --accent: #0b6fb4;
  --accent-dark: #084f83;
  --accent-bright: #4fc3f7;
  --accent-light: #e3f3fd;

  --hero-glow: rgba(13, 128, 207, 0.42);
  --icon-tint: rgba(79, 195, 247, 0.16);
  --icon-tint-border: rgba(79, 195, 247, 0.34);

  --white: #ffffff;
  --off-white: #f4f7fa;
  --light-gray: #e1e8ee;

  --text: #16242f;
  --text-mid: #53616d;
  --text-muted: #7a8794;
  --on-dark: rgba(255, 255, 255, 0.84);

  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --radius: 12px;
  --radius-lg: 18px;
  --shadow: 0 2px 10px rgba(27, 39, 51, 0.06);
  --shadow-md: 0 6px 24px rgba(27, 39, 51, 0.1);
  --shadow-lg: 0 8px 40px rgba(27, 39, 51, 0.16);

  --container: 1200px;
  --gutter: 20px;
}

/* --- Reset ---------------------------------------------------------------- */

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

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 1rem;
  line-height: 1.65;
  color: var(--text);
  background: var(--white);
  overflow-x: hidden;
}

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

h1,
h2,
h3,
h4 {
  margin: 0 0 0.5em;
  line-height: 1.18;
  letter-spacing: -0.02em;
  font-weight: 800;
}

h1 {
  font-size: clamp(2.1rem, 5.4vw, 3.5rem);
  line-height: 1.12;
}
h2 {
  font-size: clamp(1.65rem, 3.6vw, 2.5rem);
}
h3 {
  font-size: clamp(1.15rem, 2vw, 1.4rem);
}

p {
  margin: 0 0 1rem;
}

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

/* Visible focus everywhere — required for keyboard and screen-reader users. */
:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 2px;
  border-radius: 4px;
}

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

/* --- Layout --------------------------------------------------------------- */

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

.section {
  padding: clamp(64px, 9vw, 112px) 0;
}
.section--tight {
  padding: clamp(40px, 5vw, 64px) 0;
}
.section--dark {
  background: var(--navy);
  color: var(--white);
}
.section--muted {
  background: var(--off-white);
}

.section-head {
  max-width: 780px;
  margin: 0 auto clamp(38px, 5vw, 64px);
  text-align: center;
}
.section-head p {
  color: var(--text-mid);
  font-size: 1.03rem;
  margin: 0;
}
.section--dark .section-head p {
  color: var(--on-dark);
}

.eyebrow {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 14px;
}
.eyebrow--pill {
  background: var(--accent-light);
  color: var(--accent-dark);
  padding: 7px 16px;
  border-radius: 999px;
  letter-spacing: 0.08em;
}
.section--dark .eyebrow--pill {
  background: rgba(255, 255, 255, 0.1);
  color: var(--white);
}

/* --- Buttons -------------------------------------------------------------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 14px 28px;
  border: 2px solid transparent;
  border-radius: 8px;
  font-family: inherit;
  font-size: 0.98rem;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  cursor: pointer;
  transition: background-color 0.15s ease, transform 0.15s ease, color 0.15s ease;
}
.btn svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}
.btn:hover {
  text-decoration: none;
  transform: translateY(-1px);
}
.btn:active {
  transform: translateY(0);
}

.btn-primary {
  background: var(--accent);
  color: var(--white);
}
.btn-primary:hover {
  background: var(--accent-dark);
  color: var(--white);
}

.btn-outline {
  background: transparent;
  color: var(--brand);
  border-color: var(--light-gray);
}
.btn-outline:hover {
  background: var(--brand-light);
  color: var(--brand);
}
.section--dark .btn-outline,
.hero .btn-outline,
.cta-band .btn-outline {
  color: var(--white);
  border-color: rgba(255, 255, 255, 0.5);
}
.section--dark .btn-outline:hover,
.hero .btn-outline:hover,
.cta-band .btn-outline:hover {
  background: rgba(255, 255, 255, 0.14);
  color: var(--white);
}
/* The primary button also sat too close to the band's own blue. */
.cta-band .btn-primary {
  background: var(--white);
  color: var(--brand);
}
.cta-band .btn-primary:hover {
  background: var(--off-white);
  color: var(--accent-dark);
}

.btn-block {
  width: 100%;
}
.btn-lg {
  padding: 17px 36px;
  font-size: 1.05rem;
}

/* --- Top bar -------------------------------------------------------------- */

.topbar {
  background: var(--navy);
  color: var(--white);
  font-size: 0.85rem;
}
.topbar-inner {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  min-height: 42px;
  text-align: center;
}
.topbar a {
  color: var(--white);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.topbar svg {
  width: 15px;
  height: 15px;
  flex-shrink: 0;
}
.topbar-note {
  color: var(--on-dark);
}

/* --- Navigation ----------------------------------------------------------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 900;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  min-height: 74px;
}
.nav-logo {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  letter-spacing: -0.02em;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  flex-shrink: 0;
}
.nav-logo:hover {
  text-decoration: none;
}
.nav-logo svg {
  width: 26px;
  height: 26px;
  color: var(--brand);
  flex-shrink: 0;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links > li {
  position: relative;
  list-style: none;
}
.nav-links a,
.nav-links .nav-trigger {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  padding: 9px 11px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  border-radius: 6px;
  cursor: pointer;
}
.nav-links a:hover,
.nav-links .nav-trigger:hover {
  background: var(--off-white);
  color: var(--brand);
  text-decoration: none;
}
.nav-links ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-trigger svg {
  width: 12px;
  height: 12px;
  transition: transform 0.15s ease;
}
.nav-trigger[aria-expanded="true"] svg {
  transform: rotate(180deg);
}

.nav-dropdown {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  min-width: 288px;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  box-shadow: var(--shadow-md);
  padding: 8px;
  display: none;
}
.nav-dropdown.open {
  display: block;
}
.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  font-weight: 500;
  font-size: 0.92rem;
  width: 100%;
}

.nav-cta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}
.nav-phone {
  font-weight: 800;
  color: var(--navy);
  white-space: nowrap;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.nav-phone svg {
  width: 16px;
  height: 16px;
  color: var(--brand);
}

.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  background: var(--white);
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  margin: 0 auto;
  background: var(--navy);
  border-radius: 2px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}
.hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
}
.hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

.nav-mobile {
  display: none;
  background: var(--white);
  border-bottom: 1px solid var(--light-gray);
  padding: 12px var(--gutter) 24px;
}
.nav-mobile.open {
  display: block;
}
.nav-mobile ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.nav-mobile > ul > li {
  border-bottom: 1px solid var(--light-gray);
}
.nav-mobile a {
  display: block;
  padding: 14px 4px;
  font-weight: 600;
  color: var(--text);
}
.nav-mobile .nav-mobile-sub a {
  padding-left: 18px;
  font-weight: 500;
  font-size: 0.92rem;
  color: var(--text-mid);
}
.nav-mobile .btn {
  margin-top: 18px;
}

/* --- Hero ----------------------------------------------------------------- */

.hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: clamp(44px, 6vw, 80px) 0 clamp(52px, 7vw, 92px);
  overflow: hidden;
}
/* Soft radial wash so the flat navy doesn't read as a solid block. */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 78% 12%, var(--hero-glow), transparent 60%);
  pointer-events: none;
}
.hero > .container {
  position: relative;
  z-index: 1;
}
.hero-grid {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: start;
}
.hero h1 {
  margin-bottom: 18px;
}
.hero h1 .accent {
  color: var(--accent-bright);
}
.hero-sub {
  color: var(--on-dark);
  font-size: 1.05rem;
  max-width: 60ch;
  margin-bottom: 26px;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 30px;
}

.badges {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  align-items: start;
  gap: 10px;
  padding-top: 18px;
  margin-top: 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
/* Three across inside a narrow form column, so the mark stacks over the
   label rather than sitting beside it. */
.badge {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 8px;
}
.badge-mark {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--accent-bright);
}
.badge-mark svg {
  width: 18px;
  height: 18px;
}
.badge-mark--brand {
  background: var(--white);
  border-color: var(--white);
  color: var(--navy);
}
.badge-mark--letter {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--white);
}
.badge-text {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
  min-width: 0;
}
.badge-text strong {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--white);
}
.badge-text em {
  font-style: normal;
  font-size: 0.64rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.66);
}
.badge-stars {
  color: var(--accent-bright);
  letter-spacing: 0;
  font-size: 0.72rem;
}

.stars {
  color: var(--accent);
  letter-spacing: 1px;
  font-size: 0.8rem;
  flex-shrink: 0;
}
.section--dark .stars {
  color: var(--accent-bright);
}

/* --- Quote form panel ---------------------------------------------------- */

/* Sits inside the dark hero rather than floating on top of it, so it reads as
   one unit the way the reference does. Fields are translucent white over the
   navy instead of a solid card. */
.form-panel {
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--radius-lg);
  padding: clamp(22px, 3vw, 30px);
}
.form-panel h2 {
  font-size: clamp(1.25rem, 2.2vw, 1.5rem);
  text-align: center;
  color: var(--white);
  margin-bottom: 20px;
}

.field {
  margin-bottom: 12px;
}
.field label:not(.sr-only) {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 6px;
  color: var(--text);
}
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 14px 16px;
  border: 1px solid var(--light-gray);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  /* 16px minimum stops iOS Safari zooming in when a field is focused. */
  font-size: 16px;
  color: var(--text);
}
.field textarea {
  resize: vertical;
  min-height: 110px;
}
.field input:focus,
.field select:focus,
.field textarea:focus {
  outline: 2px solid var(--brand);
  outline-offset: -1px;
  border-color: var(--brand);
}

/* Dark treatment only for fields inside the hero panel. */
.form-panel .field input,
.form-panel .field select {
  background: rgba(255, 255, 255, 0.09);
  border-color: rgba(255, 255, 255, 0.22);
  color: var(--white);
}
.form-panel .field input::placeholder {
  color: rgba(255, 255, 255, 0.62);
}
.form-panel .field select:invalid {
  color: rgba(255, 255, 255, 0.62);
}
/* Native dropdown options render on the OS surface, so force readable colors. */
.form-panel .field select option {
  color: var(--text);
  background: var(--white);
}
.form-panel .field input:focus,
.form-panel .field select:focus {
  outline: 2px solid var(--accent-bright);
  outline-offset: -1px;
  border-color: var(--accent-bright);
}
.form-panel .btn {
  margin-top: 6px;
}

.field-honeypot {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.form-note {
  font-size: 0.76rem;
  color: var(--text-muted);
  text-align: center;
  margin: 14px 0 0;
  line-height: 1.5;
}
.form-panel .form-note {
  color: rgba(255, 255, 255, 0.6);
}
.form-status {
  margin: 14px 0 0;
  padding: 12px 14px;
  border-radius: 8px;
  font-size: 0.88rem;
  font-weight: 600;
}
.form-status[hidden] {
  display: none;
}
.form-status.is-error {
  background: #fdecea;
  color: #a3271b;
}
.form-status.is-success {
  background: #e8f6ed;
  color: #1d6b39;
}

/* Consent + social, inside the hero form panel. */
.form-consent {
  margin: 16px 0 0;
  font-size: 0.72rem;
  line-height: 1.55;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
}
.form-consent a {
  color: rgba(255, 255, 255, 0.86);
  text-decoration: underline;
}
.form-consent a:hover {
  color: var(--white);
}

.form-social {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.form-social a {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  transition: background-color 0.15s ease, transform 0.15s ease;
}
.form-social a:hover {
  background: var(--accent);
  border-color: var(--accent);
  transform: translateY(-2px);
}
.form-social svg {
  width: 18px;
  height: 18px;
}

/* --- Steps --------------------------------------------------------------- */

.steps {
  display: grid;
  gap: 22px;
  grid-template-columns: 1fr;
}
.step {
  background: var(--navy);
  border-radius: var(--radius-lg);
  padding: 38px 28px;
  text-align: center;
  color: var(--white);
}
.step-icon {
  width: 74px;
  height: 74px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: var(--icon-tint);
  border: 1px solid var(--icon-tint-border);
  display: flex;
  align-items: center;
  justify-content: center;
}
.step-icon svg {
  width: 31px;
  height: 31px;
  color: var(--accent-bright);
}
.step h3 {
  color: var(--white);
  margin-bottom: 12px;
}
.step p {
  color: var(--on-dark);
  font-size: 0.94rem;
  margin: 0;
}

/* --- Service cards -------------------------------------------------------- */

.cards {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
}
.card-img {
  aspect-ratio: 3 / 2;
  background: var(--brand-light);
  overflow: hidden;
}
.card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.card-body {
  padding: 24px;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.card-body h3 {
  margin-bottom: 10px;
}
.card-body p {
  color: var(--text-mid);
  font-size: 0.93rem;
  flex: 1;
}
.card-body .btn {
  align-self: flex-start;
  margin-top: 8px;
}

/* "Explore more" — the arrow slides and the button fills, and both also fire
   when the card itself is hovered, so the whole card reads as one target. */
.btn-explore {
  gap: 9px;
  transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease,
    transform 0.15s ease;
}
.btn-explore svg {
  width: 15px;
  height: 15px;
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1);
}
.btn-explore:hover,
.btn-explore:focus-visible,
.card:hover .btn-explore {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--white);
}
.btn-explore:hover svg,
.btn-explore:focus-visible svg,
.card:hover .btn-explore svg {
  transform: translateX(5px);
}

/* Lift the image slightly on card hover for a bit of depth. */
.card-img img {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.card:hover .card-img img {
  transform: scale(1.05);
}

/* --- About / feature list ------------------------------------------------- */

.split {
  display: grid;
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
}
.split-media img {
  width: 100%;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.checklist {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.checklist li {
  display: flex;
  gap: 14px;
}
.check-icon {
  flex-shrink: 0;
  width: 26px;
  height: 26px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--accent);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
}
.check-icon svg {
  width: 14px;
  height: 14px;
}
.checklist h3 {
  font-size: 1.02rem;
  margin-bottom: 3px;
}
.checklist p {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.93rem;
}

/* --- Trust grid (stands in for reviews until real ones exist) ------------- */

.trust-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
}
.trust-item {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: 28px 26px;
}
.trust-icon {
  width: 52px;
  height: 52px;
  margin-bottom: 16px;
  border-radius: 12px;
  background: var(--brand-light);
  display: flex;
  align-items: center;
  justify-content: center;
}
.trust-icon svg {
  width: 24px;
  height: 24px;
  color: var(--brand);
}
.trust-item h3 {
  font-size: 1.08rem;
  margin-bottom: 8px;
}
.trust-item p {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.93rem;
}

/* --- Reviews -------------------------------------------------------------- */

.rating-summary {
  text-align: center;
  margin-bottom: 36px;
}
.rating-summary .rating-score {
  font-size: 2.6rem;
  font-weight: 800;
  line-height: 1;
  color: var(--navy);
}
.rating-summary .stars {
  font-size: 1.3rem;
  display: block;
  margin: 8px 0 4px;
}
.rating-summary p {
  color: var(--text-mid);
  font-size: 0.9rem;
  margin: 0;
}

.reviews {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
.review {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  padding: 26px;
}
.review .stars {
  font-size: 1rem;
}
.review blockquote {
  margin: 12px 0 18px;
  font-size: 0.95rem;
  color: var(--text-mid);
  line-height: 1.6;
}
.review-author {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 0.88rem;
}
.review-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--brand-light);
  color: var(--brand);
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.review-author strong {
  display: block;
  color: var(--text);
}
.review-author span {
  color: var(--text-muted);
}

/* --- FAQ ------------------------------------------------------------------ */

.faq {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  gap: 12px;
}
.faq details {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius);
  overflow: hidden;
}
.faq summary {
  padding: 20px 54px 20px 22px;
  font-weight: 700;
  font-size: 1rem;
  cursor: pointer;
  position: relative;
  list-style: none;
}
.faq summary::-webkit-details-marker {
  display: none;
}
.faq summary::after {
  content: "";
  position: absolute;
  right: 24px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -6px;
  border-right: 2px solid var(--brand);
  border-bottom: 2px solid var(--brand);
  transform: rotate(45deg);
  transition: transform 0.2s ease;
}
.faq details[open] summary::after {
  transform: rotate(-135deg);
  margin-top: -2px;
}
.faq details[open] summary {
  background: var(--off-white);
}
.faq-body {
  padding: 4px 22px 22px;
  color: var(--text-mid);
  font-size: 0.95rem;
}
.faq-body p:last-child {
  margin-bottom: 0;
}

/* --- CTA band ------------------------------------------------------------- */

.cta-band {
  background: var(--brand);
  color: var(--white);
  text-align: center;
}
.cta-band h2 {
  margin-bottom: 12px;
}
.cta-band p {
  color: rgba(255, 255, 255, 0.88);
  max-width: 60ch;
  margin: 0 auto 26px;
}
.cta-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}

/* --- Footer --------------------------------------------------------------- */

.footer {
  background: var(--navy);
  color: var(--on-dark);
  padding: clamp(48px, 6vw, 72px) 0 0;
  font-size: 0.92rem;
}
.footer-grid {
  display: grid;
  gap: 36px;
  grid-template-columns: 1fr;
  padding-bottom: 44px;
}
.footer h4 {
  color: var(--white);
  font-size: 0.82rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.footer ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 10px;
}
.footer a {
  color: var(--on-dark);
}
.footer a:hover {
  color: var(--white);
}
.footer-brand .nav-logo {
  color: var(--white);
  margin-bottom: 14px;
}
.footer-brand p {
  max-width: 38ch;
}
.footer-phone {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-weight: 800;
  font-size: 1.05rem;
}
.footer-phone svg {
  width: 17px;
  height: 17px;
  color: var(--accent);
}
.footer-bottom {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 20px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.84rem;
  color: var(--text-muted);
}
.footer-bottom a {
  color: var(--text-muted);
}

/* --- Sticky mobile call bar ----------------------------------------------- */

.callbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 950;
  background: var(--white);
  border-top: 1px solid var(--light-gray);
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  gap: 10px;
  box-shadow: 0 -4px 20px rgba(27, 39, 51, 0.1);
}
.callbar .btn {
  flex: 1;
  padding: 13px 10px;
  font-size: 0.92rem;
}
.callbar .btn-call {
  background: var(--brand);
  color: var(--white);
}
.callbar .btn-call:hover {
  background: var(--navy-2);
  color: var(--white);
}

/* --- Breakpoints ---------------------------------------------------------- */

@media (min-width: 600px) {
  .steps {
    grid-template-columns: repeat(2, 1fr);
  }
  .cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .reviews {
    grid-template-columns: repeat(2, 1fr);
  }
  .trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

@media (min-width: 900px) {
  .hero-grid {
    grid-template-columns: 1.15fr 0.85fr;
    align-items: center;
  }
  .steps {
    grid-template-columns: repeat(3, 1fr);
  }
  .cards {
    grid-template-columns: repeat(3, 1fr);
  }
  .reviews {
    grid-template-columns: repeat(3, 1fr);
  }
  .split {
    grid-template-columns: 1fr 1fr;
  }
  .split--reverse .split-media {
    order: 2;
  }

  .footer-grid {
    grid-template-columns: 1.6fr 1fr 1fr 1.2fr;
  }
}

@media (max-width: 899px) {
  .hero-actions {
    display: none;
  }
}

/* Below 980px the horizontal nav runs out of room — swap to the drawer. */
@media (max-width: 1199px) {
  .nav-phone {
    display: none;
  }
}

@media (max-width: 979px) {
  .nav-links {
    display: none;
  }
  .nav-phone {
    display: inline-flex;
  }
  .hamburger {
    display: flex;
  }
  .nav-phone span {
    display: none;
  }
}

@media (max-width: 700px) {
  .callbar {
    display: flex;
  }
  /* Clear the sticky call bar so it never covers the footer or chat bubble. */
  body {
    padding-bottom: 72px;
  }
  .topbar-note {
    display: none;
  }
  .nav-cta .btn {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ==========================================================================
   Interior pages — service and location templates
   ========================================================================== */

.page-hero {
  position: relative;
  background: var(--navy);
  color: var(--white);
  padding: clamp(36px, 5vw, 64px) 0 clamp(40px, 5vw, 68px);
  overflow: hidden;
}
.page-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 82% 18%, var(--hero-glow), transparent 62%);
  pointer-events: none;
}
.page-hero > .container {
  position: relative;
  z-index: 1;
}
.page-hero h1 {
  max-width: 20ch;
  margin-bottom: 16px;
}
.page-hero p {
  color: var(--on-dark);
  font-size: 1.04rem;
  max-width: 62ch;
  margin-bottom: 0;
}
.page-hero .cta-actions {
  justify-content: flex-start;
  margin-top: 28px;
}

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.6);
}
.breadcrumb a {
  color: rgba(255, 255, 255, 0.82);
}
.breadcrumb a:hover {
  color: var(--white);
}
.breadcrumb li::after {
  content: "/";
  margin-left: 8px;
  color: rgba(255, 255, 255, 0.35);
}
.breadcrumb li:last-child::after {
  content: none;
}

/* Two-column interior layout: article + sticky conversion sidebar. */
.layout {
  display: grid;
  gap: clamp(36px, 4vw, 56px);
  grid-template-columns: 1fr;
  align-items: start;
}

.prose h2 {
  margin-top: 2.2em;
}
.prose h2:first-child {
  margin-top: 0;
}
.prose h3 {
  margin-top: 1.6em;
}
.prose p,
.prose li {
  color: var(--text-mid);
  font-size: 1rem;
}
.prose > ul {
  padding-left: 0;
  list-style: none;
  display: grid;
  gap: 12px;
  margin: 20px 0;
}
.prose > ul > li {
  position: relative;
  padding-left: 30px;
}
.prose > ul > li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--brand-light);
  border: 1px solid var(--accent);
}
.prose > ul > li::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 12px;
  width: 6px;
  height: 3px;
  border-left: 2px solid var(--accent);
  border-bottom: 2px solid var(--accent);
  transform: rotate(-45deg);
}
.prose img {
  border-radius: var(--radius-lg);
  margin: 26px 0;
  width: 100%;
  max-height: 420px;
  object-fit: cover;
}

.callout {
  background: var(--brand-light);
  border-left: 4px solid var(--accent);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 20px 22px;
  margin: 28px 0;
}
.callout p:last-child {
  margin-bottom: 0;
}
.callout strong {
  color: var(--text);
}

.sidebar {
  display: grid;
  gap: 20px;
}
.side-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
}
.side-card h3 {
  font-size: 1.12rem;
  margin-bottom: 8px;
}
.side-card p {
  color: var(--text-mid);
  font-size: 0.92rem;
}
.side-card--dark {
  background: var(--navy);
  border-color: transparent;
  color: var(--white);
}
.side-card--dark h3 {
  color: var(--white);
}
.side-card--dark p {
  color: var(--on-dark);
}
.side-links {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 2px;
}
.side-links a {
  display: block;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 0.93rem;
  font-weight: 600;
  color: var(--text);
}
.side-links a:hover {
  background: var(--off-white);
  color: var(--brand);
  text-decoration: none;
}
.side-links a[aria-current="page"] {
  background: var(--brand-light);
  color: var(--brand);
}

.area-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 18px;
}
.area-list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.94rem;
  color: var(--text-mid);
}
.area-list svg {
  width: 15px;
  height: 15px;
  color: var(--accent);
  flex-shrink: 0;
}

@media (min-width: 900px) {
  .layout {
    grid-template-columns: minmax(0, 1fr) 340px;
  }
  .sidebar {
    position: sticky;
    top: 96px;
  }
  .area-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --- Interior page sections (reference-site structure) -------------------- */

.feature-list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  gap: 22px;
}
.feature-list li {
  display: flex;
  gap: 16px;
}
.feature-list .check-icon {
  width: 30px;
  height: 30px;
  margin-top: 2px;
}
.feature-list .check-icon svg {
  width: 15px;
  height: 15px;
}
.feature-list h3 {
  font-size: 1.06rem;
  margin-bottom: 5px;
}
.feature-list p {
  margin: 0;
  color: var(--text-mid);
  font-size: 0.95rem;
}
.section--dark .feature-list h3 {
  color: var(--white);
}
.section--dark .feature-list p {
  color: var(--on-dark);
}

.image-pair {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
  margin-top: clamp(32px, 4vw, 48px);
}
.image-pair img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
}

.contact-grid {
  display: grid;
  gap: clamp(32px, 4vw, 48px);
  grid-template-columns: 1fr;
  align-items: start;
}
.contact-info {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  gap: 20px;
}
.contact-info li {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.contact-info .check-icon {
  background: var(--brand-light);
  color: var(--brand);
  width: 42px;
  height: 42px;
  border-radius: 10px;
}
.contact-info .check-icon svg {
  width: 19px;
  height: 19px;
}
.contact-info h3 {
  font-size: 0.86rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 4px;
}
.contact-info a,
.contact-info span {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.contact-info a:hover {
  color: var(--brand);
}

/* Light form card, for the contact section on interior pages. */
.form-card {
  background: var(--white);
  border: 1px solid var(--light-gray);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(24px, 3vw, 32px);
}
.form-card h3 {
  margin-bottom: 18px;
}

@media (min-width: 700px) {
  .image-pair {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 900px) {
  .feature-list--cols {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
  }
  .feature-list--cols li {
    flex-direction: column;
    gap: 12px;
  }
  .contact-grid {
    grid-template-columns: 1fr 1fr;
  }
}