:root {
  --bg: #ffffff;
  --bg-2: #f2f6fa;
  --ink: #0e1b2a;
  --muted: #5a6b7c;
  --line: rgba(14, 27, 42, 0.1);
  --blue: #1273be;
  --blue-dark: #0d5490;
  --blue-light: #4fb3e8;
  --font: "Inter", system-ui, sans-serif;
  --display: "Outfit", system-ui, sans-serif;
  --max: 1160px;
  --ease: cubic-bezier(.22, 1, .36, 1);
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; }
::selection { background: #bfe3f7; }

.wrap { width: min(var(--max), calc(100% - 36px)); margin: 0 auto; }
.skip { position: absolute; left: -9999px; }
.skip:focus { left: 12px; top: 12px; z-index: 80; background: var(--blue); color: #fff; padding: 10px 14px; }

header.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--ink);
  border-bottom: 1px solid transparent;
  transition: box-shadow .25s, border-color .25s;
}
header.nav.stuck {
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 10px 28px rgba(8, 14, 24, .35);
}
.progress { position: absolute; left: 0; top: 0; height: 2px; width: 0; background: linear-gradient(90deg, var(--blue), var(--blue-light)); }
.nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 84px; }
/* Logo is built for dark grounds — the dark nav bar is the backdrop, so no badge. */
.brand {
  display: inline-flex; align-items: center;
  transition: transform .22s var(--ease), opacity .22s;
}
.brand:hover { transform: translateY(-1px); opacity: .92; }
.brand img { height: 58px; width: auto; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a, .nav-links summary {
  padding: 8px 11px; font-weight: 550; font-size: 14.5px; color: rgba(255, 255, 255, .78);
  cursor: pointer; list-style: none; border-radius: 8px; transition: color .18s, background .18s;
}
.nav-links a:hover, .nav-links a[aria-current="page"], .nav-links summary:hover {
  color: #fff;
  background: rgba(255, 255, 255, .08);
}
.nav-links details { position: relative; }
.nav-links details ul {
  position: absolute; top: calc(100% + 6px); left: 0; min-width: 250px;
  background: #122033; border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px;
  padding: 8px; list-style: none; box-shadow: 0 18px 44px rgba(8, 14, 24, .45);
}
.nav-links details ul a { display: block; color: rgba(255, 255, 255, .82); }
.nav-links details ul a:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.call { display: flex; align-items: center; gap: 14px; color: #fff; }
.call-phone { text-align: right; }
.call small { display: block; font-size: 10px; letter-spacing: .13em; text-transform: uppercase; color: var(--blue-light); font-weight: 700; }
.call-phone a { font-weight: 800; font-size: 15px; color: #fff; }
.call-wa {
  display: inline-flex; align-items: center; gap: 6px;
  background: #25d366; color: #fff; font-size: 13px; font-weight: 700;
  padding: 8px 13px; border-radius: 9px;
  transition: background .18s, transform .18s var(--ease);
}
.call-wa:hover { background: #1fb457; color: #fff; transform: translateY(-1px); }
.menu-btn {
  display: none; background: rgba(255, 255, 255, .08); color: #fff;
  border: 1px solid rgba(255, 255, 255, .18); border-radius: 10px;
  padding: 9px 13px; font-weight: 700;
}

/* Quiet local-coverage band — breaks dark header into the hero without a marquee. */
.cover-strip {
  background: #f4f7fa;
  border-bottom: 1px solid var(--line);
}
.cover-strip-inner {
  display: flex; align-items: center; gap: 12px 18px;
  min-height: 42px; padding: 9px 0;
}
.cover-strip-label {
  flex: 0 0 auto;
  font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--blue);
}
.cover-strip-list {
  flex: 1 1 auto; min-width: 0;
  list-style: none; display: flex; flex-wrap: nowrap;
  align-items: center; overflow-x: auto; scrollbar-width: none;
  margin: 0; padding: 0;
}
.cover-strip-list li { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cover-strip-list li:not(:last-child)::after {
  content: "·";
  margin: 0 9px;
  color: #c5d0dc;
  font-weight: 700;
  line-height: 1;
}
.cover-strip-list a {
  font-size: 13px; font-weight: 550; color: var(--muted);
  white-space: nowrap; transition: color .18s;
}
.cover-strip-list a:hover { color: var(--ink); }
.cover-strip-list::-webkit-scrollbar { display: none; }
.cover-strip-more {
  flex: 0 0 auto;
  font-size: 13px; font-weight: 650; color: var(--blue);
  white-space: nowrap;
}
.cover-strip-more:hover { color: var(--blue-dark); }
.cover-strip--services { display: none; }
.cover-strip--services .cover-strip-list {
  gap: 8px;
  -webkit-overflow-scrolling: touch;
}
.cover-strip--services .cover-strip-list li:not(:last-child)::after { content: none; margin: 0; }
.cover-strip--services .cover-strip-list a {
  display: block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  font-weight: 650;
  color: var(--ink);
}
.cover-strip--services .cover-strip-list a:hover {
  border-color: var(--blue);
  color: var(--blue);
}
.cover-strip-hint { display: none; }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1.1;
}
h1 { font-size: clamp(2.15rem, 4.8vw, 3.6rem); }
h2 { font-size: clamp(1.7rem, 3.2vw, 2.5rem); }
h3 { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; }
.accent { color: var(--blue-light); }
.eyebrow {
  font-size: .72rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 14px;
}
.lede { font-size: 1.1rem; color: var(--muted); max-width: 40rem; }
.muted { color: var(--muted); }
.center { text-align: center; }
/* Two stacked sections mean the gap between them is double this number, which
   is what made the seams look empty. Keep it comfortable on a desktop and let
   the breakpoints below pull it in hard on a phone, where the scroll cost of a
   dead band is what stops people reaching the reviews and the quote form. */
.section { padding: 66px 0; }
.section.tint { background: var(--bg-2); }
.section.ink { background: var(--ink); color: #c3d1de; }
.section.ink h2, .section.ink h3 { color: #fff; }
.section.ink .eyebrow { color: var(--blue-light); }
.section.ink .lede { color: #93a6b8; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--blue); color: #fff; font-weight: 650; font-size: 15px;
  padding: 13px 24px; border-radius: 10px; border: 0; cursor: pointer;
  box-shadow: 0 6px 18px rgba(18,115,190,.24);
  transition: transform .2s var(--ease), background .2s, box-shadow .2s;
}
.btn:hover { transform: translateY(-2px); background: var(--blue-dark); color: #fff; box-shadow: 0 10px 24px rgba(18,115,190,.3); }
.btn.ghost { background: #fff; color: var(--ink); border: 1px solid var(--line); box-shadow: none; }
.btn.ghost:hover { background: #fff; color: var(--blue); border-color: var(--blue); }
.btn.on-dark { background: rgba(255,255,255,.1); color: #fff; border: 1px solid rgba(255,255,255,.4); box-shadow: none; backdrop-filter: blur(6px); }
.btn.on-dark:hover { background: rgba(255,255,255,.2); color: #fff; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

.hero {
  position: relative;
  min-height: min(90vh, 840px);
  display: grid; align-items: center;
  overflow: hidden;
  color: #fff;
  /* Resting split. Script drives it during the reveal; this value is what a
     visitor without JavaScript sees, so it has to read as a fair comparison.
     50% is also the centre of .wrap, which is the gutter between the copy and
     the quote card — anywhere else and the seam cuts through the headline. */
  --wipe: 50%;
}
.hero-media { position: absolute; inset: 0; pointer-events: none; }
.hero-media img.hero-photo {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: 50% 62%;
}
/* The dirty shot sits on top and is revealed from the left, so the divider
   travelling right is the patio getting cleaned. */
.hero-media img.hero-before { clip-path: inset(0 calc(100% - var(--wipe)) 0 0); }
.hero-seam {
  position: absolute; top: 0; bottom: 0; left: var(--wipe); z-index: 2;
  width: 2px; margin-left: -1px;
  background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.8) 30%, rgba(255,255,255,.8) 78%, rgba(255,255,255,.1));
}
/* Above .hero-inner, not level with it. The copy layer is transparent but it
   still hit-tests, so at a matching z-index the handle stayed visible through
   it while every real click landed on the layer in front. */
.hero-knob {
  position: absolute; top: 78%; left: var(--wipe); z-index: 3;
  transform: translate(-50%, -50%);
  width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.95); color: var(--blue);
  box-shadow: 0 10px 26px rgba(5,12,22,.42);
  cursor: ew-resize; pointer-events: auto; touch-action: none;
}
.hero-knob svg { width: 20px; height: 20px; }
.hero-tag {
  position: absolute; bottom: 18px; z-index: 2;
  font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  background: rgba(14,27,42,.55); color: #fff;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.hero-tag.b { left: 18px; }
.hero-tag.a { right: 18px; }
/* The copy and the quote card fill the middle of the hero, so the strip beneath
   them is the only place the before and after sit side by side in the open. A
   flat left-to-right gradient buried the moss in shadow and the transformation
   stopped reading, so the darkness is pooled behind the copy and lifts off the
   bottom of the frame instead. */
.hero::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(92% 76% at 20% 40%, rgba(6,14,24,.94) 0%, rgba(6,14,24,.82) 32%, rgba(6,14,24,.34) 62%, rgba(6,14,24,0) 80%),
    linear-gradient(180deg, rgba(8,18,30,.44) 0%, rgba(8,18,30,.3) 46%, rgba(8,18,30,.05) 100%);
}
.hero-inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: 1.04fr .96fr; gap: 46px;
  align-items: center; padding: 76px 0;
}
/* Carries the copy across the lighter part of the photo without needing the
   whole frame darkened for it. */
.hero-copy { max-width: 620px; text-shadow: 0 2px 20px rgba(6,14,24,.8); }
.hero .eyebrow { color: var(--blue-light); }
.hero .lede { color: rgba(255,255,255,.84); }
.hero h1 { text-wrap: balance; }
/* The biggest hesitation is "what is this going to cost me". Answering it above
   the fold, before anything has to be clicked, is worth the extra line. */
.hero-price {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px;
  margin: 16px 0 6px; font-size: 15.5px; font-weight: 600;
  color: rgba(255,255,255,.88);
}
.hero-price b { font-family: var(--display); font-size: 21px; font-weight: 700; color: #fff; }
.hero-price .sep { width: 1px; height: 18px; background: rgba(255,255,255,.26); }
.hero-price em {
  font-style: normal; font-size: 12.5px; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--blue-light);
}
.hero-rating {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 9px;
  margin-top: 20px; font-size: 14px; color: rgba(255,255,255,.82);
}
.hero-rating .stars { color: #ffc247; font-size: 15px; letter-spacing: 1px; }
.hero-rating strong { color: #fff; }
.hero-checks {
  list-style: none; margin: 22px 0 0; padding: 0;
  display: grid; gap: 9px;
}
.hero-checks li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 600; color: rgba(255,255,255,.92);
}
.hero-checks li::before {
  content: ""; flex: none; width: 18px; height: 18px; border-radius: 50%;
  background: #58d68d url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%230e1b2a' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.2 6.3l2.5 2.5L9.8 3.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}

/* Quote starter inside the hero: the visitor picks the job before scrolling. */
.hero-quote {
  background: rgba(255,255,255,.97);
  color: var(--ink); border-radius: 20px;
  padding: 24px 24px 20px;
  border: 1px solid rgba(255,255,255,.6);
  box-shadow: 0 30px 68px rgba(5,12,22,.44);
  backdrop-filter: blur(4px);
}
.hero-quote-lbl {
  font-size: .7rem; font-weight: 700; letter-spacing: .15em; text-transform: uppercase;
  color: var(--blue); margin-bottom: 7px;
}
.hero-quote h2 { font-size: 1.32rem; margin-bottom: 16px; }
.hero-picks { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.hero-pick {
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px;
  padding: 14px 14px 13px; border: 1.5px solid var(--line); border-radius: 14px;
  background: #fff;
  transition: border-color .18s, background .18s, transform .18s var(--ease), box-shadow .18s;
}
/* The two that price themselves are the ones worth clicking first, so they are
   tinted and carry a blue figure. The other two stay quiet rather than pretend. */
.hero-pick.instant { border-color: rgba(18,115,190,.38); background: #eff7ff; }
.hero-pick:hover {
  border-color: var(--blue); background: #eef7ff;
  transform: translateY(-2px); box-shadow: 0 10px 22px rgba(18,115,190,.16);
}
.hero-pick-ico {
  width: 34px; height: 34px; border-radius: 10px;
  display: grid; place-items: center;
  background: rgba(18,115,190,.1); color: var(--blue);
}
.hero-pick-ico svg { width: 19px; height: 19px; }
/* "Pressure washing" is longer than the other three labels and wraps in these
   narrow tiles, so it is tightened up rather than left sitting on loose lines. */
.hero-pick b { font-family: var(--display); font-size: 15px; font-weight: 600; line-height: 1.2; }
/* Live marker on the two tiles that price themselves on the spot. The blinking
   dot is doing the work here — it is the only moving thing in the card, so the
   eye lands on the tiles that pay off immediately. */
.hero-pick-flag {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: #0f8a48;
}
.hero-pick-flag i {
  flex: none; width: 7px; height: 7px; border-radius: 50%;
  background: #17b25d; animation: qw-flash 1.9s var(--ease) infinite;
}
@keyframes qw-flash {
  0% { box-shadow: 0 0 0 0 rgba(23, 178, 93, .55); }
  70% { box-shadow: 0 0 0 7px rgba(23, 178, 93, 0); }
  100% { box-shadow: 0 0 0 0 rgba(23, 178, 93, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero-pick-flag i { animation: none; }
}
.hero-pick-hint {
  display: flex; align-items: center; gap: 5px;
  font-size: 12.5px; color: var(--muted);
}
.hero-pick-hint.live { color: var(--blue); font-weight: 700; }
/* Chevron rather than a full button on each tile — it says "this goes
   somewhere" without four call-to-actions competing inside one card. */
.hero-pick-hint::after {
  content: ""; flex: none; width: 11px; height: 11px; background: currentColor;
  -webkit-mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 2.5 8 6l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4.5 2.5 8 6l-3.5 3.5'/%3E%3C/svg%3E") center / contain no-repeat;
  transition: transform .18s var(--ease);
}
.hero-pick:hover .hero-pick-hint::after { transform: translateX(3px); }
.hero-quote-foot {
  margin-top: 14px; font-size: 12.5px; color: var(--muted);
  text-align: center; line-height: 1.45;
}

/* Compact calculator that replaces the service tiles inside the hero card. */
.hq-top { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.hq-back {
  flex: none; width: 30px; height: 30px; border-radius: 9px;
  border: 1px solid var(--line); background: #fff; color: var(--ink);
  display: grid; place-items: center; cursor: pointer;
  transition: border-color .16s, color .16s;
}
.hq-back svg { width: 16px; height: 16px; }
.hq-back:hover { border-color: var(--blue); color: var(--blue); }
.hq-panel h2 { font-size: 1.2rem; margin: 0; }
.hq-lbl {
  margin: 13px 0 6px; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.hq-lbl:first-of-type { margin-top: 0; }
.hq-opts { display: grid; gap: 7px; }
.hq-grid-2 { grid-template-columns: repeat(2, 1fr); }
.hq-grid-3 { grid-template-columns: repeat(3, 1fr); }
.hq-grid-5 { grid-template-columns: repeat(5, 1fr); }
.hq-opt {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  min-height: 40px; padding: 8px 5px; cursor: pointer;
  border: 1.5px solid var(--line); border-radius: 11px; background: #fff;
  font-family: inherit; font-size: 13px; font-weight: 600; line-height: 1.2;
  color: var(--ink); text-align: center;
  transition: border-color .16s, background .16s, color .16s;
}
.hq-opt:hover { border-color: var(--blue); }
.hq-opt[aria-pressed="true"] { border-color: var(--blue); background: var(--blue); color: #fff; }
.hq-note { font-size: 11px; font-weight: 600; opacity: .72; }
.hq-price {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 3px 9px;
  margin: 15px 0 12px; padding-top: 13px; border-top: 1px solid var(--line);
}
.hq-price-lbl {
  width: 100%; font-size: 11px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
}
.hq-price strong { font-family: var(--display); font-size: 2.1rem; line-height: 1; color: var(--blue); }
.hq-per { font-size: 12.5px; color: var(--muted); }
.btn.fullw { display: flex; width: 100%; justify-content: center; }

/* Gutter quote. The same form is mounted inside the hero card and on
   /instant-gutter-quote/, so the picker keeps the compact hq-* look in both and
   only the booking half needs styling of its own. Booking expands underneath
   rather than replacing the picker: the price stays on screen and stays live,
   so a visitor can still change a side after they have started typing. */
.gq .req { color: #e0453a; }
.gq-book {
  margin-top: 4px; padding-top: 18px; border-top: 1px solid var(--line);
  animation: gq-open .22s var(--ease) both;
}
@keyframes gq-open {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}
.gq-book-title { font-size: 1.08rem; margin: 0 0 4px; }
/* Confirmation, shown where the send button was so it cannot be missed. */
.gq-done {
  text-align: center;
  padding: 22px 4px 6px;
  animation: gq-open .22s var(--ease) both;
}
.gq-done .gq-book-title { margin-bottom: 8px; }
.gq-done p { margin: 0 0 8px; }
.gq-done::before {
  content: "";
  display: block;
  width: 46px;
  height: 46px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 24px 24px no-repeat;
}
@media (prefers-reduced-motion: reduce) {
  .gq-done { animation: none; }
}
.gq-book .days { margin-bottom: 18px; }
.gq-book .btn { margin-top: 6px; }
/* The hero card is narrow, so the booking fields tighten up rather than
   pushing the card past the fold. */
.hq-panel .gq-book input,
.hq-panel .gq-book select,
.hq-panel .gq-book textarea { padding: 10px 12px; margin-bottom: 10px; }
.hq-panel .gq-book textarea { min-height: 68px; }
.hq-panel .gq-book .days label { padding: 6px 11px; font-size: 13px; }
@media (prefers-reduced-motion: reduce) {
  .gq-book { animation: none; }
}

.showcase-grid { margin-top: 20px; }
.showcase-item { margin: 0; }
.showcase-item figcaption {
  margin-top: 11px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.showcase-sub { margin: 36px 0 18px; font-size: 1.15rem; }

.job-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px;
  margin-top: 20px; align-items: start;
}
.job-shot { margin: 0; }
.job-shot img {
  /* height:auto is required or the intrinsic height attribute beats aspect-ratio. */
  display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover;
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(14,27,42,.1);
}
.job-shot figcaption {
  margin-top: 11px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.job-scope { margin: 26px 0 0; }
.job-scope-portraits {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px;
  margin-top: 18px; align-items: start;
}
.job-scope-portraits .job-scope { margin: 0; }
.job-scope img {
  display: block; width: 100%; height: auto;
  border-radius: 18px; border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(14,27,42,.1);
}
.job-scope.portrait img {
  max-height: 520px; object-fit: cover;
}
.job-scope figcaption {
  margin-top: 11px; font-size: 14px; font-weight: 600; color: var(--muted);
}

.pill {
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  color: #fff; border-radius: 999px; padding: 7px 15px 7px 11px;
  font-size: 13px; font-weight: 600; margin-bottom: 22px;
  backdrop-filter: blur(8px);
}
.pill .dot { width: 7px; height: 7px; border-radius: 50%; background: #58d68d; box-shadow: 0 0 0 4px rgba(88,214,141,.22); }

.stats {
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--ink); color: #c3d1de;
}
.stats div { padding: 26px 20px; border-right: 1px solid rgba(255,255,255,.09); }
.stats div:last-child { border-right: 0; }
.stats b { display: block; font-family: var(--display); font-size: 1.7rem; color: #fff; font-weight: 600; letter-spacing: -.02em; }
.stats span { font-size: 13px; color: #8ea1b4; }

.proof { background: #fff; padding: 42px 0 46px; border-bottom: 1px solid var(--line); }
.proof-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 24px; flex-wrap: wrap; margin-bottom: 20px;
}
.proof-title { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin-bottom: 16px; }
.rating-badge { display: flex; align-items: center; gap: 14px; }
.rating-score {
  font-family: var(--display); font-size: 3.1rem; font-weight: 700;
  line-height: 1; letter-spacing: -.04em; color: var(--blue);
}
.rating-badge .stars { display: block; margin-bottom: 2px; font-size: 15px; }
.rating-meta { font-size: 14.5px; color: var(--muted); }
.rating-meta strong { color: var(--ink); }
.rating-panel {
  display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--line); border-radius: 18px;
  padding: 18px 22px; margin-top: 20px;
}

.review-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.review-track {
  display: flex; gap: 18px; width: max-content;
  animation: marquee 78s linear infinite;
}
/* Hover-pause is mouse-only. On a phone the first tap latches :hover and
   the strip never starts again. Tap-to-pause uses .is-paused instead. */
@media (hover: hover) and (pointer: fine) {
  .review-marquee:hover .review-track,
  .review-marquee:focus-within .review-track { animation-play-state: paused; }
}
.review-marquee.is-paused .review-track { animation-play-state: paused; }
.review-track .review { flex: 0 0 340px; width: 340px; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

.areas {
  list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin-top: 20px;
}
.areas li {
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  font-size: 14.5px; font-weight: 550; color: var(--muted);
}
.areas li { padding: 9px 18px; }
.areas li:has(a) { padding: 0; transition: border-color .2s, color .2s; }
.areas li:has(a):hover { border-color: var(--blue); color: var(--blue); }
.areas li a { display: block; padding: 9px 18px; color: inherit; font-weight: 650; }

/* Price tables. The wrapper scrolls on narrow screens so the columns keep their
   width instead of wrapping into an unreadable squash. */
.ptable-wrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  margin: 26px 0 10px; background: #fff;
  border: 1px solid var(--line); border-radius: 14px;
}
.ptable { width: 100%; border-collapse: collapse; min-width: 460px; }
.ptable th, .ptable td { padding: 13px 16px; text-align: left; border-bottom: 1px solid var(--line); }
.ptable thead th {
  background: var(--bg-2); font-family: var(--display);
  font-size: 13.5px; font-weight: 650; letter-spacing: .02em; color: var(--muted);
}
.ptable tbody tr:last-child th, .ptable tbody tr:last-child td { border-bottom: 0; }
.ptable tbody th { font-weight: 650; white-space: nowrap; }
.ptable td { font-variant-numeric: tabular-nums; font-weight: 600; }
.ptable thead th.pop { color: var(--blue); }
.ptable-note { color: var(--muted); font-size: 14.5px; margin-top: 4px; }

/* On a phone the frequency comparison is the whole point of the table, so tighten
   the cells until all three columns fit rather than hiding one behind a scroll. */
@media (max-width: 560px) {
  .ptable { min-width: 0; }
  .ptable th, .ptable td { padding: 11px 8px; font-size: 14.5px; }
  .ptable thead th { font-size: 11.5px; letter-spacing: 0; }
}

.area-group { font-size: clamp(1.1rem, 1.7vw, 1.3rem); margin-bottom: 4px; }

.crumbs { font-size: 14px; color: var(--muted); margin-bottom: 18px; }
.crumbs a { color: var(--muted); }
.crumbs a:hover { color: var(--blue); }
.crumbs span[aria-hidden] { opacity: .45; margin: 0 4px; }
.crumbs [aria-current] { color: var(--ink); font-weight: 600; }

.grid-2 { display: grid; grid-template-columns: 1.05fr .95fr; gap: 44px; align-items: center; }
.grid-2.top { align-items: start; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.grid-svc { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 36px; }
.step {
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.11);
  border-radius: 16px; padding: 26px 24px;
  transition: border-color .2s, background .2s;
}
.step:hover { border-color: rgba(79,179,232,.5); background: rgba(255,255,255,.08); }
.step b {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px;
  background: rgba(79,179,232,.16); color: var(--blue-light);
  font-family: var(--display); font-size: 1rem; font-weight: 700; margin-bottom: 16px;
}
.step h3 { margin-bottom: 8px; }
.step p { color: #93a6b8; font-size: .95rem; }

.svc {
  display: grid; grid-template-columns: 148px 1fr; gap: 18px; align-items: center;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  min-height: 124px; padding-right: 18px;
  transition: border-color .22s, transform .22s var(--ease), box-shadow .22s;
}
.svc:hover { transform: translateY(-3px); border-color: rgba(18,115,190,.35); box-shadow: 0 14px 30px rgba(14,27,42,.08); }
.svc img { width: 148px; height: 124px; object-fit: cover; }
.svc.plain { grid-template-columns: 1fr; min-height: 0; padding: 20px 22px; }
.svc h3 { transition: color .18s; }
.svc:hover h3 { color: var(--blue); }
.svc p { color: var(--muted); font-size: .9rem; margin-top: 5px; }

.frame {
  border-radius: 18px; overflow: hidden; border: 1px solid var(--line);
  box-shadow: 0 22px 50px rgba(14,27,42,.1);
}
.frame img { width: 100%; height: 100%; object-fit: cover; min-height: 300px; }

.compare {
  position: relative; border-radius: 18px; overflow: hidden; min-height: 360px;
  user-select: none; cursor: ew-resize; border: 1px solid var(--line);
  touch-action: pan-y; /* phones: sideways drags move the slider, up and down still scrolls the page */
}
.compare img { -webkit-user-drag: none; pointer-events: none; }
.compare.portrait { aspect-ratio: 3 / 4; min-height: 0; }
.compare img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* The overlay is the "before" shot, revealed from the left as the handle moves. */
.compare .overlay { clip-path: inset(0 50% 0 0); }
.compare .bar { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: #fff; transform: translateX(-50%); }
.compare .knob {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 44px; height: 44px; border-radius: 50%; background: #fff; color: var(--blue);
  display: grid; place-items: center; font-weight: 800; box-shadow: 0 8px 22px rgba(0,0,0,.22);
}
.compare .tag {
  position: absolute; top: 14px; z-index: 2; font-size: 11px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; background: rgba(14,27,42,.6); color: #fff;
  padding: 5px 10px; border-radius: 999px; backdrop-filter: blur(4px);
}
.compare .tag.b { left: 14px; }
.compare .tag.a { right: 14px; }

.gal-block { margin-top: 42px; }
.gal-block:first-of-type { margin-top: 28px; }
.gal-block h2 { margin-bottom: 6px; }
.lede.slim { max-width: 42rem; margin-bottom: 0; }

.vid-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; margin-top: 22px;
}
.vid-card {
  display: flex; flex-direction: column; gap: 12px; text-align: left;
  background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit;
  font: inherit;
}
.vid-thumb {
  position: relative; border-radius: 18px; overflow: hidden;
  border: 1px solid var(--line); aspect-ratio: 16 / 10;
  box-shadow: 0 18px 40px rgba(14,27,42,.1);
  background: var(--ink);
}
.vid-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s var(--ease); }
.vid-card.portrait .vid-thumb { aspect-ratio: 4 / 5; }
.vid-card:hover .vid-thumb img, .vid-card:focus-visible .vid-thumb img { transform: scale(1.04); }
.vid-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: linear-gradient(180deg, transparent 40%, rgba(9,18,32,.45));
}
.vid-play svg {
  width: 54px; height: 54px; padding: 14px 12px 14px 16px; border-radius: 50%;
  background: rgba(255,255,255,.94); color: var(--blue);
  box-shadow: 0 10px 28px rgba(0,0,0,.28);
  transition: transform .22s var(--ease);
}
.vid-card:hover .vid-play svg, .vid-card:focus-visible .vid-play svg { transform: scale(1.08); }
.vid-meta { display: grid; gap: 3px; padding: 0 2px; }
.vid-meta strong { font-size: 1rem; line-height: 1.3; }
.vid-meta span { color: var(--muted); font-size: .88rem; }

.vid-lightbox {
  position: fixed; inset: 0; z-index: 80; display: grid; place-items: center;
  padding: 24px; background: rgba(8,14,24,.78); backdrop-filter: blur(6px);
}
.vid-lightbox[hidden] { display: none; }
.vid-lightbox-panel {
  width: min(920px, 100%); position: relative;
  background: #0b1522; border-radius: 18px; overflow: hidden;
  box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.vid-lightbox-close {
  position: absolute; top: 10px; right: 12px; z-index: 2;
  width: 40px; height: 40px; border: 0; border-radius: 50%;
  background: rgba(255,255,255,.12); color: #fff; font-size: 26px; line-height: 1;
  cursor: pointer;
}
.vid-lightbox-close:hover { background: rgba(255,255,255,.22); }
.vid-lightbox-panel.portrait { width: min(420px, 100%); }
.vid-lightbox-frame { position: relative; aspect-ratio: 16 / 9; background: #000; }
.vid-lightbox-panel.portrait .vid-lightbox-frame { aspect-ratio: 9 / 16; }
.vid-lightbox-frame iframe,
.vid-lightbox-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.vid-lightbox-frame video { background: #000; object-fit: contain; }
.vid-lightbox-title {
  margin: 0; padding: 14px 18px 16px; color: #e8eef6; font-size: .95rem; font-weight: 600;
}

.form-card {
  background: #fff; border: 1px solid var(--line); border-radius: 18px; padding: 26px;
  box-shadow: 0 18px 44px rgba(14,27,42,.07);
}
.form-card h3 { margin-bottom: 4px; }
.form-card .form-intro { color: var(--muted); font-size: .92rem; margin-bottom: 18px; }
.field-hint { color: var(--muted); font-size: .85rem; margin: -4px 0 14px; line-height: 1.4; }
label { display: block; font-weight: 600; font-size: 13px; margin: 0 0 6px; }
input, select, textarea {
  width: 100%; background: #f8fafc; border: 1px solid var(--line);
  border-radius: 10px; padding: 12px 14px; margin-bottom: 13px; color: var(--ink);
  transition: border-color .18s, box-shadow .18s, background .18s;
}
input:focus, select:focus, textarea:focus {
  outline: none; background: #fff; border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18,115,190,.14);
}
textarea { min-height: 92px; resize: vertical; }
.checks { display: grid; grid-template-columns: 1fr 1fr; gap: 9px 12px; margin: 8px 0 16px; }
.checks label, .radios label { font-weight: 450; display: flex; gap: 9px; align-items: center; margin: 0; font-size: 14px; }
.checks input, .radios input { width: auto; margin: 0; accent-color: var(--blue); }
.radios { display: flex; gap: 18px; margin: 0 0 15px; }
.hp { position: absolute; left: -9999px; }
.form-msg { display: none; padding: 12px; border-radius: 10px; margin-bottom: 14px; font-weight: 600; font-size: 14px; }
.form-msg.ok { display: block; background: #e6f6ec; color: #1c6b39; }
.form-msg.err { display: block; background: #fdecec; color: #9b1c1c; }
.price { font-family: var(--display); font-size: 2.6rem; font-weight: 700; color: var(--blue); letter-spacing: -.03em; }
.days { display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 15px; }
.days label { border: 1px solid var(--line); border-radius: 999px; padding: 8px 14px; cursor: pointer; background: #fff; transition: .18s; }
.days input { display: none; }
.days label:has(input:checked) { background: var(--blue); color: #fff; border-color: var(--blue); }

.review {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 17px 18px;
  display: flex; flex-direction: column; height: 100%;
}
.section.tint .review { box-shadow: 0 10px 26px rgba(14,27,42,.05); }
.stars { color: #f0a500; margin-bottom: 7px; letter-spacing: 2px; }
/* One long review used to set the height of the whole scrolling row. Clamping
   the quote keeps every card the same modest size — the full text is on
   /reviews/ and nobody reads a whole paragraph off a moving card anyway. */
.review p {
  color: var(--muted); margin-bottom: 11px; font-size: .93rem; flex: 1;
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.review footer { border-top: 1px solid var(--line); padding-top: 9px; }
.review footer b { display: block; font-size: .92rem; }
.review footer span { font-size: 12.5px; color: var(--muted); }

.faq details {
  background: #fff; border: 1px solid var(--line); border-radius: 12px;
  padding: 0; margin-bottom: 10px; transition: border-color .18s, box-shadow .18s;
}
.faq details[open] {
  border-color: rgba(18,115,190,.4);
  box-shadow: 0 8px 20px rgba(14, 27, 42, .06);
}
.faq summary {
  font-weight: 600; cursor: pointer; list-style: none;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 16px 18px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: "+"; flex: none; width: 26px; height: 26px; border-radius: 8px;
  background: var(--bg-2); color: var(--blue); font-weight: 700;
  display: grid; place-items: center; line-height: 1;
}
.faq details[open] summary::after { content: "–"; }
.faq details > p { color: var(--muted); padding: 0 18px 16px; margin: 0; }
.faq .lede { margin-bottom: 22px; }
.faq-tools { margin-bottom: 18px; }
.faq-tools input[type="search"] {
  width: 100%; padding: 13px 15px; border: 1.5px solid #d8e0ec; border-radius: 11px;
  font-size: 16px; margin-bottom: 12px; background: #fff;
}
.faq-tools input[type="search"]:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 115, 190, .15);
}
.faq-cats { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 10px; }
.faq-toggles { display: flex; gap: 14px; }
.text-btn {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--blue); font-weight: 650; font-size: 14px;
}
.text-btn:hover { color: var(--blue-dark); }
.faq-empty { color: var(--muted); margin: 8px 0 16px; }

.pick-label { font-size: 13px; font-weight: 700; color: var(--muted); margin: 18px 0 8px; }
.pick-row { display: flex; flex-wrap: wrap; gap: 8px; }
.pick {
  border: 1.5px solid #d8e0ec; background: #fff; color: var(--ink);
  border-radius: 999px; padding: 8px 14px; font-size: 14px; font-weight: 650;
  cursor: pointer; transition: border-color .15s, background .15s, color .15s, box-shadow .15s;
}
.pick:hover { border-color: var(--blue); color: var(--blue); }
.pick.on {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 6px 16px rgba(18, 115, 190, .22);
}
.addon-line { margin-top: 14px; font-size: 14.5px; color: var(--muted); min-height: 2.6em; }
.muted a { color: var(--blue); font-weight: 600; }

.include-list { display: grid; gap: 8px; }
.include {
  display: flex; align-items: flex-start; gap: 12px; text-align: left; width: 100%;
  border: 1.5px solid #d8e0ec; background: #fff; border-radius: 14px;
  padding: 12px 14px; cursor: pointer; transition: border-color .16s, box-shadow .16s;
}
.include:hover { border-color: var(--blue); }
.include.open {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 115, 190, .12);
}
.include-ic {
  flex: none; width: 22px; height: 22px; margin-top: 1px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2.2 6.3l2.5 2.5L9.8 3.5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.include b { display: block; font-size: 15px; color: var(--ink); }
.include small {
  display: none; margin-top: 4px; font-size: 13.5px; color: var(--muted); line-height: 1.45;
}
.include.open small { display: block; }

.page-mast { padding: 42px 0 58px; }
.page-mast h1 { max-width: 18ch; }
.service-hero { margin: 26px 0 34px; }
.service-hero img { width: 100%; max-height: 430px; object-fit: cover; border-radius: 18px; }
.service-hero.portrait {
  display: flex;
  justify-content: center;
}
.service-hero.portrait img {
  width: min(100%, 640px);
  max-height: none;
  height: auto;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 28%;
}
.service-split {
  display: grid;
  grid-template-columns: minmax(0, 0.92fr) minmax(280px, 1.08fr);
  gap: 36px;
  align-items: stretch;
  margin: 26px 0 40px;
}
.service-split .service-hero { margin: 0; }
.service-split .service-hero.portrait { display: block; }
.service-split .service-hero.portrait img {
  width: 100%;
  max-width: none;
}
.service-split-media {
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
}
.service-split-media .service-hero { flex: 0 0 auto; }
.service-split-thumbs {
  flex: 1 1 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  min-height: 170px;
}
.service-split-thumbs figure {
  margin: 0;
  min-height: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
}
.service-split-thumbs img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.mach-collage {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin: 26px 0 34px;
}
.service-split .mach-collage {
  margin: 0;
  height: 100%;
  align-content: stretch;
}
.mach-tile {
  position: relative;
  margin: 0;
  overflow: hidden;
  border-radius: 14px;
  border: 1px solid var(--line);
  min-height: 0;
  background: var(--ink);
}
.mach-tile img {
  display: block;
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  object-position: center 40%;
}
.service-split .mach-tile img { aspect-ratio: auto; min-height: 160px; }
.mach-tile__tag {
  position: absolute;
  left: 10px;
  bottom: 10px;
  padding: 4px 8px;
  border-radius: 6px;
  background: rgba(8, 14, 24, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.comm-vids {
  grid-template-columns: repeat(auto-fill, minmax(210px, 260px));
  margin-bottom: 8px;
}
.comm-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 26px;
}
.comm-shot { margin: 0; }
.comm-shot img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover;
  border-radius: 16px; border: 1px solid var(--line);
}
.comm-shot figcaption {
  margin-top: 10px; font-size: 14px; font-weight: 600; color: var(--muted);
}
.prose p, .prose li { color: var(--muted); margin-bottom: 15px; }
.prose ol, .prose ul { padding-left: 20px; }
.prose a { color: var(--blue); font-weight: 600; }
/* .prose a is more specific than .btn, so a button sitting inside prose would
   otherwise render blue text on the blue fill and disappear. */
.prose a.btn { color: #fff; }
.prose a.btn.ghost { color: var(--ink); }
.prose a.btn.ghost:hover { color: var(--blue); }
.prose h2, .prose h3 { margin: 10px 0 12px; }
.prose h2 { font-size: clamp(1.15rem, 1.9vw, 1.4rem); }
.prose h2 + p { margin-bottom: 26px; }

.site-footer { background: var(--ink); color: #93a6b8; padding: 42px 0 22px; }
.site-footer h3 { color: #fff; margin-bottom: 12px; font-size: 1rem; }
.site-footer a:hover { color: #fff; }
.site-footer p { margin-bottom: 4px; font-size: 14.5px; }
.foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 32px; }
.foot-logo { width: 215px; height: auto; margin-bottom: 18px; }
.tiny { font-size: 13px; margin-top: 32px; padding-top: 20px; border-top: 1px solid rgba(255,255,255,.1); opacity: .75; }

/* Phones: Call / WhatsApp / Quote sit inside the sticky header under the logo row, a slim
   44px bar that stays in reach while scrolling and never covers the page or the chips row. */
.dock {
  display: none; height: 44px;
  background: #fff; border-top: 1px solid rgba(255, 255, 255, .08); border-bottom: 1px solid var(--line);
  grid-template-columns: 1fr 1fr 1fr;
}
.dock a { display: flex; align-items: center; justify-content: center; height: 100%; padding: 0 6px; text-align: center; font-weight: 650; font-size: 14px; }
.dock a:nth-child(3) { background: var(--blue); color: #fff; }

/* Held back until the visitor is past the hero — it used to land on top of the
   main call to action on phones. */
.offer {
  position: fixed; right: 18px; bottom: 20px; z-index: 28;
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; max-width: 240px; box-shadow: 0 16px 38px rgba(14,27,42,.14);
  opacity: 0; visibility: hidden; transform: translateY(14px);
  transition: opacity .32s var(--ease), transform .32s var(--ease), visibility .32s;
}
.offer.show { opacity: 1; visibility: visible; transform: none; }
.offer small { color: var(--muted); font-size: 12px; }
.offer b { display: block; font-family: var(--display); font-size: 24px; font-weight: 700; color: var(--blue); }
.offer p { font-size: 13px; color: var(--muted); margin-top: 4px; }
.offer .offer-mini { display: none; }
.offer button { position: absolute; top: 6px; right: 9px; background: none; border: 0; font-size: 19px; cursor: pointer; color: var(--muted); }

.wa-fab {
  position: fixed; left: 20px; bottom: 22px; z-index: 29;
  width: 54px; height: 54px; border-radius: 50%;
  display: grid; place-items: center;
  background: #25d366; color: #fff;
  box-shadow: 0 10px 26px rgba(37, 211, 102, .4);
  transition: transform .22s var(--ease), box-shadow .22s;
}
.wa-fab svg { width: 30px; height: 30px; position: relative; z-index: 1; }
/* Slow outward ring so the button reads as a live contact option without nagging. */
.wa-fab::after {
  content: ""; position: absolute; inset: 0; border-radius: 50%;
  border: 2px solid #25d366; animation: wa-ping 3s var(--ease) infinite;
}
.wa-fab:hover { color: #fff; transform: translateY(-3px) scale(1.05); box-shadow: 0 14px 32px rgba(37, 211, 102, .5); }
@keyframes wa-ping {
  0% { transform: scale(1); opacity: .65; }
  75%, 100% { transform: scale(1.6); opacity: 0; }
}
.dock-wa { color: #0f9d4f; }

/* Service picker: chips rather than a wall of checkboxes. */
.picks { display: flex; flex-wrap: wrap; gap: 9px; margin: 10px 0 18px; }
.picks label {
  position: relative; display: inline-flex; align-items: center; gap: 9px;
  margin: 0; padding: 9px 15px 9px 12px; border-radius: 999px;
  border: 1px solid var(--line); background: #fff; cursor: pointer;
  font-size: 13.5px; font-weight: 550; color: var(--muted); line-height: 1.2;
  transition: border-color .2s, color .2s, background .2s, box-shadow .2s, transform .2s var(--ease);
}
.picks input { position: absolute; opacity: 0; width: 1px; height: 1px; margin: 0; pointer-events: none; }
.picks label::before {
  content: ""; flex: 0 0 auto; width: 16px; height: 16px; border-radius: 50%;
  border: 1.5px solid rgba(14, 27, 42, .22);
  background: #fff center / 10px 10px no-repeat;
  transition: border-color .2s, background-color .2s;
}
.picks label:hover { border-color: rgba(18, 115, 190, .5); color: var(--ink); }
.picks label:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(18, 115, 190, .25); }
.picks label:has(input:checked) {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 6px 16px rgba(18, 115, 190, .26);
  animation: pick-pop .34s var(--ease);
}
.picks label:has(input:checked)::before {
  border-color: #fff; background-color: #fff;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231273be' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M2 6.4l2.6 2.6L10 3.4'/%3E%3C/svg%3E");
}
@keyframes pick-pop {
  0% { transform: scale(.95); }
  55% { transform: scale(1.05); }
  100% { transform: scale(1); }
}

/* Compact three-step explainer: rules between the steps instead of boxes. */
.flow { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; margin-top: 30px; }
.flow-step { position: relative; }
.flow-step:not(:last-child)::after {
  content: ""; position: absolute; right: -15px; top: 4px; bottom: 2px;
  width: 1px; background: rgba(255, 255, 255, .13);
}
.flow-num {
  display: inline-flex; align-items: center; gap: 10px; margin-bottom: 9px;
  font-family: var(--display); font-size: .72rem; font-weight: 700;
  letter-spacing: .15em; text-transform: uppercase; color: var(--blue-light);
}
.flow-num i {
  width: 27px; height: 27px; border-radius: 9px; font-style: normal; font-size: .85rem;
  background: rgba(79, 179, 232, .16); display: grid; place-items: center;
}
.flow-step h3 { margin-bottom: 6px; }
.flow-step p { color: #93a6b8; font-size: .93rem; }
.section.slim { padding: 50px 0; }

.freq-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 22px; }
.freq-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 22px 20px 20px;
  display: flex; flex-direction: column; height: 100%; gap: 12px;
}
.freq-card.popular { border-color: rgba(18, 115, 190, .4); box-shadow: 0 10px 24px rgba(14, 27, 42, .06); }
.freq-when { font-size: 12px; font-weight: 700; color: var(--blue); margin-bottom: 8px; }
.freq-card h3 { margin-bottom: 12px; }
.freq-card ul { margin: 0; padding-left: 18px; color: var(--muted); font-size: 14.5px; flex: 1; }
.freq-card li { margin: 6px 0; }
.freq-card .btn { width: 100%; margin-top: auto; }
.freq-note { margin-top: 20px; font-size: 14.5px; color: var(--muted); max-width: 40rem; }

/* Quote cards: one clear price anchor and one button per service, so the four
   core jobs read as equally bookable rather than as an article to browse. */
.qcards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 26px; }
.qcard {
  display: flex; flex-direction: column; height: 100%; background: #fff;
  border: 1.5px solid var(--line); border-radius: 18px; overflow: hidden;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.qcard:hover {
  border-color: var(--blue); transform: translateY(-5px);
  box-shadow: 0 18px 36px rgba(14, 27, 42, .13);
}
.qcard-media { position: relative; display: block; }
.qcard-media img { width: 100%; height: 168px; object-fit: cover; }
.qcard-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(14, 27, 42, .34) 0%, rgba(14, 27, 42, 0) 55%);
}
.qcard-badge {
  position: absolute; top: 12px; left: 12px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(255, 255, 255, .95); color: var(--muted);
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  padding: 5px 11px; border-radius: 999px; box-shadow: 0 4px 12px rgba(14, 27, 42, .18);
}
.qcard.instant .qcard-badge { background: var(--blue); color: #fff; }
.qcard.instant .qcard-badge::before {
  content: ""; width: 6px; height: 6px; border-radius: 50%; background: #7ef3b0;
  box-shadow: 0 0 0 3px rgba(126, 243, 176, .3);
}
.qcard-body { display: flex; flex-direction: column; flex: 1; padding: 18px 18px 20px; }
.qcard-title {
  font-family: var(--display); font-size: 1.18rem; font-weight: 600;
  letter-spacing: -.01em; margin-bottom: 10px;
}
.qcard:hover .qcard-title { color: var(--blue); }
.qcard-list { display: flex; flex-direction: column; gap: 7px; }
.qcard-list span {
  position: relative; padding-left: 24px; font-size: 14px; color: var(--muted); line-height: 1.45;
}
.qcard-list span::before {
  content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: rgba(18, 115, 190, .12) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath fill='none' stroke='%231273be' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round' d='M2.2 6.3l2.5 2.5L9.8 3.5'/%3E%3C/svg%3E") center / 9px 9px no-repeat;
}
.qcard-price {
  display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap;
  margin-top: auto; padding: 16px 0 14px;
}
.qcard-price b {
  font-family: var(--display); font-size: 1.9rem; font-weight: 700;
  color: var(--blue); letter-spacing: -.03em; line-height: 1;
}
.qcard-price small { font-size: 13px; color: var(--muted); }
.qcard-price em {
  font-style: normal; font-family: var(--display); font-size: 1.05rem;
  font-weight: 600; color: var(--ink);
}
.qcard-cta { width: 100%; }
.qcard:hover .qcard-cta { background: var(--blue-dark); box-shadow: 0 10px 24px rgba(18, 115, 190, .3); }
.qcard-foot { margin-top: 10px; font-size: 12.5px; color: var(--muted); text-align: center; }

.trust-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-top: 24px; padding: 16px 0 0; border-top: 1px solid var(--line);
}
.trust-row div { display: flex; align-items: baseline; gap: 9px; }
.trust-row b {
  font-family: var(--display); font-size: 1.25rem; font-weight: 700;
  color: var(--blue); letter-spacing: -.02em;
}
.trust-row span { font-size: 13.5px; color: var(--muted); line-height: 1.35; }

.hub-form { margin-top: 34px; max-width: 36rem; }

/* The nav is sticky, so anchored sections need clearance or the heading lands
   underneath it. */
section[id], [id].hub-form { scroll-margin-top: 100px; }

/* Areas: real links carrying the postcode, rather than a wall of plain pills. */
.area-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; margin-top: 26px; }
.area-link {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  padding: 13px 16px; border: 1px solid var(--line); border-radius: 12px; background: #fff;
  transition: border-color .2s, transform .2s var(--ease), box-shadow .2s;
}
.area-link:hover { border-color: rgba(18, 115, 190, .45); transform: translateY(-2px); box-shadow: 0 10px 22px rgba(14, 27, 42, .07); }
.area-link b { font-weight: 650; font-size: 15px; transition: color .18s; }
.area-link:hover b { color: var(--blue); }
.area-link span { font-size: 11.5px; color: var(--muted); letter-spacing: .05em; white-space: nowrap; }
.area-more { margin-top: 26px; font-size: 14.5px; color: var(--muted); }

[data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s var(--ease), transform .6s var(--ease);
  transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .review-track { animation: none; flex-wrap: wrap; width: 100%; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn:hover, .svc:hover, .area-link:hover, .brand:hover, .qcard:hover { transform: none; }
  .wa-fab::after { animation: none; }
  .picks label:has(input:checked) { animation: none; }
}

@media (max-width: 900px) {
  .stats, .grid-2, .grid-3, .grid-svc, .foot-grid, .svc, .steps, .flow, .vid-grid, .freq-grid, .hero-inner, .service-split { grid-template-columns: 1fr; }
  .service-split-thumbs { flex: 0 0 auto; min-height: 0; }
  .service-split-thumbs figure { aspect-ratio: 3 / 4; }
  .service-split .mach-tile img { aspect-ratio: 3 / 4; min-height: 0; }
  .job-grid { grid-template-columns: repeat(2, 1fr); }
  .job-scope-portraits { grid-template-columns: 1fr; }
  .comm-grid { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 0; }
  .hero-inner { padding: 56px 0 60px; gap: 32px; }
  .hero-copy { max-width: none; }
  /* Stacked, the copy runs the full width and the quote card covers the rest,
     so there is no clear strip for the before and after to sit side by side.
     The photo is a backdrop here — darken it evenly and let the card lead. */
  .hero::after {
    background: linear-gradient(180deg, rgba(8,18,30,.8) 0%, rgba(8,18,30,.68) 48%, rgba(8,18,30,.54) 100%);
  }
  .qcards, .trust-row { grid-template-columns: repeat(2, 1fr); }
  .flow { gap: 22px; }
  .flow-step:not(:last-child)::after { right: auto; left: 0; top: auto; bottom: -11px; width: 100%; height: 1px; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .brand img { height: 48px; }
  .nav-inner { min-height: 72px; }
  .cover-strip-inner { gap: 10px; padding: 8px 0; min-height: 0; }
  .cover-strip-list li:not(:last-child)::after { margin: 0 7px; }
  .cover-strip-list a { font-size: 12.5px; }
  .cover-strip--areas { display: none; }
  .cover-strip--services { display: block; }
  .cover-strip--services .cover-strip-inner { position: relative; padding-right: 0; }
  /* Pills plus a sliced last chip beat a fade-out of plain text — a half
     visible chip is how you show a row keeps going. */
  .cover-strip--services .cover-strip-list {
    padding-right: 28px;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .cover-strip-hint {
    display: grid; place-items: center;
    position: absolute; right: 0; top: 0; bottom: 0; width: 36px;
    pointer-events: none;
    background: linear-gradient(90deg, transparent, #f4f7fa 55%);
    transition: opacity .2s;
  }
  .cover-strip-hint::after {
    content: "";
    width: 8px; height: 8px;
    margin-right: 4px;
    border-right: 2px solid var(--blue);
    border-bottom: 2px solid var(--blue);
    transform: rotate(-45deg);
  }
  .cover-strip--services.is-end .cover-strip-hint { opacity: 0; }
  /* The row scrolls sideways on a phone — fade the edge so the cut-off name
     reads as "there is more", not as broken text. */
  .cover-strip--areas .cover-strip-list {
    -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
    mask-image: linear-gradient(90deg, #000 calc(100% - 26px), transparent);
  }
  /* The bottom dock already carries a WhatsApp action on phones. */
  .wa-fab { display: none; }
  .stats { grid-template-columns: 1fr 1fr; }
  .stats div:nth-child(2) { border-right: 0; }
  .svc img { width: 100%; height: 170px; }
  .menu-btn { display: inline-flex; }
  .nav-links, .call { display: none; }
  header.nav.open .nav-links {
    display: flex; flex-direction: column; align-items: stretch;
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--ink); padding: 10px 16px 18px;
    border-bottom: 1px solid rgba(255, 255, 255, .08);
    box-shadow: 0 18px 30px rgba(8, 14, 24, .4);
  }
  .nav-links details ul {
    position: static; box-shadow: none; border: 0; padding-left: 10px;
    background: transparent;
  }
  .dock { display: grid; }
  /* A slim bar above the dock, rather than a card sitting over the page. */
  .offer {
    left: 10px; right: 10px; bottom: 12px; max-width: none;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 32px 9px 13px; border-radius: 12px;
  }
  .offer small { display: none; }
  .offer p { display: none; }
  .offer b { font-size: 17px; flex: none; }
  .offer .offer-mini { display: block; font-size: 12.5px; color: var(--muted); line-height: 1.35; }
  .offer .offer-mini strong { color: var(--ink); }
  .offer button { top: 50%; transform: translateY(-50%); right: 7px; }
  .checks { grid-template-columns: 1fr; }
  .hero { min-height: 0; }
  .hero-inner { padding: 40px 0 46px; gap: 22px; }
  .hero-quote { padding: 20px 18px 17px; }
  /* On a phone, getting the quote tiles onto the first screen matters more than
     the tick list — the same promises repeat further down the page. The price
     line earns its place because it is the reason people scroll at all. */
  .hero-checks { display: none; }
  .hero .lede { display: none; }
  .hero-price { margin: 14px 0 0; }
  .hero-rating { margin-top: 14px; }
  /* Stacked, the quote card covers the bottom of the photo, so the labels and
     the drag handle would both end up underneath it. There is no gutter for the
     seam to sit in either — it would run straight through the headline. */
  .hero-knob, .hero-tag, .hero-seam { display: none; }
  .section { padding: 42px 0; }
  .section.slim { padding: 36px 0; }
  .proof { padding: 32px 0 34px; }
  .proof-head { margin-bottom: 16px; }
  .review-track { animation-duration: 55s; }
  .review-track .review { flex-basis: 280px; width: 280px; }
  .rating-panel { padding: 15px 16px; margin-top: 16px; }
  .page-mast { padding: 32px 0 40px; }
  .qcards { margin-top: 20px; }
  .trust-row { margin-top: 18px; }
  .hub-form { margin-top: 26px; }
  .site-footer { padding: 34px 0 18px; }
}

/* ── Instant window quote (portal calculator, site-embedded) ── */
.wq { max-width: 760px; }
.wq-hero { text-align: center; margin-bottom: 8px; }
.wq-hero h1 .accent { color: var(--blue); }
.wq-hero .lede { margin-left: auto; margin-right: auto; }
.wq-sec { padding: 20px 0 4px; }
.wq-sec-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.wq-num {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  background: var(--blue); color: #fff; font-family: var(--display);
  font-weight: 700; font-size: 14px; display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 8px rgba(18, 115, 190, .35);
}
.wq-sec-head h2 { font-size: 1.2rem; margin: 0; }
.wq-grid { display: grid; gap: 10px; }
.wq-grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.wq-grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.wq-opt {
  border: 1.5px solid #d8e0ec; border-radius: 14px; background: #fff;
  padding: 12px 10px; cursor: pointer; text-align: center; transition: all .16s ease;
  position: relative; user-select: none; min-height: 92px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  -webkit-tap-highlight-color: transparent;
}
.wq-opt:hover { border-color: var(--blue); box-shadow: 0 1px 2px rgba(16, 35, 59, .05); }
.wq-opt.selected {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(18, 115, 190, .16), 0 6px 22px rgba(16, 35, 59, .08);
}
.wq-opt .wq-ic { color: var(--blue); margin-bottom: 6px; }
.wq-opt .wq-ic svg { width: 38px; height: 30px; display: block; }
.wq-opt .wq-label {
  font-family: var(--display); font-size: 13.5px; font-weight: 700;
  color: var(--ink); letter-spacing: -.01em;
}
.wq-tick {
  position: absolute; top: 10px; right: 10px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--blue); color: #fff; display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 6px rgba(18, 115, 190, .4);
}
.wq-tick svg { width: 12px; height: 12px; }
.wq-opt.selected .wq-tick, .wq-freq.selected .wq-tick { display: flex; }
.wq-beds { margin-top: 14px; }
.wq-beds-label { font-size: 13px; font-weight: 700; color: var(--muted); margin-bottom: 8px; }
.wq-beds-row { display: flex; gap: 10px; flex-wrap: wrap; }
.wq-bed {
  width: 48px; height: 48px; border-radius: 50%; border: 1.5px solid #d8e0ec; background: #fff;
  color: var(--ink); font-family: var(--display); font-size: 18px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center; transition: all .15s ease;
  -webkit-tap-highlight-color: transparent;
}
.wq-bed:hover { border-color: var(--blue); color: var(--blue); }
.wq-bed.selected {
  background: var(--blue); border-color: var(--blue); color: #fff;
  box-shadow: 0 10px 30px rgba(18, 115, 190, .18);
}
.wq-freq {
  border: 1.5px solid #d8e0ec; border-radius: 14px; padding: 14px; cursor: pointer;
  transition: all .16s ease; position: relative; min-height: 88px;
  -webkit-tap-highlight-color: transparent;
}
.wq-freq:hover { border-color: var(--blue); }
.wq-freq.selected { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 115, 190, .16); }
.wq-freq .wq-t { font-family: var(--display); font-weight: 700; font-size: 17px; color: var(--ink); }
.wq-freq .wq-amt { margin-top: 10px; font-size: 13.5px; color: var(--muted); }
.wq-freq .wq-amt b { color: var(--blue); font-size: 16px; font-family: var(--display); }
.wq-badge {
  display: inline-block; margin-top: 11px; font-size: 10px; font-weight: 800;
  letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px;
  background: var(--blue); color: #fff;
}
.wq-badge.muted { background: #eff6ff; color: #0a4fa0; }
.wq-price {
  border: 1.5px solid var(--blue); border-radius: 14px; background: #eff6ff;
  padding: 16px 18px; margin-top: 14px; text-align: center;
  box-shadow: 0 10px 30px rgba(18, 115, 190, .18);
}
.wq-price .wq-lbl {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--blue);
}
.wq-price .wq-big {
  font-family: var(--display); font-size: 46px; font-weight: 800; color: var(--ink);
  letter-spacing: -.03em; line-height: 1; margin-top: 4px;
}
.wq-price .wq-per { font-size: 13px; color: var(--muted); margin-top: 4px; }
.wq-caveat {
  font-size: 13px; color: var(--muted); line-height: 1.45;
  margin: 10px auto 0; max-width: 42ch;
}
.gq .wq-caveat, .hero-quote .wq-caveat {
  margin: 0 0 12px; max-width: none; text-align: left;
}
.wq-book { padding-top: 20px; }
.wq-book h2 { font-size: 1.25rem; margin-bottom: 4px; }
.wq-book .wq-lead { font-size: 14px; color: var(--muted); margin-bottom: 14px; }
.wq-field { margin-bottom: 12px; }
.wq-field > label {
  display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--muted); margin-bottom: 8px;
}
.wq-field .req { color: #e0453a; }
.wq-field input, .wq-field textarea {
  width: 100%; padding: 14px 15px; border: 1.5px solid #d8e0ec; border-radius: 11px;
  font-size: 16px; font-family: inherit; color: var(--ink); background: #fff;
  transition: border-color .15s, box-shadow .15s;
}
.wq-field textarea { min-height: 92px; resize: vertical; }
.wq-subhead { font-size: 1.05rem; margin: 8px 0 14px; }
.wq-radios { display: flex; gap: 18px; align-items: center; }
.wq-radios label { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; cursor: pointer; }
.wq-radios input { width: auto; accent-color: var(--blue); }
.wq-field input:focus {
  outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px rgba(18, 115, 190, .15);
}
.wq-two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wq-addr-list {
  width: 100%; border: 1.5px solid #d8e0ec; border-radius: 11px; margin-top: 10px;
  background: #fff; max-height: 260px; overflow-y: auto;
  box-shadow: 0 6px 22px rgba(16, 35, 59, .08); -webkit-overflow-scrolling: touch;
}
.wq-addr-head {
  padding: 9px 15px; font-size: 11.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted); background: #eff6ff;
  border-bottom: 1px solid #cfe3fb; position: sticky; top: 0;
}
.wq-addr-item {
  padding: 12px 15px; font-size: 14.5px; color: var(--ink); cursor: pointer;
  border-bottom: 1px solid var(--line);
}
.wq-addr-item:last-child { border-bottom: none; }
.wq-addr-item:hover, .wq-addr-item.active { background: #eff6ff; }
/* Address autocomplete: big tap rows, and room above the phone keyboard. */
.qw-ac-list .wq-addr-item { min-height: 46px; display: flex; align-items: center; line-height: 1.3; }
.qw-ac-list { overscroll-behavior: contain; }
.gq .qw-ac-list { margin: -4px 0 12px; }
.wq-addr-status {
  font-size: 12.5px; color: var(--muted); margin-top: 9px;
  display: flex; align-items: center; gap: 6px;
}
.wq-addr-status svg { width: 14px; height: 14px; flex: none; color: #0ca36b; }
.wq-addr-status.err { color: #e0453a; }
.wq-addr-status.err svg { color: #e0453a; }
.wq-addr-status.hint { color: var(--muted); }
.wq-area-note {
  margin-top: 11px; padding: 12px 14px; border-radius: 12px;
  font-size: 13px; line-height: 1.5; color: var(--ink);
  border: 1px solid var(--line); border-left-width: 3px; background: #f6f9fc;
}
.wq-area-note strong { display: block; margin-bottom: 3px; }
.wq-area-note a { color: var(--blue); font-weight: 600; }
.wq-area-note.ok { background: #f0fbf6; border-color: #cdeee0; border-left-color: #0ca36b; }
.wq-area-note.warn { background: #fff8ec; border-color: #f6e3c0; border-left-color: #e3921f; }
.wq-area-note.no { background: #fdf3f2; border-color: #f6d5d2; border-left-color: #e0453a; }
.wq-err { color: #e0453a; font-size: 13.5px; margin-top: 12px; text-align: center; display: none; }
.wq-note { font-size: 12px; color: var(--muted); text-align: center; margin-top: 10px; }
.wq-success { display: none; text-align: center; padding: 28px 0 8px; }
.wq-success .wq-tick-lg {
  width: 78px; height: 78px; border-radius: 50%; background: var(--blue); color: #fff;
  display: flex; align-items: center; justify-content: center; margin: 2px auto 18px;
  box-shadow: 0 10px 30px rgba(18, 115, 190, .18);
}
.wq-success .wq-tick-lg svg { width: 40px; height: 40px; }
.wq-recap {
  background: #eff6ff; border: 1px solid #cfe3fb; border-radius: 14px;
  padding: 15px 16px; margin: 20px 0 0; text-align: left;
}
.wq-recap .row { display: flex; justify-content: space-between; gap: 14px; padding: 6px 0; font-size: 14px; }
.wq-recap .k { color: var(--muted); }
.wq-recap .v { font-weight: 700; color: var(--ink); white-space: nowrap; }
.wq-contacts { display: flex; flex-direction: column; gap: 10px; margin-top: 22px; }
.wq-contacts .btn { width: 100%; }
.wq-btn-wa { background: #25d366 !important; box-shadow: 0 8px 22px rgba(37, 211, 102, .3) !important; }
.wq-btn-wa:hover { background: #1fb457 !important; }
.wq-aside { margin-top: 48px; }
@media (max-width: 560px) {
  .qcards { grid-template-columns: 1fr; gap: 14px; }
  /* Four one-line promises stacked into four rows cost most of a screen for no
     extra meaning. Two columns reads just as well and halves the height. */
  .trust-row { grid-template-columns: 1fr 1fr; gap: 12px 14px; }
  .trust-row div { flex-direction: column; gap: 1px; }
  .trust-row b { font-size: 1.1rem; }
  .trust-row span { font-size: 12.5px; }
  .section { padding: 34px 0; }
  .section.slim { padding: 30px 0; }
  .proof { padding: 26px 0 28px; }
  .review { padding: 14px 15px; }
  .review p { -webkit-line-clamp: 3; font-size: .9rem; }
  .page-mast { padding: 26px 0 32px; }
  .site-footer { padding: 28px 0 16px; }
  .wq-aside { margin-top: 28px; }
  .qcard-media img { height: 128px; }
  .qcard-body { padding: 15px 15px 17px; }
  .qcard-price { padding: 13px 0 12px; }
  section[id], [id].hub-form { scroll-margin-top: 128px; }
  .wq-grid.cols-3 { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  #wq-freq-grid.wq-grid.cols-3 { grid-template-columns: 1fr; }
  .wq-opt { min-height: 84px; padding: 10px 8px; }
  .wq-opt .wq-ic svg { width: 34px; height: 26px; }
  .wq-two { grid-template-columns: 1fr; }
  .wq-price .wq-big { font-size: 40px; }
}

/* Meet Dave / kit trust strip */
.meet-dave .meet-bullets {
  list-style: none; margin: 18px 0 22px; padding: 0;
  display: grid; gap: 11px;
}
.meet-dave .meet-bullets li {
  position: relative;
  padding-left: 28px;
  font-size: 15.5px; font-weight: 550; line-height: 1.45; color: var(--ink);
}
.meet-dave .meet-bullets li::before {
  content: "";
  position: absolute; left: 0; top: .28em;
  width: 18px; height: 18px; border-radius: 50%;
  background: var(--blue) url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center / 11px 11px no-repeat;
}
.meet-kit { margin: 0; }
.meet-kit .frame img {
  min-height: 280px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
}
.meet-kit figcaption {
  margin-top: 12px;
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  line-height: 1.45;
}
.meet-face { margin-top: 18px; max-width: 280px; }
.meet-face img { min-height: 0; aspect-ratio: 4 / 5; object-fit: cover; }

/* Monster mascots, static v1 (Sep 2026) */
.qw-hq-wrap { position: relative; }
.qw-hq-wrap .hero-quote { position: relative; z-index: 1; }
.qw-peek { position: absolute; left: 0; right: 0; bottom: calc(100% - 18px); z-index: 0; display: flex; justify-content: space-between; padding: 0 44px; pointer-events: none; }
.qw-peek img { width: 150px; height: auto; filter: drop-shadow(0 10px 18px rgba(5,12,22,.35)); }
.qw-peek img.qw-g { transform: scaleX(-1); }
.qw-mast-peek { position: relative; height: 0; z-index: 0; pointer-events: none; }
.qw-mast-peek img { position: absolute; right: 64px; bottom: -30px; width: 150px; height: auto; }
.qw-mast-peek + * { position: relative; z-index: 1; }
.qw-ig { position: relative; }
.qw-ig [data-gutter-quote-app] { position: relative; z-index: 1; }
.qw-ig-side { position: absolute; left: calc(100% + 34px); top: 118px; width: 170px; height: auto; pointer-events: none; }
.qw-ig-peek { display: none; }
.qw-err { display: grid; grid-template-columns: auto 1fr; gap: 44px; align-items: center; max-width: 780px; margin: 0 auto; text-align: left; }
.qw-err img { width: 210px; height: auto; }
.qw-err h1 { margin-bottom: 10px; }
.qw-err p { font-size: 1.08rem; color: var(--muted); }
.qw-err .actions { margin-top: 22px; }
@media (max-width: 1180px) {
  .qw-ig-side { display: none; }
  .qw-ig-peek { display: block; position: relative; height: 0; z-index: 0; pointer-events: none; }
  .qw-ig-peek img { position: absolute; right: 16px; bottom: -22px; width: 92px; height: auto; }
  .qw-ig h1 { margin-bottom: 64px; }
}
@media (max-width: 900px) {
  .qw-hq-wrap { margin-top: 64px; }
  .qw-peek { padding: 0 22px; bottom: calc(100% - 20px); }
  .qw-peek img { width: 92px; }
  .qw-mast-peek + * { margin-top: 70px; }
  .qw-mast-peek img { right: 18px; bottom: -84px; width: 100px; }
}
@media (max-width: 700px) {
  .qw-err { grid-template-columns: 1fr; gap: 18px; text-align: center; }
  .qw-err img { width: 140px; margin: 0 auto; }
  .qw-err .actions { justify-content: center; }
}

/* Monster mascots, animation layer v1 (Sep 2026). Pairs with /assets/js/monsters.js.
   Append after the static mascot rules. Everything the script adds is absolutely
   positioned and ignores the pointer, so it cannot shift layout or block clicks. */
.qw-err { position: relative; }
.qw-anim { position: absolute; left: 0; top: 0; pointer-events: none; }
.qw-anim-grime { z-index: 1; }
img.qw-live { will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  img.qw-live { transform: none !important; }
}


/* CRO fixes, 25 Sep 2026 */
/* Areas grid: long names and postcodes must never widen the page on phones. */
.area-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.area-grid > * { min-width: 0; }
@media (max-width: 900px) {
  .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 560px) {
  .area-link { flex-wrap: wrap; gap: 2px 10px; padding: 12px 14px; }
  .area-link span { white-space: normal; }
}
/* Tap targets: inline quote tool links and the calculator radios, at least 24px. */
.prose a[href^="/window-cleaning-quote/"] { display: inline-block; padding: 4px 0; line-height: 1.25; min-height: 24px; }
.wq-radios { flex-wrap: wrap; gap: 10px; }
.wq-radios label {
  min-height: 44px; padding: 10px 16px; border: 1.5px solid #d8e0ec; border-radius: 11px; background: #fff;
  text-transform: none; letter-spacing: normal; font-weight: 600; color: var(--ink); margin-bottom: 0;
}
.wq-radios label:has(input:checked) { border-color: var(--blue); background: #f2f8fd; }
.wq-field .wq-radios input { width: 22px; height: 22px; padding: 0; margin: 0; flex: none; }
.wq-setup-link { margin-top: 16px; font-size: 14.5px; }
.wq-setup-link a { color: var(--blue); font-weight: 600; text-decoration: underline; }

/* Window pages: price block, trust block and the price card that replaced the form (Sep 2026). */
.qw-price { margin: 14px 0 18px; padding: 18px 18px 16px; border-radius: 18px; background: #fff; border: 1px solid #d9e4f0; box-shadow: 0 10px 30px rgba(12, 40, 80, .08); max-width: 640px; }
.qw-from { margin: 0 0 10px; font-size: 15px; color: #4a5a6e; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.qw-from b { font-size: 40px; line-height: 1; color: #0f1b2d; letter-spacing: -.02em; }
.qw-chips { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.qw-chips li { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; background: #eef5fc; color: #0f1b2d; font-size: 13px; font-weight: 600; margin: 0; }
.qw-chips li::before { content: none; display: none; }
.qw-star { width: 15px; height: 15px; color: #f5b301; flex: none; }
.btn.qw-big { display: flex; justify-content: center; align-items: center; width: 100%; min-height: 56px; font-size: 19px; }
.qw-sub { margin: 10px 0 0; font-size: 14px; color: #4a5a6e; text-align: center; }
.qw-cta-card { padding: 18px; border-radius: 16px; background: #eef5fc; border: 1px solid #d9e4f0; }
.qw-cta-card h3 { margin: 0 0 6px; }
.qw-cta-card p { margin: 0 0 12px; }
.qw-trust { margin: 14px 0 4px; padding: 14px; border-radius: 16px; background: #f6f9fc; border: 1px solid #e1e9f2; display: grid; grid-template-columns: 64px 1fr; gap: 12px; align-items: center; text-align: left; }
.qw-trust-mark { width: 64px; height: 64px; border-radius: 50%; background: #e3f0fb; overflow: hidden; display: flex; align-items: flex-end; justify-content: center; }
.qw-trust-mark img { width: 60px; height: auto; display: block; }
.qw-trust ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; font-size: 14px; color: #0f1b2d; }
.qw-trust ul li { display: block; margin: 0; padding: 0; line-height: 1.35; }
.qw-trust ul li::before { content: none; display: none; }
.qw-stars { display: inline-flex; gap: 1px; vertical-align: -2px; margin-right: 4px; }
.qw-stars .qw-star { width: 14px; height: 14px; }
.qw-trust .qw-tick { color: #1a8a4a; font-weight: 800; }
.qw-trust .qw-setup { grid-column: 1 / -1; margin: 2px 0 0; font-size: 15px; }
.qw-trust .qw-setup a { color: #0e6fc4; text-decoration: underline; font-weight: 600; display: inline-block; padding: 6px 0; }
.wq-book .qw-trust { margin: 6px 0 14px; }
/* Calculator: optional tags and per-field errors (validation only, never for the address lookup). */
.wq-optional { font-weight: 500; text-transform: none; letter-spacing: 0; color: #6b7c90; }
.wq-field input.wq-invalid { border-color: #d33; box-shadow: 0 0 0 3px rgba(221, 51, 51, .18); }
.wq-radios.wq-invalid { outline: 2px solid #d33; outline-offset: 4px; border-radius: 12px; }
.wq-fielderr { color: #c22; font-size: 13px; margin: 6px 0 0; font-weight: 600; }

/* Confirmation cards: a thumbs-up monster instead of the tick (Sep 2026). */
.qw-done-monster { display: block; width: 190px; max-width: 62%; height: auto; margin: 0 auto 10px; }
.gq-done::before { content: none; display: none; }
.wq-success:focus, .gq-done:focus { outline: none; }
.wq-success:focus-visible, .gq-done:focus-visible { outline: 2px solid var(--blue); outline-offset: 6px; border-radius: 12px; }
@media (max-width: 900px) {
  /* Header plus the 44px dock: anchors and focus land below both. */
  html { scroll-padding-top: 128px; }
}

/* Price caveat on the confirmation cards (Sep 2026). */
.qw-caveat { font-size: 13.5px; line-height: 1.45; color: var(--muted); margin: 14px auto 4px; max-width: 34rem; }
.gq-done .qw-caveat { margin: 4px auto 8px; }

/* Mobile monster fix (Sep 2026). Phones and small tablets only, desktop untouched.
   The peeking monsters used to be tucked behind the next block (home quote card,
   instant gutter quote card, service page photo), so on phones only their heads showed.
   Now each monster sits in the normal flow directly above that block, touching its
   top edge without being covered by it. */
@media (max-width: 900px) {
  /* Home hero: full body monsters standing on top of the "Get your price" card. */
  .qw-hq-wrap { margin-top: 0; }
  .qw-peek {
    position: relative; left: auto; right: auto; bottom: auto;
    align-items: flex-end; padding: 0 22px; margin-top: -12px;
  }
  .qw-peek img { width: 84px; }
  .qw-peek img.qw-b { content: url(/assets/img/brand/window-monster-360.webp); }
  /* monsters.js draws the top of the pole and the brush itself, so it wants the art without the pole. */
  .qw-peek img.qw-b.qw-live { content: url(/assets/img/brand/window-monster-body-360.webp); }
  .qw-peek img.qw-g { content: url(/assets/img/brand/gutter-monster-360.webp); }

  /* Window and gutter service pages: the monster stands on the top edge of the photo. */
  .qw-mast-peek { height: auto; display: flex; justify-content: flex-end; padding-right: 18px; }
  .qw-mast-peek img { position: static; width: 100px; }
  .qw-mast-peek + * { margin-top: 0; }
}
@media (max-width: 1180px) {
  /* Instant gutter quote: SkyVac stands on the top edge of the quote card. */
  .qw-ig h1 { margin-bottom: 8px; }
  .qw-ig-peek { height: auto; display: flex; justify-content: flex-end; padding-right: 16px; }
  .qw-ig-peek img { position: static; width: 92px; }
}

/* Mobile monster gap (Sep 2026). On window pages the price card's 18px bottom margin
   left a gap above the peeking monster. Pull the monster up so it sits 10px under the card.
   Phones and small tablets only; the home hero and instant gutter quote are untouched. */
@media (max-width: 900px) {
  .qw-price + .qw-mast-peek { margin-top: -8px; }
}

/* Free gutter camera check — trial design on Dunmurry + /free-gutter-check/ */
.fgc {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(900px 420px at 88% 0%, rgba(61, 184, 92, 0.22), transparent 58%),
    var(--ink);
  color: #d7e4ef;
}
.fgc .wrap { position: relative; z-index: 1; }
.fgc h2, .fgc h3 { color: #fff; }
.fgc .lede { color: #9fb3c4; max-width: 38rem; }
.fgc-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(280px, 0.95fr);
  gap: 36px;
  align-items: center;
}
.fgc-kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8ee6a4;
  margin-bottom: 10px;
}
.fgc-kicker i {
  width: 8px; height: 8px; border-radius: 50%;
  background: #25d366;
  box-shadow: 0 0 0 4px rgba(37, 211, 102, 0.2);
}
.fgc h2 { font-size: clamp(28px, 4vw, 42px); letter-spacing: -0.03em; line-height: 1.12; margin-bottom: 12px; }
.fgc-honest {
  margin: 18px 0 0;
  padding: 12px 14px;
  border-radius: 12px;
  border: 1px solid rgba(255,255,255,0.12);
  background: rgba(255,255,255,0.05);
  color: #c5d4e0;
  font-size: 14px;
  line-height: 1.5;
  max-width: 38rem;
}
.fgc-stage { position: relative; min-height: 320px; }
.fgc-monster {
  position: absolute;
  right: -8px;
  bottom: calc(100% - 46px);
  width: 132px;
  height: auto;
  transform: scaleX(-1);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35));
  pointer-events: none;
  z-index: 2;
}
.fgc-tablet {
  position: relative;
  z-index: 1;
  background: #111820;
  border: 10px solid #1c2632;
  border-radius: 22px;
  box-shadow: 0 24px 50px rgba(0,0,0,0.38);
  overflow: hidden;
}
.fgc-tablet img { display: block; width: 100%; height: 230px; object-fit: cover; }
.fgc-live {
  position: absolute;
  top: 16px; left: 16px;
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(8, 14, 20, 0.72);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 9px;
  border-radius: 999px;
}
.fgc-live b { width: 7px; height: 7px; border-radius: 50%; background: #ff4d4d; }
.fgc-verdicts {
  display: flex; gap: 6px; padding: 12px;
  background: #0c131b;
}
.fgc-verdicts span {
  flex: 1;
  text-align: center;
  font-size: 11px;
  font-weight: 700;
  padding: 8px 6px;
  border-radius: 8px;
  background: #182230;
  color: #d5e0ea;
}
.fgc-verdicts span.is-ok { background: rgba(37, 211, 102, 0.16); color: #8ee6a4; }
.fgc-verdicts span.is-soon { background: rgba(251, 191, 36, 0.16); color: #fbbf24; }
.fgc-verdicts span.is-blocked { background: rgba(248, 113, 113, 0.16); color: #f87171; }
.fgc-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin-top: 34px;
}
.fgc-step {
  padding: 16px;
  border-radius: 14px;
  background: rgba(255,255,255,0.05);
  border: 1px solid rgba(255,255,255,0.08);
}
.fgc-step b { display: block; color: #8ee6a4; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; margin-bottom: 6px; }
.fgc-step p { margin: 0; color: #c3d3df; font-size: 14px; line-height: 1.45; }
.fgc-page .fgc-copy { max-width: 40rem; }
.fgc-page .fgc-copy p { color: var(--muted); }
@media (max-width: 860px) {
  .fgc-grid { grid-template-columns: 1fr; }
  .fgc-monster { right: 8px; width: 96px; bottom: calc(100% - 34px); }
  .fgc-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
  .fgc-steps { grid-template-columns: 1fr; }
}

/* ---------- Header badge: free gutter check (deploy 13) ----------
   Secondary to "Book gutter clearing". Lime sampled from the gutter monster art, ink text
   (#0e1b2a on #7ed321 is 9.3:1, on #93ea34 11.6:1). The pulse only uses transform and box-shadow, so it
   never moves the layout; it stops for reduced motion and on /free-gutter-check/. */
.gbadge {
  position: relative; flex: none; display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 0 16px 0 14px; border-radius: 999px;
  background: linear-gradient(180deg, #93ea34 0%, #7ed321 100%);
  color: #0e1b2a; font-size: 14px; font-weight: 700; line-height: 1; white-space: nowrap;
  box-shadow: 0 0 0 0 rgba(126, 211, 33, .55);
  animation: gb-pulse 2s ease-in-out infinite;
}
.gbadge:hover { color: #0e1b2a; background: #8be62b; }
.gbadge:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
.gb-ic { width: 18px; height: 18px; flex: none; }
@keyframes gb-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 211, 33, .55); }
  35% { transform: scale(1.04); }
  70% { transform: scale(1); box-shadow: 0 0 0 var(--gb-ring, 9px) rgba(126, 211, 33, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 211, 33, 0); }
}
.gbadge.is-here { animation: none; }
@media (prefers-reduced-motion: reduce) {
  .gbadge { animation: none; }
}
/* Narrow desktop: the nav is already full, so the links tighten a little and the badge drops
   its icon. Below 1060px only the icon shows, with the words kept for screen readers. */
@media (min-width: 901px) and (max-width: 1199px) {
  .nav-inner { gap: 12px; }
  .nav-links a, .nav-links summary { padding: 8px 8px; }
  .gbadge { padding: 0 14px; }
  .gbadge .gb-ic { display: none; }
}
@media (min-width: 901px) and (max-width: 1059px) {
  .nav-inner { gap: 10px; }
  .nav-links a, .nav-links summary { padding: 8px 6px; }
  .gbadge { width: 44px; padding: 0; justify-content: center; }
  .gbadge .gb-ic { display: block; }
  .gbadge .gb-t { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
}
/* Phones and tablets: logo, badge, Menu on one row, the badge sitting just left of Menu.
   430px and up: icon and "Free gutter check?". 390px: words only. 360px: no question mark.
   Under 360px: "Free check". The logo never shrinks. */
@media (max-width: 900px) {
  .nav-inner > .brand { flex-shrink: 0; }
  .gbadge { margin-left: auto; margin-right: -4px; }
}
@media (max-width: 429px) {
  .nav-inner { gap: 12px; }
  .gbadge { --gb-ring: 5px; }
  .gbadge { padding: 0 15px; }
  .gbadge .gb-ic { display: none; }
}
@media (max-width: 389px) {
  .nav-inner { gap: 10px; }
  .gbadge { padding: 0 12px; font-size: 13.5px; margin-right: -2px; }
  .gbadge .gb-q { display: none; }
}
@media (max-width: 359px) {
  .gbadge .gb-g { display: none; }
}

/* ---------- Phone menu v3 (8 Oct) ----------
   The old phone menu, plus: Services opens a short list of five (closed until tapped,
   small indent only), then a full width lime "Get my price" button and a white
   "WhatsApp us" button close the list. Desktop hides all of it and keeps its own
   Services dropdown. */
.nav-m-services, .nav-links .nav-cta, .nav-links .nav-wa { display: none; }
@media (max-width: 900px) {
  .nav-links details { display: none; }
  .nav-m-services { display: block; }
  /* Every phone menu row is at least 44px tall, the same as Services. */
  .nav-links > a:not(.nav-cta):not(.nav-wa) { display: flex; align-items: center; min-height: 44px; }
  .nav-m-toggle {
    display: flex; align-items: center; gap: 8px; width: 100%; min-height: 44px;
    padding: 8px 11px; border: 0; border-radius: 8px; background: transparent;
    font-weight: 550; font-size: 14.5px; color: rgba(255, 255, 255, .78);
    text-align: left; cursor: pointer; transition: color .18s, background .18s;
  }
  .nav-m-toggle::after {
    content: ""; width: 6px; height: 6px; margin-top: -3px;
    border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
    transform: rotate(45deg);
  }
  .nav-m-toggle[aria-expanded="true"]::after { margin-top: 3px; transform: rotate(-135deg); }
  .nav-m-toggle:hover { color: #fff; background: rgba(255, 255, 255, .08); }
  .nav-m-toggle[aria-expanded="true"] { color: #fff; }
  .nav-m-services ul { list-style: none; margin: 0; padding: 0; }
  .nav-m-services ul a { display: flex; align-items: center; min-height: 44px; padding-left: 23px; }
  /* "Get my price": the lime of the "Free gutter check?" badge, with the same ink text
     (#0e1b2a on #93ea34 is 11.6:1, on #7ed321 9.3:1, on the hover #8be62b 11.1:1). */
  .nav-links .nav-cta {
    display: flex; align-items: center; justify-content: center; min-height: 48px;
    margin-top: 12px; padding: 12px 16px; border-radius: 10px;
    background: linear-gradient(180deg, #93ea34 0%, #7ed321 100%);
    color: #0e1b2a; font-size: 16px; font-weight: 700;
    box-shadow: 0 0 0 0 rgba(126, 211, 33, .55);
    animation: nav-cta-pulse 4s ease-in-out 1s infinite;
  }
  .nav-links .nav-cta:hover, .nav-links .nav-cta:active, .nav-links .nav-cta:focus-visible { background: #8be62b; color: #0e1b2a; }
  /* "WhatsApp us": a white button, so it never reads as a second lime one. Text in
     WhatsApp's dark green #075e54 (7.7:1 on white, 6.9:1 on the hover tint #e7f7ee),
     icon in WhatsApp teal #008069 (4.9:1, 4.4:1 on the tint). */
  .nav-links .nav-wa {
    display: flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px;
    margin-top: 10px; padding: 12px 16px; border-radius: 10px;
    background: #fff; color: #075e54; font-size: 16px; font-weight: 700;
  }
  .nav-links .nav-wa svg { width: 22px; height: 22px; flex: none; color: #008069; }
  .nav-links .nav-wa:hover, .nav-links .nav-wa:active, .nav-links .nav-wa:focus-visible { background: #e7f7ee; color: #075e54; }
  .nav-m-toggle:focus-visible, .nav-links .nav-cta:focus-visible, .nav-links .nav-wa:focus-visible { outline: 3px solid #fff; outline-offset: 3px; }
}
/* The badge's pulse, slowed to one soft beat every 4 seconds: a 2% swell and a fading
   lime ring. Transform and box-shadow only, so nothing around it moves. */
@keyframes nav-cta-pulse {
  0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 211, 33, .55); }
  15% { transform: scale(1.02); }
  35% { transform: scale(1); box-shadow: 0 0 0 9px rgba(126, 211, 33, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(126, 211, 33, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .nav-links .nav-cta { animation: none; }
}