:root {
  --navy-950: #050505;
  --navy-900: #050505;
  --navy-850: #0e0e0e;
  --navy-800: #181818;
  --aqua: #ad0c11;
  --aqua-soft: #d30f15;
  --accent-text: #050505;
  --primary-rgb: 5, 5, 5;
  --primary-dark-rgb: 5, 5, 5;
  --primary-mid-rgb: 14, 14, 14;
  --primary-light-rgb: 24, 24, 24;
  --aqua-rgb: 173, 12, 17;
  --aqua-glow-rgb: 173, 12, 17;
  --white: #ffffff;
  --off-white: #f5f6f7;
  --gray-100: #eef1f4;
  --gray-200: #dfe4e9;
  --gray-500: #667382;
  --gray-700: #34404d;
  --text: #0b1d2e;
  --container: 1240px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  color: var(--text);
  background: var(--white);
  font-family: "Inter", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }
img { display: block; width: 100%; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }
.container {
  width: min(calc(100% - 48px), var(--container));
  margin-inline: auto;
}

/* Shared controls */
.button {
  display: inline-flex;
  min-height: 50px;
  align-items: center;
  justify-content: center;
  gap: 13px;
  padding: 0 23px;
  border: 1px solid transparent;
  border-radius: 1px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
  transition: transform 180ms ease, background-color 180ms ease;
}
.button:hover { transform: translateY(-2px); }
.button--aqua { color: var(--navy-950); background: var(--aqua); }
.button--aqua:hover { background: var(--aqua-soft); }
.button--large { min-height: 60px; padding-inline: 31px; }
.button__bolt {
  width: 11px;
  height: 18px;
  flex: 0 0 auto;
  background: var(--navy-950);
  clip-path: polygon(45% 0, 100% 0, 66% 40%, 100% 40%, 27% 100%, 43% 54%, 0 54%);
}
.text-link {
  display: inline-flex;
  gap: 10px;
  align-items: center;
  width: fit-content;
  font-weight: 800;
}
.text-link span { transition: transform 180ms ease; }
.text-link:hover span { transform: translateX(4px); }
.text-link--light { color: var(--white); }
.text-link--dark { color: var(--navy-900); }

/* Header */
.site-header {
  position: sticky;
  top: 0;
  z-index: 60;
  color: var(--white);
  background: rgba(var(--primary-dark-rgb), 0.985);
  border-bottom: 1px solid rgba(255,255,255,0.09);
  box-shadow: 0 3px 14px rgba(0,0,0,.08);
}
.nav {
  display: flex;
  min-height: 90px;
  align-items: center;
  gap: 25px;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}
.brand img {
  width: 61px;
  height: 61px;
  object-fit: contain;
  background: rgba(255,255,255,0.98);
  border-radius: 50%;
  padding: 2px;
}
.brand__text { display: grid; line-height: 1.05; }
.brand__text strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.03rem;
  font-weight: 800;
  text-transform: uppercase;
}
.brand__text small {
  margin-top: 4px;
  color: rgba(255,255,255,0.62);
  font-size: 0.69rem;
  font-weight: 700;
  letter-spacing: 0.075em;
  text-transform: uppercase;
}
.desktop-nav {
  display: flex;
  align-items: center;
  gap: 22px;
}
.desktop-nav a {
  position: relative;
  color: rgba(255,255,255,0.88);
  font-size: 0.86rem;
  font-weight: 700;
}
.desktop-nav a::after {
  position: absolute;
  right: 0;
  bottom: -10px;
  left: 0;
  height: 2px;
  content: "";
  background: var(--aqua);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 180ms ease;
}
.desktop-nav a:hover::after { transform: scaleX(1); }
.nav-phone {
  display: grid;
  gap: 2px;
  padding-left: 4px;
  line-height: 1.05;
}
.nav-phone span {
  color: rgba(255,255,255,0.58);
  font-size: 0.64rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.nav-phone strong { font-size: 0.83rem; }
.nav-cta { min-height: 50px; padding-inline: 21px; }
.mobile-actions, .mobile-menu { display: none; }

/* Full-bleed hero */
.hero {
  position: relative;
  min-height: 625px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  isolation: isolate;
}
.hero__media {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 54% 54%;
  transform: scale(1.01);
}
.hero__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg,
      rgba(var(--primary-dark-rgb),.99) 0%,
      rgba(var(--primary-dark-rgb),.97) 27%,
      rgba(var(--primary-dark-rgb),.87) 42%,
      rgba(var(--primary-dark-rgb),.63) 55%,
      rgba(var(--primary-dark-rgb),.25) 71%,
      rgba(var(--primary-dark-rgb),.055) 100%),
    linear-gradient(180deg,
      rgba(var(--primary-dark-rgb),.05) 0%,
      rgba(var(--primary-dark-rgb),.02) 60%,
      rgba(var(--primary-dark-rgb),.48) 100%);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 625px;
  align-items: center;
  padding-block: 54px 62px;
}
.hero__content { width: min(865px, 72%); }
.hero h1 {
  margin: 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(4.35rem, 5.35vw, 6.15rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: 0.86;
  text-transform: uppercase;
  text-shadow: 0 3px 0 rgba(0,0,0,.22);
}
.hero h1 span { display: block; white-space: nowrap; }
.hero__service-line {
  display: flex;
  flex-wrap: wrap;
  gap: 7px 10px;
  max-width: 680px;
  margin: 27px 0 0;
  color: rgba(255,255,255,.82);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .035em;
  line-height: 1.5;
  text-transform: uppercase;
}
.hero__service-line span {
  color: var(--aqua);
  font-weight: 800;
}
.hero__trust {
  display: grid;
  max-width: 680px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px 44px;
  margin-top: 25px;
}
.hero__trust span {
  position: relative;
  padding-left: 24px;
  color: rgba(255,255,255,.98);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 0.94rem;
  font-weight: 700;
}
.hero__trust span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 11px;
  height: 17px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0, 100% 0, 66% 40%, 100% 40%, 27% 100%, 43% 54%, 0 54%);
}
.hero__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 36px;
}

/* Slim affiliation band */
.proof {
  position: relative;
  z-index: 5;
  background: var(--white);
  border-bottom: 1px solid var(--gray-200);
}
.proof__inner {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: center;
  gap: clamp(40px, 6vw, 92px);
  padding-block: 11px;
}
.proof__brands-label {
  color: var(--gray-500);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  white-space: nowrap;
}
.proof__brands {
  display: flex;
  align-items: center;
  gap: clamp(38px, 5vw, 74px);
}
.brand-mark {
  color: #27323c;
  font-weight: 800;
  letter-spacing: -0.035em;
  white-space: nowrap;
}
.brand-mark--house {
  padding-bottom: 3px;
  border-bottom: 3px solid var(--aqua);
  font-size: 1.32rem;
}
.brand-mark--concrete { font-size: 1.26rem; letter-spacing: 0.02em; }
.brand-mark--outdoor { font-size: 0.94rem; font-style: italic; font-weight: 600; }
.brand-mark--outdoor strong {
  display: inline-block;
  margin-left: 3px;
  font-size: 1.3rem;
  font-style: normal;
}

/* Family story */
.story {
  overflow: hidden;
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-200);
}
.story__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  align-items: center;
  gap: clamp(58px, 6.5vw, 96px);
  padding-block: 110px 126px;
}
.story__visual {
  position: relative;
  min-height: 605px;
  padding: 0 44px 42px 20px;
}
.story__shape {
  position: absolute;
  inset: 42px 72px 12px 0;
  background: var(--aqua);
  clip-path: polygon(0 0, 100% 7%, 92% 100%, 0 100%);
}
.story__photo {
  margin: 0;
  overflow: hidden;
  background: #d5dadd;
}
.story__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.story__photo--main {
  position: relative;
  z-index: 1;
  height: 570px;
  clip-path: polygon(0 0, 100% 6%, 93% 100%, 0 100%);
}
.story__photo--main img { object-position: 48% 46%; }
.story__photo--trailer,
.story__photo--equipment {
  position: absolute;
  z-index: 4;
  border: 8px solid var(--off-white);
  box-shadow: 0 18px 38px rgba(var(--primary-dark-rgb),.18);
}
.story__photo--trailer {
  right: 4px;
  bottom: 0;
  width: 235px;
  height: 174px;
  transform: rotate(1.4deg);
}
.story__photo--trailer img { object-position: 42% 52%; }
.story__photo--equipment {
  top: 18px;
  left: -12px;
  width: 150px;
  height: 182px;
  transform: rotate(-1.5deg);
}
.story__photo--equipment img { object-position: 50% 44%; }
.story__photo--trailer::after,
.story__photo--equipment::after {
  position: absolute;
  width: 50px;
  height: 7px;
  content: "";
  background: var(--aqua);
}
.story__photo--trailer::after { right: 0; bottom: 0; }
.story__photo--equipment::after { top: 0; left: 0; }

.story__content { max-width: 535px; }
.story h2,
.services h2 {
  margin: 0;
  font-family: "Archivo", Arial, sans-serif;
  font-weight: 800;
  letter-spacing: -0.05em;
  line-height: 0.98;
}
.story h2 {
  color: var(--navy-900);
  font-size: clamp(3rem, 4.15vw, 4.55rem);
}
.story__content > p {
  margin: 24px 0 0;
  color: var(--gray-700);
  font-size: 0.98rem;
  line-height: 1.75;
}
.story__proof {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin: 33px 0 30px;
  border-top: 1px solid #cfd6dc;
  border-bottom: 1px solid #cfd6dc;
}
.story__proof > div {
  min-width: 0;
  padding: 22px 18px;
}
.story__proof > div:first-child { padding-left: 0; }
.story__proof > div + div { border-left: 1px solid #d7dde2; }
.story__proof strong {
  display: block;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(1.4rem, 2vw, 2rem);
  font-weight: 800;
  line-height: 1;
}
.story__proof strong span { color: var(--aqua); }
.story__proof small {
  display: block;
  margin-top: 8px;
  color: var(--gray-500);
  font-size: 0.69rem;
  font-weight: 600;
  line-height: 1.45;
  text-transform: uppercase;
}

/* Dark visual services */
.services {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 50% 0%, rgba(var(--primary-light-rgb),.78), transparent 42%),
    var(--navy-950);
  padding-block: 116px 126px;
  isolation: isolate;
}

/* Large ambient light cast: the bulb now brightens the section, not just itself. */
.services::before {
  position: absolute;
  z-index: 0;
  top: -220px;
  left: -225px;
  width: min(84vw, 1280px);
  height: 1020px;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at 30% 27%,
      rgba(225,255,255,.58) 0%,
      rgba(173, 12, 17,.39) 16%,
      rgba(var(--aqua-rgb),.25) 31%,
      rgba(173, 12, 17,.16) 47%,
      rgba(104,79,44,.09) 61%,
      transparent 77%
    );
  filter: blur(4px);
  transform: scale(.88);
  transform-origin: 29% 24%;
  transition: opacity 380ms ease, transform 440ms ease;
}
.services:hover::before,
.services.is-lit::before {
  opacity: 1;
  transform: scale(1);
}
.services__grid-lines {
  position: absolute;
  z-index: -1;
  inset: 250px 0 0;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.30) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.30) 1px, transparent 1px);
  background-size: 70px 70px;
  mask-image: linear-gradient(180deg, transparent 0%, #000 14%, #000 78%, transparent 100%);
  transition: opacity 360ms ease;
}
.services:hover .services__grid-lines,
.services.is-lit .services__grid-lines {
  opacity: .20;
}
.services__inner {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 56px), 1380px);
}
.services__heading {
  max-width: 980px;
  margin: 0 auto 58px;
  text-align: center;
}
.services h2 {
  color: var(--white);
  font-size: clamp(3.15rem, 4.25vw, 4.7rem);
}
.services h2 span { display: block; }
.services h2 span:first-child { white-space: nowrap; }
.services h2 span:last-child { color: var(--aqua); }
.services__heading p {
  max-width: 660px;
  margin: 25px auto 0;
  color: rgba(255,255,255,.68);
  font-size: 0.98rem;
  line-height: 1.72;
}

/* Hanging bulb */
.services__bulb {
  position: absolute;
  z-index: 4;
  top: 0;
  left: max(42px, calc((100vw - var(--container)) / 2 - 65px));
  width: 120px;
  height: 255px;
  pointer-events: none;
}
.bulb__cord {
  position: absolute;
  top: 0;
  left: 58px;
  width: 4px;
  height: 100px;
  background: #171d24;
}
.bulb__socket {
  position: absolute;
  top: 92px;
  left: 43px;
  width: 34px;
  height: 52px;
  border-radius: 8px 8px 5px 5px;
  background: linear-gradient(90deg, #252c34, #11161c 52%, #303943);
  box-shadow: inset 0 -8px 0 rgba(255,255,255,.05);
}
.bulb__glass {
  position: absolute;
  z-index: 2;
  top: 132px;
  left: 37px;
  width: 46px;
  height: 72px;
  border: 2px solid rgba(255,255,255,.28);
  border-radius: 46% 46% 52% 52% / 38% 38% 62% 62%;
  background: rgba(215,224,227,.12);
  box-shadow: inset 0 0 14px rgba(255,255,255,.06);
  transition:
    background 260ms ease,
    border-color 260ms ease,
    box-shadow 260ms ease,
    filter 260ms ease;
}
.bulb__glass::before {
  position: absolute;
  bottom: -11px;
  left: 12px;
  width: 18px;
  height: 14px;
  content: "";
  border-radius: 0 0 7px 7px;
  background: #2a3138;
}
.bulb__filament {
  position: absolute;
  top: 35px;
  left: 15px;
  width: 13px;
  height: 15px;
  border: 2px solid rgba(255,255,255,.30);
  border-top: 0;
  border-radius: 0 0 9px 9px;
  transition: border-color 260ms ease, filter 260ms ease;
}
.bulb__glow {
  position: absolute;
  z-index: 1;
  top: 96px;
  left: -13px;
  width: 145px;
  height: 145px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle, rgba(var(--aqua-glow-rgb),.62) 0%, rgba(var(--aqua-rgb),.28) 38%, transparent 73%);
  filter: blur(8px);
  transition: opacity 280ms ease, transform 280ms ease;
  transform: scale(.72);
}
.services:hover .bulb__glass,
.services.is-lit .bulb__glass {
  border-color: rgba(118,235,238,.86);
  background: rgba(173, 12, 17,.88);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.86),
    0 0 24px rgba(81,222,225,.95),
    0 0 62px rgba(var(--aqua-rgb),.66),
    0 0 105px rgba(var(--aqua-rgb),.28);
  filter: brightness(1.1);
}
.services:hover .bulb__filament,
.services.is-lit .bulb__filament {
  border-color: #fff6c3;
  filter: drop-shadow(0 0 4px #fff4a2);
}
.services:hover .bulb__glow,
.services.is-lit .bulb__glow {
  opacity: 1;
  transform: scale(1);
}

/* Services image panels */
.service-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.service-feature { min-width: 0; }
.service-feature__image {
  position: relative;
  display: block;
  height: 485px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.13);
  background: var(--navy-850);
}
.service-feature__image img {
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease, filter 300ms ease;
}
.service-feature:nth-child(1) .service-feature__image img { object-position: 32% 50%; }
.service-feature:nth-child(2) .service-feature__image img { object-position: 50% 43%; }
.service-feature:nth-child(3) .service-feature__image img { object-position: 50% 47%; }
.service-feature__image::after {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.04) 26%, rgba(var(--primary-dark-rgb),.32) 54%, rgba(var(--primary-dark-rgb),.96) 100%);
  transition: background 280ms ease;
}
.service-feature__overlay {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  padding: 30px 28px 28px;
  transform: translateY(14px);
  transition: transform 300ms ease;
}
.service-feature h3 {
  margin: 0;
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.72rem;
  font-weight: 800;
  letter-spacing: -0.035em;
  transform: translateY(0);
  transition: transform 280ms ease;
}
.service-feature h3::after {
  display: block;
  width: 54px;
  height: 4px;
  margin-top: 12px;
  content: "";
  background: var(--aqua);
  transition: width 280ms ease;
}
.service-feature p {
  max-width: 340px;
  margin: 12px 0 15px;
  color: rgba(255,255,255,.72);
  font-size: .83rem;
  line-height: 1.55;
  opacity: .88;
  transition: opacity 240ms ease;
}
.service-feature__link {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--white);
  font-size: .79rem;
  font-weight: 800;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 250ms ease, transform 250ms ease;
}
.service-feature__link b {
  color: var(--aqua);
  font-size: 1rem;
  transition: transform 180ms ease;
}
.service-feature__image:hover img {
  transform: scale(1.04);
  filter: saturate(1.08) contrast(1.05);
}
.service-feature__image:hover::after {
  background:
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.07) 17%, rgba(var(--primary-dark-rgb),.38) 45%, rgba(var(--primary-dark-rgb),.995) 100%);
}
.service-feature__image:hover .service-feature__overlay { transform: translateY(0); }
.service-feature__image:hover h3 { transform: translateY(-3px); }
.service-feature__image:hover h3::after { width: 112px; }
.service-feature__image:hover p { opacity: 1; color: rgba(255,255,255,.86); }
.service-feature__image:hover .service-feature__link {
  opacity: 1;
  transform: translateY(0);
}
.service-feature__link:hover b { transform: translateX(4px); }

.secondary-services {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  margin-top: 52px;
  border-top: 1px solid rgba(255,255,255,.16);
  border-bottom: 1px solid rgba(255,255,255,.16);
}
.secondary-services a {
  display: flex;
  min-height: 82px;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 0 28px;
  color: rgba(255,255,255,.92);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .92rem;
  font-weight: 800;
  transition: background-color 180ms ease, color 180ms ease;
}
.secondary-services a:first-child { padding-left: 0; }
.secondary-services a + a { border-left: 1px solid rgba(255,255,255,.16); }
.secondary-services a span:last-child {
  color: var(--aqua);
  transition: transform 180ms ease;
}
.secondary-services a:hover { background: rgba(255,255,255,.045); }
.secondary-services a:hover span:last-child { transform: translateX(5px); }



/* ==========================================================
   Standby Soft-Wash Feature
   ========================================================== */
.softwash-feature {
  position: relative;
  overflow: hidden;
  background: var(--off-white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
}
.softwash-feature__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
  align-items: center;
  gap: clamp(68px, 7vw, 110px);
  padding-block: 118px 128px;
}
.softwash-feature__visual {
  position: relative;
  min-height: 590px;
  padding: 0 48px 42px 24px;
}
.softwash-feature__shape {
  position: absolute;
  inset: 32px 68px 0 0;
  background: var(--aqua);
  clip-path: polygon(7% 0, 100% 5%, 92% 100%, 0 94%);
}
.softwash-feature__photo {
  margin: 0;
  overflow: hidden;
  background: #d8dde1;
}
.softwash-feature__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.softwash-feature__photo--main {
  position: relative;
  z-index: 1;
  height: 555px;
  clip-path: polygon(0 0, 100% 5%, 94% 100%, 5% 96%);
}
.softwash-feature__photo--main img { object-position: 47% 50%; }
.softwash-feature__photo--detail {
  position: absolute;
  z-index: 4;
  right: 0;
  bottom: 0;
  width: 250px;
  height: 175px;
  border: 8px solid var(--off-white);
  box-shadow: 0 18px 42px rgba(var(--primary-dark-rgb),.18);
  transform: rotate(1.2deg);
}
.softwash-feature__photo--detail img { object-position: 62% 50%; }
.softwash-feature__photo--detail::after {
  position: absolute;
  right: 0;
  bottom: 0;
  width: 58px;
  height: 7px;
  content: "";
  background: var(--aqua);
}
.softwash-feature__content { max-width: 545px; }
.softwash-feature h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(3.15rem, 4.2vw, 4.65rem);
  font-weight: 800;
  letter-spacing: -0.055em;
  line-height: .98;
}
.softwash-feature__content > p {
  margin: 27px 0 0;
  color: var(--gray-700);
  font-size: 1rem;
  line-height: 1.78;
}
.softwash-feature__points {
  display: grid;
  margin-top: 31px;
  border-top: 1px solid #cfd6dc;
}
.softwash-feature__points span {
  position: relative;
  min-height: 56px;
  display: flex;
  align-items: center;
  padding-left: 25px;
  border-bottom: 1px solid #cfd6dc;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 800;
}
.softwash-feature__points span::before {
  position: absolute;
  left: 0;
  width: 10px;
  height: 16px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0, 100% 0, 66% 40%, 100% 40%, 27% 100%, 43% 54%, 0 54%);
}
.softwash-feature__actions {
  display: flex;
  align-items: center;
  gap: 25px;
  margin-top: 33px;
}

/* ==========================================================
   Projects / Recent Work — dual-direction field reel
   ========================================================== */
.projects {
  position: relative;
  overflow: hidden;
  color: var(--navy-900);
  background: var(--white);
  border-top: 1px solid var(--gray-200);
  border-bottom: 1px solid var(--gray-200);
  padding-block: 92px 104px;
}

.projects__heading {
  text-align: center;
  margin-bottom: 48px;
}

.projects h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.6rem, 5.25vw, 5.7rem);
  font-weight: 800;
  letter-spacing: -0.018em;
  line-height: .92;
  text-transform: uppercase;
}

.projects__heading-line {
  display: block;
  width: 76px;
  height: 5px;
  margin: 20px auto 0;
  background: var(--aqua);
}

.project-reel {
  position: relative;
  display: grid;
  gap: 14px;
  width: 100%;
  overflow: hidden;
}

.project-reel::before,
.project-reel::after {
  position: absolute;
  z-index: 4;
  top: 0;
  bottom: 0;
  width: clamp(24px, 4vw, 78px);
  content: "";
  pointer-events: none;
}

.project-reel::before {
  left: 0;
  background: linear-gradient(90deg, var(--white), rgba(255,255,255,0));
}

.project-reel::after {
  right: 0;
  background: linear-gradient(270deg, var(--white), rgba(255,255,255,0));
}

.project-reel__row {
  width: 100%;
  overflow: hidden;
}

.project-reel__track {
  display: flex;
  width: max-content;
  will-change: transform;
}

.project-reel__group {
  display: flex;
  flex-shrink: 0;
  gap: 14px;
  padding-right: 14px;
}

.project-reel__row--left .project-reel__track {
  animation: clearpeak-reel-left 40s linear infinite;
}

.project-reel__row--right .project-reel__track {
  transform: translateX(-50%);
  animation: clearpeak-reel-right 45s linear infinite;
}

.project-reel:hover .project-reel__track {
  animation-play-state: paused;
}

.project-reel__item {
  position: relative;
  flex: 0 0 auto;
  width: 390px;
  height: 330px;
  margin: 0;
  overflow: hidden;
  background: var(--gray-100);
}

.project-reel__item--extra-wide { width: 530px; }
.project-reel__item--wide { width: 460px; }
.project-reel__item--medium { width: 390px; }
.project-reel__item--narrow { width: 315px; }

.project-reel__item--short {
  height: 265px;
}

.project-reel__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 420ms ease, filter 320ms ease;
}

.project-reel__item:nth-child(1) img { object-position: 48% 50%; }
.project-reel__item:nth-child(2) img { object-position: 58% 50%; }
.project-reel__item:nth-child(3) img { object-position: 50% 45%; }
.project-reel__item:nth-child(4) img { object-position: 50% 46%; }
.project-reel__item:nth-child(5) img { object-position: 49% 43%; }

.project-reel__item::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(180deg, transparent 46%, rgba(var(--primary-dark-rgb),.12) 62%, rgba(var(--primary-dark-rgb),.86) 100%);
  opacity: .45;
  transition: opacity 300ms ease;
}

.project-reel__item figcaption {
  position: absolute;
  z-index: 2;
  right: 0;
  bottom: 0;
  left: 0;
  display: grid;
  gap: 4px;
  padding: 22px 24px;
  color: var(--white);
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 260ms ease, transform 280ms ease;
}

.project-reel__item figcaption strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.025em;
}

.project-reel__item figcaption span {
  color: rgba(255,255,255,.72);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.project-reel__item:hover img {
  transform: scale(1.035);
  filter: saturate(1.05) contrast(1.03);
}

.project-reel__item:hover::after {
  opacity: 1;
}

.project-reel__item:hover figcaption {
  opacity: 1;
  transform: translateY(0);
}

@keyframes clearpeak-reel-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes clearpeak-reel-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@media (max-width: 860px) {
  .projects {
    padding-block: 72px 82px;
  }

  .projects__heading {
    margin-bottom: 36px;
  }

  .projects h2 {
    font-size: clamp(3rem, 14vw, 4.25rem);
  }

  .projects__heading-line {
    width: 62px;
    height: 4px;
    margin-top: 16px;
  }

  .project-reel {
    gap: 10px;
  }

  .project-reel__group {
    gap: 10px;
    padding-right: 10px;
  }

  .project-reel__item {
    width: 295px;
    height: 245px;
  }

  .project-reel__item--extra-wide { width: 355px; }
  .project-reel__item--wide { width: 330px; }
  .project-reel__item--medium { width: 295px; }
  .project-reel__item--narrow { width: 245px; }

  .project-reel__item--short {
    height: 205px;
  }

  .project-reel__row--left .project-reel__track {
    animation-duration: 34s;
  }

  .project-reel__row--right .project-reel__track {
    animation-duration: 39s;
  }

  .project-reel::before,
  .project-reel::after {
    width: 22px;
  }

  .project-reel__item figcaption {
    padding: 17px 18px;
  }

  .project-reel__item figcaption strong {
    font-size: .92rem;
  }
}

@media (max-width: 420px) {
  .projects h2 {
    font-size: clamp(2.75rem, 13.5vw, 3.65rem);
  }

  .project-reel__item {
    width: 260px;
    height: 220px;
  }

  .project-reel__item--extra-wide { width: 315px; }
  .project-reel__item--wide { width: 295px; }
  .project-reel__item--medium { width: 260px; }
  .project-reel__item--narrow { width: 220px; }

  .project-reel__item--short {
    height: 185px;
  }
}

@media (hover: none) {
  .project-reel__item figcaption {
    opacity: 0;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .project-reel__track {
    animation: none !important;
    transform: none !important;
  }

  .project-reel__row {
    overflow-x: auto;
    scrollbar-width: thin;
  }

  .project-reel__group[aria-hidden="true"] {
    display: none;
  }
}



/* ==========================================================
   Short Call / Text Conversion Band
   ========================================================== */
.contact-band {
  position: relative;
  overflow: hidden;
  min-height: 300px;
  color: var(--white);
  background: var(--navy-850);
  isolation: isolate;
}
.contact-band__media {
  position: absolute;
  z-index: -2;
  inset: 0 0 0 43%;
}
.contact-band__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 61% 52%;
}
.contact-band__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, var(--navy-850) 0%, rgba(var(--primary-mid-rgb),.80) 22%, rgba(var(--primary-mid-rgb),.18) 72%, rgba(var(--primary-mid-rgb),.12) 100%),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.08), rgba(var(--primary-dark-rgb),.42));
}
.contact-band__accent {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -60px;
  width: 34%;
  height: 100%;
  background: rgba(var(--aqua-rgb),.92);
  clip-path: polygon(33% 0, 100% 0, 100% 100%, 0 100%);
  mix-blend-mode: multiply;
}
.contact-band__inner {
  display: grid;
  min-height: 300px;
  grid-template-columns: minmax(0, .82fr) minmax(520px, 1.18fr);
  align-items: center;
  gap: 70px;
  padding-block: 44px;
}
.contact-band__copy span {
  display: block;
  margin-bottom: 7px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.contact-band h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3rem, 4.1vw, 4.7rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .92;
  text-transform: uppercase;
}
.contact-band__copy p {
  max-width: 455px;
  margin: 16px 0 0;
  color: rgba(255,255,255,.72);
  font-size: .92rem;
  line-height: 1.62;
}
.contact-band__actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
}
.contact-action {
  display: flex;
  min-width: 235px;
  min-height: 74px;
  align-items: center;
  gap: 14px;
  padding: 12px 20px;
  color: var(--navy-950);
  background: var(--aqua);
  box-shadow: 0 12px 26px rgba(0,0,0,.12);
  transition: transform 180ms ease, background-color 180ms ease;
}
.contact-action:hover {
  transform: translateY(-3px);
  background: var(--aqua-soft);
}
.contact-action__icon {
  display: grid;
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  place-items: center;
  font-size: 1.35rem;
  font-weight: 800;
}
.contact-action__icon--text {
  width: 43px;
  height: 30px;
  border-radius: 50%;
  color: var(--aqua);
  background: var(--navy-950);
  font-size: .58rem;
  letter-spacing: .03em;
}
.contact-action small,
.contact-action strong {
  display: block;
  font-family: "Archivo", Arial, sans-serif;
}
.contact-action small {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.contact-action strong {
  margin-top: 3px;
  font-size: .88rem;
}

/* ==========================================================
   Reviews / Reputation
   ========================================================== */
.reviews {
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-200);
}
.reviews__inner {
  padding-block: 112px 122px;
}
.reviews__heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, .62fr);
  align-items: end;
  gap: 70px;
  margin-bottom: 52px;
}
.reviews h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(3rem, 4.2vw, 4.6rem);
  font-weight: 800;
  letter-spacing: -.052em;
  line-height: .98;
}
.reviews__heading p {
  margin: 0 0 5px;
  color: var(--gray-700);
  font-size: .96rem;
  line-height: 1.72;
}
.reviews__grid {
  display: grid;
  grid-template-columns: 1.35fr 1fr 1fr;
  border-top: 1px solid #ccd4db;
  border-bottom: 1px solid #ccd4db;
}
.review-feature {
  position: relative;
  min-height: 305px;
  padding: 42px 36px 34px;
}
.review-feature + .review-feature {
  border-left: 1px solid #ccd4db;
}
.review-feature__mark {
  display: block;
  height: 44px;
  color: var(--aqua);
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: .8;
}
.review-feature p {
  margin: 21px 0 31px;
  color: var(--navy-900);
  font-size: .95rem;
  font-weight: 500;
  line-height: 1.72;
}
.review-feature--large p {
  font-size: 1.08rem;
}
.review-feature footer {
  display: grid;
  gap: 4px;
  margin-top: auto;
}
.review-feature footer strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: .82rem;
  font-weight: 800;
}
.review-feature footer span {
  color: var(--gray-500);
  font-size: .72rem;
  font-weight: 600;
}
.reviews__link {
  margin-top: 31px;
}

/* ==========================================================
   Three-Step Process
   ========================================================== */
.process {
  background: var(--white);
}
.process__inner {
  padding-block: 108px 116px;
}
.process__heading {
  max-width: 760px;
  margin: 0 auto 68px;
  text-align: center;
}
.process h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.4rem, 4.8vw, 5.2rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .92;
  text-transform: uppercase;
}
.process__heading p {
  max-width: 610px;
  margin: 20px auto 0;
  color: var(--gray-500);
  font-size: .94rem;
  line-height: 1.68;
}
.process__steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
.process-step {
  position: relative;
  padding: 0 35px;
}
.process-step:first-child { padding-left: 0; }
.process-step:last-child { padding-right: 0; }
.process-step + .process-step {
  border-left: 1px solid var(--gray-200);
}
.process-step__number {
  display: block;
  color: var(--aqua);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 3.6rem;
  font-weight: 800;
  line-height: .9;
}
.process-step__line {
  width: 100%;
  height: 1px;
  margin: 22px 0 24px;
  background: var(--gray-200);
  position: relative;
}
.process-step__line::before {
  position: absolute;
  top: -2px;
  left: 0;
  width: 58px;
  height: 5px;
  content: "";
  background: var(--aqua);
}
.process-step h3 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -.035em;
}
.process-step p {
  max-width: 330px;
  margin: 13px 0 0;
  color: var(--gray-500);
  font-size: .86rem;
  line-height: 1.65;
}
.process__cta {
  display: flex;
  justify-content: center;
  margin-top: 52px;
}

/* ==========================================================
   Service Area
   ========================================================== */
.service-area {
  position: relative;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  isolation: isolate;
}
.service-area__grid {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .11;
  background-image:
    linear-gradient(rgba(255,255,255,.25) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.25) 1px, transparent 1px);
  background-size: 72px 72px;
}
.service-area__state-word {
  position: absolute;
  z-index: -1;
  right: -30px;
  bottom: -48px;
  color: rgba(255,255,255,.035);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(12rem, 25vw, 31rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .7;
  pointer-events: none;
}
.service-area__inner {
  display: grid;
  min-height: 540px;
  grid-template-columns: minmax(0, 1fr) minmax(350px, .65fr);
  align-items: center;
  gap: 90px;
  padding-block: 96px;
}
.service-area__copy {
  max-width: 690px;
}
.service-area__kicker {
  display: block;
  margin-bottom: 13px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.service-area h2 {
  margin: 0;
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(3.2rem, 4.6vw, 5rem);
  font-weight: 800;
  letter-spacing: -.055em;
  line-height: .98;
}
.service-area__copy > p {
  max-width: 630px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.66);
  font-size: .96rem;
  line-height: 1.75;
}
.service-area__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  margin: 31px 0 30px;
}
.service-area__proof span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.92);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
}
.service-area__proof span::before {
  position: absolute;
  top: .45em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}
.service-area__callout {
  position: relative;
  padding: 42px 40px;
  border: 1px solid rgba(255,255,255,.18);
  background: rgba(255,255,255,.045);
  backdrop-filter: blur(5px);
}
.service-area__callout::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 74px;
  height: 6px;
  content: "";
  background: var(--aqua);
}
.service-area__callout strong {
  display: block;
  color: var(--aqua);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(2.8rem, 4.5vw, 4.5rem);
  font-weight: 800;
  line-height: .9;
}
.service-area__callout p {
  margin: 20px 0 23px;
  color: rgba(255,255,255,.68);
  font-size: .86rem;
  line-height: 1.65;
}
.service-area__callout a {
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
}

/* ==========================================================
   FAQ
   ========================================================== */
.faq {
  background: var(--off-white);
  border-bottom: 1px solid var(--gray-200);
}
.faq__inner {
  display: grid;
  grid-template-columns: minmax(300px, .65fr) minmax(0, 1.15fr);
  gap: 90px;
  padding-block: 108px 118px;
}
.faq__heading {
  position: sticky;
  top: 125px;
  align-self: start;
}
.faq h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(3rem, 4vw, 4.35rem);
  font-weight: 800;
  letter-spacing: -.05em;
  line-height: .98;
}
.faq__heading p {
  max-width: 380px;
  margin: 22px 0 0;
  color: var(--gray-500);
  font-size: .93rem;
  line-height: 1.68;
}
.faq__list {
  border-top: 1px solid #cfd6dc;
}
.faq details {
  border-bottom: 1px solid #cfd6dc;
}
.faq summary {
  position: relative;
  padding: 25px 48px 25px 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1rem;
  font-weight: 800;
  list-style: none;
  cursor: pointer;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  position: absolute;
  top: 50%;
  right: 4px;
  color: var(--aqua);
  content: "+";
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.6rem;
  font-weight: 700;
  transform: translateY(-50%);
}
.faq details[open] summary::after { content: "−"; }
.faq details p {
  max-width: 690px;
  margin: -4px 0 24px;
  color: var(--gray-500);
  font-size: .88rem;
  line-height: 1.72;
}

/* ==========================================================
   Final CTA
   ========================================================== */
.final-cta {
  position: relative;
  min-height: 540px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-950);
  isolation: isolate;
}
.final-cta__media {
  position: absolute;
  z-index: -2;
  inset: 0;
}
.final-cta__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 57% 50%;
}
.final-cta__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg, rgba(var(--primary-dark-rgb),.99) 0%, rgba(var(--primary-dark-rgb),.95) 34%, rgba(var(--primary-dark-rgb),.72) 58%, rgba(var(--primary-dark-rgb),.28) 100%),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.06), rgba(var(--primary-dark-rgb),.38));
}
.final-cta__inner {
  display: flex;
  min-height: 540px;
  align-items: center;
  padding-block: 70px;
}
.final-cta__content {
  max-width: 760px;
}
.final-cta h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(4rem, 6vw, 6.6rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .86;
  text-transform: uppercase;
}
.final-cta__content > p {
  max-width: 560px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.72);
  font-size: 1rem;
  line-height: 1.7;
}
.final-cta__actions {
  display: flex;
  align-items: center;
  gap: 26px;
  margin-top: 34px;
}
.final-cta__text-link {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: "Archivo", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 800;
}
.final-cta__text-link span { color: var(--aqua); }
.final-cta__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 28px;
  margin-top: 29px;
}
.final-cta__trust span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.76);
  font-size: .74rem;
  font-weight: 700;
}
.final-cta__trust span::before {
  position: absolute;
  top: .42em;
  left: 0;
  width: 6px;
  height: 6px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

/* ==========================================================
   Footer
   ========================================================== */
.site-footer {
  color: var(--white);
  background: #030d16;
}
.site-footer__top {
  display: grid;
  grid-template-columns: 1.45fr .7fr .7fr 1fr;
  gap: 62px;
  padding-block: 70px 62px;
}
.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 12px;
}
.footer-brand img {
  width: 56px;
  height: 56px;
  object-fit: contain;
  padding: 2px;
  border-radius: 50%;
  background: var(--white);
}
.footer-brand span { display: grid; }
.footer-brand strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: .98rem;
  font-weight: 800;
  text-transform: uppercase;
}
.footer-brand small {
  margin-top: 3px;
  color: rgba(255,255,255,.5);
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .075em;
  text-transform: uppercase;
}
.site-footer__brand p {
  max-width: 390px;
  margin: 20px 0 0;
  color: rgba(255,255,255,.48);
  font-size: .8rem;
  line-height: 1.7;
}
.site-footer__column {
  display: grid;
  align-content: start;
  gap: 11px;
}
.site-footer__column > strong {
  margin-bottom: 8px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.site-footer__column a,
.site-footer__column span {
  color: rgba(255,255,255,.66);
  font-size: .77rem;
  line-height: 1.5;
}
.site-footer__column a:hover { color: var(--white); }
.site-footer__bottom {
  display: flex;
  min-height: 68px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  color: rgba(255,255,255,.4);
  border-top: 1px solid rgba(255,255,255,.09);
  font-size: .7rem;
}
.site-footer__bottom a {
  color: rgba(255,255,255,.68);
  font-weight: 700;
}

/* Lower homepage responsiveness */

.wash-demo__mist--2,
.wash-demo__mist--5,
.wash-demo__mist--8,
.wash-demo__mist--11 {
  animation-duration: 1.14s;
  animation-delay: .05s;
}

.wash-demo__mist--3,
.wash-demo__mist--6,
.wash-demo__mist--9,
.wash-demo__mist--12 {
  animation-duration: .98s;
  animation-delay: .11s;
}

.wash-demo__mist--4,
.wash-demo__mist--7,
.wash-demo__mist--10 {
  animation-duration: 1.20s;
  animation-delay: .08s;
}

@media (max-width: 1120px) {
  .contact-band__inner {
    grid-template-columns: .9fr 1.1fr;
    gap: 45px;
  }
  .contact-band__actions {
    gap: 10px;
  }
  .contact-action {
    min-width: 205px;
    padding-inline: 16px;
  }
  .reviews__heading {
    gap: 50px;
  }
  .service-area__inner {
    gap: 58px;
  }
  .site-footer__top {
    gap: 40px;
  }
}

@media (max-width: 860px) {
  .contact-band {
    min-height: 0;
  }
  .contact-band__media {
    inset: 0;
  }
  .contact-band__media::after {
    background:
      linear-gradient(180deg, rgba(var(--primary-dark-rgb),.68) 0%, rgba(var(--primary-dark-rgb),.91) 52%, rgba(var(--primary-dark-rgb),.99) 100%);
  }
  .contact-band__accent {
    top: auto;
    right: -20px;
    bottom: 0;
    width: 62%;
    height: 18px;
    clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
  }
  .contact-band__inner {
    display: block;
    min-height: 0;
    padding-block: 68px 75px;
  }
  .contact-band__copy {
    max-width: 520px;
  }
  .contact-band h2 {
    font-size: clamp(3rem, 14vw, 4.25rem);
  }
  .contact-band__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    margin-top: 31px;
  }
  .contact-action {
    min-width: 0;
    width: 100%;
  }

  .reviews__inner {
    padding-block: 78px 86px;
  }
  .reviews__heading {
    display: block;
    margin-bottom: 37px;
  }
  .reviews h2 {
    font-size: clamp(2.75rem, 11.6vw, 3.8rem);
  }
  .reviews__heading p {
    margin-top: 19px;
  }
  .reviews__grid {
    grid-template-columns: 1fr;
  }
  .review-feature {
    min-height: 0;
    padding: 31px 4px 29px;
  }
  .review-feature + .review-feature {
    border-top: 1px solid #ccd4db;
    border-left: 0;
  }
  .review-feature--large p {
    font-size: 1rem;
  }

  .process__inner {
    padding-block: 76px 84px;
  }
  .process__heading {
    margin-bottom: 46px;
  }
  .process h2 {
    font-size: clamp(3rem, 13vw, 4rem);
  }
  .process__steps {
    grid-template-columns: 1fr;
  }
  .process-step,
  .process-step:first-child,
  .process-step:last-child {
    padding: 27px 0;
  }
  .process-step + .process-step {
    border-top: 1px solid var(--gray-200);
    border-left: 0;
  }
  .process-step__line {
    max-width: 290px;
    margin-block: 16px 19px;
  }
  .process-step p {
    max-width: 520px;
  }
  .process__cta {
    justify-content: stretch;
    margin-top: 33px;
  }
  .process__cta .button {
    width: 100%;
  }

  .service-area__state-word {
    right: -10px;
    bottom: 5px;
    font-size: 46vw;
  }
  .service-area__inner {
    display: block;
    min-height: 0;
    padding-block: 82px 88px;
  }
  .service-area h2 {
    font-size: clamp(2.9rem, 12vw, 3.9rem);
  }
  .service-area__callout {
    margin-top: 45px;
    padding: 32px 27px;
  }
  .service-area__callout strong {
    font-size: clamp(3rem, 15vw, 4.3rem);
  }

  .faq__inner {
    display: block;
    padding-block: 78px 86px;
  }
  .faq__heading {
    position: static;
    margin-bottom: 38px;
  }
  .faq h2 {
    font-size: clamp(2.8rem, 11.7vw, 3.8rem);
  }
  .faq summary {
    padding-block: 22px;
    font-size: .92rem;
  }

  .final-cta {
    min-height: 560px;
  }
  .final-cta__media img {
    object-position: 72% 50%;
  }
  .final-cta__media::after {
    background:
      linear-gradient(180deg, rgba(var(--primary-dark-rgb),.58) 0%, rgba(var(--primary-dark-rgb),.84) 45%, rgba(var(--primary-dark-rgb),.99) 100%),
      linear-gradient(90deg, rgba(var(--primary-dark-rgb),.62), rgba(var(--primary-dark-rgb),.28));
  }
  .final-cta__inner {
    min-height: 560px;
    align-items: flex-end;
    padding-block: 64px;
  }
  .final-cta h2 {
    font-size: clamp(3.6rem, 16vw, 5.1rem);
  }
  .final-cta__actions {
    display: grid;
    gap: 16px;
  }
  .final-cta__actions .button {
    width: 100%;
  }
  .final-cta__text-link {
    justify-content: center;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 42px 34px;
    padding-block: 54px 48px;
  }
  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 520px) {
  .contact-band__actions {
    grid-template-columns: 1fr;
  }
  .contact-action {
    min-height: 69px;
  }
  .service-area__proof {
    display: grid;
    gap: 12px;
  }
  .final-cta__trust {
    display: grid;
    gap: 12px;
  }
  .site-footer__top {
    grid-template-columns: 1fr;
  }
  .site-footer__brand {
    grid-column: auto;
  }
  .site-footer__bottom {
    display: grid;
    justify-content: start;
    padding-block: 20px;
  }
}


/* legacy prototype-end styles removed */
.mobile-sticky-cta { display: none; }

@media (max-width: 1120px) {
  .desktop-nav { gap: 17px; }
  .desktop-nav a { font-size: 0.79rem; }
  .nav-phone { display: none; }
  .hero__content { width: min(790px, 72%); }
  .hero h1 { font-size: clamp(3.95rem, 5.15vw, 5.35rem); }
  .hero__media img { object-position: 58% 54%; }
  .story__inner { gap: 52px; }
  .services__bulb { left: 24px; opacity: .85; }
}

@media (max-width: 860px) {
  body { padding-bottom: 68px; }
  .container { width: min(calc(100% - 38px), var(--container)); }

  .site-header { position: sticky; top: 0; }
  .nav { min-height: 70px; gap: 14px; }
  .brand img { width: 46px; height: 46px; }
  .brand__text { display: none; }
  .desktop-nav, .nav-cta, .nav-phone { display: none; }
  .mobile-actions { display: flex; align-items: center; gap: 12px; }
  .mobile-call {
    color: var(--white);
    font-family: "Archivo", Arial, sans-serif;
    font-size: 0.76rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .menu-toggle {
    display: grid;
    width: 48px;
    height: 48px;
    place-content: center;
    gap: 5px;
    border: 1px solid rgba(255,255,255,.18);
    border-radius: 0;
    background: var(--navy-800);
    cursor: pointer;
  }
  .menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--white);
  }
  .mobile-menu {
    position: absolute;
    top: 100%;
    right: 0;
    left: 0;
    display: block;
    color: var(--white);
    background: var(--navy-950);
    border-top: 1px solid rgba(255,255,255,.08);
    box-shadow: 0 18px 35px rgba(0,0,0,.28);
  }
  .mobile-menu[hidden] { display: none; }
  .mobile-menu__inner { display: grid; padding-block: 12px 20px; }
  .mobile-menu__inner > a:not(.button) {
    padding: 15px 0;
    border-bottom: 1px solid rgba(255,255,255,.09);
    font-weight: 700;
  }
  .mobile-menu .button { margin-top: 18px; }

  .hero { min-height: 650px; }
  .hero__media img {
    object-position: 70% 50%;
    transform: scale(1.025);
  }
  .hero__media::after {
    background:
      linear-gradient(180deg,
        rgba(var(--primary-dark-rgb),.73) 0%,
        rgba(var(--primary-dark-rgb),.80) 30%,
        rgba(var(--primary-dark-rgb),.88) 68%,
        rgba(var(--primary-dark-rgb),.98) 100%),
      linear-gradient(90deg, rgba(var(--primary-dark-rgb),.70), rgba(var(--primary-dark-rgb),.40));
  }
  .hero__inner {
    min-height: 650px;
    align-items: flex-start;
    padding-block: 50px 58px;
  }
  .hero__content { width: 100%; max-width: 650px; }
  .hero h1 {
    font-size: clamp(3.15rem, 14.5vw, 4.35rem);
    line-height: .88;
  }
  .hero h1 span { white-space: normal; }
  .hero__service-line {
    max-width: 520px;
    gap: 5px 8px;
    margin-top: 20px;
    font-size: .72rem;
    line-height: 1.45;
  }
  .hero__trust {
    max-width: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px 15px;
    margin-top: 25px;
  }
  .hero__trust span {
    padding-left: 19px;
    font-size: .78rem;
    line-height: 1.35;
  }
  .hero__trust span::before { width: 9px; height: 14px; }
  .hero__actions { display: grid; gap: 15px; margin-top: 29px; }
  .hero__actions .button { width: 100%; }
  .hero__phone-link { display: none; }

  .proof__inner {
    display: grid;
    min-height: 0;
    gap: 18px;
    padding-block: 23px 25px;
    text-align: center;
  }
  .proof__brands-label { white-space: normal; }
  .proof__brands { justify-content: center; gap: 26px; }
  .brand-mark--house,
  .brand-mark--concrete { font-size: .95rem; }
  .brand-mark--outdoor { font-size: .7rem; }
  .brand-mark--outdoor strong { font-size: .94rem; }

  .story__inner {
    display: flex;
    flex-direction: column;
    gap: 52px;
    padding-block: 76px 88px;
  }
  .story__visual {
    width: 100%;
    min-height: 0;
    padding: 0 18px 42px 15px;
  }
  .story__shape { inset: 26px 32px 18px 0; }
  .story__photo--main {
    height: clamp(390px, 112vw, 560px);
  }
  .story__photo--main img { object-position: 49% 45%; }
  .story__photo--trailer {
    right: 0;
    bottom: 0;
    width: min(44vw, 180px);
    height: min(33vw, 134px);
    border-width: 6px;
  }
  .story__photo--equipment {
    top: -12px;
    left: -5px;
    width: min(30vw, 118px);
    height: min(37vw, 148px);
    border-width: 6px;
  }
  .story__content { max-width: none; }
  .story h2 { font-size: clamp(2.75rem, 12vw, 3.8rem); }
  .story__content > p { font-size: .95rem; }
  .story__proof { grid-template-columns: 1fr; }
  .story__proof > div,
  .story__proof > div:first-child {
    display: grid;
    grid-template-columns: 100px 1fr;
    align-items: center;
    padding: 17px 0;
  }
  .story__proof > div + div {
    border-top: 1px solid #d7dde2;
    border-left: 0;
  }
  .story__proof strong { font-size: 1.6rem; }
  .story__proof small { margin: 0; }

  .services { padding-block: 90px 86px; }
  .services__inner { width: min(calc(100% - 38px), var(--container)); }
  .services::before {
    top: -145px;
    left: -250px;
    width: 850px;
    height: 760px;
    background:
      radial-gradient(
        ellipse at 39% 25%,
        rgba(225,255,255,.49) 0%,
        rgba(255,224,118,.31) 18%,
        rgba(var(--aqua-rgb),.20) 35%,
        rgba(192,132,38,.12) 51%,
        transparent 73%
      );
  }
  .services__bulb {
    top: -10px;
    left: 16px;
    transform: scale(.78);
    transform-origin: top left;
  }
  .services__grid-lines { inset: 210px 0 0; background-size: 54px 54px; }
  .services__heading {
    max-width: 630px;
    margin-bottom: 42px;
    padding-left: 34px;
  }
  .services h2 { font-size: clamp(2.8rem, 11.7vw, 3.9rem); }
  .services h2 span:first-child { white-space: normal; }
  .services__heading p { margin-top: 20px; font-size: .94rem; }
  .service-grid { grid-template-columns: 1fr; gap: 26px; }
  .service-feature__image { height: clamp(410px, 112vw, 545px); }
  .service-feature__overlay {
    padding: 28px 24px 25px;
    transform: none;
  }
  .service-feature__link {
    opacity: 1;
    transform: none;
  }
  .service-feature:nth-child(2) .service-feature__image img { object-position: 50% 43%; }
  .secondary-services {
    grid-template-columns: 1fr;
    margin-top: 42px;
  }
  .secondary-services a,
  .secondary-services a:first-child {
    min-height: 68px;
    padding: 0 4px;
  }
  .secondary-services a + a {
    border-top: 1px solid rgba(255,255,255,.16);
    border-left: 0;
  }

  .mobile-sticky-cta {
    position: fixed;
    z-index: 100;
    right: 0;
    bottom: 0;
    left: 0;
    display: grid;
    height: 68px;
    grid-template-columns: 1fr 1fr 1.15fr;
    background: var(--white);
    border-top: 1px solid #cfd5da;
    box-shadow: 0 -7px 24px rgba(var(--primary-dark-rgb),.12);
  }
  .mobile-sticky-cta a {
    display: grid;
    place-items: center;
    color: var(--navy-950);
    border-right: 1px solid #d5dbe0;
    font-family: "Archivo", Arial, sans-serif;
    font-size: .78rem;
    font-weight: 800;
    text-transform: uppercase;
  }
  .mobile-sticky-cta a:last-child {
    border-right: 0;
    background: var(--aqua);
  }
}

@media (max-width: 420px) {
  .container { width: min(calc(100% - 30px), var(--container)); }
  .hero { min-height: 640px; }
  .hero__inner { min-height: 640px; padding-block: 44px 52px; }
  .hero h1 { font-size: clamp(2.95rem, 14.2vw, 3.75rem); }
  .hero__service-line { font-size: .67rem; }
  .hero__trust { gap: 12px 9px; }
  .hero__trust span { font-size: .71rem; }
  .story h2,
  .services h2 { font-size: clamp(2.5rem, 11.8vw, 3.2rem); }
  .services__heading { padding-left: 25px; }
}

@media (hover: none) {
  .service-feature__overlay { transform: none; }
  .service-feature__link { opacity: 1; transform: none; }
  .service-feature h3 { transform: none; }
  .service-feature h3::after { width: 72px; }
}

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

/* ==========================================================
   LOWER HOMEPAGE V4
   180 Sites-inspired rough transitions, icons & service areas
   ========================================================== */

/* ----------------------------------------------------------
   Reusable rough/grit language
   These shapes OVERLAP adjoining sections so no straight seam
   remains visible underneath.
   ---------------------------------------------------------- */
.reviews--reworked,
.process--reworked,
.service-area,
.faq,
.final-cta {
  position: relative;
}

.reviews--reworked,
.process--reworked,
.service-area,
.faq {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.reviews--reworked::before,
.process--reworked::before,
.service-area::before,
.faq::before,
.final-cta::before {
  position: absolute;
  z-index: 8;
  right: 0;
  left: 0;
  height: 54px;
  content: "";
  pointer-events: none;
}

/* Off-white paint overlaps upward into Projects. */
.reviews--reworked::before {
  top: -31px;
  background: var(--off-white);
  clip-path: polygon(
    0 48%, 3% 37%, 6% 51%, 10% 34%, 14% 46%, 18% 31%, 22% 49%,
    27% 35%, 31% 52%, 36% 33%, 41% 47%, 46% 29%, 51% 51%, 56% 36%,
    61% 48%, 66% 32%, 71% 51%, 76% 35%, 81% 46%, 86% 30%, 91% 51%,
    95% 37%, 100% 45%, 100% 100%, 0 100%
  );
}

/* White paper overlaps upward into Reviews. */
.process--reworked::before {
  top: -31px;
  background: var(--white);
  clip-path: polygon(
    0 44%, 4% 31%, 8% 47%, 12% 35%, 17% 52%, 22% 33%, 27% 45%,
    32% 30%, 37% 50%, 42% 36%, 47% 48%, 52% 31%, 57% 51%, 62% 34%,
    67% 46%, 72% 29%, 77% 51%, 82% 35%, 87% 48%, 92% 31%, 96% 45%,
    100% 34%, 100% 100%, 0 100%
  );
}

/* Navy paint overlaps upward into Process. */
.service-area::before {
  top: -34px;
  background: var(--navy-950);
  clip-path: polygon(
    0 47%, 4% 32%, 9% 49%, 14% 34%, 19% 53%, 24% 31%, 29% 47%,
    34% 35%, 39% 51%, 44% 30%, 49% 47%, 54% 36%, 59% 52%, 64% 32%,
    69% 48%, 74% 34%, 79% 51%, 84% 29%, 89% 47%, 94% 34%, 100% 50%,
    100% 100%, 0 100%
  );
}

/* FAQ paper overlaps the Service Area. */
.faq::before {
  top: -31px;
  background: var(--off-white);
  clip-path: polygon(
    0 49%, 5% 35%, 10% 51%, 15% 32%, 20% 47%, 25% 36%, 30% 52%,
    35% 31%, 40% 46%, 45% 34%, 50% 52%, 55% 33%, 60% 48%, 65% 30%,
    70% 50%, 75% 36%, 80% 46%, 85% 32%, 90% 52%, 95% 35%, 100% 47%,
    100% 100%, 0 100%
  );
}

/* Final navy advertisement overlaps FAQ. */
.final-cta::before {
  top: -31px;
  background: var(--navy-950);
  clip-path: polygon(
    0 47%, 4% 34%, 9% 50%, 14% 32%, 19% 48%, 24% 36%, 29% 52%,
    34% 31%, 39% 46%, 44% 35%, 49% 51%, 54% 30%, 59% 49%, 64% 34%,
    69% 52%, 74% 32%, 79% 47%, 84% 35%, 89% 51%, 94% 31%, 100% 48%,
    100% 100%, 0 100%
  );
}

/* ----------------------------------------------------------
   Smaller floating call/text advertisement
   ---------------------------------------------------------- */
.contact-float-shell {
  position: relative;
  z-index: 16;
  width: 100%;
  height: 0;
}
.contact-float {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 72px), 955px);
  min-height: 188px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-850);
  border: 5px solid var(--white);
  box-shadow: 0 18px 34px rgba(var(--primary-dark-rgb),.24);
  transform: translate(-50%, -49%);
  isolation: isolate;
}
.contact-float__media {
  position: absolute;
  z-index: -3;
  inset: 0;
}
.contact-float__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 69% 50%;
  filter: saturate(.96) contrast(1.04);
}
.contact-float__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(90deg,
      rgba(var(--primary-dark-rgb),.99) 0%,
      rgba(var(--primary-dark-rgb),.98) 28%,
      rgba(var(--primary-dark-rgb),.78) 47%,
      rgba(var(--primary-dark-rgb),.29) 67%,
      rgba(var(--primary-dark-rgb),.10) 100%),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.06), rgba(var(--primary-dark-rgb),.32));
}
.contact-float__wash {
  position: absolute;
  z-index: -2;
  top: -36px;
  right: -70px;
  width: 39%;
  height: 150%;
  background: rgba(var(--aqua-rgb),.90);
  clip-path: polygon(34% 0,100% 0,100% 100%,0 100%);
  mix-blend-mode: multiply;
}
.contact-float__inner {
  display: grid;
  min-height: 178px;
  grid-template-columns: .68fr 1.32fr;
  align-items: center;
  gap: 28px;
  padding: 28px 31px;
}
.contact-float__copy span {
  display: block;
  margin-bottom: 5px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.contact-float__copy h2 {
  margin: 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3rem, 4vw, 4.15rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .86;
  text-transform: uppercase;
}
.contact-float__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}
.contact-float__action {
  display: flex;
  min-width: 205px;
  min-height: 67px;
  align-items: center;
  gap: 11px;
  padding: 10px 15px;
  color: var(--navy-950);
  background: var(--aqua);
  box-shadow: 0 7px 17px rgba(0,0,0,.15);
  transition: transform .18s ease, background-color .18s ease;
}
.contact-float__action:hover {
  transform: translateY(-3px);
  background: var(--aqua-soft);
}
.contact-float__action--dark {
  color: var(--white);
  background: rgba(var(--primary-dark-rgb),.94);
  border: 1px solid rgba(255,255,255,.18);
}
.contact-float__action--dark:hover { background: var(--navy-800); }
.contact-float__icon {
  display: grid;
  width: 35px;
  height: 35px;
  flex: 0 0 auto;
  place-items: center;
  font-size: 1.15rem;
  font-weight: 800;
}
.contact-float__icon--sms {
  width: 39px;
  height: 27px;
  border-radius: 50%;
  color: var(--aqua);
  background: var(--navy-950);
  font-size: .52rem;
  letter-spacing: .03em;
}
.contact-float__action small,
.contact-float__action strong {
  display: block;
  font-family: "Archivo", Arial, sans-serif;
}
.contact-float__action small {
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}
.contact-float__action strong {
  margin-top: 2px;
  font-size: .79rem;
}

/* ----------------------------------------------------------
   Reviews — shorter rail, stronger texture
   ---------------------------------------------------------- */
.reviews--reworked {
  overflow: hidden;
  background:
    radial-gradient(circle at 9% 16%, rgba(var(--primary-rgb),.055) 0 1px, transparent 2px),
    radial-gradient(circle at 84% 72%, rgba(var(--primary-rgb),.045) 0 1px, transparent 2px),
    var(--off-white);
  background-size: 39px 39px, 61px 61px, auto;
}
.reviews__scuffs {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: .36;
  background-image:
    repeating-linear-gradient(14deg, transparent 0 70px, rgba(var(--primary-rgb),.042) 71px 72px, transparent 73px 151px),
    repeating-linear-gradient(171deg, transparent 0 111px, rgba(var(--primary-rgb),.035) 112px 113px, transparent 114px 227px);
  mask-image: linear-gradient(90deg,#000 0%,rgba(0,0,0,.28) 35%,rgba(0,0,0,.20) 65%,#000 100%);
}
.reviews-v3 {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(280px,.60fr) minmax(0,1.40fr);
  align-items: center;
  gap: 54px;
  padding-block: 166px 106px;
}
.reviews-v3__intro { max-width: 390px; }
.reviews-v3__kicker {
  display: block;
  margin-bottom: 11px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}
.reviews-v3 h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.45rem,4.25vw,4.65rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .90;
  text-transform: uppercase;
}
.reviews-v3__intro p {
  margin: 20px 0 0;
  color: var(--gray-500);
  font-size: .88rem;
  line-height: 1.66;
}
.reviews-v3__button {
  margin-top: 27px;
  color: var(--white);
  background: var(--navy-900);
  border-color: var(--navy-900);
}
.reviews-v3__button:hover {
  color: var(--navy-950);
  background: var(--aqua);
  border-color: var(--aqua);
}
.reviews-v3__rail {
  display: flex;
  gap: 14px;
  overflow-x: auto;
  padding: 8px 8px 16px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: var(--navy-900) rgba(var(--primary-rgb),.08);
}
.reviews-v3__rail::-webkit-scrollbar { height: 5px; }
.reviews-v3__rail::-webkit-scrollbar-track { background: rgba(var(--primary-rgb),.08); }
.reviews-v3__rail::-webkit-scrollbar-thumb { background: var(--navy-900); }

.review-card {
  position: relative;
  flex: 0 0 min(390px,76vw);
  min-height: 288px;
  padding: 31px 30px 28px;
  color: var(--navy-900);
  background:
    linear-gradient(rgba(var(--primary-rgb),.023) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--primary-rgb),.023) 1px,transparent 1px),
    var(--white);
  background-size: 48px 48px,48px 48px,auto;
  border: 1px solid #d4d9de;
  border-top: 5px solid var(--aqua);
  scroll-snap-align: start;
  box-shadow: 0 10px 22px rgba(var(--primary-dark-rgb),.055);
}
.review-card--featured {
  color: var(--white);
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    var(--navy-800);
  background-size: 48px 48px,48px 48px,auto;
  border-color: var(--navy-800);
  border-right: 5px solid var(--aqua);
}
.review-card__quote {
  position: absolute;
  top: 20px;
  right: 24px;
  color: var(--aqua);
  font-family: Georgia, serif;
  font-size: 4rem;
  font-weight: 700;
  line-height: .72;
}
.review-card__type {
  display: block;
  max-width: 220px;
  color: var(--gray-500);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.review-card--featured .review-card__type { color: rgba(255,255,255,.57); }
.review-card p {
  margin: 45px 0 30px;
  font-size: .90rem;
  font-weight: 500;
  line-height: 1.70;
}
.review-card footer {
  display: grid;
  gap: 3px;
}
.review-card footer strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: .83rem;
  font-weight: 800;
}
.review-card footer span {
  color: var(--gray-500);
  font-size: .69rem;
  font-weight: 600;
}
.review-card--featured footer span { color: rgba(255,255,255,.58); }

/* ----------------------------------------------------------
   Process — Haro-like icon cards, not redundant numbers
   ---------------------------------------------------------- */
.process--reworked {
  overflow: hidden;
  background:
    radial-gradient(circle at 14% 23%, rgba(var(--primary-rgb),.025) 0 1px, transparent 2px),
    var(--white);
  background-size: 56px 56px, auto;
  isolation: isolate;
}
.process__scuffs {
  position: absolute;
  z-index: -1;
  inset: 0;
  opacity: .43;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(12deg, transparent 0 94px, rgba(var(--primary-rgb),.030) 95px 96px, transparent 97px 205px),
    repeating-linear-gradient(173deg, transparent 0 137px, rgba(var(--primary-rgb),.025) 138px 139px, transparent 140px 276px);
}
.process-v3 {
  position: relative;
  z-index: 2;
  padding-block: 105px 112px;
}
.process-v3__heading {
  max-width: 900px;
  margin: 0 auto 52px;
  text-align: center;
}
.process-v3 h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.55rem,5vw,5.35rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .90;
  text-transform: uppercase;
}
.process-v3__heading p {
  max-width: 610px;
  margin: 17px auto 0;
  color: var(--gray-500);
  font-size: .90rem;
  line-height: 1.65;
}
.process-v3__steps {
  display: grid;
  grid-template-columns: repeat(3,1fr);
  gap: 24px;
}
.process-card {
  position: relative;
  min-height: 315px;
  padding: 30px 28px 33px;
  color: var(--white);
  background:
    linear-gradient(rgba(255,255,255,.055) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.055) 1px,transparent 1px),
    radial-gradient(circle at 88% 12%,rgba(var(--aqua-rgb),.11),transparent 31%),
    #15202c;
  background-size: 46px 46px,46px 46px,auto,auto;
  border: 1px solid rgba(var(--primary-rgb),.16);
  box-shadow: 0 12px 22px rgba(var(--primary-dark-rgb),.10);
  transition: transform .22s ease, box-shadow .22s ease;
}
.process-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 18px 30px rgba(var(--primary-dark-rgb),.16);
}
.process-card::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 3px;
  content: "";
  background: linear-gradient(90deg,transparent 0 35%,var(--aqua) 35% 65%,transparent 65%);
}
.process-card__step {
  position: absolute;
  top: 0;
  right: 0;
  padding: 10px 16px;
  color: var(--navy-950);
  background: var(--aqua);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: .9rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
  box-shadow: 0 6px 14px rgba(0,0,0,.12);
}
.process-card__icon {
  display: grid;
  width: 58px;
  height: 58px;
  place-items: center;
  margin-bottom: 34px;
  color: var(--navy-950);
  background: var(--aqua);
}
.process-card__icon svg {
  width: 31px;
  height: 31px;
  fill: none;
  stroke: var(--navy-950);
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.process-card h3 {
  margin: 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 2.08rem;
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: .95;
  text-transform: uppercase;
}
.process-card p {
  margin: 16px 0 0;
  color: rgba(255,255,255,.72);
  font-size: .84rem;
  line-height: 1.63;
}
.process-v3__cta {
  display: flex;
  justify-content: center;
  margin-top: 42px;
}

/* ----------------------------------------------------------
   Service Area V4 — location list + state-scale visual treatment
   ---------------------------------------------------------- */
.service-area {
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 72% 42%, rgba(var(--primary-light-rgb),.68), transparent 40%),
    var(--navy-950);
  isolation: isolate;
}
.service-area__grid {
  position: absolute;
  z-index: -3;
  inset: 0;
  opacity: .12;
  background-image:
    linear-gradient(rgba(255,255,255,.28) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.28) 1px,transparent 1px);
  background-size: 68px 68px;
}
.service-area__scuffs {
  position: absolute;
  z-index: -2;
  inset: 0;
  opacity: .22;
  pointer-events: none;
  background-image:
    repeating-linear-gradient(15deg, transparent 0 105px, rgba(255,255,255,.045) 106px 107px, transparent 108px 225px),
    repeating-linear-gradient(168deg, transparent 0 151px, rgba(255,255,255,.035) 152px 153px, transparent 154px 302px);
}
.service-area__state-word {
  position: absolute;
  z-index: -1;
  right: -2.5vw;
  bottom: -3vw;
  color: rgba(255,255,255,.032);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(14rem,23vw,30rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .70;
  pointer-events: none;
}
.service-area__inner--v4 {
  display: grid;
  min-height: 600px;
  grid-template-columns: minmax(0,.78fr) minmax(520px,1.22fr);
  align-items: center;
  gap: 72px;
  padding-block: 102px 105px;
}
.service-area__copy--v4 {
  max-width: 520px;
}
.service-area__kicker {
  display: block;
  margin-bottom: 13px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
}
.service-area h2 {
  margin: 0;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.7rem,4.8vw,5.25rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .89;
  text-transform: uppercase;
}
.service-area__copy--v4 > p {
  max-width: 520px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.68);
  font-size: .92rem;
  line-height: 1.72;
}
.service-area__quick-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 11px 21px;
  margin: 28px 0 29px;
}
.service-area__quick-proof span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.91);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 700;
}
.service-area__quick-proof span::before {
  position: absolute;
  top: .42em;
  left: 0;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

.service-area__areas {
  position: relative;
  padding: 38px 39px 35px;
  background:
    linear-gradient(rgba(255,255,255,.035) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px),
    rgba(255,255,255,.045);
  background-size: 48px 48px,48px 48px,auto;
  border: 1px solid rgba(255,255,255,.17);
  box-shadow: 0 18px 36px rgba(0,0,0,.13);
  backdrop-filter: blur(4px);
}
.service-area__areas::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 92px;
  height: 6px;
  content: "";
  background: var(--aqua);
}
.service-area__areas-heading {
  display: grid;
  gap: 8px;
  padding-bottom: 23px;
  border-bottom: 1px solid rgba(255,255,255,.13);
}
.service-area__areas-heading span {
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}
.service-area__areas-heading strong {
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 2.6rem;
  font-weight: 800;
  line-height: .94;
  text-transform: uppercase;
}
.service-area__areas-grid {
  display: grid;
  grid-template-columns: repeat(3,minmax(0,1fr));
  gap: 14px 24px;
  padding-block: 27px 29px;
}
.service-area__areas-grid span {
  position: relative;
  padding-left: 19px;
  color: rgba(255,255,255,.88);
  font-size: .79rem;
  font-weight: 600;
  white-space: nowrap;
}
.service-area__areas-grid span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 10px;
  height: 16px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}
.service-area__areas-bottom {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  align-items: center;
  gap: 28px;
  padding-top: 23px;
  border-top: 1px solid rgba(255,255,255,.13);
}
.service-area__areas-bottom p {
  max-width: 410px;
  margin: 0;
  color: rgba(255,255,255,.57);
  font-size: .74rem;
  line-height: 1.58;
}
.service-area__areas-bottom p strong {
  color: rgba(255,255,255,.88);
}
.service-area__phone {
  display: grid;
  gap: 3px;
  color: var(--white);
  text-align: right;
}
.service-area__phone small {
  color: var(--aqua);
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.service-area__phone strong {
  font-family: "Archivo", Arial, sans-serif;
  font-size: .95rem;
  font-weight: 800;
}

/* ----------------------------------------------------------
   FAQ / Final CTA texture integration
   ---------------------------------------------------------- */
.faq {
  overflow: visible;
  background:
    radial-gradient(circle at 12% 20%, rgba(var(--primary-rgb),.03) 0 1px, transparent 2px),
    var(--off-white);
  background-size: 55px 55px,auto;
}
.faq__inner {
  padding-top: 124px;
}

.final-cta {
  overflow: hidden;
}

/* ----------------------------------------------------------
   Responsive V4
   ---------------------------------------------------------- */
@media (max-width: 1120px) {
  .contact-float {
    width: min(calc(100% - 56px),920px);
  }
  .contact-float__inner {
    grid-template-columns: .60fr 1.40fr;
    gap: 20px;
    padding-inline: 25px;
  }
  .contact-float__action {
    min-width: 190px;
    padding-inline: 13px;
  }

  .reviews-v3 {
    gap: 38px;
  }

  .process-v3__steps {
    gap: 18px;
  }
  .process-card {
    padding-inline: 23px;
  }

  .service-area__inner--v4 {
    grid-template-columns: .72fr 1.28fr;
    gap: 45px;
  }
  .service-area__areas {
    padding-inline: 31px;
  }
  .service-area__areas-grid {
    gap: 13px 18px;
  }
}

@media (max-width: 860px) {
  .reviews--reworked::before,
  .process--reworked::before,
  .service-area::before,
  .faq::before,
  .final-cta::before {
    height: 38px;
    top: -22px;
  }

  .contact-float-shell {
    height: auto;
    padding: 0 20px;
    background: var(--off-white);
  }
  .contact-float {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    border-width: 5px;
    transform: translateY(-34px);
  }
  .contact-float__media img { object-position: 72% 50%; }
  .contact-float__media::after {
    background: linear-gradient(180deg,rgba(var(--primary-dark-rgb),.58) 0%,rgba(var(--primary-dark-rgb),.86) 49%,rgba(var(--primary-dark-rgb),.99) 100%);
  }
  .contact-float__wash {
    top: auto;
    right: -20px;
    bottom: 0;
    width: 68%;
    height: 16px;
    clip-path: polygon(8% 0,100% 0,100% 100%,0 100%);
    mix-blend-mode: normal;
  }
  .contact-float__inner {
    display: block;
    min-height: 0;
    padding: 35px 23px 27px;
  }
  .contact-float__copy h2 {
    font-size: clamp(3.05rem,14.5vw,4.1rem);
  }
  .contact-float__actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    justify-content: stretch;
    margin-top: 25px;
  }
  .contact-float__action {
    min-width: 0;
    width: 100%;
  }

  .reviews-v3 {
    display: block;
    padding-block: 66px 82px;
  }
  .reviews-v3__intro {
    max-width: 570px;
    margin-bottom: 31px;
  }
  .reviews-v3 h2 {
    font-size: clamp(3.1rem,13.5vw,4.35rem);
  }
  .reviews-v3__rail {
    margin-right: -24px;
    padding-right: 24px;
  }
  .review-card {
    flex-basis: min(355px,84vw);
    min-height: 275px;
  }

  .process-v3 {
    padding-block: 83px 88px;
  }
  .process-v3__heading {
    margin-bottom: 40px;
  }
  .process-v3 h2 {
    font-size: clamp(3.05rem,13.2vw,4.25rem);
  }
  .process-v3__steps {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .process-card {
    min-height: 0;
    padding: 27px 25px 30px;
  }
  .process-card__icon {
    width: 54px;
    height: 54px;
    margin-bottom: 24px;
  }
  .process-card h3 {
    font-size: 1.95rem;
  }
  .process-v3__cta {
    justify-content: stretch;
    margin-top: 31px;
  }
  .process-v3__cta .button {
    width: 100%;
  }

  .service-area__inner--v4 {
    display: block;
    min-height: 0;
    padding-block: 86px 91px;
  }
  .service-area__copy--v4 {
    max-width: 620px;
  }
  .service-area h2 {
    font-size: clamp(3.35rem,14vw,4.55rem);
  }
  .service-area__areas {
    margin-top: 45px;
  }
  .service-area__areas-grid {
    grid-template-columns: repeat(2,minmax(0,1fr));
  }

  .faq__inner {
    padding-top: 95px;
  }
}

@media (max-width: 560px) {
  .contact-float-shell {
    padding-inline: 14px;
  }
  .contact-float {
    border-width: 4px;
  }
  .contact-float__actions {
    grid-template-columns: 1fr;
  }
  .contact-float__action {
    min-height: 64px;
  }

  .review-card {
    flex-basis: 86vw;
    min-height: 260px;
    padding: 28px 24px 25px;
  }

  .service-area__quick-proof {
    display: grid;
    gap: 11px;
  }
  .service-area__areas {
    padding: 31px 23px 28px;
  }
  .service-area__areas-heading strong {
    font-size: 2.2rem;
  }
  .service-area__areas-grid {
    grid-template-columns: 1fr 1fr;
    gap: 13px 12px;
  }
  .service-area__areas-grid span {
    font-size: .72rem;
    white-space: normal;
  }
  .service-area__areas-bottom {
    grid-template-columns: 1fr;
    gap: 17px;
  }
  .service-area__phone {
    text-align: left;
  }
}

/* ==========================================================
   LOWER HOMEPAGE V6 — PAPER / SCUFF TEXTURE PASS
   Original texture treatment inspired by worn contractor print
   layouts. Keeps content/layout intact; changes surface + edges.
   ========================================================== */

:root {
  --clearpeak-paper-light: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22520%22%20height%3D%22520%22%20viewBox%3D%220%200%20520%20520%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23071a2b%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M19%2076l44%208%22%20stroke-width%3D%221.4%22%20opacity%3D%22.07%22/%3E%3Cpath%20d%3D%22M301%2034l54%205%22%20stroke-width%3D%221%22%20opacity%3D%22.055%22/%3E%0A%3Cpath%20d%3D%22M85%20306l112%2034%22%20stroke-width%3D%222.2%22%20opacity%3D%22.085%22/%3E%3Cpath%20d%3D%22M193%20114l17%204%22%20stroke-width%3D%221.1%22%20opacity%3D%22.055%22/%3E%0A%3Cpath%20d%3D%22M352%20230l58%2017%22%20stroke-width%3D%221.7%22%20opacity%3D%22.07%22/%3E%3Cpath%20d%3D%22M35%20432l31%208%22%20stroke-width%3D%221.2%22%20opacity%3D%22.06%22/%3E%0A%3Cpath%20d%3D%22M445%2084l32%2022%22%20stroke-width%3D%221.1%22%20opacity%3D%22.045%22/%3E%3Cpath%20d%3D%22M251%20420l75%209%22%20stroke-width%3D%221.5%22%20opacity%3D%22.05%22/%3E%0A%3Cpath%20d%3D%22M112%20174l19%206%22%20stroke-width%3D%221.1%22%20opacity%3D%22.05%22/%3E%3Cpath%20d%3D%22M413%20357l42%205%22%20stroke-width%3D%221.2%22%20opacity%3D%22.05%22/%3E%0A%3Cpath%20d%3D%22M58%20226l8%2018%22%20stroke-width%3D%221.3%22%20opacity%3D%22.045%22/%3E%3Cpath%20d%3D%22M284%20268l29%202%22%20stroke-width%3D%22.9%22%20opacity%3D%22.055%22/%3E%0A%3C/g%3E%0A%3Cg%20fill%3D%22%23071a2b%22%20opacity%3D%22.07%22%3E%0A%3Ccircle%20cx%3D%2231%22%20cy%3D%2225%22%20r%3D%221.3%22/%3E%3Ccircle%20cx%3D%2294%22%20cy%3D%22111%22%20r%3D%22.9%22/%3E%3Ccircle%20cx%3D%22158%22%20cy%3D%2261%22%20r%3D%221.1%22/%3E%3Ccircle%20cx%3D%22225%22%20cy%3D%22194%22%20r%3D%22.8%22/%3E%0A%3Ccircle%20cx%3D%22267%22%20cy%3D%2275%22%20r%3D%221.25%22/%3E%3Ccircle%20cx%3D%22328%22%20cy%3D%22149%22%20r%3D%22.8%22/%3E%3Ccircle%20cx%3D%22391%22%20cy%3D%2251%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%22481%22%20cy%3D%22168%22%20r%3D%22.9%22/%3E%0A%3Ccircle%20cx%3D%2272%22%20cy%3D%22366%22%20r%3D%221.15%22/%3E%3Ccircle%20cx%3D%22147%22%20cy%3D%22454%22%20r%3D%22.8%22/%3E%3Ccircle%20cx%3D%22217%22%20cy%3D%22377%22%20r%3D%221.1%22/%3E%3Ccircle%20cx%3D%22374%22%20cy%3D%22451%22%20r%3D%221%22/%3E%0A%3Ccircle%20cx%3D%22465%22%20cy%3D%22402%22%20r%3D%221.15%22/%3E%3Ccircle%20cx%3D%22339%22%20cy%3D%22313%22%20r%3D%22.75%22/%3E%3Ccircle%20cx%3D%22126%22%20cy%3D%22249%22%20r%3D%22.85%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  --clearpeak-paper-dark: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%22560%22%20height%3D%22560%22%20viewBox%3D%220%200%20560%20560%22%3E%0A%3Cg%20fill%3D%22none%22%20stroke%3D%22%23ffffff%22%20stroke-linecap%3D%22round%22%3E%0A%3Cpath%20d%3D%22M23%2084l53%209%22%20stroke-width%3D%221.6%22%20opacity%3D%22.12%22/%3E%3Cpath%20d%3D%22M325%2031l65%207%22%20stroke-width%3D%221%22%20opacity%3D%22.085%22/%3E%0A%3Cpath%20d%3D%22M91%20329l126%2038%22%20stroke-width%3D%222.4%22%20opacity%3D%22.13%22/%3E%3Cpath%20d%3D%22M205%20126l19%204%22%20stroke-width%3D%221.2%22%20opacity%3D%22.09%22/%3E%0A%3Cpath%20d%3D%22M374%20244l69%2020%22%20stroke-width%3D%221.9%22%20opacity%3D%22.105%22/%3E%3Cpath%20d%3D%22M41%20468l36%209%22%20stroke-width%3D%221.4%22%20opacity%3D%22.09%22/%3E%0A%3Cpath%20d%3D%22M477%2091l36%2024%22%20stroke-width%3D%221.1%22%20opacity%3D%22.08%22/%3E%3Cpath%20d%3D%22M276%20451l82%2010%22%20stroke-width%3D%221.6%22%20opacity%3D%22.08%22/%3E%0A%3Cpath%20d%3D%22M118%20184l23%206%22%20stroke-width%3D%221.1%22%20opacity%3D%22.085%22/%3E%3Cpath%20d%3D%22M440%20386l47%206%22%20stroke-width%3D%221.3%22%20opacity%3D%22.085%22/%3E%0A%3Cpath%20d%3D%22M61%20245l9%2021%22%20stroke-width%3D%221.4%22%20opacity%3D%22.075%22/%3E%3Cpath%20d%3D%22M302%20287l34%202%22%20stroke-width%3D%221%22%20opacity%3D%22.09%22/%3E%0A%3C/g%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.115%22%3E%0A%3Ccircle%20cx%3D%2234%22%20cy%3D%2227%22%20r%3D%221.4%22/%3E%3Ccircle%20cx%3D%22101%22%20cy%3D%22118%22%20r%3D%221%22/%3E%3Ccircle%20cx%3D%22171%22%20cy%3D%2264%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%22242%22%20cy%3D%22211%22%20r%3D%22.9%22/%3E%0A%3Ccircle%20cx%3D%22289%22%20cy%3D%2282%22%20r%3D%221.35%22/%3E%3Ccircle%20cx%3D%22354%22%20cy%3D%22161%22%20r%3D%22.9%22/%3E%3Ccircle%20cx%3D%22421%22%20cy%3D%2255%22%20r%3D%221.25%22/%3E%3Ccircle%20cx%3D%22514%22%20cy%3D%22181%22%20r%3D%221%22/%3E%0A%3Ccircle%20cx%3D%2278%22%20cy%3D%22397%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%22155%22%20cy%3D%22493%22%20r%3D%22.9%22/%3E%3Ccircle%20cx%3D%22233%22%20cy%3D%22409%22%20r%3D%221.15%22/%3E%3Ccircle%20cx%3D%22403%22%20cy%3D%22489%22%20r%3D%221.1%22/%3E%0A%3Ccircle%20cx%3D%22498%22%20cy%3D%22436%22%20r%3D%221.2%22/%3E%3Ccircle%20cx%3D%22365%22%20cy%3D%22339%22%20r%3D%22.85%22/%3E%3Ccircle%20cx%3D%22136%22%20cy%3D%22268%22%20r%3D%22.9%22/%3E%0A%3C/g%3E%0A%3C/svg%3E");
  --clearpeak-rough-white: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%221600%22%20height%3D%2270%22%20viewBox%3D%220%200%201600%2070%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2029%20L38%2024%20L79%2031%20L121%2022%20L160%2027%20L202%2019%20L244%2030%20L287%2023%20L326%2028%20L369%2018%20L411%2026%20L452%2021%20L495%2032%20L536%2023%20L579%2029%20L621%2020%20L663%2027%20L705%2017%20L748%2029%20L790%2022%20L832%2031%20L875%2019%20L917%2027%20L959%2021%20L1002%2032%20L1044%2024%20L1086%2029%20L1129%2018%20L1171%2026%20L1213%2020%20L1256%2030%20L1298%2022%20L1340%2028%20L1383%2019%20L1425%2031%20L1467%2023%20L1509%2028%20L1551%2020%20L1600%2030%20L1600%2070%20L0%2070%20Z%22/%3E%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2297%22%20cy%3D%2218%22%20rx%3D%225%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22332%22%20cy%3D%2215%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22602%22%20cy%3D%2214%22%20rx%3D%224%22%20ry%3D%221.6%22/%3E%3Cellipse%20cx%3D%22783%22%20cy%3D%2216%22%20rx%3D%228%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%221111%22%20cy%3D%2213%22%20rx%3D%225%22%20ry%3D%221.8%22/%3E%3Cellipse%20cx%3D%221367%22%20cy%3D%2214%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M219%2017l17-4%2013%202-15%204z%22/%3E%3Cpath%20d%3D%22M943%2014l22-4%2015%202-18%204z%22/%3E%3Cpath%20d%3D%22M1495%2016l18-4%2010%202-14%204z%22/%3E%3C/g%3E%3C/svg%3E");
  --clearpeak-rough-offwhite: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%221600%22%20height%3D%2270%22%20viewBox%3D%220%200%201600%2070%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23f5f6f7%22%20d%3D%22M0%2029%20L38%2024%20L79%2031%20L121%2022%20L160%2027%20L202%2019%20L244%2030%20L287%2023%20L326%2028%20L369%2018%20L411%2026%20L452%2021%20L495%2032%20L536%2023%20L579%2029%20L621%2020%20L663%2027%20L705%2017%20L748%2029%20L790%2022%20L832%2031%20L875%2019%20L917%2027%20L959%2021%20L1002%2032%20L1044%2024%20L1086%2029%20L1129%2018%20L1171%2026%20L1213%2020%20L1256%2030%20L1298%2022%20L1340%2028%20L1383%2019%20L1425%2031%20L1467%2023%20L1509%2028%20L1551%2020%20L1600%2030%20L1600%2070%20L0%2070%20Z%22/%3E%3Cg%20fill%3D%22%23f5f6f7%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2297%22%20cy%3D%2218%22%20rx%3D%225%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22332%22%20cy%3D%2215%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22602%22%20cy%3D%2214%22%20rx%3D%224%22%20ry%3D%221.6%22/%3E%3Cellipse%20cx%3D%22783%22%20cy%3D%2216%22%20rx%3D%228%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%221111%22%20cy%3D%2213%22%20rx%3D%225%22%20ry%3D%221.8%22/%3E%3Cellipse%20cx%3D%221367%22%20cy%3D%2214%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M219%2017l17-4%2013%202-15%204z%22/%3E%3Cpath%20d%3D%22M943%2014l22-4%2015%202-18%204z%22/%3E%3Cpath%20d%3D%22M1495%2016l18-4%2010%202-14%204z%22/%3E%3C/g%3E%3C/svg%3E");
  --clearpeak-rough-navy: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http://www.w3.org/2000/svg%22%20width%3D%221600%22%20height%3D%2270%22%20viewBox%3D%220%200%201600%2070%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23061321%22%20d%3D%22M0%2029%20L38%2024%20L79%2031%20L121%2022%20L160%2027%20L202%2019%20L244%2030%20L287%2023%20L326%2028%20L369%2018%20L411%2026%20L452%2021%20L495%2032%20L536%2023%20L579%2029%20L621%2020%20L663%2027%20L705%2017%20L748%2029%20L790%2022%20L832%2031%20L875%2019%20L917%2027%20L959%2021%20L1002%2032%20L1044%2024%20L1086%2029%20L1129%2018%20L1171%2026%20L1213%2020%20L1256%2030%20L1298%2022%20L1340%2028%20L1383%2019%20L1425%2031%20L1467%2023%20L1509%2028%20L1551%2020%20L1600%2030%20L1600%2070%20L0%2070%20Z%22/%3E%3Cg%20fill%3D%22%23061321%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2297%22%20cy%3D%2218%22%20rx%3D%225%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22332%22%20cy%3D%2215%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%22602%22%20cy%3D%2214%22%20rx%3D%224%22%20ry%3D%221.6%22/%3E%3Cellipse%20cx%3D%22783%22%20cy%3D%2216%22%20rx%3D%228%22%20ry%3D%222%22/%3E%3Cellipse%20cx%3D%221111%22%20cy%3D%2213%22%20rx%3D%225%22%20ry%3D%221.8%22/%3E%3Cellipse%20cx%3D%221367%22%20cy%3D%2214%22%20rx%3D%227%22%20ry%3D%222%22/%3E%3Cpath%20d%3D%22M219%2017l17-4%2013%202-15%204z%22/%3E%3Cpath%20d%3D%22M943%2014l22-4%2015%202-18%204z%22/%3E%3Cpath%20d%3D%22M1495%2016l18-4%2010%202-14%204z%22/%3E%3C/g%3E%3C/svg%3E");
}

/* Remove the earlier geometric V4 seam pieces. The new V6 edges are
   drawn INSIDE the preceding section, so the adjoining color continues
   seamlessly and the straight boundary disappears. */
.reviews--reworked::before,
.process--reworked::before,
.service-area::before,
.faq::before,
.final-cta::before {
  display: none !important;
}

/* ----------------------------------------------------------
   Paper / scuff surfaces — light sections
   ---------------------------------------------------------- */
.story,
.softwash-feature,
.projects,
.reviews--reworked,
.process--reworked,
.faq {
  background-repeat: repeat;
  background-position: 0 0;
}

.story {
  background-color: var(--off-white);
  background-image: var(--clearpeak-paper-light);
  background-size: 520px 520px;
}

.softwash-feature {
  background-color: var(--off-white);
  background-image:
    var(--clearpeak-paper-light),
    radial-gradient(circle at 82% 18%, rgba(var(--primary-rgb),.026), transparent 36%);
  background-size: 520px 520px, auto;
  border-top: 0;
  border-bottom: 0;
}

.projects {
  background-color: var(--white);
  background-image:
    var(--clearpeak-paper-light),
    linear-gradient(180deg, rgba(var(--primary-rgb),.018), transparent 26%);
  background-size: 520px 520px, auto;
  border-top: 0;
  border-bottom: 0;
}

.reviews--reworked {
  background-color: var(--off-white);
  background-image:
    var(--clearpeak-paper-light),
    radial-gradient(circle at 12% 18%, rgba(var(--primary-rgb),.035), transparent 34%);
  background-size: 520px 520px, auto;
}

.process--reworked {
  background-color: var(--white);
  background-image:
    var(--clearpeak-paper-light),
    linear-gradient(165deg, transparent 0 58%, rgba(var(--primary-rgb),.018) 58% 59%, transparent 59% 100%);
  background-size: 520px 520px, auto;
}

.faq {
  background-color: var(--off-white);
  background-image:
    var(--clearpeak-paper-light),
    radial-gradient(circle at 84% 24%, rgba(var(--primary-rgb),.025), transparent 34%);
  background-size: 520px 520px, auto;
}

/* The dedicated scuff overlays were useful for V4 but created long,
   mechanically straight scratches. The new paper tiles are more random. */
.reviews__scuffs,
.process__scuffs {
  opacity: .14;
  background-image:
    repeating-linear-gradient(12deg, transparent 0 176px, rgba(var(--primary-rgb),.026) 177px 178px, transparent 179px 368px);
}

/* ----------------------------------------------------------
   Dark printed surfaces
   ---------------------------------------------------------- */
.hero__media::after {
  background-image:
    var(--clearpeak-paper-dark),
    linear-gradient(90deg,
      rgba(var(--primary-dark-rgb),.99) 0%,
      rgba(var(--primary-dark-rgb),.97) 27%,
      rgba(var(--primary-dark-rgb),.87) 42%,
      rgba(var(--primary-dark-rgb),.63) 55%,
      rgba(var(--primary-dark-rgb),.25) 71%,
      rgba(var(--primary-dark-rgb),.055) 100%),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.05) 0%, rgba(var(--primary-dark-rgb),.02) 60%, rgba(var(--primary-dark-rgb),.48) 100%);
  background-size: 560px 560px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

.services {
  background-color: var(--navy-950);
  background-image:
    var(--clearpeak-paper-dark),
    radial-gradient(circle at 50% 0%, rgba(var(--primary-light-rgb),.78), transparent 42%);
  background-size: 560px 560px, auto;
  background-repeat: repeat, no-repeat;
}

.service-area {
  background-color: var(--navy-950);
  background-image:
    var(--clearpeak-paper-dark),
    radial-gradient(circle at 72% 42%, rgba(var(--primary-light-rgb),.68), transparent 40%);
  background-size: 560px 560px, auto;
  background-repeat: repeat, no-repeat;
}

.service-area__scuffs {
  opacity: .10;
  background-image:
    repeating-linear-gradient(16deg, transparent 0 210px, rgba(255,255,255,.035) 211px 212px, transparent 213px 430px);
}

.final-cta__media::after {
  background-image:
    var(--clearpeak-paper-dark),
    linear-gradient(90deg, rgba(var(--primary-dark-rgb),.99) 0%, rgba(var(--primary-dark-rgb),.95) 34%, rgba(var(--primary-dark-rgb),.72) 58%, rgba(var(--primary-dark-rgb),.28) 100%),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.06), rgba(var(--primary-dark-rgb),.38));
  background-size: 560px 560px, auto, auto;
  background-repeat: repeat, no-repeat, no-repeat;
}

/* Keep the side fades on the project reel aligned with the new paper surface. */
.project-reel::before {
  background: linear-gradient(90deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}
.project-reel::after {
  background: linear-gradient(270deg, rgba(255,255,255,.98), rgba(255,255,255,0));
}

/* ----------------------------------------------------------
   Rough / torn section edges
   The next section's color is painted into the bottom of the previous
   section. This is why there is no straight seam underneath it.
   ---------------------------------------------------------- */
.hero::after,
.services::after,
.reviews--reworked::after,
.process--reworked::after,
.service-area::after,
.faq::after {
  position: absolute;
  z-index: 15;
  right: -2px;
  bottom: -1px;
  left: -2px;
  height: 42px;
  content: "";
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

/* Hero -> white trust strip */
.hero::after {
  background-image: var(--clearpeak-rough-white);
}

/* Services -> light softwash feature */
.services::after {
  background-image: var(--clearpeak-rough-offwhite);
}

/* Reviews -> white process */
.reviews--reworked::after {
  background-image: var(--clearpeak-rough-white);
}

/* Process -> navy service area */
.process--reworked::after {
  background-image: var(--clearpeak-rough-navy);
}

/* Service area -> off-white FAQ */
.service-area::after {
  background-image: var(--clearpeak-rough-offwhite);
}

/* FAQ -> navy final CTA */
.faq::after {
  background-image: var(--clearpeak-rough-navy);
}

/* Give edge pieces room without changing visual spacing of content. */
.hero,
.services,
.reviews--reworked,
.process--reworked,
.service-area,
.faq {
  isolation: isolate;
}

/* Rough edges should sit above background decoration but below floating CTA. */
.contact-float-shell { z-index: 20; }

/* Slightly reinforce the paper feel on cards without dirtying the text. */
.review-card {
  background-image:
    var(--clearpeak-paper-light),
    linear-gradient(rgba(var(--primary-rgb),.022) 1px,transparent 1px),
    linear-gradient(90deg,rgba(var(--primary-rgb),.022) 1px,transparent 1px);
  background-size: 520px 520px, 48px 48px, 48px 48px;
}
.review-card--featured {
  background-color: var(--navy-800);
  background-image:
    var(--clearpeak-paper-dark),
    linear-gradient(rgba(255,255,255,.03) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.03) 1px,transparent 1px);
  background-size: 560px 560px, 48px 48px, 48px 48px;
}

.process-card {
  background-image:
    var(--clearpeak-paper-dark),
    linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px),
    radial-gradient(circle at 88% 12%,rgba(var(--aqua-rgb),.11),transparent 31%);
  background-size: 560px 560px, 46px 46px, 46px 46px, auto;
}

.service-area__areas {
  background-image:
    var(--clearpeak-paper-dark),
    linear-gradient(rgba(255,255,255,.032) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.032) 1px,transparent 1px);
  background-size: 560px 560px, 48px 48px, 48px 48px;
  background-color: rgba(255,255,255,.045);
}

/* Mobile: preserve the effect, but use a shallower edge so it never steals
   vertical room from buttons/headings. */
@media (max-width: 860px) {
  .hero::after,
  .services::after,
  .reviews--reworked::after,
  .process--reworked::after,
  .service-area::after,
  .faq::after {
    height: 30px;
  }

  .story,
  .softwash-feature,
  .projects,
  .reviews--reworked,
  .process--reworked,
  .faq {
    background-size: 390px 390px, auto;
  }

  .services,
  .service-area {
    background-size: 430px 430px, auto;
  }
}

@media (max-width: 560px) {
  .hero::after,
  .services::after,
  .reviews--reworked::after,
  .process--reworked::after,
  .service-area::after,
  .faq::after {
    height: 24px;
  }
}

/* ==========================================================
   HOMEPAGE V7 — FULL ROUGH-EDGE SYSTEM
   Extends the printed/scuffed treatment across the complete
   page rhythm without changing any content or layout.
   ========================================================== */

:root {
  --clearpeak-brush-white-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2034%20C38%2031%2065%2019%20105%2025%20C146%2031%20174%2019%20222%2023%20C265%2027%20291%2016%20344%2024%20C390%2031%20421%2022%20466%2027%20C512%2032%20545%2018%20596%2023%20C648%2029%20673%2020%20721%2026%20C772%2033%20807%2017%20858%2023%20C907%2029%20944%2020%20991%2026%20C1040%2033%201079%2021%201127%2024%20C1175%2027%201215%2016%201264%2023%20C1316%2031%201350%2020%201394%2026%20C1443%2032%201480%2018%201527%2024%20C1562%2028%201582%2026%201600%2027%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2288%22%20cy%3D%2217%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22276%22%20cy%3D%2212%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22519%22%20cy%3D%2215%22%20rx%3D%2214%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22741%22%20cy%3D%2211%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221006%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221279%22%20cy%3D%2210%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221488%22%20cy%3D%2215%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-white-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2027%20C34%2024%2059%2033%2098%2029%20C142%2024%20177%2034%20216%2028%20C258%2021%20286%2030%20331%2026%20C375%2022%20407%2033%20448%2029%20C493%2025%20524%2018%20568%2024%20C615%2031%20650%2034%20692%2028%20C733%2022%20773%2029%20815%2025%20C856%2021%20891%2033%20933%2028%20C974%2023%201014%2017%201058%2024%20C1104%2031%201137%2027%201178%2024%20C1225%2020%201255%2031%201297%2027%20C1342%2023%201379%2016%201422%2024%20C1467%2032%201503%2025%201545%2028%20C1570%2030%201588%2031%201600%2029%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22142%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22367%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22612%22%20cy%3D%2211%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22858%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221109%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221372%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-white-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2031%20C26%2036%2061%2019%2097%2025%20C137%2032%20165%2028%20202%2021%20C242%2014%20280%2029%20319%2025%20C359%2021%20391%2035%20431%2029%20C469%2023%20501%2016%20541%2022%20C581%2028%20616%2034%20658%2027%20C698%2020%20730%2029%20772%2025%20C817%2021%20846%2031%20889%2027%20C932%2023%20967%2014%201010%2022%20C1050%2029%201089%2035%201130%2027%20C1172%2018%201202%2030%201245%2024%20C1289%2018%201324%2032%201368%2027%20C1408%2023%201440%2016%201480%2022%20C1524%2028%201560%2034%201600%2026%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2267%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22328%22%20cy%3D%2210%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22584%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22823%22%20cy%3D%2212%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221083%22%20cy%3D%229%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221339%22%20cy%3D%2213%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221551%22%20cy%3D%2212%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-white-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23ffffff%22%20d%3D%22M0%2024%20C42%2018%2073%2031%20116%2028%20C154%2025%20190%2015%20234%2022%20C277%2029%20312%2036%20352%2028%20C392%2020%20428%2031%20467%2026%20C509%2020%20544%2014%20587%2022%20C629%2030%20663%2033%20706%2027%20C747%2021%20781%2016%20823%2023%20C866%2031%20902%2035%20944%2027%20C987%2019%201021%2030%201062%2025%20C1105%2020%201140%2014%201183%2022%20C1226%2030%201261%2034%201304%2027%20C1347%2020%201380%2016%201422%2023%20C1464%2030%201501%2035%201543%2027%20C1571%2022%201588%2022%201600%2024%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23ffffff%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22109%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22412%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22677%22%20cy%3D%229%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22928%22%20cy%3D%2213%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221214%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221455%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-off-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23f5f6f7%22%20d%3D%22M0%2034%20C38%2031%2065%2019%20105%2025%20C146%2031%20174%2019%20222%2023%20C265%2027%20291%2016%20344%2024%20C390%2031%20421%2022%20466%2027%20C512%2032%20545%2018%20596%2023%20C648%2029%20673%2020%20721%2026%20C772%2033%20807%2017%20858%2023%20C907%2029%20944%2020%20991%2026%20C1040%2033%201079%2021%201127%2024%20C1175%2027%201215%2016%201264%2023%20C1316%2031%201350%2020%201394%2026%20C1443%2032%201480%2018%201527%2024%20C1562%2028%201582%2026%201600%2027%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23f5f6f7%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2288%22%20cy%3D%2217%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22276%22%20cy%3D%2212%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22519%22%20cy%3D%2215%22%20rx%3D%2214%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22741%22%20cy%3D%2211%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221006%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221279%22%20cy%3D%2210%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221488%22%20cy%3D%2215%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-off-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23f5f6f7%22%20d%3D%22M0%2027%20C34%2024%2059%2033%2098%2029%20C142%2024%20177%2034%20216%2028%20C258%2021%20286%2030%20331%2026%20C375%2022%20407%2033%20448%2029%20C493%2025%20524%2018%20568%2024%20C615%2031%20650%2034%20692%2028%20C733%2022%20773%2029%20815%2025%20C856%2021%20891%2033%20933%2028%20C974%2023%201014%2017%201058%2024%20C1104%2031%201137%2027%201178%2024%20C1225%2020%201255%2031%201297%2027%20C1342%2023%201379%2016%201422%2024%20C1467%2032%201503%2025%201545%2028%20C1570%2030%201588%2031%201600%2029%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23f5f6f7%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22142%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22367%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22612%22%20cy%3D%2211%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22858%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221109%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221372%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-off-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23f5f6f7%22%20d%3D%22M0%2031%20C26%2036%2061%2019%2097%2025%20C137%2032%20165%2028%20202%2021%20C242%2014%20280%2029%20319%2025%20C359%2021%20391%2035%20431%2029%20C469%2023%20501%2016%20541%2022%20C581%2028%20616%2034%20658%2027%20C698%2020%20730%2029%20772%2025%20C817%2021%20846%2031%20889%2027%20C932%2023%20967%2014%201010%2022%20C1050%2029%201089%2035%201130%2027%20C1172%2018%201202%2030%201245%2024%20C1289%2018%201324%2032%201368%2027%20C1408%2023%201440%2016%201480%2022%20C1524%2028%201560%2034%201600%2026%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23f5f6f7%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2267%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22328%22%20cy%3D%2210%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22584%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22823%22%20cy%3D%2212%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221083%22%20cy%3D%229%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221339%22%20cy%3D%2213%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221551%22%20cy%3D%2212%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-off-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23f5f6f7%22%20d%3D%22M0%2024%20C42%2018%2073%2031%20116%2028%20C154%2025%20190%2015%20234%2022%20C277%2029%20312%2036%20352%2028%20C392%2020%20428%2031%20467%2026%20C509%2020%20544%2014%20587%2022%20C629%2030%20663%2033%20706%2027%20C747%2021%20781%2016%20823%2023%20C866%2031%20902%2035%20944%2027%20C987%2019%201021%2030%201062%2025%20C1105%2020%201140%2014%201183%2022%20C1226%2030%201261%2034%201304%2027%20C1347%2020%201380%2016%201422%2023%20C1464%2030%201501%2035%201543%2027%20C1571%2022%201588%2022%201600%2024%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23f5f6f7%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22109%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22412%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22677%22%20cy%3D%229%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22928%22%20cy%3D%2213%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221214%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221455%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-navy-a: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23061321%22%20d%3D%22M0%2034%20C38%2031%2065%2019%20105%2025%20C146%2031%20174%2019%20222%2023%20C265%2027%20291%2016%20344%2024%20C390%2031%20421%2022%20466%2027%20C512%2032%20545%2018%20596%2023%20C648%2029%20673%2020%20721%2026%20C772%2033%20807%2017%20858%2023%20C907%2029%20944%2020%20991%2026%20C1040%2033%201079%2021%201127%2024%20C1175%2027%201215%2016%201264%2023%20C1316%2031%201350%2020%201394%2026%20C1443%2032%201480%2018%201527%2024%20C1562%2028%201582%2026%201600%2027%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23061321%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2288%22%20cy%3D%2217%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22276%22%20cy%3D%2212%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22519%22%20cy%3D%2215%22%20rx%3D%2214%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22741%22%20cy%3D%2211%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221006%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221279%22%20cy%3D%2210%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221488%22%20cy%3D%2215%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-navy-b: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23061321%22%20d%3D%22M0%2027%20C34%2024%2059%2033%2098%2029%20C142%2024%20177%2034%20216%2028%20C258%2021%20286%2030%20331%2026%20C375%2022%20407%2033%20448%2029%20C493%2025%20524%2018%20568%2024%20C615%2031%20650%2034%20692%2028%20C733%2022%20773%2029%20815%2025%20C856%2021%20891%2033%20933%2028%20C974%2023%201014%2017%201058%2024%20C1104%2031%201137%2027%201178%2024%20C1225%2020%201255%2031%201297%2027%20C1342%2023%201379%2016%201422%2024%20C1467%2032%201503%2025%201545%2028%20C1570%2030%201588%2031%201600%2029%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23061321%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22142%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22367%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22612%22%20cy%3D%2211%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22858%22%20cy%3D%2214%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221109%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221372%22%20cy%3D%2215%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-navy-c: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23061321%22%20d%3D%22M0%2031%20C26%2036%2061%2019%2097%2025%20C137%2032%20165%2028%20202%2021%20C242%2014%20280%2029%20319%2025%20C359%2021%20391%2035%20431%2029%20C469%2023%20501%2016%20541%2022%20C581%2028%20616%2034%20658%2027%20C698%2020%20730%2029%20772%2025%20C817%2021%20846%2031%20889%2027%20C932%2023%20967%2014%201010%2022%20C1050%2029%201089%2035%201130%2027%20C1172%2018%201202%2030%201245%2024%20C1289%2018%201324%2032%201368%2027%20C1408%2023%201440%2016%201480%2022%20C1524%2028%201560%2034%201600%2026%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23061321%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%2267%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22328%22%20cy%3D%2210%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22584%22%20cy%3D%2214%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22823%22%20cy%3D%2212%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221083%22%20cy%3D%229%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221339%22%20cy%3D%2213%22%20rx%3D%2213%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221551%22%20cy%3D%2212%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
  --clearpeak-brush-navy-d: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%221600%22%20height%3D%2282%22%20viewBox%3D%220%200%201600%2082%22%20preserveAspectRatio%3D%22none%22%3E%0A%3Cpath%20fill%3D%22%23061321%22%20d%3D%22M0%2024%20C42%2018%2073%2031%20116%2028%20C154%2025%20190%2015%20234%2022%20C277%2029%20312%2036%20352%2028%20C392%2020%20428%2031%20467%2026%20C509%2020%20544%2014%20587%2022%20C629%2030%20663%2033%20706%2027%20C747%2021%20781%2016%20823%2023%20C866%2031%20902%2035%20944%2027%20C987%2019%201021%2030%201062%2025%20C1105%2020%201140%2014%201183%2022%20C1226%2030%201261%2034%201304%2027%20C1347%2020%201380%2016%201422%2023%20C1464%2030%201501%2035%201543%2027%20C1571%2022%201588%2022%201600%2024%20L1600%2082%20L0%2082%20Z%22%2F%3E%0A%3Cg%20fill%3D%22%23061321%22%20opacity%3D%22.98%22%3E%3Cellipse%20cx%3D%22109%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22412%22%20cy%3D%2213%22%20rx%3D%228%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22677%22%20cy%3D%229%22%20rx%3D%2211%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%22928%22%20cy%3D%2213%22%20rx%3D%227%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221214%22%20cy%3D%2210%22%20rx%3D%2212%22%20ry%3D%222%22%2F%3E%3Cellipse%20cx%3D%221455%22%20cy%3D%2212%22%20rx%3D%229%22%20ry%3D%222%22%2F%3E%0A%3Cpath%20d%3D%22M214%2015l25-5%2019%203-22%205z%22%2F%3E%3Cpath%20d%3D%22M936%2012l29-5%2018%203-24%205z%22%2F%3E%3Cpath%20d%3D%22M1510%2013l21-4%2014%202-18%205z%22%2F%3E%3C%2Fg%3E%0A%3C%2Fsvg%3E");
}

/* Remove the last remaining hard borders where a rough transition is used. */
.story,
.softwash-feature,
.projects,
.reviews--reworked,
.process--reworked,
.service-area,
.faq {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

/* These sections now own the outgoing painted/torn edge. */
.hero,
.story,
.services,
.softwash-feature,
.projects,
.reviews--reworked,
.process--reworked,
.service-area,
.faq {
  position: relative;
  isolation: isolate;
}

/* Replace the earlier repeated zig-zag edge with larger, less mechanical
   brush/torn-paper silhouettes. The incoming section color is painted into
   the bottom of the outgoing section, hiding the normal straight seam. */
.hero::after,
.story::after,
.services::after,
.softwash-feature::after,
.projects::after,
.reviews--reworked::after,
.process--reworked::after,
.service-area::after,
.faq::after {
  position: absolute;
  z-index: 15;
  right: -3px;
  bottom: -1px;
  left: -3px;
  height: 58px;
  content: "";
  pointer-events: none;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

/* Hero -> trusted equipment strip: intentionally shallow. */
.hero::after {
  height: 34px;
  background-image: var(--clearpeak-brush-white-b);
}

/* Family story -> dark Services. */
.story::after {
  height: 64px;
  background-image: var(--clearpeak-brush-navy-a);
}

/* Services -> light Soft-wash feature. */
.services::after {
  height: 61px;
  background-image: var(--clearpeak-brush-off-c);
}

/* Soft-wash feature -> white field/gallery. Keep this one softer because
   both adjoining surfaces are light. */
.softwash-feature::after {
  height: 46px;
  background-image: var(--clearpeak-brush-white-d);
}

/* Projects -> off-white customer review paper. This sits behind the floating
   Let's Talk ad, so the ad still bridges the two sections cleanly. */
.projects::after {
  height: 66px;
  background-image: var(--clearpeak-brush-off-a);
}

/* Reviews -> white Process. */
.reviews--reworked::after {
  height: 55px;
  background-image: var(--clearpeak-brush-white-c);
}

/* Process -> navy Service Area. */
.process--reworked::after {
  height: 64px;
  background-image: var(--clearpeak-brush-navy-d);
}

/* Service Area -> off-white FAQ. */
.service-area::after {
  height: 61px;
  background-image: var(--clearpeak-brush-off-b);
}

/* FAQ -> navy closing CTA. */
.faq::after {
  height: 64px;
  background-image: var(--clearpeak-brush-navy-c);
}

/* The logo proof bar remains a deliberate, crisp badge strip. Its bottom
   transition into the Family section stays clean so the page does not become
   distressed at every single boundary. */
.proof {
  border-bottom: 1px solid rgba(var(--primary-rgb),.10);
}

/* Ensure the floating contact advertisement remains above the project/review
   brush edge. */
.contact-float-shell {
  z-index: 30;
}

/* The old V4 upward clip-path seams stay disabled. */
.reviews--reworked::before,
.process--reworked::before,
.service-area::before,
.faq::before,
.final-cta::before {
  display: none !important;
}

@media (max-width: 860px) {
  .hero::after { height: 24px; }
  .story::after,
  .services::after,
  .projects::after,
  .process--reworked::after,
  .service-area::after,
  .faq::after { height: 40px; }
  .softwash-feature::after,
  .reviews--reworked::after { height: 32px; }
}

@media (max-width: 560px) {
  .hero::after { height: 18px; }
  .story::after,
  .services::after,
  .projects::after,
  .process--reworked::after,
  .service-area::after,
  .faq::after { height: 29px; }
  .softwash-feature::after,
  .reviews--reworked::after { height: 24px; }
}

/* ==========================================================
   HOMEPAGE V8 — CLEAN TORN / PAINTED EDGE FIX
   Targeted pass only: removes detached edge debris, carries the
   destination section texture into each transition, and lets the
   final truck CTA tear directly into the FAQ instead of using a
   solid navy shelf.
   ========================================================== */

/* The V7 SVG brush strips contained detached ellipses / shards.
   V8 uses one continuous clipped surface for every transition. */
.hero::after,
.story::after,
.services::after,
.softwash-feature::after,
.projects::after,
.reviews--reworked::after,
.process--reworked::after,
.service-area::after,
.faq::after {
  right: -2px;
  bottom: -2px;
  left: -2px;
  content: "";
  pointer-events: none;
  background-repeat: repeat;
  background-position: 0 0;
  background-size: 520px 520px;
  background-image: none;
}

/* Hero -> proof strip. Keep this one restrained because the proof
   strip intentionally behaves like a crisp equipment badge band. */
.hero::after {
  height: 28px;
  background-color: var(--white);
  clip-path: polygon(
    0 48%, 6% 45%, 12% 50%, 20% 43%, 29% 47%, 38% 41%,
    47% 46%, 57% 43%, 66% 49%, 76% 42%, 87% 46%, 94% 43%,
    100% 47%, 100% 100%, 0 100%
  );
}

/* Family story -> Services. The navy paper texture itself forms the
   torn edge, so there is no flat dark band beneath the tear. */
.story::after {
  height: 62px;
  background-color: var(--navy-950);
  background-image: var(--clearpeak-paper-dark);
  background-position: 113px -74px;
  clip-path: polygon(
    0 43%, 4% 45%, 9% 36%, 14% 40%, 19% 39%, 25% 31%,
    31% 35%, 38% 44%, 45% 41%, 51% 33%, 57% 38%, 64% 36%,
    70% 45%, 77% 41%, 84% 34%, 91% 39%, 96% 36%, 100% 41%,
    100% 100%, 0 100%
  );
}

/* Services -> Soft-wash feature. */
.services::after {
  height: 60px;
  background-color: var(--off-white);
  background-image: var(--clearpeak-paper-light);
  background-position: -181px -126px;
  clip-path: polygon(
    0 36%, 5% 39%, 10% 31%, 17% 35%, 22% 43%, 29% 38%,
    35% 41%, 42% 32%, 48% 36%, 54% 45%, 61% 40%, 68% 32%,
    75% 37%, 82% 35%, 88% 44%, 94% 38%, 100% 41%,
    100% 100%, 0 100%
  );
}

/* Soft-wash feature -> Projects. Both are light, so use a lower-profile
   tear and continue the same paper grain across the boundary. */
.softwash-feature::after {
  height: 43px;
  background-color: var(--white);
  background-image: var(--clearpeak-paper-light);
  background-position: 72px -218px;
  clip-path: polygon(
    0 47%, 7% 43%, 13% 48%, 20% 39%, 28% 44%, 35% 42%,
    43% 49%, 51% 40%, 58% 45%, 66% 38%, 74% 44%, 82% 41%,
    90% 47%, 96% 42%, 100% 45%, 100% 100%, 0 100%
  );
}

/* Projects -> Reviews. This fixes the visible straight horizontal band
   behind the floating Let's Talk ad by carrying the review paper texture
   directly into the torn edge. */
.projects::after {
  height: 68px;
  background-color: var(--off-white);
  background-image: var(--clearpeak-paper-light);
  background-position: -96px -314px;
  clip-path: polygon(
    0 42%, 5% 37%, 11% 40%, 16% 32%, 22% 35%, 27% 44%,
    34% 41%, 40% 34%, 46% 39%, 52% 31%, 58% 36%, 64% 43%,
    71% 39%, 77% 33%, 83% 37%, 89% 45%, 95% 38%, 100% 42%,
    100% 100%, 0 100%
  );
}

/* Reviews -> Process. */
.reviews--reworked::after {
  height: 55px;
  background-color: var(--white);
  background-image: var(--clearpeak-paper-light);
  background-position: 158px -64px;
  clip-path: polygon(
    0 39%, 6% 44%, 12% 35%, 19% 38%, 25% 33%, 31% 42%,
    38% 37%, 44% 45%, 50% 35%, 57% 40%, 63% 31%, 69% 37%,
    76% 43%, 83% 36%, 90% 40%, 96% 34%, 100% 39%,
    100% 100%, 0 100%
  );
}

/* Process -> Service area. No detached navy chips; this is one continuous
   navy paper silhouette. */
.process--reworked::after {
  height: 65px;
  background-color: var(--navy-950);
  background-image: var(--clearpeak-paper-dark);
  background-position: -241px -191px;
  clip-path: polygon(
    0 44%, 4% 39%, 9% 42%, 15% 34%, 21% 38%, 27% 46%,
    33% 40%, 39% 36%, 46% 42%, 52% 33%, 59% 38%, 65% 35%,
    72% 44%, 79% 39%, 85% 32%, 91% 37%, 96% 35%, 100% 40%,
    100% 100%, 0 100%
  );
}

/* Service area -> FAQ. */
.service-area::after {
  height: 63px;
  background-color: var(--off-white);
  background-image: var(--clearpeak-paper-light);
  background-position: 206px -283px;
  clip-path: polygon(
    0 37%, 5% 41%, 11% 34%, 17% 38%, 23% 31%, 29% 36%,
    35% 44%, 42% 39%, 48% 33%, 55% 38%, 61% 35%, 68% 43%,
    74% 37%, 81% 32%, 87% 39%, 93% 35%, 100% 40%,
    100% 100%, 0 100%
  );
}

/* FAQ -> final CTA is handled by the PHOTO SECTION ITSELF below.
   This removes the solid navy shelf visible in V7. */
.faq::after {
  display: none !important;
}

/* Pull the actual truck/photo CTA upward and cut its own top edge. The FAQ
   paper therefore tears directly into the photograph instead of into a
   flat navy spacer. */
.final-cta {
  position: relative;
  z-index: 3;
  margin-top: -48px;
  clip-path: polygon(
    0 8.6%, 4% 8.0%, 9% 8.5%, 14% 7.1%, 20% 7.8%, 26% 6.8%,
    32% 7.6%, 39% 8.4%, 46% 7.3%, 52% 7.9%, 59% 6.9%, 66% 7.7%,
    73% 7.2%, 80% 8.3%, 87% 7.5%, 93% 8.0%, 100% 7.2%,
    100% 100%, 0 100%
  );
}

/* Keep the floating CTA cleanly above the projects/reviews transition. */
.contact-float-shell {
  z-index: 40;
}

/* Prevent an old border/background seam from reappearing underneath the
   new clipped transitions. */
.story,
.services,
.softwash-feature,
.projects,
.reviews--reworked,
.process--reworked,
.service-area,
.faq,
.final-cta {
  border-top: 0 !important;
  border-bottom: 0 !important;
}

@media (max-width: 860px) {
  .hero::after { height: 20px; }
  .story::after,
  .services::after,
  .projects::after,
  .process--reworked::after,
  .service-area::after { height: 42px; }
  .softwash-feature::after,
  .reviews--reworked::after { height: 30px; }

  .final-cta {
    margin-top: -34px;
    clip-path: polygon(
      0 6.7%, 8% 6.0%, 16% 6.8%, 25% 5.5%, 34% 6.3%,
      44% 5.8%, 54% 6.6%, 64% 5.6%, 74% 6.4%, 84% 5.9%,
      92% 6.6%, 100% 5.8%, 100% 100%, 0 100%
    );
  }
}

@media (max-width: 560px) {
  .hero::after { height: 16px; }
  .story::after,
  .services::after,
  .projects::after,
  .process--reworked::after,
  .service-area::after { height: 31px; }
  .softwash-feature::after,
  .reviews--reworked::after { height: 23px; }

  .final-cta {
    margin-top: -25px;
    clip-path: polygon(
      0 5.2%, 10% 4.7%, 20% 5.3%, 31% 4.3%, 42% 5.0%,
      53% 4.5%, 64% 5.2%, 75% 4.4%, 86% 5.1%, 94% 4.6%,
      100% 5.0%, 100% 100%, 0 100%
    );
  }
}

/* ==========================================================
   V9 MICRO FIX — STORY -> SERVICES TRANSITION
   The old transition painted a flat navy strip inside .story.
   That strip could never match the Services radial/light effect,
   which created the visible horizontal shelf. The Services section
   now owns its own torn top edge so the actual Services background
   and bulb illumination continue right through the transition.
   ========================================================== */

/* Remove the flat navy overlay that caused the hard horizontal line. */
.story::after {
  display: none !important;
}

/* Pull Services upward beneath the story and clip the REAL Services
   surface into a torn/painted top edge. No separate navy filler band. */
.services {
  margin-top: -46px;
  padding-top: 162px; /* original 116px + 46px overlap */
  clip-path: polygon(
    0 42px,
    4% 39px,
    9% 43px,
    15% 34px,
    21% 38px,
    27% 45px,
    34% 40px,
    40% 36px,
    47% 43px,
    53% 35px,
    60% 39px,
    67% 36px,
    74% 44px,
    81% 39px,
    87% 34px,
    93% 40px,
    97% 37px,
    100% 41px,
    100% 100%,
    0 100%
  );
}

@media (max-width: 860px) {
  .services {
    margin-top: -34px;
    padding-top: 124px; /* original tablet 90px + 34px */
    clip-path: polygon(
      0 31px, 8% 28px, 16% 32px, 25% 25px, 34% 30px,
      44% 26px, 54% 32px, 64% 27px, 74% 31px, 84% 26px,
      92% 31px, 100% 27px, 100% 100%, 0 100%
    );
  }
}

@media (max-width: 560px) {
  .services {
    margin-top: -25px;
    padding-top: 115px; /* tablet/mobile service padding + overlap */
    clip-path: polygon(
      0 23px, 10% 20px, 20% 24px, 31% 18px, 42% 22px,
      53% 19px, 64% 24px, 75% 19px, 86% 23px, 94% 20px,
      100% 22px, 100% 100%, 0 100%
    );
  }
}

/* ==========================================================
   V10 MICRO FIX — SERVICES -> SOFT-WASH TRANSITION
   The outgoing Services pseudo-edge was painting a separate light strip
   above the real Soft-wash section. Because the soft-wash surface also has
   its own subtle radial shading, the two surfaces met at a faint hard line.
   The Soft-wash section now owns its torn top edge so its REAL paper/gray
   surface continues through the transition with no intermediate shelf.
   ========================================================== */

/* Remove the separate light strip painted inside Services. */
.services::after {
  display: none !important;
}

/* Pull the real Soft-wash section upward and cut that actual surface into
   the rough edge. This keeps its paper texture + subtle gray shading unified. */
.softwash-feature {
  z-index: 3;
  margin-top: -44px;
  clip-path: polygon(
    0 39px,
    5% 41px,
    11% 35px,
    17% 38px,
    23% 32px,
    29% 37px,
    36% 43px,
    43% 38px,
    49% 34px,
    55% 39px,
    62% 35px,
    69% 42px,
    76% 37px,
    82% 33px,
    88% 39px,
    94% 35px,
    100% 40px,
    100% 100%,
    0 100%
  );
}

/* Preserve the visual breathing room that existed before the overlap. */
.softwash-feature__inner {
  padding-top: 162px; /* original 118px + 44px overlap */
}

@media (max-width: 860px) {
  .softwash-feature {
    margin-top: -34px;
    clip-path: polygon(
      0 30px, 8% 27px, 16% 31px, 25% 25px, 34% 29px,
      44% 26px, 54% 31px, 64% 27px, 74% 30px, 84% 26px,
      92% 31px, 100% 27px, 100% 100%, 0 100%
    );
  }

  .softwash-feature__inner {
    padding-top: 152px; /* 118px + 34px */
  }
}

@media (max-width: 560px) {
  .softwash-feature {
    margin-top: -25px;
    clip-path: polygon(
      0 22px, 10% 19px, 20% 23px, 31% 18px, 42% 21px,
      53% 19px, 64% 23px, 75% 19px, 86% 22px, 94% 20px,
      100% 22px, 100% 100%, 0 100%
    );
  }

  .softwash-feature__inner {
    padding-top: 143px; /* 118px + 25px */
  }
}

/* ==========================================================
   V11 MICRO FIX — SOFT-WASH -> PROJECTS TRANSITION
   The previous outgoing Soft-wash pseudo-edge painted a separate white
   strip above the real Projects surface. Because Projects has its own
   paper texture + faint top shading, that created a visible horizontal
   band. The Projects section now owns the torn top edge so its REAL
   textured background continues directly through the transition.
   ========================================================== */

/* Remove the separate white filler strip inside Soft-wash. */
.softwash-feature::after {
  display: none !important;
}

/* Pull the actual Projects section upward and cut its real surface into
   the torn edge. The projects paper texture and subtle top shading now
   continue through the edge with no intermediate white shelf. */
.projects {
  z-index: 4;
  margin-top: -42px;
  padding-top: 134px; /* original 92px + 42px overlap */
  clip-path: polygon(
    0 37px,
    4% 39px,
    9% 34px,
    15% 38px,
    21% 32px,
    28% 36px,
    34% 41px,
    41% 36px,
    48% 33px,
    55% 38px,
    62% 34px,
    69% 40px,
    76% 36px,
    82% 32px,
    89% 38px,
    95% 34px,
    100% 37px,
    100% 100%,
    0 100%
  );
}

@media (max-width: 860px) {
  .projects {
    margin-top: -32px;
    padding-top: 104px; /* original tablet 72px + 32px overlap */
    clip-path: polygon(
      0 28px, 8% 25px, 16% 29px, 25% 23px, 34% 27px,
      44% 24px, 54% 29px, 64% 25px, 74% 28px, 84% 24px,
      92% 29px, 100% 25px, 100% 100%, 0 100%
    );
  }
}

@media (max-width: 560px) {
  .projects {
    margin-top: -24px;
    padding-top: 96px; /* tablet/mobile 72px + 24px overlap */
    clip-path: polygon(
      0 21px, 10% 18px, 20% 22px, 31% 17px, 42% 20px,
      53% 18px, 64% 22px, 75% 18px, 86% 21px, 94% 19px,
      100% 21px, 100% 100%, 0 100%
    );
  }
}

/* ==========================================================
   V12 MICRO FIX — PROJECTS -> REVIEWS TRANSITION
   Same ownership fix used on the previous two light transitions:
   remove the separate off-white filler edge from Projects and let
   the REAL Reviews paper surface form the torn top edge itself.
   This removes the faint horizontal shelf visible beneath the
   project reel / floating Let's Talk advertisement.
   ========================================================== */

/* The old outgoing Projects pseudo-edge was a separate textured strip.
   Even though its colors were close, it could not perfectly match the
   Reviews section's real off-white + radial paper surface. */
.projects::after {
  display: none !important;
}

/* Pull Reviews upward behind the floating CTA and clip the actual Reviews
   background into the torn edge. Because the section itself is clipped,
   its paper texture and subtle shading continue through the transition. */
.reviews--reworked {
  z-index: 5;
  margin-top: -44px;
  clip-path: polygon(
    0 39px,
    5% 41px,
    11% 35px,
    17% 38px,
    23% 33px,
    29% 37px,
    36% 42px,
    43% 37px,
    50% 34px,
    57% 39px,
    64% 35px,
    71% 41px,
    78% 36px,
    84% 33px,
    90% 38px,
    96% 35px,
    100% 39px,
    100% 100%,
    0 100%
  );
}

/* Preserve the review content's original page position after pulling the
   section upward. The floating CTA continues to straddle the transition. */
.reviews-v3 {
  padding-top: 210px; /* original 166px + 44px overlap */
}

@media (max-width: 860px) {
  .reviews--reworked {
    margin-top: -31px;
    clip-path: polygon(
      0 27px, 8% 25px, 16% 29px, 25% 23px, 34% 27px,
      44% 24px, 54% 29px, 64% 25px, 74% 28px, 84% 24px,
      92% 29px, 100% 25px, 100% 100%, 0 100%
    );
  }

  .reviews-v3 {
    padding-top: 97px; /* existing tablet 66px + 31px overlap */
  }
}

@media (max-width: 560px) {
  .reviews--reworked {
    margin-top: -23px;
    clip-path: polygon(
      0 20px, 10% 18px, 20% 22px, 31% 17px, 42% 20px,
      53% 18px, 64% 22px, 75% 18px, 86% 21px, 94% 19px,
      100% 20px, 100% 100%, 0 100%
    );
  }

  .reviews-v3 {
    padding-top: 89px; /* existing mobile 66px + 23px overlap */
  }
}

/* ==========================================================
   V13 MICRO FIX — PROCESS -> SERVICE AREA GRID BLEND
   The rough navy edge itself is fine, but the service-area grid began
   at full strength immediately below it. That first horizontal grid row
   read like a hard CSS seam. Fade the grid/scuffs in gradually so the
   navy surface stays uninterrupted near the torn edge.
   ========================================================== */

.service-area__grid {
  opacity: .10;
  background-position: 0 26px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 82px,
    rgba(0,0,0,.08) 112px,
    rgba(0,0,0,.28) 150px,
    rgba(0,0,0,.62) 205px,
    #000 270px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    transparent 82px,
    rgba(0,0,0,.08) 112px,
    rgba(0,0,0,.28) 150px,
    rgba(0,0,0,.62) 205px,
    #000 270px
  );
}

/* Fade the secondary scuff layer slightly as well so no single scratch
   starts exactly at the transition and recreates another false seam. */
.service-area__scuffs {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.12) 58px,
    rgba(0,0,0,.55) 130px,
    #000 215px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.12) 58px,
    rgba(0,0,0,.55) 130px,
    #000 215px
  );
}

@media (max-width: 860px) {
  .service-area__grid {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, transparent 54px, rgba(0,0,0,.34) 105px, #000 180px);
    mask-image: linear-gradient(to bottom, transparent 0, transparent 54px, rgba(0,0,0,.34) 105px, #000 180px);
  }

  .service-area__scuffs {
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 70px, #000 150px);
    mask-image: linear-gradient(to bottom, transparent 0, rgba(0,0,0,.3) 70px, #000 150px);
  }
}

/* ==========================================================
   V14 MICRO FIX — REMOVE SERVICE-AREA HORIZONTAL GRID SEAM
   The visible line was not the torn edge itself. It was the first
   horizontal row of the service-area grid reading as a full-width seam.
   Keep the vertical drafting lines near the top, but delay/fade the
   horizontal rows until farther inside the section.
   ========================================================== */

/* Near the torn edge, only subtle VERTICAL drafting lines are allowed.
   This prevents any full-width rule from visually recreating a hard seam. */
.service-area__grid {
  opacity: .10;
  background-image:
    linear-gradient(90deg, rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 68px 68px;
  background-position: 0 0;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.16) 52px,
    rgba(0,0,0,.46) 112px,
    rgba(0,0,0,.78) 164px,
    #000 205px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.16) 52px,
    rgba(0,0,0,.46) 112px,
    rgba(0,0,0,.78) 164px,
    #000 205px
  );
}

/* Bring the HORIZONTAL drafting rows back only after we've moved well
   below the torn transition. The 34px offset means the first row does not
   sit directly on the top edge of this delayed layer either. */
.service-area__grid::after {
  position: absolute;
  inset: 170px 0 0;
  content: "";
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.22) 1px, transparent 1px);
  background-size: 68px 68px;
  background-position: 0 34px;
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.22) 44px,
    rgba(0,0,0,.62) 92px,
    #000 145px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.22) 44px,
    rgba(0,0,0,.62) 92px,
    #000 145px
  );
}

/* Keep scratches from creating a different false horizontal boundary. */
.service-area__scuffs {
  -webkit-mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.08) 70px,
    rgba(0,0,0,.42) 142px,
    #000 220px
  );
  mask-image: linear-gradient(
    to bottom,
    transparent 0,
    rgba(0,0,0,.08) 70px,
    rgba(0,0,0,.42) 142px,
    #000 220px
  );
}

@media (max-width: 860px) {
  .service-area__grid::after {
    inset: 125px 0 0;
  }
}

@media (max-width: 560px) {
  .service-area__grid::after {
    inset: 100px 0 0;
  }
}

/* ==========================================================
   V15 MICRO FIX — PROCESS -> SERVICE AREA TRANSITION
   The visible hard horizontal line was the bottom edge of the
   separate navy transition layer painted by .process::after.
   That layer could not perfectly match the Service Area's real
   radial-gradient / textured surface, so its bottom edge read as
   a straight seam. The Service Area now owns the torn top edge.
   ========================================================== */

/* Remove the separate navy transition strip from Process. */
.process--reworked::after {
  display: none !important;
}

/* Pull the ACTUAL Service Area upward and clip its real background into
   the torn silhouette. The radial lighting, paper texture, and section
   color now continue through the transition without a flat filler band. */
.service-area {
  position: relative;
  z-index: 4;
  margin-top: -48px;
  clip-path: polygon(
    0 43px,
    4% 40px,
    9% 44px,
    15% 36px,
    21% 40px,
    27% 47px,
    34% 41px,
    40% 37px,
    47% 43px,
    53% 35px,
    60% 40px,
    66% 37px,
    73% 45px,
    80% 40px,
    86% 34px,
    92% 39px,
    97% 37px,
    100% 41px,
    100% 100%,
    0 100%
  );
}

/* Compensate for the 48px overlap so the Service Area content remains
   in the same visual position it occupied before this seam fix. */
.service-area__inner--v4 {
  padding-top: 150px; /* original 102px + 48px overlap */
}

@media (max-width: 860px) {
  .service-area {
    margin-top: -34px;
    clip-path: polygon(
      0 30px, 8% 27px, 16% 31px, 25% 25px, 34% 29px,
      44% 26px, 54% 31px, 64% 27px, 74% 30px, 84% 26px,
      92% 31px, 100% 27px, 100% 100%, 0 100%
    );
  }

  .service-area__inner--v4 {
    padding-top: 116px; /* existing tablet 82px + 34px */
  }
}

@media (max-width: 560px) {
  .service-area {
    margin-top: -25px;
    clip-path: polygon(
      0 22px, 10% 19px, 20% 23px, 31% 18px, 42% 21px,
      53% 19px, 64% 23px, 75% 19px, 86% 22px, 94% 20px,
      100% 22px, 100% 100%, 0 100%
    );
  }

  .service-area__inner--v4 {
    padding-top: 107px; /* tablet/mobile 82px + 25px */
  }
}

/* ==========================================================
   V16 — UNIFIED FINAL CTA + FOOTER CLOSING COMPOSITION
   The truck CTA and footer now share one continuous dark canvas.
   The photo fades naturally into the footer instead of ending at
   a hard horizontal section boundary.
   ========================================================== */

/* The wrapper owns the FAQ -> closing-section torn edge. */
.site-closing {
  position: relative;
  z-index: 5;
  margin-top: -48px;
  overflow: hidden;
  color: var(--white);
  background:
    radial-gradient(circle at 64% 10%, rgba(var(--primary-light-rgb),.30), transparent 34%),
    #030d16;
  clip-path: polygon(
    0 43px,
    4% 40px,
    9% 44px,
    15% 36px,
    21% 40px,
    27% 47px,
    34% 41px,
    40% 37px,
    47% 43px,
    53% 35px,
    60% 40px,
    66% 37px,
    73% 45px,
    80% 40px,
    86% 34px,
    92% 39px,
    97% 37px,
    100% 41px,
    100% 100%,
    0 100%
  );
  isolation: isolate;
}

/* Carry the same distressed paper/scuff language through CTA + footer. */
.site-closing::before {
  position: absolute;
  z-index: 1;
  inset: 0;
  content: "";
  pointer-events: none;
  opacity: .34;
  background-image: var(--clearpeak-paper-dark);
  background-position: -140px 35px;
  background-size: 560px 560px;
}

/* Old CTA edge is no longer needed; the wrapper owns the transition. */
.final-cta::before {
  display: none !important;
}

.final-cta {
  position: relative;
  z-index: 2;
  min-height: 620px;
  margin-top: 0 !important;
  overflow: visible;
  background: transparent !important;
  clip-path: none !important;
  isolation: isolate;
}

/* Let the fleet image continue BELOW the CTA and disappear into the footer. */
.final-cta__media {
  z-index: 0;
  top: 0;
  right: 0;
  bottom: -190px;
  left: 0;
}

.final-cta__media img {
  object-position: 57% 48%;
  filter: saturate(.92) contrast(1.02);
}

/* Horizontal readability + a long vertical fade into the exact footer navy. */
.final-cta__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(3,13,22,.99) 0%,
      rgba(3,13,22,.96) 30%,
      rgba(3,13,22,.79) 50%,
      rgba(3,13,22,.42) 72%,
      rgba(3,13,22,.18) 100%
    ),
    linear-gradient(
      180deg,
      rgba(3,13,22,.08) 0%,
      rgba(3,13,22,.16) 34%,
      rgba(3,13,22,.42) 58%,
      rgba(3,13,22,.76) 74%,
      rgba(3,13,22,.94) 87%,
      #030d16 100%
    );
}

.final-cta__inner {
  position: relative;
  z-index: 3;
  min-height: 620px;
  padding-block: 120px 98px;
}

/* The footer is no longer its own visible rectangle. */
.site-footer {
  position: relative;
  z-index: 3;
  color: var(--white);
  background: transparent !important;
  border-top: 0 !important;
}

.site-footer__top {
  grid-template-columns: 1.5fr .72fr .72fr 1fr;
  gap: 68px;
  padding-block: 54px 58px;
}

.footer-brand img {
  width: 62px;
  height: 62px;
}

.footer-brand strong {
  font-size: 1.03rem;
}

.site-footer__brand p {
  max-width: 410px;
  color: rgba(255,255,255,.54);
  font-size: .82rem;
}

.site-footer__column a,
.site-footer__column span {
  color: rgba(255,255,255,.69);
  font-size: .79rem;
}

/* Keep only a subtle lower utility divider — no divider between CTA/footer. */
.site-footer__bottom {
  min-height: 72px;
  border-top-color: rgba(255,255,255,.075);
}

@media (max-width: 1120px) {
  .site-footer__top {
    gap: 44px;
  }
}

@media (max-width: 860px) {
  .site-closing {
    margin-top: -34px;
    clip-path: polygon(
      0 30px, 8% 27px, 16% 31px, 25% 25px, 34% 29px,
      44% 26px, 54% 31px, 64% 27px, 74% 30px, 84% 26px,
      92% 31px, 100% 27px, 100% 100%, 0 100%
    );
  }

  .final-cta {
    min-height: 610px;
  }

  .final-cta__media {
    bottom: -125px;
  }

  .final-cta__media img {
    object-position: 72% 50%;
  }

  .final-cta__media::after {
    background:
      linear-gradient(90deg, rgba(3,13,22,.78), rgba(3,13,22,.34)),
      linear-gradient(
        180deg,
        rgba(3,13,22,.34) 0%,
        rgba(3,13,22,.62) 44%,
        rgba(3,13,22,.90) 76%,
        #030d16 100%
      );
  }

  .final-cta__inner {
    min-height: 610px;
    align-items: flex-end;
    padding-block: 105px 76px;
  }

  .site-footer__top {
    grid-template-columns: 1fr 1fr;
    gap: 42px 34px;
    padding-block: 48px 46px;
  }

  .site-footer__brand {
    grid-column: 1 / -1;
  }
}

@media (max-width: 560px) {
  .site-closing {
    margin-top: -25px;
    clip-path: polygon(
      0 22px, 10% 19px, 20% 23px, 31% 18px, 42% 21px,
      53% 19px, 64% 23px, 75% 19px, 86% 22px, 94% 20px,
      100% 22px, 100% 100%, 0 100%
    );
  }

  .final-cta {
    min-height: 590px;
  }

  .final-cta__media {
    bottom: -90px;
  }

  .final-cta__inner {
    min-height: 590px;
    padding-block: 92px 68px;
  }

  .site-footer__top {
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 42px 38px;
  }

  .site-footer__brand {
    grid-column: auto;
  }
}


/* ==========================================================
   V17 — HARO-INSPIRED SERVICE AREA SIMPLIFICATION
   Replaces the word-heavy split layout with a strong centered
   headline, a compact Maine location run, and one simple
   statewide coverage band. V15 still owns the torn top edge.
   ========================================================== */

.service-area-v5 {
  position: relative;
  z-index: 2;
  min-height: 620px;
  padding-block: 148px 112px;
}

.service-area-v5__heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.service-area-v5__heading .service-area__kicker {
  margin-bottom: 14px;
}

.service-area-v5 h2 {
  max-width: 980px;
  margin-inline: auto;
  font-size: clamp(4rem, 5.9vw, 6.45rem);
  line-height: .87;
}

.service-area-v5__heading > p {
  margin: 21px 0 0;
  color: rgba(255,255,255,.67);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.55;
  text-transform: uppercase;
}

.service-area-v5__cities {
  display: flex;
  max-width: 1120px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 26px;
  margin: 35px auto 0;
  padding: 24px 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.service-area-v5__cities span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.91);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-area-v5__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 15px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-v5__coverage {
  position: relative;
  display: grid;
  max-width: 1120px;
  min-height: 148px;
  grid-template-columns: minmax(260px, .9fr) minmax(360px, 1.15fr) auto;
  align-items: center;
  gap: 34px;
  margin: 34px auto 0;
  padding: 28px 31px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.16);
  background:
    linear-gradient(90deg, rgba(255,255,255,.055), rgba(255,255,255,.026)),
    rgba(var(--primary-light-rgb),.30);
  box-shadow: 0 18px 36px rgba(0,0,0,.12);
  backdrop-filter: blur(4px);
}

.service-area-v5__coverage::before {
  position: absolute;
  top: 0;
  left: 0;
  width: 118px;
  height: 6px;
  content: "";
  background: var(--aqua);
}

.service-area-v5__coverage::after {
  position: absolute;
  z-index: -1;
  right: -22px;
  bottom: -33px;
  content: "MAINE";
  color: rgba(255,255,255,.035);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 9rem;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .7;
  pointer-events: none;
}

.service-area-v5__coverage-copy {
  display: grid;
  gap: 6px;
}

.service-area-v5__coverage-copy > span {
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.service-area-v5__coverage-copy > strong {
  max-width: 335px;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 2rem;
  font-weight: 800;
  line-height: .95;
  text-transform: uppercase;
}

.service-area-v5__types {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  border-left: 1px solid rgba(255,255,255,.12);
}

.service-area-v5__types span {
  position: relative;
  display: flex;
  min-height: 54px;
  align-items: center;
  justify-content: center;
  padding: 0 18px 0 34px;
  color: rgba(255,255,255,.83);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  text-align: center;
}

.service-area-v5__types span + span {
  border-left: 1px solid rgba(255,255,255,.12);
}

.service-area-v5__types span::before {
  position: absolute;
  left: 18px;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

.service-area-v5__coverage .button {
  min-width: 190px;
  min-height: 56px;
  padding-inline: 21px;
  white-space: nowrap;
}

/* The old V4 service-area content is no longer in the HTML. These resets
   keep any inherited sizing rules from influencing the simplified V17 block. */
.service-area-v5 .service-area__kicker,
.service-area-v5 h2 {
  position: relative;
  z-index: 2;
}

/* Reduce the giant ambient MAINE word because V17 also carries a smaller
   MAINE watermark inside the coverage band. */
.service-area > .service-area__state-word {
  right: -1vw;
  bottom: -1.5vw;
  opacity: .62;
  font-size: clamp(12rem, 19vw, 24rem);
}

@media (max-width: 1120px) {
  .service-area-v5__coverage {
    grid-template-columns: minmax(230px,.85fr) 1.15fr;
  }

  .service-area-v5__coverage .button {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 245px;
  }
}

@media (max-width: 860px) {
  .service-area-v5 {
    min-height: 0;
    padding-block: 114px 88px;
  }

  .service-area-v5 h2 {
    font-size: clamp(3.4rem, 14.2vw, 4.75rem);
  }

  .service-area-v5__heading > p {
    max-width: 520px;
    margin-inline: auto;
    font-size: .69rem;
  }

  .service-area-v5__cities {
    gap: 12px 20px;
    margin-top: 29px;
    padding: 21px 8px;
  }

  .service-area-v5__cities span {
    font-size: .73rem;
  }

  .service-area-v5__coverage {
    display: block;
    margin-top: 28px;
    padding: 29px 25px 25px;
  }

  .service-area-v5__coverage-copy > strong {
    max-width: 480px;
    font-size: 2.15rem;
  }

  .service-area-v5__types {
    margin-top: 25px;
    border-top: 1px solid rgba(255,255,255,.12);
    border-left: 0;
  }

  .service-area-v5__types span {
    min-height: 64px;
  }

  .service-area-v5__coverage .button {
    width: 100%;
    margin-top: 24px;
  }
}

@media (max-width: 560px) {
  .service-area-v5 {
    padding-block: 104px 78px;
  }

  .service-area-v5 h2 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .service-area-v5__heading > p {
    font-size: .64rem;
    line-height: 1.7;
  }

  .service-area-v5__cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: stretch;
    gap: 13px 14px;
    padding-inline: 0;
  }

  .service-area-v5__cities span {
    white-space: normal;
  }

  .service-area-v5__coverage {
    padding-inline: 21px;
  }

  .service-area-v5__types {
    grid-template-columns: 1fr;
  }

  .service-area-v5__types span {
    justify-content: flex-start;
    min-height: 49px;
    padding-left: 31px;
  }

  .service-area-v5__types span + span {
    border-top: 1px solid rgba(255,255,255,.12);
    border-left: 0;
  }

  .service-area-v5__types span::before {
    left: 10px;
  }

  .service-area-v5__coverage::after {
    font-size: 6.2rem;
  }
}


/* ==========================================================
   V18 — MAINE MAP SERVICE AREA
   Keeps the clean V17 headline/city rhythm, then adds a large
   branded Maine coverage map inspired by premium contractor sites.
   The CLEARPEAK logo marks the Central Maine home base; aqua markers
   represent coverage areas rather than office locations.
   ========================================================== */

.service-area-v6 {
  position: relative;
  z-index: 2;
  min-height: 960px;
  padding-block: 148px 112px;
}

.service-area-v6__heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.service-area-v6__heading .service-area__kicker {
  margin-bottom: 14px;
}

.service-area-v6 h2 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(4rem, 5.9vw, 6.45rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .87;
  text-transform: uppercase;
}

.service-area-v6__heading > p {
  margin: 21px 0 0;
  color: rgba(255,255,255,.67);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.55;
  text-transform: uppercase;
}

.service-area-v6__cities {
  display: flex;
  max-width: 1140px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 25px;
  margin: 35px auto 0;
  padding: 23px 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.service-area-v6__cities span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.91);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .77rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-area-v6__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 15px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-v6__map-frame {
  position: relative;
  max-width: 1120px;
  margin: 34px auto 0;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.17);
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(145deg, rgba(255,255,255,.045), rgba(255,255,255,.015)),
    rgba(8,29,48,.64);
  background-size: 52px 52px, 52px 52px, auto, auto;
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
  backdrop-filter: blur(4px);
}

.service-area-v6__map-frame::before {
  position: absolute;
  z-index: 3;
  top: 0;
  left: 0;
  width: 126px;
  height: 6px;
  content: "";
  background: var(--aqua);
}

.service-area-v6__map-frame::after {
  position: absolute;
  z-index: 0;
  right: -30px;
  bottom: 92px;
  content: "MAINE";
  color: rgba(255,255,255,.028);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(9rem, 16vw, 16rem);
  font-weight: 800;
  letter-spacing: -.045em;
  line-height: .7;
  pointer-events: none;
}

.service-area-v6__map-topline {
  position: relative;
  z-index: 2;
  display: flex;
  min-height: 67px;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 18px 28px 15px;
  border-bottom: 1px solid rgba(255,255,255,.12);
}

.service-area-v6__map-topline > span {
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.service-area-v6__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
  color: rgba(255,255,255,.61);
  font-size: .64rem;
  font-weight: 700;
}

.service-area-v6__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.service-area-v6__legend i {
  display: inline-block;
  flex: 0 0 auto;
}

.service-area-v6__legend-home i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--aqua);
}

.service-area-v6__legend-area i {
  width: 9px;
  height: 14px;
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-v6__map-wrap {
  position: relative;
  z-index: 1;
  min-height: 610px;
  overflow: hidden;
  background:
    radial-gradient(circle at 50% 43%, rgba(var(--aqua-rgb),.055), transparent 28%),
    radial-gradient(circle at 50% 43%, rgba(45,96,137,.18), transparent 52%);
}

.service-area-v6__map {
  position: absolute;
  top: 18px;
  left: 50%;
  width: min(690px, 73%);
  height: 565px;
  overflow: visible;
  transform: translateX(-50%);
}

.service-area-v6__maine-shape {
  fill: url(#maineFillV6);
  stroke: rgba(255,255,255,.35);
  stroke-width: 2.2;
}

.service-area-v6__map-detail path {
  fill: none;
  stroke: rgba(255,255,255,.075);
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-dasharray: 4 10;
}

.service-area-v6__marker circle {
  fill: #0b2238;
  stroke: rgba(var(--aqua-rgb),.92);
  stroke-width: 2.5;
}

.service-area-v6__marker path {
  fill: var(--aqua);
}

.service-area-v6__home-marker > circle:first-child {
  fill: rgba(var(--aqua-rgb),.20);
  stroke: rgba(var(--aqua-rgb),.62);
  stroke-width: 2;
}

.service-area-v6__home-marker > circle:nth-child(2) {
  fill: var(--white);
  stroke: var(--aqua);
  stroke-width: 3;
}

.service-area-v6__islands circle {
  fill: rgba(255,255,255,.36);
}

.service-area-v6__map-note {
  position: absolute;
  z-index: 3;
  display: grid;
  gap: 3px;
  min-width: 150px;
  padding-left: 18px;
}

.service-area-v6__map-note::before {
  position: absolute;
  top: 6px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

.service-area-v6__map-note strong {
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
}

.service-area-v6__map-note span {
  color: rgba(255,255,255,.48);
  font-size: .66rem;
  font-weight: 600;
}

.service-area-v6__map-note--north { top: 92px; right: 52px; }
.service-area-v6__map-note--central { top: 258px; left: 48px; }
.service-area-v6__map-note--coast { right: 40px; bottom: 116px; }
.service-area-v6__map-note--south { left: 52px; bottom: 92px; }

.service-area-v6__bottom {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(235px,.85fr) minmax(300px,1.15fr) auto;
  align-items: center;
  gap: 30px;
  min-height: 126px;
  padding: 24px 28px;
  border-top: 1px solid rgba(255,255,255,.12);
  background: rgba(3,13,22,.28);
}

.service-area-v6__bottom-copy {
  display: grid;
  gap: 5px;
}

.service-area-v6__bottom-copy span {
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .61rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.service-area-v6__bottom-copy strong {
  max-width: 310px;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 1.9rem;
  font-weight: 800;
  line-height: .94;
  text-transform: uppercase;
}

.service-area-v6__bottom > p {
  margin: 0;
  color: rgba(255,255,255,.57);
  font-size: .73rem;
  line-height: 1.6;
}

.service-area-v6__bottom .button {
  min-width: 190px;
  min-height: 56px;
  padding-inline: 21px;
  white-space: nowrap;
}

/* V18 carries the visual map, so the huge ambient MAINE watermark is even
   more subdued and never competes with the silhouette. */
.service-area > .service-area__state-word {
  opacity: .35;
}

@media (max-width: 1120px) {
  .service-area-v6__map {
    width: min(650px, 72%);
  }

  .service-area-v6__map-note--central { left: 26px; }
  .service-area-v6__map-note--north { right: 25px; }
  .service-area-v6__map-note--coast { right: 22px; }
  .service-area-v6__map-note--south { left: 28px; }

  .service-area-v6__bottom {
    grid-template-columns: minmax(220px,.85fr) 1.15fr;
  }

  .service-area-v6__bottom .button {
    grid-column: 1 / -1;
    justify-self: center;
    min-width: 245px;
  }
}

@media (max-width: 860px) {
  .service-area-v6 {
    min-height: 0;
    padding-block: 114px 88px;
  }

  .service-area-v6 h2 {
    font-size: clamp(3.4rem, 14.2vw, 4.75rem);
  }

  .service-area-v6__heading > p {
    max-width: 520px;
    margin-inline: auto;
    font-size: .69rem;
  }

  .service-area-v6__cities {
    gap: 12px 20px;
    margin-top: 29px;
    padding: 21px 8px;
  }

  .service-area-v6__cities span {
    font-size: .73rem;
  }

  .service-area-v6__map-topline {
    display: grid;
    gap: 9px;
    padding: 19px 20px 17px;
  }

  .service-area-v6__legend {
    justify-content: flex-start;
  }

  .service-area-v6__map-wrap {
    min-height: 560px;
  }

  .service-area-v6__map {
    top: 28px;
    width: min(590px, 90%);
    height: 500px;
  }

  .service-area-v6__map-note {
    min-width: 0;
  }

  .service-area-v6__map-note--north { top: 60px; right: 16px; }
  .service-area-v6__map-note--central { top: 238px; left: 16px; }
  .service-area-v6__map-note--coast { right: 14px; bottom: 74px; }
  .service-area-v6__map-note--south { left: 16px; bottom: 55px; }

  .service-area-v6__bottom {
    display: block;
    padding: 26px 22px 22px;
  }

  .service-area-v6__bottom-copy strong {
    font-size: 2.05rem;
  }

  .service-area-v6__bottom > p {
    max-width: 610px;
    margin-top: 16px;
  }

  .service-area-v6__bottom .button {
    width: 100%;
    margin-top: 22px;
  }
}

@media (max-width: 560px) {
  .service-area-v6 {
    padding-block: 104px 78px;
  }

  .service-area-v6 h2 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .service-area-v6__heading > p {
    font-size: .64rem;
    line-height: 1.7;
  }

  .service-area-v6__cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: stretch;
    gap: 13px 14px;
    padding-inline: 0;
  }

  .service-area-v6__cities span {
    white-space: normal;
  }

  .service-area-v6__map-frame {
    margin-top: 27px;
  }

  .service-area-v6__legend {
    display: grid;
    gap: 7px;
  }

  .service-area-v6__map-wrap {
    min-height: 490px;
  }

  .service-area-v6__map {
    top: 30px;
    width: 106%;
    height: 430px;
  }

  .service-area-v6__map-note {
    padding-left: 14px;
  }

  .service-area-v6__map-note strong {
    font-size: .69rem;
  }

  .service-area-v6__map-note span {
    display: none;
  }

  .service-area-v6__map-note--north { top: 52px; right: 10px; }
  .service-area-v6__map-note--central { top: 223px; left: 9px; }
  .service-area-v6__map-note--coast { right: 8px; bottom: 62px; }
  .service-area-v6__map-note--south { left: 10px; bottom: 45px; }

  .service-area-v6__bottom {
    padding-inline: 19px;
  }

  .service-area-v6__bottom-copy strong {
    font-size: 1.82rem;
  }
}

/* ==========================================================
   V19 — 180sites-inspired map board
   Keeps the strong headline/city row, but replaces the old
   dark map block with a much cleaner light map + navy info panel.
   ========================================================== */

.service-area-v7 {
  position: relative;
  z-index: 2;
  min-height: 0;
  padding-block: 148px 112px;
}

.service-area-v7__heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.service-area-v7__heading .service-area__kicker {
  margin-bottom: 14px;
}

.service-area-v7 h2 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(4rem, 5.9vw, 6.45rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .87;
  text-transform: uppercase;
}

.service-area-v7__heading > p {
  margin: 21px 0 0;
  color: rgba(255,255,255,.67);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.55;
  text-transform: uppercase;
}

.service-area-v7__cities {
  display: flex;
  max-width: 1140px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px 25px;
  margin: 35px auto 0;
  padding: 23px 28px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.service-area-v7__cities span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.91);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .77rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-area-v7__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 15px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-v7__board {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(300px, .82fr);
  margin-top: 34px;
  overflow: hidden;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.03);
  box-shadow: 0 24px 48px rgba(0,0,0,.18);
}

.service-area-v7__map-panel {
  background: linear-gradient(180deg, #f4f6f8 0%, #eaedf1 100%);
}

.service-area-v7__map-header {
  display: flex;
  min-height: 76px;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 26px;
  border-bottom: 1px solid rgba(11,29,46,.10);
}

.service-area-v7__map-header > span,
.service-area-v7__eyebrow {
  color: #c89f09;
  font-family: "Archivo", Arial, sans-serif;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.service-area-v7__legend {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px 22px;
  color: rgba(11,29,46,.62);
  font-size: .66rem;
  font-weight: 700;
}

.service-area-v7__legend span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.service-area-v7__legend i {
  display: inline-block;
  flex: 0 0 auto;
}

.service-area-v7__legend-home i {
  width: 13px;
  height: 13px;
  border: 2px solid var(--white);
  border-radius: 50%;
  background: var(--aqua);
  box-shadow: 0 0 0 1px rgba(11,29,46,.16);
}

.service-area-v7__legend-area i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #1f4f77;
  box-shadow: 0 0 0 3px rgba(31,79,119,.14);
}

.service-area-v7__map-stage {
  position: relative;
  min-height: 620px;
  background:
    linear-gradient(rgba(11,29,46,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(11,29,46,.045) 1px, transparent 1px),
    linear-gradient(180deg, rgba(255,255,255,.44), rgba(255,255,255,.04));
  background-size: 54px 54px, 54px 54px, auto;
}

.service-area-v7__map {
  display: block;
  width: 100%;
  height: 620px;
}

.service-area-v7__roads path {
  fill: none;
  stroke: rgba(11,29,46,.11);
  stroke-width: 2;
  stroke-linecap: round;
}

.service-area-v7__maine-base {
  fill: #fefefe;
  stroke: rgba(11,29,46,.40);
  stroke-width: 2.8;
}

.service-area-v7__zones .zone--north { fill: rgba(168, 219, 178, .78); }
.service-area-v7__zones .zone--central { fill: rgba(248, 224, 123, .62); }
.service-area-v7__zones .zone--mid { fill: rgba(151, 183, 240, .48); }
.service-area-v7__zones .zone--coast { fill: rgba(191, 177, 214, .46); }
.service-area-v7__zones .zone--south { fill: rgba(130, 164, 226, .54); }

.service-area-v7__county-lines path {
  fill: none;
  stroke: rgba(11,29,46,.14);
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-dasharray: 5 10;
}

.service-area-v7__map-pin use { fill: #244a6e; }
.service-area-v7__map-pin circle { fill: var(--aqua); stroke: var(--white); stroke-width: 2.5; }
.service-area-v7__map-pin path { filter: drop-shadow(0 6px 8px rgba(11,29,46,.18)); }

.service-area-v7__home-pin path {
  fill: rgba(var(--aqua-rgb),.96);
  filter: drop-shadow(0 10px 14px rgba(11,29,46,.20));
}

.service-area-v7__home-pin circle:first-of-type {
  fill: rgba(255,255,255,.95);
  stroke: #123452;
  stroke-width: 3;
}

.service-area-v7__home-pin circle:last-of-type {
  fill: var(--white);
  stroke: rgba(var(--aqua-rgb),.95);
  stroke-width: 3;
}

.service-area-v7__map-labels rect {
  fill: rgba(255,255,255,.90);
  stroke: rgba(11,29,46,.12);
}

.service-area-v7__map-labels text {
  fill: #10263a;
  font-family: "Archivo", Arial, sans-serif;
  font-size: 12px;
  font-weight: 800;
  text-anchor: middle;
}

.service-area-v7__content {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 26px;
  padding: 28px 28px 30px;
  color: var(--white);
  background:
    radial-gradient(circle at 85% 20%, rgba(var(--aqua-rgb),.10), transparent 26%),
    linear-gradient(180deg, #15365a 0%, #0b2238 100%);
}

.service-area-v7__content h3 {
  margin: 10px 0 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(2.3rem, 3.4vw, 3.2rem);
  font-weight: 800;
  letter-spacing: -.02em;
  line-height: .92;
  text-transform: uppercase;
}

.service-area-v7__content > p {
  margin: 0;
  color: rgba(255,255,255,.76);
  font-size: .9rem;
  line-height: 1.7;
}

.service-area-v7__coverage-list {
  display: grid;
  gap: 12px;
}

.service-area-v7__coverage-list article {
  display: grid;
  gap: 4px;
  padding: 14px 15px 14px 18px;
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(255,255,255,.04);
}

.service-area-v7__coverage-list article strong {
  position: relative;
  padding-left: 16px;
  color: var(--white);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
}

.service-area-v7__coverage-list article strong::before {
  position: absolute;
  top: 4px;
  left: 0;
  width: 8px;
  height: 8px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

.service-area-v7__coverage-list article span {
  color: rgba(255,255,255,.62);
  font-size: .77rem;
  line-height: 1.5;
}

.service-area-v7__content-bottom {
  display: grid;
  gap: 18px;
}

.service-area-v7__content-bottom p {
  margin: 0;
  color: rgba(255,255,255,.72);
  font-size: .79rem;
  line-height: 1.7;
}

.service-area-v7__content .button {
  width: 100%;
}

.service-area > .service-area__state-word {
  opacity: .23;
}

@media (max-width: 1120px) {
  .service-area-v7__board {
    grid-template-columns: 1fr;
  }

  .service-area-v7__map-stage,
  .service-area-v7__map {
    min-height: 0;
    height: 600px;
  }

  .service-area-v7__content {
    gap: 24px;
  }

  .service-area-v7__coverage-list {
    grid-template-columns: repeat(2, minmax(0,1fr));
  }
}

@media (max-width: 860px) {
  .service-area-v7 {
    padding-block: 114px 88px;
  }

  .service-area-v7 h2 {
    font-size: clamp(3.4rem, 14.2vw, 4.75rem);
  }

  .service-area-v7__heading > p {
    max-width: 520px;
    margin-inline: auto;
    font-size: .69rem;
  }

  .service-area-v7__cities {
    gap: 12px 20px;
    margin-top: 29px;
    padding: 21px 8px;
  }

  .service-area-v7__cities span {
    font-size: .73rem;
  }

  .service-area-v7__map-header {
    display: grid;
    gap: 9px;
    padding: 18px 20px;
  }

  .service-area-v7__legend {
    justify-content: flex-start;
  }

  .service-area-v7__map-stage,
  .service-area-v7__map {
    height: 540px;
  }

  .service-area-v7__content {
    padding: 24px 22px 24px;
  }

  .service-area-v7__content h3 {
    font-size: 2.7rem;
  }
}

@media (max-width: 560px) {
  .service-area-v7 {
    padding-block: 104px 78px;
  }

  .service-area-v7 h2 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .service-area-v7__heading > p {
    font-size: .64rem;
    line-height: 1.7;
  }

  .service-area-v7__cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: stretch;
    gap: 13px 14px;
    padding-inline: 0;
  }

  .service-area-v7__cities span {
    white-space: normal;
  }

  .service-area-v7__map-header {
    padding-inline: 16px;
  }

  .service-area-v7__legend {
    display: grid;
    gap: 7px;
  }

  .service-area-v7__map-stage,
  .service-area-v7__map {
    height: 420px;
  }

  .service-area-v7__content {
    padding-inline: 18px;
  }

  .service-area-v7__content h3 {
    font-size: 2.25rem;
  }

  .service-area-v7__coverage-list {
    grid-template-columns: 1fr;
  }

  .service-area-v7__coverage-list article {
    padding-inline: 14px;
  }
}


/* ==========================================================
   V20 — SIMPLE PROFESSOR-PRESSURE-STYLE SERVICE AREA
   The strong headline/city row stays. Everything beneath it is
   intentionally stripped back: one faded Maine map, CLEARPEAK markers,
   one short statewide line, one CTA. No legend, labels, panels,
   colored regions, or explanatory cards.
   ========================================================== */

.service-area > .service-area__state-word {
  display: none !important;
}

.service-area-simple {
  position: relative;
  z-index: 2;
  padding-block: 140px 100px;
}

.service-area-simple__heading {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
}

.service-area-simple__heading .service-area__kicker {
  margin-bottom: 14px;
}

.service-area-simple h2 {
  max-width: 980px;
  margin: 0 auto;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(4rem, 5.9vw, 6.45rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .87;
  text-transform: uppercase;
}

.service-area-simple__heading > p {
  margin: 18px 0 0;
  color: rgba(255,255,255,.67);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.55;
  text-transform: uppercase;
}

.service-area-simple__cities {
  display: flex;
  max-width: 1140px;
  flex-wrap: wrap;
  justify-content: center;
  gap: 11px 23px;
  margin: 30px auto 0;
  padding: 20px 26px;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.service-area-simple__cities span {
  position: relative;
  padding-left: 18px;
  color: rgba(255,255,255,.91);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .77rem;
  font-weight: 700;
  white-space: nowrap;
}

.service-area-simple__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 9px;
  height: 15px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

/* One simple pale map field, like the Professor Pressure reference. */
.service-area-simple__map {
  position: relative;
  height: 545px;
  margin-top: 28px;
  overflow: hidden;
  background: #f3f4f4;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 42px rgba(0,0,0,.16);
}

/* A faint blown-up copy fills the wide area so the panel does not feel empty.
   The actual Maine map stays centered and readable above it. */
.service-area-simple__map::before {
  position: absolute;
  inset: -30px;
  content: "";
  background: linear-gradient(rgba(255,255,255,.68), rgba(255,255,255,.68));
  opacity: .10;
  filter: grayscale(.28) blur(4px);
  transform: scale(1.025);
}

.service-area-simple__map::after {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(255,255,255,.48), transparent 24%, transparent 76%, rgba(255,255,255,.48)),
    linear-gradient(180deg, rgba(255,255,255,.22), transparent 24%, transparent 78%, rgba(255,255,255,.22));
}

.service-area-simple__map-art {
  position: absolute;
  z-index: 2;
  top: -14px;
  bottom: -14px;
  left: 50%;
  aspect-ratio: 585 / 938;
  transform: translateX(-50%);
}

.service-area-simple__map-art > img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  opacity: .43;
  filter: saturate(.66) contrast(.90) brightness(1.06);
}

/* Professor Pressure uses repeated branded pins. CLEARPEAK gets the same clean
   visual language: small logo circles, no labels or extra explanation. */
.service-map-marker {
  position: absolute;
  top: var(--y);
  left: var(--x);
  display: grid;
  width: 34px;
  height: 34px;
  place-items: center;
  padding: 3px;
  border: 2px solid rgba(var(--primary-rgb),.58);
  border-radius: 50%;
  background: var(--white);
  box-shadow:
    0 6px 15px rgba(var(--primary-rgb),.20),
    0 0 0 3px rgba(255,255,255,.74);
  transform: translate(-50%, -50%);
}

.service-map-marker img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 50%;
}

.service-map-marker--home {
  width: 46px;
  height: 46px;
  border-color: var(--aqua);
  box-shadow:
    0 8px 19px rgba(var(--primary-rgb),.22),
    0 0 0 4px rgba(var(--aqua-rgb),.24);
}

.service-area-simple__bottom {
  display: flex;
  max-width: 1100px;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  margin: 24px auto 0;
}

.service-area-simple__bottom p {
  max-width: 690px;
  margin: 0;
  color: rgba(255,255,255,.64);
  font-size: .86rem;
  line-height: 1.65;
}

.service-area-simple__bottom p strong {
  color: var(--white);
  font-weight: 800;
}

.service-area-simple__bottom .button {
  flex: 0 0 auto;
}

@media (max-width: 860px) {
  .service-area-simple {
    padding-block: 106px 82px;
  }

  .service-area-simple h2 {
    font-size: clamp(3.4rem, 14.2vw, 4.75rem);
  }

  .service-area-simple__heading > p {
    max-width: 520px;
    margin-inline: auto;
    font-size: .69rem;
  }

  .service-area-simple__cities {
    gap: 11px 18px;
    margin-top: 25px;
    padding: 18px 8px;
  }

  .service-area-simple__cities span {
    font-size: .73rem;
  }

  .service-area-simple__map {
    height: 485px;
    margin-top: 24px;
  }

  .service-area-simple__map-art {
    top: -8px;
    bottom: -8px;
  }

  .service-map-marker {
    width: 30px;
    height: 30px;
  }

  .service-map-marker--home {
    width: 40px;
    height: 40px;
  }

  .service-area-simple__bottom {
    display: grid;
    gap: 20px;
  }

  .service-area-simple__bottom .button {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .service-area-simple {
    padding-block: 98px 72px;
  }

  .service-area-simple h2 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .service-area-simple__heading > p {
    font-size: .64rem;
    line-height: 1.7;
  }

  .service-area-simple__cities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0,1fr));
    justify-content: stretch;
    gap: 13px 14px;
    padding-inline: 0;
  }

  .service-area-simple__cities span {
    white-space: normal;
  }

  .service-area-simple__map {
    height: 430px;
  }

  .service-area-simple__map::before {
    opacity: .07;
  }

  .service-area-simple__map-art {
    top: -5px;
    bottom: -5px;
  }

  .service-map-marker {
    width: 27px;
    height: 27px;
    padding: 2px;
  }

  .service-map-marker--home {
    width: 37px;
    height: 37px;
  }

  .service-area-simple__bottom {
    margin-top: 20px;
  }

  .service-area-simple__bottom p {
    font-size: .8rem;
  }
}
/* ==========================================================
   V21 — HORIZONTAL MAINE MAP SIZING FIX
   Surgical override only. Keeps the complete 6,421-line CSS
   baseline intact and lets the new 1724x912 map render at its
   natural horizontal aspect ratio with no oversized white box.
   ========================================================== */

.service-area-simple__map {
  width: 100%;
  height: auto;
  max-width: 1140px;
  margin: 28px auto 0;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 20px 42px rgba(0,0,0,.16);
}

/* The horizontal map artwork already contains its own pale map field,
   so the old enlarged portrait-map filler layers are no longer needed. */
.service-area-simple__map::before,
.service-area-simple__map::after {
  display: none !important;
}

.service-area-simple__map-art {
  position: relative;
  z-index: 2;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  width: 100%;
  aspect-ratio: auto;
  transform: none;
}

.service-area-simple__map-art > img {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  object-fit: contain;
  opacity: 1;
  filter: none;
}

/* Markers are already baked into the new horizontal map image. */
.service-map-marker,
.service-map-marker--home {
  display: none !important;
}

@media (max-width: 860px) {
  .service-area-simple__map {
    height: auto;
    margin-top: 24px;
  }

  .service-area-simple__map-art {
    top: auto;
    bottom: auto;
  }
}

@media (max-width: 560px) {
  .service-area-simple__map {
    height: auto;
  }

  .service-area-simple__map-art {
    top: auto;
    bottom: auto;
  }
}

/* ==========================================================
   V22 — SPLIT SERVICE AREA
   Desktop: copy + service areas on the left, Maine map on the
   right. Keeps the V21 horizontal image treatment intact while
   reducing the section's vertical footprint.
   ========================================================== */

.service-area-simple {
  padding-block: 116px 86px;
}

.service-area-split {
  display: grid;
  grid-template-columns: minmax(0, .88fr) minmax(520px, 1.12fr);
  align-items: center;
  gap: clamp(48px, 5.5vw, 84px);
}

.service-area-split__content {
  min-width: 0;
}

.service-area-simple__heading {
  max-width: 600px;
  margin: 0;
  text-align: left;
}

.service-area-simple__heading .service-area__kicker {
  margin-bottom: 15px;
}

.service-area-simple h2 {
  max-width: 620px;
  margin: 0;
  font-size: clamp(4rem, 4.75vw, 5.8rem);
  line-height: .88;
}

.service-area-simple__heading > p {
  max-width: 560px;
  margin: 21px 0 0;
}

.service-area-simple__cities {
  display: grid;
  max-width: 580px;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  justify-content: stretch;
  gap: 13px 26px;
  margin: 32px 0 0;
  padding: 22px 0;
}

.service-area-simple__cities span {
  white-space: normal;
}

.service-area-simple__map {
  width: 100%;
  max-width: none;
  margin: 0;
  align-self: center;
  background: transparent;
  box-shadow: 0 22px 48px rgba(0,0,0,.18);
}

.service-area-simple__map-image {
  display: block;
  width: 100%;
  height: auto;
  object-fit: contain;
}

.service-area-simple__bottom {
  display: grid;
  max-width: 580px;
  justify-items: start;
  gap: 21px;
  margin: 27px 0 0;
}

.service-area-simple__bottom p {
  max-width: 540px;
}

.service-area-simple__bottom .button {
  width: auto;
}

@media (max-width: 1080px) {
  .service-area-split {
    grid-template-columns: minmax(0, .92fr) minmax(460px, 1.08fr);
    gap: 42px;
  }

  .service-area-simple h2 {
    font-size: clamp(3.65rem, 5vw, 4.85rem);
  }
}

@media (max-width: 900px) {
  .service-area-simple {
    padding-block: 106px 80px;
  }

  .service-area-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .service-area-simple__heading {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .service-area-simple h2 {
    max-width: 760px;
    margin-inline: auto;
  }

  .service-area-simple__heading > p {
    margin-inline: auto;
  }

  .service-area-simple__cities {
    max-width: 680px;
    margin: 28px auto 0;
  }

  .service-area-simple__bottom {
    max-width: 680px;
    margin: 24px auto 0;
    justify-items: center;
    text-align: center;
  }

  .service-area-simple__map {
    max-width: 760px;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .service-area-simple {
    padding-block: 92px 70px;
  }

  .service-area-simple h2 {
    font-size: clamp(3rem, 15vw, 4rem);
  }

  .service-area-simple__cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px 14px;
    padding-block: 18px;
  }

  .service-area-simple__bottom .button {
    width: 100%;
  }
}
/* ==========================================================
   V23 — BALANCED SPLIT SERVICE AREA
   Removes the eyebrow, locks the headline to two lines, keeps
   the service-area list compact on the left, and gives the map
   a taller county-map-style frame on the right. The existing
   map image remains in place for now and can be swapped later.
   ========================================================== */

.service-area-simple {
  width: min(calc(100% - 64px), 1380px);
  padding-block: 96px 82px;
}

.service-area-split {
  grid-template-columns: minmax(0, .84fr) minmax(610px, 1.16fr);
  align-items: center;
  gap: clamp(54px, 5.4vw, 82px);
}

.service-area-split__content {
  min-width: 0;
}

.service-area-simple__heading {
  max-width: 540px;
  margin: 0;
  text-align: left;
}

.service-area-simple__heading .service-area__kicker {
  display: none !important;
}

.service-area-simple h2 {
  max-width: none;
  margin: 0;
  font-size: clamp(3.45rem, 3.65vw, 4.2rem);
  line-height: .89;
}

.service-area-simple h2 span {
  display: block;
  white-space: nowrap;
}

.service-area-simple__heading > p {
  max-width: 540px;
  margin: 20px 0 0;
  font-size: .72rem;
  line-height: 1.5;
}

.service-area-simple__cities {
  display: grid;
  max-width: 540px;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px 34px;
  margin: 27px 0 0;
  padding: 20px 0;
  border-top: 1px solid rgba(255,255,255,.14);
  border-bottom: 1px solid rgba(255,255,255,.14);
}

.service-area-simple__cities span {
  min-width: 0;
  white-space: nowrap;
}

.service-area-simple__map {
  width: 100%;
  max-width: none;
  aspect-ratio: 1.2 / 1;
  margin: 0;
  overflow: hidden;
  align-self: center;
  background: #f4f4f2;
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 24px 54px rgba(0,0,0,.20);
}

.service-area-simple__map-image {
  display: block;
  width: 100%;
  height: 100% !important;
  object-fit: cover;
  object-position: 50% 50%;
}

.service-area-simple__bottom {
  display: grid;
  max-width: 540px;
  justify-items: start;
  gap: 18px;
  margin: 24px 0 0;
}

.service-area-simple__bottom p {
  max-width: 520px;
  font-size: .83rem;
  line-height: 1.62;
}

.service-area-simple__bottom .button {
  width: auto;
}

@media (max-width: 1180px) {
  .service-area-simple {
    width: min(calc(100% - 56px), 1240px);
  }

  .service-area-split {
    grid-template-columns: minmax(0, .9fr) minmax(520px, 1.1fr);
    gap: 46px;
  }

  .service-area-simple h2 {
    font-size: clamp(3.25rem, 4.2vw, 3.85rem);
  }

  .service-area-simple__cities {
    gap: 11px 24px;
  }
}

@media (max-width: 960px) {
  .service-area-simple {
    width: min(calc(100% - 48px), var(--container));
    padding-block: 92px 76px;
  }

  .service-area-split {
    grid-template-columns: 1fr;
    gap: 34px;
  }

  .service-area-simple__heading {
    max-width: 720px;
    margin-inline: auto;
    text-align: center;
  }

  .service-area-simple h2 {
    max-width: 720px;
    margin-inline: auto;
    font-size: clamp(3.4rem, 8vw, 4.8rem);
  }

  .service-area-simple__heading > p {
    margin-inline: auto;
  }

  .service-area-simple__cities {
    width: 100%;
    max-width: 680px;
    margin: 27px auto 0;
    gap: 12px 30px;
  }

  .service-area-simple__bottom {
    max-width: 680px;
    margin: 24px auto 0;
    justify-items: center;
    text-align: center;
  }

  .service-area-simple__map {
    width: min(100%, 760px);
    aspect-ratio: 1.2 / 1;
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .service-area-simple {
    width: min(calc(100% - 34px), var(--container));
    padding-block: 82px 66px;
  }

  .service-area-simple h2 {
    font-size: clamp(2.8rem, 13.8vw, 3.75rem);
    line-height: .9;
  }

  .service-area-simple h2 span {
    white-space: normal;
  }

  .service-area-simple__heading > p {
    max-width: 360px;
    margin-top: 16px;
    font-size: .66rem;
  }

  .service-area-simple__cities {
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-template-columns: none;
    grid-auto-columns: minmax(0, 1fr);
    gap: 11px 14px;
    padding-block: 18px;
  }

  .service-area-simple__cities span {
    padding-left: 15px;
    font-size: .7rem;
    white-space: normal;
  }

  .service-area-simple__cities span::before {
    width: 8px;
    height: 13px;
  }

  .service-area-simple__map {
    aspect-ratio: 1.08 / 1;
  }

  .service-area-simple__map-image {
    object-position: 50% 50%;
  }

  .service-area-simple__bottom {
    gap: 17px;
  }

  .service-area-simple__bottom .button {
    width: 100%;
  }
}
/* ==========================================================
   V24 — PROLINE-INSPIRED SERVICE AREA
   Light service-area section with a clean three-column location
   list on the left and a dark conversion panel + CLEARPEAK vehicle
   visual on the right. Replaces the map-based presentation.
   ========================================================== */

.service-area--local {
  color: var(--navy-900);
  background-color: var(--off-white);
  background-image:
    var(--clearpeak-paper-light),
    radial-gradient(circle at 82% 34%, rgba(var(--primary-rgb),.028), transparent 36%);
  background-size: 520px 520px, auto;
  background-repeat: repeat, no-repeat;
}

/* The old dark drafting grid belonged to the map design. */
.service-area--local .service-area__grid {
  display: none !important;
}

.service-area--local .service-area__scuffs {
  opacity: .11;
  background-image:
    repeating-linear-gradient(
      12deg,
      transparent 0 210px,
      rgba(var(--primary-rgb),.028) 211px 212px,
      transparent 213px 430px
    );
  -webkit-mask-image: none;
  mask-image: none;
}

.service-area-local {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 56px), 1320px);
  padding-block: 112px 116px;
}

.service-area-local__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.16fr) minmax(390px, .84fr);
  align-items: center;
  gap: clamp(54px, 6vw, 92px);
}

.service-area-local__coverage {
  min-width: 0;
}

.service-area-local h2 {
  max-width: 720px;
  margin: 0;
  color: var(--navy-900);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.85rem, 5vw, 5.45rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .9;
  text-transform: uppercase;
}

.service-area-local__support {
  margin: 18px 0 0;
  color: var(--gray-500);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .74rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.55;
  text-transform: uppercase;
}

.service-area-local__cities {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 15px 28px;
  max-width: 760px;
  margin-top: 34px;
  padding-top: 29px;
  border-top: 1px solid rgba(var(--primary-rgb),.15);
}

.service-area-local__cities span {
  position: relative;
  min-width: 0;
  padding-left: 21px;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .86rem;
  font-weight: 700;
  line-height: 1.35;
}

.service-area-local__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 10px;
  height: 17px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-local__conversion {
  position: relative;
  min-height: 430px;
  padding-bottom: 96px;
}

.service-area-local__conversion-copy {
  position: relative;
  z-index: 2;
  min-height: 320px;
  padding: 48px 42px 112px;
  color: var(--white);
  background:
    linear-gradient(145deg, rgba(var(--primary-light-rgb),.84), rgba(var(--primary-dark-rgb),.96)),
    var(--clearpeak-paper-dark);
  border: 1px solid rgba(var(--primary-rgb),.08);
  box-shadow: 0 22px 46px rgba(var(--primary-rgb),.14);
  text-align: center;
}

.service-area-local__conversion-copy::before {
  position: absolute;
  top: 0;
  left: 50%;
  width: 86px;
  height: 5px;
  content: "";
  background: var(--aqua);
  transform: translateX(-50%);
}

.service-area-local__conversion h3 {
  max-width: 420px;
  margin: 0 auto;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(2.45rem, 3.25vw, 3.6rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .94;
  text-transform: uppercase;
}

.service-area-local__conversion p {
  max-width: 390px;
  margin: 18px auto 25px;
  color: rgba(255,255,255,.72);
  font-size: .88rem;
  line-height: 1.65;
}

.service-area-local__conversion .button {
  min-width: 235px;
}

.service-area-local__vehicle {
  position: absolute;
  z-index: 4;
  right: 28px;
  bottom: 0;
  left: 28px;
  height: 178px;
  margin: 0;
  overflow: hidden;
  background: #d8dde1;
  border: 7px solid var(--off-white);
  box-shadow: 0 20px 38px rgba(var(--primary-rgb),.18);
}

.service-area-local__vehicle img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 55%;
}

/* The new section is light, so the old dark inherited heading/list/map
   treatments from V20-V23 should not leak into this layout. */
.service-area--local .service-area-simple,
.service-area--local .service-area-split,
.service-area--local .service-area-simple__heading,
.service-area--local .service-area-simple__cities,
.service-area--local .service-area-simple__map,
.service-area--local .service-area-simple__bottom {
  display: none !important;
}

@media (max-width: 1060px) {
  .service-area-local {
    width: min(calc(100% - 48px), 1180px);
  }

  .service-area-local__layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
    gap: 46px;
  }

  .service-area-local__cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .service-area-local__conversion-copy {
    padding-inline: 34px;
  }
}

@media (max-width: 860px) {
  .service-area-local {
    padding-block: 96px 94px;
  }

  .service-area-local__layout {
    grid-template-columns: 1fr;
    gap: 50px;
  }

  .service-area-local__coverage {
    text-align: center;
  }

  .service-area-local h2 {
    max-width: 720px;
    margin-inline: auto;
  }

  .service-area-local__support {
    max-width: 620px;
    margin-inline: auto;
  }

  .service-area-local__cities {
    max-width: 680px;
    margin-inline: auto;
    text-align: left;
  }

  .service-area-local__conversion {
    width: min(100%, 620px);
    margin-inline: auto;
  }
}

@media (max-width: 560px) {
  .service-area-local {
    width: min(calc(100% - 34px), var(--container));
    padding-block: 84px 78px;
  }

  .service-area-local h2 {
    font-size: clamp(3.15rem, 15vw, 4.25rem);
  }

  .service-area-local__support {
    max-width: 360px;
    margin-top: 15px;
    font-size: .66rem;
  }

  .service-area-local__cities {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 13px 14px;
    margin-top: 26px;
    padding-top: 23px;
  }

  .service-area-local__cities span {
    padding-left: 17px;
    font-size: .75rem;
  }

  .service-area-local__cities span::before {
    width: 8px;
    height: 14px;
  }

  .service-area-local__conversion {
    min-height: 410px;
    padding-bottom: 82px;
  }

  .service-area-local__conversion-copy {
    min-height: 300px;
    padding: 39px 22px 102px;
  }

  .service-area-local__conversion h3 {
    font-size: clamp(2.35rem, 11.5vw, 3rem);
  }

  .service-area-local__conversion p {
    margin-top: 15px;
    font-size: .82rem;
  }

  .service-area-local__conversion .button {
    width: 100%;
    min-width: 0;
  }

  .service-area-local__vehicle {
    right: 14px;
    left: 14px;
    height: 150px;
    border-width: 5px;
  }
}
/* ==========================================================
   V25 — FLOATING STATEWIDE SERVICE BAND
   Turns Service Area into a compact, Let’s-Talk-style bridge
   between Process and FAQ instead of a full standalone section.
   ========================================================== */

/* Give the floating band enough clean paper beneath the Process CTA. */
.process-v3 {
  padding-bottom: 150px;
}

/* The band is intentionally out of normal flow on desktop so it straddles
   the Process / FAQ transition instead of becoming another tall section. */
.service-area-float-shell {
  position: relative;
  z-index: 42;
  width: 100%;
  height: 0;
}

.service-area-float {
  position: absolute;
  top: 0;
  left: 50%;
  width: min(calc(100% - 72px), 1120px);
  min-height: 300px;
  overflow: hidden;
  color: var(--white);
  background:
    linear-gradient(rgba(255,255,255,.028) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.028) 1px, transparent 1px),
    var(--navy-950);
  background-size: 58px 58px, 58px 58px, auto;
  border: 5px solid var(--white);
  box-shadow: 0 20px 42px rgba(var(--primary-dark-rgb),.24);
  transform: translate(-50%, -42%);
  isolation: isolate;
}

.service-area-float::after {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  height: 4px;
  content: "";
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 0 15%,
    var(--aqua) 15% 34%,
    transparent 34% 73%,
    var(--aqua) 73% 91%,
    transparent 91%
  );
}

.service-area-float__media {
  position: absolute;
  z-index: -2;
  top: 0;
  right: 0;
  bottom: 0;
  width: 48%;
}

.service-area-float__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 63% 54%;
}

.service-area-float__media::after {
  position: absolute;
  inset: 0;
  content: "";
  background:
    linear-gradient(
      90deg,
      var(--navy-950) 0%,
      rgba(var(--primary-dark-rgb),.94) 16%,
      rgba(var(--primary-dark-rgb),.66) 46%,
      rgba(var(--primary-dark-rgb),.36) 72%,
      rgba(var(--primary-dark-rgb),.20) 100%
    ),
    linear-gradient(180deg, rgba(var(--primary-dark-rgb),.10), rgba(var(--primary-dark-rgb),.34));
}

.service-area-float__accent {
  position: absolute;
  z-index: -1;
  top: 0;
  right: -64px;
  width: 285px;
  height: 100%;
  pointer-events: none;
  opacity: .68;
  background: rgba(var(--aqua-rgb),.72);
  clip-path: polygon(56% 0, 100% 0, 100% 100%, 20% 100%);
  mix-blend-mode: multiply;
}

.service-area-float__inner {
  position: relative;
  z-index: 2;
  display: grid;
  min-height: 290px;
  grid-template-columns: minmax(0, 1.18fr) minmax(300px, .82fr);
  align-items: stretch;
  gap: 34px;
  padding: 28px 30px 27px;
}

.service-area-float__coverage {
  display: flex;
  min-width: 0;
  flex-direction: column;
  justify-content: center;
  padding: 4px 10px 4px 4px;
}

.service-area-float h2 {
  max-width: 590px;
  margin: 0;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.25rem, 4.25vw, 4.55rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .88;
  text-transform: uppercase;
}

.service-area-float__support {
  margin: 12px 0 0;
  color: rgba(255,255,255,.62);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .05em;
  line-height: 1.5;
  text-transform: uppercase;
}

.service-area-float__cities {
  display: grid;
  max-width: 590px;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 8px 28px;
  margin-top: 19px;
  padding-top: 17px;
  border-top: 1px solid rgba(255,255,255,.13);
}

.service-area-float__cities span {
  position: relative;
  min-width: 0;
  padding-left: 17px;
  color: rgba(255,255,255,.94);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .73rem;
  font-weight: 700;
  line-height: 1.35;
  white-space: nowrap;
}

.service-area-float__cities span::before {
  position: absolute;
  top: 1px;
  left: 0;
  width: 8px;
  height: 13px;
  content: "";
  background: var(--aqua);
  clip-path: polygon(45% 0,100% 0,66% 40%,100% 40%,27% 100%,43% 54%,0 54%);
}

.service-area-float__action {
  display: flex;
  min-width: 0;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  align-self: stretch;
  margin: -2px -2px -2px 0;
  padding: 30px 26px 29px 34px;
  border-left: 1px solid rgba(255,255,255,.13);
  background: linear-gradient(
    90deg,
    rgba(var(--primary-dark-rgb),.74),
    rgba(var(--primary-dark-rgb),.60) 58%,
    rgba(var(--primary-dark-rgb),.46)
  );
  backdrop-filter: blur(2px);
}

.service-area-float__action-label {
  max-width: 285px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .055em;
  line-height: 1.45;
  text-transform: uppercase;
}

.service-area-float__action p {
  max-width: 300px;
  margin: 11px 0 19px;
  color: rgba(255,255,255,.83);
  font-size: .82rem;
  line-height: 1.55;
}

.service-area-float__action .button {
  min-width: 244px;
}

/* The floating band occupies roughly 175px of the FAQ's top area. */
.faq__inner {
  padding-top: 235px;
}

/* Keep the existing rough paper transition underneath the band but ensure
   it never paints over the floating component. */
.faq::before {
  z-index: 8;
}

@media (max-width: 1040px) {
  .service-area-float {
    width: min(calc(100% - 52px), 1040px);
  }

  .service-area-float__inner {
    grid-template-columns: minmax(0, 1.08fr) minmax(290px, .92fr);
    gap: 22px;
    padding-inline: 25px;
  }

  .service-area-float h2 {
    font-size: clamp(3rem, 5.1vw, 4rem);
  }

  .service-area-float__cities {
    column-gap: 18px;
  }

  .service-area-float__action {
    padding-left: 26px;
  }
}

@media (max-width: 860px) {
  .process-v3 {
    padding-bottom: 82px;
  }

  .service-area-float-shell {
    height: auto;
    padding: 0 20px;
    background: var(--off-white);
  }

  .service-area-float {
    position: relative;
    top: auto;
    left: auto;
    width: 100%;
    min-height: 0;
    transform: translateY(-30px);
    margin-bottom: -30px;
  }

  .service-area-float__media {
    width: 100%;
    opacity: .48;
  }

  .service-area-float__media::after {
    background:
      linear-gradient(180deg, rgba(var(--primary-dark-rgb),.78), rgba(var(--primary-dark-rgb),.94)),
      linear-gradient(90deg, rgba(var(--primary-dark-rgb),.86), rgba(var(--primary-dark-rgb),.52));
  }

  .service-area-float__accent {
    right: -96px;
    width: 260px;
    opacity: .42;
  }

  .service-area-float__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 25px;
    padding: 31px 28px 30px;
  }

  .service-area-float__coverage {
    padding: 0;
  }

  .service-area-float h2 {
    max-width: 620px;
  }

  .service-area-float__support {
    max-width: 560px;
  }

  .service-area-float__cities {
    max-width: 650px;
  }

  .service-area-float__action {
    margin: 0;
    padding: 23px 0 0;
    border-top: 1px solid rgba(255,255,255,.14);
    border-left: 0;
    background: transparent;
    backdrop-filter: none;
  }

  .service-area-float__action p {
    max-width: 420px;
  }

  .faq__inner {
    padding-top: 92px;
  }
}

@media (max-width: 560px) {
  .service-area-float-shell {
    padding-inline: 14px;
  }

  .service-area-float {
    border-width: 4px;
    transform: translateY(-22px);
    margin-bottom: -22px;
  }

  .service-area-float__inner {
    gap: 21px;
    padding: 27px 20px 25px;
  }

  .service-area-float h2 {
    font-size: clamp(2.9rem, 14vw, 3.75rem);
  }

  .service-area-float__support {
    margin-top: 10px;
    font-size: .61rem;
  }

  .service-area-float__cities {
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 9px 12px;
    margin-top: 16px;
    padding-top: 15px;
  }

  .service-area-float__cities span {
    padding-left: 14px;
    font-size: .66rem;
    white-space: normal;
  }

  .service-area-float__cities span::before {
    width: 7px;
    height: 12px;
  }

  .service-area-float__action {
    padding-top: 20px;
  }

  .service-area-float__action .button {
    width: 100%;
    min-width: 0;
  }

  .faq__inner {
    padding-top: 74px;
  }
}
/* ==========================================================
   V26 — COMPACT FLOATING STATEWIDE BAND
   Keeps the V25 concept, but brings its desktop proportions much
   closer to the existing Let’s Talk bridge: shorter, wider, and
   more horizontal. Headline left, locations center, CTA right.
   ========================================================== */

@media (min-width: 861px) {
  /* Less extra paper is needed because the floating band is now much shorter. */
  .process-v3 {
    padding-bottom: 112px;
  }

  .service-area-float {
    width: min(calc(100% - 72px), 1120px);
    min-height: 224px;
    transform: translate(-50%, -43%);
  }

  .service-area-float__inner {
    min-height: 214px;
    grid-template-columns: minmax(0, 1.58fr) minmax(250px, .42fr);
    gap: 24px;
    padding: 20px 24px 19px;
  }

  /* Turn the left side itself into two horizontal zones:
     headline/support on the left, locations in the middle. */
  .service-area-float__coverage {
    display: grid;
    grid-template-columns: minmax(245px, .88fr) minmax(300px, 1.12fr);
    grid-template-rows: auto auto;
    align-content: center;
    align-items: center;
    column-gap: 30px;
    row-gap: 8px;
    padding: 0 6px 0 4px;
  }

  .service-area-float h2 {
    grid-column: 1;
    grid-row: 1;
    max-width: 300px;
    font-size: clamp(2.7rem, 3.15vw, 3.45rem);
    line-height: .88;
  }

  .service-area-float__support {
    grid-column: 1;
    grid-row: 2;
    max-width: 280px;
    margin: 0;
    font-size: .58rem;
    line-height: 1.55;
  }

  .service-area-float__cities {
    grid-column: 2;
    grid-row: 1 / span 2;
    width: 100%;
    max-width: none;
    grid-template-rows: repeat(5, auto);
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    align-self: center;
    gap: 7px 19px;
    margin: 0;
    padding: 4px 0 4px 24px;
    border-top: 0;
    border-left: 1px solid rgba(255,255,255,.13);
  }

  .service-area-float__cities span {
    padding-left: 15px;
    font-size: .67rem;
    line-height: 1.28;
  }

  .service-area-float__cities span::before {
    width: 7px;
    height: 12px;
  }

  .service-area-float__action {
    margin: 0;
    padding: 23px 18px 22px 25px;
  }

  .service-area-float__action-label {
    max-width: 230px;
    font-size: .64rem;
  }

  .service-area-float__action p {
    max-width: 235px;
    margin: 8px 0 14px;
    font-size: .72rem;
    line-height: 1.45;
  }

  .service-area-float__action .button {
    min-width: 0;
    min-height: 50px;
    padding-inline: 21px;
    font-size: .70rem;
  }

  /* Let more of the truck/trailer read through without making the band taller. */
  .service-area-float__media {
    width: 44%;
  }

  .service-area-float__media img {
    object-position: 60% 55%;
  }

  .service-area-float__accent {
    width: 235px;
    right: -58px;
  }

  /* Shorter floating element means FAQ can start substantially sooner. */
  .faq__inner {
    padding-top: 168px;
  }
}

@media (min-width: 861px) and (max-width: 1040px) {
  .service-area-float {
    width: min(calc(100% - 52px), 1040px);
    min-height: 236px;
  }

  .service-area-float__inner {
    min-height: 226px;
    grid-template-columns: minmax(0, 1.55fr) minmax(238px, .45fr);
    gap: 18px;
    padding-inline: 20px;
  }

  .service-area-float__coverage {
    grid-template-columns: minmax(220px, .84fr) minmax(280px, 1.16fr);
    column-gap: 22px;
  }

  .service-area-float h2 {
    font-size: clamp(2.45rem, 4.4vw, 3.1rem);
  }

  .service-area-float__cities {
    column-gap: 14px;
    padding-left: 19px;
  }

  .service-area-float__cities span {
    font-size: .62rem;
  }

  .service-area-float__action {
    padding-left: 20px;
    padding-right: 15px;
  }

  .service-area-float__action .button {
    padding-inline: 17px;
    font-size: .66rem;
  }

  .faq__inner {
    padding-top: 176px;
  }
}
/* ==========================================================
   V27 — HARO-INSPIRED FOUR-CARD SERVICES
   Four image-led service categories with minimal default copy.
   Description + compact CTA reveal on hover/focus. On touch
   devices the supporting copy remains visible for usability.
   ========================================================== */

.services--v27 {
  padding-block: 108px 118px;
}

.services-v27__heading {
  max-width: 1020px;
  margin-bottom: 48px;
}

.services-v27__kicker {
  display: inline-flex;
  min-height: 35px;
  align-items: center;
  gap: 6px;
  margin-bottom: 22px;
  padding: 0 13px;
  color: var(--navy-950);
  background: var(--aqua);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: .88rem;
  font-weight: 800;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.services-v27__kicker span {
  font-size: .78rem;
}

.services--v27 .services__heading h2 {
  font-size: clamp(3.4rem, 4.4vw, 5.05rem);
  line-height: .9;
}

.services--v27 .services__heading h2 span:first-child {
  white-space: nowrap;
}

.services--v27 .services__heading > p {
  max-width: 720px;
  margin-top: 22px;
}

.services-v27__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 16px;
}

.service-card-v27 {
  min-width: 0;
}

.service-card-v27__link {
  position: relative;
  display: block;
  height: 430px;
  overflow: hidden;
  color: var(--white);
  background: var(--navy-850);
  border: 1px solid rgba(255,255,255,.13);
  box-shadow: 0 14px 28px rgba(0,0,0,.16);
  isolation: isolate;
}

.service-card-v27__link::before {
  position: absolute;
  z-index: 5;
  right: 0;
  bottom: 0;
  left: 0;
  width: 54px;
  height: 4px;
  margin-inline: auto;
  content: "";
  background: var(--aqua);
  transition: width 280ms ease;
}

.service-card-v27__link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 440ms ease, filter 320ms ease;
}

.service-card-v27:nth-child(1) .service-card-v27__link img {
  object-position: 52% 48%;
}

.service-card-v27:nth-child(2) .service-card-v27__link img {
  object-position: 45% 50%;
}

.service-card-v27:nth-child(3) .service-card-v27__link img {
  object-position: 62% 50%;
}

.service-card-v27:nth-child(4) .service-card-v27__link img {
  object-position: 50% 45%;
}

.service-card-v27__shade {
  position: absolute;
  z-index: 1;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(var(--primary-dark-rgb),.02) 20%,
      rgba(var(--primary-dark-rgb),.16) 48%,
      rgba(var(--primary-dark-rgb),.82) 74%,
      rgba(var(--primary-dark-rgb),.99) 100%
    );
  transition: background 300ms ease, opacity 300ms ease;
}

.service-card-v27__panel {
  position: absolute;
  z-index: 3;
  right: 0;
  bottom: 0;
  left: 0;
  display: flex;
  min-height: 122px;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 21px 18px 24px;
  text-align: center;
  transition:
    min-height 330ms ease,
    padding 330ms ease,
    background-color 330ms ease;
}

.service-card-v27__icon {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  margin-bottom: 9px;
  color: var(--white);
  transition: transform 300ms ease;
}

.service-card-v27__icon svg {
  width: 39px;
  height: 39px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.service-card-v27__icon svg path:last-child {
  stroke: var(--aqua);
}

.service-card-v27 h3 {
  margin: 0;
  color: var(--white);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(1.65rem, 1.72vw, 2rem);
  font-weight: 800;
  letter-spacing: -.01em;
  line-height: 1;
  text-transform: uppercase;
  transition: transform 300ms ease;
}

.service-card-v27__reveal {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(12px);
  transition:
    max-height 330ms ease,
    margin-top 330ms ease,
    opacity 240ms ease,
    transform 300ms ease;
}

.service-card-v27__reveal p {
  max-width: 250px;
  margin: 0 auto;
  color: rgba(255,255,255,.78);
  font-size: .75rem;
  line-height: 1.55;
}

.service-card-v27__cta {
  display: inline-flex;
  min-height: 36px;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 15px;
  padding: 0 13px;
  color: var(--aqua);
  border: 1px solid rgba(var(--aqua-rgb),.82);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .035em;
  text-transform: uppercase;
}

.service-card-v27__cta b {
  font-size: .84rem;
  transition: transform 180ms ease;
}

.service-card-v27__link:hover,
.service-card-v27__link:focus-visible {
  outline: 1px solid rgba(var(--aqua-rgb),.74);
  outline-offset: -1px;
}

.service-card-v27__link:hover::before,
.service-card-v27__link:focus-visible::before {
  width: 100%;
}

.service-card-v27__link:hover img,
.service-card-v27__link:focus-visible img {
  transform: scale(1.055);
  filter: saturate(.82) contrast(1.08);
}

.service-card-v27__link:hover .service-card-v27__shade,
.service-card-v27__link:focus-visible .service-card-v27__shade {
  background: rgba(var(--primary-dark-rgb),.86);
}

.service-card-v27__link:hover .service-card-v27__panel,
.service-card-v27__link:focus-visible .service-card-v27__panel {
  min-height: 100%;
  justify-content: center;
  padding-block: 28px;
  background: rgba(var(--primary-dark-rgb),.18);
}

.service-card-v27__link:hover .service-card-v27__icon,
.service-card-v27__link:focus-visible .service-card-v27__icon {
  transform: translateY(-3px);
}

.service-card-v27__link:hover h3,
.service-card-v27__link:focus-visible h3 {
  transform: translateY(-2px);
}

.service-card-v27__link:hover .service-card-v27__reveal,
.service-card-v27__link:focus-visible .service-card-v27__reveal {
  max-height: 170px;
  margin-top: 15px;
  opacity: 1;
  transform: translateY(0);
}

.service-card-v27__link:hover .service-card-v27__cta b,
.service-card-v27__link:focus-visible .service-card-v27__cta b {
  transform: translateX(3px);
}

/* V27 replaces the old three-card + secondary-services presentation. */
.services--v27 .service-grid,
.services--v27 .secondary-services {
  display: none !important;
}

@media (max-width: 1120px) {
  .services-v27__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px;
  }

  .service-card-v27__link {
    height: 430px;
  }

  .service-card-v27 h3 {
    font-size: 1.9rem;
  }
}

@media (max-width: 760px) {
  .services--v27 {
    padding-block: 92px 98px;
  }

  .services-v27__heading {
    margin-bottom: 38px;
  }

  .services-v27__kicker {
    margin-bottom: 18px;
  }

  .services--v27 .services__heading h2 span:first-child {
    white-space: normal;
  }

  .services-v27__grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-card-v27__link {
    height: clamp(360px, 105vw, 460px);
  }
}

/* Touch devices do not have a meaningful hover state, so the description
   and CTA remain visible without requiring a tap just to discover them. */
@media (hover: none), (pointer: coarse) {
  .service-card-v27__panel {
    min-height: 190px;
    padding: 24px 20px 25px;
    background: linear-gradient(180deg, transparent, rgba(var(--primary-dark-rgb),.92) 24%);
  }

  .service-card-v27__reveal {
    max-height: 170px;
    margin-top: 12px;
    opacity: 1;
    transform: none;
  }

  .service-card-v27__link::before {
    width: 72px;
  }
}
/* ==========================================================
   V28 — GALLERY / LET'S TALK BREATHING ROOM
   Adds a small visual reset between the project gallery and the
   floating Let's Talk band without changing the band itself.
   Desktop: ~32px, tablet: ~24px, mobile: ~18–20px.
   ========================================================== */

@media (min-width: 1121px) {
  .contact-float {
    top: 32px;
  }
}

@media (min-width: 861px) and (max-width: 1120px) {
  .contact-float {
    top: 24px;
  }
}

@media (max-width: 860px) {
  /* V27 pulls the band upward by 34px on smaller screens.
     Reducing that pull creates ~20px more clean paper above it. */
  .contact-float {
    transform: translateY(-14px);
  }
}

@media (max-width: 560px) {
  .contact-float {
    transform: translateY(-15px);
  }
}
/* ==========================================================
   V29 — CONNECTED THREE-STEP PROCESS
   Replaces the three dark cards with one lighter connected flow:
   animated line-art icons, dotted connectors, centered copy, and
   a single CTA. Pure CSS/SVG animation; no JavaScript required.
   ========================================================== */

.process--v29 {
  overflow: hidden;
}

.process--v29 .process-v3 {
  width: min(calc(100% - 56px), 1240px);
  padding-top: 102px;
  padding-bottom: 148px;
}

.process-v29__heading {
  max-width: 930px;
  margin-bottom: 58px;
}

.process-v29__heading h2 {
  font-size: clamp(3.6rem, 5vw, 5.35rem);
}

.process-v29__steps {
  position: relative;
  display: grid;
  max-width: 1160px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: clamp(58px, 7vw, 104px);
  margin-inline: auto;
}

.process-v29__step {
  position: relative;
  z-index: 2;
  min-width: 0;
  text-align: center;
}

/* Dotted connector between the icon centers. */
.process-v29__step:not(:last-child)::after {
  position: absolute;
  z-index: -1;
  top: 39px;
  left: calc(50% + 54px);
  width: calc(100% + clamp(58px, 7vw, 104px) - 108px);
  height: 5px;
  content: "";
  opacity: .82;
  background-image: radial-gradient(circle, rgba(var(--primary-light-rgb),.72) 2px, transparent 2.4px);
  background-repeat: repeat-x;
  background-position: left center;
  background-size: 11px 5px;
}

.process-v29__icon {
  position: relative;
  display: grid;
  width: 82px;
  height: 82px;
  place-items: center;
  margin: 0 auto 19px;
  color: var(--navy-800);
  background:
    linear-gradient(145deg, rgba(255,255,255,.94), rgba(238,243,247,.95)),
    var(--clearpeak-paper-light);
  border: 1px solid rgba(var(--primary-light-rgb),.10);
  border-radius: 12px;
  box-shadow:
    0 10px 22px rgba(var(--primary-dark-rgb),.10),
    inset 0 -3px 0 rgba(var(--aqua-rgb),.10);
}

.process-v29__icon::after {
  position: absolute;
  right: 12px;
  bottom: -1px;
  left: 12px;
  height: 3px;
  content: "";
  background: var(--aqua);
  transform: scaleX(.48);
  transform-origin: center;
  transition: transform 220ms ease;
}

.process-v29__icon svg {
  width: 49px;
  height: 49px;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.15;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.process-v29__number {
  display: block;
  margin-bottom: 8px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .075em;
  text-transform: uppercase;
}

.process-v29__step h3 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: clamp(1.2rem, 1.55vw, 1.48rem);
  font-weight: 800;
  letter-spacing: -.025em;
  line-height: 1.15;
}

.process-v29__step > p {
  max-width: 325px;
  margin: 11px auto 0;
  color: var(--gray-700);
  font-size: .82rem;
  line-height: 1.62;
}

.process-v29__cta {
  margin-top: 47px;
}

/* Hide the old card presentation if legacy markup/classes ever coexist. */
.process--v29 .process-v3__steps,
.process--v29 .process-card {
  display: none !important;
}

/* -----------------------------
   LOOPING MICRO-ANIMATIONS
   ----------------------------- */

.process-v29__icon-line,
.process-v29__icon-base {
  stroke: var(--navy-800);
}

.process-v29__check {
  stroke: var(--aqua);
  stroke-width: 2.8;
  stroke-dasharray: 16;
  stroke-dashoffset: 16;
}

.process-v29__check--1 { animation: processV29Check 4.8s ease-in-out .15s infinite; }
.process-v29__check--2 { animation: processV29Check 4.8s ease-in-out .42s infinite; }
.process-v29__check--3 { animation: processV29Check 4.8s ease-in-out .69s infinite; }

@keyframes processV29Check {
  0%, 8% { stroke-dashoffset: 16; opacity: .15; }
  19%, 66% { stroke-dashoffset: 0; opacity: 1; }
  82%, 100% { stroke-dashoffset: 0; opacity: .30; }
}

.process-v29__calendar-day {
  stroke: rgba(var(--primary-light-rgb),.72);
  fill: rgba(var(--primary-light-rgb),.035);
}

.process-v29__calendar-day--1 { animation: processV29CalendarDay 5.2s ease-in-out .15s infinite; }
.process-v29__calendar-day--2 { animation: processV29CalendarDay 5.2s ease-in-out .42s infinite; }
.process-v29__calendar-day--3 { animation: processV29CalendarDay 5.2s ease-in-out .69s infinite; }
.process-v29__calendar-day--4 { animation: processV29CalendarDay 5.2s ease-in-out .96s infinite; }

.process-v29__calendar-check {
  stroke: var(--aqua);
  stroke-width: 2.9;
  stroke-dasharray: 22;
  stroke-dashoffset: 22;
  animation: processV29CalendarCheck 5.2s ease-in-out 1.08s infinite;
}

@keyframes processV29CalendarDay {
  0%, 10% { fill: rgba(var(--primary-light-rgb),.035); stroke: rgba(var(--primary-light-rgb),.72); }
  22%, 54% { fill: rgba(var(--aqua-rgb),.38); stroke: var(--aqua); }
  72%, 100% { fill: rgba(var(--primary-light-rgb),.035); stroke: rgba(var(--primary-light-rgb),.72); }
}

@keyframes processV29CalendarCheck {
  0%, 22% { stroke-dashoffset: 22; opacity: 0; }
  34%, 67% { stroke-dashoffset: 0; opacity: 1; }
  82%, 100% { stroke-dashoffset: 0; opacity: 0; }
}

.process-v29__shield {
  stroke: var(--navy-800);
}

.process-v29__shield-check {
  stroke: var(--aqua);
  stroke-width: 3;
  stroke-dasharray: 32;
  stroke-dashoffset: 32;
  animation: processV29ShieldCheck 4.9s ease-in-out .35s infinite;
}

.process-v29__spark {
  stroke: var(--aqua);
  stroke-width: 2.5;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.process-v29__spark--1 { animation: processV29Spark 4.9s ease-in-out .72s infinite; }
.process-v29__spark--2 { animation: processV29Spark 4.9s ease-in-out .92s infinite; }

@keyframes processV29ShieldCheck {
  0%, 15% { stroke-dashoffset: 32; opacity: .1; }
  31%, 70% { stroke-dashoffset: 0; opacity: 1; }
  86%, 100% { stroke-dashoffset: 0; opacity: .30; }
}

@keyframes processV29Spark {
  0%, 24%, 78%, 100% { opacity: 0; transform: scale(.55); }
  38%, 58% { opacity: 1; transform: scale(1); }
}

@media (max-width: 900px) {
  .process--v29 .process-v3 {
    width: min(calc(100% - 48px), var(--container));
    padding-top: 92px;
    padding-bottom: 116px;
  }

  .process-v29__heading {
    margin-bottom: 48px;
  }

  .process-v29__steps {
    gap: 42px;
  }

  .process-v29__step:not(:last-child)::after {
    left: calc(50% + 48px);
    width: calc(100% + 42px - 96px);
  }

  .process-v29__icon {
    width: 76px;
    height: 76px;
  }

  .process-v29__icon svg {
    width: 45px;
    height: 45px;
  }

  .process-v29__step > p {
    font-size: .78rem;
  }
}

@media (max-width: 700px) {
  .process--v29 .process-v3 {
    width: min(calc(100% - 36px), var(--container));
    padding-top: 82px;
    padding-bottom: 92px;
  }

  .process-v29__heading {
    margin-bottom: 42px;
  }

  .process-v29__steps {
    max-width: 520px;
    grid-template-columns: 1fr;
    gap: 42px;
  }

  .process-v29__step {
    display: grid;
    grid-template-columns: 82px minmax(0, 1fr);
    column-gap: 20px;
    text-align: left;
  }

  .process-v29__step:not(:last-child)::after {
    top: 78px;
    left: 39px;
    width: 5px;
    height: calc(100% + 42px - 66px);
    background-image: radial-gradient(circle, rgba(var(--primary-light-rgb),.66) 2px, transparent 2.4px);
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 5px 11px;
  }

  .process-v29__icon {
    grid-column: 1;
    grid-row: 1 / span 3;
    width: 78px;
    height: 78px;
    margin: 0;
  }

  .process-v29__number {
    grid-column: 2;
    margin: 3px 0 5px;
  }

  .process-v29__step h3 {
    grid-column: 2;
    font-size: 1.28rem;
  }

  .process-v29__step > p {
    grid-column: 2;
    max-width: none;
    margin: 8px 0 0;
  }

  .process-v29__cta {
    margin-top: 40px;
  }
}

@media (max-width: 460px) {
  .process-v29__step {
    grid-template-columns: 68px minmax(0, 1fr);
    column-gap: 16px;
  }

  .process-v29__icon {
    width: 66px;
    height: 66px;
    border-radius: 10px;
  }

  .process-v29__icon svg {
    width: 40px;
    height: 40px;
  }

  .process-v29__step:not(:last-child)::after {
    top: 66px;
    left: 32px;
  }

  .process-v29__cta .button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v29__check,
  .process-v29__calendar-day,
  .process-v29__calendar-check,
  .process-v29__shield-check,
  .process-v29__spark {
    animation: none !important;
  }

  .process-v29__check,
  .process-v29__calendar-check,
  .process-v29__shield-check {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
/* ==========================================================
   V30 — HIGHER-IMPACT PROCESS ANIMATION
   Keeps the V29 layout untouched, but makes the motion much easier
   to see: sequential icon pulses, brighter aqua drawing strokes,
   connector energy sweeps, and a clear Step 1 → 2 → 3 rhythm.
   ========================================================== */

.process-v29__icon {
  width: 90px;
  height: 90px;
  margin-bottom: 20px;
  transition:
    transform 260ms ease,
    box-shadow 260ms ease,
    border-color 260ms ease,
    background-color 260ms ease;
}

.process-v29__icon svg {
  width: 54px;
  height: 54px;
  stroke-width: 2.3;
}

/* Each step gets a visible "active" pulse in sequence. */
.process-v29__step:nth-child(1) .process-v29__icon {
  animation: processV30IconPulse 7.2s ease-in-out 0s infinite;
}

.process-v29__step:nth-child(2) .process-v29__icon {
  animation: processV30IconPulse 7.2s ease-in-out 2.25s infinite;
}

.process-v29__step:nth-child(3) .process-v29__icon {
  animation: processV30IconPulse 7.2s ease-in-out 4.5s infinite;
}

@keyframes processV30IconPulse {
  0%, 7%, 31%, 100% {
    transform: translateY(0) scale(1);
    border-color: rgba(var(--primary-light-rgb),.10);
    box-shadow:
      0 10px 22px rgba(var(--primary-dark-rgb),.10),
      inset 0 -3px 0 rgba(var(--aqua-rgb),.10);
  }

  12%, 22% {
    transform: translateY(-5px) scale(1.065);
    border-color: rgba(var(--aqua-rgb),.78);
    box-shadow:
      0 16px 32px rgba(var(--primary-dark-rgb),.14),
      0 0 0 5px rgba(var(--aqua-rgb),.10),
      0 0 26px rgba(var(--aqua-rgb),.34),
      inset 0 -4px 0 rgba(var(--aqua-rgb),.38);
  }

  27% {
    transform: translateY(-2px) scale(1.025);
    border-color: rgba(var(--aqua-rgb),.34);
    box-shadow:
      0 12px 25px rgba(var(--primary-dark-rgb),.12),
      0 0 14px rgba(var(--aqua-rgb),.14),
      inset 0 -3px 0 rgba(var(--aqua-rgb),.18);
  }
}

/* Make the aqua underline under the active icon visibly expand. */
.process-v29__step:nth-child(1) .process-v29__icon::after {
  animation: processV30Underline 7.2s ease-in-out 0s infinite;
}
.process-v29__step:nth-child(2) .process-v29__icon::after {
  animation: processV30Underline 7.2s ease-in-out 2.25s infinite;
}
.process-v29__step:nth-child(3) .process-v29__icon::after {
  animation: processV30Underline 7.2s ease-in-out 4.5s infinite;
}

@keyframes processV30Underline {
  0%, 7%, 31%, 100% { transform: scaleX(.48); }
  12%, 23% { transform: scaleX(1.25); }
  28% { transform: scaleX(.72); }
}

/* Stronger sequential labels to reinforce which step is active. */
.process-v29__step:nth-child(1) .process-v29__number {
  animation: processV30StepLabel 7.2s ease-in-out 0s infinite;
}
.process-v29__step:nth-child(2) .process-v29__number {
  animation: processV30StepLabel 7.2s ease-in-out 2.25s infinite;
}
.process-v29__step:nth-child(3) .process-v29__number {
  animation: processV30StepLabel 7.2s ease-in-out 4.5s infinite;
}

@keyframes processV30StepLabel {
  0%, 7%, 31%, 100% {
    color: var(--aqua);
    text-shadow: none;
    transform: translateY(0);
  }
  12%, 23% {
    color: #dcae00;
    text-shadow: 0 0 14px rgba(var(--aqua-rgb),.40);
    transform: translateY(-1px);
  }
}

/* Connector gets a traveling aqua energy sweep after Step 1 and Step 2. */
.process-v29__step:not(:last-child)::before {
  position: absolute;
  z-index: 0;
  top: 37px;
  left: calc(50% + 54px);
  width: calc(100% + clamp(58px, 7vw, 104px) - 108px);
  height: 9px;
  content: "";
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(circle, rgba(var(--aqua-rgb),1) 0 3px, rgba(var(--aqua-rgb),.34) 3.5px 5px, transparent 5.5px);
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: 11px 11px;
  filter: drop-shadow(0 0 6px rgba(var(--aqua-rgb),.72));
}

.process-v29__step:nth-child(1)::before {
  animation: processV30Connector 7.2s linear 1.35s infinite;
}

.process-v29__step:nth-child(2)::before {
  animation: processV30Connector 7.2s linear 3.6s infinite;
}

@keyframes processV30Connector {
  0%, 2% {
    opacity: 0;
    background-position: 0 50%;
  }
  4% {
    opacity: 1;
  }
  14% {
    opacity: 1;
    background-position: 100% 50%;
  }
  16%, 100% {
    opacity: 0;
    background-position: 100% 50%;
  }
}

/* -----------------------------
   STEP 1 — CLIPBOARD
   ----------------------------- */

.process-v29__check {
  stroke: var(--aqua);
  stroke-width: 3.8;
  filter: drop-shadow(0 0 2px rgba(var(--aqua-rgb),.55));
  stroke-dasharray: 18;
  stroke-dashoffset: 18;
}

.process-v29__check--1 {
  animation: processV30Check 7.2s ease-in-out .20s infinite;
}
.process-v29__check--2 {
  animation: processV30Check 7.2s ease-in-out .48s infinite;
}
.process-v29__check--3 {
  animation: processV30Check 7.2s ease-in-out .76s infinite;
}

.process-v29__icon--estimate svg {
  animation: processV30ClipboardFlash 7.2s ease-in-out 0s infinite;
}

@keyframes processV30Check {
  0%, 3% {
    stroke-dashoffset: 18;
    opacity: .05;
  }
  8%, 24% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  28%, 100% {
    stroke-dashoffset: 0;
    opacity: .22;
  }
}

@keyframes processV30ClipboardFlash {
  0%, 20%, 100% { filter: none; }
  23% { filter: drop-shadow(0 0 7px rgba(var(--aqua-rgb),.72)); }
  27% { filter: none; }
}

/* -----------------------------
   STEP 2 — CALENDAR
   ----------------------------- */

.process-v29__calendar-day {
  stroke: rgba(var(--primary-light-rgb),.74);
  fill: rgba(var(--primary-light-rgb),.035);
  stroke-width: 2.1;
}

.process-v29__calendar-day--1 {
  animation: processV30CalendarDay 7.2s ease-in-out 2.42s infinite;
}
.process-v29__calendar-day--2 {
  animation: processV30CalendarDay 7.2s ease-in-out 2.62s infinite;
}
.process-v29__calendar-day--3 {
  animation: processV30CalendarDay 7.2s ease-in-out 2.82s infinite;
}
.process-v29__calendar-day--4 {
  animation: processV30CalendarDay 7.2s ease-in-out 3.02s infinite;
}

.process-v29__calendar-check {
  stroke: var(--aqua);
  stroke-width: 4;
  stroke-dasharray: 24;
  stroke-dashoffset: 24;
  filter: drop-shadow(0 0 2px rgba(var(--aqua-rgb),.58));
  animation: processV30CalendarCheck 7.2s ease-in-out 3.03s infinite;
}

@keyframes processV30CalendarDay {
  0%, 2%, 20%, 100% {
    fill: rgba(var(--primary-light-rgb),.035);
    stroke: rgba(var(--primary-light-rgb),.74);
    transform: scale(1);
  }
  5%, 14% {
    fill: rgba(var(--aqua-rgb),.92);
    stroke: var(--aqua);
    transform: scale(1.08);
  }
}

@keyframes processV30CalendarCheck {
  0%, 2% {
    stroke-dashoffset: 24;
    opacity: 0;
  }
  8%, 18% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  22%, 100% {
    stroke-dashoffset: 0;
    opacity: .22;
  }
}

/* -----------------------------
   STEP 3 — SHIELD
   ----------------------------- */

.process-v29__shield {
  stroke: var(--navy-800);
  stroke-width: 2.4;
  animation: processV30ShieldBorder 7.2s ease-in-out 4.5s infinite;
}

.process-v29__shield-check {
  stroke: var(--aqua);
  stroke-width: 4.25;
  stroke-dasharray: 34;
  stroke-dashoffset: 34;
  filter: drop-shadow(0 0 2px rgba(var(--aqua-rgb),.60));
  animation: processV30ShieldCheck 7.2s ease-in-out 4.66s infinite;
}

.process-v29__spark {
  stroke: var(--aqua);
  stroke-width: 3.1;
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.process-v29__spark--1 {
  animation: processV30Spark 7.2s ease-in-out 5.02s infinite;
}
.process-v29__spark--2 {
  animation: processV30Spark 7.2s ease-in-out 5.18s infinite;
}

@keyframes processV30ShieldBorder {
  0%, 7%, 31%, 100% {
    stroke: var(--navy-800);
    filter: none;
  }
  13%, 23% {
    stroke: var(--aqua);
    filter: drop-shadow(0 0 4px rgba(var(--aqua-rgb),.48));
  }
}

@keyframes processV30ShieldCheck {
  0%, 3% {
    stroke-dashoffset: 34;
    opacity: .05;
  }
  10%, 23% {
    stroke-dashoffset: 0;
    opacity: 1;
  }
  28%, 100% {
    stroke-dashoffset: 0;
    opacity: .24;
  }
}

@keyframes processV30Spark {
  0%, 4%, 24%, 100% {
    opacity: 0;
    transform: scale(.35) rotate(0deg);
  }
  9%, 15% {
    opacity: 1;
    transform: scale(1.28) rotate(12deg);
  }
  19% {
    opacity: .45;
    transform: scale(.85) rotate(0deg);
  }
}

/* Tablet connector math follows the narrower V29 layout. */
@media (min-width: 701px) and (max-width: 900px) {
  .process-v29__step:not(:last-child)::before {
    left: calc(50% + 48px);
    width: calc(100% + 42px - 96px);
  }
}

/* Mobile keeps the vertical connector, but the icon pulses remain obvious.
   We suppress the horizontal traveling-dot pseudo because V29 swaps the
   connector to a vertical line at this breakpoint. */
@media (max-width: 700px) {
  .process-v29__step:not(:last-child)::before {
    display: none;
  }

  .process-v29__icon {
    width: 82px;
    height: 82px;
  }

  .process-v29__icon svg {
    width: 49px;
    height: 49px;
  }
}

@media (max-width: 460px) {
  .process-v29__icon {
    width: 70px;
    height: 70px;
  }

  .process-v29__icon svg {
    width: 42px;
    height: 42px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .process-v29__step .process-v29__icon,
  .process-v29__icon::after,
  .process-v29__number,
  .process-v29__step::before,
  .process-v29__check,
  .process-v29__icon--estimate svg,
  .process-v29__calendar-day,
  .process-v29__calendar-check,
  .process-v29__shield,
  .process-v29__shield-check,
  .process-v29__spark {
    animation: none !important;
  }

  .process-v29__check,
  .process-v29__calendar-check,
  .process-v29__shield-check {
    stroke-dashoffset: 0;
    opacity: 1;
  }
}
/* ==========================================================
   V31 — PROCESS -> FAQ ROUGH EDGE RESTORE
   The old Process -> Service Area transition was intentionally
   disabled when Service Area owned a full navy section. Service
   Area is now a floating zero-height band, so Process meets FAQ
   directly and that disabled edge leaves a hard horizontal seam.
   Paint the FAQ's real off-white color into the bottom of Process
   with the same rough-paper edge language used elsewhere.
   ========================================================== */

.process--v29.process--reworked::after {
  display: block !important;
  position: absolute;
  z-index: 15;
  right: -2px;
  bottom: -1px;
  left: -2px;
  height: 42px;
  content: "";
  pointer-events: none;
  background-color: transparent;
  background-image: var(--clearpeak-rough-offwhite) !important;
  background-repeat: no-repeat;
  background-position: center bottom;
  background-size: 100% 100%;
}

/* The floating statewide band stays above the torn transition. */
.service-area-float-shell {
  z-index: 42;
}

@media (max-width: 860px) {
  .process--v29.process--reworked::after {
    height: 36px;
  }
}

@media (max-width: 560px) {
  .process--v29.process--reworked::after {
    height: 30px;
  }
}
/* ==========================================================
   V32 — PROCESS -> FAQ EDGE OWNERSHIP FIX
   Desktop-only refinement: instead of painting the torn edge inside
   Process (where overflow:hidden can clip it), the ACTUAL FAQ paper
   now overlaps upward into Process. This removes the faint remaining
   horizontal seam while preserving the floating statewide band above it.
   ========================================================== */

@media (min-width: 861px) {
  /* V31's outgoing Process strip is no longer needed on desktop. */
  .process--v29.process--reworked::after {
    display: none !important;
  }

  /* Let the real FAQ surface own the incoming torn-paper edge. */
  .faq::before {
    display: block !important;
    position: absolute;
    z-index: 8;
    top: -46px;
    right: -3px;
    left: -3px;
    height: 62px;
    content: "";
    pointer-events: none;

    background-color: var(--off-white);
    background-image: var(--clearpeak-paper-light);
    background-repeat: repeat;
    background-position: 186px -271px;
    background-size: 520px 520px;

    clip-path: polygon(
      0 45%,
      3% 39%,
      7% 46%,
      11% 35%,
      16% 42%,
      21% 32%,
      26% 43%,
      31% 37%,
      36% 47%,
      41% 34%,
      46% 41%,
      51% 31%,
      56% 44%,
      61% 36%,
      66% 46%,
      71% 33%,
      76% 42%,
      81% 35%,
      86% 45%,
      91% 32%,
      96% 41%,
      100% 36%,
      100% 100%,
      0 100%
    );
  }

  /* Floating statewide band remains visually above the torn paper. */
  .service-area-float-shell {
    z-index: 42;
  }
}
/* ==========================================================
   V33 — FINAL PROCESS -> FAQ SEAM FIX
   V32's FAQ pseudo-element extended ~16px INSIDE the FAQ.
   Its bottom edge used a slightly different surface treatment than
   the real FAQ background, creating the faint straight line that was
   still visible. This version ends the torn overlay exactly at the
   section boundary with a 1px overlap — no internal horizontal edge.
   ========================================================== */

@media (min-width: 861px) {
  .process--v29.process--reworked::after {
    display: none !important;
  }

  .faq::before {
    display: block !important;
    position: absolute !important;
    z-index: 8 !important;

    /* 46px above FAQ + 1px overlap into FAQ. */
    top: -46px !important;
    right: -3px !important;
    bottom: auto !important;
    left: -3px !important;
    height: 47px !important;

    content: "" !important;
    pointer-events: none !important;

    /* Use the existing rough off-white asset only. Its bottom is the
       exact FAQ base color, so there is no second surface ending inside FAQ. */
    background-color: transparent !important;
    background-image: var(--clearpeak-rough-offwhite) !important;
    background-repeat: no-repeat !important;
    background-position: center bottom !important;
    background-size: 100% 100% !important;

    /* V32 used clip-path + a separate textured fill. Remove both so there
       is only one torn edge and one join point. */
    clip-path: none !important;
  }

  .service-area-float-shell {
    z-index: 42;
  }
}
/* ==========================================================
   V34 — TRUE FAQ ROUGH TOP EDGE
   Final structural fix: stop layering transition graphics over a
   straight FAQ boundary. The FAQ section itself now has an irregular
   clipped top edge, so there is physically no straight seam to show.
   ========================================================== */

/* Remove both legacy transition layers at this junction. */
.process--v29.process--reworked::after {
  display: none !important;
}

.faq::before {
  display: none !important;
}

/* The FAQ's own background is now the torn/rough incoming edge. */
.faq {
  clip-path: polygon(
    0 21px,
    3% 18px,
    7% 23px,
    11% 17px,
    16% 22px,
    21% 16px,
    26% 21px,
    31% 18px,
    36% 24px,
    41% 17px,
    46% 21px,
    51% 16px,
    56% 23px,
    61% 18px,
    66% 22px,
    71% 16px,
    76% 21px,
    81% 18px,
    86% 23px,
    91% 17px,
    96% 21px,
    100% 18px,
    100% 100%,
    0 100%
  );
}

/* The floating statewide banner remains above the clipped edge. */
.service-area-float-shell {
  z-index: 42;
}

@media (max-width: 860px) {
  .faq {
    clip-path: polygon(
      0 16px,
      6% 13px,
      12% 18px,
      19% 12px,
      26% 17px,
      33% 13px,
      40% 19px,
      47% 12px,
      54% 17px,
      61% 13px,
      68% 18px,
      75% 12px,
      82% 17px,
      89% 13px,
      95% 18px,
      100% 14px,
      100% 100%,
      0 100%
    );
  }
}

@media (max-width: 560px) {
  .faq {
    clip-path: polygon(
      0 13px,
      8% 10px,
      16% 14px,
      24% 9px,
      32% 13px,
      40% 10px,
      48% 15px,
      56% 9px,
      64% 13px,
      72% 10px,
      80% 14px,
      88% 9px,
      95% 13px,
      100% 10px,
      100% 100%,
      0 100%
    );
  }
}
/* ==========================================================
   V35 — CONCRETE-FIXERS-INSPIRED REVIEW CAROUSEL
   Three review panels with a strong centered feature card, white
   side cards, manual arrows, auto-rotation, and compact actions.
   Uses CLEARPEAK navy + aqua and keeps the existing distressed paper.
   ========================================================== */

.reviews--v35 {
  overflow: hidden;
}

.reviews-v35 {
  position: relative;
  z-index: 2;
  width: min(calc(100% - 56px), 1240px);
  padding-top: 194px;
  padding-bottom: 108px;
}

.reviews-v35__heading {
  max-width: 1100px;
  margin: 0 auto 51px;
  text-align: center;
}

.reviews-v35__heading h2 {
  margin: 0;
  color: var(--navy-800);
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3.35rem, 4.7vw, 5.1rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .92;
  text-transform: uppercase;
}

.reviews-v35__viewport {
  width: 100%;
  overflow: hidden;
  padding: 4px 4px 6px;
}

.reviews-v35__track {
  display: flex;
  gap: 18px;
  will-change: transform;
}

.review-v35 {
  position: relative;
  display: flex;
  flex: 0 0 calc((100% - 36px) / 3);
  min-width: 0;
  min-height: 402px;
  flex-direction: column;
  justify-content: space-between;
  padding: 34px 31px 29px;
  color: var(--navy-900);
  background:
    linear-gradient(rgba(var(--primary-rgb),.018) 1px, transparent 1px),
    linear-gradient(90deg, rgba(var(--primary-rgb),.018) 1px, transparent 1px),
    rgba(255,255,255,.94);
  background-size: 54px 54px, 54px 54px, auto;
  border: 1px solid rgba(var(--primary-rgb),.14);
  box-shadow: 0 9px 20px rgba(var(--primary-dark-rgb),.035);
  transition:
    color 360ms ease,
    background 360ms ease,
    border-color 360ms ease,
    box-shadow 360ms ease,
    transform 360ms ease;
}

.review-v35::after {
  position: absolute;
  right: -1px;
  bottom: -1px;
  width: 0;
  height: 4px;
  content: "";
  background: var(--aqua);
  transition: width 360ms ease;
}

.review-v35--featured {
  color: var(--white);
  background:
    linear-gradient(rgba(255,255,255,.032) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.032) 1px, transparent 1px),
    var(--navy-800);
  background-size: 54px 54px, 54px 54px, auto;
  border-color: var(--navy-800);
  box-shadow: 0 18px 34px rgba(var(--primary-dark-rgb),.15);
  transform: translateY(-2px);
}

.review-v35--featured::after {
  width: calc(100% + 1px);
}

.review-v35--featured::before {
  position: absolute;
  top: -1px;
  right: -1px;
  width: 4px;
  height: calc(100% + 2px);
  content: "";
  background: var(--aqua);
}

.review-v35__text {
  margin: 0;
  font-size: .94rem;
  font-weight: 500;
  line-height: 1.72;
}

.review-v35--featured .review-v35__text {
  color: rgba(255,255,255,.94);
}

.review-v35__footer {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-top: 34px;
}

.review-v35__avatar {
  display: grid;
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  place-items: center;
  overflow: hidden;
  color: var(--navy-900);
  background:
    radial-gradient(circle at 34% 30%, rgba(255,255,255,.85), transparent 31%),
    linear-gradient(145deg, var(--aqua), #ad0c11);
  border: 3px solid var(--white);
  border-radius: 50%;
  box-shadow: 0 4px 12px rgba(var(--primary-dark-rgb),.12);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
}

.review-v35__meta {
  display: grid;
  min-width: 0;
  gap: 3px;
}

.review-v35__stars {
  color: var(--aqua);
  font-size: .88rem;
  letter-spacing: .04em;
  line-height: 1;
}

.review-v35__meta strong {
  color: inherit;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: .01em;
  line-height: 1.15;
  text-transform: uppercase;
}

.review-v35__meta small {
  color: var(--gray-500);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1.35;
}

.review-v35--featured .review-v35__meta small {
  color: rgba(255,255,255,.68);
}

.reviews-v35__controls {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 30px;
  margin-top: 26px;
}

.reviews-v35__arrows {
  display: flex;
  gap: 10px;
}

.reviews-v35__arrow {
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  padding: 0;
  color: var(--navy-800);
  background: transparent;
  border: 1px solid rgba(var(--primary-light-rgb),.68);
  cursor: pointer;
  transition:
    color 180ms ease,
    background-color 180ms ease,
    border-color 180ms ease,
    transform 180ms ease;
}

.reviews-v35__arrow span {
  display: block;
  margin-top: -3px;
  font-family: Arial, sans-serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1;
}

.reviews-v35__arrow:hover {
  color: var(--navy-950);
  background: var(--aqua);
  border-color: var(--aqua);
  transform: translateY(-2px);
}

.reviews-v35__actions {
  display: flex;
  justify-content: center;
  gap: 14px;
  padding-right: 92px;
}

.reviews-v35__button {
  min-height: 54px;
  padding-inline: 27px;
}

.reviews-v35__button--primary {
  color: var(--white);
  background: var(--navy-800);
  border-color: var(--navy-800);
}

.reviews-v35__button--primary:hover {
  color: var(--navy-950);
  background: var(--aqua);
  border-color: var(--aqua);
}

.reviews-v35__button--secondary {
  color: var(--navy-800);
  background: rgba(255,255,255,.45);
  border-color: var(--navy-800);
}

.reviews-v35__button--secondary:hover {
  color: var(--navy-950);
  background: var(--aqua);
  border-color: var(--aqua);
}

/* V35 replaces the old intro + horizontal scrollbar rail. */
.reviews--v35 .reviews-v3 {
  display: none !important;
}

@media (max-width: 1000px) {
  .reviews-v35 {
    width: min(calc(100% - 48px), var(--container));
  }

  .review-v35 {
    min-height: 380px;
    padding: 30px 25px 26px;
  }

  .review-v35__text {
    font-size: .87rem;
  }

  .reviews-v35__actions {
    padding-right: 0;
  }
}

@media (max-width: 820px) {
  .reviews-v35 {
    padding-top: 106px;
    padding-bottom: 92px;
  }

  .reviews-v35__heading {
    max-width: 700px;
    margin-bottom: 38px;
  }

  .reviews-v35__heading h2 {
    font-size: clamp(3rem, 10vw, 4.4rem);
  }

  .reviews-v35__viewport {
    width: min(100%, 620px);
    margin-inline: auto;
  }

  .review-v35 {
    flex-basis: 100%;
    min-height: 330px;
  }

  .review-v35:not(.review-v35--featured) {
    color: var(--navy-900);
  }

  .reviews-v35__controls {
    width: min(100%, 620px);
    grid-template-columns: auto 1fr;
    margin-inline: auto;
  }

  .reviews-v35__actions {
    justify-content: flex-end;
  }
}

@media (max-width: 600px) {
  .reviews-v35 {
    width: min(calc(100% - 34px), var(--container));
    padding-top: 94px;
    padding-bottom: 82px;
  }

  .reviews-v35__heading {
    margin-bottom: 31px;
  }

  .reviews-v35__heading h2 {
    font-size: clamp(2.7rem, 13vw, 3.7rem);
  }

  .review-v35 {
    min-height: 350px;
    padding: 27px 23px 24px;
  }

  .reviews-v35__controls {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .reviews-v35__arrows {
    justify-content: center;
  }

  .reviews-v35__actions {
    display: grid;
    grid-template-columns: 1fr;
    justify-content: stretch;
  }

  .reviews-v35__button {
    width: 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews-v35__track,
  .review-v35 {
    transition: none !important;
  }
}
/* ==========================================================
   V36 — REVIEWS AUTOPLAY + COMPACT CARD HEIGHT
   V35 paused autoplay whenever the pointer sat over the review
   section. V36 keeps the carousel rotating continuously and trims
   the oversized review cards so the section feels lighter.
   ========================================================== */

.review-v35 {
  min-height: 315px;
  padding: 29px 30px 25px;
}

.review-v35__text {
  font-size: .90rem;
  line-height: 1.62;
}

.review-v35__footer {
  margin-top: 24px;
}

.review-v35__avatar {
  width: 50px;
  height: 50px;
  flex-basis: 50px;
}

.reviews-v35__controls {
  margin-top: 22px;
}

@media (max-width: 1000px) {
  .review-v35 {
    min-height: 305px;
    padding: 27px 24px 23px;
  }

  .review-v35__text {
    font-size: .84rem;
  }
}

@media (max-width: 820px) {
  .review-v35 {
    min-height: 290px;
  }
}

@media (max-width: 600px) {
  .review-v35 {
    min-height: 300px;
    padding: 25px 22px 22px;
  }
}
/* ==========================================================
   V37 — TIGHTER REVIEW CARDS
   Reduces the remaining vertical dead space while preserving
   equal card heights and the featured-center carousel treatment.
   ========================================================== */

.review-v35 {
  min-height: 250px;
  padding: 26px 30px 22px;
}

.review-v35__text {
  font-size: .88rem;
  line-height: 1.58;
}

.review-v35__footer {
  margin-top: 20px;
}

.review-v35__avatar {
  width: 46px;
  height: 46px;
  flex-basis: 46px;
}

.review-v35__stars {
  font-size: .82rem;
}

.review-v35__meta strong {
  font-size: .96rem;
}

.review-v35__meta small {
  font-size: .68rem;
}

.reviews-v35__controls {
  margin-top: 18px;
}

@media (max-width: 1000px) {
  .review-v35 {
    min-height: 245px;
    padding: 24px 23px 21px;
  }

  .review-v35__text {
    font-size: .82rem;
  }

  .review-v35__footer {
    margin-top: 18px;
  }
}

@media (max-width: 820px) {
  .review-v35 {
    min-height: 255px;
  }
}

@media (max-width: 600px) {
  .review-v35 {
    min-height: 270px;
    padding: 24px 21px 21px;
  }
}
/* ==========================================================
   V38 — FAMILY-OWNED CINEMATIC REVEAL
   Haro-inspired scroll entrance: backing shape -> main photo ->
   inset photos -> copy -> stats/counter -> field link.
   Runs once when the section enters view. No looping motion.
   ========================================================== */

.story--v38 {
  isolation: isolate;
}

/* Initial states */
.story--v38 .story__shape {
  opacity: 0;
  transform: translateX(-46px) scaleX(.84);
  transform-origin: left center;
}

.story--v38 .story__photo--main {
  opacity: 0;
  transform: translateX(-64px) scale(.965);
}

.story--v38 .story__photo--equipment {
  opacity: 0;
  transform: translate(-26px, -30px) rotate(-4deg) scale(.92);
}

.story--v38 .story__photo--trailer {
  opacity: 0;
  transform: translate(34px, 32px) rotate(4deg) scale(.92);
}

.story--v38 .story__content > h2,
.story--v38 .story__content > p,
.story--v38 .story__proof,
.story--v38 .story__content > .text-link {
  opacity: 0;
  transform: translateY(22px);
}

.story--v38 .story__proof > div {
  position: relative;
  overflow: hidden;
}

.story--v38 .story__proof > div + div::before {
  position: absolute;
  top: 0;
  bottom: 100%;
  left: -1px;
  width: 1px;
  content: "";
  background: #d7dde2;
}

.story--v38 .story-v38__counter,
.story--v38 .story-v38__word {
  display: block;
  opacity: 0;
  transform: translateY(22px);
}

.story--v38 .story-v38__counter-plus {
  display: inline-block;
  color: var(--aqua);
  transform: scale(.45);
  transform-origin: center bottom;
}

.story--v38 .story__proof small {
  opacity: 0;
  transform: translateY(10px);
}

/* Reveal sequence */
.story--v38.is-story-visible .story__shape {
  animation: storyV38Shape 680ms cubic-bezier(.22,.76,.24,1) 0ms both;
}

.story--v38.is-story-visible .story__photo--main {
  animation: storyV38MainPhoto 760ms cubic-bezier(.20,.78,.22,1) 100ms both;
}

.story--v38.is-story-visible .story__photo--equipment {
  animation: storyV38InsetTop 620ms cubic-bezier(.20,.78,.22,1) 260ms both;
}

.story--v38.is-story-visible .story__photo--trailer {
  animation: storyV38InsetBottom 650ms cubic-bezier(.20,.78,.22,1) 390ms both;
}

.story--v38.is-story-visible .story__content > h2 {
  animation: storyV38Rise 620ms cubic-bezier(.22,.74,.24,1) 270ms both;
}

.story--v38.is-story-visible .story__content > p:nth-of-type(1) {
  animation: storyV38Rise 560ms cubic-bezier(.22,.74,.24,1) 410ms both;
}

.story--v38.is-story-visible .story__content > p:nth-of-type(2) {
  animation: storyV38Rise 560ms cubic-bezier(.22,.74,.24,1) 525ms both;
}

.story--v38.is-story-visible .story__proof {
  animation: storyV38Rise 560ms cubic-bezier(.22,.74,.24,1) 640ms both;
}

.story--v38.is-story-visible .story__proof > div + div::before {
  animation: storyV38Divider 650ms cubic-bezier(.22,.74,.24,1) 690ms both;
}

.story--v38.is-story-visible .story-v38__counter {
  animation: storyV38Stat 520ms cubic-bezier(.22,.74,.24,1) 715ms both;
}

.story--v38.is-story-visible .story__proof > div:nth-child(2) .story-v38__word {
  animation: storyV38Stat 520ms cubic-bezier(.22,.74,.24,1) 820ms both;
}

.story--v38.is-story-visible .story__proof > div:nth-child(3) .story-v38__word {
  animation: storyV38Stat 520ms cubic-bezier(.22,.74,.24,1) 925ms both;
}

.story--v38.is-story-visible .story__proof > div:nth-child(1) small {
  animation: storyV38Small 420ms ease 825ms both;
}

.story--v38.is-story-visible .story__proof > div:nth-child(2) small {
  animation: storyV38Small 420ms ease 930ms both;
}

.story--v38.is-story-visible .story__proof > div:nth-child(3) small {
  animation: storyV38Small 420ms ease 1035ms both;
}

.story--v38.is-story-visible .story-v38__counter-plus {
  animation: storyV38PlusPop 430ms cubic-bezier(.2,.85,.25,1.35) 1130ms both;
}

.story--v38.is-story-visible .story__content > .text-link {
  animation: storyV38Rise 500ms cubic-bezier(.22,.74,.24,1) 1160ms both;
}

.story--v38.is-story-visible .story__content > .text-link span {
  animation: storyV38Arrow 650ms ease 1350ms both;
}

@keyframes storyV38Shape {
  from {
    opacity: 0;
    transform: translateX(-46px) scaleX(.84);
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes storyV38MainPhoto {
  0% {
    opacity: 0;
    transform: translateX(-64px) scale(.965);
    filter: saturate(.82);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
    filter: saturate(1);
  }
}

@keyframes storyV38InsetTop {
  0% {
    opacity: 0;
    transform: translate(-26px, -30px) rotate(-4deg) scale(.92);
  }
  100% {
    opacity: 1;
    transform: rotate(-1.5deg) scale(1);
  }
}

@keyframes storyV38InsetBottom {
  0% {
    opacity: 0;
    transform: translate(34px, 32px) rotate(4deg) scale(.92);
  }
  100% {
    opacity: 1;
    transform: rotate(1.4deg) scale(1);
  }
}

@keyframes storyV38Rise {
  from {
    opacity: 0;
    transform: translateY(22px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes storyV38Divider {
  from { bottom: 100%; }
  to { bottom: 0; }
}

@keyframes storyV38Stat {
  0% {
    opacity: 0;
    transform: translateY(22px);
  }
  70% {
    opacity: 1;
    transform: translateY(-2px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes storyV38Small {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes storyV38PlusPop {
  0% {
    transform: scale(.45);
    text-shadow: none;
  }
  65% {
    transform: scale(1.26);
    text-shadow: 0 0 14px rgba(var(--aqua-rgb),.34);
  }
  100% {
    transform: scale(1);
    text-shadow: none;
  }
}

@keyframes storyV38Arrow {
  0% { transform: translateX(0); }
  45% { transform: translateX(7px); }
  100% { transform: translateX(0); }
}

/* Give the counter enough stable width so 0 -> 30 never nudges the layout. */
.story-v38__counter-number {
  display: inline-block;
  min-width: 1.28em;
  font-variant-numeric: tabular-nums;
}

/* Keep the existing image collage interactions intact after the entrance. */
.story--v38.is-story-visible .story__photo--main,
.story--v38.is-story-visible .story__photo--equipment,
.story--v38.is-story-visible .story__photo--trailer,
.story--v38.is-story-visible .story__shape {
  will-change: auto;
}

@media (max-width: 760px) {
  .story--v38 .story__photo--main {
    transform: translateX(-34px) scale(.975);
  }

  .story--v38 .story__photo--equipment {
    transform: translate(-18px, -22px) rotate(-3deg) scale(.94);
  }

  .story--v38 .story__photo--trailer {
    transform: translate(22px, 22px) rotate(3deg) scale(.94);
  }
}

@media (prefers-reduced-motion: reduce) {
  .story--v38 .story__shape,
  .story--v38 .story__photo--main,
  .story--v38 .story__photo--equipment,
  .story--v38 .story__photo--trailer,
  .story--v38 .story__content > h2,
  .story--v38 .story__content > p,
  .story--v38 .story__proof,
  .story--v38 .story__content > .text-link,
  .story--v38 .story-v38__counter,
  .story--v38 .story-v38__word,
  .story--v38 .story__proof small,
  .story--v38 .story-v38__counter-plus,
  .story--v38 .story__content > .text-link span,
  .story--v38 .story__proof > div + div::before {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .story--v38 .story__proof > div + div::before {
    bottom: 0;
  }
}
/* ==========================================================
   V39 — SPLIT REVIEW CAROUSEL ARROWS
   Previous sits at the far left and Next at the far right while
   the two review action buttons remain centered.
   ========================================================== */

@media (min-width: 601px) {
  .reviews-v35__controls {
    position: relative;
    display: flex;
    min-height: 54px;
    align-items: center;
    justify-content: center;
  }

  .reviews-v35__arrows {
    position: absolute;
    inset: 0;
    display: block;
    pointer-events: none;
  }

  .reviews-v35__arrow {
    position: absolute;
    top: 50%;
    pointer-events: auto;
    transform: translateY(-50%);
  }

  .reviews-v35__arrow--prev {
    left: 0;
  }

  .reviews-v35__arrow--next {
    right: 0;
  }

  .reviews-v35__arrow:hover {
    transform: translateY(calc(-50% - 2px));
  }

  .reviews-v35__actions {
    position: relative;
    z-index: 2;
    justify-content: center;
    padding-right: 0;
  }
}
/* ==========================================================
   V40 — GALLERY NEVER PAUSES ON HOVER
   Keep both project-reel rows moving continuously even while the
   pointer is over the gallery or an individual project image.
   ========================================================== */

.project-reel:hover .project-reel__track,
.project-reel__row:hover .project-reel__track,
.project-reel__item:hover ~ .project-reel__track {
  animation-play-state: running !important;
}

/* Explicitly keep the tracks active in their normal state too. */
.project-reel__track {
  animation-play-state: running;
}
/* ==========================================================
   V41 — MOBILE PASS 1
   Hero + proof strip + Family-Owned section.
   Desktop is untouched; these are mobile-only refinements.
   ========================================================== */

@media (max-width: 860px) {
  /* HERO — reduce dead space while keeping the truck visible */
  .hero {
    min-height: 600px;
  }

  .hero__inner {
    min-height: 600px;
    padding-block: 44px 44px;
  }

  .hero__media img {
    object-position: 72% 50%;
  }

  .hero h1 {
    max-width: 590px;
    font-size: clamp(3.05rem, 13.8vw, 4.25rem);
    line-height: .89;
  }

  .hero__service-line {
    max-width: 500px;
    margin-top: 18px;
    gap: 5px 8px;
  }

  .hero__trust {
    max-width: 520px;
    gap: 12px 18px;
    margin-top: 22px;
  }

  .hero__trust span {
    min-height: 20px;
    padding-left: 19px;
    line-height: 1.3;
  }

  .hero__actions {
    margin-top: 25px;
  }

  .hero__actions .button {
    min-height: 56px;
  }

  /* PROOF STRIP — make the three marks easier to scan */
  .proof__inner {
    gap: 12px;
    padding-block: 18px 19px;
  }

  .proof__brands-label {
    font-size: .64rem;
    letter-spacing: .07em;
  }

  .proof__brands {
    width: min(100%, 430px);
    justify-content: space-between;
    gap: 16px;
  }

  .brand-mark--house,
  .brand-mark--concrete {
    font-size: 1rem;
  }

  .brand-mark--outdoor {
    font-size: .72rem;
  }

  .brand-mark--outdoor strong {
    font-size: .98rem;
  }

  /* FAMILY / ABOUT — same collage, tighter mobile composition */
  .story__inner {
    gap: 39px;
    padding-block: 66px 74px;
  }

  .story__visual {
    padding: 0 15px 36px 12px;
  }

  .story__shape {
    inset: 24px 28px 15px 0;
  }

  .story__photo--main {
    height: clamp(365px, 104vw, 500px);
  }

  .story__photo--trailer {
    width: min(43vw, 170px);
    height: min(31vw, 126px);
  }

  .story__photo--equipment {
    top: -8px;
    left: -3px;
    width: min(29vw, 112px);
    height: min(36vw, 142px);
  }

  .story h2 {
    font-size: clamp(2.65rem, 10.8vw, 3.55rem);
    line-height: .98;
  }

  .story__content > p {
    margin-top: 18px;
    font-size: .92rem;
    line-height: 1.68;
  }

  .story__proof {
    margin: 26px 0 24px;
  }

  .story__proof > div,
  .story__proof > div:first-child {
    grid-template-columns: 92px 1fr;
    padding: 15px 0;
  }

  .story__proof strong {
    font-size: 1.5rem;
  }

  .story__proof small {
    font-size: .66rem;
    line-height: 1.38;
  }

  /* Desktop divider animation is vertical; stacked mobile rows use
     the real horizontal borders instead. */
  .story--v38 .story__proof > div + div::before {
    display: none;
  }
}

@media (max-width: 520px) {
  /* The label was making the affiliation strip feel cramped.
     On phones the three marks themselves communicate the point. */
  .proof__brands-label {
    display: none;
  }

  .proof__inner {
    display: block;
    padding-block: 17px 18px;
  }

  .proof__brands {
    width: 100%;
    max-width: none;
    justify-content: space-between;
    gap: 10px;
  }

  .brand-mark--house,
  .brand-mark--concrete {
    font-size: .88rem;
  }

  .brand-mark--outdoor {
    font-size: .63rem;
  }

  .brand-mark--outdoor strong {
    font-size: .88rem;
  }
}

@media (max-width: 420px) {
  /* 375px / iPhone-SE-size tuning */
  .hero {
    min-height: 570px;
  }

  .hero__inner {
    min-height: 570px;
    padding-block: 38px 38px;
  }

  .hero h1 {
    font-size: clamp(2.95rem, 13.9vw, 3.5rem);
  }

  .hero__service-line {
    margin-top: 17px;
    font-size: .66rem;
  }

  .hero__trust {
    gap: 11px 10px;
    margin-top: 20px;
  }

  .hero__trust span {
    padding-left: 18px;
    font-size: .70rem;
  }

  .hero__actions {
    margin-top: 23px;
  }

  .hero__actions .button {
    min-height: 55px;
    padding-inline: 18px;
    font-size: .72rem;
  }

  .story__inner {
    gap: 35px;
    padding-block: 60px 68px;
  }

  .story__visual {
    padding: 0 13px 34px 10px;
  }

  .story__photo--main {
    height: clamp(355px, 102vw, 410px);
  }

  .story__photo--trailer {
    width: min(42vw, 158px);
    height: min(31vw, 118px);
  }

  .story__photo--equipment {
    width: min(28vw, 105px);
    height: min(35vw, 132px);
  }

  .story h2 {
    font-size: clamp(2.45rem, 10.9vw, 3.05rem);
  }

  .story__content > p {
    font-size: .89rem;
    line-height: 1.65;
  }

  .story__proof > div,
  .story__proof > div:first-child {
    grid-template-columns: 84px 1fr;
    padding: 14px 0;
  }

  .story__proof strong {
    font-size: 1.42rem;
  }

  .story__proof small {
    font-size: .63rem;
  }
}
/* ==========================================================
   V42 — MOBILE PASS 1.1
   Final polish for Hero + Proof Strip + Family-Owned section.
   Desktop remains untouched.
   ========================================================== */

@media (max-width: 520px) {
  /* Give the affiliation marks enough visual weight to read as brands,
     not fine print. */
  .proof__inner {
    padding-block: 18px 19px;
  }

  .proof__brands {
    align-items: center;
    gap: 14px;
  }

  .brand-mark--house,
  .brand-mark--concrete {
    font-size: 1.02rem;
  }

  .brand-mark--outdoor {
    font-size: .70rem;
  }

  .brand-mark--outdoor strong {
    font-size: 1rem;
  }
}

@media (max-width: 420px) {
  /* HERO — remove the remaining empty image tail below the CTA. */
  .hero,
  .hero__inner {
    min-height: 520px;
  }

  .hero__inner {
    padding-block: 34px 31px;
  }

  .hero__media img {
    object-position: 73% 47%;
  }

  /* FAMILY STATS — pull each value and descriptor together so every
     row reads as one compact credential. */
  .story__proof > div,
  .story__proof > div:first-child {
    grid-template-columns: 80px 1fr;
    column-gap: 5px;
    padding-block: 12px;
  }

  .story__proof strong {
    line-height: .96;
  }

  .story__proof small {
    margin-top: 1px;
    align-self: center;
  }
}
/* ==========================================================
   V43 — MOBILE STORY STAT LABELS
   Desktop keeps the original two-line labels.
   Mobile uses shorter, single-line labels at the existing font size.
   ========================================================== */

.story-stat-label--mobile {
  display: none;
}

@media (max-width: 860px) {
  .story-stat-label--desktop {
    display: none;
  }

  .story-stat-label--mobile {
    display: inline;
    white-space: nowrap;
  }
}
/* ==========================================================
   V44 — MOBILE STORY STAT COLUMN GAP
   Adds a clearer gutter between the stat value and its label.
   Mobile only; desktop remains unchanged.
   ========================================================== */

@media (max-width: 420px) {
  .story__proof > div,
  .story__proof > div:first-child {
    column-gap: 14px;
  }
}
/* ==========================================================
   V45 — MOBILE PASS 3: BACKUP POWER FEATURE
   Mobile-only rebuild of the Soft-wash feature into a true stacked
   layout. Desktop and the locked Services section remain untouched.
   ========================================================== */

@media (max-width: 860px) {
  .softwash-feature__inner {
    grid-template-columns: 1fr;
    align-items: stretch;
    gap: 42px;
    padding-top: 106px;
    padding-bottom: 104px;
  }

  .softwash-feature__visual {
    width: 100%;
    min-height: 0;
    padding: 0 32px 38px 13px;
  }

  .softwash-feature__shape {
    inset: 25px 50px 8px 0;
    clip-path: polygon(6% 0, 100% 5%, 93% 100%, 0 94%);
  }

  .softwash-feature__photo--main {
    height: clamp(315px, 78vw, 430px);
  }

  .softwash-feature__photo--main img {
    object-position: 47% 50%;
  }

  .softwash-feature__photo--detail {
    right: 0;
    bottom: 0;
    width: min(45vw, 190px);
    height: min(31vw, 132px);
    border-width: 7px;
  }

  .softwash-feature__content {
    width: 100%;
    max-width: none;
  }

  .softwash-feature h2 {
    max-width: 620px;
    font-size: clamp(2.8rem, 10.8vw, 3.9rem);
    line-height: .96;
  }

  .softwash-feature__content > p {
    max-width: 610px;
    margin-top: 20px;
    font-size: .92rem;
    line-height: 1.68;
  }

  .softwash-feature__points {
    max-width: 610px;
    margin-top: 25px;
  }

  .softwash-feature__points span {
    min-height: 50px;
    padding-left: 23px;
    font-size: .82rem;
  }

  .softwash-feature__points span::before {
    width: 9px;
    height: 15px;
  }

  .softwash-feature__actions {
    display: grid;
    max-width: 610px;
    grid-template-columns: 1fr;
    gap: 15px;
    margin-top: 27px;
  }

  .softwash-feature__actions .button {
    width: 100%;
  }

  .softwash-feature__actions .text-link {
    justify-content: center;
    width: 100%;
    min-height: 42px;
  }
}

@media (max-width: 560px) {
  .softwash-feature__inner {
    gap: 36px;
    padding-top: 91px;
    padding-bottom: 91px;
  }

  .softwash-feature__visual {
    padding: 0 23px 34px 10px;
  }

  .softwash-feature__shape {
    inset: 20px 35px 7px 0;
  }

  .softwash-feature__photo--main {
    height: clamp(285px, 79vw, 355px);
    clip-path: polygon(0 0, 100% 5%, 95% 100%, 4% 96%);
  }

  .softwash-feature__photo--detail {
    width: min(46vw, 174px);
    height: min(32vw, 121px);
    border-width: 6px;
  }

  .softwash-feature h2 {
    font-size: clamp(2.55rem, 11.2vw, 3.25rem);
    letter-spacing: -.05em;
  }

  .softwash-feature__content > p {
    margin-top: 18px;
    font-size: .89rem;
    line-height: 1.64;
  }

  .softwash-feature__points {
    margin-top: 23px;
  }

  .softwash-feature__points span {
    min-height: 48px;
    font-size: .79rem;
  }

  .softwash-feature__actions {
    margin-top: 25px;
  }

  .softwash-feature__actions .button {
    min-height: 56px;
    padding-inline: 18px;
    font-size: .72rem;
  }

  .softwash-feature__actions .text-link {
    font-size: .82rem;
  }
}

@media (max-width: 420px) {
  /* 375px / iPhone-SE-size tuning */
  .softwash-feature__inner {
    gap: 32px;
    padding-top: 84px;
    padding-bottom: 84px;
  }

  .softwash-feature__visual {
    padding: 0 19px 31px 8px;
  }

  .softwash-feature__shape {
    inset: 18px 30px 6px 0;
  }

  .softwash-feature__photo--main {
    height: 285px;
  }

  .softwash-feature__photo--detail {
    width: 154px;
    height: 108px;
  }

  .softwash-feature h2 {
    font-size: 2.65rem;
  }

  .softwash-feature__content > p {
    font-size: .87rem;
  }

  .softwash-feature__points span {
    min-height: 46px;
    font-size: .76rem;
  }
}
/* ==========================================================
   V46 — MOBILE BRANDED HEADER
   Show the desktop-style CLEARPEAK identity on mobile and remove the
   redundant top "CALL" link. Desktop remains untouched.
   ========================================================== */

@media (max-width: 860px) {
  .site-header .brand {
    min-width: 0;
    gap: 9px;
  }

  .site-header .brand__text {
    display: grid;
    min-width: 0;
    line-height: 1.02;
  }

  .site-header .brand__text strong {
    font-size: .90rem;
    letter-spacing: -.015em;
    white-space: nowrap;
  }

  .site-header .brand__text small {
    margin-top: 3px;
    font-size: .58rem;
    letter-spacing: .055em;
    white-space: nowrap;
  }

  .site-header .mobile-call {
    display: none;
  }

  .site-header .mobile-actions {
    flex: 0 0 auto;
    margin-left: 8px;
  }
}

@media (max-width: 420px) {
  .site-header .nav {
    gap: 9px;
  }

  .site-header .brand img {
    width: 46px;
    height: 46px;
  }

  .site-header .brand__text strong {
    font-size: .84rem;
  }

  .site-header .brand__text small {
    font-size: .54rem;
    letter-spacing: .045em;
  }

  .site-header .mobile-actions {
    margin-left: 4px;
  }
}

@media (max-width: 350px) {
  .site-header .brand {
    gap: 7px;
  }

  .site-header .brand img {
    width: 42px;
    height: 42px;
  }

  .site-header .brand__text strong {
    font-size: .76rem;
  }

  .site-header .brand__text small {
    font-size: .49rem;
  }

  .site-header .menu-toggle {
    width: 44px;
    height: 44px;
  }
}
/* ==========================================================
   V48 — DESKTOP HERO OPENING SEQUENCE + CTA PULSES
   Desktop-only. Keeps the locked mobile layout untouched.
   ========================================================== */

@media (min-width: 861px) {
  .hero,
  .hero__inner {
    min-height: max(625px, calc(100svh - 166px));
  }

  .hero__media img {
    animation: heroImageSettle 1650ms cubic-bezier(.2,.72,.22,1) both;
    transform-origin: 62% 48%;
  }

  .hero h1 span {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(32px);
    animation: heroHeadlineReveal 720ms cubic-bezier(.16,.78,.24,1) forwards;
  }

  .hero h1 span:nth-child(1) { animation-delay: 130ms; }
  .hero h1 span:nth-child(2) { animation-delay: 265ms; }

  .hero__service-line {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: heroServiceReveal 780ms cubic-bezier(.22,.72,.2,1) 520ms forwards;
  }

  .hero__trust span {
    opacity: 0;
    transform: translateY(13px);
    animation: heroTrustReveal 480ms ease forwards;
  }

  .hero__trust span:nth-child(1) { animation-delay: 710ms; }
  .hero__trust span:nth-child(2) { animation-delay: 790ms; }
  .hero__trust span:nth-child(3) { animation-delay: 870ms; }
  .hero__trust span:nth-child(4) { animation-delay: 950ms; }

  .hero__actions .button--aqua {
    opacity: 0;
    transform: translateY(18px);
    animation:
      heroActionReveal 520ms cubic-bezier(.2,.78,.24,1) 1040ms forwards,
      heroCtaGlow 2.35s ease-in-out 1650ms infinite;
  }

  .hero__phone-link {
    opacity: 0;
    transform: translateX(-10px);
    animation: heroPhoneReveal 480ms ease 1160ms forwards;
  }

  .proof__brands-label,
  .proof__brands .brand-mark {
    opacity: 0;
    transform: translateY(12px);
    animation: proofMarkReveal 460ms ease forwards;
  }

  .proof__brands-label { animation-delay: 1210ms; }
  .proof__brands .brand-mark:nth-child(1) { animation-delay: 1300ms; }
  .proof__brands .brand-mark:nth-child(2) { animation-delay: 1390ms; }
  .proof__brands .brand-mark:nth-child(3) { animation-delay: 1480ms; }

  .hero__actions .button--aqua,
  .nav-cta {
    position: relative;
    isolation: isolate;
    overflow: visible;
  }

  .hero__actions .button--aqua::after,
  .nav-cta::after {
    position: absolute;
    z-index: -1;
    inset: -2px;
    content: "";
    pointer-events: none;
    border: 2px solid var(--aqua);
    border-radius: 2px;
    opacity: 0;
    transform: scale(1);
  }

  .hero__actions .button--aqua::after {
    animation: heroCtaRing 2.35s ease-out 1650ms infinite;
  }

  .nav-cta {
    animation: navCtaGlow 2.35s ease-in-out 900ms infinite;
  }

  .nav-cta::after {
    animation: navCtaRing 2.35s ease-out 900ms infinite;
  }
}

@keyframes heroImageSettle {
  from { transform: scale(1.055); filter: saturate(.92) contrast(.98); }
  to { transform: scale(1.01); filter: saturate(1) contrast(1); }
}

@keyframes heroHeadlineReveal {
  0% { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(32px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes heroServiceReveal {
  0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translateX(-10px); }
  100% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(0); }
}

@keyframes heroTrustReveal {
  from { opacity: 0; transform: translateY(13px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroActionReveal {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroPhoneReveal {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}

@keyframes proofMarkReveal {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes heroCtaRing {
  0%, 58%, 100% { opacity: 0; transform: scale(1); }
  65% { opacity: .78; transform: scale(1.02); }
  82% { opacity: 0; transform: scale(1.14, 1.28); }
}

@keyframes navCtaRing {
  0%, 58%, 100% { opacity: 0; transform: scale(1); }
  65% { opacity: .72; transform: scale(1.02); }
  82% { opacity: 0; transform: scale(1.13, 1.32); }
}

@keyframes heroCtaGlow {
  0%, 58%, 100% { box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); filter: brightness(1); }
  66% { box-shadow: 0 0 0 5px rgba(var(--aqua-rgb),.20), 0 0 32px rgba(var(--aqua-rgb),.48); filter: brightness(1.11); }
  78% { box-shadow: 0 0 0 10px rgba(var(--aqua-rgb),0), 0 0 18px rgba(var(--aqua-rgb),.16); filter: brightness(1.03); }
}

@keyframes navCtaGlow {
  0%, 58%, 100% { box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); filter: brightness(1); }
  66% { box-shadow: 0 0 0 4px rgba(var(--aqua-rgb),.20), 0 0 26px rgba(var(--aqua-rgb),.42); filter: brightness(1.10); }
  78% { box-shadow: 0 0 0 9px rgba(var(--aqua-rgb),0), 0 0 15px rgba(var(--aqua-rgb),.14); filter: brightness(1.03); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media img,
  .hero h1 span,
  .hero__service-line,
  .hero__trust span,
  .hero__actions .button--aqua,
  .hero__phone-link,
  .proof__brands-label,
  .proof__brands .brand-mark,
  .nav-cta {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .hero__actions .button--aqua::after,
  .nav-cta::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* ==========================================================
   V49 — MOBILE HERO OPENING SEQUENCE + CTA PULSE
   V48 was intentionally scoped to min-width: 861px, so none of
   those hero/trust-strip animations could run on mobile.
   This mirrors the same visual sequence below 861px WITHOUT
   changing any of the locked mobile sizing/layout rules.
   ========================================================== */

@media (max-width: 860px) {
  /* Branded mobile header enters first. */
  .site-header .brand {
    opacity: 0;
    transform: translateY(-10px);
    animation: mobileHeaderBrandIn 460ms cubic-bezier(.2,.75,.24,1) 40ms forwards;
  }

  .site-header .menu-toggle {
    opacity: 0;
    transform: translateY(-8px) scale(.96);
    animation: mobileMenuIn 430ms ease 120ms forwards;
  }

  /* Background settles in just like desktop, with less travel. */
  .hero__media img {
    animation: mobileHeroImageSettle 1450ms cubic-bezier(.2,.72,.22,1) both;
    transform-origin: 72% 48%;
  }

  /* Two-line headline reveal. */
  .hero h1 span {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
    animation: mobileHeroHeadlineReveal 640ms cubic-bezier(.16,.78,.24,1) forwards;
  }

  .hero h1 span:nth-child(1) { animation-delay: 140ms; }
  .hero h1 span:nth-child(2) { animation-delay: 260ms; }

  /* Progressive/typewriter-like reveal for the service line. */
  .hero__service-line {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    animation: mobileHeroServiceReveal 680ms cubic-bezier(.22,.72,.2,1) 470ms forwards;
  }

  /* Trust points arrive one at a time. */
  .hero__trust span {
    opacity: 0;
    transform: translateY(10px);
    animation: mobileHeroTrustReveal 430ms ease forwards;
  }

  .hero__trust span:nth-child(1) { animation-delay: 650ms; }
  .hero__trust span:nth-child(2) { animation-delay: 730ms; }
  .hero__trust span:nth-child(3) { animation-delay: 810ms; }
  .hero__trust span:nth-child(4) { animation-delay: 890ms; }

  /* Main estimate CTA enters and then keeps its noticeable pulse. */
  .hero__actions .button--aqua {
    position: relative;
    isolation: isolate;
    overflow: visible;
    opacity: 0;
    transform: translateY(15px);
    animation:
      mobileHeroActionReveal 470ms cubic-bezier(.2,.78,.24,1) 980ms forwards,
      mobileHeroCtaGlow 2.35s ease-in-out 1500ms infinite;
  }

  .hero__actions .button--aqua::after {
    position: absolute;
    z-index: -1;
    inset: -2px;
    content: "";
    pointer-events: none;
    border: 2px solid var(--aqua);
    border-radius: 2px;
    opacity: 0;
    transform: scale(1);
    animation: mobileHeroCtaRing 2.35s ease-out 1500ms infinite;
  }

  .hero__phone-link {
    opacity: 0;
    transform: translateX(-8px);
    animation: mobileHeroPhoneReveal 420ms ease 1080ms forwards;
  }

  /* Trust/equipment strip follows the hero. */
  .proof__brands-label,
  .proof__brands .brand-mark {
    opacity: 0;
    transform: translateY(9px);
    animation: mobileProofMarkReveal 420ms ease forwards;
  }

  .proof__brands-label { animation-delay: 1130ms; }
  .proof__brands .brand-mark:nth-child(1) { animation-delay: 1200ms; }
  .proof__brands .brand-mark:nth-child(2) { animation-delay: 1280ms; }
  .proof__brands .brand-mark:nth-child(3) { animation-delay: 1360ms; }

  /* The mobile header has no aqua nav CTA anymore, so carry the
     conversion pulse into the permanent bottom Estimate action. */
  .mobile-sticky-cta {
    opacity: 0;
    transform: translateY(22px);
    animation: mobileStickyBarIn 460ms ease 980ms forwards;
  }

  .mobile-sticky-cta a:last-child {
    animation: mobileStickyEstimateGlow 2.35s ease-in-out 1700ms infinite;
  }
}

@keyframes mobileHeaderBrandIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileMenuIn {
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes mobileHeroImageSettle {
  from {
    transform: scale(1.045);
    filter: saturate(.93) contrast(.98);
  }
  to {
    transform: scale(1.01);
    filter: saturate(1) contrast(1);
  }
}

@keyframes mobileHeroHeadlineReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes mobileHeroServiceReveal {
  from {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-8px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateX(0);
  }
}

@keyframes mobileHeroTrustReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileHeroActionReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileHeroPhoneReveal {
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes mobileProofMarkReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileStickyBarIn {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes mobileHeroCtaRing {
  0%, 58%, 100% {
    opacity: 0;
    transform: scale(1);
  }
  65% {
    opacity: .78;
    transform: scale(1.02);
  }
  82% {
    opacity: 0;
    transform: scale(1.12, 1.24);
  }
}

@keyframes mobileHeroCtaGlow {
  0%, 58%, 100% {
    box-shadow: 0 0 0 rgba(var(--aqua-rgb),0);
    filter: brightness(1);
  }
  66% {
    box-shadow:
      0 0 0 4px rgba(var(--aqua-rgb),.20),
      0 0 26px rgba(var(--aqua-rgb),.46);
    filter: brightness(1.10);
  }
  78% {
    box-shadow:
      0 0 0 8px rgba(var(--aqua-rgb),0),
      0 0 15px rgba(var(--aqua-rgb),.14);
    filter: brightness(1.03);
  }
}

@keyframes mobileStickyEstimateGlow {
  0%, 58%, 100% {
    box-shadow: inset 0 0 0 rgba(var(--aqua-rgb),0), 0 0 0 rgba(var(--aqua-rgb),0);
    filter: brightness(1);
  }
  66% {
    box-shadow:
      inset 0 0 0 2px rgba(255,255,255,.34),
      0 -3px 19px rgba(var(--aqua-rgb),.38);
    filter: brightness(1.10);
  }
  78% {
    box-shadow:
      inset 0 0 0 1px rgba(255,255,255,.16),
      0 -2px 10px rgba(var(--aqua-rgb),.14);
    filter: brightness(1.03);
  }
}

/* V49 reduced-motion override must come after the new mobile rules. */
@media (prefers-reduced-motion: reduce) {
  .site-header .brand,
  .site-header .menu-toggle,
  .hero__media img,
  .hero h1 span,
  .hero__service-line,
  .hero__trust span,
  .hero__actions .button--aqua,
  .hero__phone-link,
  .proof__brands-label,
  .proof__brands .brand-mark,
  .mobile-sticky-cta,
  .mobile-sticky-cta a:last-child {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .hero__actions .button--aqua::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* ==========================================================
   V52 — SERVICES "POWER ON" SCROLL REVEAL
   Bulb flicker -> ambient/grid wake-up -> heading/copy ->
   staggered card charge sequence. Existing hover stays intact.
   ========================================================== */

.services--v27.services-motion-ready .services-v27__kicker,
.services--v27.services-motion-ready .services__heading h2 span,
.services--v27.services-motion-ready .services__heading > p {
  opacity: 0;
}

.services--v27.services-motion-ready .services-v27__kicker {
  transform: translateY(15px);
}

.services--v27.services-motion-ready .services__heading h2 span {
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
}

.services--v27.services-motion-ready .services__heading > p {
  transform: translateY(15px);
}

.services--v27.services-motion-ready .services__grid-lines {
  opacity: 0;
  transform: scale(.985);
  transform-origin: 50% 0%;
}

.services--v27.services-motion-ready:not(.is-services-visible) .bulb__glass {
  background: rgba(215,224,227,.08);
  border-color: rgba(255,255,255,.22);
  box-shadow: inset 0 0 10px rgba(255,255,255,.04);
}

.services--v27.services-motion-ready:not(.is-services-visible) .bulb__filament {
  border-color: rgba(255,255,255,.22);
  filter: none;
}

.services--v27.services-motion-ready:not(.is-services-visible) .bulb__glow {
  opacity: 0;
  transform: scale(.68);
}

.services--v27.services-motion-ready.is-services-visible .bulb__glass {
  animation: servicesBulbPowerOn 540ms steps(1, end);
}

.services--v27.services-motion-ready.is-services-visible .bulb__filament {
  animation: servicesFilamentPowerOn 540ms steps(1, end);
}

.services--v27.services-motion-ready.is-services-visible .bulb__glow {
  animation: servicesGlowPowerOn 620ms ease-out;
}

.services--v27.services-motion-ready.is-services-visible .services__grid-lines {
  animation: servicesGridWake 760ms ease 300ms forwards;
}

.services--v27.services-motion-ready.is-services-visible .services-v27__kicker {
  animation: servicesKickerIn 460ms cubic-bezier(.2,.78,.24,1) 390ms forwards;
}

.services--v27.services-motion-ready.is-services-visible .services__heading h2 span:nth-child(1) {
  animation: servicesHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 500ms forwards;
}

.services--v27.services-motion-ready.is-services-visible .services__heading h2 span:nth-child(2) {
  animation: servicesHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 610ms forwards;
}

.services--v27.services-motion-ready.is-services-visible .services__heading > p {
  animation: servicesCopyIn 480ms ease 760ms forwards;
}

@media (min-width: 761px) {
  .services--v27.services-motion-ready .service-card-v27 {
    opacity: 0;
    transform: translateY(38px) scale(.965);
  }

  .services--v27.services-motion-ready.is-services-visible .service-card-v27 {
    animation: serviceCardEnter 660ms cubic-bezier(.16,.78,.24,1) forwards;
  }

  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(1) { animation-delay: 900ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(2) { animation-delay: 1020ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(3) { animation-delay: 1140ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(4) { animation-delay: 1260ms; }

  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(1) .service-card-v27__link { animation: serviceCardChargeGlow 690ms ease 1010ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(2) .service-card-v27__link { animation: serviceCardChargeGlow 690ms ease 1130ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(3) .service-card-v27__link { animation: serviceCardChargeGlow 690ms ease 1250ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(4) .service-card-v27__link { animation: serviceCardChargeGlow 690ms ease 1370ms; }

  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(1) .service-card-v27__link::before { animation: serviceAccentCharge 620ms cubic-bezier(.2,.72,.22,1) 990ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(2) .service-card-v27__link::before { animation: serviceAccentCharge 620ms cubic-bezier(.2,.72,.22,1) 1110ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(3) .service-card-v27__link::before { animation: serviceAccentCharge 620ms cubic-bezier(.2,.72,.22,1) 1230ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(4) .service-card-v27__link::before { animation: serviceAccentCharge 620ms cubic-bezier(.2,.72,.22,1) 1350ms; }

  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(1) .service-card-v27__icon { animation: serviceIconEnergize 460ms cubic-bezier(.18,.8,.28,1) 1100ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(2) .service-card-v27__icon { animation: serviceIconEnergize 460ms cubic-bezier(.18,.8,.28,1) 1220ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(3) .service-card-v27__icon { animation: serviceIconEnergize 460ms cubic-bezier(.18,.8,.28,1) 1340ms; }
  .services--v27.services-motion-ready.is-services-visible .service-card-v27:nth-child(4) .service-card-v27__icon { animation: serviceIconEnergize 460ms cubic-bezier(.18,.8,.28,1) 1460ms; }
}

@media (max-width: 760px) {
  .services--v27.services-motion-ready .service-card-v27 {
    opacity: 0;
    transform: translateY(34px) scale(.972);
  }

  .services--v27.services-motion-ready .service-card-v27.is-card-visible {
    animation: serviceCardEnterMobile 620ms cubic-bezier(.16,.78,.24,1) forwards;
  }

  .services--v27.services-motion-ready .service-card-v27.is-card-visible .service-card-v27__link {
    animation: serviceCardChargeGlowMobile 620ms ease 140ms;
  }

  .services--v27.services-motion-ready .service-card-v27.is-card-visible .service-card-v27__link::before {
    animation: serviceAccentChargeMobile 560ms cubic-bezier(.2,.72,.22,1) 120ms;
  }

  .services--v27.services-motion-ready .service-card-v27.is-card-visible .service-card-v27__icon {
    animation: serviceIconEnergize 440ms cubic-bezier(.18,.8,.28,1) 250ms;
  }
}

@keyframes servicesBulbPowerOn {
  0% {
    background: rgba(215,224,227,.08);
    border-color: rgba(255,255,255,.22);
    box-shadow: inset 0 0 10px rgba(255,255,255,.04);
  }
  18% {
    background: rgba(173, 12, 17,.92);
    border-color: rgba(118,235,238,.9);
    box-shadow:
      inset 0 0 20px rgba(255,255,255,.9),
      0 0 26px rgba(81,222,225,.98),
      0 0 66px rgba(var(--aqua-rgb),.72);
  }
  31% {
    background: rgba(215,224,227,.10);
    border-color: rgba(255,255,255,.25);
    box-shadow: inset 0 0 10px rgba(255,255,255,.05);
  }
  43% {
    background: rgba(173, 12, 17,.96);
    border-color: rgba(118,235,238,.94);
    box-shadow:
      inset 0 0 22px rgba(255,255,255,.92),
      0 0 30px rgba(81,222,225,1),
      0 0 76px rgba(var(--aqua-rgb),.78);
  }
  54% {
    background: rgba(215,224,227,.12);
    border-color: rgba(255,255,255,.28);
    box-shadow: inset 0 0 12px rgba(255,255,255,.06);
  }
  67%, 100% {
    background: rgba(173, 12, 17,.88);
    border-color: rgba(118,235,238,.86);
    box-shadow:
      inset 0 0 20px rgba(255,255,255,.86),
      0 0 24px rgba(81,222,225,.95),
      0 0 62px rgba(var(--aqua-rgb),.66),
      0 0 105px rgba(var(--aqua-rgb),.28);
  }
}

@keyframes servicesFilamentPowerOn {
  0%, 31%, 54% { border-color: rgba(255,255,255,.22); filter: none; }
  18%, 43%, 67%, 100% { border-color: #fff6c3; filter: drop-shadow(0 0 4px #fff4a2); }
}

@keyframes servicesGlowPowerOn {
  0%, 31%, 54% { opacity: 0; transform: scale(.70); }
  18%, 43% { opacity: 1; transform: scale(1.08); }
  67%, 100% { opacity: 1; transform: scale(1); }
}

@keyframes servicesGridWake {
  from { opacity: 0; transform: scale(.985); }
  to { opacity: .18; transform: scale(1); }
}

@keyframes servicesKickerIn {
  from { opacity: 0; transform: translateY(15px) scale(.97); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes servicesHeadingReveal {
  from { opacity: 0; clip-path: inset(100% 0 0 0); transform: translateY(28px); }
  to { opacity: 1; clip-path: inset(0 0 0 0); transform: translateY(0); }
}

@keyframes servicesCopyIn {
  from { opacity: 0; transform: translateY(15px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes serviceCardEnter {
  0% { opacity: 0; transform: translateY(38px) scale(.965); }
  65% { opacity: 1; transform: translateY(-4px) scale(1.006); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes serviceCardEnterMobile {
  0% { opacity: 0; transform: translateY(34px) scale(.972); }
  70% { opacity: 1; transform: translateY(-3px) scale(1.004); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes serviceAccentCharge {
  0% { width: 0; opacity: .35; box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); }
  52% { width: 100%; opacity: 1; box-shadow: 0 0 20px rgba(var(--aqua-rgb),.72); }
  100% { width: 54px; opacity: 1; box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); }
}

@keyframes serviceAccentChargeMobile {
  0% { width: 0; opacity: .35; box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); }
  52% { width: 100%; opacity: 1; box-shadow: 0 0 18px rgba(var(--aqua-rgb),.68); }
  100% { width: 72px; opacity: 1; box-shadow: 0 0 0 rgba(var(--aqua-rgb),0); }
}

@keyframes serviceCardChargeGlow {
  0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.16); }
  48% {
    box-shadow:
      0 14px 28px rgba(0,0,0,.20),
      0 0 0 2px rgba(var(--aqua-rgb),.30),
      0 0 30px rgba(var(--aqua-rgb),.34);
  }
}

@keyframes serviceCardChargeGlowMobile {
  0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.16); }
  50% {
    box-shadow:
      0 14px 28px rgba(0,0,0,.20),
      0 0 0 2px rgba(var(--aqua-rgb),.28),
      0 0 24px rgba(var(--aqua-rgb),.30);
  }
}

@keyframes serviceIconEnergize {
  0% { transform: scale(.72); opacity: .45; filter: drop-shadow(0 0 0 rgba(var(--aqua-rgb),0)); }
  58% { transform: scale(1.14); opacity: 1; filter: drop-shadow(0 0 9px rgba(var(--aqua-rgb),.72)); }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 rgba(var(--aqua-rgb),0)); }
}

@media (prefers-reduced-motion: reduce) {
  .services--v27.services-motion-ready .services-v27__kicker,
  .services--v27.services-motion-ready .services__heading h2 span,
  .services--v27.services-motion-ready .services__heading > p,
  .services--v27.services-motion-ready .services__grid-lines,
  .services--v27.services-motion-ready .service-card-v27,
  .services--v27.services-motion-ready .service-card-v27__link,
  .services--v27.services-motion-ready .service-card-v27__link::before,
  .services--v27.services-motion-ready .service-card-v27__icon,
  .services--v27.services-motion-ready .bulb__glass,
  .services--v27.services-motion-ready .bulb__filament,
  .services--v27.services-motion-ready .bulb__glow {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .services--v27.services-motion-ready .services__grid-lines {
    opacity: .16 !important;
  }
}
/* ==========================================================
   V53 — INTERACTIVE SERVICES LIGHT CYCLE
   Desktop:
   leave section -> bulb/ambient light turns off
   re-enter -> two quick flickers -> steady light back on
   Mobile retains the existing one-time scroll power-on behavior.
   ========================================================== */

/* V52 originally tied the bulb flicker directly to the permanent
   is-services-visible class. Stop that permanent trigger; V53 uses
   the temporary is-reflickering class so the flicker can replay. */
.services--v27.services-motion-ready.is-services-visible .bulb__glass,
.services--v27.services-motion-ready.is-services-visible .bulb__filament,
.services--v27.services-motion-ready.is-services-visible .bulb__glow {
  animation: none;
}

.services--v27.services-motion-ready.is-reflickering .bulb__glass {
  animation: servicesBulbPowerOn 540ms steps(1, end);
}

.services--v27.services-motion-ready.is-reflickering .bulb__filament {
  animation: servicesFilamentPowerOn 540ms steps(1, end);
}

.services--v27.services-motion-ready.is-reflickering .bulb__glow {
  animation: servicesGlowPowerOn 620ms ease-out;
}

/* The original stylesheet used :hover to switch the entire lighting
   system on instantly. While V53 is active on a real desktop pointer,
   keep hover itself dark; JavaScript controls the power state instead. */
@media (min-width: 861px) and (hover: hover) and (pointer: fine) {
  .services--v27.services-motion-ready:not(.is-lit):hover::before {
    opacity: 0;
    transform: scale(.88);
  }

  .services--v27.services-motion-ready:not(.is-lit):hover .services__grid-lines {
    opacity: .11;
  }

  .services--v27.services-motion-ready:not(.is-lit):not(.is-reflickering):hover .bulb__glass {
    border-color: rgba(255,255,255,.28);
    background: rgba(215,224,227,.12);
    box-shadow: inset 0 0 14px rgba(255,255,255,.06);
    filter: none;
  }

  .services--v27.services-motion-ready:not(.is-lit):not(.is-reflickering):hover .bulb__filament {
    border-color: rgba(255,255,255,.30);
    filter: none;
  }

  .services--v27.services-motion-ready:not(.is-lit):not(.is-reflickering):hover .bulb__glow {
    opacity: 0;
    transform: scale(.72);
  }

  /* Smoothly fade the room light away when the cursor leaves. */
  .services--v27.services-motion-ready::before {
    transition: opacity 300ms ease, transform 340ms ease;
  }

  .services--v27.services-motion-ready .services__grid-lines {
    transition: opacity 300ms ease, transform 340ms ease;
  }

  .services--v27.services-motion-ready .bulb__glass,
  .services--v27.services-motion-ready .bulb__filament,
  .services--v27.services-motion-ready .bulb__glow {
    transition:
      background 220ms ease,
      border-color 220ms ease,
      box-shadow 240ms ease,
      filter 220ms ease,
      opacity 260ms ease,
      transform 260ms ease;
  }
}

/* On touch/mobile there is no hover-off state. The initial scroll reveal
   still powers the bulb on and leaves it illuminated exactly as before. */
@media (max-width: 860px), (hover: none), (pointer: coarse) {
  .services--v27.services-motion-ready.is-lit::before {
    opacity: 1;
    transform: scale(1);
  }

  .services--v27.services-motion-ready.is-lit .services__grid-lines {
    opacity: .20;
  }
}
/* ==========================================================
   V54 — SOFT-WASH "SYSTEM ONLINE" SCROLL REVEAL
   One-time sequence:
   aqua panel -> softwash image -> inset photo ->
   headline/copy -> current line + service points -> CTA pulse.
   Desktop reveals as one composition; mobile naturally stages the
   visual first and the copy when each enters the viewport.
   ========================================================== */

/* Heading lines can now reveal independently. */
.softwash-feature h2 span {
  display: block;
}

/* Only prepare hidden states once JS confirms animation support. */
.softwash-feature.softwash-motion-ready .softwash-feature__shape {
  opacity: 0;
  transform: translateX(-58px) scaleX(.82);
  transform-origin: left center;
}

.softwash-feature.softwash-motion-ready .softwash-feature__photo--main {
  opacity: 0;
  transform: translateY(40px) scale(.96);
}

.softwash-feature.softwash-motion-ready .softwash-feature__photo--main img {
  transform: scale(1.055);
}

.softwash-feature.softwash-motion-ready .softwash-feature__photo--detail {
  opacity: 0;
  transform: translate(30px, 24px) rotate(5deg) scale(.91);
}

.softwash-feature.softwash-motion-ready .softwash-feature__content h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(27px);
}

.softwash-feature.softwash-motion-ready .softwash-feature__content > p {
  opacity: 0;
  transform: translateY(16px);
}

/* Circuit rail behind the three softwash services. */
.softwash-feature__points {
  position: relative;
}

.softwash-feature.softwash-motion-ready .softwash-feature__points::before,
.softwash-feature.softwash-motion-ready .softwash-feature__points::after {
  position: absolute;
  z-index: 0;
  top: 27px;
  bottom: 27px;
  left: 4px;
  width: 2px;
  content: "";
  pointer-events: none;
  transform-origin: top center;
}

.softwash-feature.softwash-motion-ready .softwash-feature__points::before {
  background: #c8ced3;
}

.softwash-feature.softwash-motion-ready .softwash-feature__points::after {
  background:
    linear-gradient(
      180deg,
      rgba(var(--aqua-rgb),.38) 0%,
      var(--aqua) 45%,
      rgba(173, 12, 17,.95) 100%
    );
  box-shadow: 0 0 12px rgba(var(--aqua-rgb),.45);
  transform: scaleY(0);
}

.softwash-feature.softwash-motion-ready .softwash-feature__points span {
  z-index: 1;
  opacity: 0;
  transform: translateX(-13px);
}

.softwash-feature.softwash-motion-ready .softwash-feature__points span::before {
  z-index: 2;
  opacity: .22;
  transform: scale(.66);
  filter: none;
}

.softwash-feature.softwash-motion-ready .softwash-feature__actions .button,
.softwash-feature.softwash-motion-ready .softwash-feature__actions .text-link {
  opacity: 0;
}

.softwash-feature.softwash-motion-ready .softwash-feature__actions .button {
  position: relative;
  isolation: isolate;
  overflow: visible;
  transform: translateY(17px);
}

.softwash-feature.softwash-motion-ready .softwash-feature__actions .text-link {
  transform: translateX(-9px);
}

/* ----------------------------------------------------------
   VISUAL COLLAGE COMES ONLINE
   ---------------------------------------------------------- */

.softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__shape {
  animation: softwashShapeOnline 720ms cubic-bezier(.16,.78,.24,1) 40ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__photo--main {
  animation: softwashMainPhotoIn 760ms cubic-bezier(.16,.78,.24,1) 160ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__photo--main img {
  animation: softwashImageSettle 1350ms cubic-bezier(.2,.72,.22,1) 170ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__photo--detail {
  animation: softwashDetailPhotoIn 700ms cubic-bezier(.16,.8,.25,1) 430ms forwards;
}

/* ----------------------------------------------------------
   COPY + CIRCUIT SEQUENCE
   ---------------------------------------------------------- */

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__content h2 span:nth-child(1) {
  animation: softwashHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 80ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__content h2 span:nth-child(2) {
  animation: softwashHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 190ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__content > p {
  animation: softwashCopyIn 500ms ease 360ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points::after {
  animation: softwashCurrentLine 980ms cubic-bezier(.2,.72,.22,1) 610ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(1) {
  animation: softwashPointIn 460ms ease 650ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(2) {
  animation: softwashPointIn 460ms ease 850ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(3) {
  animation: softwashPointIn 460ms ease 1050ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(1)::before {
  animation: softwashBoltEnergize 430ms cubic-bezier(.18,.8,.28,1) 720ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(2)::before {
  animation: softwashBoltEnergize 430ms cubic-bezier(.18,.8,.28,1) 920ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__points span:nth-child(3)::before {
  animation: softwashBoltEnergize 430ms cubic-bezier(.18,.8,.28,1) 1120ms forwards;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__actions .button {
  animation:
    softwashCtaIn 520ms cubic-bezier(.2,.78,.24,1) 1270ms forwards,
    softwashCtaSinglePulse 760ms ease 1810ms 1;
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__actions .text-link {
  animation: softwashTextLinkIn 450ms ease 1410ms forwards;
}

/* One radiating ring after the softwash CTA arrives. */
.softwash-feature.softwash-motion-ready .softwash-feature__actions .button::after {
  position: absolute;
  z-index: -1;
  inset: -2px;
  content: "";
  pointer-events: none;
  border: 2px solid var(--aqua);
  border-radius: 2px;
  opacity: 0;
  transform: scale(1);
}

.softwash-feature.softwash-motion-ready.is-softwash-content-visible .softwash-feature__actions .button::after {
  animation: softwashCtaRingOnce 820ms ease-out 1810ms 1;
}

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

@keyframes softwashShapeOnline {
  0% {
    opacity: 0;
    transform: translateX(-58px) scaleX(.82);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes softwashMainPhotoIn {
  0% {
    opacity: 0;
    transform: translateY(40px) scale(.96);
  }
  68% {
    opacity: 1;
    transform: translateY(-4px) scale(1.004);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes softwashImageSettle {
  from { transform: scale(1.055); }
  to { transform: scale(1); }
}

@keyframes softwashDetailPhotoIn {
  0% {
    opacity: 0;
    transform: translate(30px, 24px) rotate(5deg) scale(.91);
  }
  68% {
    opacity: 1;
    transform: translate(-2px, -2px) rotate(.6deg) scale(1.015);
  }
  100% {
    opacity: 1;
    transform: translate(0, 0) rotate(1.2deg) scale(1);
  }
}

@keyframes softwashHeadingReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(27px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes softwashCopyIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softwashCurrentLine {
  0% {
    transform: scaleY(0);
    opacity: .35;
  }
  100% {
    transform: scaleY(1);
    opacity: 1;
  }
}

@keyframes softwashPointIn {
  from {
    opacity: 0;
    transform: translateX(-13px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes softwashBoltEnergize {
  0% {
    opacity: .22;
    transform: scale(.66);
    filter: drop-shadow(0 0 0 rgba(var(--aqua-rgb),0));
  }
  58% {
    opacity: 1;
    transform: scale(1.28);
    filter: drop-shadow(0 0 8px rgba(var(--aqua-rgb),.78));
  }
  100% {
    opacity: 1;
    transform: scale(1);
    filter: drop-shadow(0 0 0 rgba(var(--aqua-rgb),0));
  }
}

@keyframes softwashCtaIn {
  from {
    opacity: 0;
    transform: translateY(17px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes softwashTextLinkIn {
  from {
    opacity: 0;
    transform: translateX(-9px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes softwashCtaSinglePulse {
  0%, 100% {
    box-shadow: 0 0 0 rgba(var(--aqua-rgb),0);
    filter: brightness(1);
  }
  48% {
    box-shadow:
      0 0 0 5px rgba(var(--aqua-rgb),.20),
      0 0 30px rgba(var(--aqua-rgb),.44);
    filter: brightness(1.10);
  }
}

@keyframes softwashCtaRingOnce {
  0% {
    opacity: .78;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.13, 1.27);
  }
}

/* On smaller screens preserve the exact locked V45 collage rotation. */
@media (max-width: 860px) {
  @keyframes softwashDetailPhotoIn {
    0% {
      opacity: 0;
      transform: translate(25px, 21px) rotate(5deg) scale(.92);
    }
    68% {
      opacity: 1;
      transform: translate(-2px, -2px) rotate(.5deg) scale(1.012);
    }
    100% {
      opacity: 1;
      transform: translate(0, 0) rotate(1.2deg) scale(1);
    }
  }
}

/* Accessibility: never leave content hidden when motion is reduced. */
@media (prefers-reduced-motion: reduce) {
  .softwash-feature.softwash-motion-ready .softwash-feature__shape,
  .softwash-feature.softwash-motion-ready .softwash-feature__photo--main,
  .softwash-feature.softwash-motion-ready .softwash-feature__photo--main img,
  .softwash-feature.softwash-motion-ready .softwash-feature__photo--detail,
  .softwash-feature.softwash-motion-ready .softwash-feature__content h2 span,
  .softwash-feature.softwash-motion-ready .softwash-feature__content > p,
  .softwash-feature.softwash-motion-ready .softwash-feature__points span,
  .softwash-feature.softwash-motion-ready .softwash-feature__points span::before,
  .softwash-feature.softwash-motion-ready .softwash-feature__actions .button,
  .softwash-feature.softwash-motion-ready .softwash-feature__actions .text-link {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .softwash-feature.softwash-motion-ready .softwash-feature__photo--detail {
    transform: rotate(1.2deg) !important;
  }

  .softwash-feature.softwash-motion-ready .softwash-feature__points::after {
    animation: none !important;
    transform: scaleY(1) !important;
  }

  .softwash-feature.softwash-motion-ready .softwash-feature__actions .button::after {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* ==========================================================
   V55 — CONTACT BAND + REVIEWS ENTRY REVEALS
   Contact panel assembles itself, then the reviews section takes
   the stage. The existing review carousel mechanics are untouched.
   ========================================================== */

/* Reviews heading is now intentionally split into reveal lines. */
.reviews-v35__heading h2 span {
  display: block;
}

/* ----------------------------------------------------------
   FLOATING "LET'S TALK" BAND
   ---------------------------------------------------------- */

/* Hidden states only exist when JS has confirmed the reveal system. */
.contact-float.contact-motion-ready:not(.is-contact-visible) {
  opacity: 0;
  transform: translate(-50%, calc(-49% + 35px)) scale(.975);
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__media img {
  transform: scale(1.05);
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__wash {
  opacity: 0;
  transform: translateX(95px) scaleX(.72);
  transform-origin: right center;
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__copy span {
  opacity: 0;
  transform: translateY(12px);
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__copy h2 {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(27px);
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__action {
  opacity: 0;
  transform: translateX(32px);
}

/* Run only during the entry window. Once is-contact-complete is added,
   the original hover transforms are free to operate normally. */
.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) {
  animation: contactPanelRise 680ms cubic-bezier(.16,.78,.24,1) forwards;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__media img {
  animation: contactImageSettle 1350ms cubic-bezier(.2,.72,.22,1) 40ms both;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__wash {
  animation: contactAquaSweep 720ms cubic-bezier(.16,.78,.24,1) 180ms forwards;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__copy span {
  animation: contactKickerIn 420ms ease 310ms forwards;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__copy h2 {
  animation: contactHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 410ms forwards;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__action:nth-child(1) {
  animation: contactActionIn 560ms cubic-bezier(.16,.8,.25,1) 650ms forwards;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__action:nth-child(2) {
  animation: contactActionIn 560ms cubic-bezier(.16,.8,.25,1) 770ms forwards;
}

/* One-time micro-interactions after each action card lands. */
.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__action:nth-child(1) .contact-float__icon {
  animation: contactPhoneRing 520ms ease 1040ms 1;
}

.contact-float.contact-motion-ready.is-contact-visible:not(.is-contact-complete) .contact-float__action:nth-child(2) .contact-float__icon--sms {
  animation: contactSmsPop 470ms cubic-bezier(.18,.8,.28,1) 1160ms 1;
}

/* ----------------------------------------------------------
   REVIEWS — ENTRY ONLY, CAROUSEL UNCHANGED
   ---------------------------------------------------------- */

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews__scuffs {
  opacity: .12;
  transform: translateX(-10px);
}

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(28px);
}

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
  opacity: 0;
  transform: translateY(35px) scale(.975);
}

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__button {
  opacity: 0;
  transform: translateY(16px);
}

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__arrow--prev {
  opacity: 0;
  transform: translateX(-24px);
}

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__arrow--next {
  opacity: 0;
  transform: translateX(24px);
}

/* Only entry wrappers animate. The .reviews-v35__track itself is never
   assigned an entry transform, preserving the 4.4s carousel exactly. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews__scuffs {
  animation: reviewsTextureIn 1050ms ease forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
  animation: reviewsHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 120ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
  animation: reviewsHeadingReveal 650ms cubic-bezier(.16,.78,.24,1) 235ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport {
  animation: reviewsViewportRise 720ms cubic-bezier(.16,.78,.24,1) 500ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
  animation: reviewsButtonIn 470ms ease 1030ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
  animation: reviewsButtonIn 470ms ease 1120ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev {
  animation: reviewsArrowLeftIn 450ms cubic-bezier(.2,.78,.24,1) 1230ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
  animation: reviewsArrowRightIn 450ms cubic-bezier(.2,.78,.24,1) 1230ms forwards;
}

/* Temporary class added by JS only to the initially featured card.
   No transform is animated, so carousel positioning remains untouched. */
.review-v35.review-entry-pulse {
  animation: reviewFeaturedEntryPulse 820ms ease 1;
}

/* ----------------------------------------------------------
   CONTACT KEYFRAMES
   ---------------------------------------------------------- */

@keyframes contactPanelRise {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-49% + 35px)) scale(.975);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -49%) scale(1);
  }
}

@keyframes contactImageSettle {
  from { transform: scale(1.05); }
  to { transform: scale(1); }
}

@keyframes contactAquaSweep {
  from {
    opacity: 0;
    transform: translateX(95px) scaleX(.72);
  }
  to {
    opacity: 1;
    transform: translateX(0) scaleX(1);
  }
}

@keyframes contactKickerIn {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes contactHeadingReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(27px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes contactActionIn {
  0% {
    opacity: 0;
    transform: translateX(32px);
  }
  72% {
    opacity: 1;
    transform: translateX(-3px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes contactPhoneRing {
  0%, 100% { transform: rotate(0deg) scale(1); }
  18% { transform: rotate(-13deg) scale(1.06); }
  36% { transform: rotate(12deg) scale(1.06); }
  54% { transform: rotate(-9deg) scale(1.04); }
  72% { transform: rotate(7deg) scale(1.02); }
}

@keyframes contactSmsPop {
  0%, 100% { transform: scale(1); }
  45% { transform: scale(1.18); }
  70% { transform: scale(.96); }
}

/* ----------------------------------------------------------
   REVIEWS KEYFRAMES
   ---------------------------------------------------------- */

@keyframes reviewsTextureIn {
  from {
    opacity: .12;
    transform: translateX(-10px);
  }
  to {
    opacity: .36;
    transform: translateX(0);
  }
}

@keyframes reviewsHeadingReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(28px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes reviewsViewportRise {
  0% {
    opacity: 0;
    transform: translateY(35px) scale(.975);
  }
  72% {
    opacity: 1;
    transform: translateY(-3px) scale(1.003);
  }
  100% {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes reviewsButtonIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes reviewsArrowLeftIn {
  from {
    opacity: 0;
    transform: translateX(-24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes reviewsArrowRightIn {
  from {
    opacity: 0;
    transform: translateX(24px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes reviewFeaturedEntryPulse {
  0%, 100% {
    box-shadow: 0 18px 34px rgba(var(--primary-dark-rgb),.15);
  }
  46% {
    box-shadow:
      0 18px 34px rgba(var(--primary-dark-rgb),.18),
      0 0 0 4px rgba(var(--aqua-rgb),.20),
      0 0 31px rgba(var(--aqua-rgb),.38);
  }
}

/* ----------------------------------------------------------
   MOBILE TUNING
   Same sequence, shorter travel and slightly tighter timing.
   ---------------------------------------------------------- */

@media (max-width: 820px) {
  .contact-float.contact-motion-ready:not(.is-contact-visible) {
    transform: translate(-50%, calc(-49% + 26px)) scale(.982);
  }

  @keyframes contactPanelRise {
    from {
      opacity: 0;
      transform: translate(-50%, calc(-49% + 26px)) scale(.982);
    }
    to {
      opacity: 1;
      transform: translate(-50%, -49%) scale(1);
    }
  }

  .reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
    transform: translateY(27px) scale(.982);
  }

  @keyframes reviewsViewportRise {
    0% {
      opacity: 0;
      transform: translateY(27px) scale(.982);
    }
    72% {
      opacity: 1;
      transform: translateY(-2px) scale(1.002);
    }
    100% {
      opacity: 1;
      transform: translateY(0) scale(1);
    }
  }
}

/* Accessibility: all content remains visible with reduced motion. */
@media (prefers-reduced-motion: reduce) {
  .contact-float.contact-motion-ready,
  .contact-float.contact-motion-ready .contact-float__media img,
  .contact-float.contact-motion-ready .contact-float__wash,
  .contact-float.contact-motion-ready .contact-float__copy span,
  .contact-float.contact-motion-ready .contact-float__copy h2,
  .contact-float.contact-motion-ready .contact-float__action,
  .contact-float.contact-motion-ready .contact-float__icon,
  .reviews--v35.reviews-motion-ready .reviews__scuffs,
  .reviews--v35.reviews-motion-ready .reviews-v35__heading h2 span,
  .reviews--v35.reviews-motion-ready .reviews-v35__viewport,
  .reviews--v35.reviews-motion-ready .reviews-v35__button,
  .reviews--v35.reviews-motion-ready .reviews-v35__arrow,
  .review-v35.review-entry-pulse {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
  }

  .contact-float.contact-motion-ready {
    transform: translate(-50%, -49%) !important;
  }

  .contact-float.contact-motion-ready .contact-float__media img,
  .contact-float.contact-motion-ready .contact-float__wash,
  .contact-float.contact-motion-ready .contact-float__copy span,
  .contact-float.contact-motion-ready .contact-float__copy h2,
  .contact-float.contact-motion-ready .contact-float__action,
  .contact-float.contact-motion-ready .contact-float__icon,
  .reviews--v35.reviews-motion-ready .reviews__scuffs,
  .reviews--v35.reviews-motion-ready .reviews-v35__heading h2 span,
  .reviews--v35.reviews-motion-ready .reviews-v35__viewport,
  .reviews--v35.reviews-motion-ready .reviews-v35__button,
  .reviews--v35.reviews-motion-ready .reviews-v35__arrow {
    transform: none !important;
  }
}
/* ==========================================================
   V56 — CLEAN CONTACT + REVIEWS REVEAL
   Removes the compositor-heavy scale/shadow/texture overlap that
   caused the V55 entry to look like the screen was flickering.
   The review carousel mechanics remain completely untouched.
   ========================================================== */

/* ----------------------------------------------------------
   CONTACT BAND — MOVE + FADE ONLY
   ---------------------------------------------------------- */

.contact-float.contact-motion-ready:not(.is-contact-visible) {
  opacity: 0;
  transform: translate(-50%, calc(-49% + 30px));
}

.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__wash {
  opacity: 0;
  transform: translateX(82px);
  transform-origin: center;
}

/* Keep the photo's subtle zoom settle, but the whole banner itself no
   longer scales. That avoids a large blended layer being resized. */
@keyframes contactPanelRise {
  from {
    opacity: 0;
    transform: translate(-50%, calc(-49% + 30px));
  }
  to {
    opacity: 1;
    transform: translate(-50%, -49%);
  }
}

@keyframes contactAquaSweep {
  from {
    opacity: 0;
    transform: translateX(82px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

/* Promote only the elements that actually move during the short entry. */
.contact-float.contact-motion-ready,
.contact-float.contact-motion-ready .contact-float__media img,
.contact-float.contact-motion-ready .contact-float__wash {
  backface-visibility: hidden;
}

/* ----------------------------------------------------------
   REVIEWS — NO SCALE, NO BACKGROUND REPAINT, NO CARD PULSE
   ---------------------------------------------------------- */

/* The distressed texture is decorative and remains static. */
.reviews--v35.reviews-motion-ready .reviews__scuffs,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews__scuffs {
  animation: none !important;
  transform: none !important;
}

/* Use the section's normal texture opacity instead of animating a large
   masked layer across the entire viewport. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews__scuffs {
  opacity: inherit;
}

/* Carousel shell enters with only opacity + vertical motion.
   No scaling = no fight with the inner track's translateX animation. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
  opacity: 0;
  transform: translateY(26px);
}

@keyframes reviewsViewportRise {
  0% {
    opacity: 0;
    transform: translateY(26px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* The featured card pulse from V55 is intentionally removed. */
.review-v35.review-entry-pulse {
  animation: none !important;
}

/* Keep the viewport on its own compositing layer while it enters, but
   don't alter the carousel track or its timing. */
.reviews--v35.reviews-motion-ready .reviews-v35__viewport {
  backface-visibility: hidden;
}

/* Slightly simplify the timing so each phase has clear separation. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
  animation-delay: 80ms;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
  animation-delay: 180ms;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport {
  animation: reviewsViewportRise 620ms cubic-bezier(.2,.72,.22,1) 390ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
  animation-delay: 900ms;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
  animation-delay: 990ms;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
  animation-delay: 1090ms;
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 820px) {
  .contact-float.contact-motion-ready:not(.is-contact-visible) {
    transform: translate(-50%, calc(-49% + 22px));
  }

  @keyframes contactPanelRise {
    from {
      opacity: 0;
      transform: translate(-50%, calc(-49% + 22px));
    }
    to {
      opacity: 1;
      transform: translate(-50%, -49%);
    }
  }

  .reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
    transform: translateY(22px);
  }

  @keyframes reviewsViewportRise {
    from {
      opacity: 0;
      transform: translateY(22px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* Reduced motion stays fully visible and static. */
@media (prefers-reduced-motion: reduce) {
  .reviews--v35.reviews-motion-ready .reviews__scuffs,
  .review-v35.review-entry-pulse {
    animation: none !important;
    transform: none !important;
  }
}
/* ==========================================================
   V58 — STATIC LET'S TALK + HERO-MATCHED PROCESS REVEAL
   ========================================================== */

/* Completely neutralize the Let's Talk entry animation. */
.contact-float.contact-motion-ready,
.contact-float.contact-motion-ready:not(.is-contact-visible),
.contact-float.contact-motion-ready.is-contact-visible,
.contact-float.contact-motion-ready.is-contact-complete {
  opacity: 1 !important;
  transform: translate(-50%, -49%) !important;
  animation: none !important;
}

.contact-float.contact-motion-ready .contact-float__media img,
.contact-float.contact-motion-ready .contact-float__wash,
.contact-float.contact-motion-ready .contact-float__copy span,
.contact-float.contact-motion-ready .contact-float__copy h2,
.contact-float.contact-motion-ready .contact-float__action,
.contact-float.contact-motion-ready .contact-float__icon,
.contact-float.contact-motion-ready .contact-float__icon--sms,
.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__media img,
.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__wash,
.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__copy span,
.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__copy h2,
.contact-float.contact-motion-ready:not(.is-contact-visible) .contact-float__action {
  opacity: 1 !important;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
  filter: none !important;
}

/* Process intro reveal, using the same mask language as the Hero. */
.process-v29__heading h2 span {
  display: block;
}

.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(32px);
}

.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading > p {
  opacity: 0;
  transform: translateY(16px);
}

.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(1) {
  animation: processIntroHeadingReveal 720ms cubic-bezier(.16,.78,.24,1) 130ms forwards;
}

.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(2) {
  animation: processIntroHeadingReveal 720ms cubic-bezier(.16,.78,.24,1) 265ms forwards;
}

.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
  animation: processIntroCopyIn 500ms ease 540ms forwards;
}

@keyframes processIntroHeadingReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes processIntroCopyIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading h2 span {
    transform: translateY(23px);
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(1) {
    animation: processIntroHeadingRevealMobile 640ms cubic-bezier(.16,.78,.24,1) 140ms forwards;
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(2) {
    animation: processIntroHeadingRevealMobile 640ms cubic-bezier(.16,.78,.24,1) 260ms forwards;
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
    animation: processIntroCopyIn 470ms ease 470ms forwards;
  }
}

@keyframes processIntroHeadingRevealMobile {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .process--v29.process-entry-ready .process-v29__heading h2 span,
  .process--v29.process-entry-ready .process-v29__heading > p {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}
/* ==========================================================
   V59 — SMOOTH REVIEWS REVEAL
   Hero-matched H1 pacing, gentler carousel travel, and staged
   controls. The carousel track itself remains completely untouched.
   ========================================================== */

/* Start the large heading from the same 32px masked position as Hero. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(32px);
}

/* Reduce the review-shell travel substantially. No scale. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
  opacity: 0;
  transform: translateY(18px);
}

/* Match the Hero's exact desktop headline recipe. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
  animation: reviewsHeadingRevealV59 720ms cubic-bezier(.16,.78,.24,1) 130ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
  animation: reviewsHeadingRevealV59 720ms cubic-bezier(.16,.78,.24,1) 265ms forwards;
}

/* Let the headline own the screen first, then softly introduce the wheel. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport {
  animation: reviewsViewportRiseV59 720ms cubic-bezier(.20,.72,.22,1) 950ms forwards;
}

/* Controls follow only after the cards are substantially settled. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
  animation: reviewsButtonIn 500ms ease 1480ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
  animation: reviewsButtonIn 500ms ease 1580ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev {
  animation: reviewsArrowLeftIn 460ms cubic-bezier(.20,.78,.24,1) 1710ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
  animation: reviewsArrowRightIn 460ms cubic-bezier(.20,.78,.24,1) 1710ms forwards;
}

@keyframes reviewsHeadingRevealV59 {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes reviewsViewportRiseV59 {
  from {
    opacity: 0;
    transform: translateY(18px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Mobile mirrors the mobile Hero timing and uses even less card travel. */
@media (max-width: 820px) {
  .reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
    transform: translateY(23px);
  }

  .reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport {
    transform: translateY(14px);
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
    animation: reviewsHeadingRevealV59Mobile 640ms cubic-bezier(.16,.78,.24,1) 140ms forwards;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
    animation: reviewsHeadingRevealV59Mobile 640ms cubic-bezier(.16,.78,.24,1) 260ms forwards;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport {
    animation: reviewsViewportRiseV59Mobile 680ms cubic-bezier(.20,.72,.22,1) 850ms forwards;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
    animation-delay: 1370ms;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
    animation-delay: 1460ms;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev,
  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
    animation-delay: 1580ms;
  }
}

@keyframes reviewsHeadingRevealV59Mobile {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes reviewsViewportRiseV59Mobile {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
/* ==========================================================
   V60 — STATIC REVIEW CARDS + SLOW CINEMATIC REVIEWS H1
   ========================================================== */

/* Remove review-card / carousel-shell entry motion entirely. */
.reviews--v35.reviews-motion-ready .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready.is-reviews-complete .reviews-v35__viewport {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Slow, smooth heading reveal. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(34px);
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
  animation: reviewsHeadingRevealV60 1450ms cubic-bezier(.16,.78,.24,1) 180ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
  animation: reviewsHeadingRevealV60 1450ms cubic-bezier(.16,.78,.24,1) 480ms forwards;
}

/* Controls wait until the headline has mostly settled. */
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
  animation: reviewsButtonIn 520ms ease 2050ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
  animation: reviewsButtonIn 520ms ease 2160ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev {
  animation: reviewsArrowLeftIn 480ms cubic-bezier(.20,.78,.24,1) 2320ms forwards;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
  animation: reviewsArrowRightIn 480ms cubic-bezier(.20,.78,.24,1) 2320ms forwards;
}

@keyframes reviewsHeadingRevealV60 {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(34px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@media (max-width: 820px) {
  .reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
    transform: translateY(25px);
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
    animation: reviewsHeadingRevealV60Mobile 1200ms cubic-bezier(.16,.78,.24,1) 160ms forwards;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
    animation: reviewsHeadingRevealV60Mobile 1200ms cubic-bezier(.16,.78,.24,1) 390ms forwards;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--primary {
    animation-delay: 1760ms;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button--secondary {
    animation-delay: 1860ms;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--prev,
  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow--next {
    animation-delay: 2020ms;
  }
}

@keyframes reviewsHeadingRevealV60Mobile {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(25px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}
/* ==========================================================
   V61 — REVIEWS H1 ONLY
   The H1 is now the ONLY entry animation in the Reviews section.
   Cards, buttons and arrows remain completely static on entry.
   Normal hover/click behavior is preserved afterward.
   ========================================================== */

/* Review cards / carousel shell: always present, no entry motion. */
.reviews--v35.reviews-motion-ready .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__viewport,
.reviews--v35.reviews-motion-ready.is-reviews-complete .reviews-v35__viewport {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* Review buttons: always present, no entry animation.
   Their normal hover styles still work because we are only neutralizing
   the temporary reveal animation state. */
.reviews--v35.reviews-motion-ready .reviews-v35__button,
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__button,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button,
.reviews--v35.reviews-motion-ready.is-reviews-complete .reviews-v35__button {
  opacity: 1 !important;
  animation: none !important;
}

/* Remove only the reveal-system transform. Do not use !important here,
   so the global .button:hover translateY(-2px) remains available. */
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__button,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__button {
  transform: none;
}

/* Arrows: always present, no slide-in entry animation. */
.reviews--v35.reviews-motion-ready .reviews-v35__arrow,
.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__arrow,
.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__arrow,
.reviews--v35.reviews-motion-ready.is-reviews-complete .reviews-v35__arrow {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

/* The slow V60 H1 reveal remains exactly as-is. */
/* ==========================================================
   V63 — FOOTER "CIRCUIT COMPLETE" FINALE
   First entry:
   CTA headline -> copy -> actions -> credentials -> circuit.
   Afterward:
   a soft exterior charge travels the footer every ~6.4 seconds.
   ========================================================== */

/* ----------------------------------------------------------
   FINAL CTA — ONE-TIME CINEMATIC ENTRY
   ---------------------------------------------------------- */

.final-cta h2 span {
  display: block;
}

/* Hide only after JS confirms the reveal system is available. */
.site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta h2 span {
  opacity: 0;
  clip-path: inset(100% 0 0 0);
  transform: translateY(32px);
}

.site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__content > p {
  opacity: 0;
  transform: translateY(16px);
}

.site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__actions .button {
  opacity: 0;
  transform: translateY(17px);
}

.site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__text-link {
  opacity: 0;
  transform: translateX(-9px);
}

.site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__trust span {
  opacity: 0;
  transform: translateY(9px);
}

/* Same premium mask language as the Hero. */
.site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(1) {
  animation: closingHeadingReveal 720ms cubic-bezier(.16,.78,.24,1) 130ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(2) {
  animation: closingHeadingReveal 720ms cubic-bezier(.16,.78,.24,1) 265ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__content > p {
  animation: closingCopyIn 520ms ease 540ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button {
  animation: closingButtonIn 520ms cubic-bezier(.20,.78,.24,1) 780ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__text-link {
  animation: closingTextLinkIn 460ms ease 900ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(1) {
  animation: closingTrustIn 440ms ease 1060ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(2) {
  animation: closingTrustIn 440ms ease 1160ms forwards;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(3) {
  animation: closingTrustIn 440ms ease 1260ms forwards;
}

/* Each existing aqua credential diamond briefly energizes once. */
.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(1)::before {
  animation: closingTrustDiamond 520ms ease 1190ms 1;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(2)::before {
  animation: closingTrustDiamond 520ms ease 1290ms 1;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(3)::before {
  animation: closingTrustDiamond 520ms ease 1390ms 1;
}

/* One strong but non-looping charge through the main Call CTA. */
.site-closing.closing-motion-ready .final-cta__actions .button {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.site-closing.closing-motion-ready .final-cta__actions .button::after {
  position: absolute;
  z-index: -1;
  inset: -2px;
  content: "";
  pointer-events: none;
  border: 2px solid var(--aqua);
  opacity: 0;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button::after {
  animation: closingCtaTrace 900ms ease-out 1370ms 1;
}

/* ----------------------------------------------------------
   FOOTER CIRCUIT RAIL
   ---------------------------------------------------------- */

.footer-circuit {
  position: absolute;
  z-index: 5;
  top: 0;
  left: 50%;
  width: min(calc(100% - 48px), var(--container));
  height: 5px;
  pointer-events: none;
  transform: translateX(-50%);
}

.footer-circuit__line {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  height: 1px;
  opacity: .20;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb),.32) 8%,
      rgba(var(--aqua-rgb),.20) 50%,
      rgba(var(--aqua-rgb),.32) 92%,
      transparent 100%
    );
}

.footer-circuit__charge {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 5px;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb),.18) 20%,
      rgba(var(--aqua-rgb),.78) 55%,
      #fff3a6 72%,
      var(--aqua) 82%,
      transparent 100%
    );
  filter:
    drop-shadow(0 0 5px rgba(var(--aqua-rgb),.70))
    drop-shadow(0 0 13px rgba(var(--aqua-rgb),.36));
}

/* The first circuit run begins after the CTA finishes assembling.
   Most of each 6.4s cycle is deliberately quiet. */
.site-closing.closing-motion-ready.is-closing-visible .footer-circuit__charge {
  animation: footerCircuitRun 6.4s linear 2.35s infinite;
}

.site-closing.closing-motion-ready.is-closing-visible .footer-circuit__line {
  animation: footerCircuitLineBreathe 6.4s ease-in-out 2.35s infinite;
}

/* ----------------------------------------------------------
   FOOTER "STATIONS"
   The charge visually energizes the brand and column headings
   as it moves from left to right.
   ---------------------------------------------------------- */

.site-closing.closing-motion-ready.is-closing-visible .footer-brand img {
  animation: footerLogoEnergize 6.4s ease-in-out 2.40s infinite;
}

.site-closing.closing-motion-ready.is-closing-visible .site-footer__top > .site-footer__column:nth-child(2) > strong {
  animation: footerHeadingEnergize 6.4s ease-in-out 2.72s infinite;
}

.site-closing.closing-motion-ready.is-closing-visible .site-footer__top > .site-footer__column:nth-child(3) > strong {
  animation: footerHeadingEnergize 6.4s ease-in-out 3.00s infinite;
}

.site-closing.closing-motion-ready.is-closing-visible .site-footer__top > .site-footer__column:nth-child(4) > strong {
  animation: footerHeadingEnergize 6.4s ease-in-out 3.28s infinite;
}

/* ----------------------------------------------------------
   KEYFRAMES
   ---------------------------------------------------------- */

@keyframes closingHeadingReveal {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(32px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes closingCopyIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes closingButtonIn {
  from {
    opacity: 0;
    transform: translateY(17px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes closingTextLinkIn {
  from {
    opacity: 0;
    transform: translateX(-9px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes closingTrustIn {
  from {
    opacity: 0;
    transform: translateY(9px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes closingTrustDiamond {
  0%, 100% {
    transform: rotate(45deg) scale(1);
    box-shadow: 0 0 0 rgba(var(--aqua-rgb),0);
  }
  48% {
    transform: rotate(45deg) scale(1.55);
    box-shadow:
      0 0 9px rgba(var(--aqua-rgb),.85),
      0 0 18px rgba(var(--aqua-rgb),.40);
  }
}

@keyframes closingCtaTrace {
  0% {
    opacity: 0;
    transform: scale(1);
  }
  20% {
    opacity: .82;
  }
  100% {
    opacity: 0;
    transform: scale(1.075, 1.22);
  }
}

@keyframes footerCircuitRun {
  0%, 2% {
    left: 0;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  24% {
    left: calc(100% - 120px);
    opacity: 1;
  }
  30%, 100% {
    left: calc(100% - 120px);
    opacity: 0;
  }
}

@keyframes footerCircuitLineBreathe {
  0%, 3%, 32%, 100% {
    opacity: .20;
  }
  13% {
    opacity: .46;
    box-shadow: 0 0 9px rgba(var(--aqua-rgb),.18);
  }
  27% {
    opacity: .28;
    box-shadow: 0 0 0 rgba(var(--aqua-rgb),0);
  }
}

@keyframes footerLogoEnergize {
  0%, 10%, 100% {
    filter: none;
    transform: scale(1);
  }
  3.5% {
    filter:
      drop-shadow(0 0 7px rgba(var(--aqua-rgb),.82))
      drop-shadow(0 0 16px rgba(var(--aqua-rgb),.42));
    transform: scale(1.035);
  }
  7% {
    filter: drop-shadow(0 0 5px rgba(var(--aqua-rgb),.24));
    transform: scale(1);
  }
}

@keyframes footerHeadingEnergize {
  0%, 10%, 100% {
    color: var(--aqua);
    text-shadow: none;
    transform: translateY(0);
  }
  3.5% {
    color: #fff3a6;
    text-shadow:
      0 0 7px rgba(var(--aqua-rgb),.88),
      0 0 15px rgba(var(--aqua-rgb),.42);
    transform: translateY(-1px);
  }
  7% {
    color: var(--aqua);
    text-shadow: 0 0 4px rgba(var(--aqua-rgb),.18);
    transform: translateY(0);
  }
}

/* ----------------------------------------------------------
   MOBILE — THE CIRCUIT TURNS VERTICAL AND TRAVELS DOWNWARD
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta h2 span {
    transform: translateY(23px);
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(1) {
    animation: closingHeadingRevealMobile 640ms cubic-bezier(.16,.78,.24,1) 140ms forwards;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(2) {
    animation: closingHeadingRevealMobile 640ms cubic-bezier(.16,.78,.24,1) 260ms forwards;
  }

  .footer-circuit {
    top: 30px;
    bottom: 30px;
    left: 10px;
    width: 5px;
    height: auto;
    transform: none;
  }

  .footer-circuit__line {
    top: 0;
    right: auto;
    bottom: 0;
    left: 2px;
    width: 1px;
    height: auto;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--aqua-rgb),.30) 8%,
        rgba(var(--aqua-rgb),.18) 50%,
        rgba(var(--aqua-rgb),.30) 92%,
        transparent 100%
      );
  }

  .footer-circuit__charge {
    top: 0;
    left: 0;
    width: 5px;
    height: 82px;
    background:
      linear-gradient(
        180deg,
        transparent 0%,
        rgba(var(--aqua-rgb),.18) 20%,
        rgba(var(--aqua-rgb),.78) 55%,
        #fff3a6 72%,
        var(--aqua) 82%,
        transparent 100%
      );
  }

  .site-closing.closing-motion-ready.is-closing-visible .footer-circuit__charge {
    animation: footerCircuitRunMobile 6.4s linear 2.35s infinite;
  }
}

@keyframes closingHeadingRevealMobile {
  from {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
  }
  to {
    opacity: 1;
    clip-path: inset(0 0 0 0);
    transform: translateY(0);
  }
}

@keyframes footerCircuitRunMobile {
  0%, 2% {
    top: 0;
    opacity: 0;
  }
  5% {
    opacity: 1;
  }
  24% {
    top: calc(100% - 82px);
    opacity: 1;
  }
  30%, 100% {
    top: calc(100% - 82px);
    opacity: 0;
  }
}

/* Reduced-motion users get the completed, static layout. */
@media (prefers-reduced-motion: reduce) {
  .site-closing.closing-motion-ready .final-cta h2 span,
  .site-closing.closing-motion-ready .final-cta__content > p,
  .site-closing.closing-motion-ready .final-cta__actions .button,
  .site-closing.closing-motion-ready .final-cta__text-link,
  .site-closing.closing-motion-ready .final-cta__trust span,
  .site-closing.closing-motion-ready .final-cta__trust span::before,
  .site-closing.closing-motion-ready .footer-circuit__line,
  .site-closing.closing-motion-ready .footer-circuit__charge,
  .site-closing.closing-motion-ready .footer-brand img,
  .site-closing.closing-motion-ready .site-footer__column > strong {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
    text-shadow: none !important;
  }

  .site-closing.closing-motion-ready .final-cta__trust span::before {
    transform: rotate(45deg) !important;
  }

  .site-closing.closing-motion-ready .footer-circuit__charge {
    opacity: 0 !important;
  }
}
/* ==========================================================
   V64 — HERO / TRUST-STRIP CIRCUIT
   Exact same line + traveling charge animation used at the footer,
   duplicated at the bottom edge of the Hero. No logo reactions.
   ========================================================== */

.hero-circuit {
  position: absolute;
  z-index: 8;
  bottom: 0;
  left: 50%;
  width: min(calc(100% - 48px), var(--container));
  height: 5px;
  pointer-events: none;
  transform: translateX(-50%);
}

.hero-circuit__line {
  position: absolute;
  top: 2px;
  right: 0;
  left: 0;
  height: 1px;
  opacity: .20;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb),.32) 8%,
      rgba(var(--aqua-rgb),.20) 50%,
      rgba(var(--aqua-rgb),.32) 92%,
      transparent 100%
    );
  animation: footerCircuitLineBreathe 6.4s ease-in-out 2.35s infinite;
}

.hero-circuit__charge {
  position: absolute;
  top: 0;
  left: 0;
  width: 120px;
  height: 5px;
  opacity: 0;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb),.18) 20%,
      rgba(var(--aqua-rgb),.78) 55%,
      #fff3a6 72%,
      var(--aqua) 82%,
      transparent 100%
    );
  filter:
    drop-shadow(0 0 5px rgba(var(--aqua-rgb),.70))
    drop-shadow(0 0 13px rgba(var(--aqua-rgb),.36));
  animation: footerCircuitRun 6.4s linear 2.35s infinite;
}

/* Keep the circuit horizontal on mobile because this placement is a
   horizontal seam between Hero and trust strip. */
@media (max-width: 860px) {
  .hero-circuit {
    width: calc(100% - 24px);
  }

  .hero-circuit__charge {
    width: 92px;
  }

  @keyframes heroCircuitRunMobile {
    0%, 2% {
      left: 0;
      opacity: 0;
    }
    5% {
      opacity: 1;
    }
    24% {
      left: calc(100% - 92px);
      opacity: 1;
    }
    30%, 100% {
      left: calc(100% - 92px);
      opacity: 0;
    }
  }

  .hero-circuit__charge {
    animation: heroCircuitRunMobile 6.4s linear 2.35s infinite;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero-circuit__line,
  .hero-circuit__charge {
    animation: none !important;
  }

  .hero-circuit__charge {
    opacity: 0 !important;
  }
}
/* ==========================================================
   V65 — HERO CIRCUIT SEAM VISIBILITY FIX
   V64 placed the circuit inside the Hero stacking context, while
   the following trust strip sits at z-index: 5 and could cover it.
   The circuit now lives inside .proof and sits on its top edge.
   Animation/timing remain unchanged.
   ========================================================== */

.proof .hero-circuit {
  top: 0;
  bottom: auto;
  z-index: 12;
}

/* Put the glowing charge slightly above the white strip so it reads
   directly on the dark/light boundary instead of disappearing into white. */
.proof .hero-circuit__line {
  top: 0;
}

.proof .hero-circuit__charge {
  top: -2px;
}
/* ==========================================================
   V66 — HERO BILLBOARD / DIMENSIONAL H1 TREATMENT
   Keeps Barlow Condensed, but adds a restrained contractor-sign
   treatment: white face -> dark edge -> CLEARPEAK aqua offset -> navy depth.
   ========================================================== */

.hero h1 {
  color: #fff;
  -webkit-text-stroke: 0.8px rgba(3, 12, 20, .92);
  paint-order: stroke fill;
  text-shadow:
    2px 2px 0 rgba(var(--aqua-rgb), .86),
    4px 4px 0 rgba(3, 12, 20, .96),
    0 8px 20px rgba(0, 0, 0, .26);
}

/* Keep the dimensional effect crisp on smaller screens instead of
   letting the offset feel too heavy around the tighter mobile type. */
@media (max-width: 860px) {
  .hero h1 {
    -webkit-text-stroke: 0.65px rgba(3, 12, 20, .94);
    text-shadow:
      1.5px 1.5px 0 rgba(var(--aqua-rgb), .84),
      3px 3px 0 rgba(3, 12, 20, .96),
      0 6px 15px rgba(0, 0, 0, .24);
  }
}

/* Reduced-motion does not change the visual treatment; it only disables
   motion elsewhere, so the H1 keeps the same finished billboard look. */
/* ==========================================================
   V68 — PROCESS LEFT-TO-RIGHT TYPEWRITER REVEAL
   Completely replaces V67.
   Slow horizontal reveal only — no rise, scale, blur or flicker.
   ========================================================== */

/* Each H1 line is already its own block span. */
.process-v29__heading h2 span {
  display: block;
}

/* Start fully clipped from the right so the text reveals left -> right. */
.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading h2 span {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transform: none;
}

.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading > p {
  opacity: 1;
  clip-path: inset(0 100% 0 0);
  transform: none;
}

/* Line 1 slowly types/wipes across. */
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(1) {
  animation: processTypewriterLine 1800ms cubic-bezier(.20,.68,.22,1) 180ms both !important;
}

/* Line 2 follows deliberately instead of appearing immediately. */
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(2) {
  animation: processTypewriterLine 1800ms cubic-bezier(.20,.68,.22,1) 620ms both !important;
}

/* Supporting sentence gets the same left-to-right treatment,
   but slightly faster and only after the headline is well underway. */
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
  animation: processTypewriterCopy 1350ms cubic-bezier(.20,.68,.22,1) 1450ms both !important;
}

@keyframes processTypewriterLine {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

@keyframes processTypewriterCopy {
  from {
    clip-path: inset(0 100% 0 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

/* Mobile uses the same left-to-right reveal with slightly shorter timing. */
@media (max-width: 820px) {
  .process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading h2 span,
  .process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading > p {
    transform: none;
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(1) {
    animation: processTypewriterLine 1500ms cubic-bezier(.20,.68,.22,1) 150ms both !important;
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(2) {
    animation: processTypewriterLine 1500ms cubic-bezier(.20,.68,.22,1) 500ms both !important;
  }

  .process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
    animation: processTypewriterCopy 1150ms cubic-bezier(.20,.68,.22,1) 1200ms both !important;
  }
}

/* Accessibility: final state immediately. */
@media (prefers-reduced-motion: reduce) {
  .process--v29.process-entry-ready .process-v29__heading h2 span,
  .process--v29.process-entry-ready .process-v29__heading > p {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
  }
}
/* ==========================================================
   V69 — FAMILY COLLAGE CONTINUOUS INSET FLOAT
   After the existing one-time Family reveal finishes, the two
   smaller inset photos drift gently side-to-side forever.
   Main photo and all existing reveal timing remain untouched.
   ========================================================== */

/* Top-left exterior inset:
   preserve its original V38 entrance, then hand transform control
   to a slow continuous horizontal float once the entrance is done. */
.story--v38.is-story-visible .story__photo--equipment {
  animation:
    storyV38InsetTop 620ms cubic-bezier(.20,.78,.22,1) 260ms both,
    storyInsetFloatTop 6.2s ease-in-out 980ms infinite;
}

/* Bottom-right softwash inset:
   slightly different timing/direction keeps the collage feeling organic
   instead of both photos moving in perfect synchronization. */
.story--v38.is-story-visible .story__photo--trailer {
  animation:
    storyV38InsetBottom 650ms cubic-bezier(.20,.78,.22,1) 390ms both,
    storyInsetFloatBottom 6.8s ease-in-out 1140ms infinite;
}

@keyframes storyInsetFloatTop {
  0%, 100% {
    transform: translateX(-7px) rotate(-1.5deg) scale(1);
  }
  50% {
    transform: translateX(7px) rotate(-1.5deg) scale(1);
  }
}

@keyframes storyInsetFloatBottom {
  0%, 100% {
    transform: translateX(8px) rotate(1.4deg) scale(1);
  }
  50% {
    transform: translateX(-8px) rotate(1.4deg) scale(1);
  }
}

/* Slightly reduce the travel on phones so the collage never feels cramped. */
@media (max-width: 760px) {
  @keyframes storyInsetFloatTop {
    0%, 100% {
      transform: translateX(-5px) rotate(-1.5deg) scale(1);
    }
    50% {
      transform: translateX(5px) rotate(-1.5deg) scale(1);
    }
  }

  @keyframes storyInsetFloatBottom {
    0%, 100% {
      transform: translateX(5px) rotate(1.4deg) scale(1);
    }
    50% {
      transform: translateX(-5px) rotate(1.4deg) scale(1);
    }
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .story--v38.is-story-visible .story__photo--equipment,
  .story--v38.is-story-visible .story__photo--trailer {
    animation: none !important;
    opacity: 1 !important;
  }

  .story--v38.is-story-visible .story__photo--equipment {
    transform: rotate(-1.5deg) scale(1) !important;
  }

  .story--v38.is-story-visible .story__photo--trailer {
    transform: rotate(1.4deg) scale(1) !important;
  }
}
/* ==========================================================
   V70 — SOFT-WASH DETAIL PHOTO CONTINUOUS FLOAT
   The small bottom-right softwash/truck inset keeps its existing
   one-time reveal, then drifts gently side-to-side forever.
   ========================================================== */

.softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__photo--detail {
  animation:
    softwashDetailPhotoIn 700ms cubic-bezier(.16,.8,.25,1) 430ms forwards,
    softwashInsetFloat 6.6s ease-in-out 1220ms infinite;
}

@keyframes softwashInsetFloat {
  0%, 100% {
    transform: translateX(8px) rotate(1.2deg) scale(1);
  }
  50% {
    transform: translateX(-8px) rotate(1.2deg) scale(1);
  }
}

/* Keep the movement tighter on mobile so the inset never crowds the edge. */
@media (max-width: 760px) {
  @keyframes softwashInsetFloat {
    0%, 100% {
      transform: translateX(5px) rotate(1.2deg) scale(1);
    }
    50% {
      transform: translateX(-5px) rotate(1.2deg) scale(1);
    }
  }
}

/* Respect reduced-motion preferences. */
@media (prefers-reduced-motion: reduce) {
  .softwash-feature.softwash-motion-ready.is-softwash-visual-visible .softwash-feature__photo--detail {
    animation: none !important;
    opacity: 1 !important;
    transform: rotate(1.2deg) scale(1) !important;
  }
}
/* ==========================================================
   V71 — PROCESS TYPEWRITER FIRST-PAINT FIX
   Prevents the Process H1/paragraph from flashing visibly before
   the scroll-triggered left-to-right reveal begins.
   ========================================================== */

.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading h2 span {
  opacity: 1 !important;
  visibility: visible;
  clip-path: inset(0 100% 0 0) !important;
  transform: none !important;
  animation: none !important;
}

.process--v29.process-entry-ready:not(.is-process-entry-visible) .process-v29__heading > p {
  opacity: 1 !important;
  visibility: visible;
  clip-path: inset(0 100% 0 0) !important;
  transform: none !important;
  animation: none !important;
}

/* Once triggered, hand control back to the V68 typewriter keyframes. */
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span,
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
  visibility: visible;
}
/* ==========================================================
   V72 — PROCESS TYPEWRITER DELAY-STATE FIX
   Keep the first keyframe applied during each animation delay.
   This prevents visible text -> disappear -> reveal flashing.
   ========================================================== */

/* Explicitly hold each line/copy in its fully clipped start state while
   waiting for its individual reveal delay. */
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(1),
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading h2 span:nth-child(2),
.process--v29.process-entry-ready.is-process-entry-visible .process-v29__heading > p {
  animation-fill-mode: both !important;
}
/* ==========================================================
   V73 — "CLEARPEAK IN THE FIELD" TYPEWRITER REVEAL
   Uses the exact same left-to-right reveal language as the Process H1.
   No vertical movement, scale, blur or pre-animation flash.
   ========================================================== */

.projects__heading h2 span {
  display: block;
}

/* First-paint hidden state: fully clipped from the right. */
.projects.projects-entry-ready:not(.is-projects-entry-visible) .projects__heading h2 span {
  opacity: 1 !important;
  visibility: visible;
  clip-path: inset(0 100% 0 0) !important;
  transform: none !important;
  animation: none !important;
}

/* Exact same desktop typewriter timing as Process line 1. */
.projects.projects-entry-ready.is-projects-entry-visible .projects__heading h2 span {
  animation: processTypewriterLine 1800ms cubic-bezier(.20,.68,.22,1) 180ms both !important;
  visibility: visible;
}

/* Exact same mobile typewriter timing as Process line 1. */
@media (max-width: 820px) {
  .projects.projects-entry-ready.is-projects-entry-visible .projects__heading h2 span {
    animation: processTypewriterLine 1500ms cubic-bezier(.20,.68,.22,1) 150ms both !important;
  }
}

/* Accessibility: show final state instantly. */
@media (prefers-reduced-motion: reduce) {
  .projects.projects-entry-ready .projects__heading h2 span {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    transform: none !important;
  }
}
/* ==========================================================
   V74 — REVIEWS H1 TYPEWRITER REVEAL
   Same exact left-to-right reveal as Process / CLEARPEAK In The Field.
   ========================================================== */

.reviews--v35.reviews-motion-ready:not(.is-reviews-visible) .reviews-v35__heading h2 span {
  opacity: 1 !important;
  visibility: visible;
  clip-path: inset(0 100% 0 0) !important;
  transform: none !important;
  animation: none !important;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
  animation: processTypewriterLine 1800ms cubic-bezier(.20,.68,.22,1) 180ms both !important;
}

.reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
  animation: processTypewriterLine 1800ms cubic-bezier(.20,.68,.22,1) 620ms both !important;
}

.reviews--v35.reviews-motion-ready.is-reviews-complete .reviews-v35__heading h2 span {
  opacity: 1 !important;
  visibility: visible;
  clip-path: none !important;
  transform: none !important;
  animation: none !important;
}

@media (max-width: 820px) {
  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(1) {
    animation: processTypewriterLine 1500ms cubic-bezier(.20,.68,.22,1) 150ms both !important;
  }

  .reviews--v35.reviews-motion-ready.is-reviews-visible:not(.is-reviews-complete) .reviews-v35__heading h2 span:nth-child(2) {
    animation: processTypewriterLine 1500ms cubic-bezier(.20,.68,.22,1) 500ms both !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .reviews--v35.reviews-motion-ready .reviews-v35__heading h2 span {
    animation: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    clip-path: none !important;
    transform: none !important;
  }
}
/* ==========================================================
   V75 — FINAL CTA USES THE HERO ANIMATION SYSTEM
   Same keyframes, same timing and same sequencing as the Hero.
   Footer circuit animation remains untouched.
   ========================================================== */

/* ----------------------------------------------------------
   DESKTOP — EXACT HERO RECIPE
   ---------------------------------------------------------- */

@media (min-width: 861px) {
  /* Initial states before the footer enters the viewport. */
  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta h2 span {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(32px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__content > p {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-10px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__trust span {
    opacity: 0;
    transform: translateY(13px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__actions .button {
    opacity: 0;
    transform: translateY(18px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__text-link {
    opacity: 0;
    transform: translateX(-10px);
    animation: none !important;
  }

  /* Background image: exact Hero image-settle animation. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta__media img {
    animation: none !important;
    transform: none !important;
  }

  /* H2: exact Hero H1 keyframe, duration and delays. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(1) {
    animation: heroHeadlineReveal 720ms cubic-bezier(.16,.78,.24,1) 130ms both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(2) {
    animation: heroHeadlineReveal 720ms cubic-bezier(.16,.78,.24,1) 265ms both !important;
  }

  /* Paragraph: exact Hero service-line progressive reveal. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta__content > p {
    animation: heroServiceReveal 780ms cubic-bezier(.22,.72,.2,1) 520ms both !important;
  }

  /* Credentials: exact Hero trust-item stagger. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span {
    animation: heroTrustReveal 480ms ease both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(1) {
    animation-delay: 710ms !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(2) {
    animation-delay: 790ms !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(3) {
    animation-delay: 870ms !important;
  }

  /* Aqua Call CTA: exact Hero entrance + continuous pulse/glow. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button--aqua {
    position: relative;
    isolation: isolate;
    overflow: visible;
    animation:
      heroActionReveal 520ms cubic-bezier(.2,.78,.24,1) 1040ms both,
      heroCtaGlow 2.35s ease-in-out 1650ms infinite !important;
  }

  .site-closing.closing-motion-ready .final-cta__actions .button--aqua::after {
    position: absolute;
    z-index: -1;
    inset: -2px;
    content: "";
    pointer-events: none;
    border: 2px solid var(--aqua);
    border-radius: 2px;
    opacity: 0;
    transform: scale(1);
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button--aqua::after {
    animation: heroCtaRing 2.35s ease-out 1650ms infinite !important;
  }

  /* Text link: exact Hero phone-link reveal. */
  .site-closing.closing-motion-ready.is-closing-visible .final-cta__text-link {
    animation: heroPhoneReveal 480ms ease 1160ms both !important;
  }
}

/* ----------------------------------------------------------
   MOBILE — EXACT MOBILE HERO RECIPE
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta h2 span {
    opacity: 0;
    clip-path: inset(100% 0 0 0);
    transform: translateY(23px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__content > p {
    opacity: 0;
    clip-path: inset(0 100% 0 0);
    transform: translateX(-8px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__trust span {
    opacity: 0;
    transform: translateY(10px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__actions .button {
    opacity: 0;
    transform: translateY(15px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready:not(.is-closing-visible) .final-cta__text-link {
    opacity: 0;
    transform: translateX(-8px);
    animation: none !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__media img {
    animation: none !important;
    transform: none !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(1) {
    animation: mobileHeroHeadlineReveal 640ms cubic-bezier(.16,.78,.24,1) 140ms both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta h2 span:nth-child(2) {
    animation: mobileHeroHeadlineReveal 640ms cubic-bezier(.16,.78,.24,1) 260ms both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__content > p {
    animation: mobileHeroServiceReveal 680ms cubic-bezier(.22,.72,.2,1) 470ms both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span {
    animation: mobileHeroTrustReveal 430ms ease both !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(1) {
    animation-delay: 650ms !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(2) {
    animation-delay: 730ms !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span:nth-child(3) {
    animation-delay: 810ms !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button--aqua {
    position: relative;
    isolation: isolate;
    overflow: visible;
    animation:
      mobileHeroActionReveal 470ms cubic-bezier(.2,.78,.24,1) 980ms both,
      mobileHeroCtaGlow 2.35s ease-in-out 1500ms infinite !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button--aqua::after {
    animation: mobileHeroCtaRing 2.35s ease-out 1500ms infinite !important;
  }

  .site-closing.closing-motion-ready.is-closing-visible .final-cta__text-link {
    animation: mobileHeroPhoneReveal 420ms ease 1080ms both !important;
  }
}

/* ----------------------------------------------------------
   REMOVE THE OLD FOOTER-SPECIFIC REVEAL EXTRAS
   The continuous circuit remains active; these old one-time flashes
   are no longer part of the final CTA entrance.
   ---------------------------------------------------------- */

.site-closing.closing-motion-ready.is-closing-visible .final-cta__trust span::before {
  animation: none !important;
}

.site-closing.closing-motion-ready.is-closing-visible .final-cta__actions .button::after {
  /* The Hero ring rules above take control for the aqua CTA. */
  border-radius: 2px;
}

/* Reduced motion: finished state, no entrance/pulse. */
@media (prefers-reduced-motion: reduce) {
  .site-closing.closing-motion-ready .final-cta__media img,
  .site-closing.closing-motion-ready .final-cta h2 span,
  .site-closing.closing-motion-ready .final-cta__content > p,
  .site-closing.closing-motion-ready .final-cta__trust span,
  .site-closing.closing-motion-ready .final-cta__actions .button,
  .site-closing.closing-motion-ready .final-cta__text-link {
    animation: none !important;
    opacity: 1 !important;
    clip-path: none !important;
    transform: none !important;
    filter: none !important;
  }

  .site-closing.closing-motion-ready .final-cta__actions .button::after {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================
   V78 — FOOTER IMAGE SEAM ROOT-CAUSE FIX
   Footer background photo restored to static pre-V75 behavior.
   Hero-style text/CTA/trust reveals and circuit animation remain.
   ========================================================== */
/* ==========================================================
   V3.1 — LOCKED REALISTIC BULB ILLUMINATION
   Client branding can change freely, but the physical light bulb
   always emits the same warm white / golden exterior light.
   Headline accents, CTAs, lightning, circuits and card charge
   effects still follow the client's configured accent color.
   ========================================================== */

:root {
  --bulb-core-rgb: 255, 251, 230;
  --bulb-soft-rgb: 173, 12, 17;
  --bulb-warm-rgb: 255, 216, 75;
  --bulb-glow-rgb: 173, 12, 17;
}

/* Ambient room-light cast created by the hanging bulb. */
.services::before {
  background:
    radial-gradient(
      ellipse at 30% 27%,
      rgba(225,255,255,.58) 0%,
      rgba(173, 12, 17,.39) 16%,
      rgba(var(--bulb-glow-rgb),.25) 31%,
      rgba(173, 12, 17,.16) 47%,
      rgba(104,79,44,.09) 61%,
      transparent 77%
    );
}

/* Circular halo surrounding the actual bulb. */
.bulb__glow {
  background:
    radial-gradient(
      circle,
      rgba(var(--bulb-soft-rgb),.62) 0%,
      rgba(var(--bulb-glow-rgb),.28) 38%,
      transparent 73%
    );
}

/* Steady powered-on bulb state. */
.services:hover .bulb__glass,
.services.is-lit .bulb__glass {
  border-color: rgba(118,235,238,.86);
  background: rgba(var(--bulb-warm-rgb),.88);
  box-shadow:
    inset 0 0 20px rgba(255,255,255,.86),
    0 0 24px rgba(81,222,225,.95),
    0 0 62px rgba(var(--bulb-glow-rgb),.66),
    0 0 105px rgba(var(--bulb-glow-rgb),.28);
}

/* Re-declare the flicker keyframe so every power-on / re-flicker cycle
   uses the locked warm bulb palette rather than the client accent. */
@keyframes servicesBulbPowerOn {
  0% {
    background: rgba(215,224,227,.08);
    border-color: rgba(255,255,255,.22);
    box-shadow: inset 0 0 10px rgba(255,255,255,.04);
  }

  18% {
    background: rgba(var(--bulb-warm-rgb),.92);
    border-color: rgba(118,235,238,.9);
    box-shadow:
      inset 0 0 20px rgba(255,255,255,.9),
      0 0 26px rgba(81,222,225,.98),
      0 0 66px rgba(var(--bulb-glow-rgb),.72);
  }

  31% {
    background: rgba(215,224,227,.10);
    border-color: rgba(255,255,255,.25);
    box-shadow: inset 0 0 10px rgba(255,255,255,.05);
  }

  43% {
    background: rgba(var(--bulb-warm-rgb),.96);
    border-color: rgba(118,235,238,.94);
    box-shadow:
      inset 0 0 22px rgba(255,255,255,.92),
      0 0 30px rgba(81,222,225,1),
      0 0 76px rgba(var(--bulb-glow-rgb),.78);
  }

  54% {
    background: rgba(215,224,227,.12);
    border-color: rgba(255,255,255,.28);
    box-shadow: inset 0 0 12px rgba(255,255,255,.06);
  }

  67%,
  100% {
    background: rgba(var(--bulb-warm-rgb),.88);
    border-color: rgba(118,235,238,.86);
    box-shadow:
      inset 0 0 20px rgba(255,255,255,.86),
      0 0 24px rgba(81,222,225,.95),
      0 0 62px rgba(var(--bulb-glow-rgb),.66),
      0 0 105px rgba(var(--bulb-glow-rgb),.28);
  }
}
/* ==========================================================
   PRESSURE WASHING MASTER v0.2 — VISUAL REMIX PASS 1
   ========================================================== */

:root {
  --water-core-rgb: 245, 250, 252;
  --water-rgb: 205, 218, 224;
  --water-deep-rgb: 142, 158, 166;
  --water-mist-rgb: 232, 240, 243;
}

/* Water-drop motifs replace lightning-bolt shapes. */
.button__drop {
  width: 12px;
  height: 12px;
  flex: 0 0 auto;
  border-radius: 58% 42% 62% 38% / 62% 42% 58% 38%;
  background: currentColor;
  transform: rotate(45deg) scale(.9);
}

.hero__trust span::before {
  top: 3px;
  width: 10px;
  height: 10px;
  border-radius: 58% 42% 62% 38% / 62% 42% 58% 38%;
  background: var(--aqua);
  clip-path: none;
  transform: rotate(45deg);
}

.final-cta__trust span::before {
  top: .34em;
  width: 7px;
  height: 7px;
  border-radius: 58% 42% 62% 38% / 62% 42% 58% 38%;
  background: var(--aqua);
  transform: rotate(45deg);
}

.services-v27__drop {
  width: 9px;
  height: 9px;
  border-radius: 58% 42% 62% 38% / 62% 42% 58% 38%;
  background: currentColor;
  transform: rotate(45deg);
}

.brand-mark--house { border-bottom-color: var(--aqua); }
.brand-mark--outdoor { font-style: normal; }

/* Hero/footer current becomes a water shimmer. */
.hero-circuit,
.footer-circuit { height: 7px; }

.hero-circuit__line,
.footer-circuit__line {
  top: 3px;
  height: 1px;
  opacity: .28;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--water-rgb),.22) 9%,
      rgba(var(--water-core-rgb),.34) 50%,
      rgba(var(--water-rgb),.22) 91%,
      transparent 100%
    );
}

.hero-circuit__charge,
.footer-circuit__charge {
  top: 0;
  height: 7px;
  border-radius: 999px;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--water-rgb),.12) 17%,
      rgba(var(--water-rgb),.62) 46%,
      rgba(var(--water-core-rgb),.98) 67%,
      rgba(var(--water-rgb),.82) 79%,
      transparent 100%
    );
  filter:
    drop-shadow(0 0 4px rgba(var(--water-core-rgb),.92))
    drop-shadow(0 0 11px rgba(var(--water-rgb),.54));
}

/* Aqua mist replaces the old bulb's warm room-light cast. */
.services::before {
  top: -180px;
  left: -210px;
  width: min(82vw, 1180px);
  height: 920px;
  opacity: 0;
  background:
    radial-gradient(
      ellipse at 29% 27%,
      rgba(var(--water-core-rgb),.19) 0%,
      rgba(var(--water-mist-rgb),.14) 18%,
      rgba(var(--water-rgb),.10) 34%,
      rgba(var(--water-deep-rgb),.055) 49%,
      transparent 73%
    );
  filter: blur(7px);
  transform: scale(.9);
  transition: opacity 420ms ease, transform 480ms ease;
}

.services:hover::before,
.services.is-washing::before,
.services.is-lit::before {
  opacity: 1;
  transform: scale(1);
}


/* Signature pressure-washing demonstration — VERSION B
   A dirty stripe covers the real Services H1. A wide off-screen water fan
   sweeps across it and reveals the actual heading underneath. */

/* Pressure-washing master: keep the exterior room-light glow exclusive to Exterior. */
.services::before,
.services:hover::before,
.services.is-washing::before,
.services.is-lit::before {
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
}

.services__wash-demo--title-wash {
  position: absolute;
  z-index: 6;
  top: 72px;
  left: -205px;
  width: 1180px;
  height: 310px;
  overflow: visible;
  pointer-events: none;
}

/* Add true spray-at-the-source atmosphere so the effect reads as water,
   not as a spotlight. These clouds anchor directly at the left jet origin. */
.services__wash-demo--title-wash::before,
.services__wash-demo--title-wash::after {
  content: "";
  position: absolute;
  z-index: 7;
  opacity: 0;
  pointer-events: none;
  will-change: transform, opacity;
}

.services__wash-demo--title-wash::before {
  top: 28px;
  left: 58px;
  width: 248px;
  height: 224px;
  background:
    radial-gradient(circle at 24% 50%, rgba(255,255,255,.76) 0 6%, transparent 16%),
    radial-gradient(circle at 33% 46%, rgba(var(--water-core-rgb),.66) 0 9%, rgba(var(--water-rgb),.28) 20%, transparent 44%),
    radial-gradient(circle at 46% 40%, rgba(var(--water-mist-rgb),.46) 0 12%, transparent 38%),
    radial-gradient(circle at 50% 58%, rgba(var(--water-mist-rgb),.34) 0 18%, transparent 52%),
    radial-gradient(circle at 68% 46%, rgba(var(--water-rgb),.24) 0 20%, transparent 54%);
  filter: blur(15px) saturate(1.08);
}

.services__wash-demo--title-wash::after {
  top: 52px;
  left: 176px;
  width: 312px;
  height: 182px;
  background:
    linear-gradient(90deg,
      rgba(var(--water-mist-rgb),.22) 0%,
      rgba(var(--water-rgb),.14) 33%,
      rgba(var(--water-rgb),.08) 64%,
      transparent 100%),
    radial-gradient(ellipse at 18% 50%, rgba(var(--water-mist-rgb),.18) 0 18%, transparent 48%),
    radial-gradient(ellipse at 42% 48%, rgba(var(--water-mist-rgb),.16) 0 16%, transparent 44%),
    radial-gradient(ellipse at 70% 45%, rgba(var(--water-rgb),.12) 0 15%, transparent 42%);
  clip-path: polygon(0 48%, 100% 10%, 100% 90%, 0 52%);
  filter: blur(12px);
}

.wash-demo__fan {
  position: absolute;
  left: 86px;
  transform-origin: 0 50%;
  opacity: 0;
}

.wash-demo__fan--soft {
  top: 2px;
  width: 1088px;
  height: 300px;
  background:
    radial-gradient(circle at 18% 49%, rgba(var(--water-mist-rgb),.22) 0 9%, transparent 24%),
    radial-gradient(circle at 31% 46%, rgba(var(--water-mist-rgb),.14) 0 10%, transparent 22%),
    radial-gradient(circle at 48% 58%, rgba(var(--water-mist-rgb),.12) 0 7%, transparent 18%),
    radial-gradient(circle at 68% 34%, rgba(var(--water-mist-rgb),.09) 0 6%, transparent 16%),
    linear-gradient(90deg,
      rgba(var(--water-mist-rgb),.42),
      rgba(var(--water-rgb),.24) 28%,
      rgba(var(--water-rgb),.12) 58%,
      rgba(var(--water-rgb),.05) 78%,
      transparent 100%);
  clip-path: polygon(0 49%, 100% 1%, 100% 99%, 0 51%);
  filter: blur(16px);
}

.wash-demo__fan--main {
  top: 40px;
  width: 1010px;
  height: 232px;
  background:
    radial-gradient(circle at 16% 48%, rgba(255,255,255,.28) 0 6%, transparent 13%),
    radial-gradient(circle at 32% 44%, rgba(var(--water-core-rgb),.20) 0 6%, transparent 14%),
    radial-gradient(circle at 52% 58%, rgba(var(--water-mist-rgb),.16) 0 5%, transparent 12%),
    linear-gradient(90deg,
      rgba(var(--water-core-rgb),.82),
      rgba(var(--water-rgb),.66) 20%,
      rgba(var(--water-rgb),.26) 56%,
      rgba(var(--water-mist-rgb),.10) 82%,
      transparent 100%);
  clip-path: polygon(0 48%, 100% 10%, 100% 90%, 0 52%);
  filter: blur(1.2px) drop-shadow(0 0 8px rgba(var(--water-rgb),.26));
}

.wash-demo__fan--core {
  top: 98px;
  width: 948px;
  height: 114px;
  background:
    linear-gradient(90deg,
      rgba(255,255,255,.96),
      rgba(var(--water-core-rgb),.76) 18%,
      rgba(var(--water-rgb),.44) 46%,
      rgba(var(--water-mist-rgb),.10) 78%,
      transparent 100%);
  clip-path: polygon(0 48%, 100% 24%, 100% 76%, 0 52%);
  filter: blur(.45px);
}

.wash-demo__mist {
  position: absolute;
  z-index: 8;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  opacity: 0;
  background: radial-gradient(circle at 35% 35%, rgba(255,255,255,.98) 0 12%, rgba(var(--water-core-rgb),.72) 28%, rgba(var(--water-rgb),.22) 58%, transparent 76%);
  box-shadow:
    16px 8px 0 0 rgba(var(--water-mist-rgb),.16),
    26px 0 0 -1px rgba(var(--water-mist-rgb),.52),
    40px 12px 0 -2px rgba(var(--water-rgb),.36),
    56px 4px 0 -3px rgba(var(--water-mist-rgb),.28),
    78px 14px 0 -5px rgba(var(--water-core-rgb),.22);
  filter: blur(.2px) drop-shadow(0 0 9px rgba(var(--water-rgb),.24));
  will-change: transform, opacity;
}

.wash-demo__mist::before,
.wash-demo__mist::after {
  content: "";
  position: absolute;
  border-radius: 50%;
}

.wash-demo__mist::before {
  width: 42px;
  height: 24px;
  left: 4px;
  top: -6px;
  background: radial-gradient(ellipse at 36% 50%, rgba(var(--water-mist-rgb),.76), rgba(var(--water-rgb),.18) 56%, transparent 76%);
  filter: blur(8px);
  opacity: .86;
}

.wash-demo__mist::after {
  width: 74px;
  height: 36px;
  left: 18px;
  top: 1px;
  background: radial-gradient(ellipse at 30% 50%, rgba(var(--water-mist-rgb),.58), rgba(var(--water-rgb),.12) 58%, transparent 82%);
  filter: blur(11px);
  opacity: .84;
}

/* Reposition the mist so it starts much closer to the jet origin on the left,
   then trails outward across the spray. */
.wash-demo__mist--1 { top: 66px; left: 180px; transform: scale(1.28); }
.wash-demo__mist--2 { top: 126px; left: 214px; transform: scale(1.42); }
.wash-demo__mist--3 { top: 42px; left: 246px; transform: scale(1.14); }
.wash-demo__mist--4 { top: 150px; left: 288px; transform: scale(1.08); }
.wash-demo__mist--5 { top: 84px; left: 340px; transform: scale(1.02); }
.wash-demo__mist--6 { top: 38px; left: 418px; transform: scale(.96); }
.wash-demo__mist--7 { top: 160px; left: 488px; transform: scale(.94); }
.wash-demo__mist--8 { top: 102px; left: 566px; transform: scale(.88); }
.wash-demo__mist--9 { top: 56px; left: 652px; transform: scale(.78); }
.wash-demo__mist--10 { top: 178px; left: 742px; transform: scale(.72); }
.wash-demo__mist--11 { top: 120px; left: 824px; transform: scale(.64); }
.wash-demo__mist--12 { top: 76px; left: 906px; transform: scale(.56); }

/* Real H1 remains semantic HTML. These are purely visual layers above it. */
.services-v27__wash-title {
  position: relative;
  isolation: isolate;
}

.services-v27__wash-title > span {
  position: relative;
  z-index: 1;
}

.services-v27__dirty-stripe {
  position: absolute;
  z-index: 3;
  top: -17px;
  left: -44px;
  width: calc(100% + 88px);
  height: calc(100% + 34px);
  pointer-events: none;
  opacity: .97;
  background:
    radial-gradient(ellipse at 12% 28%, rgba(113,95,57,.96) 0 7%, transparent 19%),
    radial-gradient(ellipse at 30% 75%, rgba(62,80,51,.96) 0 9%, transparent 22%),
    radial-gradient(ellipse at 51% 31%, rgba(95,83,55,.96) 0 8%, transparent 20%),
    radial-gradient(ellipse at 70% 73%, rgba(54,73,49,.96) 0 9%, transparent 21%),
    radial-gradient(ellipse at 88% 34%, rgba(103,88,57,.96) 0 8%, transparent 20%),
    linear-gradient(100deg, #665c43 0%, #4b5d42 34%, #625840 67%, #43553e 100%);
  box-shadow:
    inset 0 0 18px rgba(18,26,22,.28),
    0 7px 14px rgba(0,0,0,.14);
  clip-path: polygon(0 10%, 8% 6%, 18% 11%, 30% 5%, 44% 9%, 57% 4%, 70% 10%, 83% 6%, 100% 11%, 100% 90%, 88% 95%, 72% 90%, 57% 96%, 40% 91%, 23% 96%, 10% 91%, 0 94%);
}

.services-v27__dirty-stripe::after {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .42;
  background:
    repeating-linear-gradient(8deg, transparent 0 12px, rgba(27,37,29,.22) 12px 14px),
    radial-gradient(circle at 22% 42%, rgba(31,45,29,.50) 0 3px, transparent 5px),
    radial-gradient(circle at 63% 62%, rgba(38,51,32,.52) 0 4px, transparent 7px),
    radial-gradient(circle at 81% 24%, rgba(36,50,30,.46) 0 3px, transparent 6px);
}

.services-v27__wash-edge {
  position: absolute;
  z-index: 4;
  top: -22px;
  left: -53px;
  width: 40px;
  height: calc(100% + 44px);
  opacity: 0;
  pointer-events: none;
  background:
    linear-gradient(90deg,
      transparent,
      rgba(var(--water-mist-rgb),.38),
      rgba(var(--water-core-rgb),1),
      rgba(var(--water-rgb),.58),
      transparent);
  clip-path: polygon(18% 0, 100% 5%, 84% 100%, 0 94%);
  filter: blur(.45px) drop-shadow(0 0 11px rgba(var(--water-rgb),.58));
}

.services.is-washing .services__wash-demo--title-wash::before {
  animation: pwSourceMistCloud 2.15s cubic-bezier(.18,.72,.22,1) both;
}
.services.is-washing .services__wash-demo--title-wash::after {
  animation: pwTrailingMistVeil 2.10s cubic-bezier(.18,.72,.22,1) .06s both;
}
.services.is-washing .wash-demo__fan--soft {
  animation: pwTitleSpraySoft 2.55s cubic-bezier(.18,.7,.22,1) both;
}
.services.is-washing .wash-demo__fan--main {
  animation: pwTitleSprayMain 2.55s cubic-bezier(.18,.7,.22,1) both;
}
.services.is-washing .wash-demo__fan--core {
  animation: pwTitleSprayCore 2.55s cubic-bezier(.18,.7,.22,1) both;
}
.services.is-washing .wash-demo__mist {
  animation: pwTitleMist 1.18s linear 3;
}
.services.is-washing .services-v27__dirty-stripe {
  animation: pwDirtyStripeClean 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}
.services.is-washing .services-v27__wash-edge {
  animation: pwTitleCleanEdge 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}

.services.is-lit .services-v27__dirty-stripe {
  clip-path: inset(0 0 0 100%);
  opacity: 0;
}
.services.is-lit .services-v27__wash-edge,
.services.is-lit .wash-demo__fan,
.services.is-lit .wash-demo__mist,
.services.is-lit .services__wash-demo--title-wash::before,
.services.is-lit .services__wash-demo--title-wash::after {
  opacity: 0;
}

@keyframes pwSourceMistCloud {
  0%, 6% { opacity: 0; transform: translateX(-10px) scale(.84); }
  18% { opacity: .82; }
  55% { opacity: .96; transform: translateX(6px) scale(1.02); }
  100% { opacity: 0; transform: translateX(20px) scale(1.08); }
}
@keyframes pwTrailingMistVeil {
  0%, 10% { opacity: 0; transform: scaleX(.16); }
  22% { opacity: .54; }
  64% { opacity: .74; transform: scaleX(1); }
  100% { opacity: 0; transform: scaleX(1.04); }
}
@keyframes pwTitleSpraySoft {
  0%,5% { opacity: 0; transform: scaleX(.08); }
  14% { opacity: .82; }
  76% { opacity: .88; transform: scaleX(1.02); }
  94%,100% { opacity: 0; transform: scaleX(1.04); }
}
@keyframes pwTitleSprayMain {
  0%,6% { opacity: 0; transform: scaleX(.06); }
  13% { opacity: .88; }
  78% { opacity: .82; transform: scaleX(1.02); }
  95%,100% { opacity: 0; transform: scaleX(1.03); }
}
@keyframes pwTitleSprayCore {
  0%,7% { opacity: 0; transform: scaleX(.05); }
  14% { opacity: .94; }
  80% { opacity: .76; transform: scaleX(1.01); }
  96%,100% { opacity: 0; transform: scaleX(1.02); }
}
@keyframes pwDirtyStripeClean {
  0% { clip-path: inset(0 0 0 0); opacity: .97; }
  100% { clip-path: inset(0 0 0 100%); opacity: .25; }
}
@keyframes pwTitleCleanEdge {
  0% { left: -53px; opacity: 0; }
  8% { opacity: 1; }
  90% { opacity: .96; }
  100% { left: calc(100% + 14px); opacity: 0; }
}
@keyframes pwTitleMist {
  0% { opacity: 0; transform: translate(0,0) scale(.38); }
  18% { opacity: .92; }
  56% { opacity: .98; }
  100% { opacity: 0; transform: translate(72px,22px) scale(1.18); }
}

@media (max-width: 1120px) {
  .services__wash-demo--title-wash {
    left: -230px;
    transform: scale(.88);
    transform-origin: top left;
  }
}
@media (max-width: 860px) {
  .services__wash-demo--title-wash {
    top: 66px;
    left: -260px;
    transform: scale(.72);
    transform-origin: top left;
  }
  .services--v27 { padding-top: 108px; }
}
@media (max-width: 560px) {
  .services__wash-demo--title-wash {
    top: 72px;
    left: -330px;
    transform: scale(.57);
    transform-origin: top left;
  }
  .services-v27__dirty-stripe {
    top: -12px;
    left: -18px;
    width: calc(100% + 36px);
    height: calc(100% + 24px);
  }
  .services--v27 { padding-top: 118px; }
  .services-v27__heading { margin-bottom: 38px; }
}
@media (prefers-reduced-motion: reduce) {
  .services-v27__dirty-stripe,
  .services-v27__wash-edge,
  .wash-demo__fan,
  .wash-demo__mist,
  .services__wash-demo--title-wash::before,
  .services__wash-demo--title-wash::after {
    animation: none !important;
  }
  .services-v27__dirty-stripe { opacity: 0 !important; clip-path: inset(0 0 0 100%) !important; }
  .services-v27__wash-edge,
  .wash-demo__fan,
  .wash-demo__mist,
  .services__wash-demo--title-wash::before,
  .services__wash-demo--title-wash::after { opacity: 0 !important; }
}



/* ==========================================================
   VERSION B v4 — CONTINUOUS TOP-LEFT BUBBLES
   ~30% more prominent: larger sizes, brighter rims, stronger
   visibility and a wider top-left distribution.
   The bubbles run continuously, independent of the jet pass.
   ========================================================== */

.wash-demo__bubble {
  position: absolute;
  z-index: 8;
  bottom: 32px;
  border: 1.4px solid rgba(var(--water-core-rgb), .62);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(
      circle at 31% 27%,
      rgba(255,255,255,.72) 0 8%,
      rgba(var(--water-core-rgb),.22) 12%,
      rgba(var(--water-rgb),.10) 48%,
      rgba(var(--water-rgb),.03) 67%,
      transparent 72%
    );
  box-shadow:
    inset -2px -2px 5px rgba(var(--water-rgb),.12),
    inset 2px 2px 4px rgba(255,255,255,.16),
    0 0 8px rgba(var(--water-rgb),.22);
  backdrop-filter: blur(.35px);
  animation: pwBubbleFloat 7.6s ease-in infinite;
  will-change: transform, opacity;
}

.wash-demo__bubble::after {
  position: absolute;
  top: 20%;
  left: 23%;
  width: 24%;
  height: 20%;
  content: "";
  border-radius: 50%;
  background: rgba(255,255,255,.68);
  filter: blur(.3px);
}

.wash-demo__bubble--1 {
  left: 226px;
  width: 13px;
  height: 13px;
  animation-duration: 7.2s;
  animation-delay: -1.2s;
}

.wash-demo__bubble--2 {
  left: 282px;
  width: 18px;
  height: 18px;
  animation-duration: 8.4s;
  animation-delay: -4.8s;
}

.wash-demo__bubble--3 {
  left: 350px;
  width: 10px;
  height: 10px;
  animation-duration: 6.8s;
  animation-delay: -2.9s;
}

.wash-demo__bubble--4 {
  left: 416px;
  width: 16px;
  height: 16px;
  animation-duration: 8.9s;
  animation-delay: -6.1s;
}

.wash-demo__bubble--5 {
  left: 490px;
  width: 11px;
  height: 11px;
  animation-duration: 7.7s;
  animation-delay: -3.7s;
}

.wash-demo__bubble--6 {
  left: 550px;
  width: 20px;
  height: 20px;
  animation-duration: 9.3s;
  animation-delay: -7.2s;
}

.wash-demo__bubble--7 {
  left: 318px;
  width: 14px;
  height: 14px;
  animation-duration: 8.1s;
  animation-delay: -5.6s;
}

.wash-demo__bubble--8 {
  left: 458px;
  width: 12px;
  height: 12px;
  animation-duration: 7.4s;
  animation-delay: -2.1s;
}

@keyframes pwBubbleFloat {
  0% {
    opacity: 0;
    transform: translate3d(0, 18px, 0) scale(.72);
  }

  12% {
    opacity: .66;
  }

  46% {
    opacity: .78;
    transform: translate3d(12px, -76px, 0) scale(.94);
  }

  76% {
    opacity: .58;
  }

  100% {
    opacity: 0;
    transform: translate3d(-5px, -164px, 0) scale(1.15);
  }
}

@media (min-width: 1121px) {
  .wash-demo__bubble {
    filter: saturate(1.08);
  }
}

@media (max-width: 860px) {
  .wash-demo__bubble--5,
  .wash-demo__bubble--6,
  .wash-demo__bubble--7,
  .wash-demo__bubble--8 {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .wash-demo__bubble {
    animation: none !important;
    opacity: .34 !important;
  }
}

/* Exterior card charge becomes a softer water shimmer. */
@keyframes serviceCardChargeGlow {
  0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.16); }
  48% {
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      0 0 0 2px rgba(var(--water-rgb),.20),
      0 0 28px rgba(var(--water-rgb),.22);
  }
}
@keyframes serviceCardChargeGlowMobile {
  0%, 100% { box-shadow: 0 14px 28px rgba(0,0,0,.16); }
  50% {
    box-shadow:
      0 14px 28px rgba(0,0,0,.18),
      0 0 0 2px rgba(var(--water-rgb),.18),
      0 0 22px rgba(var(--water-rgb),.20);
  }
}
@keyframes serviceIconEnergize {
  0% { transform: scale(.78); opacity: .5; filter: drop-shadow(0 0 0 rgba(var(--water-rgb),0)); }
  58% { transform: scale(1.10); opacity: 1; filter: drop-shadow(0 0 8px rgba(var(--water-rgb),.56)); }
  100% { transform: scale(1); opacity: 1; filter: drop-shadow(0 0 0 rgba(var(--water-rgb),0)); }
}
/* ==========================================================
   PRESSURE WASHING v6 — FINAL EXTERIOR-LEFTOVER CLEANUP
   Approved Version B jet / grime reveal / 8 bubbles remain untouched.
   ========================================================== */

/* ----------------------------------------------------------
   UNIVERSAL PRESSURE-WASHING WATER DROP
   Make every CTA/trust/feature marker read as an actual teardrop,
   not a dot, diamond or inherited lightning bolt.
   ---------------------------------------------------------- */

.button__drop,
.hero__trust span::before,
.final-cta__trust span::before,
.softwash-feature__points span::before,
.service-area-float__cities span::before,
.services-v27__drop {
  border-radius: 48% 48% 58% 58% / 36% 36% 64% 64%;
  background: var(--aqua);
  clip-path: polygon(
    50% 0%,
    67% 20%,
    83% 41%,
    95% 61%,
    100% 72%,
    96% 84%,
    87% 93%,
    75% 98%,
    50% 100%,
    25% 98%,
    13% 93%,
    4% 84%,
    0% 72%,
    5% 61%,
    17% 41%,
    33% 20%
  );
  transform: none;
}

.button__drop {
  width: 11px;
  height: 16px;
  flex: 0 0 11px;
}

.hero__trust span::before {
  top: 1px;
  width: 10px;
  height: 15px;
}

.final-cta__trust span::before {
  top: .15em;
  width: 8px;
  height: 11px;
}

.softwash-feature__points span::before {
  width: 10px;
  height: 15px;
}

.service-area-float__cities span::before {
  top: 0;
  width: 8px;
  height: 12px;
}

.services-v27__drop {
  width: 8px;
  height: 12px;
  flex: 0 0 8px;
}

/* ----------------------------------------------------------
   HERO / TRUST STRIP
   ---------------------------------------------------------- */

/* HOUSE WASHING inherited the old HOUSE WASHING underline. */
.brand-mark--house {
  padding-bottom: 0;
  border-bottom: 0 !important;
}

/* ----------------------------------------------------------
   SERVICES
   ---------------------------------------------------------- */

/* Give animated heading glyphs breathing room so the left edge / G
   cannot be clipped by the mask during or after the reveal. */
.services--v27.services-motion-ready .services__heading h2 span {
  padding: .04em .055em .075em;
  margin: -.04em -.055em -.075em;
  overflow: visible;
}

/* Slightly larger, clearer literal service pictograms. */
.service-card-v27__icon {
  width: 46px;
  height: 46px;
  margin-bottom: 10px;
}

.service-card-v27__icon svg {
  width: 43px;
  height: 43px;
  stroke-width: 2;
}

/* The final SVG path is the spray / pressure-washing detail. */
.service-card-v27__icon svg path:last-child,
.service-card-v27__icon svg circle:last-child {
  stroke: var(--aqua);
}

/* ----------------------------------------------------------
   REVIEWS — proper circular initials/avatar badge
   ---------------------------------------------------------- */

.review-v35__avatar {
  width: 46px;
  height: 46px;
  flex: 0 0 46px;
  border: 2px solid rgba(var(--water-rgb), .88);
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.96), transparent 27%),
    linear-gradient(145deg, #f3ffff, #b8f5f6);
  color: var(--navy-900);
  box-shadow:
    0 0 0 3px rgba(var(--water-rgb),.08),
    0 6px 14px rgba(var(--primary-dark-rgb),.12);
  font-size: .72rem;
}

.review-v35--featured .review-v35__avatar {
  border-color: rgba(255,255,255,.92);
  background:
    radial-gradient(circle at 31% 27%, rgba(255,255,255,.88), transparent 27%),
    linear-gradient(145deg, var(--aqua), rgba(var(--water-rgb),.92));
  color: var(--navy-950);
}

/* ----------------------------------------------------------
   LET'S TALK — force strong readable right-card contrast
   ---------------------------------------------------------- */

.contact-float__action--dark {
  color: #fff !important;
  background: #061321 !important;
  border-color: rgba(var(--water-rgb),.35);
  box-shadow:
    0 7px 17px rgba(0,0,0,.22),
    inset 0 0 0 1px rgba(255,255,255,.025);
}

.contact-float__action--dark:hover {
  background: #0a2035 !important;
}

.contact-float__action--dark small {
  color: var(--aqua) !important;
  opacity: 1;
}

.contact-float__action--dark strong {
  color: #fff !important;
  opacity: 1;
}

.contact-float__action--dark .contact-float__icon--sms {
  color: var(--aqua);
  background: rgba(var(--water-rgb),.08);
  border: 1px solid rgba(var(--water-rgb),.34);
}

/* ----------------------------------------------------------
   RESPONSIVE DROP LEGIBILITY
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .hero__trust span::before {
    width: 9px;
    height: 13px;
  }

  .softwash-feature__points span::before {
    width: 9px;
    height: 14px;
  }

  .service-area-float__cities span::before {
    width: 7px;
    height: 11px;
  }
}
/* ==========================================================
   PRESSURE WASHING v7 — FINAL-FINAL MICRO CLEANUP
   Only:
   1) navy droplets on solid aqua CTAs,
   2) remove soft-wash connector rail,
   3) clarify two service icons.
   ========================================================== */

/* Solid aqua CTA + aqua droplet had no contrast.
   On solid accent buttons, the droplet follows the dark button text. */
.button--aqua .button__drop {
  background: var(--navy-950) !important;
}

/* The three soft-wash droplets stand better on their own.
   Remove the inherited exterior/circuit connector rail completely. */
.softwash-feature.softwash-motion-ready .softwash-feature__points::before,
.softwash-feature.softwash-motion-ready .softwash-feature__points::after {
  display: none !important;
}

/* Without the rail, give each droplet a tiny bit more separation
   from the label while preserving the existing row spacing. */
.softwash-feature__points span {
  padding-left: 29px;
}

.softwash-feature__points span::before {
  left: 1px;
}

/* Two clarified service-card pictograms:
   #2 = circular surface cleaner; #3 = deck/railing + water drops.
   Keep their detail crisp at the existing card-icon size. */
.service-card-v27:nth-child(2) .service-card-v27__icon svg ellipse,
.service-card-v27:nth-child(3) .service-card-v27__icon svg path {
  vector-effect: non-scaling-stroke;
}

/* Surface-cleaner disk gets the aqua trade accent. */
.service-card-v27:nth-child(2) .service-card-v27__icon svg ellipse {
  stroke: var(--aqua);
}

/* Deck icon: the two final water-drop paths get the aqua accent. */
.service-card-v27:nth-child(3) .service-card-v27__icon svg path:nth-last-child(-n+2) {
  stroke: var(--aqua);
}

/* ==========================================================
   PRESSURE WASHING v10 — PURE MIST SPRAY
   Reference direction: dense atomized pressure-washer fog.
   No hard aqua/blue light beam remains.
   ========================================================== */

.services__wash-demo--title-wash .wash-demo__fan {
  left: 82px;
  border-radius: 50%;
  clip-path: none !important;
  background: none;
  box-shadow: none;
  filter: none;
  mix-blend-mode: screen;
  transform-origin: 0 50%;
}

.services__wash-demo--title-wash .wash-demo__fan--soft {
  top: 0;
  width: 1040px;
  height: 300px;
  background:
    radial-gradient(ellipse at 3% 50%, rgba(255,255,255,.80) 0%, rgba(238,255,255,.61) 8%, rgba(210,251,253,.40) 20%, rgba(183,242,246,.24) 36%, rgba(183,242,246,.10) 52%, transparent 72%),
    radial-gradient(ellipse at 28% 42%, rgba(255,255,255,.20) 0%, rgba(221,252,253,.13) 26%, transparent 58%),
    radial-gradient(ellipse at 48% 58%, rgba(255,255,255,.14) 0%, rgba(203,247,250,.08) 24%, transparent 52%);
  filter: blur(25px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.95) 15%, rgba(0,0,0,.68) 47%, rgba(0,0,0,.20) 76%, transparent 100%);
}

.services__wash-demo--title-wash .wash-demo__fan--main {
  top: 42px;
  width: 900px;
  height: 224px;
  background:
    radial-gradient(ellipse at 2% 50%, rgba(255,255,255,.94) 0%, rgba(242,255,255,.78) 7%, rgba(220,252,253,.52) 17%, rgba(199,247,249,.29) 31%, rgba(193,245,248,.12) 48%, transparent 69%),
    radial-gradient(ellipse at 26% 46%, rgba(255,255,255,.28) 0%, rgba(229,254,255,.13) 22%, transparent 50%),
    radial-gradient(ellipse at 48% 53%, rgba(255,255,255,.18) 0%, rgba(212,249,251,.09) 20%, transparent 46%);
  filter: blur(15px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.96) 16%, rgba(0,0,0,.70) 48%, rgba(0,0,0,.18) 78%, transparent 100%);
}

.services__wash-demo--title-wash .wash-demo__fan--core {
  top: 82px;
  width: 690px;
  height: 146px;
  background:
    radial-gradient(ellipse at 1% 50%, rgba(255,255,255,.98) 0%, rgba(247,255,255,.88) 7%, rgba(227,253,254,.57) 18%, rgba(209,249,251,.27) 33%, rgba(199,246,249,.09) 49%, transparent 66%),
    radial-gradient(ellipse at 30% 48%, rgba(255,255,255,.24) 0%, rgba(226,253,254,.12) 25%, transparent 54%);
  filter: blur(9px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.92) 18%, rgba(0,0,0,.56) 50%, rgba(0,0,0,.10) 80%, transparent 100%);
}

.services__wash-demo--title-wash::before {
  top: 30px;
  left: 54px;
  width: 315px;
  height: 250px;
  background:
    radial-gradient(ellipse at 16% 50%, rgba(255,255,255,.90) 0 7%, transparent 26%),
    radial-gradient(ellipse at 25% 42%, rgba(247,255,255,.72) 0 13%, transparent 38%),
    radial-gradient(ellipse at 29% 60%, rgba(225,253,254,.55) 0 16%, transparent 46%),
    radial-gradient(ellipse at 46% 44%, rgba(214,250,252,.36) 0 20%, transparent 52%),
    radial-gradient(ellipse at 55% 61%, rgba(200,247,250,.23) 0 20%, transparent 56%);
  filter: blur(18px) saturate(.75);
}

.services__wash-demo--title-wash::after {
  top: 52px;
  left: 170px;
  width: 455px;
  height: 206px;
  border-radius: 50%;
  clip-path: none;
  background:
    radial-gradient(ellipse at 12% 46%, rgba(255,255,255,.46) 0 13%, transparent 34%),
    radial-gradient(ellipse at 31% 58%, rgba(236,254,255,.30) 0 16%, transparent 40%),
    radial-gradient(ellipse at 50% 39%, rgba(222,251,253,.20) 0 17%, transparent 43%),
    radial-gradient(ellipse at 71% 55%, rgba(209,248,251,.12) 0 16%, transparent 40%);
  filter: blur(18px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.82) 35%, rgba(0,0,0,.28) 72%, transparent 100%);
}

.services__wash-demo--title-wash .wash-demo__mist {
  z-index: 8;
  width: 18px;
  height: 18px;
  background: radial-gradient(circle, rgba(255,255,255,.88) 0 12%, rgba(237,255,255,.62) 20%, rgba(206,249,252,.25) 48%, transparent 72%);
  box-shadow: 20px 7px 0 -5px rgba(255,255,255,.52), 38px -3px 0 -7px rgba(230,253,254,.44), 58px 12px 0 -8px rgba(214,250,252,.34), 80px 2px 0 -9px rgba(226,253,254,.28), 98px 16px 0 -10px rgba(206,248,251,.22);
  filter: blur(1.1px);
}

.services__wash-demo--title-wash .wash-demo__mist::before {
  width: 58px;
  height: 34px;
  left: -4px;
  top: -10px;
  background: radial-gradient(ellipse, rgba(255,255,255,.54), rgba(224,252,254,.24) 48%, transparent 76%);
  filter: blur(10px);
  opacity: .90;
}

.services__wash-demo--title-wash .wash-demo__mist::after {
  width: 104px;
  height: 50px;
  left: 13px;
  top: -8px;
  background: radial-gradient(ellipse, rgba(246,255,255,.40), rgba(213,249,252,.17) 48%, transparent 79%);
  filter: blur(14px);
  opacity: .86;
}

.services__wash-demo--title-wash .wash-demo__mist--1  { top: 62px;  left: 138px; transform: scale(1.65); }
.services__wash-demo--title-wash .wash-demo__mist--2  { top: 126px; left: 164px; transform: scale(1.80); }
.services__wash-demo--title-wash .wash-demo__mist--3  { top: 34px;  left: 198px; transform: scale(1.42); }
.services__wash-demo--title-wash .wash-demo__mist--4  { top: 164px; left: 226px; transform: scale(1.44); }
.services__wash-demo--title-wash .wash-demo__mist--5  { top: 88px;  left: 264px; transform: scale(1.38); }
.services__wash-demo--title-wash .wash-demo__mist--6  { top: 42px;  left: 322px; transform: scale(1.24); }
.services__wash-demo--title-wash .wash-demo__mist--7  { top: 151px; left: 350px; transform: scale(1.28); }
.services__wash-demo--title-wash .wash-demo__mist--8  { top: 106px; left: 404px; transform: scale(1.18); }
.services__wash-demo--title-wash .wash-demo__mist--9  { top: 52px;  left: 470px; transform: scale(1.06); }
.services__wash-demo--title-wash .wash-demo__mist--10 { top: 174px; left: 508px; transform: scale(1.05); }
.services__wash-demo--title-wash .wash-demo__mist--11 { top: 116px; left: 574px; transform: scale(.94); }
.services__wash-demo--title-wash .wash-demo__mist--12 { top: 72px;  left: 636px; transform: scale(.84); }
.services__wash-demo--title-wash .wash-demo__mist--13 { top: 144px; left: 688px; transform: scale(.78); }
.services__wash-demo--title-wash .wash-demo__mist--14 { top: 48px;  left: 738px; transform: scale(.70); }
.services__wash-demo--title-wash .wash-demo__mist--15 { top: 102px; left: 792px; transform: scale(.64); }
.services__wash-demo--title-wash .wash-demo__mist--16 { top: 154px; left: 836px; transform: scale(.58); }

.services.is-washing .services__wash-demo--title-wash::before { animation: pwPureMistSource 2.25s cubic-bezier(.18,.72,.22,1) both; }
.services.is-washing .services__wash-demo--title-wash::after { animation: pwPureMistTrail 2.35s cubic-bezier(.18,.72,.22,1) .04s both; }
.services.is-washing .wash-demo__mist { animation: pwPureMistParticle 1.28s ease-out 2; }

@keyframes pwPureMistSource {
  0%, 5% { opacity: 0; transform: translateX(-20px) scale(.72); }
  17% { opacity: .84; }
  46% { opacity: .98; transform: translateX(2px) scale(1.04); }
  78% { opacity: .84; transform: translateX(12px) scale(1.10); }
  100% { opacity: 0; transform: translateX(28px) scale(1.18); }
}

@keyframes pwPureMistTrail {
  0%, 8% { opacity: 0; transform: translateX(-30px) scaleX(.56); }
  23% { opacity: .64; }
  55% { opacity: .82; transform: translateX(4px) scaleX(1.02); }
  82% { opacity: .60; }
  100% { opacity: 0; transform: translateX(34px) scaleX(1.10); }
}

@keyframes pwPureMistParticle {
  0% { opacity: 0; transform: translate3d(-8px,0,0) scale(.42); }
  18% { opacity: .72; }
  44% { opacity: .94; }
  76% { opacity: .64; }
  100% { opacity: 0; transform: translate3d(58px,14px,0) scale(1.34); }
}

.services.is-lit .services__wash-demo--title-wash::before,
.services.is-lit .services__wash-demo--title-wash::after,
.services.is-lit .services__wash-demo--title-wash .wash-demo__fan,
.services.is-lit .services__wash-demo--title-wash .wash-demo__mist { opacity: 0; }

@media (max-width: 860px) {
  .services__wash-demo--title-wash .wash-demo__mist--13,
  .services__wash-demo--title-wash .wash-demo__mist--14,
  .services__wash-demo--title-wash .wash-demo__mist--15,
  .services__wash-demo--title-wash .wash-demo__mist--16 { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .services__wash-demo--title-wash::before,
  .services__wash-demo--title-wash::after,
  .services__wash-demo--title-wash .wash-demo__fan,
  .services__wash-demo--title-wash .wash-demo__mist {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================
   PRESSURE WASHING v11 — TRAVELING MIST FOLLOW PASS
   Goal: no light-beam look. The visible water is atomized mist
   that originates at the left and rides with the moving clean edge.
   ========================================================== */

/* Kill the remaining large fan shapes completely. The cleaning action
   is now communicated by source fog + traveling atomized mist only. */
.services__wash-demo--title-wash .wash-demo__fan,
.services.is-washing .services__wash-demo--title-wash .wash-demo__fan,
.services.is-lit .services__wash-demo--title-wash .wash-demo__fan {
  display: none !important;
  opacity: 0 !important;
  background: none !important;
  filter: none !important;
}

/* Reduce the stationary source cloud by roughly a third so it reads as
   the origin of the spray, not a giant fog bank sitting in the corner. */
.services__wash-demo--title-wash::before {
  top: 50px;
  left: 70px;
  width: 230px;
  height: 190px;
  background:
    radial-gradient(ellipse at 20% 50%, rgba(255,255,255,.62) 0 8%, transparent 27%),
    radial-gradient(ellipse at 34% 43%, rgba(242,255,255,.48) 0 15%, transparent 43%),
    radial-gradient(ellipse at 38% 61%, rgba(224,252,254,.30) 0 18%, transparent 48%),
    radial-gradient(ellipse at 58% 48%, rgba(215,249,251,.18) 0 21%, transparent 54%);
  filter: blur(19px) saturate(.60);
}

.services__wash-demo--title-wash::after {
  top: 68px;
  left: 164px;
  width: 330px;
  height: 170px;
  background:
    radial-gradient(ellipse at 14% 47%, rgba(255,255,255,.31) 0 14%, transparent 36%),
    radial-gradient(ellipse at 36% 57%, rgba(238,254,255,.22) 0 18%, transparent 45%),
    radial-gradient(ellipse at 61% 42%, rgba(220,250,252,.13) 0 20%, transparent 48%);
  filter: blur(20px);
  mask-image: linear-gradient(90deg, #000 0%, rgba(0,0,0,.72) 42%, rgba(0,0,0,.18) 78%, transparent 100%);
}

.services.is-washing .services__wash-demo--title-wash::before {
  animation: pwV11SourceMist 1.42s cubic-bezier(.20,.70,.24,1) both;
}

.services.is-washing .services__wash-demo--title-wash::after {
  animation: pwV11SourceTrail 1.66s cubic-bezier(.20,.70,.24,1) .04s both;
}

@keyframes pwV11SourceMist {
  0%, 5% { opacity: 0; transform: translateX(-10px) scale(.82); }
  18% { opacity: .54; }
  52% { opacity: .66; transform: translateX(5px) scale(1); }
  80% { opacity: .32; }
  100% { opacity: 0; transform: translateX(22px) scale(1.08); }
}

@keyframes pwV11SourceTrail {
  0%, 8% { opacity: 0; transform: translateX(-12px) scaleX(.68); }
  25% { opacity: .38; }
  62% { opacity: .48; transform: translateX(8px) scaleX(1); }
  100% { opacity: 0; transform: translateX(34px) scaleX(1.10); }
}

/* The cleaning front itself becomes a broad, soft wet edge instead of a
   neon vertical bar. It remains synced to the existing 2.20s clean pass. */
.services-v27__wash-edge {
  width: 72px;
  margin-left: -18px;
  background:
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,.92) 0 11%, rgba(237,255,255,.60) 23%, rgba(211,250,252,.26) 46%, transparent 72%),
    linear-gradient(90deg, transparent 0%, rgba(243,255,255,.28) 28%, rgba(255,255,255,.62) 50%, rgba(220,252,254,.24) 72%, transparent 100%);
  clip-path: none;
  border-radius: 50%;
  filter: blur(3.2px) drop-shadow(0 0 13px rgba(224,252,254,.30));
}

/* Dense atomized core that rides WITH the cleaning edge. */
.services-v27__wash-edge::before,
.services-v27__wash-edge::after {
  content: "";
  position: absolute;
  z-index: 7;
  left: 50%;
  top: 50%;
  pointer-events: none;
  border-radius: 50%;
  opacity: 0;
  transform: translate(-50%, -50%);
  will-change: opacity, transform;
}

.services-v27__wash-edge::before {
  width: 235px;
  height: 185px;
  background:
    radial-gradient(ellipse at 48% 50%, rgba(255,255,255,.68) 0 8%, transparent 24%),
    radial-gradient(ellipse at 34% 38%, rgba(246,255,255,.52) 0 13%, transparent 36%),
    radial-gradient(ellipse at 58% 62%, rgba(231,253,254,.42) 0 17%, transparent 43%),
    radial-gradient(ellipse at 72% 43%, rgba(218,250,252,.25) 0 18%, transparent 48%),
    radial-gradient(ellipse at 25% 68%, rgba(225,251,253,.23) 0 16%, transparent 46%);
  filter: blur(15px) saturate(.60);
}

.services-v27__wash-edge::after {
  width: 330px;
  height: 230px;
  background:
    radial-gradient(ellipse at 39% 49%, rgba(255,255,255,.36) 0 12%, transparent 36%),
    radial-gradient(ellipse at 58% 36%, rgba(240,254,255,.27) 0 15%, transparent 41%),
    radial-gradient(ellipse at 63% 67%, rgba(222,251,253,.22) 0 17%, transparent 45%),
    radial-gradient(ellipse at 79% 53%, rgba(211,248,251,.14) 0 18%, transparent 48%);
  filter: blur(22px);
}

.services.is-washing .services-v27__wash-edge::before {
  animation: pwV11TravelMistCore 2.20s cubic-bezier(.20,.72,.22,1) .22s both;
}

.services.is-washing .services-v27__wash-edge::after {
  animation: pwV11TravelMistHalo 2.20s cubic-bezier(.20,.72,.22,1) .22s both;
}

@keyframes pwV11TravelMistCore {
  0% { opacity: 0; transform: translate(-58%, -50%) scale(.62); }
  9% { opacity: .72; }
  32% { opacity: .88; transform: translate(-52%, -50%) scale(.92); }
  66% { opacity: .82; transform: translate(-48%, -50%) scale(1.03); }
  90% { opacity: .58; }
  100% { opacity: 0; transform: translate(-42%, -50%) scale(1.12); }
}

@keyframes pwV11TravelMistHalo {
  0% { opacity: 0; transform: translate(-60%, -50%) scale(.58); }
  12% { opacity: .40; }
  40% { opacity: .62; transform: translate(-51%, -50%) scale(.96); }
  74% { opacity: .52; }
  100% { opacity: 0; transform: translate(-40%, -50%) scale(1.18); }
}

/* Turn the standalone particles into synchronized overspray that follows
   the same left-to-right wash path instead of blinking in fixed positions. */
.services__wash-demo--title-wash .wash-demo__mist {
  width: 10px;
  height: 10px;
  background: radial-gradient(circle, rgba(255,255,255,.76) 0 12%, rgba(239,255,255,.42) 26%, rgba(218,250,252,.15) 48%, transparent 73%);
  box-shadow:
    14px 6px 0 -4px rgba(255,255,255,.36),
    27px -2px 0 -6px rgba(232,253,254,.30),
    41px 10px 0 -7px rgba(218,250,252,.22);
  filter: blur(1.7px);
}

.services__wash-demo--title-wash .wash-demo__mist::before {
  width: 50px;
  height: 30px;
  left: -12px;
  top: -10px;
  background: radial-gradient(ellipse, rgba(255,255,255,.35), rgba(224,251,253,.13) 52%, transparent 78%);
  filter: blur(10px);
  opacity: .72;
}

.services__wash-demo--title-wash .wash-demo__mist::after {
  width: 86px;
  height: 42px;
  left: -20px;
  top: -12px;
  background: radial-gradient(ellipse, rgba(244,255,255,.25), rgba(216,249,251,.10) 52%, transparent 80%);
  filter: blur(15px);
  opacity: .66;
}

/* Start nearly all overspray close to the left origin. Vertical variation
   creates the turbulent pressure-washer fan without forming a beam. */
.services__wash-demo--title-wash .wash-demo__mist--1  { top: 58px;  left: 116px; }
.services__wash-demo--title-wash .wash-demo__mist--2  { top: 116px; left: 126px; }
.services__wash-demo--title-wash .wash-demo__mist--3  { top: 36px;  left: 142px; }
.services__wash-demo--title-wash .wash-demo__mist--4  { top: 166px; left: 150px; }
.services__wash-demo--title-wash .wash-demo__mist--5  { top: 82px;  left: 166px; }
.services__wash-demo--title-wash .wash-demo__mist--6  { top: 132px; left: 176px; }
.services__wash-demo--title-wash .wash-demo__mist--7  { top: 48px;  left: 188px; }
.services__wash-demo--title-wash .wash-demo__mist--8  { top: 178px; left: 198px; }
.services__wash-demo--title-wash .wash-demo__mist--9  { top: 100px; left: 208px; }
.services__wash-demo--title-wash .wash-demo__mist--10 { top: 65px;  left: 220px; }
.services__wash-demo--title-wash .wash-demo__mist--11 { top: 145px; left: 230px; }
.services__wash-demo--title-wash .wash-demo__mist--12 { top: 28px;  left: 240px; }
.services__wash-demo--title-wash .wash-demo__mist--13 { top: 122px; left: 252px; }
.services__wash-demo--title-wash .wash-demo__mist--14 { top: 74px;  left: 264px; }
.services__wash-demo--title-wash .wash-demo__mist--15 { top: 160px; left: 276px; }
.services__wash-demo--title-wash .wash-demo__mist--16 { top: 44px;  left: 286px; }

.services.is-washing .services__wash-demo--title-wash .wash-demo__mist {
  animation: pwV11MistSweep 2.20s cubic-bezier(.20,.72,.22,1) .22s both;
}

.services.is-washing .services__wash-demo--title-wash .wash-demo__mist:nth-of-type(2n) {
  animation-delay: .27s;
}

.services.is-washing .services__wash-demo--title-wash .wash-demo__mist:nth-of-type(3n) {
  animation-delay: .32s;
}

@keyframes pwV11MistSweep {
  0% { opacity: 0; transform: translate3d(0,0,0) scale(.50); }
  9% { opacity: .54; }
  28% { opacity: .76; transform: translate3d(180px,-7px,0) scale(.82); }
  55% { opacity: .82; transform: translate3d(390px,8px,0) scale(1.02); }
  78% { opacity: .58; transform: translate3d(585px,-5px,0) scale(1.12); }
  100% { opacity: 0; transform: translate3d(760px,14px,0) scale(1.22); }
}

.services.is-lit .services-v27__wash-edge::before,
.services.is-lit .services-v27__wash-edge::after,
.services.is-lit .services__wash-demo--title-wash .wash-demo__mist {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .services-v27__wash-edge::before,
  .services-v27__wash-edge::after,
  .services__wash-demo--title-wash .wash-demo__mist {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* ==========================================================
   PRESSURE WASHING v12 — MIST FRONT REBUILD
   The grime wipe remains intact. The visible "water" is now a
   dedicated irregular mist plume attached directly to the H1 wipe.
   No beam. No glowing oval. No fixed sparkle cloud.
   ========================================================== */

/* Retire every older temporary spray/mist layer from v10/v11.
   The permanent decorative bubbles remain untouched. */
.services__wash-demo--title-wash .wash-demo__fan,
.services__wash-demo--title-wash .wash-demo__mist,
.services__wash-demo--title-wash::before,
.services__wash-demo--title-wash::after,
.services-v27__wash-edge::before,
.services-v27__wash-edge::after {
  display: none !important;
  opacity: 0 !important;
  animation: none !important;
}

/* Keep the existing moving wash-edge as an invisible timing reference only. */
.services-v27__wash-edge {
  width: 2px !important;
  margin-left: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  border-radius: 0 !important;
  clip-path: none !important;
  opacity: 0 !important;
}

/* Main moving atomized-water front. Because this lives inside the H1 wrapper,
   its left-to-right movement exactly follows the dirty-stripe reveal area. */
.services-v27__mist-front {
  position: absolute;
  z-index: 5;
  top: -56px;
  left: -185px;
  width: 250px;
  height: calc(100% + 112px);
  pointer-events: none;
  opacity: 0;
  overflow: visible;
  will-change: left, opacity, transform;
}

/* Dense wet core: intentionally irregular, feathered and white rather than cyan. */
.services-v27__mist-front::before {
  position: absolute;
  inset: 8% -22% 5% -28%;
  content: "";
  border-radius: 46% 58% 50% 62% / 52% 44% 61% 49%;
  background:
    radial-gradient(ellipse at 31% 48%, rgba(255,255,255,.78) 0 8%, transparent 25%),
    radial-gradient(ellipse at 45% 27%, rgba(247,255,255,.58) 0 12%, transparent 36%),
    radial-gradient(ellipse at 51% 68%, rgba(238,253,254,.54) 0 15%, transparent 41%),
    radial-gradient(ellipse at 67% 43%, rgba(231,252,253,.40) 0 14%, transparent 42%),
    radial-gradient(ellipse at 22% 72%, rgba(245,255,255,.34) 0 14%, transparent 40%),
    radial-gradient(ellipse at 78% 69%, rgba(220,248,250,.24) 0 16%, transparent 45%);
  filter: blur(11px) saturate(.55);
  transform: rotate(-2deg);
}

/* Broader overspray halo trails both ahead of and behind the dense core. */
.services-v27__mist-front::after {
  position: absolute;
  inset: -12% -62% -13% -50%;
  content: "";
  border-radius: 55% 46% 61% 44% / 48% 58% 43% 62%;
  background:
    radial-gradient(ellipse at 31% 45%, rgba(255,255,255,.34) 0 10%, transparent 34%),
    radial-gradient(ellipse at 43% 68%, rgba(238,253,254,.27) 0 15%, transparent 42%),
    radial-gradient(ellipse at 60% 34%, rgba(230,251,252,.23) 0 16%, transparent 44%),
    radial-gradient(ellipse at 74% 58%, rgba(219,248,250,.17) 0 18%, transparent 47%),
    radial-gradient(ellipse at 19% 71%, rgba(246,255,255,.18) 0 14%, transparent 42%);
  filter: blur(21px);
  transform: rotate(2deg);
}

/* Fine atomized droplets. These are deliberately tiny/soft so they read as
   overspray rather than glowing stars or bubbles. */
.mist-front__particle {
  position: absolute;
  z-index: 7;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  opacity: 0;
  background: rgba(255,255,255,.72);
  box-shadow:
    11px 6px 0 -1px rgba(240,255,255,.48),
    22px -4px 0 -1px rgba(224,250,252,.34),
    34px 8px 0 -1px rgba(245,255,255,.30),
    47px 1px 0 -1px rgba(218,248,250,.24);
  filter: blur(.55px);
}

.mist-front__particle--1  { left: 30px;  top: 22%; }
.mist-front__particle--2  { left: 72px;  top: 35%; }
.mist-front__particle--3  { left: 108px; top: 18%; }
.mist-front__particle--4  { left: 136px; top: 48%; }
.mist-front__particle--5  { left: 56px;  top: 67%; }
.mist-front__particle--6  { left: 164px; top: 71%; }
.mist-front__particle--7  { left: 194px; top: 31%; }
.mist-front__particle--8  { left: 214px; top: 59%; }
.mist-front__particle--9  { left: 118px; top: 82%; }
.mist-front__particle--10 { left: 18px;  top: 51%; }

/* Same 2.20s + .22s timing as the grime wipe. This is the critical sync. */
.services.is-washing .services-v27__mist-front {
  animation: pwV12MistFrontTravel 2.20s cubic-bezier(.20,.72,.22,1) .22s both;
}

.services.is-washing .mist-front__particle {
  animation: pwV12AtomizedParticle 640ms ease-out infinite;
}

.services.is-washing .mist-front__particle:nth-child(2n) {
  animation-delay: .14s;
}

.services.is-washing .mist-front__particle:nth-child(3n) {
  animation-delay: .27s;
}

@keyframes pwV12MistFrontTravel {
  0% {
    left: -185px;
    opacity: 0;
    transform: translateX(-18px) scale(.72) rotate(-1.5deg);
  }
  8% {
    opacity: .82;
  }
  20% {
    opacity: .96;
    transform: translateX(0) scale(.94) rotate(-.5deg);
  }
  50% {
    opacity: 1;
    transform: translateX(0) scale(1.04) rotate(.5deg);
  }
  82% {
    opacity: .92;
    transform: translateX(0) scale(1.00) rotate(-.4deg);
  }
  100% {
    left: calc(100% + 72px);
    opacity: 0;
    transform: translateX(18px) scale(1.08) rotate(1deg);
  }
}

@keyframes pwV12AtomizedParticle {
  0% {
    opacity: 0;
    transform: translate3d(-6px,3px,0) scale(.68);
  }
  20% {
    opacity: .72;
  }
  58% {
    opacity: .52;
  }
  100% {
    opacity: 0;
    transform: translate3d(46px,-11px,0) scale(1.12);
  }
}

/* Tiny source puff at the actual left edge, then it disappears as the moving
   mist front takes over. This gives the spray a believable origin. */
.services.is-washing .services__wash-demo--title-wash {
  background:
    radial-gradient(ellipse at 7% 50%, rgba(255,255,255,.15) 0 5%, rgba(237,253,254,.08) 12%, transparent 25%);
  animation: pwV12SourcePuff 720ms ease-out .20s both;
}

@keyframes pwV12SourcePuff {
  0% { background-size: 42% 72%; background-position: left center; opacity: 1; }
  55% { background-size: 58% 90%; background-position: left center; opacity: 1; }
  100% { background-size: 70% 100%; background-position: left center; opacity: 1; }
}

.services.is-lit .services-v27__mist-front,
.services.is-lit .mist-front__particle {
  opacity: 0;
}

@media (max-width: 860px) {
  .services-v27__mist-front {
    width: 210px;
    left: -150px;
    top: -48px;
    height: calc(100% + 96px);
  }

  @keyframes pwV12MistFrontTravel {
    0% { left: -150px; opacity: 0; transform: translateX(-12px) scale(.72); }
    9% { opacity: .82; }
    24% { opacity: .95; transform: translateX(0) scale(.93); }
    52% { opacity: 1; transform: translateX(0) scale(1.01); }
    84% { opacity: .88; }
    100% { left: calc(100% + 54px); opacity: 0; transform: translateX(12px) scale(1.06); }
  }
}

@media (max-width: 560px) {
  .services-v27__mist-front {
    width: 178px;
    left: -130px;
    top: -40px;
    height: calc(100% + 80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-v27__mist-front,
  .mist-front__particle {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v13 — REFINED TRAVELING MIST FRONT
   Reduction pass:
   - no large white bloom
   - no rectangular source haze
   - narrower translucent wet core
   - feathered wispy mist ahead/behind the cleaning boundary
   - tiny atomized droplets trail with the moving front
   ========================================================== */

/* v12's full demo background created the rectangular haze.
   Remove it completely; the moving mist front is now the only wash atmosphere. */
.services.is-washing .services__wash-demo--title-wash,
.services__wash-demo--title-wash {
  background: none !important;
  animation: none !important;
}

/* The moving mist assembly is deliberately narrower and less opaque.
   It remains synchronized to the same 2.20s grime wipe. */
.services-v27__mist-front {
  top: -38px !important;
  left: -126px !important;
  width: 168px !important;
  height: calc(100% + 76px) !important;
  opacity: 0;
  filter: none !important;
}

/* Dense wet core:
   small, translucent and irregular — never a solid white oval. */
.services-v27__mist-front::before {
  inset: 10% -6% 9% -10% !important;
  border-radius: 0 !important;
  opacity: .72;
  background:
    radial-gradient(ellipse at 40% 23%, rgba(255,255,255,.34) 0 7%, rgba(242,254,255,.16) 15%, transparent 31%),
    radial-gradient(ellipse at 34% 48%, rgba(250,255,255,.46) 0 8%, rgba(228,250,252,.20) 18%, transparent 38%),
    radial-gradient(ellipse at 52% 68%, rgba(242,254,255,.32) 0 10%, rgba(220,247,250,.14) 21%, transparent 41%),
    radial-gradient(ellipse at 65% 39%, rgba(235,252,253,.24) 0 9%, transparent 34%),
    radial-gradient(ellipse at 72% 75%, rgba(226,249,251,.18) 0 8%, transparent 31%) !important;
  filter: blur(8px) !important;
  transform: rotate(-1deg) !important;
}

/* Broad feathered overspray:
   asymmetric wisps, mostly transparent, extending behind the wet core. */
.services-v27__mist-front::after {
  inset: -2% -38% -5% -62% !important;
  border-radius: 0 !important;
  opacity: .62;
  background:
    radial-gradient(ellipse at 24% 32%, rgba(250,255,255,.18) 0 8%, transparent 29%),
    radial-gradient(ellipse at 35% 58%, rgba(235,252,253,.22) 0 10%, transparent 34%),
    radial-gradient(ellipse at 48% 20%, rgba(246,255,255,.12) 0 8%, transparent 27%),
    radial-gradient(ellipse at 55% 76%, rgba(222,248,250,.16) 0 12%, transparent 36%),
    radial-gradient(ellipse at 68% 43%, rgba(232,251,252,.14) 0 11%, transparent 35%),
    radial-gradient(ellipse at 82% 63%, rgba(214,246,249,.10) 0 9%, transparent 31%) !important;
  filter: blur(13px) !important;
  transform: rotate(1deg) !important;
}

/* Fine atomized droplets:
   lower brightness, no star-like glow, and slightly elongated motion blur. */
.mist-front__particle {
  width: 2px !important;
  height: 2px !important;
  background: rgba(248,255,255,.50) !important;
  box-shadow:
    8px 4px 0 -1px rgba(238,253,254,.28),
    17px -3px 0 -1px rgba(225,250,252,.22),
    28px 6px 0 -1px rgba(242,255,255,.18) !important;
  filter: blur(.7px) !important;
}

/* Keep particles clustered around and behind the cleaning boundary instead
   of filling the entire H1 with sparkle-like dots. */
.mist-front__particle--1  { left: 14px !important; top: 18% !important; }
.mist-front__particle--2  { left: 38px !important; top: 31% !important; }
.mist-front__particle--3  { left: 67px !important; top: 15% !important; }
.mist-front__particle--4  { left: 84px !important; top: 45% !important; }
.mist-front__particle--5  { left: 26px !important; top: 64% !important; }
.mist-front__particle--6  { left: 102px !important; top: 70% !important; }
.mist-front__particle--7  { left: 119px !important; top: 27% !important; }
.mist-front__particle--8  { left: 133px !important; top: 57% !important; }
.mist-front__particle--9  { left: 72px !important; top: 81% !important; }
.mist-front__particle--10 { left: 4px !important;  top: 48% !important; }

/* Same timing as grime wipe, with a less aggressive scale.
   This keeps the plume attached to the exact cleaning boundary. */
.services.is-washing .services-v27__mist-front {
  animation: pwV13MistFrontTravel 2.20s cubic-bezier(.20,.72,.22,1) .22s both !important;
}

.services.is-washing .mist-front__particle {
  animation: pwV13AtomizedParticle 720ms ease-out infinite !important;
}

.services.is-washing .mist-front__particle:nth-child(2n) {
  animation-delay: .11s !important;
}

.services.is-washing .mist-front__particle:nth-child(3n) {
  animation-delay: .23s !important;
}

@keyframes pwV13MistFrontTravel {
  0% {
    left: -126px;
    opacity: 0;
    transform: translateX(-8px) scale(.84) rotate(-.7deg);
  }
  9% {
    opacity: .54;
  }
  22% {
    opacity: .76;
    transform: translateX(0) scale(.96) rotate(-.2deg);
  }
  52% {
    opacity: .82;
    transform: translateX(0) scale(1) rotate(.25deg);
  }
  82% {
    opacity: .72;
    transform: translateX(0) scale(.98) rotate(-.15deg);
  }
  100% {
    left: calc(100% + 48px);
    opacity: 0;
    transform: translateX(10px) scale(1.02) rotate(.5deg);
  }
}

@keyframes pwV13AtomizedParticle {
  0% {
    opacity: 0;
    transform: translate3d(-5px, 2px, 0) scale(.62);
  }
  18% {
    opacity: .48;
  }
  52% {
    opacity: .36;
  }
  100% {
    opacity: 0;
    transform: translate3d(34px, -8px, 0) scale(1);
  }
}

/* The actual wash edge remains invisible. The plume itself is the visual
   cleaning front, eliminating the vertical glowing-bar effect. */
.services-v27__wash-edge {
  width: 1px !important;
  background: transparent !important;
  opacity: 0 !important;
}

/* Keep v12 front hidden once the clean state is reached. */
.services.is-lit .services-v27__mist-front,
.services.is-lit .mist-front__particle {
  opacity: 0 !important;
}

@media (max-width: 860px) {
  .services-v27__mist-front {
    top: -32px !important;
    left: -102px !important;
    width: 142px !important;
    height: calc(100% + 64px) !important;
  }

  @keyframes pwV13MistFrontTravel {
    0% { left: -102px; opacity: 0; transform: translateX(-6px) scale(.84); }
    10% { opacity: .52; }
    25% { opacity: .74; transform: translateX(0) scale(.95); }
    53% { opacity: .80; transform: translateX(0) scale(1); }
    84% { opacity: .68; }
    100% { left: calc(100% + 38px); opacity: 0; transform: translateX(8px) scale(1.02); }
  }
}

@media (max-width: 560px) {
  .services-v27__mist-front {
    top: -27px !important;
    left: -88px !important;
    width: 124px !important;
    height: calc(100% + 54px) !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-v27__mist-front,
  .mist-front__particle {
    animation: none !important;
    opacity: 0 !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v14 — SQUEEGEE H1 WIPE
   Final concept reset:
   - all temporary spray/mist systems disabled
   - 8 ambient bubbles remain in the upper-left
   - professional squeegee physically wipes grime off the H1
   - suds/bubbles collect at the leading edge
   ========================================================== */

/* ----------------------------------------------------------
   REMOVE ALL ABANDONED SPRAY / MIST EXPERIMENTS
   ---------------------------------------------------------- */

.services__wash-demo--title-wash::before,
.services__wash-demo--title-wash::after,
.wash-demo__fan,
.wash-demo__mist,
.services-v27__wash-edge,
.services-v27__mist-front,
.mist-front__particle {
  display: none !important;
  animation: none !important;
}

/* The top-left visual is now intentionally bubbles only. */
.services__wash-demo--title-wash {
  z-index: 6;
  top: 38px;
  left: max(-24px, calc((100vw - var(--container)) / 2 - 128px));
  width: 620px;
  height: 250px;
  background: none !important;
  filter: none !important;
  animation: none !important;
  transform: none;
}

/* Spread the existing bubbles around the upper-left rather than
   allowing them to cluster around the old spray path. */
.services__wash-demo--title-wash .wash-demo__bubble--1 {
  left: 72px;
}
.services__wash-demo--title-wash .wash-demo__bubble--2 {
  left: 148px;
}
.services__wash-demo--title-wash .wash-demo__bubble--3 {
  left: 224px;
}
.services__wash-demo--title-wash .wash-demo__bubble--4 {
  left: 302px;
}
.services__wash-demo--title-wash .wash-demo__bubble--5 {
  left: 382px;
}
.services__wash-demo--title-wash .wash-demo__bubble--6 {
  left: 462px;
}
.services__wash-demo--title-wash .wash-demo__bubble--7 {
  left: 188px;
}
.services__wash-demo--title-wash .wash-demo__bubble--8 {
  left: 344px;
}

/* ----------------------------------------------------------
   SQUEEGEE
   ---------------------------------------------------------- */

.services-v27__squeegee {
  position: absolute;
  z-index: 8;
  top: -41px;
  left: -112px;
  width: 128px;
  height: calc(100% + 82px);
  opacity: 0;
  pointer-events: none;
  transform: rotate(-4deg);
  transform-origin: 50% 50%;
  filter: drop-shadow(0 11px 16px rgba(0,0,0,.22));
  will-change: left, transform, opacity;
}

/* Long professional handle angled back toward the upper-left. */
.squeegee__handle {
  position: absolute;
  z-index: 1;
  top: 50%;
  right: 49px;
  width: 156px;
  height: 18px;
  border: 1px solid rgba(255,255,255,.20);
  border-radius: 999px 5px 5px 999px;
  background:
    linear-gradient(
      180deg,
      #53616c 0%,
      #313d46 27%,
      #101820 67%,
      #3b4852 100%
    );
  box-shadow:
    inset 0 3px 3px rgba(255,255,255,.09),
    0 5px 12px rgba(0,0,0,.22);
  transform: translateY(-50%) rotate(-27deg);
  transform-origin: right center;
}

/* Aqua grip so it still belongs to the pressure-washing brand. */
.squeegee__handle::before {
  position: absolute;
  top: 2px;
  left: 13px;
  width: 54px;
  height: 12px;
  content: "";
  border-radius: 999px;
  background:
    repeating-linear-gradient(
      90deg,
      rgba(var(--water-core-rgb),.18) 0 4px,
      transparent 4px 8px
    ),
    linear-gradient(
      180deg,
      rgba(var(--water-rgb),.82),
      rgba(var(--water-deep-rgb),.76)
    );
}

/* Handle-to-blade joint. */
.squeegee__neck {
  position: absolute;
  z-index: 3;
  top: calc(50% - 22px);
  left: 42px;
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background:
    linear-gradient(
      135deg,
      #687681,
      #28343d 56%,
      #10171d
    );
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.12),
    0 4px 8px rgba(0,0,0,.24);
}

/* The metal channel is VERTICAL because the tool is traveling left -> right.
   This makes the physical blade edge match the grime reveal boundary. */
.squeegee__channel {
  position: absolute;
  z-index: 4;
  top: 2px;
  left: 58px;
  width: 28px;
  height: calc(100% - 4px);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: 8px;
  background:
    linear-gradient(
      90deg,
      #9da9b1 0%,
      #5d6a74 20%,
      #202a32 56%,
      #77858f 84%,
      #a3afb7 100%
    );
  box-shadow:
    inset 2px 0 2px rgba(255,255,255,.16),
    4px 8px 14px rgba(0,0,0,.20);
}

/* Dark rubber wiping edge = exact visual cleaning boundary. */
.squeegee__rubber {
  position: absolute;
  z-index: 6;
  top: 4px;
  left: 82px;
  width: 13px;
  height: calc(100% - 8px);
  border-radius: 2px 7px 7px 2px;
  background:
    linear-gradient(
      90deg,
      #222d35,
      #080e13 58%,
      #1f2a31
    );
  box-shadow:
    4px 0 6px rgba(0,0,0,.20);
}

/* ----------------------------------------------------------
   SOAP SUDS / SMALL BUBBLE BUILDUP
   Collect immediately ahead of the rubber blade.
   ---------------------------------------------------------- */

.squeegee__suds {
  position: absolute;
  z-index: 7;
  left: 91px;
  width: 13px;
  height: 13px;
  border: 1.4px solid rgba(var(--water-core-rgb),.88);
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(
      circle at 30% 27%,
      rgba(255,255,255,.82) 0 10%,
      rgba(var(--water-core-rgb),.20) 18%,
      rgba(var(--water-rgb),.08) 52%,
      transparent 72%
    );
  box-shadow:
    inset -2px -2px 3px rgba(var(--water-rgb),.10),
    0 0 5px rgba(var(--water-rgb),.15);
}

.squeegee__suds::after {
  position: absolute;
  top: 21%;
  left: 22%;
  width: 26%;
  height: 21%;
  content: "";
  border-radius: 50%;
  background: rgba(255,255,255,.78);
}

.squeegee__suds--1 {
  top: 7%;
  width: 10px;
  height: 10px;
}
.squeegee__suds--2 {
  top: 22%;
  left: 97px;
  width: 16px;
  height: 16px;
}
.squeegee__suds--3 {
  top: 39%;
  width: 11px;
  height: 11px;
}
.squeegee__suds--4 {
  top: 57%;
  left: 99px;
  width: 17px;
  height: 17px;
}
.squeegee__suds--5 {
  top: 73%;
  width: 12px;
  height: 12px;
}
.squeegee__suds--6 {
  top: 88%;
  left: 96px;
  width: 9px;
  height: 9px;
}

/* ----------------------------------------------------------
   WIPE MOTION
   Match the EXISTING 2.20s grime-clean timing precisely.
   ---------------------------------------------------------- */

.services.is-washing .services-v27__squeegee {
  animation:
    pwSqueegeeWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s both;
}

.services.is-washing .squeegee__suds {
  animation:
    pwSqueegeeSud 620ms ease-out infinite;
}

.services.is-washing .squeegee__suds--2,
.services.is-washing .squeegee__suds--5 {
  animation-delay: .12s;
}

.services.is-washing .squeegee__suds--3,
.services.is-washing .squeegee__suds--6 {
  animation-delay: .25s;
}

@keyframes pwSqueegeeWipe {
  0% {
    left: -112px;
    opacity: 0;
    transform: rotate(-5deg) translateX(-8px);
  }

  6% {
    opacity: 1;
  }

  16% {
    transform: rotate(-4deg) translateX(0);
  }

  52% {
    opacity: 1;
    transform: rotate(-2.5deg) translateX(0);
  }

  82% {
    opacity: 1;
    transform: rotate(-4.5deg) translateX(0);
  }

  100% {
    left: calc(100% + 52px);
    opacity: 0;
    transform: rotate(-3deg) translateX(12px);
  }
}

@keyframes pwSqueegeeSud {
  0% {
    opacity: 0;
    transform: translate3d(-4px,0,0) scale(.62);
  }

  20% {
    opacity: .84;
  }

  56% {
    opacity: .74;
  }

  100% {
    opacity: 0;
    transform: translate3d(20px,-8px,0) scale(1.08);
  }
}

/* Once clean, the tool is gone and only the ambient bubbles remain. */
.services.is-lit .services-v27__squeegee,
.services.is-lit .squeegee__suds {
  opacity: 0 !important;
}

/* ----------------------------------------------------------
   MOBILE
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .services__wash-demo--title-wash {
    top: 25px;
    left: -28px;
    width: 470px;
    height: 230px;
    transform: none;
  }

  .services-v27__squeegee {
    top: -31px;
    left: -86px;
    width: 104px;
    height: calc(100% + 62px);
    transform: rotate(-4deg) scale(.88);
  }

  .squeegee__handle {
    width: 125px;
    height: 16px;
    right: 38px;
  }

  .squeegee__channel {
    left: 48px;
    width: 24px;
  }

  .squeegee__rubber {
    left: 69px;
    width: 11px;
  }

  .squeegee__neck {
    left: 34px;
    width: 38px;
    height: 38px;
    top: calc(50% - 19px);
  }

  .squeegee__suds {
    left: 77px;
  }

  .squeegee__suds--2,
  .squeegee__suds--4,
  .squeegee__suds--6 {
    left: 83px;
  }

  @keyframes pwSqueegeeWipe {
    0% {
      left: -86px;
      opacity: 0;
      transform: rotate(-5deg) scale(.88) translateX(-6px);
    }
    7% {
      opacity: 1;
    }
    50% {
      opacity: 1;
      transform: rotate(-3deg) scale(.88);
    }
    84% {
      opacity: 1;
    }
    100% {
      left: calc(100% + 40px);
      opacity: 0;
      transform: rotate(-3deg) scale(.88) translateX(8px);
    }
  }
}

@media (max-width: 560px) {
  .services__wash-demo--title-wash {
    top: 18px;
    left: -22px;
    width: 380px;
  }

  .services-v27__squeegee {
    top: -26px;
    height: calc(100% + 52px);
  }
}

/* Reduced-motion: finish clean with no moving tool. */
@media (prefers-reduced-motion: reduce) {
  .services-v27__squeegee,
  .squeegee__suds {
    animation: none !important;
    opacity: 0 !important;
  }
}


/* ==========================================================
   PRESSURE WASHING v15 — BUBBLE / GRIME REVEAL RESET
   Goal:
   - remove squeegee entirely
   - make the H1 dirtier / grimier
   - keep a clean left-to-right reveal
   - add a prominent continuous bubble presence in the upper-left
   - tons of bubbles, no beam, no tool silhouette
   ========================================================== */

/* hard-disable all previous spray / squeegee experiment visuals */
.services__wash-demo--title-wash::before,
.services__wash-demo--title-wash::after,
.wash-demo__fan,
.wash-demo__mist,
.services-v27__squeegee,
.squeegee__handle,
.squeegee__neck,
.squeegee__channel,
.squeegee__rubber,
.squeegee__suds {
  display: none !important;
  animation: none !important;
}

/* upper-left continuous bubble cluster */
.services__wash-demo--title-wash {
  position: absolute;
  z-index: 6;
  top: 30px;
  left: max(-18px, calc((100vw - var(--container)) / 2 - 86px));
  width: 520px;
  height: 245px;
  pointer-events: none;
  background: none !important;
  filter: none !important;
  transform: none !important;
  overflow: visible;
}

.wash-demo__corner-glow {
  position: absolute;
  top: 16px;
  left: 54px;
  width: 112px;
  height: 112px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 34% 32%, rgba(255,255,255,.98) 0 7%, rgba(var(--water-core-rgb),.92) 10%, rgba(var(--water-rgb),.58) 25%, rgba(var(--water-deep-rgb),.22) 48%, transparent 72%),
    radial-gradient(circle at 50% 50%, rgba(var(--water-rgb),.18), transparent 70%);
  filter: blur(2px) drop-shadow(0 0 16px rgba(var(--water-rgb),.60)) drop-shadow(0 0 36px rgba(var(--water-rgb),.34));
  animation: pwCornerPulse 4.6s ease-in-out infinite;
}

.wash-demo__corner-bubble,
.wash-demo__bubble,
.foam-edge__bubble {
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle at 31% 28%, rgba(255,255,255,.95) 0 10%, rgba(var(--water-core-rgb),.22) 20%, rgba(var(--water-rgb),.09) 52%, transparent 70%);
  border: 1.4px solid rgba(var(--water-core-rgb),.78);
  box-shadow: inset -2px -2px 3px rgba(var(--water-rgb),.10), 0 0 10px rgba(var(--water-rgb),.18);
  opacity: 0;
}

.wash-demo__corner-bubble::after,
.wash-demo__bubble::after,
.foam-edge__bubble::after {
  position: absolute;
  top: 20%;
  left: 24%;
  width: 26%;
  height: 20%;
  border-radius: 50%;
  background: rgba(255,255,255,.78);
  content: "";
}

.wash-demo__corner-bubble--1 { top: 10px; left: 35px; width: 17px; height: 17px; animation: pwBubbleFloatA 3.7s ease-in-out infinite; }
.wash-demo__corner-bubble--2 { top: 44px; left: 18px; width: 11px; height: 11px; animation: pwBubbleFloatB 4.3s ease-in-out .3s infinite; }
.wash-demo__corner-bubble--3 { top: 82px; left: 44px; width: 13px; height: 13px; animation: pwBubbleFloatA 4.8s ease-in-out .8s infinite; }
.wash-demo__corner-bubble--4 { top: 22px; left: 136px; width: 12px; height: 12px; animation: pwBubbleFloatC 4.1s ease-in-out .5s infinite; }
.wash-demo__corner-bubble--5 { top: 62px; left: 149px; width: 18px; height: 18px; animation: pwBubbleFloatB 5s ease-in-out 1s infinite; }
.wash-demo__corner-bubble--6 { top: 108px; left: 110px; width: 10px; height: 10px; animation: pwBubbleFloatC 4.5s ease-in-out .2s infinite; }

/* 14 ambient bubbles spread outward from the top-left corner */
.wash-demo__bubble--1  { top: 34px; left: 192px; width: 8px;  height: 8px;  animation: pwBubbleDrift1 6.2s linear 0s infinite; }
.wash-demo__bubble--2  { top: 73px; left: 208px; width: 14px; height: 14px; animation: pwBubbleDrift2 7.1s linear .4s infinite; }
.wash-demo__bubble--3  { top: 122px; left: 174px; width: 10px; height: 10px; animation: pwBubbleDrift1 7.8s linear .8s infinite; }
.wash-demo__bubble--4  { top: 46px; left: 256px; width: 9px;  height: 9px;  animation: pwBubbleDrift3 6.6s linear 1.1s infinite; }
.wash-demo__bubble--5  { top: 98px; left: 284px; width: 16px; height: 16px; animation: pwBubbleDrift2 8.2s linear .9s infinite; }
.wash-demo__bubble--6  { top: 152px; left: 246px; width: 11px; height: 11px; animation: pwBubbleDrift1 7s linear 1.4s infinite; }
.wash-demo__bubble--7  { top: 58px; left: 324px; width: 7px;  height: 7px;  animation: pwBubbleDrift3 6.1s linear .2s infinite; }
.wash-demo__bubble--8  { top: 126px; left: 334px; width: 13px; height: 13px; animation: pwBubbleDrift2 7.6s linear 1.3s infinite; }
.wash-demo__bubble--9  { top: 28px; left: 374px; width: 6px;  height: 6px;  animation: pwBubbleDrift1 5.8s linear .6s infinite; }
.wash-demo__bubble--10 { top: 88px; left: 394px; width: 12px; height: 12px; animation: pwBubbleDrift3 7.9s linear 1.5s infinite; }
.wash-demo__bubble--11 { top: 162px; left: 392px; width: 9px;  height: 9px;  animation: pwBubbleDrift2 6.9s linear .7s infinite; }
.wash-demo__bubble--12 { top: 48px; left: 450px; width: 10px; height: 10px; animation: pwBubbleDrift1 7.4s linear 1.8s infinite; }
.wash-demo__bubble--13 { top: 112px; left: 468px; width: 7px;  height: 7px;  animation: pwBubbleDrift3 6.3s linear .1s infinite; }
.wash-demo__bubble--14 { top: 182px; left: 442px; width: 13px; height: 13px; animation: pwBubbleDrift2 8.1s linear 1.2s infinite; }

.services.is-washing .wash-demo__corner-bubble,
.services.is-washing .wash-demo__bubble,
.services.is-lit .wash-demo__corner-bubble,
.services.is-lit .wash-demo__bubble,
.wash-demo__corner-bubble,
.wash-demo__bubble {
  opacity: .92;
}

@keyframes pwCornerPulse {
  0%,100% { transform: scale(1); opacity: .94; }
  50% { transform: scale(1.06); opacity: 1; }
}
@keyframes pwBubbleFloatA {
  0%,100% { transform: translate(0,0) scale(.95); opacity: .84; }
  45% { transform: translate(8px,-12px) scale(1.07); opacity: 1; }
  75% { transform: translate(2px,-19px) scale(1.02); opacity: .9; }
}
@keyframes pwBubbleFloatB {
  0%,100% { transform: translate(0,0) scale(.92); opacity: .78; }
  40% { transform: translate(-5px,-10px) scale(1.02); opacity: .98; }
  80% { transform: translate(4px,-18px) scale(1.08); opacity: .88; }
}
@keyframes pwBubbleFloatC {
  0%,100% { transform: translate(0,0) scale(.9); opacity: .82; }
  50% { transform: translate(6px,-14px) scale(1.06); opacity: 1; }
}
@keyframes pwBubbleDrift1 {
  0% { transform: translate3d(0,8px,0) scale(.85); opacity: 0; }
  15%,70% { opacity: .82; }
  100% { transform: translate3d(20px,-18px,0) scale(1.15); opacity: 0; }
}
@keyframes pwBubbleDrift2 {
  0% { transform: translate3d(0,10px,0) scale(.85); opacity: 0; }
  16%,72% { opacity: .88; }
  100% { transform: translate3d(16px,-22px,0) scale(1.12); opacity: 0; }
}
@keyframes pwBubbleDrift3 {
  0% { transform: translate3d(0,6px,0) scale(.85); opacity: 0; }
  20%,76% { opacity: .78; }
  100% { transform: translate3d(12px,-16px,0) scale(1.1); opacity: 0; }
}

/* make the H1 grime heavier, chunkier, and nastier */
.services-v27__dirty-stripe {
  z-index: 3;
  top: -18px;
  left: -46px;
  width: calc(100% + 92px);
  height: calc(100% + 36px);
  opacity: .985;
  background:
    radial-gradient(circle at 8% 24%, rgba(98,80,44,.94) 0 5%, transparent 7%),
    radial-gradient(circle at 16% 70%, rgba(55,72,42,.96) 0 6%, transparent 8%),
    radial-gradient(circle at 28% 30%, rgba(106,87,49,.96) 0 5%, transparent 7%),
    radial-gradient(circle at 36% 62%, rgba(59,79,46,.95) 0 7%, transparent 9%),
    radial-gradient(circle at 48% 24%, rgba(115,92,51,.96) 0 6%, transparent 8%),
    radial-gradient(circle at 58% 74%, rgba(52,73,43,.98) 0 7%, transparent 9%),
    radial-gradient(circle at 69% 33%, rgba(104,84,48,.97) 0 5%, transparent 7%),
    radial-gradient(circle at 81% 69%, rgba(52,72,45,.96) 0 7%, transparent 9%),
    radial-gradient(circle at 92% 26%, rgba(98,80,47,.97) 0 5%, transparent 7%),
    radial-gradient(ellipse at 22% 48%, rgba(38,50,29,.30) 0 11%, transparent 22%),
    radial-gradient(ellipse at 61% 44%, rgba(49,64,37,.32) 0 13%, transparent 24%),
    repeating-linear-gradient(8deg, rgba(28,37,28,.10) 0 10px, rgba(19,26,21,.22) 10px 12px, rgba(81,67,42,.12) 12px 18px),
    linear-gradient(99deg, #716447 0%, #495a3f 27%, #6c5f43 52%, #42533d 75%, #64573f 100%);
  box-shadow:
    inset 0 0 26px rgba(19,27,22,.38),
    inset 0 -7px 12px rgba(0,0,0,.10),
    0 9px 18px rgba(0,0,0,.14);
  clip-path: polygon(0 11%, 7% 6%, 17% 10%, 29% 5%, 42% 9%, 55% 4%, 68% 10%, 82% 6%, 100% 12%, 100% 89%, 90% 94%, 75% 90%, 58% 96%, 41% 91%, 25% 95%, 11% 90%, 0 94%);
}

.services-v27__dirty-stripe::after {
  inset: 0;
  opacity: .68;
  background:
    radial-gradient(circle at 14% 39%, rgba(34,49,29,.62) 0 4px, transparent 6px),
    radial-gradient(circle at 21% 58%, rgba(73,61,37,.52) 0 3px, transparent 5px),
    radial-gradient(circle at 39% 32%, rgba(33,45,29,.58) 0 4px, transparent 6px),
    radial-gradient(circle at 52% 65%, rgba(73,61,39,.50) 0 4px, transparent 6px),
    radial-gradient(circle at 67% 46%, rgba(31,45,28,.58) 0 4px, transparent 6px),
    radial-gradient(circle at 84% 27%, rgba(69,58,36,.50) 0 4px, transparent 6px),
    repeating-linear-gradient(8deg, transparent 0 12px, rgba(22,32,25,.18) 12px 14px, transparent 14px 24px);
}

/* clean reveal boundary = wet foamy edge, not a beam or a tool */
.services-v27__foam-edge {
  position: absolute;
  z-index: 4;
  top: -21px;
  left: -36px;
  width: 60px;
  height: calc(100% + 42px);
  opacity: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse at 30% 12%, rgba(255,255,255,.92) 0 20%, rgba(var(--water-core-rgb),.56) 26%, transparent 52%),
    radial-gradient(ellipse at 58% 30%, rgba(255,255,255,.88) 0 18%, rgba(var(--water-core-rgb),.44) 26%, transparent 52%),
    radial-gradient(ellipse at 34% 56%, rgba(255,255,255,.88) 0 18%, rgba(var(--water-core-rgb),.44) 26%, transparent 52%),
    radial-gradient(ellipse at 61% 75%, rgba(255,255,255,.92) 0 18%, rgba(var(--water-core-rgb),.50) 27%, transparent 52%),
    linear-gradient(90deg, rgba(255,255,255,.14), rgba(255,255,255,.95) 30%, rgba(var(--water-core-rgb),.94) 58%, rgba(var(--water-rgb),.40) 76%, transparent 100%);
  filter: blur(.2px) drop-shadow(0 0 11px rgba(var(--water-rgb),.32));
}

.foam-edge__bubble--1 { top: 8%;  left: 27px; width: 8px;  height: 8px; }
.foam-edge__bubble--2 { top: 19%; left: 32px; width: 14px; height: 14px; }
.foam-edge__bubble--3 { top: 31%; left: 24px; width: 10px; height: 10px; }
.foam-edge__bubble--4 { top: 46%; left: 34px; width: 16px; height: 16px; }
.foam-edge__bubble--5 { top: 59%; left: 26px; width: 11px; height: 11px; }
.foam-edge__bubble--6 { top: 72%; left: 31px; width: 13px; height: 13px; }
.foam-edge__bubble--7 { top: 84%; left: 22px; width: 9px;  height: 9px; }
.foam-edge__bubble--8 { top: 92%; left: 29px; width: 7px;  height: 7px; }

.services.is-washing .services-v27__foam-edge {
  animation: pwFoamRevealEdge 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}
.services.is-washing .services-v27__foam-edge .foam-edge__bubble {
  opacity: .9;
  animation: pwFoamBubble 1.1s ease-in-out infinite;
}
.services.is-washing .foam-edge__bubble--2,
.services.is-washing .foam-edge__bubble--4,
.services.is-washing .foam-edge__bubble--6,
.services.is-washing .foam-edge__bubble--8 { animation-delay: .22s; }

.services.is-lit .services-v27__foam-edge,
.services.is-lit .services-v27__foam-edge .foam-edge__bubble {
  opacity: 0 !important;
}

@keyframes pwFoamRevealEdge {
  0% { left: -36px; opacity: 0; }
  7% { opacity: 1; }
  86% { opacity: .98; }
  100% { left: calc(100% + 8px); opacity: 0; }
}
@keyframes pwFoamBubble {
  0%,100% { transform: translate(0,0) scale(.85); opacity: .72; }
  45% { transform: translate(5px,-5px) scale(1.06); opacity: 1; }
}

/* keep reduced-motion users from getting motion clutter */
@media (prefers-reduced-motion: reduce) {
  .wash-demo__corner-glow,
  .wash-demo__corner-bubble,
  .wash-demo__bubble,
  .services-v27__foam-edge,
  .foam-edge__bubble {
    animation: none !important;
  }
  .services-v27__foam-edge,
  .foam-edge__bubble {
    opacity: 0 !important;
  }
}

@media (max-width: 860px) {
  .services__wash-demo--title-wash {
    top: 20px;
    left: -24px;
    width: 390px;
    height: 220px;
  }
  .wash-demo__corner-glow {
    top: 18px;
    left: 34px;
    width: 86px;
    height: 86px;
  }
  .wash-demo__corner-bubble--4,
  .wash-demo__corner-bubble--5,
  .wash-demo__corner-bubble--6,
  .wash-demo__bubble--11,
  .wash-demo__bubble--12,
  .wash-demo__bubble--13,
  .wash-demo__bubble--14 {
    display: none;
  }
}


/* ==========================================================
   PRESSURE WASHING v16 — TRUE SYNCHRONIZED GRIME REVEAL
   - no glowing orb
   - prominent continuous translucent bubble cluster
   - nastier organic grime, not a flat dirty board
   - REAL H1 stays hidden and is uncovered ONLY by the left->right wipe
   - tiny foamy/bubbly cleaning boundary, no bright vertical bar
   ========================================================== */

/* ----------------------------------------------------------
   1. REMOVE THE OLD EXTERIOR HEADING REVEAL FROM THIS H1.
   This was the cause of the clean text appearing too early.
   ---------------------------------------------------------- */
.services--v27.services-motion-ready .services-v27__wash-title > span,
.services--v27.services-motion-ready.is-services-visible .services-v27__wash-title > span:nth-child(1),
.services--v27.services-motion-ready.is-services-visible .services-v27__wash-title > span:nth-child(2) {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  clip-path: inset(0 100% 0 0) !important;
}

/* The clean heading is physically uncovered left -> right, exactly in sync
   with the grime disappearing in the opposite mask direction. */
.services.is-washing .services-v27__wash-title > span {
  animation: pwV16TextCleanReveal 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

.services.is-lit .services-v27__wash-title > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes pwV16TextCleanReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ----------------------------------------------------------
   2. PROMINENT BUBBLE-ONLY UPPER-LEFT SIGNATURE.
   No light source / orb / fake bulb glow.
   ---------------------------------------------------------- */
.wash-demo__corner-glow {
  display: none !important;
}

.services__wash-demo--title-wash {
  top: 24px !important;
  left: max(-22px, calc((100vw - var(--container)) / 2 - 108px)) !important;
  width: 590px !important;
  height: 265px !important;
  overflow: visible !important;
  background: none !important;
  filter: none !important;
  transform: none !important;
}

.wash-demo__corner-bubble,
.services__wash-demo--title-wash .wash-demo__bubble {
  border: 1.5px solid rgba(var(--water-core-rgb),.76) !important;
  background:
    radial-gradient(circle at 29% 25%, rgba(255,255,255,.94) 0 8%, rgba(255,255,255,.34) 11%, transparent 18%),
    radial-gradient(circle at 48% 52%, rgba(var(--water-core-rgb),.13), rgba(var(--water-rgb),.06) 54%, transparent 72%) !important;
  box-shadow:
    inset -3px -3px 7px rgba(var(--water-rgb),.08),
    inset 2px 2px 5px rgba(255,255,255,.14),
    0 0 9px rgba(var(--water-rgb),.13) !important;
  opacity: .94;
  backdrop-filter: blur(.3px);
}

/* Main large bubble replaces the old bulb-like focal point. */
.wash-demo__corner-bubble--1 {
  top: 22px; left: 64px; width: 58px; height: 58px;
  animation: pwV16BigBubble 5.8s ease-in-out infinite !important;
}
.wash-demo__corner-bubble--2 {
  top: 2px; left: 34px; width: 25px; height: 25px;
  animation: pwV16BubbleOrbitA 4.8s ease-in-out .2s infinite !important;
}
.wash-demo__corner-bubble--3 {
  top: 79px; left: 29px; width: 31px; height: 31px;
  animation: pwV16BubbleOrbitB 5.4s ease-in-out .6s infinite !important;
}
.wash-demo__corner-bubble--4 {
  top: 7px; left: 126px; width: 18px; height: 18px;
  animation: pwV16BubbleOrbitB 4.3s ease-in-out 1s infinite !important;
}
.wash-demo__corner-bubble--5 {
  top: 72px; left: 135px; width: 35px; height: 35px;
  animation: pwV16BubbleOrbitA 5.6s ease-in-out .5s infinite !important;
}
.wash-demo__corner-bubble--6 {
  top: 119px; left: 84px; width: 21px; height: 21px;
  animation: pwV16BubbleOrbitB 4.9s ease-in-out 1.3s infinite !important;
}
.wash-demo__corner-bubble--7 {
  top: 132px; left: 150px; width: 14px; height: 14px;
  animation: pwV16BubbleOrbitA 4.4s ease-in-out .9s infinite !important;
}
.wash-demo__corner-bubble--8 {
  top: 102px; left: 195px; width: 24px; height: 24px;
  animation: pwV16BubbleOrbitB 5.1s ease-in-out .1s infinite !important;
}
.wash-demo__corner-bubble--9 {
  top: 44px; left: 189px; width: 12px; height: 12px;
  animation: pwV16BubbleOrbitA 4.1s ease-in-out 1.5s infinite !important;
}
.wash-demo__corner-bubble--10 {
  top: 151px; left: 222px; width: 17px; height: 17px;
  animation: pwV16BubbleOrbitB 5.3s ease-in-out .7s infinite !important;
}

/* More bubbles gently drifting outward across the upper-left quadrant. */
.services__wash-demo--title-wash .wash-demo__bubble--1  { top: 23px;  left: 250px; width: 9px;  height: 9px; }
.services__wash-demo--title-wash .wash-demo__bubble--2  { top: 68px;  left: 267px; width: 15px; height: 15px; }
.services__wash-demo--title-wash .wash-demo__bubble--3  { top: 128px; left: 259px; width: 11px; height: 11px; }
.services__wash-demo--title-wash .wash-demo__bubble--4  { top: 39px;  left: 312px; width: 8px;  height: 8px; }
.services__wash-demo--title-wash .wash-demo__bubble--5  { top: 94px;  left: 326px; width: 18px; height: 18px; }
.services__wash-demo--title-wash .wash-demo__bubble--6  { top: 160px; left: 304px; width: 10px; height: 10px; }
.services__wash-demo--title-wash .wash-demo__bubble--7  { top: 15px;  left: 370px; width: 7px;  height: 7px; }
.services__wash-demo--title-wash .wash-demo__bubble--8  { top: 76px;  left: 389px; width: 13px; height: 13px; }
.services__wash-demo--title-wash .wash-demo__bubble--9  { top: 139px; left: 375px; width: 9px;  height: 9px; }
.services__wash-demo--title-wash .wash-demo__bubble--10 { top: 46px;  left: 432px; width: 12px; height: 12px; }
.services__wash-demo--title-wash .wash-demo__bubble--11 { top: 108px; left: 449px; width: 8px;  height: 8px; }
.services__wash-demo--title-wash .wash-demo__bubble--12 { top: 178px; left: 423px; width: 14px; height: 14px; }
.services__wash-demo--title-wash .wash-demo__bubble--13 { top: 27px;  left: 493px; width: 10px; height: 10px; }
.services__wash-demo--title-wash .wash-demo__bubble--14 { top: 84px;  left: 522px; width: 7px;  height: 7px; }
.services__wash-demo--title-wash .wash-demo__bubble--15 { top: 148px; left: 503px; width: 12px; height: 12px; }
.services__wash-demo--title-wash .wash-demo__bubble--16 { top: 205px; left: 467px; width: 8px;  height: 8px; }

.services__wash-demo--title-wash .wash-demo__bubble {
  animation: pwV16AmbientBubble 6.8s ease-in-out infinite !important;
}
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(2n) { animation-duration: 7.9s !important; animation-delay: -2.2s !important; }
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(3n) { animation-duration: 6.1s !important; animation-delay: -4.1s !important; }
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(5n) { animation-duration: 8.4s !important; animation-delay: -1.5s !important; }

@keyframes pwV16BigBubble {
  0%,100% { transform: translate3d(0,0,0) scale(1); opacity: .92; }
  38% { transform: translate3d(9px,-11px,0) scale(1.05); opacity: 1; }
  72% { transform: translate3d(-3px,-19px,0) scale(.98); opacity: .94; }
}
@keyframes pwV16BubbleOrbitA {
  0%,100% { transform: translate3d(0,0,0) scale(.96); opacity: .80; }
  50% { transform: translate3d(8px,-14px,0) scale(1.06); opacity: .98; }
}
@keyframes pwV16BubbleOrbitB {
  0%,100% { transform: translate3d(0,0,0) scale(.94); opacity: .76; }
  50% { transform: translate3d(-7px,-11px,0) scale(1.05); opacity: .96; }
}
@keyframes pwV16AmbientBubble {
  0%,100% { transform: translate3d(0,5px,0) scale(.90); opacity: .50; }
  42% { transform: translate3d(10px,-11px,0) scale(1.03); opacity: .82; }
  72% { transform: translate3d(3px,-20px,0) scale(1.10); opacity: .62; }
}

/* ----------------------------------------------------------
   3. NASTIER, MORE ORGANIC GRIME.
   The text itself is masked separately, so the grime no longer needs to be
   a solid rectangle just to hide the headline.
   ---------------------------------------------------------- */
.services-v27__dirty-stripe {
  top: -22px !important;
  left: -48px !important;
  width: calc(100% + 96px) !important;
  height: calc(100% + 44px) !important;
  opacity: .99 !important;
  background:
    radial-gradient(ellipse at 5% 20%, rgba(115,91,46,.95) 0 5%, transparent 13%),
    radial-gradient(ellipse at 11% 63%, rgba(37,66,36,.98) 0 7%, transparent 16%),
    radial-gradient(ellipse at 20% 31%, rgba(105,83,44,.94) 0 6%, transparent 15%),
    radial-gradient(ellipse at 28% 76%, rgba(45,75,41,.98) 0 8%, transparent 18%),
    radial-gradient(ellipse at 37% 18%, rgba(126,96,48,.94) 0 5%, transparent 14%),
    radial-gradient(ellipse at 45% 52%, rgba(44,70,38,.98) 0 9%, transparent 20%),
    radial-gradient(ellipse at 56% 27%, rgba(105,84,46,.96) 0 7%, transparent 17%),
    radial-gradient(ellipse at 65% 72%, rgba(36,67,37,.98) 0 9%, transparent 19%),
    radial-gradient(ellipse at 74% 35%, rgba(121,91,45,.95) 0 6%, transparent 16%),
    radial-gradient(ellipse at 84% 69%, rgba(42,74,39,.98) 0 8%, transparent 18%),
    radial-gradient(ellipse at 94% 22%, rgba(112,87,44,.96) 0 6%, transparent 15%),
    linear-gradient(90deg, rgba(108,91,53,.76), rgba(57,80,45,.86) 26%, rgba(106,87,51,.80) 50%, rgba(53,78,44,.88) 76%, rgba(104,84,49,.78)),
    repeating-linear-gradient(92deg, transparent 0 23px, rgba(22,37,24,.22) 23px 28px, transparent 28px 51px),
    repeating-linear-gradient(7deg, rgba(29,39,27,.11) 0 10px, rgba(14,24,18,.22) 10px 12px, transparent 12px 22px) !important;
  box-shadow:
    inset 0 0 30px rgba(14,26,18,.44),
    inset 0 -12px 18px rgba(19,31,22,.18),
    0 8px 16px rgba(0,0,0,.12) !important;
  clip-path: polygon(0 13%, 5% 6%, 13% 11%, 22% 5%, 32% 10%, 42% 3%, 52% 9%, 63% 5%, 73% 12%, 84% 6%, 94% 10%, 100% 5%, 100% 91%, 93% 96%, 83% 89%, 72% 95%, 61% 90%, 49% 97%, 38% 91%, 27% 96%, 16% 89%, 7% 95%, 0 90%) !important;
}

.services-v27__dirty-stripe::before {
  position: absolute;
  inset: 0;
  content: "";
  opacity: .70;
  background:
    repeating-linear-gradient(90deg, transparent 0 34px, rgba(33,57,31,.23) 35px 42px, transparent 43px 67px),
    linear-gradient(180deg, rgba(15,34,20,.04), rgba(16,42,22,.20) 45%, rgba(43,55,29,.08));
  mask-image: repeating-linear-gradient(90deg, #000 0 5px, rgba(0,0,0,.35) 5px 9px, transparent 9px 13px);
}

.services-v27__dirty-stripe::after {
  opacity: .78 !important;
  background:
    radial-gradient(circle at 9% 38%, rgba(25,55,27,.70) 0 4px, transparent 7px),
    radial-gradient(circle at 18% 71%, rgba(85,67,35,.62) 0 3px, transparent 6px),
    radial-gradient(circle at 31% 25%, rgba(29,59,30,.74) 0 5px, transparent 8px),
    radial-gradient(circle at 44% 63%, rgba(88,69,38,.59) 0 4px, transparent 7px),
    radial-gradient(circle at 57% 36%, rgba(25,58,29,.72) 0 4px, transparent 7px),
    radial-gradient(circle at 69% 78%, rgba(84,65,35,.58) 0 4px, transparent 7px),
    radial-gradient(circle at 79% 29%, rgba(25,57,29,.72) 0 5px, transparent 8px),
    radial-gradient(circle at 91% 61%, rgba(88,69,37,.58) 0 4px, transparent 7px),
    repeating-linear-gradient(8deg, transparent 0 9px, rgba(18,31,21,.18) 10px 12px, transparent 13px 25px) !important;
}

/* Grime wipe stays left->right. */
.services.is-washing .services-v27__dirty-stripe {
  animation: pwV16GrimeWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

@keyframes pwV16GrimeWipe {
  0%   { clip-path: inset(0 0 0 0); opacity: .99; }
  100% { clip-path: inset(0 0 0 100%); opacity: .18; }
}

/* ----------------------------------------------------------
   4. SMALL FOAM / BUBBLE BOUNDARY ONLY.
   No bright vertical white bar.
   ---------------------------------------------------------- */
.services-v27__foam-edge {
  top: -15px !important;
  left: -30px !important;
  width: 38px !important;
  height: calc(100% + 30px) !important;
  opacity: 0;
  background: none !important;
  filter: none !important;
}

.services-v27__foam-edge::before {
  position: absolute;
  top: 4%;
  bottom: 4%;
  left: 14px;
  width: 12px;
  content: "";
  opacity: .82;
  background:
    radial-gradient(circle at 50% 6%, rgba(255,255,255,.82) 0 3px, transparent 5px),
    radial-gradient(circle at 35% 16%, rgba(var(--water-core-rgb),.70) 0 3px, transparent 5px),
    radial-gradient(circle at 65% 27%, rgba(255,255,255,.76) 0 4px, transparent 6px),
    radial-gradient(circle at 42% 40%, rgba(var(--water-core-rgb),.68) 0 3px, transparent 5px),
    radial-gradient(circle at 64% 53%, rgba(255,255,255,.76) 0 3px, transparent 5px),
    radial-gradient(circle at 37% 67%, rgba(var(--water-core-rgb),.66) 0 4px, transparent 6px),
    radial-gradient(circle at 59% 80%, rgba(255,255,255,.74) 0 3px, transparent 5px),
    radial-gradient(circle at 42% 94%, rgba(var(--water-core-rgb),.62) 0 3px, transparent 5px);
  filter: blur(.15px);
}

.foam-edge__bubble {
  border: 1.2px solid rgba(var(--water-core-rgb),.80) !important;
  background: radial-gradient(circle at 30% 27%, rgba(255,255,255,.90) 0 10%, rgba(var(--water-core-rgb),.15) 20%, transparent 70%) !important;
  box-shadow: none !important;
}

.services.is-washing .services-v27__foam-edge {
  animation: pwV16FoamEdge 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}
.services.is-washing .foam-edge__bubble {
  opacity: .84;
  animation: pwV16FoamPop 850ms ease-in-out infinite !important;
}

@keyframes pwV16FoamEdge {
  0%   { left: -30px; opacity: 0; }
  7%   { opacity: .86; }
  90%  { opacity: .82; }
  100% { left: calc(100% + 6px); opacity: 0; }
}
@keyframes pwV16FoamPop {
  0%,100% { transform: translate(0,0) scale(.82); opacity: .60; }
  50% { transform: translate(3px,-3px) scale(1.04); opacity: .92; }
}

/* Mobile keeps the same concept, just trims the farthest bubbles. */
@media (max-width: 860px) {
  .services__wash-demo--title-wash {
    top: 18px !important;
    left: -20px !important;
    width: 430px !important;
    height: 230px !important;
  }

  .wash-demo__corner-bubble--1 { width: 48px; height: 48px; left: 45px; }

  .wash-demo__corner-bubble--8,
  .wash-demo__corner-bubble--9,
  .wash-demo__corner-bubble--10,
  .services__wash-demo--title-wash .wash-demo__bubble--11,
  .services__wash-demo--title-wash .wash-demo__bubble--12,
  .services__wash-demo--title-wash .wash-demo__bubble--13,
  .services__wash-demo--title-wash .wash-demo__bubble--14,
  .services__wash-demo--title-wash .wash-demo__bubble--15,
  .services__wash-demo--title-wash .wash-demo__bubble--16 {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-v27__wash-title > span {
    clip-path: inset(0 0 0 0) !important;
  }
  .services-v27__foam-edge {
    opacity: 0 !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v17 — FIXED TEXT WIPE + CLASSIC BUBBLES
   Fixes:
   - remove the !important clip-path bug that kept the H1 hidden
   - clean text is revealed only as the grime wipe moves left -> right
   - restore the earlier reflective bubble visual style
   - keep the corner prominent through density, not one oversized bubble
   - dark water-drop icon inside the aqua OUR SERVICES kicker
   ========================================================== */

/* ----------------------------------------------------------
   1. TRUE H1 REVEAL FIX
   IMPORTANT: clip-path cannot be !important here or CSS animations
   are unable to change it. Keep the old Exterior reveal disabled,
   but allow the grime-sync animation to own the clipping mask.
   ---------------------------------------------------------- */
.services--v27.services-motion-ready .services-v27__wash-title > span,
.services--v27.services-motion-ready.is-services-visible .services-v27__wash-title > span:nth-child(1),
.services--v27.services-motion-ready.is-services-visible .services-v27__wash-title > span:nth-child(2) {
  display: block !important;
  width: max-content;
  max-width: 100%;
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.services--v27.services-motion-ready .services-v27__wash-title > span:first-child {
  white-space: nowrap;
}

.services.is-washing .services-v27__wash-title > span {
  animation: pwV17TextWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

.services.is-lit .services-v27__wash-title > span {
  opacity: 1 !important;
  transform: none !important;
  clip-path: inset(0 0 0 0) !important;
}

@keyframes pwV17TextWipe {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ----------------------------------------------------------
   2. OUR SERVICES KICKER — VISIBLE WATER DROP
   Aqua-on-aqua made the icon disappear. Use the dark navy used
   by the kicker text so the droplet reads instantly.
   ---------------------------------------------------------- */
.services-v27__kicker .services-v27__drop {
  display: inline-block !important;
  width: 8px !important;
  height: 12px !important;
  flex: 0 0 8px !important;
  background: var(--navy-950) !important;
  border-radius: 48% 48% 58% 58% / 36% 36% 64% 64% !important;
  clip-path: polygon(50% 0%,67% 20%,83% 41%,95% 61%,100% 72%,96% 84%,87% 93%,75% 98%,50% 100%,25% 98%,13% 93%,4% 84%,0% 72%,5% 61%,17% 41%,33% 20%) !important;
  transform: none !important;
}

/* ----------------------------------------------------------
   3. RESTORE THE EARLIER REFLECTIVE BUBBLE LOOK
   Same visual language as the v4/v5 bubbles that worked well:
   transparent center, subtle aqua rim, crisp small highlight.
   ---------------------------------------------------------- */
.wash-demo__corner-bubble,
.services__wash-demo--title-wash .wash-demo__bubble {
  position: absolute;
  z-index: 8;
  border: 1.4px solid rgba(var(--water-core-rgb), .62) !important;
  border-radius: 50%;
  opacity: 0;
  background:
    radial-gradient(
      circle at 31% 27%,
      rgba(255,255,255,.72) 0 8%,
      rgba(var(--water-core-rgb),.22) 12%,
      rgba(var(--water-rgb),.10) 48%,
      rgba(var(--water-rgb),.03) 67%,
      transparent 72%
    ) !important;
  box-shadow:
    inset -2px -2px 5px rgba(var(--water-rgb),.12),
    inset 2px 2px 4px rgba(255,255,255,.16),
    0 0 8px rgba(var(--water-rgb),.22) !important;
  backdrop-filter: blur(.35px);
  will-change: transform, opacity;
}

.wash-demo__corner-bubble::after,
.services__wash-demo--title-wash .wash-demo__bubble::after {
  position: absolute;
  top: 20%;
  left: 23%;
  width: 24%;
  height: 20%;
  content: "";
  border-radius: 50%;
  background: rgba(255,255,255,.68) !important;
  filter: blur(.3px);
}

/* Dense top-left cluster: prominent through quantity + movement,
   not through a giant 58px bubble. */
.wash-demo__corner-bubble--1  { top: 24px !important; left: 45px !important; width: 24px !important; height: 24px !important; animation: pwV17BubbleA 6.1s ease-in-out -1.0s infinite !important; }
.wash-demo__corner-bubble--2  { top: 4px  !important; left: 88px !important; width: 14px !important; height: 14px !important; animation: pwV17BubbleB 7.0s ease-in-out -3.1s infinite !important; }
.wash-demo__corner-bubble--3  { top: 63px !important; left: 25px !important; width: 18px !important; height: 18px !important; animation: pwV17BubbleC 6.7s ease-in-out -2.0s infinite !important; }
.wash-demo__corner-bubble--4  { top: 54px !important; left: 91px !important; width: 28px !important; height: 28px !important; animation: pwV17BubbleA 7.8s ease-in-out -4.0s infinite !important; }
.wash-demo__corner-bubble--5  { top: 95px !important; left: 61px !important; width: 13px !important; height: 13px !important; animation: pwV17BubbleB 6.3s ease-in-out -1.7s infinite !important; }
.wash-demo__corner-bubble--6  { top: 14px !important; left: 140px !important; width: 17px !important; height: 17px !important; animation: pwV17BubbleC 7.2s ease-in-out -5.0s infinite !important; }
.wash-demo__corner-bubble--7  { top: 86px !important; left: 137px !important; width: 21px !important; height: 21px !important; animation: pwV17BubbleA 6.9s ease-in-out -2.8s infinite !important; }
.wash-demo__corner-bubble--8  { top: 120px !important; left: 105px !important; width: 11px !important; height: 11px !important; animation: pwV17BubbleB 7.5s ease-in-out -4.4s infinite !important; }
.wash-demo__corner-bubble--9  { top: 48px !important; left: 181px !important; width: 12px !important; height: 12px !important; animation: pwV17BubbleC 6.4s ease-in-out -3.3s infinite !important; }
.wash-demo__corner-bubble--10 { top: 118px !important; left: 181px !important; width: 16px !important; height: 16px !important; animation: pwV17BubbleA 7.4s ease-in-out -1.2s infinite !important; }

/* Ambient bubbles: keep 16, but use the same elegant transparent style. */
.services__wash-demo--title-wash .wash-demo__bubble {
  animation: pwV17AmbientBubble 7.6s ease-in infinite !important;
}
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(2n) {
  animation-duration: 8.4s !important;
  animation-delay: -4.8s !important;
}
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(3n) {
  animation-duration: 6.8s !important;
  animation-delay: -2.9s !important;
}
.services__wash-demo--title-wash .wash-demo__bubble:nth-of-type(5n) {
  animation-duration: 9.0s !important;
  animation-delay: -6.1s !important;
}

.wash-demo__corner-bubble,
.services__wash-demo--title-wash .wash-demo__bubble {
  opacity: .78 !important;
}

@keyframes pwV17BubbleA {
  0%,100% { transform: translate3d(0,4px,0) scale(.94); opacity: .55; }
  42% { transform: translate3d(10px,-15px,0) scale(1.04); opacity: .86; }
  72% { transform: translate3d(3px,-25px,0) scale(1.12); opacity: .68; }
}
@keyframes pwV17BubbleB {
  0%,100% { transform: translate3d(0,7px,0) scale(.90); opacity: .48; }
  48% { transform: translate3d(-7px,-13px,0) scale(1.03); opacity: .82; }
  78% { transform: translate3d(4px,-22px,0) scale(1.10); opacity: .64; }
}
@keyframes pwV17BubbleC {
  0%,100% { transform: translate3d(0,5px,0) scale(.92); opacity: .52; }
  50% { transform: translate3d(7px,-18px,0) scale(1.06); opacity: .84; }
}
@keyframes pwV17AmbientBubble {
  0% { opacity: 0; transform: translate3d(0,18px,0) scale(.72); }
  12% { opacity: .62; }
  46% { opacity: .76; transform: translate3d(12px,-42px,0) scale(.94); }
  76% { opacity: .54; }
  100% { opacity: 0; transform: translate3d(-5px,-92px,0) scale(1.12); }
}

/* Mobile: retain a strong but uncluttered bubble signature. */
@media (max-width: 860px) {
  .wash-demo__corner-bubble--7,
  .wash-demo__corner-bubble--8,
  .wash-demo__corner-bubble--9,
  .wash-demo__corner-bubble--10 {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .services-v27__wash-title > span {
    clip-path: inset(0 0 0 0) !important;
  }
  .wash-demo__corner-bubble,
  .services__wash-demo--title-wash .wash-demo__bubble {
    animation: none !important;
    opacity: .34 !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v18 — CLEAN REVEAL REBUILD
   Brand-new class names intentionally isolate this H1 from all
   previous Exterior / mist / squeegee reveal experiments.
   ========================================================== */

/* ----------------------------------------------------------
   CLEAN H1 LINES
   No <span> elements are used here, so the old Exterior
   Services heading animation cannot target these lines.
   ---------------------------------------------------------- */

.services-v27__grime-title-v18 {
  position: relative;
  isolation: isolate;
  overflow: visible;
}

.grime-title-v18__line {
  position: relative;
  z-index: 1;
  display: block;
  width: max-content;
  max-width: 100%;
  margin: 0 auto;
  padding: .04em .055em .075em;
  overflow: visible;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  clip-path: inset(0 100% 0 0);
  will-change: clip-path;
}

.grime-title-v18__line--white {
  color: var(--white);
  white-space: nowrap;
}

.grime-title-v18__line--accent {
  color: var(--aqua);
}

/* The REAL text reveal and the grime wipe use the exact same
   duration / easing / delay. */
.services.is-washing .grime-title-v18__line {
  animation: pwV18TextReveal 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}

.services.is-lit .grime-title-v18__line {
  clip-path: inset(0 0 0 0);
}

@keyframes pwV18TextReveal {
  0%   { clip-path: inset(0 100% 0 0); }
  100% { clip-path: inset(0 0 0 0); }
}

/* ----------------------------------------------------------
   GRIME MASK
   Outer element handles ONLY the wipe.
   Inner element holds the nasty texture and never changes size,
   so the dirt looks like it is being CLEANED away — not sliding.
   ---------------------------------------------------------- */

.grime-mask-v18 {
  position: absolute;
  z-index: 3;
  top: -22px;
  left: -48px;
  width: calc(100% + 96px);
  height: calc(100% + 44px);
  overflow: hidden;
  pointer-events: none;
  clip-path: inset(0 0 0 0);
  will-change: clip-path;
}

.grime-texture-v18 {
  position: absolute;
  inset: 0;
  display: block;
  opacity: .995;

  background:
    radial-gradient(ellipse at 5% 20%, rgba(115,91,46,.96) 0 5%, transparent 13%),
    radial-gradient(ellipse at 11% 63%, rgba(37,66,36,.99) 0 7%, transparent 16%),
    radial-gradient(ellipse at 20% 31%, rgba(105,83,44,.96) 0 6%, transparent 15%),
    radial-gradient(ellipse at 28% 76%, rgba(45,75,41,.99) 0 8%, transparent 18%),
    radial-gradient(ellipse at 37% 18%, rgba(126,96,48,.96) 0 5%, transparent 14%),
    radial-gradient(ellipse at 45% 52%, rgba(44,70,38,.99) 0 9%, transparent 20%),
    radial-gradient(ellipse at 56% 27%, rgba(105,84,46,.98) 0 7%, transparent 17%),
    radial-gradient(ellipse at 65% 72%, rgba(36,67,37,.99) 0 9%, transparent 19%),
    radial-gradient(ellipse at 74% 35%, rgba(121,91,45,.97) 0 6%, transparent 16%),
    radial-gradient(ellipse at 84% 69%, rgba(42,74,39,.99) 0 8%, transparent 18%),
    radial-gradient(ellipse at 94% 22%, rgba(112,87,44,.98) 0 6%, transparent 15%),

    /* darker mold / algae clouds */
    radial-gradient(ellipse at 20% 48%, rgba(24,50,26,.36) 0 12%, transparent 25%),
    radial-gradient(ellipse at 51% 45%, rgba(27,54,28,.40) 0 14%, transparent 27%),
    radial-gradient(ellipse at 79% 51%, rgba(25,52,27,.36) 0 13%, transparent 26%),

    /* dirty vertical runoff streaks */
    repeating-linear-gradient(
      90deg,
      transparent 0 27px,
      rgba(30,56,30,.28) 28px 34px,
      transparent 35px 58px
    ),

    /* horizontal grime / siding-like texture */
    repeating-linear-gradient(
      7deg,
      rgba(27,38,26,.11) 0 9px,
      rgba(14,24,18,.24) 10px 12px,
      transparent 13px 22px
    ),

    linear-gradient(
      96deg,
      #786746 0%,
      #475c3e 27%,
      #726247 51%,
      #3f563c 74%,
      #6d5a40 100%
    );

  box-shadow:
    inset 0 0 32px rgba(12,24,16,.48),
    inset 0 -12px 20px rgba(14,30,18,.24),
    0 8px 16px rgba(0,0,0,.14);
}

/* Extra nasty spotting / mildew details. */
.grime-texture-v18::before,
.grime-texture-v18::after {
  position: absolute;
  inset: 0;
  content: "";
}

.grime-texture-v18::before {
  opacity: .82;
  background:
    radial-gradient(circle at 9% 38%, rgba(20,51,25,.78) 0 4px, transparent 8px),
    radial-gradient(circle at 18% 71%, rgba(85,67,35,.70) 0 3px, transparent 7px),
    radial-gradient(circle at 31% 25%, rgba(24,56,28,.82) 0 5px, transparent 9px),
    radial-gradient(circle at 44% 63%, rgba(88,69,38,.68) 0 4px, transparent 8px),
    radial-gradient(circle at 57% 36%, rgba(20,54,27,.80) 0 4px, transparent 8px),
    radial-gradient(circle at 69% 78%, rgba(84,65,35,.66) 0 4px, transparent 8px),
    radial-gradient(circle at 79% 29%, rgba(20,53,27,.82) 0 5px, transparent 9px),
    radial-gradient(circle at 91% 61%, rgba(88,69,37,.66) 0 4px, transparent 8px);
}

.grime-texture-v18::after {
  opacity: .50;
  background:
    repeating-linear-gradient(
      90deg,
      transparent 0 37px,
      rgba(24,54,27,.30) 38px 44px,
      transparent 45px 69px
    ),
    linear-gradient(
      180deg,
      rgba(17,38,22,.04),
      rgba(16,47,24,.24) 48%,
      rgba(47,57,29,.08)
    );
}

/* Wipe the grime from LEFT -> RIGHT. */
.services.is-washing .grime-mask-v18 {
  animation: pwV18GrimeWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}

.services.is-lit .grime-mask-v18 {
  clip-path: inset(0 0 0 100%);
}

@keyframes pwV18GrimeWipe {
  0%   { clip-path: inset(0 0 0 0); }
  100% { clip-path: inset(0 0 0 100%); }
}

/* ----------------------------------------------------------
   CLEANING FRONT
   No more 8-dot vertical bubble chain.
   This is a small irregular wet/foamy edge with scattered suds.
   ---------------------------------------------------------- */

.clean-sweep-v18 {
  position: absolute;
  z-index: 4;
  top: -17px;
  left: -31px;
  width: 42px;
  height: calc(100% + 34px);
  pointer-events: none;
  opacity: 0;

  background:
    radial-gradient(circle at 42% 8%,  rgba(255,255,255,.84) 0 4px, transparent 7px),
    radial-gradient(circle at 67% 21%, rgba(var(--water-core-rgb),.76) 0 3px, transparent 6px),
    radial-gradient(circle at 29% 35%, rgba(255,255,255,.80) 0 5px, transparent 8px),
    radial-gradient(circle at 69% 52%, rgba(var(--water-core-rgb),.70) 0 4px, transparent 7px),
    radial-gradient(circle at 33% 67%, rgba(255,255,255,.78) 0 4px, transparent 7px),
    radial-gradient(circle at 62% 82%, rgba(var(--water-core-rgb),.68) 0 3px, transparent 6px),
    radial-gradient(circle at 38% 95%, rgba(255,255,255,.72) 0 3px, transparent 6px),

    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.16) 25%,
      rgba(var(--water-core-rgb),.26) 50%,
      rgba(255,255,255,.10) 70%,
      transparent 100%
    );

  filter:
    blur(.25px)
    drop-shadow(0 0 7px rgba(var(--water-rgb),.18));
  will-change: left, opacity;
}

.services.is-washing .clean-sweep-v18 {
  animation: pwV18CleanSweep 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}

.services.is-lit .clean-sweep-v18 {
  opacity: 0;
}

@keyframes pwV18CleanSweep {
  0%   { left: -31px; opacity: 0; }
  7%   { opacity: .78; }
  88%  { opacity: .74; }
  100% { left: calc(100% + 7px); opacity: 0; }
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .grime-title-v18__line--white {
    white-space: normal;
  }

  .grime-mask-v18 {
    top: -17px;
    left: -26px;
    width: calc(100% + 52px);
    height: calc(100% + 34px);
  }

  .clean-sweep-v18 {
    top: -13px;
    height: calc(100% + 26px);
    width: 34px;
  }
}

@media (max-width: 560px) {
  .grime-title-v18__line {
    width: 100%;
  }

  .grime-mask-v18 {
    left: -18px;
    width: calc(100% + 36px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .grime-title-v18__line {
    clip-path: inset(0 0 0 0) !important;
  }

  .grime-mask-v18 {
    clip-path: inset(0 0 0 100%) !important;
  }

  .clean-sweep-v18 {
    display: none !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v19 — FULL-WIDTH BUBBLES + ROUGH GRIME EDGE
   IMPORTANT:
   - v18 reveal timing/masks are untouched
   - only bubble distribution + grime silhouette change
   ========================================================== */

/* ----------------------------------------------------------
   FULL-WIDTH TOP BUBBLE FIELD
   Use the existing reflective bubble styling, but spread the
   26 current bubbles across the entire upper edge.
   ---------------------------------------------------------- */

.services__wash-demo--title-wash {
  top: 4px !important;
  left: 0 !important;
  width: 100% !important;
  height: 180px !important;
  transform: none !important;
  overflow: visible !important;
}

/* Keep every bubble positioned relative to the full section width. */
.services__wash-demo--title-wash .wash-demo__corner-bubble,
.services__wash-demo--title-wash .wash-demo__bubble {
  position: absolute !important;
}

/* Stronger cluster toward the left, then continue naturally across the page. */
.wash-demo__corner-bubble--1  { top: 20px !important; left: 4%  !important; width: 24px !important; height: 24px !important; }
.wash-demo__corner-bubble--2  { top: 55px !important; left: 7%  !important; width: 14px !important; height: 14px !important; }
.wash-demo__corner-bubble--3  { top: 93px !important; left: 10% !important; width: 18px !important; height: 18px !important; }
.wash-demo__corner-bubble--4  { top: 28px !important; left: 13% !important; width: 28px !important; height: 28px !important; }
.wash-demo__corner-bubble--5  { top: 83px !important; left: 16% !important; width: 13px !important; height: 13px !important; }
.wash-demo__corner-bubble--6  { top: 10px !important; left: 19% !important; width: 17px !important; height: 17px !important; }
.wash-demo__corner-bubble--7  { top: 68px !important; left: 22% !important; width: 21px !important; height: 21px !important; }
.wash-demo__corner-bubble--8  { top: 112px !important; left: 25% !important; width: 11px !important; height: 11px !important; }
.wash-demo__corner-bubble--9  { top: 42px !important; left: 28% !important; width: 12px !important; height: 12px !important; }
.wash-demo__corner-bubble--10 { top: 101px !important; left: 31% !important; width: 16px !important; height: 16px !important; }

/* Continue the exact same reflective style across the center/right side. */
.services__wash-demo--title-wash .wash-demo__bubble--1  { top: 18px  !important; left: 35% !important; width: 9px  !important; height: 9px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--2  { top: 62px  !important; left: 39% !important; width: 15px !important; height: 15px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--3  { top: 116px !important; left: 43% !important; width: 11px !important; height: 11px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--4  { top: 36px  !important; left: 47% !important; width: 8px  !important; height: 8px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--5  { top: 89px  !important; left: 51% !important; width: 18px !important; height: 18px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--6  { top: 136px !important; left: 55% !important; width: 10px !important; height: 10px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--7  { top: 12px  !important; left: 59% !important; width: 7px  !important; height: 7px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--8  { top: 72px  !important; left: 63% !important; width: 13px !important; height: 13px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--9  { top: 121px !important; left: 67% !important; width: 9px  !important; height: 9px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--10 { top: 40px  !important; left: 71% !important; width: 12px !important; height: 12px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--11 { top: 98px  !important; left: 75% !important; width: 8px  !important; height: 8px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--12 { top: 142px !important; left: 79% !important; width: 14px !important; height: 14px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--13 { top: 24px  !important; left: 83% !important; width: 10px !important; height: 10px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--14 { top: 78px  !important; left: 87% !important; width: 7px  !important; height: 7px  !important; }
.services__wash-demo--title-wash .wash-demo__bubble--15 { top: 126px !important; left: 91% !important; width: 12px !important; height: 12px !important; }
.services__wash-demo--title-wash .wash-demo__bubble--16 { top: 46px  !important; left: 95% !important; width: 8px  !important; height: 8px  !important; }

/* ----------------------------------------------------------
   ROUGH / ORGANIC GRIME SILHOUETTE
   The OUTER grime-mask-v18 still performs the clean reveal.
   Only the INNER grime texture gets this jagged outline.
   This keeps the reveal mechanics completely safe.
   ---------------------------------------------------------- */

.grime-texture-v18 {
  clip-path: polygon(
    0.5% 12%,
    3% 7%,
    6% 10%,
    9% 5%,
    13% 9%,
    17% 4%,
    21% 8%,
    25% 3%,
    29% 7%,
    33% 4%,
    37% 9%,
    41% 5%,
    45% 8%,
    49% 3%,
    53% 7%,
    57% 4%,
    61% 9%,
    65% 5%,
    69% 8%,
    73% 3%,
    77% 7%,
    81% 4%,
    85% 9%,
    89% 5%,
    93% 8%,
    97% 4%,
    99.5% 10%,

    99% 18%,
    100% 27%,
    98.8% 35%,
    100% 44%,
    99% 54%,
    100% 64%,
    98.7% 75%,
    100% 86%,

    98% 92%,
    94% 96%,
    90% 91%,
    86% 97%,
    82% 92%,
    78% 96%,
    74% 91%,
    70% 97%,
    66% 92%,
    62% 96%,
    58% 91%,
    54% 97%,
    50% 92%,
    46% 96%,
    42% 91%,
    38% 97%,
    34% 92%,
    30% 96%,
    26% 91%,
    22% 97%,
    18% 92%,
    14% 96%,
    10% 91%,
    6% 96%,
    2% 92%,

    0.8% 84%,
    0% 75%,
    1.2% 66%,
    0% 57%,
    1% 47%,
    0% 38%,
    1.3% 28%,
    0% 19%
  ) !important;
}

/* A little extra ragged darkness near the torn perimeter makes the
   shape feel dirty rather than simply decorative. */
.grime-texture-v18::after {
  background:
    radial-gradient(ellipse at 4% 18%, rgba(24,51,26,.50) 0 8%, transparent 19%),
    radial-gradient(ellipse at 96% 27%, rgba(30,54,28,.46) 0 7%, transparent 18%),
    radial-gradient(ellipse at 8% 84%, rgba(60,54,31,.44) 0 8%, transparent 19%),
    radial-gradient(ellipse at 92% 79%, rgba(25,51,26,.44) 0 8%, transparent 20%),
    repeating-linear-gradient(
      90deg,
      transparent 0 37px,
      rgba(24,54,27,.30) 38px 44px,
      transparent 45px 69px
    ),
    linear-gradient(
      180deg,
      rgba(17,38,22,.08),
      rgba(16,47,24,.26) 48%,
      rgba(47,57,29,.10)
    ) !important;
}

/* ----------------------------------------------------------
   RESPONSIVE
   Keep the full-width bubble ribbon, but reduce clutter.
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .services__wash-demo--title-wash {
    top: 8px !important;
    left: 0 !important;
    width: 100% !important;
    height: 145px !important;
  }

  /* Keep a broad distribution but hide a few of the densest bubbles. */
  .wash-demo__corner-bubble--8,
  .wash-demo__corner-bubble--10,
  .services__wash-demo--title-wash .wash-demo__bubble--3,
  .services__wash-demo--title-wash .wash-demo__bubble--6,
  .services__wash-demo--title-wash .wash-demo__bubble--9,
  .services__wash-demo--title-wash .wash-demo__bubble--12,
  .services__wash-demo--title-wash .wash-demo__bubble--15 {
    display: none !important;
  }

  .services__wash-demo--title-wash .wash-demo__corner-bubble,
  .services__wash-demo--title-wash .wash-demo__bubble {
    transform: scale(.86);
  }
}

@media (max-width: 560px) {
  .services__wash-demo--title-wash {
    height: 124px !important;
  }

  .services__wash-demo--title-wash .wash-demo__corner-bubble,
  .services__wash-demo--title-wash .wash-demo__bubble {
    transform: scale(.72);
  }
}
/* ==========================================================
   PRESSURE WASHING v20 — MORE BUBBLES + REFINED CLEAN EDGE
   v18 reveal mechanics remain untouched.
   Changes:
   - 26 -> 34 total top-edge bubbles (+30.8%)
   - fuller center/right distribution
   - no dotted vertical cleaning edge
   - subtle irregular wet/foam boundary
   - grime slightly more translucent/varied
   ========================================================== */

/* ----------------------------------------------------------
   EIGHT NEW REFLECTIVE BUBBLES
   Fill the remaining visual gaps through the full-width ribbon.
   ---------------------------------------------------------- */

.services__wash-demo--title-wash .wash-demo__bubble--17 {
  top: 54px !important;
  left: 33% !important;
  width: 11px !important;
  height: 11px !important;
  animation: pwBubbleDrift2 7.3s linear .55s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--18 {
  top: 132px !important;
  left: 37% !important;
  width: 7px !important;
  height: 7px !important;
  animation: pwBubbleDrift3 6.4s linear 1.35s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--19 {
  top: 26px !important;
  left: 45% !important;
  width: 13px !important;
  height: 13px !important;
  animation: pwBubbleDrift1 7.8s linear .25s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--20 {
  top: 104px !important;
  left: 57% !important;
  width: 8px !important;
  height: 8px !important;
  animation: pwBubbleDrift3 6.7s linear 1.05s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--21 {
  top: 52px !important;
  left: 66% !important;
  width: 16px !important;
  height: 16px !important;
  animation: pwBubbleDrift2 8.4s linear .75s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--22 {
  top: 142px !important;
  left: 72% !important;
  width: 9px !important;
  height: 9px !important;
  animation: pwBubbleDrift1 7.1s linear 1.65s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--23 {
  top: 18px !important;
  left: 86% !important;
  width: 12px !important;
  height: 12px !important;
  animation: pwBubbleDrift3 7.6s linear .45s infinite !important;
}

.services__wash-demo--title-wash .wash-demo__bubble--24 {
  top: 110px !important;
  left: 93% !important;
  width: 15px !important;
  height: 15px !important;
  animation: pwBubbleDrift2 8.1s linear 1.15s infinite !important;
}

/* ----------------------------------------------------------
   GRIME — slightly more varied / translucent in spots.
   Keep it filthy, but allow a faint ghost of the real H1 underneath.
   ---------------------------------------------------------- */

.grime-texture-v18 {
  opacity: .94 !important;
  background:
    radial-gradient(ellipse at 5% 20%, rgba(115,91,46,.92) 0 5%, transparent 13%),
    radial-gradient(ellipse at 11% 63%, rgba(37,66,36,.95) 0 7%, transparent 16%),
    radial-gradient(ellipse at 20% 31%, rgba(105,83,44,.92) 0 6%, transparent 15%),
    radial-gradient(ellipse at 28% 76%, rgba(45,75,41,.94) 0 8%, transparent 18%),
    radial-gradient(ellipse at 37% 18%, rgba(126,96,48,.92) 0 5%, transparent 14%),
    radial-gradient(ellipse at 45% 52%, rgba(44,70,38,.94) 0 9%, transparent 20%),
    radial-gradient(ellipse at 56% 27%, rgba(105,84,46,.93) 0 7%, transparent 17%),
    radial-gradient(ellipse at 65% 72%, rgba(36,67,37,.95) 0 9%, transparent 19%),
    radial-gradient(ellipse at 74% 35%, rgba(121,91,45,.92) 0 6%, transparent 16%),
    radial-gradient(ellipse at 84% 69%, rgba(42,74,39,.94) 0 8%, transparent 18%),
    radial-gradient(ellipse at 94% 22%, rgba(112,87,44,.93) 0 6%, transparent 15%),

    radial-gradient(ellipse at 18% 45%, rgba(24,50,26,.30) 0 12%, transparent 25%),
    radial-gradient(ellipse at 51% 45%, rgba(27,54,28,.34) 0 14%, transparent 27%),
    radial-gradient(ellipse at 82% 49%, rgba(25,52,27,.30) 0 13%, transparent 26%),

    /* irregular lighter worn-through patches */
    radial-gradient(ellipse at 33% 42%, rgba(255,255,255,.055) 0 10%, transparent 24%),
    radial-gradient(ellipse at 61% 58%, rgba(255,255,255,.045) 0 12%, transparent 27%),
    radial-gradient(ellipse at 87% 36%, rgba(255,255,255,.050) 0 9%, transparent 23%),

    repeating-linear-gradient(
      90deg,
      transparent 0 27px,
      rgba(30,56,30,.24) 28px 34px,
      transparent 35px 58px
    ),

    repeating-linear-gradient(
      7deg,
      rgba(27,38,26,.09) 0 9px,
      rgba(14,24,18,.20) 10px 12px,
      transparent 13px 22px
    ),

    linear-gradient(
      96deg,
      rgba(120,103,70,.95) 0%,
      rgba(71,92,62,.93) 27%,
      rgba(114,98,71,.94) 51%,
      rgba(63,86,60,.93) 74%,
      rgba(109,90,64,.95) 100%
    ) !important;
}

/* ----------------------------------------------------------
   CLEANING FRONT
   Remove the dotted / bubble-column look entirely.
   Use a narrow irregular wet/foamy smear instead.
   ---------------------------------------------------------- */

.clean-sweep-v18 {
  width: 24px !important;
  top: -14px !important;
  height: calc(100% + 28px) !important;

  background:
    radial-gradient(ellipse at 46% 8%,  rgba(255,255,255,.62) 0 18%, transparent 45%),
    radial-gradient(ellipse at 54% 25%, rgba(var(--water-core-rgb),.42) 0 22%, transparent 50%),
    radial-gradient(ellipse at 40% 43%, rgba(255,255,255,.52) 0 20%, transparent 48%),
    radial-gradient(ellipse at 58% 61%, rgba(var(--water-core-rgb),.36) 0 22%, transparent 50%),
    radial-gradient(ellipse at 42% 80%, rgba(255,255,255,.46) 0 18%, transparent 46%),
    radial-gradient(ellipse at 54% 96%, rgba(var(--water-core-rgb),.32) 0 18%, transparent 44%),
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(255,255,255,.10) 18%,
      rgba(var(--water-core-rgb),.25) 48%,
      rgba(255,255,255,.12) 72%,
      transparent 100%
    ) !important;

  border-radius: 48% 38% 52% 42% / 14% 22% 17% 20%;
  filter:
    blur(.65px)
    drop-shadow(0 0 4px rgba(var(--water-rgb),.10)) !important;
}

/* No pseudo-element or vertical bubble chain on the cleaning edge. */
.clean-sweep-v18::before,
.clean-sweep-v18::after {
  display: none !important;
}

/* ----------------------------------------------------------
   RESPONSIVE — keep the added density without overcrowding mobile.
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .services__wash-demo--title-wash .wash-demo__bubble--18,
  .services__wash-demo--title-wash .wash-demo__bubble--20,
  .services__wash-demo--title-wash .wash-demo__bubble--22,
  .services__wash-demo--title-wash .wash-demo__bubble--24 {
    display: none !important;
  }

  .clean-sweep-v18 {
    width: 19px !important;
  }
}

@media (max-width: 560px) {
  .services__wash-demo--title-wash .wash-demo__bubble--17,
  .services__wash-demo--title-wash .wash-demo__bubble--21 {
    display: none !important;
  }

  .clean-sweep-v18 {
    width: 16px !important;
  }
}
/* ==========================================================
   PRESSURE WASHING v21 — SINGLE-MASK H1 REVEAL
   Fixes the navy rectangle/compositing glitch by simplifying
   the architecture:
   - clean H1 is ALWAYS fully rendered underneath the grime
   - ONLY the grime mask animates away left -> right
   - no second text clipping animation
   - no bright vertical bar
   - only a few small sud bubbles mark the moving boundary
   ========================================================== */

/* ----------------------------------------------------------
   CLEAN H1: permanently rendered underneath grime.
   Kill the separate text-mask animation entirely.
   ---------------------------------------------------------- */

.grime-title-v18__line,
.services.is-washing .grime-title-v18__line,
.services.is-lit .grime-title-v18__line {
  clip-path: none !important;
  animation: none !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Make sure the grime fully conceals the clean H1 until the
   grime mask physically passes over it. */
.grime-texture-v18 {
  opacity: 1 !important;
}

/* ----------------------------------------------------------
   GRIME: THIS is now the ONLY reveal animation.
   Keep the already-working v18 mask timing unchanged.
   ---------------------------------------------------------- */

.services.is-washing .grime-mask-v18 {
  animation: pwV21GrimeOnlyWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

.services.is-lit .grime-mask-v18 {
  clip-path: inset(0 0 0 100%) !important;
}

@keyframes pwV21GrimeOnlyWipe {
  0% {
    clip-path: inset(0 0 0 0);
  }

  100% {
    clip-path: inset(0 0 0 100%);
  }
}

/* ----------------------------------------------------------
   DISABLE THE OLD V18 CLEANING LINE COMPLETELY.
   ---------------------------------------------------------- */

.clean-sweep-v18,
.clean-sweep-v18::before,
.clean-sweep-v18::after {
  display: none !important;
  animation: none !important;
}

/* ----------------------------------------------------------
   NEW V21 BUBBLE-ONLY CLEANING BOUNDARY
   No bar, no capsule, no vertical dotted line.
   Five scattered sud bubbles simply travel with the grime wipe.
   ---------------------------------------------------------- */

.foam-boundary-v21 {
  position: absolute;
  z-index: 5;
  top: -17px;
  left: -28px;
  width: 40px;
  height: calc(100% + 34px);
  pointer-events: none;
  opacity: 0;
  will-change: left, opacity;
}

.foam-boundary-v21__bubble {
  position: absolute;
  border-radius: 50%;
  border: 1.2px solid rgba(var(--water-core-rgb), .72);
  background:
    radial-gradient(
      circle at 30% 26%,
      rgba(255,255,255,.94) 0 11%,
      rgba(var(--water-core-rgb),.20) 19%,
      rgba(var(--water-rgb),.07) 52%,
      transparent 72%
    );
  box-shadow:
    inset -1px -1px 2px rgba(var(--water-rgb),.08),
    0 0 4px rgba(var(--water-rgb),.12);
  opacity: 0;
}

.foam-boundary-v21__bubble::after {
  position: absolute;
  top: 21%;
  left: 24%;
  width: 25%;
  height: 20%;
  border-radius: 50%;
  content: "";
  background: rgba(255,255,255,.76);
}

.foam-boundary-v21__bubble--1 {
  top: 8%;
  left: 9px;
  width: 8px;
  height: 8px;
}

.foam-boundary-v21__bubble--2 {
  top: 29%;
  left: 18px;
  width: 12px;
  height: 12px;
}

.foam-boundary-v21__bubble--3 {
  top: 51%;
  left: 5px;
  width: 9px;
  height: 9px;
}

.foam-boundary-v21__bubble--4 {
  top: 70%;
  left: 19px;
  width: 11px;
  height: 11px;
}

.foam-boundary-v21__bubble--5 {
  top: 90%;
  left: 11px;
  width: 7px;
  height: 7px;
}

.services.is-washing .foam-boundary-v21 {
  animation: pwV21FoamBoundaryTravel 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards;
}

.services.is-washing .foam-boundary-v21__bubble {
  animation: pwV21BoundaryBubble 760ms ease-in-out infinite;
}

.services.is-washing .foam-boundary-v21__bubble--2,
.services.is-washing .foam-boundary-v21__bubble--4 {
  animation-delay: .18s;
}

.services.is-lit .foam-boundary-v21,
.services.is-lit .foam-boundary-v21__bubble {
  opacity: 0 !important;
}

@keyframes pwV21FoamBoundaryTravel {
  0% {
    left: -28px;
    opacity: 0;
  }

  7% {
    opacity: .92;
  }

  90% {
    opacity: .88;
  }

  100% {
    left: calc(100% + 10px);
    opacity: 0;
  }
}

@keyframes pwV21BoundaryBubble {
  0%,
  100% {
    opacity: .48;
    transform: translate3d(0, 0, 0) scale(.86);
  }

  45% {
    opacity: .95;
    transform: translate3d(4px, -4px, 0) scale(1.04);
  }

  72% {
    opacity: .72;
    transform: translate3d(1px, -7px, 0) scale(.96);
  }
}

/* ----------------------------------------------------------
   RESPONSIVE
   ---------------------------------------------------------- */

@media (max-width: 860px) {
  .foam-boundary-v21 {
    top: -13px;
    left: -22px;
    width: 32px;
    height: calc(100% + 26px);
  }

  @keyframes pwV21FoamBoundaryTravel {
    0% {
      left: -22px;
      opacity: 0;
    }

    8% {
      opacity: .90;
    }

    90% {
      opacity: .84;
    }

    100% {
      left: calc(100% + 8px);
      opacity: 0;
    }
  }
}

@media (max-width: 560px) {
  .foam-boundary-v21 {
    width: 28px;
  }

  .foam-boundary-v21__bubble--2,
  .foam-boundary-v21__bubble--4 {
    width: 9px;
    height: 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .grime-title-v18__line {
    clip-path: none !important;
    animation: none !important;
  }

  .grime-mask-v18 {
    clip-path: inset(0 0 0 100%) !important;
    animation: none !important;
  }

  .foam-boundary-v21,
  .foam-boundary-v21__bubble {
    display: none !important;
    animation: none !important;
  }
}

/* ==========================================================
   PRESSURE WASHING v22 — TIGHTER GRIME + 7 MOVING SUD BUBBLES
   - tightens right-side grime overhang to prevent detached chunk/shards
   - keeps the existing single-mask reveal approach
   - increases visible moving sud bubbles from 5 to 7
   ========================================================== */

/* Tighten the grime footprint so the wipe hugs the actual H1 more closely. */
.grime-mask-v18 {
  top: -16px !important;
  left: -22px !important;
  width: calc(100% + 44px) !important;
  height: calc(100% + 32px) !important;
  opacity: 1 !important;
}

/* Keep the texture rough, but soften the very end of the wipe so the last
   dirty fragment does not hang off the right side of the headline. */
.services.is-washing .grime-mask-v18 {
  animation: pwV22GrimeOnlyWipe 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

@keyframes pwV22GrimeOnlyWipe {
  0% {
    clip-path: inset(0 0 0 0);
    opacity: 1;
  }

  86% {
    opacity: 1;
  }

  96% {
    clip-path: inset(0 2.5% 0 96.5%);
    opacity: .96;
  }

  100% {
    clip-path: inset(0 0 0 100%);
    opacity: 0;
  }
}

/* Seven visible moving sud bubbles on the cleaning boundary. */
.foam-boundary-v21 {
  top: -16px !important;
  left: -30px !important;
  width: 46px !important;
  height: calc(100% + 32px) !important;
}

.foam-boundary-v21__bubble {
  border: 1.35px solid rgba(var(--water-core-rgb), .78) !important;
  background:
    radial-gradient(
      circle at 30% 24%,
      rgba(255,255,255,.97) 0 11%,
      rgba(var(--water-core-rgb),.26) 18%,
      rgba(var(--water-rgb),.10) 50%,
      transparent 71%
    ) !important;
  box-shadow:
    inset -1px -1px 3px rgba(var(--water-rgb),.10),
    0 0 6px rgba(var(--water-rgb),.16) !important;
}

.foam-boundary-v21__bubble--1 {
  top: 6% !important;
  left: 10px !important;
  width: 9px !important;
  height: 9px !important;
}

.foam-boundary-v21__bubble--2 {
  top: 18% !important;
  left: 25px !important;
  width: 11px !important;
  height: 11px !important;
}

.foam-boundary-v21__bubble--3 {
  top: 33% !important;
  left: 6px !important;
  width: 8px !important;
  height: 8px !important;
}

.foam-boundary-v21__bubble--4 {
  top: 46% !important;
  left: 24px !important;
  width: 13px !important;
  height: 13px !important;
}

.foam-boundary-v21__bubble--5 {
  top: 61% !important;
  left: 12px !important;
  width: 9px !important;
  height: 9px !important;
}

.foam-boundary-v21__bubble--6 {
  top: 76% !important;
  left: 27px !important;
  width: 10px !important;
  height: 10px !important;
}

.foam-boundary-v21__bubble--7 {
  top: 90% !important;
  left: 11px !important;
  width: 8px !important;
  height: 8px !important;
}

.services.is-washing .foam-boundary-v21 {
  animation: pwV22FoamBoundaryTravel 2.20s cubic-bezier(.20,.72,.22,1) .22s forwards !important;
}

.services.is-washing .foam-boundary-v21__bubble {
  animation: pwV22BoundaryBubble 900ms ease-in-out infinite !important;
}

.services.is-washing .foam-boundary-v21__bubble--2,
.services.is-washing .foam-boundary-v21__bubble--4,
.services.is-washing .foam-boundary-v21__bubble--6 {
  animation-delay: .16s !important;
}

.services.is-washing .foam-boundary-v21__bubble--3,
.services.is-washing .foam-boundary-v21__bubble--5,
.services.is-washing .foam-boundary-v21__bubble--7 {
  animation-delay: .32s !important;
}

@keyframes pwV22FoamBoundaryTravel {
  0% {
    left: -30px;
    opacity: 0;
  }

  7% {
    opacity: .95;
  }

  90% {
    opacity: .92;
  }

  100% {
    left: calc(100% + 8px);
    opacity: 0;
  }
}

@keyframes pwV22BoundaryBubble {
  0%,
  100% {
    opacity: .56;
    transform: translate3d(0, 0, 0) scale(.88);
  }

  40% {
    opacity: 1;
    transform: translate3d(5px, -5px, 0) scale(1.07);
  }

  72% {
    opacity: .78;
    transform: translate3d(2px, -9px, 0) scale(.98);
  }
}

@media (max-width: 860px) {
  .grime-mask-v18 {
    top: -13px !important;
    left: -16px !important;
    width: calc(100% + 32px) !important;
    height: calc(100% + 24px) !important;
  }

  .foam-boundary-v21 {
    top: -12px !important;
    left: -22px !important;
    width: 36px !important;
    height: calc(100% + 24px) !important;
  }

  .foam-boundary-v21__bubble--1 { width: 8px !important; height: 8px !important; left: 8px !important; }
  .foam-boundary-v21__bubble--2 { width: 10px !important; height: 10px !important; left: 19px !important; }
  .foam-boundary-v21__bubble--3 { width: 7px !important; height: 7px !important; left: 5px !important; }
  .foam-boundary-v21__bubble--4 { width: 11px !important; height: 11px !important; left: 18px !important; }
  .foam-boundary-v21__bubble--5 { width: 8px !important; height: 8px !important; left: 9px !important; }
  .foam-boundary-v21__bubble--6 { width: 9px !important; height: 9px !important; left: 20px !important; }
  .foam-boundary-v21__bubble--7 { width: 7px !important; height: 7px !important; left: 8px !important; }

  @keyframes pwV22FoamBoundaryTravel {
    0% {
      left: -22px;
      opacity: 0;
    }

    8% {
      opacity: .92;
    }

    90% {
      opacity: .88;
    }

    100% {
      left: calc(100% + 6px);
      opacity: 0;
    }
  }
}

@media (max-width: 560px) {
  .foam-boundary-v21 {
    width: 30px !important;
  }
}

/* ==========================================================
   PRESSURE WASHING v23 — MOBILE CENTERING + TRUST STRIP
   - removes leftover exterior-template Services offset
   - centers kicker / grime H1 / paragraph on the true viewport
   - normalizes HOUSE WASHING / CONCRETE / DECKS & PATIOS
   ========================================================== */

@media (max-width: 860px) {
  /* The Exterior master reserved left-side space for the hanging bulb.
     Pressure Washing no longer needs that clearance. */
  .services--v27 .services__heading,
  .services--v27 .services-v27__heading {
    width: 100%;
    max-width: 100%;
    margin-inline: auto;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: center;
  }

  .services--v27 .services-v27__kicker {
    margin-inline: auto;
  }

  .services-v27__grime-title-v18 {
    width: 100%;
    margin-inline: auto;
    text-align: center;
  }

  .services-v27__grime-title-v18 .grime-title-v18__line {
    margin-inline: auto;
  }

  .services--v27 .services__heading > p {
    max-width: 34rem;
    margin-right: auto;
    margin-left: auto;
    text-align: center;
  }

  /* Normalize the three service labels. The third item previously inherited
     the old Efficiency Maine logo treatment, making it visibly smaller. */
  .proof__brands {
    width: 100%;
    max-width: none;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
  }

  .proof__brands .brand-mark,
  .proof__brands .brand-mark--house,
  .proof__brands .brand-mark--concrete,
  .proof__brands .brand-mark--outdoor {
    display: inline-flex;
    min-width: 0;
    align-items: center;
    justify-content: center;
    margin: 0;
    padding: 0;
    color: #27323c;
    border: 0 !important;
    font-size: clamp(.74rem, 3.15vw, .88rem) !important;
    font-style: normal !important;
    font-weight: 800 !important;
    line-height: 1;
    letter-spacing: -.015em !important;
    text-align: center;
    white-space: nowrap;
  }

  .proof__brands .brand-mark strong,
  .proof__brands .brand-mark--outdoor strong {
    display: inline;
    margin: 0 0 0 .22em;
    font: inherit !important;
    line-height: inherit !important;
    letter-spacing: inherit !important;
  }
}

@media (max-width: 420px) {
  /* Override the old 25px Exterior mobile heading offset as well. */
  .services--v27 .services__heading,
  .services--v27 .services-v27__heading {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .proof__brands {
    gap: 8px;
  }

  .proof__brands .brand-mark,
  .proof__brands .brand-mark--house,
  .proof__brands .brand-mark--concrete,
  .proof__brands .brand-mark--outdoor {
    font-size: clamp(.72rem, 3.05vw, .82rem) !important;
  }
}


/* ==========================================================
   CLEARPEAK IMAGE INTEGRATION — PASS 2
   Standardized generated-photo crops + exact brand accent.
   ========================================================== */

:root {
  --aqua: #ad0c11;
  --aqua-soft: #d30f15;
  --aqua-rgb: 173, 12, 17;
  --aqua-glow-rgb: 173, 12, 17;
  --water-rgb: 205, 218, 224;
}

.services-v27__grid .service-card-v27:nth-child(1) img { object-position: 32% 50%; }
.services-v27__grid .service-card-v27:nth-child(2) img { object-position: 48% 52%; }
.services-v27__grid .service-card-v27:nth-child(3) img { object-position: 54% 50%; }
.services-v27__grid .service-card-v27:nth-child(4) img { object-position: 58% 50%; }

.story__photo--main img { object-position: 50% 46%; }
.story__photo--trailer img { object-position: 50% 50%; }
.story__photo--equipment img { object-position: 48% 58%; }

.softwash-feature__photo--main img { object-position: 34% 50%; }
.softwash-feature__photo--detail img { object-position: 48% 50%; }

.project-reel__item img {
  filter: saturate(.98) contrast(1.01);
}

.button--aqua {
  background: #ad0c11;
}

.button--aqua:hover {
  background: #ad0c11;
  filter: brightness(1.04);
}


/* ==========================================================
   PASS 3 — PRODUCTION ACCESSIBILITY + ESTIMATE FORM
   Hidden from normal page flow; does not alter the locked design.
   ========================================================== */

.skip-link {
  position: fixed;
  z-index: 9999;
  top: 10px;
  left: 10px;
  padding: 11px 15px;
  color: var(--navy-950);
  background: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .78rem;
  font-weight: 800;
  text-transform: uppercase;
  transform: translateY(-180%);
  opacity: 0;
  pointer-events: none;
  transition: transform 160ms ease, opacity 160ms ease;
}

.skip-link:focus-visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.estimate-modal {
  width: min(960px, calc(100% - 32px));
  max-height: min(92vh, 920px);
  margin: auto;
  padding: 0;
  overflow: auto;
  color: var(--text);
  background: var(--white);
  border: 1px solid rgba(var(--primary-rgb), .12);
  border-radius: 4px;
  box-shadow: 0 34px 100px rgba(0,0,0,.38);
}

.estimate-modal::backdrop {
  background: rgba(3,13,22,.76);
  backdrop-filter: blur(5px);
}

.estimate-modal__shell {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr);
  min-height: 620px;
}

.estimate-modal__close {
  position: absolute;
  z-index: 5;
  top: 14px;
  right: 14px;
  display: grid;
  width: 42px;
  height: 42px;
  place-items: center;
  color: var(--navy-900);
  background: rgba(255,255,255,.94);
  border: 1px solid rgba(var(--primary-rgb),.12);
  border-radius: 50%;
  font-size: 1.7rem;
  line-height: 1;
  cursor: pointer;
  transition: transform 160ms ease, background-color 160ms ease;
}

.estimate-modal__close:hover { transform: rotate(4deg) scale(1.04); }
.estimate-modal__close:focus-visible,
.estimate-form input:focus-visible,
.estimate-form select:focus-visible,
.estimate-form textarea:focus-visible,
.estimate-form button:focus-visible {
  outline: 3px solid rgba(var(--aqua-rgb),.42);
  outline-offset: 2px;
}

.estimate-modal__intro {
  position: relative;
  overflow: hidden;
  padding: 64px 48px 46px;
  color: var(--white);
  background:
    radial-gradient(circle at 0% 0%, rgba(var(--aqua-rgb),.18), transparent 36%),
    linear-gradient(145deg, var(--navy-850), var(--navy-950) 72%);
}

.estimate-modal__intro::after {
  position: absolute;
  right: -100px;
  bottom: -120px;
  width: 270px;
  height: 270px;
  content: "";
  border: 1px solid rgba(var(--aqua-rgb),.18);
  border-radius: 50%;
  box-shadow: 0 0 0 36px rgba(var(--aqua-rgb),.025), 0 0 0 78px rgba(var(--aqua-rgb),.018);
}

.estimate-modal__eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--aqua);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.estimate-modal__eyebrow::before {
  width: 8px;
  height: 8px;
  content: "";
  background: currentColor;
  transform: rotate(45deg);
}

.estimate-modal__intro h2 {
  margin: 24px 0 0;
  font-family: "Barlow Condensed", "Archivo", Arial, sans-serif;
  font-size: clamp(3rem, 3.5vw, 3.65rem);
  font-weight: 800;
  letter-spacing: -.018em;
  line-height: .88;
  text-transform: uppercase;
}

.estimate-modal__intro h2 span { display: block; }

.estimate-modal__intro p {
  max-width: 380px;
  margin: 24px 0 0;
  color: rgba(255,255,255,.68);
  font-size: .92rem;
  line-height: 1.7;
}

.estimate-modal__trust {
  display: grid;
  gap: 12px;
  margin-top: 34px;
}

.estimate-modal__trust span {
  position: relative;
  padding-left: 21px;
  color: rgba(255,255,255,.86);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .74rem;
  font-weight: 700;
}

.estimate-modal__trust span::before {
  position: absolute;
  top: .4em;
  left: 1px;
  width: 7px;
  height: 7px;
  content: "";
  background: var(--aqua);
  transform: rotate(45deg);
}

.estimate-form {
  position: relative;
  padding: 58px 54px 44px;
  background: var(--white);
}

.estimate-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0,1fr));
  gap: 19px 18px;
}

.estimate-form__field {
  display: grid;
  gap: 8px;
  min-width: 0;
}

.estimate-form__field--wide { grid-column: 1 / -1; }

.estimate-form__field > span,
.estimate-form__contact legend {
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .025em;
  text-transform: uppercase;
}

.estimate-form__field b { color: var(--aqua); }

.estimate-form input:not([type="radio"]),
.estimate-form select,
.estimate-form textarea {
  width: 100%;
  min-height: 49px;
  padding: 12px 13px;
  color: var(--text);
  background: #f8fafb;
  border: 1px solid #d9e0e5;
  border-radius: 2px;
  font: inherit;
  font-size: .88rem;
  transition: border-color 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}

.estimate-form textarea {
  min-height: 104px;
  resize: vertical;
  line-height: 1.5;
}

.estimate-form input:not([type="radio"]):focus,
.estimate-form select:focus,
.estimate-form textarea:focus {
  background: var(--white);
  border-color: var(--aqua);
  box-shadow: 0 0 0 3px rgba(var(--aqua-rgb),.10);
}

.estimate-form__contact {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 18px;
  margin: 0;
  padding: 0;
  border: 0;
}

.estimate-form__contact legend {
  width: 100%;
  margin-bottom: 8px;
}

.estimate-form__contact label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: var(--gray-700);
  font-size: .82rem;
  font-weight: 600;
  cursor: pointer;
}

.estimate-form__contact input { accent-color: var(--aqua); }

.estimate-form__fine-print {
  margin: 18px 0 0;
  color: var(--gray-500);
  font-size: .68rem;
  line-height: 1.5;
}

.estimate-form__submit-row {
  display: grid;
  gap: 12px;
  margin-top: 20px;
}

.estimate-form__submit { width: 100%; }

.estimate-form__status {
  min-height: 20px;
  color: var(--gray-700);
  font-size: .76rem;
  font-weight: 600;
  line-height: 1.45;
}

.estimate-form__status.is-success { color: #166534; }
.estimate-form__status.is-error { color: #9f1239; }

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

body.estimate-modal-open { overflow: hidden; }

@media (max-width: 820px) {
  .estimate-modal {
    width: min(680px, calc(100% - 24px));
    max-height: calc(100vh - 24px);
  }

  .estimate-modal__shell { grid-template-columns: 1fr; }
  .estimate-modal__intro { padding: 50px 30px 34px; }
  .estimate-modal__intro h2 { max-width: 520px; }
  .estimate-modal__intro p { max-width: 560px; }
  .estimate-modal__trust { grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px 18px; }
  .estimate-form { padding: 36px 30px 34px; }
}

@media (max-width: 560px) {
  .estimate-modal {
    width: calc(100% - 14px);
    max-height: calc(100vh - 14px);
    border-radius: 2px;
  }

  .estimate-modal__close { top: 10px; right: 10px; }
  .estimate-modal__intro { padding: 52px 22px 29px; }
  .estimate-modal__intro h2 { font-size: 2.65rem; }
  .estimate-modal__intro p { margin-top: 18px; }
  .estimate-modal__trust { grid-template-columns: 1fr; gap: 8px; margin-top: 24px; }
  .estimate-form { padding: 29px 20px 26px; }
  .estimate-form__grid { grid-template-columns: 1fr; gap: 16px; }
  .estimate-form__field--wide { grid-column: auto; }
  .estimate-form__contact { grid-column: auto; }
  .estimate-form__submit { min-height: 56px; }
}

@media (prefers-reduced-motion: reduce) {
  .skip-link,
  .estimate-modal__close { transition: none !important; }
}


/* ==========================================================
   CLIENT BRAND — HERO + FOOTER TRAVELING ACCENT
   Brand accent only; pressure-washing spray remains water-toned.
   ========================================================== */
.hero-circuit__line,
.footer-circuit__line {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb), .18) 10%,
      rgba(var(--aqua-rgb), .38) 50%,
      rgba(var(--aqua-rgb), .18) 90%,
      transparent 100%
    ) !important;
}

.hero-circuit__charge,
.footer-circuit__charge {
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      rgba(var(--aqua-rgb), .18) 16%,
      rgba(var(--aqua-rgb), .68) 44%,
      var(--aqua) 65%,
      rgba(var(--aqua-rgb), .88) 79%,
      transparent 100%
    ) !important;
  filter:
    drop-shadow(0 0 5px rgba(var(--aqua-rgb), .88))
    drop-shadow(0 0 14px rgba(var(--aqua-rgb), .52)) !important;
}

/* Optional proof strip hidden — retain animated hero seam */
.proof--empty {
  height: 0;
  min-height: 0;
  border-bottom: 0;
}

.proof--empty .hero-circuit {
  top: 0;
}

/* No proof strip: Hero + header fill the desktop viewport */
@media (min-width: 861px) {
  .hero,
  .hero__inner {
    min-height: max(625px, calc(100svh - 90px));
  }
}

/* ==========================================================
   MOBILE HERO — LEFT-SIDE READABILITY
   Keep service/trust copy off the branded vehicle artwork.
   ========================================================== */

@media (max-width: 860px) {

  /* Keep the overall hero content full-width so the CTA can stay wide. */
  .hero__content {
    width: 100%;
    max-width: 100%;
  }

  /* Keep service copy inside the darker left portion of the photo. */
  .hero__service-line {
    max-width: 330px;
    margin-top: 18px;
    gap: 5px 8px;
    line-height: 1.5;
  }

  /* Stack trust points instead of letting the right column
     drift over the vehicle/logo. */
  .hero__trust {
    grid-template-columns: 1fr;
    max-width: 255px;
    gap: 11px;
    margin-top: 18px;
  }

  .hero__trust span {
    min-height: 18px;
    padding-left: 19px;
    font-size: .76rem;
    line-height: 1.3;
  }

  /* Give the text side a stronger localized dark field while
     allowing the Southern Shine vehicle to remain visible right. */
  .hero__media::after {
    background-image:
      var(--clearpeak-paper-dark),
      linear-gradient(
        90deg,
        rgba(var(--primary-dark-rgb), .97) 0%,
        rgba(var(--primary-dark-rgb), .91) 36%,
        rgba(var(--primary-dark-rgb), .58) 67%,
        rgba(var(--primary-dark-rgb), .20) 100%
      ),
      linear-gradient(
        180deg,
        rgba(var(--primary-dark-rgb), .16) 0%,
        rgba(var(--primary-dark-rgb), .22) 58%,
        rgba(var(--primary-dark-rgb), .64) 100%
      ) !important;
  }
}

/* ==========================================================
   MOBILE STORY STATS — LONG STATE NAME FIX
   ========================================================== */

@media (max-width: 420px) {
  .story__proof > div,
  .story__proof > div:first-child {
    grid-template-columns: 116px 1fr;
    column-gap: 14px;
  }

  .story__proof > div:nth-child(3) .story-v38__word {
    font-size: 1.45rem;
  }
}

/* ==========================================================
   SERVICE PAGE HERO + FORM — VERIFIED CURRENT FILE
   Restores the dedicated service-page layout to the user's
   current Southern Shine stylesheet and tightens desktop form
   proportions without redesigning the mobile experience.
   ========================================================== */

.hero--service-page {
  min-height: 720px;
}

.hero--service-page .hero__media::after {
  background:
    linear-gradient(
      90deg,
      rgba(var(--primary-dark-rgb), .99) 0%,
      rgba(var(--primary-dark-rgb), .97) 24%,
      rgba(var(--primary-dark-rgb), .90) 41%,
      rgba(var(--primary-dark-rgb), .66) 57%,
      rgba(var(--primary-dark-rgb), .40) 73%,
      rgba(var(--primary-dark-rgb), .28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(var(--primary-dark-rgb), .10),
      rgba(var(--primary-dark-rgb), .50)
    );
}

.hero--service-page .hero__inner {
  display: grid;
  min-height: 720px;
  grid-template-columns: minmax(0, 1fr) minmax(400px, 455px);
  gap: clamp(64px, 6vw, 92px);
  align-items: center;
  padding-block: 48px 52px;
}

.hero--service-page .hero__content {
  width: 100%;
  max-width: 620px;
}

.hero--service-page h1 {
  font-size: clamp(3.9rem, 4.65vw, 5.45rem);
}

.hero-estimate {
  overflow: hidden;
  color: var(--text);
  background: var(--white);
  border: 1px solid rgba(255,255,255,.22);
  border-radius: 3px;
  box-shadow: 0 28px 70px rgba(0,0,0,.30);
}

.hero-estimate__heading {
  padding: 20px 28px 16px;
  background: var(--white);
  border-bottom: 4px solid var(--aqua);
}

.hero-estimate__heading h2 {
  margin: 0;
  color: var(--navy-900);
  font-family: "Archivo", Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
}

.hero-estimate__heading p {
  margin: 7px 0 0;
  color: var(--gray-500);
  font-size: .77rem;
  line-height: 1.45;
}

.hero-estimate .estimate-form {
  padding: 20px 28px 22px;
}

.hero-estimate .estimate-form__grid {
  gap: 11px 14px;
}

.hero-estimate .estimate-form__field {
  gap: 6px;
}

.hero-estimate .estimate-form input:not([type="radio"]),
.hero-estimate .estimate-form select {
  min-height: 42px;
  padding: 8px 10px;
  font-size: .81rem;
}

.hero-estimate .estimate-form textarea {
  min-height: 72px;
  padding: 9px 10px;
  font-size: .81rem;
  line-height: 1.45;
}

.hero-estimate .estimate-form__contact {
  gap: 6px 14px;
}

.hero-estimate .estimate-form__contact legend {
  margin-bottom: 5px;
}

.hero-estimate .estimate-form__fine-print {
  margin-top: 10px;
  line-height: 1.4;
}

.hero-estimate .estimate-form__submit-row {
  gap: 8px;
  margin-top: 11px;
}

.hero-estimate .estimate-form__submit {
  min-height: 48px;
}

.hero-estimate .estimate-form__status:empty {
  display: none;
}

/* Keep a useful intermediate desktop/tablet composition. */
@media (max-width: 1080px) and (min-width: 901px) {
  .hero--service-page .hero__inner {
    grid-template-columns: minmax(0, 1fr) minmax(385px, 425px);
    gap: 44px;
  }

  .hero--service-page .hero__content {
    max-width: 585px;
  }

  .hero--service-page h1 {
    font-size: clamp(3.55rem, 5.1vw, 4.7rem);
  }

  .hero-estimate__heading,
  .hero-estimate .estimate-form {
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Stack the service-page hero before phone widths. */
@media (max-width: 900px) {
  .hero--service-page {
    min-height: 0;
  }

  .hero--service-page .hero__inner {
    min-height: 0;
    grid-template-columns: 1fr;
    gap: 34px;
    padding-block: 54px 60px;
  }

  .hero--service-page .hero__content {
    width: 100%;
    max-width: 700px;
  }

  .hero-estimate {
    width: min(100%, 700px);
  }
}

@media (max-width: 560px) {
  .hero--service-page .hero__inner {
    gap: 30px;
    padding-block: 42px 48px;
  }

  .hero--service-page h1 {
    font-size: clamp(3.15rem, 15vw, 4.2rem);
  }

  .hero--service-page h1 span {
    white-space: normal;
  }

  .hero-estimate__heading {
    padding: 22px 20px 18px;
  }

  .hero-estimate__heading h2 {
    font-size: 1.5rem;
  }

  .hero-estimate .estimate-form {
    padding: 23px 20px 24px;
  }

  .hero-estimate .estimate-form__grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }

  .hero-estimate .estimate-form__field--wide,
  .hero-estimate .estimate-form__contact {
    grid-column: auto;
  }

  .hero-estimate .estimate-form input:not([type="radio"]),
  .hero-estimate .estimate-form select {
    min-height: 46px;
  }

  .hero-estimate .estimate-form textarea {
    min-height: 88px;
  }

  .hero-estimate .estimate-form__fine-print {
    margin-top: 13px;
  }

  .hero-estimate .estimate-form__submit-row {
    margin-top: 14px;
  }

  .hero-estimate .estimate-form__submit {
    min-height: 54px;
  }
}