: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);
}
.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; }

.dock {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: 30;
  background: #fff; border-top: 1px solid var(--line); grid-template-columns: 1fr 1fr 1fr;
}
.dock a { text-align: center; padding: 13px 6px; font-weight: 650; font-size: 13.5px; }
.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: 72px;
    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; }
  body { padding-bottom: 66px; }
  /* A slim bar above the dock, rather than a card sitting over the page. */
  .offer {
    left: 10px; right: 10px; bottom: 74px; 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; }
.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-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: 84px; }
  .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; }
}