/* ==========================================================================
   BK's Window Care — site stylesheet
   Mobile-first. Brand colors sampled from the real logo (bks_logo.png).
   Type: Manrope (display) + Work Sans (body).
   ========================================================================== */

:root {
  --navy: #0b1220;
  --navy-soft: #141e33;
  --blue: #1657d1;
  --blue-dark: #0d3a94;
  --cyan: #62c7ea;
  --yellow: #f2c94c;

  --ink: #14181f;
  --body: #4b5563;
  --muted: #6b7280;
  --bg: #faf9f6;
  --white: #ffffff;
  --border: #e7e9ee;
  --card-shadow: 0 12px 32px rgba(11, 18, 32, 0.10);

  --font-display: 'Manrope', system-ui, sans-serif;
  --font-body: 'Work Sans', system-ui, sans-serif;

  --header-h: 64px;
  --radius: 14px;
  --radius-sm: 10px;
  --container: 1120px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

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

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--ink);
  margin: 0;
  line-height: 1.15;
  letter-spacing: -0.01em;
}

p { margin: 0; }

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

button, .btn { font-family: var(--font-display); cursor: pointer; }

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

.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 50px;
  padding: 0 22px;
  border-radius: var(--radius-sm);
  font-size: 16px;
  font-weight: 700;
  border: none;
  white-space: nowrap;
}

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

.btn-cta {
  background: var(--yellow);
  color: #1a1200;
}
.btn-cta:hover { background: #e0b93f; color: #1a1200; }

.btn-outline {
  background: transparent;
  color: var(--white);
  border: 1.5px solid rgba(255,255,255,0.55);
}
.btn-outline:hover { background: rgba(255,255,255,0.12); color: var(--white); }

.btn-outline-dark {
  background: transparent;
  color: var(--blue);
  border: 1.5px solid var(--blue);
}
.btn-outline-dark:hover { background: rgba(22,87,209,0.08); color: var(--blue-dark); border-color: var(--blue-dark); }

.btn-white {
  background: var(--white);
  color: var(--blue-dark);
}
.btn-white:hover { background: #e7edf8; color: var(--blue-dark); }

.btn-block { width: 100%; }

/* ---------- Header (solid, sticky, never transparent) ---------- */

.site-header {
  position: sticky;
  top: 0;
  z-index: 40;
  height: var(--header-h);
  background: var(--navy);
  border-bottom: 1px solid rgba(255,255,255,0.08);
}

.site-header .container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 0;
  color: var(--white);
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 15px;
}
.brand span { margin-left: -6px; }
.brand:hover { color: var(--white); }
.brand img { width: 108px; height: 108px; object-fit: contain; flex-shrink: 0; }

.main-nav {
  display: none;
  align-items: center;
  gap: 28px;
}
.main-nav a {
  color: rgba(255,255,255,0.85);
  font-size: 14.5px;
  font-weight: 600;
}
.main-nav a:hover { color: var(--white); }

.header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.call-pill {
  display: none;
  align-items: center;
  gap: 7px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  background: rgba(255,255,255,0.10);
  padding: 9px 14px;
  border-radius: 20px;
}
.call-pill:hover { color: var(--white); background: rgba(255,255,255,0.16); }
.call-pill svg { flex-shrink: 0; }

.nav-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: transparent;
  border: none;
  color: var(--white);
  padding: 0;
}

.mobile-nav {
  display: none;
  flex-direction: column;
  background: var(--navy-soft);
  border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a {
  color: rgba(255,255,255,0.9);
  font-weight: 600;
  font-size: 15px;
  padding: 14px 20px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
}
.mobile-nav a:hover { color: var(--white); background: rgba(255,255,255,0.05); }

@media (min-width: 900px) {
  .main-nav { display: flex; }
  .call-pill { display: inline-flex; }
  .nav-toggle { display: none; }
}

/* ---------- Hero + quote form (Direction A: photo-forward) ---------- */

.hero {
  position: relative;
  background: var(--navy);
}

.hero-media {
  position: relative;
  width: 100%;
  height: 46vh;
  min-height: 320px;
  max-height: 520px;
  overflow: hidden;
}
.hero-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  /* Source photo is portrait; biasing toward the upper-middle keeps the
     technician and the house in frame instead of centering on the lawn
     once the box gets very wide and short on desktop. */
  object-position: center 28%;
}
@media (min-width: 900px) {
  .hero-media { height: 58vh; min-height: 440px; max-height: 640px; }
}
.hero-media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(180deg, rgba(11,18,32,0.45) 0%, rgba(11,18,32,0.5) 45%, rgba(11,18,32,0.85) 70%, rgba(11,18,32,0.97) 100%);
}

/* Mobile: hero-copy (this and hero-sub/trust-inline) sits in normal
   flow right after the image, so this pulls the headline block up to
   overlay the image's bottom 18px -- using the containing block's own
   height (bottom: 100%+18px), not a hardcoded pixel offset, so it still
   lines up correctly whatever the headline wraps to. See the desktop
   override below, where it drops back into normal flow instead so it
   can stack above hero-sub with a browser-computed gap that adapts the
   same way. */
.hero-headline-wrap {
  position: absolute;
  z-index: 2;
  left: 0; right: 0;
  bottom: calc(100% + 18px);
}
.hero-eyebrow {
  color: var(--cyan);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 8px;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 2px 14px rgba(0,0,0,0.6);
}
.hero-headline {
  color: var(--white);
  font-size: clamp(28px, 7vw, 46px);
  font-weight: 800;
  line-height: 1.08;
  text-shadow: 0 1px 3px rgba(0,0,0,0.9), 0 4px 24px rgba(0,0,0,0.6);
  max-width: 720px;
}

.hero-body {
  padding: 20px 0 40px;
}

.hero-copy {
  position: relative;
}

.hero-sub {
  color: #cbd5e6;
  font-size: 16px;
  line-height: 1.55;
  max-width: 640px;
}

.trust-inline {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
}
.trust-rating {
  display: flex;
  align-items: center;
  gap: 5px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 20px;
  padding: 7px 13px;
  color: var(--white);
  font-size: 13.5px;
  font-weight: 600;
}
.trust-rating svg { flex-shrink: 0; }
.trust-note { color: #9fb0c9; font-size: 13.5px; font-weight: 500; }

/* Quote form card — thin frame only; Flyra's own embedded form renders
   its own heading/subtext and fields, so this wrapper stays minimal
   instead of duplicating them and padding out the white space. */
.quote-card {
  background: var(--white);
  border-radius: 18px;
  padding: 8px;
  margin-top: 22px;
  box-shadow: 0 24px 48px rgba(0,0,0,0.32);
  max-width: 560px;
}
.flyra-embed { border-radius: 12px; overflow: hidden; }
.flyra-embed iframe { display: block; width: 100%; border: 0; }

/* Desktop: full-bleed photo behind the whole hero, copy beside the image
   on the left, quote card on the right. The quote card now sizes to the
   embedded form's real content height (same resize mechanism as mobile)
   instead of being capped to a fixed hero height with internal
   scrolling -- nobody should have to scroll inside a tiny form box.
   .hero-body is a normal-flow flex row (not absolutely positioned), so
   when the form is tall it grows .hero-body's height, which grows
   .hero's own height past its min-height floor via flex sizing, and
   .hero-media (position:absolute; inset:0) simply stretches to cover
   however tall that ends up being. The page scrolls; the form doesn't. */
@media (min-width: 900px) {
  .hero {
    display: flex;
    align-items: center;
    min-height: clamp(680px, 88vh, 820px);
  }
  .hero-media {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    min-height: 0;
    max-height: none;
  }
  /* Drop the mobile overlay-on-image trick -- back in normal flow, so
     it stacks above hero-sub inside .hero-copy below. */
  .hero-headline-wrap {
    position: static;
  }
  .hero-body {
    width: 100%;
    padding: 40px 0;
  }
  .hero-body .container {
    display: flex;
    align-items: center;
    gap: 40px;
  }
  .hero-copy {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 640px;
    /* Real bug behind the "washed out" text: .hero-media::after (the dark
       photo overlay) is position:absolute with an explicit z-index:1, but
       none of .hero/.hero-body/.container establish their own stacking
       context, so that z-index gets hoisted straight to the shared root
       context -- where it outranks .hero-copy, which was only ever
       position:relative with z-index:auto. Positive z-index always paints
       above z-index:auto in the same context regardless of DOM order, so
       the gradient was rendering ON TOP of this text, not behind it (the
       same stacking-context gap already fixed once below for .quote-card).
       Giving .hero-copy its own explicit z-index here promotes it above
       the gradient, same fix, same reason. */
    z-index: 2;
  }
  .hero-copy .hero-sub {
    margin-top: 26px;
  }
  /* Scoped to .hero specifically -- .quote-card (the Flyra embed
     wrapper) is reused as a plain grid item on the contact page, which
     has no .hero ancestor and doesn't need any of this. */
  .hero .quote-card {
    position: relative;
    /* Floor matches the old single-column max-width (560px). Flyra's
       embedded form has its own internal breakpoint somewhere around
       ~450px of iframe width -- below it, the form switches to a much
       taller stacked layout. Never let the card get that narrow. */
    width: clamp(420px, 34vw, 480px);
    max-width: none;
    flex-shrink: 0;
    margin: 0;
    /* Without this, the card (z-index:auto) paints BELOW .hero-media's
       ::after gradient wash (z-index:1) wherever the two overlap, since
       neither .hero nor .hero-media establishes its own stacking context
       -- washing out the top of the card in a dark, translucent band. */
    z-index: 3;
  }
}

/* ---------- Generic section rhythm ---------- */

.section { padding: 56px 0; }
.section-tight { padding: 40px 0; }
.section-alt { background: var(--white); }

.section-head { margin-bottom: 28px; max-width: 640px; }
.eyebrow {
  display: block;
  color: var(--blue);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.section-title { font-size: clamp(24px, 4.5vw, 32px); font-weight: 800; }
.section-lede { color: var(--body); font-size: 16px; margin-top: 10px; line-height: 1.55; }

/* ---------- Trust bar strip ---------- */

.trust-bar {
  background: var(--white);
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.trust-bar-inner {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  justify-content: center;
  align-items: center;
}
.trust-bar-item {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 13.5px;
  font-weight: 600;
  color: var(--ink);
}
.trust-bar-item svg { flex-shrink: 0; }
.trust-dot { color: var(--border); }

/* ---------- Cards / grids ---------- */

.grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 900px) {
  .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 24px;
}

.service-card { display: flex; flex-direction: column; gap: 12px; }
.service-card h3 { font-size: 19px; }
.service-card p { color: var(--body); font-size: 15px; line-height: 1.55; }

/* Services grid stays 2-up at every width, even on phones — cards go
   compact (tag + title + link, no body copy) below 640px to stay
   close to square instead of stretching tall with wrapped text. */
.services-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.services-grid .card.service-card {
  padding: 30px;
  border-radius: 18px;
  box-shadow: 0 4px 16px rgba(11, 18, 32, 0.06);
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.services-grid .card.service-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--card-shadow);
  border-color: transparent;
}
.services-grid .service-card h3 { font-size: 22px; }
.services-grid .service-card p { font-size: 15.5px; }
.services-grid .service-card a {
  display: inline-block;
  font-weight: 700;
  transition: transform 0.15s ease;
}
.services-grid .service-card a:hover { transform: translateX(3px); }

@media (max-width: 639px) {
  .services-grid { gap: 10px; }
  .services-grid .card.service-card { padding: 20px 16px; gap: 12px; min-height: 168px; justify-content: center; }
  .services-grid .service-card .tag { font-size: 11px; padding: 4px 10px; }
  .services-grid .service-card h3 { font-size: 17px; line-height: 1.3; }
  .services-grid .service-card p { display: none; }
  .services-grid .service-card a { font-size: 14px; }
}
.service-card .tag {
  align-self: flex-start;
  background: rgba(22,87,209,0.08);
  color: var(--blue);
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
}

.method-card {
  background: var(--navy);
  color: var(--white);
  border-radius: var(--radius);
  padding: 28px 24px;
  display: grid;
  gap: 20px;
}
.method-card h3 { color: var(--white); font-size: 20px; }
.method-card p { color: #c4d0e3; font-size: 15px; line-height: 1.6; }
@media (min-width: 760px) {
  .method-card { grid-template-columns: 1.1fr 1fr; align-items: center; }
}
.method-card img { border-radius: var(--radius-sm); }

/* ---------- Maintenance plans ---------- */

.plans { background: var(--navy); }
.plans-head.section-head {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.plans .eyebrow { color: var(--cyan); }
.plans .section-title { color: var(--white); }

.plans-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  max-width: 640px;
  margin: 0 auto;
}
@media (min-width: 640px) {
  .plans-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.plan-card {
  position: relative;
  background: var(--white);
  border-radius: var(--radius);
  padding: 34px 28px 28px;
  text-align: left;
}
.plan-card-popular {
  background: var(--blue-dark);
  box-shadow: var(--card-shadow);
}

.plan-badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--cyan);
  color: #06202f;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 6px 16px;
  border-radius: 20px;
  white-space: nowrap;
}

.plan-name {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 14px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink);
}
.plan-card-popular .plan-name { color: var(--cyan); }

.plan-divider {
  width: 36px;
  height: 3px;
  background: var(--blue);
  border-radius: 2px;
  margin: 14px 0 20px;
}
.plan-card-popular .plan-divider { background: var(--cyan); }

.plan-discount {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 44px;
  color: var(--ink);
  line-height: 1;
}
.plan-discount span { font-size: 26px; }
.plan-card-popular .plan-discount { color: var(--white); }

.plan-discount-label {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 11.5px;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}
.plan-card-popular .plan-discount-label { color: #c4d0e3; }

.plan-features {
  list-style: none;
  margin: 22px 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 12px;
}
.plan-card-popular .plan-features { border-top-color: rgba(255,255,255,0.15); }
.plan-features li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14.5px;
  color: var(--body);
}
.plan-card-popular .plan-features li { color: #dce4f2; }

.plan-check {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-check svg { width: 11px; height: 11px; stroke: var(--white); }
.plan-card-popular .plan-check { background: var(--cyan); }
.plan-card-popular .plan-check svg { stroke: #06202f; }

/* Same shape as .plan-check, muted instead of brand-colored, to mark a
   feature a plan does NOT include -- paired with .plan-feature-excluded
   on the <li> itself so the whole line reads as de-emphasized, not just
   the icon. */
.plan-cross {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.plan-cross svg { width: 11px; height: 11px; stroke: var(--muted); }
.plan-card-popular .plan-cross { background: rgba(255,255,255,0.15); }
.plan-card-popular .plan-cross svg { stroke: #9fb0c9; }
.plan-features li.plan-feature-excluded { color: var(--muted); }
.plan-card-popular .plan-features li.plan-feature-excluded { color: #9fb0c9; }

.plan-card .btn { width: 100%; }

.plans-note {
  text-align: center;
  color: #90a0bd;
  font-size: 13.5px;
  margin-top: 28px;
}

/* ---------- How it works ---------- */

.steps { background: var(--navy); }
.steps .eyebrow { color: var(--cyan); }
.steps .section-title { color: var(--white); }
.steps-title-accent { color: var(--cyan); }

.steps-grid {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .steps-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .steps-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

.step-card {
  background: var(--navy-soft);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: var(--radius);
  padding: 26px 22px;
}
.step-num {
  display: block;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 13px;
  letter-spacing: 0.05em;
  color: var(--cyan);
}
.step-card h3 {
  color: var(--white);
  font-size: 18px;
  margin-top: 14px;
}
.step-card p {
  color: #c4d0e3;
  font-size: 14.5px;
  line-height: 1.6;
  margin-top: 8px;
}

/* Service areas */
.areas-primary {
  font-size: 17px;
  line-height: 1.6;
  color: var(--ink);
}
.areas-primary strong { font-family: var(--font-display); }

.area-map-wrap { margin-top: 20px; }
.area-map {
  height: 380px;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--card-shadow);
  border: 1px solid var(--border);
  background: #e9edf2; /* shows while tiles are still loading */
}
@media (min-width: 900px) {
  .area-map { height: 480px; }
}
.area-map-hint { margin-top: 10px; color: var(--muted); font-size: 13.5px; }
.areas-note { margin-top: 16px; color: var(--muted); font-size: 14.5px; }

/* Founder */
.founder {
  display: grid;
  gap: 24px;
  grid-template-columns: 1fr;
  align-items: center;
}
@media (min-width: 760px) {
  .founder { grid-template-columns: 0.85fr 1.15fr; }
}
.founder-photo { border-radius: var(--radius); overflow: hidden; box-shadow: var(--card-shadow); }
.founder-copy p { color: var(--body); font-size: 16px; line-height: 1.65; margin-top: 14px; }

/* Reviews — centered header + stat row */
.reviews-head.section-head {
  max-width: 620px;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
}
.reviews-subtext {
  margin-top: 10px;
  color: var(--body);
  font-size: 16px;
  line-height: 1.6;
}
.reviews-stats {
  display: flex;
  justify-content: center;
  gap: 48px;
  flex-wrap: wrap;
  margin: 28px auto 40px;
  padding-top: 28px;
  max-width: 620px;
  border-top: 1px solid var(--border);
}
.reviews-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.reviews-stat-num {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(26px, 4vw, 32px);
  color: var(--ink);
}
.reviews-stat-label {
  font-size: 13.5px;
  color: var(--muted);
  font-weight: 500;
}

/* Reviews — auto-scrolling marquee */
.review-marquee-clip {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
  mask-image: linear-gradient(90deg, transparent 0, #000 48px, #000 calc(100% - 48px), transparent 100%);
}
.review-marquee {
  display: flex;
  align-items: stretch;
  gap: 20px;
  width: max-content;
  animation: bks-review-scroll 55s linear infinite;
}
.review-marquee-clip:hover .review-marquee { animation-play-state: paused; }
@keyframes bks-review-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}
.review-track {
  display: flex;
  align-items: stretch;
  gap: 20px;
  flex: 0 0 auto;
}
.review-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 22px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: clamp(270px, 32vw, 340px);
  flex: 0 0 auto;
}
.review-stars { display: flex; gap: 3px; }
.review-quote { font-size: 15px; line-height: 1.6; color: var(--ink); }
.review-author { font-size: 13.5px; font-weight: 700; color: var(--muted); font-family: var(--font-display); }

.reviews-cta { margin-top: 28px; text-align: center; }

/* FAQ */
.faq-item {
  border-bottom: 1px solid var(--border);
  padding: 18px 0;
}
.faq-item summary {
  cursor: pointer;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary .chev { flex-shrink: 0; transition: transform 0.2s ease; color: var(--blue); }
.faq-item[open] summary .chev { transform: rotate(180deg); }
.faq-item p { color: var(--body); font-size: 15px; line-height: 1.6; margin-top: 12px; }

/* Final CTA */
.final-cta {
  background: linear-gradient(160deg, var(--blue) 0%, var(--blue-dark) 70%, #0a2c72 100%);
  color: var(--white);
  border-radius: var(--radius);
  padding: 40px 28px;
  text-align: center;
}
.final-cta h2 { color: var(--white); font-size: clamp(24px, 5vw, 32px); }
.final-cta p { color: #d7e2f7; margin-top: 10px; font-size: 16px; }
.final-cta .btn { margin-top: 22px; }

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

.site-footer {
  background: var(--navy);
  color: #b9c4da;
  padding: 44px 0 26px;
}
.footer-top {
  display: flex;
  flex-direction: column;
  gap: 28px;
}
@media (min-width: 760px) {
  .footer-top { flex-direction: row; justify-content: space-between; align-items: flex-start; }
}
.footer-brand { display: flex; align-items: center; gap: 10px; color: var(--white); font-family: var(--font-display); font-weight: 800; }
.footer-brand img { width: 32px; height: 32px; object-fit: contain; }
.footer-nav { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-nav a { color: #b9c4da; font-size: 14px; font-weight: 600; }
.footer-nav a:hover { color: var(--white); }
.footer-contact { display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.footer-contact a { color: #b9c4da; }
.footer-contact a:hover { color: var(--white); }
.footer-areas { font-size: 13.5px; color: #8fa0bd; margin-top: 22px; }
.footer-bottom {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 13px;
  color: #7c8caa;
}

/* ---------- Sub-page hero (services, contact, thank-you, 404) ---------- */

.page-hero {
  background: var(--navy);
  padding: 44px 0 40px;
}
.page-hero .eyebrow { color: var(--cyan); }
.page-hero h1 { color: var(--white); font-size: clamp(28px, 6vw, 42px); }
.page-hero p { color: #c4d0e3; font-size: 16px; margin-top: 12px; max-width: 640px; line-height: 1.6; }

.included-list { display: grid; gap: 14px; grid-template-columns: 1fr; }
@media (min-width: 640px) { .included-list { grid-template-columns: repeat(2, minmax(0,1fr)); } }
.included-item { background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 18px; }
.included-item h4 { font-size: 15.5px; margin-bottom: 6px; }
.included-item p { color: var(--body); font-size: 14.5px; line-height: 1.55; }

.centered-page {
  min-height: 60vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 60px 20px;
}
.centered-page .btn-row { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 24px; }