/* =====================================================================
   Simply Spotless Pressure Washing — styles.css
   Palette matched to the reference design:
     primary blue #148FD7 · navy #002B47 · CTA yellow #FFB400
   Type: Montserrat (headings) + Roboto (body)
   ===================================================================== */

:root {
  --navy-900: #001b2d;
  --navy-800: #00243c;
  --navy-700: #002b47;   /* reference --e-global-color-text */
  --navy-600: #0a3a5c;
  --blue-500: #0274be;
  --blue-400: #148fd7;   /* reference --e-global-color-primary */
  --sky-300: #7dd3fc;
  --yellow-500: #ffb400; /* reference --e-global-color-secondary */
  --yellow-600: #e6a200;
  --ink-900: #12222e;
  --ink-600: #46586a;
  --ink-400: #7b8a99;
  --line-200: #e2ebf2;
  --bg-tint: #f4f8fb;
  --white: #ffffff;

  --font-head: "Montserrat", "Segoe UI", Arial, sans-serif;
  --font-body: "Roboto", "Segoe UI", Arial, sans-serif;

  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow-sm: 0 2px 10px rgba(0, 27, 45, .07);
  --shadow-md: 0 10px 30px rgba(0, 27, 45, .12);
  --shadow-lg: 0 24px 60px rgba(0, 27, 45, .22);

  --header-h: 82px;
  --topbar-h: 40px;
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--ink-900);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
}

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

[hidden] { display: none !important; }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  color: var(--navy-700);
  line-height: 1.18;
  margin: 0 0 .55em;
}

h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; }
h3 { font-size: 1.18rem; font-weight: 700; }

p { margin: 0 0 1em; }

.container { width: min(1180px, 100% - 2.5rem); margin-inline: auto; }
.container--narrow { width: min(820px, 100% - 2.5rem); }

.icon { width: 1.15em; height: 1.15em; flex: none; }

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 200;
  background: var(--yellow-500);
  color: var(--navy-700);
  font-family: var(--font-head);
  font-weight: 800;
  padding: .8em 1.4em;
  border-radius: 0 0 10px 0;
}
.skip-link:focus { left: 0; }

:focus-visible { outline: 3px solid rgba(2, 116, 190, .55); outline-offset: 2px; border-radius: 4px; }

::selection { background: rgba(255, 180, 0, .45); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  letter-spacing: .02em;
  padding: .85em 1.7em;
  border-radius: 999px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
  text-align: center;
}
.btn:hover { text-decoration: none; }

.btn--lg { font-size: 1.03rem; padding: 1em 2em; }

.btn--primary {
  background: var(--yellow-500);
  color: var(--navy-700);
  box-shadow: 0 8px 22px rgba(255, 180, 0, .35);
}
.btn--primary:hover { background: var(--yellow-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 180, 0, .42); }

.btn--call {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(255, 255, 255, .85);
  color: var(--white);
  backdrop-filter: blur(4px);
}
.btn--call:hover { background: rgba(255, 255, 255, .2); transform: translateY(-2px); }

.btn--outline {
  background: transparent;
  border-color: var(--navy-700);
  color: var(--navy-700);
}

/* Solid phone CTA — the hero's primary action. */
.btn--phone {
  background: var(--yellow-500);
  color: var(--navy-700);
  box-shadow: 0 8px 22px rgba(255, 180, 0, .35);
  font-size: 1.1rem;
  letter-spacing: .01em;
}
.btn--phone:hover { background: var(--yellow-600); transform: translateY(-2px); box-shadow: 0 12px 26px rgba(255, 180, 0, .42); }

/* White pill phone button in the header, mirroring the reference site. */
.btn--phone-outline {
  background: var(--white);
  border-color: var(--navy-700);
  color: var(--navy-700);
}
.btn--phone-outline:hover { background: var(--navy-700); color: var(--white); }
.btn--outline:hover { background: var(--navy-700); color: var(--white); transform: translateY(-2px); }

/* ---------- Top bar ---------- */
.topbar {
  background: var(--navy-800);
  color: #bcd6e8;
  font-size: .84rem;
  height: var(--topbar-h);
  display: flex;
  align-items: center;
}
.topbar__inner { display: flex; align-items: center; gap: 1.8rem; }
.topbar__item { display: inline-flex; align-items: center; gap: .45em; }
.topbar__item a { color: #e8f3fa; font-weight: 500; }
.topbar__item a:hover { color: var(--yellow-500); text-decoration: none; }
.topbar__item--badge { margin-left: auto; color: var(--yellow-500); font-weight: 600; }

/* ---------- Header / nav ---------- */
.header {
  position: sticky;
  top: 0;
  z-index: 60;
  background: var(--white);
  box-shadow: 0 1px 0 var(--line-200);
  transition: box-shadow .25s ease;
}
.header.is-scrolled { box-shadow: var(--shadow-md); }

.header__inner { height: var(--header-h); display: flex; align-items: center; gap: 1.5rem; }

.brand { display: inline-flex; align-items: center; gap: .7rem; flex: none; }
.brand:hover { text-decoration: none; }
.brand__mark { width: 58px; height: 58px; flex: none; }
.brand__mark svg, .brand__mark img { width: 100%; height: 100%; }
.brand__logo { object-fit: contain; }

/* The drawn mark only appears if assets/img/logo.png is missing. */
.brand__fallback { display: none; }
.brand__mark.is-fallback .brand__logo { display: none; }
.brand__mark.is-fallback .brand__fallback { display: block; }

.brand__text { display: flex; flex-direction: column; gap: 3px; }
.brand__name {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1.18rem;
  line-height: 1;
  color: var(--navy-700);
  letter-spacing: -.01em;
  white-space: nowrap;
}
.brand__tag {
  font-family: var(--font-head);
  font-size: .64rem;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  white-space: nowrap;
}
.brand--footer .brand__name { color: var(--white); }
.brand--footer .brand__tag { color: var(--sky-300); }
.nav { margin-left: auto; display: flex; align-items: center; gap: 1.15rem; }

.nav__link {
  position: relative;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .86rem;
  color: var(--navy-700);
  padding: .35em 0;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .3em;
  white-space: nowrap;
}
.nav__link:hover { text-decoration: none; }

.nav__link:not(.nav__cta)::after {
  content: "";
  position: absolute;
  left: 0; right: 100%;
  bottom: 0;
  height: 3px;
  border-radius: 2px;
  background: var(--yellow-500);
  transition: right .22s ease;
}
.nav__link:not(.nav__cta):hover::after,
.nav__link[aria-current="page"]::after,
.nav__link[data-active-group]::after { right: 0; }

.nav__caret { width: 14px; height: 14px; transition: transform .2s ease; }
.nav__toggle[aria-expanded="true"] .nav__caret { transform: rotate(180deg); }

/* Dropdown groups */
.nav__group { position: relative; }

.nav__menu {
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translate(-50%, 8px);
  min-width: 210px;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: .5rem;
  display: flex;
  flex-direction: column;
  opacity: 0;
  visibility: hidden;
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
  z-index: 70;
}
.nav__menu--wide { min-width: 250px; }

/* A small bridge so the pointer can travel from the button to the menu. */
.nav__group::after {
  content: "";
  position: absolute;
  top: 100%; left: 0; right: 0;
  height: 16px;
}

.nav__group:hover .nav__menu,
.nav__group:focus-within .nav__menu,
.nav__toggle[aria-expanded="true"] + .nav__menu {
  opacity: 1;
  visibility: visible;
  transform: translate(-50%, 0);
}

.nav__menu a {
  font-family: var(--font-head);
  font-weight: 600;
  font-size: .88rem;
  color: var(--navy-700);
  padding: .6em .85em;
  border-radius: 9px;
  transition: background .16s ease, color .16s ease;
}
.nav__menu a:hover { background: var(--bg-tint); color: var(--blue-400); text-decoration: none; }
.nav__menu a[aria-current="page"] { background: var(--navy-700); color: var(--white); }

.nav__cta { font-size: .85rem; padding: .75em 1.4em; }
.nav__phone { font-size: .85rem; padding: .72em 1.2em; }

.nav-toggle {
  display: none;
  margin-left: auto;
  width: 46px; height: 46px;
  border: 1px solid var(--line-200);
  border-radius: 10px;
  background: var(--white);
  cursor: pointer;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 20px; height: 2.5px;
  border-radius: 2px;
  background: var(--navy-700);
  transition: transform .25s ease, opacity .25s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7.5px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7.5px) rotate(-45deg); }

/* ---------- Hero (home) ---------- */
.hero {
  position: relative;
  min-height: max(620px, calc(100svh - var(--header-h) - var(--topbar-h)));
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--navy-700);
}

.hero__media { position: absolute; inset: 0; }

.hero__art {
  position: absolute;
  inset: -4%;
  background-size: cover;
  background-position: center;
  animation: kenburns 22s ease-in-out infinite alternate;
}

/* Phones get a portrait crop of the same frame instead — see the comment in
   src/pages/index.html. Both layers are in the markup; only one is ever shown. */
.hero__art--m { display: none; }
/* Mobile-only stand-in for the hidden quote form card. */
.hero__quote-m { display: none; }
@media (max-width: 900px) {
  .hero__art { display: none; }
  .hero__art--m { display: block; background-position: 50% 50%; }
  /* The desktop wash sits at .7, which is fine over a wide scene but flattens
     a single figure into the blue. Ease it off so the phone still shows a
     person washing a house; the scrim below keeps the copy legible. */
  .hero__shade { opacity: .55; }
  /* The form card covered the photo edge to edge on a phone, so phones get
     the second button instead — the form still lives on the contact page. */
  .hero__card { display: none; }
  .hero__quote-m { display: inline-flex; }
  /* Same reason: less copy over the photo. */
  .hero__sub { display: none; }
  /* A shorter hero is what actually zooms the photo out. The visible width of
     a background is (hero width / hero height) x the image height, so trimming
     the height is the only lever that shows more of the scene. */
  .hero { min-height: 600px; }

  /* Both of these repeat what the services section and the "why us" copy below
     already say, and on a phone that is a lot of scrolling before anything new.
     Desktop keeps them — there the row costs one screen-width, not four. */

  /* Put the before/after slider straight after the hero, ahead of the service
     cards: it is the most convincing thing on the page and shouldn't be four
     scrolls down. Ordering needs a flex parent, hence the display change; the
     blanket rule keeps everything else in source order behind these three. */
  body[data-page="index"] main { display: flex; flex-direction: column; }
  body[data-page="index"] main > * { order: 5; }
  body[data-page="index"] main > .hero { order: 1; }
  body[data-page="index"] main > #before-after { order: 2; }
  body[data-page="index"] main > #services { order: 3; }
}

@keyframes kenburns {
  from { transform: scale(1) translate(0, 0); }
  to { transform: scale(1.07) translate(-1.2%, 1%); }
}

/* Real footage covers the still once it can actually play. */
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .9s ease;
}
.hero__video.is-playing { opacity: 1; }

/* Phones show the still photo instead. This width must stay in step with
   HERO_VIDEO_MIN in js/main.js, which is what stops the file downloading —
   display:none alone would still cost the visitor the megabytes. */
@media (max-width: 899.98px) {
  .hero__video { display: none; }
}

/* The blue wash over the video — matches the reference design exactly:
   linear-gradient(20deg, #148FD7 0%, #002B47 100%) at 70% opacity. */
.hero__shade {
  position: absolute;
  inset: 0;
  z-index: 1;
  background-image: linear-gradient(20deg, var(--blue-400) 0%, var(--navy-700) 100%);
  opacity: .7;
}

/* A soft extra scrim behind the copy so headlines stay legible over any
   footage, without changing the overall colour of the wash. */
.hero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 22, 37, .55) 0%, rgba(0, 22, 37, .18) 55%, transparent 100%);
}

.hero__inner {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 3.5rem;
  align-items: center;
  padding: 5.5rem 0 7rem;
}

.hero__content { max-width: 640px; }

.hero__callnote {
  color: #cfe3f1;
  font-size: .9rem;
  margin: 1rem 0 0;
}

/* Quote card — sits where the reference site puts its reviews widget. */
.hero__card {
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 1.8rem 1.7rem;
  max-width: 440px;
  width: 100%;
  justify-self: end;
}

.hero__card-head { text-align: center; margin-bottom: 1.2rem; }

.hero__card-eyebrow {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin: 0 0 .4em;
}

.hero__card-title { font-size: 1.6rem; font-weight: 900; margin: 0 0 .25em; }
.hero__card-sub { color: var(--ink-600); font-size: .9rem; margin: 0; }

.hero-form .field { margin-bottom: .8rem; }
.hero-form .field label { font-size: .76rem; }
.hero-form input, .hero-form select { font-size: .92rem; padding: .65em .85em; }
.hero-form__submit { width: 100%; margin-top: .3rem; }
.hero-form__fine { text-align: center; color: var(--ink-400); font-size: .76rem; margin: .8em 0 0; }

.hero__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: .6em;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .85rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #dcedf8;
  background: rgba(255, 255, 255, .1);
  border: 1px solid rgba(255, 255, 255, .22);
  padding: .5em 1.1em;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.stars { color: var(--yellow-500); letter-spacing: .12em; }

.hero__headlines { position: relative; margin-top: 1.3rem; }

.hero__title {
  color: var(--white);
  font-size: clamp(2.1rem, 4.6vw, 3.55rem);
  font-weight: 900;
  letter-spacing: -.015em;
  margin: 0;
  text-wrap: balance;
  text-shadow: 0 3px 24px rgba(0, 20, 35, .45);
}

.hero__title .accent { color: var(--yellow-500); }

/* The brand-name headline is only a few words, so it can run much larger
   than a sentence-length one and still fill the same block of space. */
.hero__title--brand {
  font-size: clamp(2.6rem, 6.4vw, 4.9rem);
  line-height: 1.04;
  letter-spacing: -.025em;
}
.hero__title--brand .accent { display: block; }

.hero__sub {
  font-family: var(--font-head);
  color: #e7f2fa;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  font-size: clamp(.82rem, 1.5vw, 1rem);
  margin: 1.4rem 0 1.9rem;
}

.hero__actions { display: flex; flex-wrap: wrap; gap: .9rem; }

.hero__wave { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; line-height: 0; }
.hero__wave svg { width: 100%; height: clamp(34px, 6vw, 90px); }

/* ---------- Page hero (inner pages) ---------- */
.pagehero {
  position: relative;
  overflow: hidden;
  background: var(--navy-700);
  display: flex;
  align-items: center;
  min-height: 380px;
}

.pagehero__art {
  position: absolute;
  inset: -3%;
  background-size: cover;
  background-position: center;
}

/* Pages that supply a phone-framed banner (heroArtMobile:) get a second layer.
   It is inert until the viewport is narrow, then it takes over. */
.pagehero__art--m { display: none; }
@media (max-width: 760px) {
  .pagehero--dual .pagehero__art { display: none; }
  .pagehero--dual .pagehero__art--m { display: block; }
}

.pagehero__shade {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(20deg, var(--blue-400) 0%, var(--navy-700) 100%);
  opacity: .82;
}
.pagehero__shade::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0, 22, 37, .5) 0%, rgba(0, 22, 37, .12) 60%, transparent 100%);
}

/* Photo banners need a heavier scrim than the illustrations do. A real
   photograph carries its own detail and contrast — lettering on a yard sign,
   windows on a wall — and the headline lands right on top of it. Darkening
   the left, where the copy sits, keeps the text clean and still lets the
   photo read on the right. */
.pagehero--photo .pagehero__shade::after {
  background: linear-gradient(90deg,
    rgba(0, 22, 37, .9) 0%,
    rgba(0, 22, 37, .68) 36%,
    rgba(0, 22, 37, .22) 64%,
    transparent 86%);
}

/* On a phone the copy runs the full width, so there is no clear right-hand
   side to protect — darken from the top down instead, which is where the
   headline and body sit, and give the banner extra height so the photo has
   somewhere to live below the buttons. Illustrated banners don't need either. */
@media (max-width: 760px) {
  .pagehero--photo { min-height: 430px; }
  .pagehero--photo .pagehero__content { padding-bottom: 8.5rem; }
  .pagehero--photo .pagehero__shade::after {
    background: linear-gradient(180deg,
      rgba(0, 22, 37, .84) 0%,
      rgba(0, 22, 37, .62) 44%,
      rgba(0, 22, 37, .1) 80%,
      transparent 100%);
  }
}

.pagehero__content { position: relative; z-index: 2; padding: 4.5rem 0 5rem; max-width: 780px; }
.pagehero h1 {
  color: var(--white);
  font-size: clamp(1.9rem, 4vw, 3rem);
  font-weight: 900;
  margin: .3em 0 .35em;
  text-shadow: 0 3px 24px rgba(0, 20, 35, .45);
}
.pagehero p { color: #dcedf8; font-size: 1.05rem; max-width: 58ch; margin-bottom: 1.6rem; }

.pagehero__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

.crumbs {
  display: flex;
  align-items: center;
  gap: .55em;
  font-size: .82rem;
  color: #a9cde4;
  font-family: var(--font-head);
  font-weight: 600;
  letter-spacing: .04em;
}
.crumbs a { color: var(--yellow-500); }
.crumbs span[aria-hidden] { opacity: .5; }

.pagehero__wave { position: absolute; z-index: 2; left: 0; right: 0; bottom: -1px; line-height: 0; }
.pagehero__wave svg { width: 100%; height: clamp(28px, 4vw, 56px); }

/* ---------- Services icon bar ---------- */

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

/* ---------- Sections ---------- */
.section { padding: 5.5rem 0; }
.section--tint { background: var(--bg-tint); }

.section__head { max-width: 720px; margin: 0 auto 3rem; text-align: center; }
.section__sub { color: var(--ink-600); font-size: 1.02rem; }

.eyebrow {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .78rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blue-500);
  margin: 0 0 .8em;
}
.eyebrow--light { color: var(--yellow-500); }

.accent-text { color: var(--blue-500); }
.accent-text--warm { color: var(--yellow-500); }

.section__cta { text-align: center; margin-top: 2.6rem; }

.prose h2 { margin-bottom: .7em; }
.prose p { color: var(--ink-600); font-size: 1.04rem; }
.prose strong { color: var(--navy-700); }

.note {
  background: var(--white);
  border-left: 4px solid var(--yellow-500);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  padding: 1rem 1.3rem;
  color: var(--ink-600);
  font-size: .95rem;
  box-shadow: var(--shadow-sm);
  margin-top: 2rem;
}
.section--tint .note { background: var(--white); }

/* ---------- Split (copy + art) ---------- */
.split { display: grid; grid-template-columns: 1.05fr 1fr; gap: 3.5rem; align-items: center; }
.split__copy p { color: var(--ink-600); }
.split__copy .btn { margin-top: .6rem; }
.split__art { position: relative; }
/* A real photograph rather than one of the flat illustrations — keep more of
   its width than the 4:3 illustration slot allows. */
.split__art--photo img { aspect-ratio: 16 / 10; }
.split__art img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

/* ---------- Services grid ---------- */
.services-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }
.services-grid--4 { grid-template-columns: repeat(4, 1fr); }

.service-card {
  position: relative;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 1.8rem 1.6rem 1.5rem;
  box-shadow: var(--shadow-sm);
  transition: transform .22s ease, box-shadow .22s ease;
  overflow: hidden;
}
.service-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, var(--yellow-500), var(--blue-400));
  opacity: 0;
  transition: opacity .22s ease;
}
.service-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-md); }
.service-card:hover::before { opacity: 1; }

.service-card__icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: linear-gradient(135deg, var(--navy-700), var(--navy-600));
  color: var(--yellow-500);
  display: grid;
  place-items: center;
  margin-bottom: 1.1rem;
}
.service-card__icon svg { width: 30px; height: 30px; }
.service-card p { color: var(--ink-600); font-size: .95rem; }
.service-card__link { font-family: var(--font-head); font-weight: 700; font-size: .88rem; color: var(--blue-500); }
.service-card__link:hover { color: var(--navy-700); }

/* ---------- Tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.3rem; }

.tile {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-left: 4px solid var(--yellow-500);
  border-radius: var(--radius-md);
  padding: 1.5rem 1.5rem 1.3rem;
  box-shadow: var(--shadow-sm);
  transition: transform .2s ease, box-shadow .2s ease;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.tile h3 { font-size: 1.06rem; margin-bottom: .4em; }
.tile p { color: var(--ink-600); font-size: .93rem; margin: 0; }

/* ---------- Checklists ---------- */
.checklist {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: .85rem 2rem;
}
.checklist--tight { grid-template-columns: 1fr; gap: .6rem; margin-top: 1.2rem; }

.checklist li {
  position: relative;
  padding-left: 2.1rem;
  color: var(--ink-600);
  font-size: .97rem;
}
.checklist li::before {
  content: "";
  position: absolute;
  left: 0; top: .18em;
  width: 1.4rem; height: 1.4rem;
  border-radius: 50%;
  background: rgba(255, 180, 0, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7L10 17l-6-6' fill='none' stroke='%23e6a200' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 62% no-repeat;
}
.checklist--light li { color: #cfe3f1; }
.checklist--light li::before { background-color: rgba(255, 180, 0, .22); }

/* ---------- FAQ ---------- */
.faq { display: grid; gap: .75rem; }

.faq details {
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.faq summary {
  cursor: pointer;
  list-style: none;
  padding: 1.1rem 3rem 1.1rem 1.3rem;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy-700);
  position: relative;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "";
  position: absolute;
  right: 1.2rem; top: 50%;
  width: 14px; height: 14px;
  margin-top: -7px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230274be' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .22s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { background: var(--bg-tint); }
.faq details > p {
  margin: 0;
  padding: 0 1.3rem 1.3rem;
  color: var(--ink-600);
  font-size: .97rem;
}

/* ---------- Comparison table ---------- */
.table-wrap { overflow-x: auto; border-radius: var(--radius-md); box-shadow: var(--shadow-sm); }

.cmp {
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  background: var(--white);
  font-size: .95rem;
}
.cmp th, .cmp td { padding: .95rem 1.1rem; text-align: left; border-bottom: 1px solid var(--line-200); }
.cmp thead th {
  background: var(--navy-700);
  color: var(--white);
  font-family: var(--font-head);
  font-size: .88rem;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.cmp tbody th { font-family: var(--font-head); color: var(--navy-700); font-weight: 700; width: 30%; }
.cmp td { color: var(--ink-600); }
.cmp tbody tr:nth-child(odd) td, .cmp tbody tr:nth-child(odd) th { background: #fbfdfe; }
.cmp tbody tr:last-child th, .cmp tbody tr:last-child td { border-bottom: 0; }

/* ---------- Before / After ---------- */
.ba { position: relative; }
.section .ba:not(.gallery__item .ba) { max-width: 940px; margin: 0 auto; }

.ba__frame {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  background: var(--navy-600);
  --pos: 50%;
  /* The frame itself takes the drag (see initBeforeAfter). pan-y leaves
     vertical scrolling to the browser, so swiping down the page over a
     slider still scrolls instead of dragging the handle. */
  touch-action: pan-y;
  cursor: ew-resize;
}

.ba__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.ba__after-wrap { position: absolute; inset: 0; clip-path: inset(0 0 0 var(--pos, 50%)); }

.ba__label {
  position: absolute;
  top: 14px;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: .45em 1em;
  border-radius: 999px;
  z-index: 2;
  pointer-events: none;
}
.ba__label--before { left: 14px; background: rgba(0, 27, 45, .78); color: #fff; }
.ba__label--after { right: 14px; background: var(--yellow-500); color: var(--navy-700); }

.ba__handle {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--pos, 50%);
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  box-shadow: 0 0 14px rgba(0, 0, 0, .35);
}
.ba__handle-btn {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 52px; height: 52px;
  border-radius: 50%;
  background: var(--white);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  box-shadow: var(--shadow-md);
}
.ba__handle-btn svg { width: 24px; height: 24px; }

/* Invisible range covers the frame: drag anywhere, keyboard accessible. */
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  /* Kept in the markup for keyboard and screen-reader users — it still takes
     focus and still fires `input` on arrow keys. It must not receive pointer
     events, though: the frame handles those, because a native range does not
     respond to a track tap on iOS. */
  pointer-events: none;
  touch-action: pan-y;
  z-index: 3;
  -webkit-appearance: none;
  appearance: none;
  background: transparent;
}
.ba__range::-webkit-slider-thumb { -webkit-appearance: none; width: 60px; height: 100%; }
.ba__range::-moz-range-thumb { width: 60px; height: 100%; border: 0; background: transparent; }
.ba__frame:has(.ba__range:focus-visible) { outline: 3px solid rgba(2, 116, 190, .55); outline-offset: 3px; }

/* ---------- Bare quote page (bare: true in a page's front matter) ---------- */
.bare-header {
  background: var(--white);
  box-shadow: 0 1px 0 var(--line-200);
}
.bare-header__inner {
  min-height: 78px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.quotepage {
  background:
    radial-gradient(800px 500px at 78% 18%, rgba(20, 143, 215, .35), transparent 62%),
    linear-gradient(20deg, var(--blue-400) 0%, var(--navy-700) 100%);
  padding: clamp(2.4rem, 6vw, 4.4rem) 0 clamp(2.8rem, 6vw, 4.4rem);
  min-height: 72vh;
  display: flex;
  align-items: center;
}
.quotepage__inner {
  display: grid;
  grid-template-columns: 1fr minmax(320px, 460px);
  gap: clamp(1.8rem, 5vw, 4rem);
  align-items: center;
}
.quotepage h1 {
  color: var(--white);
  font-size: clamp(2rem, 5vw, 3.2rem);
  font-weight: 900;
  margin: 0 0 .35em;
}
.quotepage__sub {
  color: #dcedf8;
  font-size: 1.08rem;
  max-width: 44ch;
  margin-bottom: 1.6rem;
}
.quotepage__or { color: #bcd8ec; font-size: .92rem; margin: .9rem 0 0; }
.quotepage__email { margin: .5rem 0 0; }
.quotepage__email a { color: var(--white); font-weight: 600; text-decoration: underline; }

.bare-footer {
  background: var(--navy-900);
  color: #9cb8cb;
  font-size: .85rem;
}
.bare-footer__inner {
  min-height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.bare-footer a { color: var(--sky-300); }

/* The sticky mobile call bar is for browsing pages — on the quote page the
   call button and the form are already the whole screen. */
body.is-bare .mobile-cta { display: none; }
body.is-bare { padding-bottom: 0; }

@media (max-width: 900px) {
  .quotepage__inner { grid-template-columns: 1fr; }
  .quotepage { min-height: 0; }
}
@media (max-width: 520px) {
  .bare-header__phone { display: none; }
}

/* ---------- Click-to-play video ---------- */
.videobox {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  background: var(--navy-800);
  aspect-ratio: 16 / 9;
}
.videobox__btn {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  display: block;
}
.videobox__poster {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .5s ease, filter .3s ease;
}
.videobox__btn:hover .videobox__poster { transform: scale(1.03); filter: brightness(.92); }

.videobox__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 76px; height: 76px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--navy-700);
  display: grid;
  place-items: center;
  box-shadow: 0 10px 30px rgba(0, 27, 45, .35);
  transition: transform .2s ease, background .2s ease;
}
.videobox__play svg { width: 40px; height: 40px; margin-left: 3px; }
.videobox__btn:hover .videobox__play { transform: translate(-50%, -50%) scale(1.08); background: var(--yellow-600); }
.videobox__btn:focus-visible { outline: 3px solid rgba(2, 116, 190, .75); outline-offset: 3px; }

.videobox__label {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 2.6rem 1.2rem .95rem;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 1rem;
  color: var(--white);
  text-align: left;
  background: linear-gradient(to top, rgba(0, 22, 37, .85), transparent);
}
.videobox__label span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .84rem;
  color: #cfe3f1;
  margin-top: .15em;
}

/* Swapped in for the button once someone presses play. */
.videobox iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 600px) {
  .videobox__play { width: 60px; height: 60px; }
  .videobox__play svg { width: 30px; height: 30px; }
}

/* ---------- Gallery ---------- */
.gallery { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; }
.gallery__item { margin: 0; }
.gallery__item .ba__frame { aspect-ratio: 4 / 3; }

/* Side-by-side pair, for jobs whose two photos were not shot from the same
   spot and so cannot be dragged over one another convincingly. It takes the
   full row so each half is still a reasonable size. */
.gallery__item--wide { grid-column: 1 / -1; }
.twoup { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.twoup__pane {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
.twoup__pane img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
@media (max-width: 640px) {
  .twoup { grid-template-columns: 1fr; }
}
.gallery__item figcaption {
  margin-top: 1rem;
  font-family: var(--font-head);
  color: var(--navy-700);
  font-weight: 700;
}
.gallery__item figcaption span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .88rem;
  color: var(--ink-400);
  margin-top: .15em;
}

/* ---------- Steps ---------- */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.6rem; }
.steps--4 { grid-template-columns: repeat(4, 1fr); }

.step {
  position: relative;
  text-align: center;
  padding: 2.4rem 1.5rem 1.6rem;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}
.step__num {
  display: inline-grid;
  place-items: center;
  width: 58px; height: 58px;
  border-radius: 50%;
  background: var(--navy-700);
  color: var(--yellow-500);
  font-family: var(--font-head);
  font-weight: 900;
  font-size: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 6px 18px rgba(0, 43, 71, .3);
}
.step p { color: var(--ink-600); font-size: .95rem; margin-bottom: 0; }

/* ---------- Reviews ---------- */
.reviews-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; }

.review {
  position: relative;
  overflow: hidden;
  margin: 0;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  padding: 1.9rem 1.7rem 1.6rem;
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  transition: transform .25s ease, box-shadow .25s ease;
}
.review:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
/* Yellow rule across the top, matching the CTA buttons. */
.review::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 4px;
  background: linear-gradient(90deg, var(--yellow-500), var(--blue-400));
}
/* Oversized opening quote, sitting behind the text. */
.review__quote {
  position: absolute;
  top: .06em;
  right: .16em;
  font-family: var(--font-head);
  font-size: 5.4rem;
  font-weight: 900;
  line-height: 1;
  color: var(--blue-400);
  opacity: .13;
  pointer-events: none;
}
/* Holds the shared <defs> for the star shape — never rendered itself. */
.svgdefs { position: absolute; width: 0; height: 0; overflow: hidden; }

/* The stars sit grey until the card scrolls into view, then turn gold one
   after another, left to right. .is-visible is added by the reveal
   observer in main.js. */
.review .stars { margin-bottom: .8rem; }
.review .stars svg { width: 88px; height: 17px; }
.review .stars use {
  fill: #dde5eb;
  transition: fill .3s ease;
}
.review.is-visible .stars use { fill: var(--yellow-500); }
.review.is-visible .stars use:nth-of-type(1) { transition-delay: .18s; }
.review.is-visible .stars use:nth-of-type(2) { transition-delay: .32s; }
.review.is-visible .stars use:nth-of-type(3) { transition-delay: .46s; }
.review.is-visible .stars use:nth-of-type(4) { transition-delay: .60s; }
.review.is-visible .stars use:nth-of-type(5) { transition-delay: .74s; }
.review blockquote {
  position: relative;
  margin: 0 0 1.4rem;
  color: var(--ink-600);
  font-size: .98rem;
  line-height: 1.72;
  flex: 1;
}
.review figcaption {
  font-family: var(--font-head);
  font-weight: 800;
  color: var(--navy-700);
  font-size: 1.18rem;
  line-height: 1.25;
  border-top: 1px solid var(--line-200);
  padding-top: 1rem;
}
.review figcaption span {
  display: block;
  font-family: var(--font-body);
  font-weight: 400;
  font-size: .84rem;
  color: var(--ink-400);
  margin-top: .2em;
}

.ratingbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.5rem;
  justify-content: center;
  text-align: center;
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 1.6rem 2rem;
  margin-bottom: 3rem;
}
.ratingbar__score { display: flex; flex-direction: column; align-items: center; gap: .15rem; }
.ratingbar__num { font-family: var(--font-head); font-weight: 900; font-size: 2.6rem; color: var(--navy-700); line-height: 1; }
.ratingbar__score .stars { font-size: 1.25rem; }
.ratingbar__label { font-size: .85rem; color: var(--ink-400); }
.ratingbar__note { margin: 0; font-size: .88rem; color: var(--ink-400); max-width: 34ch; }

.review-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin: 1.6rem 0 0; }

/* ---------- Service area ---------- */
.area-grid { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

.area-chip {
  display: inline-block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .9rem;
  color: var(--navy-700);
  background: var(--white);
  border: 1px solid var(--line-200);
  border-radius: 999px;
  padding: .6em 1.3em;
  box-shadow: var(--shadow-sm);
}

/* ---------- About ---------- */
.about__inner { display: grid; grid-template-columns: 1.1fr 1fr; gap: 3.5rem; align-items: center; }
.about__copy .btn { margin-top: .6rem; }
.about__copy p { color: var(--ink-600); }

.about__points { list-style: none; padding: 0; margin: 1.4rem 0 1.8rem; display: grid; gap: .65rem; }
.about__points li { display: flex; align-items: center; gap: .6em; font-weight: 500; color: var(--navy-700); }
.about__points .icon {
  color: var(--yellow-600);
  background: rgba(255, 180, 0, .14);
  border-radius: 50%;
  padding: 4px;
  width: 1.5em; height: 1.5em;
}

.about__art { position: relative; }
.about__art img {
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}

.about__badge {
  position: absolute;
  right: 0;
  bottom: -24px;
  width: 132px; height: 132px;
  border-radius: 50%;
  background: var(--yellow-500);
  color: var(--navy-700);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .72rem;
  letter-spacing: .08em;
  text-transform: uppercase;
  line-height: 1.25;
  box-shadow: var(--shadow-md);
  transform: rotate(6deg);
}
.about__badge-big { font-size: 1.7rem; font-weight: 900; letter-spacing: 0; }

/* The overhang is decorative, and its 6deg rotation widens the box by ~7px on
   top of the offset. Only allow it once the viewport is wider than the
   1180px container plus that slack, otherwise it forces a horizontal scroll. */
@media (min-width: 1260px) {
  .about__badge { right: -18px; }
}

/* ---------- CTA band ---------- */
.ctaband {
  background:
    radial-gradient(700px 400px at 85% 20%, rgba(20, 143, 215, .35), transparent 60%),
    linear-gradient(20deg, var(--blue-400) 0%, var(--navy-700) 100%);
  padding: 3.6rem 0;
}
.ctaband__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.ctaband h2 { color: var(--white); margin-bottom: .3em; }
.ctaband p { color: #cfe3f1; margin: 0; max-width: 52ch; }
.ctaband__actions { display: flex; flex-wrap: wrap; gap: .8rem; }

/* ---------- Contact ---------- */
.section--contact {
  background:
    radial-gradient(800px 480px at 90% 10%, rgba(20, 143, 215, .28), transparent 60%),
    linear-gradient(160deg, var(--navy-800), var(--navy-700));
}
.section--contact-page { padding-top: 4.5rem; }

.contact__inner { display: grid; grid-template-columns: 1fr 1.15fr; gap: 3rem; align-items: start; }
.contact__copy h2 { color: var(--white); }
.contact__copy > p { color: #b9d2e4; max-width: 44ch; }

.contact__channels { display: grid; gap: .9rem; margin: 1.8rem 0; max-width: 420px; }

.contact__channel {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: var(--radius-md);
  padding: .95rem 1.15rem;
  transition: background .2s ease, transform .2s ease;
}
a.contact__channel:hover { background: rgba(255, 255, 255, .14); transform: translateX(4px); text-decoration: none; }
.contact__channel--static { cursor: default; }
.contact__channel .icon { width: 30px; height: 30px; color: var(--yellow-500); }
.contact__channel small { display: block; color: #9cc4de; font-size: .76rem; text-transform: uppercase; letter-spacing: .1em; }
.contact__channel strong { color: var(--white); font-family: var(--font-head); font-size: 1rem; overflow-wrap: anywhere; }

/* ---------- Forms ---------- */
.quote-form {
  background: var(--white);
  border-radius: var(--radius-lg);
  padding: 2.1rem 2rem;
  box-shadow: var(--shadow-lg);
}

.quote-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }

.field { margin-bottom: 1.05rem; border: 0; padding: 0; min-width: 0; }

.field label, .field legend {
  display: block;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: .8rem;
  letter-spacing: .04em;
  color: var(--navy-700);
  margin-bottom: .4em;
}

.field input, .field textarea, .field select {
  width: 100%;
  font: inherit;
  font-size: .95rem;
  color: var(--ink-900);
  background: var(--bg-tint);
  border: 1.5px solid var(--line-200);
  border-radius: 10px;
  padding: .75em .95em;
  transition: border-color .18s ease, background .18s ease;
}
.field select {
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 9l6 6 6-6' fill='none' stroke='%230274be' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right .8em center;
  background-size: 15px;
  padding-right: 2.4em;
  cursor: pointer;
}

.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-color: var(--blue-500);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(2, 116, 190, .14);
}
.field textarea { resize: vertical; }

/* Service picker. Tiles on a grid rather than a wrapped row of pills — two
   across where there's room, one where there isn't, and each one a full
   click target with its own checkbox. */
.chips {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  grid-auto-rows: 1fr;          /* one tile wrapping shouldn't stagger the rest */
  gap: .6rem;
}
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.chip span {
  display: flex;
  align-items: center;
  gap: .65rem;
  height: 100%;
  font-size: .93rem;
  font-weight: 500;
  color: var(--navy-700);
  background: var(--white);
  border: 1.5px solid var(--line-200);
  border-radius: var(--radius-md);
  padding: .72em .9em;
  transition: border-color .16s ease, background .16s ease, box-shadow .16s ease;
}
/* The box that fills in when the option is picked. */
.chip span::before {
  content: "";
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 7px;
  border: 1.5px solid var(--line-200);
  background: var(--white);
  transition: border-color .16s ease, background-color .16s ease;
}
.chip input:checked + span {
  border-color: var(--blue-400);
  background: rgba(20, 143, 215, .06);
  box-shadow: inset 0 0 0 1px var(--blue-400);
}
.chip input:checked + span::before {
  border-color: var(--blue-400);
  background-color: var(--blue-400);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 7L10 17l-6-6' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 13px;
}
.chip input:focus-visible + span { outline: 3px solid rgba(2, 116, 190, .55); outline-offset: 2px; }
.chip:hover span { border-color: var(--blue-400); }

.quote-form__submit { width: 100%; margin-top: .4rem; }
.quote-form__fine { text-align: center; color: var(--ink-400); font-size: .82rem; margin: .9em 0 0; }

/* ---------- Footer ---------- */
/* ---------- Service area band (sits between the CTA and the footer) ---------- */
.areaband {
  background: var(--navy-800);
  border-bottom: 1px solid rgba(255, 255, 255, .07);
  padding: 2.9rem 0;
}
.areaband h2 {
  color: var(--white);
  font-size: clamp(1.1rem, 2.2vw, 1.45rem);
  letter-spacing: .06em;
  text-transform: uppercase;
  margin: 0 0 .7em;
}
.areaband p {
  color: #b6d0e1;
  margin: 0;
  max-width: 46ch;
  font-size: .98rem;
  line-height: 1.75;
}
.areaband a { color: var(--yellow-500); font-weight: 700; }
.areaband a:hover { text-decoration: underline; }

/* Service-area map + short town list. The chips flip to light-on-dark since
   they sit on the navy band rather than a pale section. */
.areaband__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(1.8rem, 4vw, 3.4rem);
  align-items: center;
  text-align: left;
}
.areaband__copy .area-grid { margin-top: 1.5rem; }
.areaband__map {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .32);
}

/* Map type. Every label carries a white halo (paint-order) so it stays
   legible where it crosses a road, a park or the river. */
.areamap__t1, .areamap__t2, .areamap__home, .areamap__state, .areamap__water, .areamap__ring {
  paint-order: stroke fill;
  stroke: #fff;
  stroke-linejoin: round;
}
.areamap__t1 {
  fill: #364550; font-family: var(--font-body);
  font-size: 13px; font-weight: 700; stroke-width: 3px;
}
.areamap__t2 {
  fill: #7d8b95; font-family: var(--font-body);
  font-size: 10px; font-weight: 500; stroke-width: 2.6px;
}
.areamap__home {
  fill: #0d2b41; font-family: var(--font-head);
  font-size: 15px; font-weight: 800; stroke-width: 3.6px;
}
.areamap__state {
  fill: #a89c8a; font-family: var(--font-body);
  font-size: 9.5px; font-weight: 700; letter-spacing: .12em; stroke-width: 2.4px;
}
.areamap__water {
  fill: #5b9dc4; font-family: var(--font-body);
  font-size: 11px; font-style: italic; stroke: none;
}
.areamap__ring {
  fill: #0f77b4; font-family: var(--font-body);
  font-size: 11.5px; font-weight: 700; letter-spacing: .04em; stroke-width: 3.4px;
}
.areamap__dot { fill: #148fd7; stroke: #fff; stroke-width: 1.6; }
.areamap__dot2 { fill: #a3aeb6; }
.areamap__leader { stroke: #94a2ab; stroke-width: 1; }
.areaband .area-grid { gap: .5rem; justify-content: flex-start; }
.areaband .area-chip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .16);
  color: #dbe9f4;
  font-size: .92rem;
}
.areaband .area-chip--more {
  background: none;
  border-color: transparent;
  color: var(--yellow-500);
}
.areaband__note { margin: 1.4rem 0 0; font-size: .92rem; }

/* Stacked: heading, blurb, map, towns. display:contents lets the copy
   column's children take their own place in the single-column flow. */
@media (max-width: 900px) {
  .areaband__grid { display: flex; flex-direction: column; gap: 1.2rem; text-align: center; }
  .areaband__copy { display: contents; }
  .areaband__copy h2 { order: 1; margin-bottom: 0; }
  .areaband__copy > p:first-of-type { order: 2; }
  .areaband__map { order: 3; max-width: 520px; margin: .4rem auto 0; }
  .areaband__copy .area-grid { order: 4; margin-top: 0; }
  .areaband__note { order: 5; margin-top: 0; }
  .areaband p { margin-inline: auto; }
  .areaband .area-grid { justify-content: center; }
}

.footer { background: var(--navy-900); color: #9cb8cb; }

.footer__inner {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.15fr;
  gap: 2.5rem;
  padding: 3.8rem 0 2.6rem;
}
.footer__brand p { font-size: .9rem; margin-top: 1.1rem; max-width: 34ch; }

.footer__social { display: flex; gap: .6rem; margin-top: 1.2rem; }
.footer__social a {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: rgba(255, 255, 255, .08);
  color: #cfe3f1;
  display: grid;
  place-items: center;
  transition: background .2s ease, color .2s ease;
}
.footer__social a:hover { background: var(--yellow-500); color: var(--navy-700); }
.footer__social svg { width: 20px; height: 20px; }

.footer__col { display: flex; flex-direction: column; gap: .55rem; align-items: flex-start; }
.footer__col h4 {
  color: var(--white);
  font-size: .82rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  margin-bottom: .6rem;
}
.footer__col a { color: #9cb8cb; font-size: .92rem; }
.footer__col a:hover { color: var(--yellow-500); }
.footer__col span { font-size: .92rem; }

/* Wins over the muted `.footer__col a` colour above — otherwise the button
   renders grey-on-yellow and is effectively unreadable. */
.footer__col a.footer__cta {
  margin-top: .8rem;
  font-size: .85rem;
  padding: .7em 1.4em;
  color: var(--navy-700);
}
.footer__col a.footer__cta:hover { color: var(--navy-700); }

.footer__legal {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 1.3rem 0 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: .8rem;
  justify-content: space-between;
  font-size: .84rem;
}

/* ---------- Mobile sticky CTA ---------- */
.mobile-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 70;
  display: none;
  gap: .6rem;
  padding: .6rem .8rem calc(.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, .96);
  box-shadow: 0 -6px 24px rgba(0, 27, 45, .18);
  backdrop-filter: blur(8px);
}
.mobile-cta a {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5em;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: .95rem;
  padding: .8em 1em;
  border-radius: 999px;
}
.mobile-cta a:hover { text-decoration: none; }
.mobile-cta__call { background: var(--yellow-500); color: var(--navy-700); }
.mobile-cta__quote { background: var(--navy-700); color: var(--white); }

/* ---------- Reveal-on-scroll ---------- */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.reveal.is-visible { opacity: 1; transform: none; }

.services-grid .reveal:nth-child(2), .steps .reveal:nth-child(2), .reviews-grid .reveal:nth-child(2),
.tiles .reveal:nth-child(2), .gallery .reveal:nth-child(2),
.prep .reveal:nth-child(2), .jobs .reveal:nth-child(2) { transition-delay: .1s; }

.services-grid .reveal:nth-child(3), .steps .reveal:nth-child(3), .reviews-grid .reveal:nth-child(3),
.tiles .reveal:nth-child(3), .gallery .reveal:nth-child(3),
.prep .reveal:nth-child(3) { transition-delay: .2s; }

.services-grid .reveal:nth-child(4), .steps .reveal:nth-child(4),
.tiles .reveal:nth-child(4), .prep .reveal:nth-child(4) { transition-delay: .3s; }

.services-grid .reveal:nth-child(5), .tiles .reveal:nth-child(5), .reviews-grid .reveal:nth-child(5) { transition-delay: .1s; }
.services-grid .reveal:nth-child(6), .tiles .reveal:nth-child(6), .reviews-grid .reveal:nth-child(6) { transition-delay: .2s; }

/* ---------- Responsive ---------- */
@media (max-width: 1100px) {
  .nav { gap: .85rem; }
  .nav__link { font-size: .82rem; }
}

@media (max-width: 1024px) {
  .services-grid, .services-grid--4, .tiles { grid-template-columns: repeat(2, 1fr); }
  .hero__inner { grid-template-columns: 1fr; gap: 2.5rem; padding: 4.5rem 0 7rem; }
  .hero__card { justify-self: start; max-width: 520px; }
  .hero__content { max-width: none; }
  .steps--4 { grid-template-columns: repeat(2, 1fr); }
  .split, .about__inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .contact__inner { grid-template-columns: 1fr; }
  .footer__inner { grid-template-columns: 1fr 1fr; }
  .gallery { grid-template-columns: 1fr; }
  .reviews-grid--page { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .nav {
    position: absolute;
    top: 100%;
    left: 0; right: 0;
    max-height: calc(100svh - var(--header-h));
    overflow-y: auto;
    background: var(--white);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .6rem 1.25rem 1.4rem;
    box-shadow: var(--shadow-md);
    display: none;
  }
  .nav.is-open { display: flex; }

  .nav__link { padding: .85em 0; border-bottom: 1px solid var(--line-200); font-size: 1rem; width: 100%; }
  .nav__link:not(.nav__cta)::after { display: none; }
  .nav__link[aria-current="page"] { color: var(--blue-400); }

  .nav__group { position: static; }
  .nav__group::after { display: none; }
  .nav__toggle { justify-content: space-between; }

  /* Dropdowns become accordions — hover must not open them on touch. */
  .nav__menu {
    position: static;
    transform: none;
    opacity: 1;
    visibility: visible;
    box-shadow: none;
    border: 0;
    border-bottom: 1px solid var(--line-200);
    border-radius: 0;
    padding: .2rem 0 .6rem .9rem;
    min-width: 0;
    display: none;
  }
  .nav__group:hover .nav__menu, .nav__group:focus-within .nav__menu { display: none; }
  .nav__toggle[aria-expanded="true"] + .nav__menu { display: flex; transform: none; }

  .nav__menu a { padding: .55em .7em; }
  .nav__cta { margin-top: .9rem; border-bottom: 0; }
  .nav-toggle { display: flex; }
  .topbar__item--hours { display: none; }
  .brand__mark { width: 54px; height: 54px; }
}

@media (max-width: 720px) {
  .section { padding: 3.8rem 0; }
  .about__badge { bottom: -18px; }
  .services-grid, .services-grid--4, .tiles, .steps, .steps--4,
  .reviews-grid, .reviews-grid--page { grid-template-columns: 1fr; }
  .checklist { grid-template-columns: 1fr; }
  .quote-form__row { grid-template-columns: 1fr; gap: 0; }
  .quote-form { padding: 1.6rem 1.3rem; }
  .hero__inner { padding: 3.5rem 0 7rem; }
  .nav__phone { margin-top: .5rem; }
  .pagehero { min-height: 320px; }
  .pagehero__content { padding: 3.2rem 0 3.8rem; }
  .mobile-cta { display: flex; }
  body { padding-bottom: 70px; }
  .footer__inner { grid-template-columns: 1fr; gap: 1.8rem; }
  .about__badge { right: 8px; bottom: -18px; width: 110px; height: 110px; }
  .topbar__item--badge { display: none; }
  .ctaband__inner { flex-direction: column; align-items: flex-start; }
  .ratingbar { flex-direction: column; }
}

@media (max-width: 480px) {
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
  /* The block above shortens durations but not delays — without this the
     stars would still wait most of a second before snapping to gold. */
  .review .stars use { transition-delay: 0s !important; }
}

/* ---------- Exit offer ----------
   A single modal, shown once per visitor when they look like they're
   leaving. z-index sits above the header (200) and the mobile call bar. */
.offer {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: grid;
  place-items: center;
  padding: 1.2rem;
}
.offer[hidden] { display: none; }
.offer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 22, 37, .68);
  backdrop-filter: blur(3px);
  animation: offerFade .25s ease both;
}
.offer__card {
  position: relative;
  width: min(430px, 100%);
  max-height: calc(100vh - 2.4rem);
  overflow-y: auto;
  text-align: center;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 2.6rem 2rem 2rem;
  animation: offerRise .3s cubic-bezier(.2, .8, .3, 1) both;
}
/* Yellow band across the top, the same signature as the review cards. */
.offer__card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 5px;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: linear-gradient(90deg, var(--yellow-500), var(--blue-400));
}
.offer__close {
  position: absolute;
  top: .7rem;
  right: .7rem;
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ink-400);
  cursor: pointer;
  transition: background .16s ease, color .16s ease;
}
.offer__close svg { width: 20px; height: 20px; }
.offer__close:hover { background: var(--bg-tint); color: var(--navy-700); }
.offer__eyebrow {
  margin: 0 0 .6rem;
  font-family: var(--font-head);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ink-400);
}
.offer__amount {
  margin: 0;
  font-family: var(--font-head);
  font-weight: 900;
  line-height: 1;
  color: var(--navy-700);
}
.offer__dollars { font-size: 4.2rem; letter-spacing: -.02em; }
.offer__off {
  font-size: 1.6rem;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--blue-400);
}
.offer__title {
  margin: .35em 0 .5em;
  font-size: 1.5rem;
  color: var(--navy-700);
}
.offer__text {
  margin: 0 auto 1.5rem;
  max-width: 34ch;
  color: var(--ink-600);
  font-size: .96rem;
  line-height: 1.65;
}
.offer__cta { width: 100%; }
.offer__dismiss {
  display: block;
  margin: .9rem auto 0;
  border: 0;
  background: none;
  color: var(--ink-400);
  font-family: var(--font-body);
  font-size: .88rem;
  text-decoration: underline;
  cursor: pointer;
}
.offer__dismiss:hover { color: var(--navy-700); }

/* The quote page confirms the discount came across with the visitor. */
.offer-note {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 1.2rem;
  padding: .75rem .9rem;
  border-radius: var(--radius-md);
  background: rgba(20, 143, 215, .08);
  border: 1.5px solid var(--blue-400);
  color: var(--navy-700);
  font-size: .92rem;
  font-weight: 600;
}
.offer-note svg { width: 20px; height: 20px; flex: none; color: var(--blue-400); }

@keyframes offerFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes offerRise {
  from { opacity: 0; transform: translateY(18px) scale(.97); }
  to   { opacity: 1; transform: none; }
}

@media (max-width: 480px) {
  .offer__card { padding: 2.3rem 1.4rem 1.6rem; }
  .offer__dollars { font-size: 3.4rem; }
  .offer__title { font-size: 1.3rem; }
}