/* ==========================================================================
   Midland Cleanpro — recreation of the Squarespace homepage
   Design tokens pulled from the live site's computed styles.
   ========================================================================== */

:root {
  --blue:        #0d5ba6;
  --blue-tint:   rgba(13, 91, 166, 0.06);
  --red:         #ef1c24;
  --red-dark:    #cc1218;
  --gold:        #d4af37;
  --gold-bright: #f5cf5b;  /* for use on the blue band */
  --black:       #000;
  --white:       #fff;
  --ink:         #1b1b1b;
  --muted:       #4a4a4a;

  --font-head:   "Montserrat", "Helvetica Neue", Arial, sans-serif;
  --font-body:   "Poppins", "Helvetica Neue", Arial, sans-serif;

  --container:   1200px;
  --header-h:    96px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

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

h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 700;
  line-height: 1.13;
  margin: 0;
  letter-spacing: -0.01em;
}

a { color: inherit; }

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

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

.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--white);
  color: var(--black);
  padding: 12px 20px;
  z-index: 100;
}
.skip-link:focus { left: 0; }

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

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  text-decoration: none;
  border-radius: 6px;
  font-family: var(--font-head);
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 17px 30px;
  font-size: 16.5px;
  line-height: 1.25;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
  cursor: pointer;
  border: 0;
}

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

.btn--white   { background: var(--white); color: var(--black); font-family: var(--font-body); font-weight: 500; }
.btn--white:hover   { background: #e9e9e9; }

/* The site's outline buttons use a heavy 5px border */
.btn--outline-white { background: transparent; color: var(--white); border: 5px solid var(--white); }
.btn--outline-white:hover { background: var(--white); color: var(--black); }

.btn--outline-blue  { background: transparent; color: var(--blue); border: 5px solid var(--blue); }
.btn--outline-blue:hover  { background: var(--blue); color: var(--white); }

.btn--lg { font-size: 18px; padding: 19px 33px; }

/* ---------- Header ------------------------------------------------------- */

.header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 20;
  background: transparent;
}

.header__inner {
  display: flex;
  align-items: center;
  gap: 28px;
  min-height: var(--header-h);
  padding-top: 12px;
  padding-bottom: 12px;
}

.logo { display: flex; align-items: center; gap: 12px; text-decoration: none; flex: none; }
.logo svg { width: 58px; height: 58px; flex: none; }
.logo__text { line-height: 1; color: var(--white); }
.logo__top {
  display: block;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: .01em;
}
.logo__bottom {
  display: block;
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 34px;
  letter-spacing: -0.01em;
}

.nav { margin-left: auto; }
.nav ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px 26px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav a {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--white);
  text-decoration: none;
  padding: 4px 0;
  border-bottom: 2px solid transparent;
}
.nav a:hover,
.nav a[aria-current="page"] { border-bottom-color: var(--white); }

.nav-toggle {
  display: none;
  margin-left: auto;
  background: none;
  border: 0;
  color: var(--white);
  padding: 8px;
  cursor: pointer;
}
.nav-toggle svg { width: 30px; height: 30px; }

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

.hero {
  position: relative;
  min-height: 660px;
  display: flex;
  align-items: center;
  background: var(--black);
  overflow: hidden;
  padding: calc(var(--header-h) + 40px) 0 60px;
}

/* Fallback gradient sits behind the video so the hero still reads
   correctly before assets/hero.mp4 (or hero.jpg) is dropped in. */
.hero__media {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 90% at 70% 30%, #6b5f52 0%, #3a332c 55%, #1a1714 100%);
}
.hero__media video,
.hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* The still shows immediately; the clip fades in over it only once it has
   decoded, so a missing assets/hero.mp4 simply leaves the still in place. */
.hero__media video {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity .4s ease;
}
.hero__media video.is-ready { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.72) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.25) 100%);
}

.hero__inner { position: relative; z-index: 2; }

.hero h1 {
  color: var(--white);
  font-size: clamp(34px, 5.2vw, 60px);
  line-height: 1.09;
  max-width: 15ch;
  margin: 0 0 20px;
}

.hero__sub {
  color: var(--white);
  font-size: 18px;
  max-width: 60ch;
  margin: 0 0 32px;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}
.hero__actions .btn { min-height: 60px; }

/* ---------- Blue announcement strip -------------------------------------- */

.strip {
  background: var(--blue);
  text-align: center;
  padding: 18px 0;
}
.strip__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px 18px;
  color: var(--white);
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.4vw, 27px);
  text-decoration: none;
  line-height: 1.25;
}

/* balance stops a stray "12." landing alone on the second line when it does
   wrap; on wide screens it should simply sit on one line. */
.strip__lead { text-wrap: balance; }

.strip__hi {
  color: var(--gold-bright);
  font-weight: 800;
  white-space: nowrap;
}

/* A pill reads as pressable; the old full underline read as body-copy link */
.strip__more {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .62em;
  letter-spacing: .04em;
  padding: 8px 16px;
  border: 2px solid rgba(255, 255, 255, .55);
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color .18s ease, color .18s ease, border-color .18s ease;
}
.strip__link:hover .strip__more {
  background: var(--white);
  color: var(--blue);
  border-color: var(--white);
}

/* ---------- Generic sections --------------------------------------------- */

.section { padding: 76px 0; }
.section--tint { background: var(--blue-tint); }
.section--white { background: var(--white); }

.section__center { text-align: center; max-width: 900px; margin: 0 auto; }

.section h2 {
  font-size: clamp(27px, 3.4vw, 36.5px);
  color: var(--blue);
  margin: 0 0 18px;
}
.section--white h2 { color: var(--black); }

.section__lede {
  font-size: 17px;
  color: var(--muted);
  max-width: 62ch;
  margin: 0 auto 30px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  justify-content: center;
}
.actions .btn { min-height: 60px; }

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

.reviews {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 40px;
  text-align: left;
}

.review {
  background: var(--white);
  border: 1px solid #e4e7ea;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 14px rgba(0,0,0,.05);
}
.review__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.review__avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--blue); color: var(--white);
  display: grid; place-items: center;
  font-family: var(--font-head); font-weight: 700; font-size: 17px;
  flex: none;
}
.review__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.review__meta { font-size: 13px; color: #6b7280; }
.review__stars { color: #f4b400; letter-spacing: 2px; font-size: 16px; margin-bottom: 8px; }
.review__body { font-size: 15px; color: var(--muted); margin: 0; }

/* ---------- Service area / map ------------------------------------------- */

.area { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; align-items: center; }
.area h2 { margin-bottom: 16px; }
.area p { color: var(--muted); margin: 0 0 28px; }
.area .actions { justify-content: flex-start; }

.map {
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 6px 30px rgba(0,0,0,.14);
  aspect-ratio: 4 / 3;
  background: #dfe4e8;
}
.map iframe { width: 100%; height: 100%; border: 0; display: block; }

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

.footer {
  background: var(--black);
  color: var(--white);
  padding: 56px 0 40px;
}
.footer__grid {
  display: grid;
  grid-template-columns: 1.2fr repeat(3, 1fr);
  gap: 36px;
}
.footer h4 {
  font-size: 16px;
  margin: 0 0 14px;
  letter-spacing: .02em;
}
.footer ul { list-style: none; margin: 0; padding: 0; }
.footer li { margin-bottom: 8px; }
.footer a { color: rgba(255,255,255,.78); text-decoration: none; font-size: 15px; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__brand .logo { margin-bottom: 14px; }
.footer__tag { color: rgba(255,255,255,.65); font-size: 15px; margin: 0; }
.footer__bottom {
  margin-top: 40px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,.15);
  font-size: 13px;
  color: rgba(255,255,255,.55);
  display: flex;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

/* ---------- Responsive --------------------------------------------------- */

@media (max-width: 1080px) {
  .nav a { font-size: 16px; }
  .nav ul { gap: 6px 18px; }
}

@media (max-width: 900px) {
  .container { padding: 0 22px; }
  .header__inner { flex-wrap: wrap; }

  .reviews { grid-template-columns: 1fr; }
  .area { grid-template-columns: 1fr; gap: 32px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
  .section { padding: 56px 0; }
  .hero { min-height: 560px; }
  .hero__scrim { background: rgba(0,0,0,.6); }
}

@media (max-width: 560px) {
  .footer__grid { grid-template-columns: 1fr; }
  .hero__actions .btn,
  .actions .btn { width: 100%; }
  .logo__bottom { font-size: 27px; }
  .logo__top { font-size: 15px; }
  .logo svg { width: 46px; height: 46px; }
}

/* ==========================================================================
   Interior pages
   ========================================================================== */

/* ---- Interior page hero -------------------------------------------------- */

.pagehero {
  position: relative;
  background: var(--black);
  color: var(--white);
  padding: calc(var(--header-h) + 72px) 0 72px;
  overflow: hidden;
}
.pagehero__media {
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 75% 25%, #5d6570 0%, #313840 55%, #14181c 100%);
}
.pagehero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,.78) 0%, rgba(0,0,0,.5) 60%, rgba(0,0,0,.3) 100%);
}
.pagehero__inner { position: relative; z-index: 2; max-width: 760px; }

.eyebrow {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #8fc0ee;
  margin: 0 0 14px;
}

.pagehero h1 {
  font-size: clamp(30px, 4.6vw, 52px);
  line-height: 1.1;
  margin: 0 0 18px;
}
.pagehero p {
  font-size: 18px;
  color: rgba(255,255,255,.88);
  max-width: 58ch;
  margin: 0 0 30px;
}
.pagehero .actions { justify-content: flex-start; }

/* ---- Benefits grid ------------------------------------------------------- */

.benefits {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 26px;
  margin-top: 40px;
  text-align: left;
}
.benefit {
  background: var(--white);
  border: 1px solid #e2e7ec;
  border-left: 5px solid var(--blue);
  border-radius: 10px;
  padding: 26px 28px;
}
.benefit h3 {
  font-size: 20px;
  color: var(--blue);
  margin: 0 0 10px;
}
.benefit p { margin: 0; color: var(--muted); font-size: 15.5px; }

/* ---- Stats --------------------------------------------------------------- */

.stats {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
  margin-top: 40px;
}
.stat {
  text-align: center;
  padding: 26px 16px;
  background: var(--white);
  border-radius: 10px;
  border: 1px solid #e2e7ec;
}
.stat__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(32px, 4vw, 44px);
  color: var(--red);
  line-height: 1;
  margin-bottom: 10px;
}
.stat__label { font-size: 14px; color: var(--muted); line-height: 1.45; }

.stats__note {
  text-align: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--blue);
  margin: 34px 0 0;
}

/* ---- Before / after slider ---------------------------------------------- */

.ba {
  position: relative;
  aspect-ratio: 16 / 10;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 8px 34px rgba(0,0,0,.16);
  user-select: none;
  --split: 50%;
}
.ba__pane { position: absolute; inset: 0; }
.ba__pane img { width: 100%; height: 100%; object-fit: cover; }

/* Fallback texture so the control still reads before real photos land in assets/ */
.ba__pane--before { background: linear-gradient(135deg, #6f6152 0%, #4d4437 100%); }
.ba__pane--after  { background: linear-gradient(135deg, #cfe0f1 0%, #8fb7da 100%); }

.ba__pane--before { clip-path: inset(0 calc(100% - var(--split)) 0 0); z-index: 2; }

.ba__tag {
  position: absolute;
  top: 14px;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 12px;
  letter-spacing: .14em;
  padding: 6px 12px;
  border-radius: 4px;
  background: rgba(0,0,0,.6);
  color: var(--white);
  z-index: 4;
}
.ba__tag--before { left: 14px; }
.ba__tag--after  { right: 14px; }

.ba__line {
  position: absolute;
  top: 0; bottom: 0;
  left: var(--split);
  width: 3px;
  background: var(--white);
  transform: translateX(-50%);
  z-index: 5;
  pointer-events: none;
}
.ba__knob {
  position: absolute;
  top: 50%;
  left: var(--split);
  transform: translate(-50%, -50%);
  width: 46px; height: 46px;
  border-radius: 50%;
  background: var(--white);
  color: var(--blue);
  display: grid;
  place-items: center;
  font-size: 18px;
  box-shadow: 0 2px 10px rgba(0,0,0,.35);
  z-index: 6;
  pointer-events: none;
}
.ba__range {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: ew-resize;
  z-index: 7;
}

/* ---- Split content rows -------------------------------------------------- */

.split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 48px;
  align-items: center;
}
.split p { color: var(--muted); }
.split .actions { justify-content: flex-start; }

/* ---- Commercial service cards ------------------------------------------- */

.svc-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 34px;
}
.svc-card {
  display: block;
  text-decoration: none;
  background: var(--white);
  border: 1px solid #e2e7ec;
  border-radius: 10px;
  padding: 26px 22px;
  transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.svc-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(13,91,166,.14);
  border-color: var(--blue);
}
.svc-card__kicker { font-size: 13px; color: var(--muted); letter-spacing: .06em; text-transform: uppercase; }
.svc-card__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: var(--blue);
  margin-top: 6px;
}

/* ---- Numbered service detail -------------------------------------------- */

.svc-detail { padding: 64px 0; border-top: 1px solid #e6eaee; scroll-margin-top: 90px; }
.svc-detail__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 15px;
  color: var(--white);
  background: var(--blue);
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin-bottom: 16px;
}
.svc-detail h2 { font-size: clamp(24px, 3vw, 32px); margin-bottom: 16px; }

.ticks { list-style: none; margin: 0 0 22px; padding: 0; }
.ticks li {
  position: relative;
  padding-left: 30px;
  margin-bottom: 10px;
  color: var(--muted);
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 4px; top: 8px;
  width: 8px; height: 14px;
  border: solid var(--blue);
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

.idealfor {
  font-size: 14.5px;
  color: var(--muted);
  background: var(--blue-tint);
  border-radius: 8px;
  padding: 14px 18px;
  margin: 0;
}

/* ---- Contact form -------------------------------------------------------- */

.contactcard { margin-bottom: 26px; }
.contactcard h3 { font-size: 18px; color: var(--blue); margin: 0 0 6px; }
.contactcard p { margin: 0; color: var(--muted); }
.contactcard a { color: var(--blue); font-weight: 600; }


/* ---- Interior responsive ------------------------------------------------- */

@media (max-width: 1000px) {
  .stats { grid-template-columns: repeat(3, 1fr); }
  .svc-cards { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 900px) {
  .benefits { grid-template-columns: 1fr; }
  .split { grid-template-columns: 1fr; gap: 32px; }
  .pagehero { padding: calc(var(--header-h) + 48px) 0 52px; }
  .pagehero__scrim { background: rgba(0,0,0,.65); }
}

@media (max-width: 620px) {
  .stats { grid-template-columns: repeat(2, 1fr); }
  .svc-cards { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Real assets — logo, icons, review screenshots, photo heroes
   ========================================================================== */

/* The wordmark in the logo file is white, so it only reads on dark ground.
   Both places it appears (header over the hero, black footer) are dark. */
.logo img {
  height: 52px;
  width: auto;
  display: block;
}

/* Photo-backed interior hero */
.pagehero__media--photo {
  background-size: cover;
  background-position: center;
}

/* Benefit + service icons */
.benefit__icon {
  width: 54px;
  height: 54px;
  object-fit: contain;
  margin-bottom: 14px;
}
.svc-card__icon {
  width: 62px;
  height: 62px;
  object-fit: contain;
  margin-bottom: 12px;
}

/* Reviews: a rating badge above two Google review screenshots */
.rating-badge {
  display: block;
  width: 100%;
  max-width: 320px;
  height: auto;
  margin: 22px auto 6px;
}

.reviews--shots {
  grid-template-columns: repeat(2, 1fr);
  max-width: 1040px;
  margin-left: auto;
  margin-right: auto;
}
.review--shot { padding: 0; overflow: hidden; }
.review--shot img { width: 100%; height: auto; display: block; }

@media (max-width: 900px) {
  .reviews--shots { grid-template-columns: 1fr; }
  .logo img { height: 44px; }
}

/* Pre-composited before/after photo (labels are burned into the image) */
.ba-shot {
  width: 100%;
  max-width: 780px;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(0,0,0,.15);
  margin: 4px 0 24px;
}

/* ==========================================================================
   Header: keep the nav on one line
   The 1200px content container is too narrow for logo + 6 links + CTA, so the
   header gets its own wider container and slightly tighter nav metrics.
   ========================================================================== */

.header .container {
  max-width: 1460px;
}

.nav ul {
  flex-wrap: nowrap;
  gap: 22px;
}
.nav a {
  font-size: 16px;
  white-space: nowrap;
}

.logo img { height: 46px; }

/* Between the mobile breakpoint and full desktop, buy space by degrees
   rather than letting the row wrap. */
@media (max-width: 1330px) {
  .nav ul { gap: 17px; }
  .nav a { font-size: 15px; }
  .logo img { height: 42px; }
}

@media (max-width: 1120px) {
  .nav ul { gap: 13px; }
  .nav a { font-size: 14px; }
  .logo img { height: 38px; }
  .header__inner { gap: 16px; }
}

/* Below this the hamburger takes over, so restore comfortable sizing. */
@media (max-width: 900px) {
  .logo img { height: 44px; }
}

/* The one-line nav needs ~1050px. Below that the row would overflow sideways
   rather than wrap, so the hamburger has to take over above the 900px content
   breakpoint — hence its own breakpoint here. */
@media (max-width: 1080px) {
  .nav-toggle { display: block; margin-left: auto; }
  .header__inner { flex-wrap: wrap; gap: 14px; }
  .logo img { height: 44px; }

}

@media (max-width: 600px) {
  /* Logo + button + toggle no longer fit; the hero CTA sits just below anyway. */
}

/* ==========================================================================
   Commercial Services — boxed in gold to set it apart from residential links
   ========================================================================== */

.nav a.nav__gold {
  border: 2px solid var(--gold);
  border-radius: 6px;
  padding: 7px 15px;
  color: var(--white);
  transition: background-color .18s ease, color .18s ease;
}

/* Beat the generic .nav a:hover / [aria-current] underline rule, which would
   otherwise recolour this item's bottom border white. */
.nav a.nav__gold:hover,
.nav a.nav__gold[aria-current="page"] {
  background: var(--gold);
  color: #241d05;
  border-color: var(--gold);
}

/* In the stacked mobile menu the box should sit inline, not stretch full width. */
@media (max-width: 1080px) {
  .nav ul li:has(.nav__gold) { align-self: flex-start; }
  .nav a.nav__gold { padding: 6px 13px; margin: 4px 0; }
}

/* ==========================================================================
   Commercial services page — matches the original's layout
   ========================================================================== */

/* ---- Solid blue band ---------------------------------------------------- */

.section--blue { background: var(--blue); }
.section--blue h2,
.section--blue h3,
.section--blue p { color: var(--white); }
.section--blue .section__center h2 { color: var(--white); }

.xhead {
  font-size: clamp(26px, 3.3vw, 37px);
  color: var(--white);
  margin: 0 0 6px;
}
.xlede {
  color: rgba(255, 255, 255, .9);
  font-size: 15px;
  margin: 0 0 36px;
}

.xcards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.xcard { display: block; text-decoration: none; color: var(--white); }
.xcard__icon {
  width: 84px;
  height: 84px;
  object-fit: contain;
  margin-bottom: 16px;
}
.xcard__title {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(19px, 2.1vw, 27px);
  line-height: 1.18;
  color: var(--white);
  margin: 0 0 10px;
}
.xcard__desc {
  font-size: 15px;
  color: rgba(255, 255, 255, .88);
  margin: 0;
}
.xcard:hover .xcard__title { text-decoration: underline; }

/* ---- Numbered service sections ------------------------------------------ */

.svc-sec { padding: 74px 0; scroll-margin-top: 90px; }
.svc-sec--light { background: var(--white); }
.svc-sec--tint  { background: var(--blue-tint); }

.svc-sec__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}

.svc-sec__head {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 16px;
}
.svc-sec__num {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: clamp(40px, 5vw, 60px);
  line-height: 1;
  flex: none;
}
.svc-sec__head h2 {
  font-size: clamp(23px, 3.1vw, 37px);
  margin: 0;
}

/* Alternating type colour, matching the alternating backgrounds */
.svc-sec--light .svc-sec__num,
.svc-sec--light .svc-sec__head h2 { color: var(--black); }
.svc-sec--tint  .svc-sec__num,
.svc-sec--tint  .svc-sec__head h2 { color: var(--blue); }

.svc-sec__sub {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  margin: 0 0 10px;
}
.svc-sec__desc { color: var(--muted); margin: 0 0 24px; }

/* Five-across icon row used by the carpet section */
.svc-feats {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 26px;
}
.svc-feat img {
  width: 44px;
  height: 44px;
  object-fit: contain;
  margin-bottom: 10px;
}
.svc-feat span {
  display: block;
  font-size: 13px;
  line-height: 1.35;
  color: var(--muted);
}

/* Check-icon bullets used by the tile and VCT sections */
.svc-checks { list-style: none; margin: 0 0 24px; padding: 0; }
.svc-checks li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  color: var(--muted);
}
.svc-checks li img { width: 19px; height: 19px; margin-top: 4px; flex: none; }

.svc-sec__media { min-width: 0; }
.svc-sec__img {
  width: 100%;
  height: auto;
  border-radius: 10px;
  box-shadow: 0 6px 26px rgba(0, 0, 0, .15);
}

/* ---- Stats on solid blue ------------------------------------------------- */

.stats--blue .stat { background: transparent; border: 0; }
.stats--blue .stat__num { color: var(--white); font-size: clamp(34px, 4.4vw, 60px); }
.stats--blue .stat__label { color: rgba(255, 255, 255, .9); }
.stats--blue .stats__note { color: var(--white); }

/* ---- Responsive ---------------------------------------------------------- */

@media (max-width: 1000px) {
  .xcards { grid-template-columns: repeat(2, 1fr); gap: 32px; }
  .svc-feats { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .svc-sec__grid { grid-template-columns: 1fr; gap: 34px; }
  .svc-sec { padding: 54px 0; }
}

@media (max-width: 620px) {
  .xcards { grid-template-columns: 1fr; }
  .svc-feats { grid-template-columns: repeat(2, 1fr); }
}

/* ==========================================================================
   Commercial page — corrections to match the original's detail
   ========================================================================== */

/* Step number is a blue rounded-square badge with a white numeral, the same
   on both the white and tinted sections. Only the heading colour alternates. */
.svc-sec__num {
  background: var(--blue);
  color: var(--white);
  width: 88px;
  height: 88px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: clamp(34px, 4vw, 52px);
}
.svc-sec--light .svc-sec__num,
.svc-sec--tint  .svc-sec__num { color: var(--white); }

.svc-sec__head { align-items: center; gap: 22px; }

/* Blue lead-in line above the description */
.svc-sec__sub { color: var(--blue); font-size: 16px; }

/* Feature icons are centred over centred labels */
.svc-feat { text-align: center; }
.svc-feat img { margin: 0 auto 10px; }

.idealfor {
  background: transparent;
  padding: 0;
  font-size: 15px;
  margin-top: 4px;
}

/* Service cards on the blue band underline their titles */
.xcard__title { text-decoration: underline; text-underline-offset: 4px; }
.xcard:hover .xcard__title { text-decoration-thickness: 3px; }

/* ---- Benefits: icon beside the text, not above it ------------------------ */

.benefits__head {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: clamp(23px, 3vw, 30px);
  color: var(--black);
  margin: 0 0 34px;
  text-align: left;
}

.benefits { gap: 40px 48px; }

.benefit {
  display: grid;
  grid-template-columns: 108px 1fr;
  gap: 26px;
  align-items: start;
  background: transparent;
  border: 2px solid transparent;
  border-left: 2px solid transparent;
  border-radius: 12px;
  padding: 18px;
  transition: border-color .18s ease;
}
.benefit:hover { border-color: var(--blue); }

.benefit__icon {
  width: 108px;
  height: 108px;
  margin: 0;
}
.benefit h3 { color: var(--blue); font-size: 20px; margin: 0 0 8px; }
.benefit p { font-size: 15.5px; }

/* ---- Stats heading sits left on the blue band ---------------------------- */

.stats--blue .section__center {
  text-align: left;
  max-width: none;
  margin: 0;
}
.stats--blue .section__center h2 { margin-bottom: 34px; }

/* ---- Blue button + dark service-area heading ----------------------------- */

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

.area__head--dark { color: var(--black) !important; }

@media (max-width: 620px) {
  .benefit { grid-template-columns: 76px 1fr; gap: 18px; padding: 12px; }
  .benefit__icon { width: 76px; height: 76px; }
  .svc-sec__num { width: 66px; height: 66px; border-radius: 10px; }
}

/* ==========================================================================
   Residential pages — split rows with a before/after slider
   ========================================================================== */

.split__head { color: var(--blue); margin-bottom: 16px; }
.split__media { min-width: 0; }

/* Both residential pairs are ~3:2, so match that rather than cropping to 16:10 */
.split__media .ba { aspect-ratio: 3 / 2; }

@media (max-width: 900px) {
  /* Keep the image under its copy when the row stacks, whichever side it
     started on. */
  .split__media { order: 2; }
}

/* ==========================================================================
   Hero copy aligns to the logo
   The header uses a wider container than the page body, so hero text set in
   the default container started well to the right of the logo. Give the heroes
   the header's container width so both share one left edge.
   ========================================================================== */

.hero .container,
.pagehero .container { max-width: 1460px; }

/* This was `max-width: 760px` while still inheriting `margin: 0 auto`, which
   centred the whole block in the viewport instead of aligning it left. The
   copy is constrained per-element below instead. */
.pagehero__inner { max-width: none; }

.pagehero h1 { max-width: 18ch; }
.pagehero p  { max-width: 52ch; }

/* ==========================================================================
   Mobile navigation — fullscreen overlay with Call / Text at the top
   ========================================================================== */

/* On desktop the panel is a pass-through so the link row lays out as before. */
.nav__panel { display: contents; }
.nav__top,
.nav__cta,
.nav-close { display: none; }

@media (max-width: 1080px) {

  .nav {
    position: fixed;
    inset: 0;
    z-index: 60;
    display: block;                 /* replaces the old display:none toggle so it can animate */
    margin: 0;
    width: auto;
    background: rgba(8, 11, 16, .97);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    opacity: 0;
    visibility: hidden;
    transition: opacity .3s ease, visibility .3s ease;
    overflow-y: auto;
    overscroll-behavior: contain;
  }
  .nav.is-open { opacity: 1; visibility: visible; }

  .nav__panel {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    padding: 16px 22px 48px;
  }

  /* Top row mirrors the header so the overlay reads as the same surface */
  .nav__top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 34px;
  }
  .nav__top .logo img { height: 44px; }

  .nav-close {
    display: grid;
    place-items: center;
    width: 48px;
    height: 48px;
    background: none;
    border: 0;
    color: var(--white);
    cursor: pointer;
    margin-right: -8px;
  }
  .nav-close svg { width: 30px; height: 30px; }

  /* Primary actions sit above the links */
  .nav__cta {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 34px;
  }
  .nav__cta .btn {
    width: 100%;
    min-height: 60px;
    font-size: 16px;
    padding: 16px 12px;
  }

  .nav ul {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: none;
    border-radius: 0;
    padding: 0;
    margin: 0;
  }
  .nav ul li { border-bottom: 1px solid rgba(255, 255, 255, .13); }

  .nav a {
    display: block;
    font-size: 21px;
    padding: 19px 2px;
    border-bottom: 0;
    white-space: normal;
  }
  .nav a:hover,
  .nav a[aria-current="page"] { border-bottom-color: transparent; }

  /* The gold box shouldn't stretch the full row width */
  .nav ul li:has(.nav__gold) { border-bottom: 0; }
  .nav a.nav__gold {
    display: inline-block;
    margin: 14px 0;
    padding: 11px 17px;
    font-size: 19px;
  }

  /* Soft staggered entrance */
  .nav__cta,
  .nav ul li {
    opacity: 0;
    transform: translateY(10px);
    transition: opacity .34s ease, transform .34s ease;
  }
  .nav.is-open .nav__cta,
  .nav.is-open ul li { opacity: 1; transform: none; }

  .nav.is-open .nav__cta        { transition-delay: .05s; }
  .nav.is-open ul li:nth-child(1) { transition-delay: .10s; }
  .nav.is-open ul li:nth-child(2) { transition-delay: .14s; }
  .nav.is-open ul li:nth-child(3) { transition-delay: .18s; }
  .nav.is-open ul li:nth-child(4) { transition-delay: .22s; }
  .nav.is-open ul li:nth-child(5) { transition-delay: .26s; }
  .nav.is-open ul li:nth-child(6) { transition-delay: .30s; }
}

/* Hold the page still behind the overlay / modal */
body.nav-open,
body.modal-open { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .nav,
  .nav__cta,
  .nav ul li {
    transition: none !important;
    transform: none !important;
  }
}

/* ==========================================================================
   Google reviews — rendered from assets/reviews.json at build time
   ========================================================================== */

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

/* Aggregate badge */
.rv-badge {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 6px 0 8px;
}
.rv-badge__score {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  line-height: 1;
  color: var(--ink);
}
.rv-badge__count { font-size: 15px; color: var(--muted); }
.rv-badge .rv__stars { font-size: 24px; }

.rv__stars { color: #f4b400; letter-spacing: 2px; line-height: 1; }

/* Cards */
.rv-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 38px;
  text-align: left;
}

.rv {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid #e4e7ea;
  border-radius: 10px;
  padding: 24px;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .05);
}
.rv__head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.rv__avatar {
  width: 42px; height: 42px;
  border-radius: 50%;
  color: var(--white);
  display: grid;
  place-items: center;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 17px;
  flex: none;
}
.rv__name { font-family: var(--font-head); font-weight: 700; font-size: 15px; }
.rv__date { font-size: 13px; color: #6b7280; }
.rv__text {
  font-size: 15px;
  color: var(--muted);
  margin: 10px 0 0;
}

@media (max-width: 1000px) {
  .rv-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 680px) {
  .rv-grid { grid-template-columns: 1fr; }
  .rv-badge__score { font-size: 32px; }
}

}

/* ==========================================================================
   Comparison modal — steam cleaning vs. the CLEANPRO process
   ========================================================================== */

.strip a { cursor: pointer; }
.strip__more {
  display: inline-block;
  font-size: .72em;
  opacity: .92;
  white-space: nowrap;
}

.modal {
  border: 0;
  padding: 0;
  border-radius: 14px;
  width: calc(100% - 32px);
  max-width: 880px;
  background: var(--white);
  color: var(--ink);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .38);
}
.modal::backdrop {
  background: rgba(6, 10, 16, .74);
  -webkit-backdrop-filter: blur(3px);
  backdrop-filter: blur(3px);
}

.modal[open] { animation: modalIn .24s ease both; }
.modal[open]::backdrop { animation: modalFade .24s ease both; }
@keyframes modalIn {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}
@keyframes modalFade { from { opacity: 0; } to { opacity: 1; } }

.modal__panel { position: relative; padding: 36px 38px 32px; }

.modal__close {
  position: absolute;
  top: 14px;
  right: 14px;
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  background: none;
  border: 0;
  border-radius: 8px;
  color: var(--muted);
  cursor: pointer;
}
.modal__close:hover { background: #f0f3f6; color: var(--ink); }
.modal__close svg { width: 22px; height: 22px; }

.modal__title {
  font-size: clamp(21px, 2.6vw, 29px);
  color: var(--blue);
  margin: 0 8px 10px 0;
  padding-right: 40px;
}
.modal__lede { color: var(--muted); font-size: 16px; margin: 0 0 26px; }

.modal__kicker {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 18px;
  color: var(--ink);
  margin: 24px 0 0;
}
.modal__kicker strong { color: var(--blue); }

.modal__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 22px;
}
.modal__cta .btn { flex: 1 1 190px; min-height: 58px; }

/* ---- Comparison table --------------------------------------------------- */

.cmp {
  width: 100%;
  border-collapse: collapse;
  font-size: 15.5px;
}
.cmp thead th {
  font-family: var(--font-head);
  font-size: 13px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--muted);
  text-align: left;
  padding: 0 16px 10px;
  font-weight: 700;
}
.cmp tbody th {
  text-align: left;
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 15px;
  color: var(--ink);
  padding: 15px 16px;
  white-space: nowrap;
}
.cmp td { padding: 15px 16px; color: var(--muted); }
.cmp tbody tr + tr th,
.cmp tbody tr + tr td { border-top: 1px solid #e6eaee; }

/* The CLEANPRO column is the one to land on */
.cmp thead th.cmp__ours { color: var(--blue); }
.cmp td.cmp__ours {
  background: var(--blue-tint);
  color: var(--ink);
  font-weight: 600;
}
.cmp tbody tr:first-child td.cmp__ours { border-radius: 8px 8px 0 0; }
.cmp tbody tr:last-child  td.cmp__ours { border-radius: 0 0 8px 8px; }

/* ---- Responsive: stack each row as its own card instead of scrolling ----- */

/* Stays a true column/cell comparison on small screens — the grid is the
   whole point, so it tightens rather than restacking into cards. Extra width
   is reclaimed from the modal margin and cell padding. */
@media (max-width: 700px) {
  .modal { width: calc(100% - 18px); }
  .modal__panel { padding: 26px 13px 22px; }

  .cmp { font-size: 13.5px; }

  /* Column headers stay put while the rows scroll under them */
  .cmp thead th {
    font-size: 10.5px;
    letter-spacing: .04em;
    padding: 0 9px 8px;
    position: sticky;
    top: 0;
    background: var(--white);
    z-index: 2;
  }

  .cmp tbody th {
    width: 30%;
    font-size: 12.5px;
    padding: 12px 9px;
    white-space: normal;   /* labels may wrap rather than force overflow */
  }
  /* Fixed equal widths for the two value columns — left to auto-layout, the
     CLEANPRO column came out narrowest and wrapped more than the competitor's. */
  .cmp td { width: 35%; padding: 12px 9px; }

  .modal__cta .btn { flex: 1 1 100%; }
}

@media (max-width: 380px) {
  .cmp { font-size: 12.5px; }
  .cmp tbody th { font-size: 12px; padding: 11px 7px; }
  .cmp td { padding: 11px 7px; }
}

@media (prefers-reduced-motion: reduce) {
  .modal[open],
  .modal[open]::backdrop { animation: none; }
}


/* Strip: stack the pill under the claim once the row gets tight */
@media (max-width: 620px) {
  .strip { padding: 16px 0; }
  .strip__link { flex-direction: column; gap: 12px; font-size: 21px; }
  .strip__lead { max-width: 18ch; }
  .strip__more { font-size: 13px; padding: 9px 18px; }
}

/* ==========================================================================
   Contact page — three ways to reach us (replaced the form)
   ========================================================================== */

.reach {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 40px;
}

.reach__card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
  padding: 30px 28px 26px;
  border-radius: 12px;
  text-decoration: none;
  color: var(--white);
  min-height: 210px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, .12);
  transition: transform .18s ease, box-shadow .18s ease;
}
.reach__card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, .2);
}

.reach__card--red  { background: var(--red); }
.reach__card--blue { background: var(--blue); }
.reach__card--dark { background: #23282e; }

.reach__icon {
  width: 40px;
  height: 40px;
  margin-bottom: 12px;
  color: rgba(255, 255, 255, .95);
}

.reach__label {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
}
.reach__value {
  font-family: var(--font-head);
  font-weight: 700;
  font-size: 19px;
  color: rgba(255, 255, 255, .96);
  margin-top: 2px;
}
/* Email addresses are long — let them shrink and wrap rather than overflow */
.reach__value--email {
  font-size: 15.5px;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.reach__note {
  font-size: 14px;
  color: rgba(255, 255, 255, .8);
  margin-top: auto;
  padding-top: 12px;
}

@media (max-width: 900px) {
  .reach { grid-template-columns: 1fr; gap: 16px; }
  .reach__card { min-height: 0; padding: 24px 22px; }
  .reach__note { margin-top: 10px; padding-top: 0; }
}