/* ==========================================================================
   Ultra Clean Exteriors - styles.css
   Hand-authored CSS. No framework, no CDN, no build step.
   Palette and type scale per the website blueprint.
   ========================================================================== */

/* ---------- 1. Tokens ---------- */
:root {
  /* Brand palette, taken from the Ultra Clean Exteriors logo:
     charcoal #1F1F1F, white, and blue #09A1E2.
     The brand blue is 5.66:1 on charcoal (as the logo uses it) but only
     2.91:1 on white, so it must NOT be used for text on light backgrounds.
     --cyan-dark is the same hue darkened to clear 4.5:1 on white. */
  --navy:      #1F1F1F;   /* brand charcoal: dark surfaces and headings */
  --midnight:  #141414;   /* deeper charcoal: topbar, footer base */
  --cyan:      #09A1E2;   /* brand blue: accents on dark, rules, icons */
  --cyan-dark: #0777A7;   /* brand hue, AA on white (4.99:1) */
  --mist:      #E9F6FD;
  --white:     #FFFFFF;
  --slate:     #5F6368;
  --ink:       #1F1F1F;
  --fog:       #E1E4E6;
  --amber:     #FFB020;
  --amber-dk:  #F0A00E;
  --verified:  #1E9E6A;

  --shadow-sm: 0 1px 3px rgba(31,31,31,.07);
  --shadow:    0 2px 12px rgba(31,31,31,.09);
  --shadow-lg: 0 18px 40px -12px rgba(20,20,20,.30);

  --r-sm: 6px;
  --r:    10px;
  --r-lg: 16px;
  --r-pill: 999px;

  --wrap: 1200px;
  --gutter: clamp(1.25rem, 4vw, 2.5rem);

  /* System fonts only (Oct 2026): nothing is downloaded and nothing is
     requested from Google. Apple devices get San Francisco, Windows gets
     Segoe UI, Android gets Roboto. All three are close to the Inter the
     site used before, so headings, weights and spacing are unchanged. */
  --ff: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI",
        Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;

  --header-h: 122px;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
body {
  margin: 0;
  font-family: var(--ff);
  font-size: 17px;
  line-height: 1.65;
  color: var(--slate);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img, svg, video { display: block; max-width: 100%; height: auto; }
a { color: var(--cyan-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--navy); }
h1, h2, h3, h4 { color: var(--navy); line-height: 1.15; margin: 0 0 .6em; font-weight: 800; letter-spacing: -.02em; }
h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }
h2 { font-size: clamp(1.45rem, 2.8vw, 2rem); }
h3 { font-size: clamp(1.12rem, 1.9vw, 1.375rem); font-weight: 700; letter-spacing: -.01em; }
h4 { font-size: 1.0625rem; font-weight: 700; }
p  { margin: 0 0 1.15em; }
p:last-child, ul:last-child, ol:last-child { margin-bottom: 0; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; }
li + li { margin-top: .4em; }
strong { color: var(--ink); font-weight: 700; }
hr { border: 0; border-top: 1px solid var(--fog); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--cyan);
  outline-offset: 2px;
  border-radius: 3px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 200;
  background: var(--amber); color: var(--navy); font-weight: 700;
  padding: .9rem 1.4rem; border-radius: 0 0 var(--r) 0;
}
.skip-link:focus { left: 0; }

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

/* ---------- 3. Layout primitives ---------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.wrap--narrow { max-width: 820px; }

.section { padding: clamp(3.25rem, 7vw, 5.5rem) 0; }
.section--tight { padding: clamp(2.25rem, 5vw, 3.5rem) 0; }
.section--mist { background: var(--mist); }
.section--fog  { background: #F4F5F6; }
.section--navy {
  background: var(--navy);
  color: rgba(255,255,255,.82);
  position: relative;
  overflow: hidden;
}
.section--navy h2, .section--navy h3 { color: #fff; }
.section--navy strong { color: #fff; }
.section--navy a { color: var(--cyan); }
/* Buttons carry their own colour; the section link rule must not repaint them. */
.section--navy a.btn--whatsapp { color: #08331A; }
.section--navy a.btn--primary  { color: var(--navy); }
.section--navy a.btn--onDark   { color: #fff; }
.section--navy a.btn--onDark:hover { color: var(--navy); }
.section--navy::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, rgba(0,168,232,.20), transparent 55%);
}
.section--navy > * { position: relative; z-index: 1; }

.section-head { max-width: 780px; margin-bottom: clamp(2rem, 4vw, 3rem); }
.section-head--center { margin-inline: auto; text-align: center; }

.section-head p { font-size: 1.0625rem; margin-bottom: 0; }
.section-head--center p { margin-inline: auto; }

.kicker {
  display: block;
  font-size: .75rem; font-weight: 800; letter-spacing: .2em;
  text-transform: uppercase; color: var(--cyan-dark); margin-bottom: .9rem;
}
.section--navy .kicker, .hero .kicker { color: var(--cyan); }

.lede { font-size: 1.125rem; color: var(--slate); }

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  font-family: inherit; font-size: 1rem; font-weight: 700; line-height: 1;
  padding: 1.05rem 1.9rem; border-radius: var(--r-pill);
  border: 2px solid transparent; cursor: pointer; text-decoration: none;
  transition: background-color .18s ease, color .18s ease, transform .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn svg { width: 1.15em; height: 1.15em; flex: none; }

.btn--primary { background: var(--amber); color: var(--navy); box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--amber-dk); color: var(--navy); }

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

.btn--onDark { border-color: rgba(255,255,255,.7); color: #fff; background: transparent; }
.btn--onDark:hover { background: #fff; color: var(--navy); }

.btn--whatsapp { background: #25D366; color: #08331A; box-shadow: var(--shadow); }
.btn--whatsapp:hover { background: #1EBE59; color: #08331A; }
.btn--block + .btn--block { margin-top: .7rem; }

.btn--sm { padding: .8rem 1.35rem; font-size: .9375rem; }
.btn--block { width: 100%; }

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

/* A grid child must never be forced wider than its track by its own content.
   Without this, `1fr` resolves to minmax(auto, 1fr) and an unwrappable child
   pushes the whole page sideways. */
.grid > * { min-width: 0; }

/* Long button labels have to be allowed to wrap on a narrow phone. `.btn` is
   white-space: nowrap, which gave "Message Josh on WhatsApp" a 309px
   min-content width; inside the contact card's 24px padding that could not
   fit a 360px screen and scrolled the whole document sideways. Only phones
   narrower than a standard 390pt device are affected, so every wider screen
   keeps the buttons on one line exactly as before. */
@media (max-width: 400px) {
  .btn { white-space: normal; }
}

/* ---------- 5. Top bar + header ---------- */

.site-header {
  position: sticky; top: 0; z-index: 100;
  background: rgba(31,31,31,.96);
  backdrop-filter: saturate(140%) blur(8px);
  border-bottom: 1px solid rgba(255,255,255,.10);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.25rem; min-height: var(--header-h);
}
.logo { display: flex; align-items: center; flex: none; text-decoration: none; }
.logo { gap: .62rem; }
.logo img, .logo svg { height: 110px; width: auto; }
.logo__lockup { display: block; }
.logo__text { display: flex; flex-direction: column; line-height: 1; }
.logo__text b { color: #fff; font-weight: 800; font-size: 1.02rem; letter-spacing: .012em; }
.logo__text i { color: var(--cyan); font-style: normal; font-weight: 700; font-size: .615rem;
                letter-spacing: .33em; margin-top: .3rem; }
@media (max-width: 600px) {
  .logo img, .logo svg { height: 66px; }
  .logo__text b { font-size: .9rem; }
  .logo__text i { font-size: .55rem; letter-spacing: .28em; }
}

.nav-links { display: flex; align-items: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; }
.nav-links li { margin: 0; }
.nav-links a {
  color: rgba(255,255,255,.88); text-decoration: none;
  font-size: .9375rem; font-weight: 600; padding: .45rem 0;
  border-bottom: 2px solid transparent; transition: color .15s, border-color .15s;
}
.nav-links a:hover { color: var(--cyan); }
.nav-links a[aria-current="page"] { color: #fff; border-bottom-color: var(--cyan); }
@media (max-width: 1024px) { .nav-links { display: none; } }

.nav-right { display: flex; align-items: center; gap: 1rem; flex: none; }
.phone-block { text-align: right; text-decoration: none; line-height: 1.2; }
.phone-block .label {
  display: block; font-size: .66rem; text-transform: uppercase;
  letter-spacing: .16em; color: var(--cyan); font-weight: 700;
}
.phone-block .num { display: block; font-size: 1.125rem; font-weight: 800; color: #fff; }
.phone-block:hover .num { color: var(--cyan); }
@media (max-width: 900px) { .phone-block { display: none; } }
@media (max-width: 520px) { .nav-right .btn { display: none; } }

.burger {
  display: none; background: none; border: 0; padding: .5rem; cursor: pointer; color: #fff;
}
.burger svg { width: 28px; height: 28px; }
@media (max-width: 1024px) { .burger { display: block; } }

.mobile-menu {
  display: none; background: var(--midnight);
  border-top: 1px solid rgba(255,255,255,.10);
}
.mobile-menu.is-open { display: block; }
.mobile-menu ul { list-style: none; margin: 0; padding: .5rem 0 1.25rem; }
.mobile-menu li { margin: 0; }
/* :not(.btn) matters. Without it these two rules out-specify .btn--primary
   and .btn--whatsapp and force white text onto the amber and green CTAs in
   the menu - measured at 1.83:1 and 1.98:1, well under the 4.5:1 AA floor,
   on every page. Scoping to non-button links lets the buttons keep their
   own colours (9.01:1 and 7.06:1), padding and pill shape. */
.mobile-menu a:not(.btn) {
  display: block; padding: .95rem var(--gutter); color: #fff;
  text-decoration: none; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.07);
}
.mobile-menu a:not(.btn):hover,
.mobile-menu a:not(.btn):focus { background: rgba(0,168,232,.16); color: var(--cyan); }
.mobile-menu .mm-cta { padding: 1.1rem var(--gutter) 0; }

/* ---------- 6. Hero ---------- */
.hero { position: relative; isolation: isolate; background: var(--navy); }
.hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.hero__overlay {
  position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, var(--navy) 0%, rgba(31,31,31,.92) 42%, rgba(31,31,31,.34) 100%);
}
@media (max-width: 760px) {
  .hero__overlay { background: linear-gradient(180deg, rgba(31,31,31,.95) 30%, rgba(31,31,31,.82) 100%); }
}
.hero__inner { padding: clamp(3.5rem, 9vw, 8rem) 0; max-width: 680px; }
.hero h1 { color: #fff; margin-bottom: 1.15rem; }
.hero__sub { font-size: clamp(1.0625rem, 2vw, 1.25rem); color: rgba(255,255,255,.87); max-width: 34em; margin-bottom: 2rem; }
.hero__sub .hl { color: var(--cyan); font-weight: 700; }
.hero__note { margin-top: 1.35rem; font-size: .9375rem; color: rgba(255,255,255,.72); }

.hero--compact .hero__inner { padding: clamp(2.75rem, 6vw, 4.5rem) 0; max-width: 760px; }
.hero--compact h1 { font-size: clamp(1.9rem, 4.4vw, 3rem); }


/* ---------- 7. Cards & grids ---------- */
.grid { display: grid; gap: clamp(1.25rem, 2.5vw, 2rem); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 980px) { .grid--3, .grid--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--fog); border-radius: var(--r-lg);
  overflow: hidden; display: flex; flex-direction: column;
  transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #CFCFCF; }
.card__media { aspect-ratio: 16/10; background: var(--mist); overflow: hidden; }
.card__media img { width: 100%; height: 100%; object-fit: cover; }
.card__body { padding: 1.5rem 1.5rem 1.65rem; display: flex; flex-direction: column; flex: 1; }
.card__body h3 { margin-bottom: .5rem; }
.card__body p { font-size: .96rem; margin-bottom: 1.1rem; }
.card__link {
  margin-top: auto; align-self: flex-start; font-weight: 700; font-size: .9375rem;
  color: var(--cyan-dark); text-decoration: none;
}
.card__link::after { content: " →"; }
.card:hover .card__link { color: var(--navy); }
.card--flat:hover { transform: none; }

/* Numbered steps */
.steps { counter-reset: step; display: grid; gap: 1.75rem; grid-template-columns: repeat(3, 1fr); }
.steps--five { grid-template-columns: repeat(5, 1fr); }
.steps--four { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1180px) { .steps--four { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 1180px) { .steps--five { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 860px)  { .steps, .steps--five { grid-template-columns: 1fr; } }
.step { position: relative; padding-top: 3.6rem; }
.step::before {
  counter-increment: step; content: counter(step);
  position: absolute; top: 0; left: 0;
  width: 46px; height: 46px; border-radius: 50%;
  background: var(--cyan); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 1.1rem;
}
.step h3 { margin-bottom: .45rem; }
.step p { font-size: .96rem; margin: 0; }

/* Alternating service rows */
.srow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; }
.srow + .srow { margin-top: clamp(2.5rem, 5vw, 4.5rem); }
.srow__media img { border-radius: var(--r-lg); aspect-ratio: 4/3; object-fit: cover; width: 100%; }
.srow:nth-child(even) .srow__media { order: 2; }
@media (max-width: 860px) {
  .srow { grid-template-columns: 1fr; }
  .srow:nth-child(even) .srow__media { order: 0; }
}
.srow h2 { font-size: clamp(1.4rem, 2.6vw, 1.95rem); }
.srow .includes {
  list-style: none; padding: 0; margin: 1.1rem 0 1.4rem;
  font-size: .9rem; color: var(--slate);
}
.srow .includes li { position: relative; padding-left: 1.5rem; }
.srow .includes li::before {
  content: ""; position: absolute; left: 0; top: .55em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--cyan);
}

/* Tick list */
.ticks { list-style: none; padding: 0; margin: 0; }
.ticks li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .34em;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--verified) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='white'%3E%3Cpath d='M8.1 13.4 4.7 10l1.2-1.2 2.2 2.2 5.9-5.9L15.2 6z'/%3E%3C/svg%3E") center/contain no-repeat;
}
.section--navy .ticks li::before { background-color: var(--cyan); }

/* Stat / panel */
.panel {
  background: var(--mist); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem);
  border: 1px solid #CFE9F7;
}
.panel--onDark { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14); }
.panel h3 { font-size: 1.0625rem; margin-bottom: .5rem; }
.panel h3 + p { font-size: .9375rem; margin: 0; }
.stat {
  font-size: clamp(3.5rem, 10vw, 6.5rem); font-weight: 800; line-height: .9;
  color: var(--cyan); letter-spacing: -.04em; margin: 0 0 .35rem;
}
.stat + p { font-size: 1.0625rem; }

/* Compliance strip (commercial) */
.compliance { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--fog); border: 1px solid var(--fog); border-radius: var(--r-lg); overflow: hidden; }
.compliance div { background: #fff; padding: 1.4rem 1.25rem; }
.compliance b { display: block; color: var(--navy); font-size: 1.05rem; font-weight: 800; margin-bottom: .3rem; letter-spacing: -.01em; }
.compliance span { font-size: .85rem; line-height: 1.5; display: block; }
@media (max-width: 860px) { .compliance { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 460px) { .compliance { grid-template-columns: 1fr; } }

/* Areas */
.areas { columns: 3; column-gap: 2rem; list-style: none; padding: 0; margin: 0; font-size: .96rem; }
.areas li { break-inside: avoid; margin-bottom: .45rem; padding-left: 1.35rem; position: relative; }
.areas li::before { content: "▪"; position: absolute; left: 0; color: var(--cyan); }
@media (max-width: 760px) { .areas { columns: 2; } }
@media (max-width: 420px) { .areas { columns: 1; } }

/* Before / after */
.ba { border-radius: var(--r-lg); overflow: hidden; border: 1px solid var(--fog); background: #fff; }
.ba__pair { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; background: var(--fog); position: relative; }
.ba__pair figure { margin: 0; position: relative; background: var(--mist); }
.ba__pair img { width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.ba__pair figcaption {
  position: absolute; top: .6rem; left: .6rem;
  background: rgba(20,20,20,.85); color: #fff; font-size: .68rem; font-weight: 800;
  letter-spacing: .12em; text-transform: uppercase; padding: .3rem .6rem; border-radius: var(--r-sm);
}
.ba__caption { padding: .95rem 1.1rem; font-size: .875rem; color: var(--slate); }
.ba__caption b { color: var(--navy); }

/* ---------- 8. FAQ / AIO ---------- */
.faq { border-top: 1px solid var(--fog); }
.faq details {
  border-bottom: 1px solid var(--fog);
}
.faq summary {
  cursor: pointer; list-style: none; padding: 1.35rem 3rem 1.35rem 0;
  position: relative; font-weight: 700; color: var(--navy);
  font-size: clamp(1.02rem, 1.7vw, 1.15rem); line-height: 1.4;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: .35rem; top: 50%;
  width: 14px; height: 9px; margin-top: -4px;
  background: var(--cyan);
  clip-path: polygon(50% 100%, 0 0, 100% 0);
  transition: transform .2s ease;
}
.faq details[open] summary::after { transform: rotate(180deg); }
.faq summary:hover { color: var(--cyan-dark); }
.faq .answer { padding: 0 2.5rem 1.5rem 0; }
.faq .answer p { margin-bottom: .8em; font-size: 1rem; }

/* ---------- 9. Forms ---------- */
.form-card {
  background: #fff; border: 1px solid var(--fog); border-radius: var(--r-lg);
  padding: clamp(1.5rem, 3vw, 2.5rem); box-shadow: var(--shadow);
}
.field { margin-bottom: 1.25rem; }
.field > label, .fieldset-legend {
  display: block; font-weight: 700; color: var(--navy);
  font-size: .9375rem; margin-bottom: .45rem;
}
.field .opt { font-weight: 500; color: var(--slate); font-size: .875rem; }
.field .hint { display: block; font-size: .8125rem; color: var(--slate); margin-top: .4rem; }
input[type="text"], input[type="tel"], input[type="email"], input[type="file"], textarea, select {
  width: 100%; font-family: inherit; font-size: 1rem; color: var(--ink);
  padding: .85rem 1rem; border: 1.5px solid var(--fog); border-radius: var(--r);
  background: #fff; transition: border-color .15s, box-shadow .15s;
}
textarea { min-height: 130px; resize: vertical; }
input:focus, textarea:focus, select:focus {
  outline: none; border-color: var(--cyan); box-shadow: 0 0 0 4px rgba(0,168,232,.14);
}
input::placeholder, textarea::placeholder { color: #A6A6A6; }
input[type="file"] { padding: .6rem; background: #FAFBFB; }

fieldset { border: 0; padding: 0; margin: 0 0 1.25rem; }
.choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .55rem; }
@media (max-width: 520px) { .choices { grid-template-columns: 1fr; } }
.choice {
  display: flex; align-items: flex-start; gap: .6rem;
  border: 1.5px solid var(--fog); border-radius: var(--r);
  padding: .7rem .85rem; cursor: pointer; font-size: .9375rem;
  transition: border-color .15s, background-color .15s;
}
.choice:hover { border-color: #B9D5E6; background: #FAFBFB; }
.choice input { accent-color: var(--cyan); margin: .2rem 0 0; width: auto; flex: none; }
.choice:has(input:checked) { border-color: var(--cyan); background: var(--mist); }
.choice span { font-weight: 500; color: var(--ink); }

.consent { display: flex; gap: .7rem; align-items: flex-start; font-size: .9rem; }
.consent input { accent-color: var(--cyan); margin-top: .28rem; width: auto; flex: none; }

.form-note { font-size: .8125rem; color: var(--slate); text-align: center; margin-top: .9rem; }
.hp { position: absolute !important; left: -9999px; opacity: 0; height: 0; width: 0; }

.form-status { border-radius: var(--r); padding: .95rem 1.15rem; font-size: .9375rem; margin-bottom: 1.25rem; font-weight: 600; }
.form-status[hidden] { display: none; }
.form-status--err { background: #FDECEC; border: 1px solid #F5C6C6; color: #9B2226; }
.form-status--ok  { background: #E8F7F0; border: 1px solid #B7E3CE; color: #146B48; }

.field-error { color: #9B2226; font-size: .8125rem; font-weight: 600; margin-top: .35rem; }
input[aria-invalid="true"], textarea[aria-invalid="true"] { border-color: #D9534F; }

/* Contact card */
.contact-card { background: var(--navy); color: rgba(255,255,255,.82); border-radius: var(--r-lg); padding: clamp(1.5rem, 3vw, 2.25rem); }
.contact-card h2, .contact-card h3 { color: #fff; }
.contact-card .bignum {
  display: inline-block; font-size: clamp(1.6rem, 4vw, 2.1rem); font-weight: 800;
  color: var(--amber); text-decoration: none; letter-spacing: -.02em; margin-bottom: 1.25rem;
}
.contact-card .bignum:hover { color: #fff; }
.contact-card address { font-style: normal; line-height: 1.7; margin-bottom: 1.25rem; }
.contact-card .ticks li::before { background-color: var(--cyan); }
.contact-card hr { border-color: rgba(255,255,255,.14); margin: 1.5rem 0; }

/* ---------- 10. CTA band + footer ---------- */
.cta-band { background: var(--navy); color: rgba(255,255,255,.85); text-align: center; position: relative; overflow: hidden; }
.cta-band::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, rgba(0,168,232,.22), transparent 60%);
}
.cta-band > * { position: relative; z-index: 1; }
.cta-band h2 { color: #fff; }
.cta-band p { max-width: 44em; margin-inline: auto; }
.cta-band .btn-row { justify-content: center; margin-top: 1.75rem; }

.site-footer { background: var(--midnight); color: rgba(255,255,255,.66); font-size: .9rem; border-top: 4px solid var(--cyan); }
.site-footer .cols { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-block: clamp(2.75rem, 6vw, 4rem) 2.5rem; }
@media (max-width: 980px) { .site-footer .cols { grid-template-columns: 1fr 1fr; gap: 2rem; } }
@media (max-width: 560px) { .site-footer .cols { grid-template-columns: 1fr; } }
.site-footer h3 { color: #fff; font-size: .78rem; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1.1rem; font-weight: 800; }
.site-footer ul { list-style: none; padding: 0; margin: 0; }
.site-footer li { margin-bottom: .55rem; }
.site-footer a { color: rgba(255,255,255,.72); text-decoration: none; }
.site-footer a:hover { color: var(--cyan); }
.site-footer .flogo { display: flex; align-items: center; gap: .62rem; margin-bottom: 1.1rem; }
.site-footer .flogo img { height: 118px; width: auto; }
.site-footer address { font-style: normal; line-height: 1.75; color: rgba(255,255,255,.72); }
.site-footer .footer-trust {
  border-top: 1px solid rgba(255,255,255,.10); padding: 1.25rem var(--gutter);
  text-align: center; font-size: .78rem; font-weight: 700; letter-spacing: .06em;
  color: var(--cyan); text-transform: uppercase;
}
.site-footer .footer-bottom {
  border-top: 1px solid rgba(255,255,255,.10); padding-block: 1.35rem 2.25rem;
  display: flex; flex-wrap: wrap; gap: .75rem 1.5rem; justify-content: space-between;
  font-size: .8125rem; color: rgba(255,255,255,.5);
}
.site-footer .footer-bottom nav { display: flex; gap: 1.25rem; }

/* ---------- 11. Sticky mobile call bar ---------- */
.mobile-bar { display: none; }
@media (max-width: 640px) {
  .mobile-bar {
    display: flex; position: fixed; bottom: 0; left: 0; right: 0; z-index: 90;
    border-top: 1px solid rgba(255,255,255,.15);
    box-shadow: 0 -4px 18px rgba(20,20,20,.22);
  }
  .mobile-bar a {
    padding: 1.05rem .5rem; text-align: center; font-weight: 800; font-size: .95rem;
    text-decoration: none; display: flex; align-items: center; justify-content: center; gap: .45rem;
  }
  .mobile-bar .mb-call  { flex: 2; background: var(--amber); color: var(--navy); }
  .mobile-bar .mb-wa    { flex: 2; background: #25D366; color: #08331A; }
  .mobile-bar .mb-quote { flex: 2; background: var(--navy); color: #fff; border-left: 1px solid rgba(255,255,255,.2); }
  .mobile-bar svg { width: 1.05em; height: 1.05em; }
  body { padding-bottom: var(--mobile-bar-h, 60px); }

  /* On the instant quote pages only, and only while the calculator's own
     action buttons are actually on screen, stand the sticky bar down. It
     was covering the bottom of the price readout, and its "Get a Price"
     button points at the page the visitor is already on. The class is set
     by an IntersectionObserver in the calculator script; every other page
     keeps the bar exactly as it was. */
  body.iq-cta-visible .mobile-bar { display: none; }
  body.iq-cta-visible { padding-bottom: 0; }

  /* Leave room under the actions so scrollIntoView({block:'end'}) lands
     them clear of the bar rather than flush against it. */
  .iq__actions { scroll-margin-bottom: 76px; }
}

/* ---------- 12. Breadcrumbs & prose ---------- */
.crumbs { font-size: .8125rem; padding: .9rem 0; color: var(--slate); }
.crumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: .45rem; padding: 0; margin: 0; }
.crumbs li { margin: 0; }
.crumbs li + li::before { content: "/"; margin-right: .45rem; color: #B4B4B4; }
.crumbs a { color: var(--slate); text-decoration: none; }
.crumbs a:hover { color: var(--cyan-dark); text-decoration: underline; }
.crumbs [aria-current] { color: var(--navy); font-weight: 600; }

.prose h2 { margin-top: 2.5rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin-top: 1.75rem; }
/* measure is controlled by .wrap--narrow; no extra cap needed here */

.note {
  border-left: 4px solid var(--cyan); background: var(--mist);
  padding: 1.15rem 1.35rem; border-radius: 0 var(--r) var(--r) 0; margin: 1.75rem 0;
  font-size: .96rem;
}

.map { margin: 1.75rem 0 0; }
.map__frame {
  display: block; width: 100%; height: 380px; border: 1px solid var(--fog);
  border-radius: var(--r); background: var(--mist);
}
.map__cap { font-size: .875rem; color: var(--slate); margin-top: .7rem; line-height: 1.55; }
.map__cap a { color: var(--cyan-dark); }
@media (max-width: 640px) { .map__frame { height: 300px; } }

.table-wrap { overflow-x: auto; margin: 1.5rem 0; }
table { width: 100%; border-collapse: collapse; font-size: .9375rem; min-width: 520px; }
th, td { text-align: left; padding: .8rem 1rem; border-bottom: 1px solid var(--fog); vertical-align: top; }
th { color: var(--navy); font-weight: 700; background: #F4F5F6; }

/* ---------- 13. Print ---------- */
@media print {
  .site-header, .topbar, .mobile-bar, .cta-band, .burger, .mobile-menu { display: none !important; }
  body { color: #000; }
  a { text-decoration: underline; }
}

/* ---------- Area page: exterior cleaning services grid ---------- */
.area-svc h3 { margin-top: 0; margin-bottom: .4rem; }
.area-svc p { margin: 0 0 .6rem; }
.area-svc p:last-child { margin-bottom: 0; }

/* ---------- Real work photographs ---------- */
.work { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
/* Bands with fewer than four photos, so they fill the row instead of
   leaving an empty cell on the right. The responsive rules below still
   take over at 980px and 560px. */
.work--2 { grid-template-columns: repeat(2, 1fr); }
.work--3 { grid-template-columns: repeat(3, 1fr); }
.work__item { margin: 0; border-radius: var(--r); overflow: hidden; border: 1px solid var(--fog); background: #fff; }
.work__item img { display: block; width: 100%; aspect-ratio: 1/1; object-fit: cover; }
.work__cap { margin-top: 1.1rem; font-size: .9375rem; color: var(--slate); max-width: 60ch; }
@media (max-width: 980px) { .work { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .work, .work--3 { grid-template-columns: 1fr 1fr; gap: .6rem; } }

/* ---------- Single before and after feature ---------- */
/* Two across, not three. With four pairs, three columns left an orphan on
   the last row at desktop widths. Two also doubles the size of each
   individual before and after frame, which matters here more than
   elsewhere: these are the images people actually study. */
.ba-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(430px, 1fr)); gap: 1.5rem; }
@media (max-width: 720px) { .ba-grid { grid-template-columns: 1fr; max-width: 560px; margin: 0 auto; } }

/* ---------- Published prices ---------- */
.prices__intro { max-width: 62ch; margin-bottom: 1.5rem; }
table.prices { min-width: 420px; }
table.prices td:nth-child(2), table.prices td:nth-child(3),
table.prices th:nth-child(2), table.prices th:nth-child(3) { text-align: right; width: 8.5rem; }
table.prices td:nth-child(2) { font-weight: 700; color: var(--navy); }
.prices__notes { list-style: none; padding: 0; margin: 1.6rem 0 0; display: grid; gap: .85rem; }
.prices__notes li { font-size: .9375rem; color: var(--slate); line-height: 1.6; padding-left: 1.1rem; border-left: 3px solid var(--fog); }
.prices__cta { margin-top: 1.9rem; }
.prices__headline { font-size: 1.0625rem; color: var(--slate); margin: 0; }
.prices__headline span { display: inline-block; font-size: 2.6rem; font-weight: 800; color: var(--navy); line-height: 1; margin-right: .5rem; }

/* ---------- Google reviews ---------- */
.stars { display: inline-flex; gap: .12rem; color: #F5A623; vertical-align: middle; }
.stars .star { width: 1.05em; height: 1.05em; }
.rating-line {
  display: flex; align-items: center; justify-content: center; gap: .6rem;
  margin: .85rem 0 .25rem; font-size: 1.0625rem;
}
.rating-line .stars .star { width: 1.3em; height: 1.3em; }
.rating-line b { color: var(--navy); font-size: 1.25rem; }
.rev {
  margin: 0; background: #fff; border: 1px solid var(--fog); border-radius: var(--r-lg);
  padding: clamp(1.25rem, 2.5vw, 1.75rem); display: flex; flex-direction: column; gap: .8rem;
  box-shadow: var(--shadow);
}
.rev blockquote { margin: 0; font-size: .9688rem; line-height: 1.65; color: var(--ink); }
.rev blockquote::before { content: "\201C"; }
.rev blockquote::after { content: "\201D"; }
.rev figcaption { font-weight: 700; font-size: .9rem; color: var(--slate); margin-top: auto; }
@media (max-width: 980px) { .rev-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .rev-grid { grid-template-columns: 1fr; } }

/* ---------- Cookie consent banner ---------- */
/* True fixed overlay, independent of document flow and scroll position -
   see the mobile offset below for why it is not simply bottom: 0 on small
   screens. z-index is set above every other fixed/sticky element on the
   site (sticky header: 100, mobile CTA bar: 90) so it is never painted
   underneath either of them. */
.cookie-banner {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 300;
  background: var(--midnight); color: #fff;
  box-shadow: 0 -6px 20px rgba(20,20,20,.25);
  /* iPhone home-indicator safe area. A no-op on browsers/devices that
     don't report one (env() then resolves to 0). */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.cookie-banner__inner {
  max-width: var(--wrap); margin: 0 auto; padding: 1rem var(--gutter);
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 1rem 1.5rem; flex-wrap: wrap;
}
.cookie-banner__text { flex: 1 1 360px; }
.cookie-banner__h { margin: 0 0 .2rem; font-weight: 700; color: #fff; font-size: .95rem; }
.cookie-banner__msg { margin: 0; font-size: .875rem; line-height: 1.5; color: #D7DDE2; }
.cookie-banner__inner a { color: var(--cyan); }
.cookie-banner__actions { display: flex; gap: .6rem; flex: 0 0 auto; flex-wrap: wrap; align-items: center; }
/* Reject all and Accept all: identical size and style, on purpose. */
.btn--consent { background: #fff; color: var(--midnight); border-color: #fff; min-width: 7.5rem; }
.btn--consent:hover { background: var(--cyan); border-color: var(--cyan); color: var(--midnight); }
.cookie-banner__more {
  background: none; border: 0; padding: .4rem .2rem; font: inherit; font-size: .875rem;
  color: #fff; text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.cookie-banner__panel { display: none; margin-top: .75rem; gap: .6rem; flex-direction: column; }
.cookie-banner--choices .cookie-banner__panel { display: flex; }
.cookie-banner--choices .cookie-banner__more { display: none; }
.cookie-banner__choice {
  display: flex; align-items: flex-start; gap: .6rem; font-size: .8438rem;
  line-height: 1.45; color: #D7DDE2; cursor: pointer; max-width: 640px;
}
.cookie-banner__choice strong { color: #fff; margin-right: .25rem; }
.cookie-banner__choice input { margin-top: .2rem; flex: 0 0 auto; width: 1.1rem; height: 1.1rem; accent-color: var(--cyan); }
.cookie-banner__choice--fixed { cursor: default; }
.cookie-banner__save { align-self: flex-start; margin-top: .25rem; }
@media (max-width: 640px) {
  .cookie-banner {
    /* Sit immediately above the fixed Call / WhatsApp / Quote bar rather
       than overlapping or hiding behind it. --mobile-bar-h is the bar's
       actual rendered height, set by main.js. */
    bottom: calc(var(--mobile-bar-h, 60px) + env(safe-area-inset-bottom, 0px));
    padding-bottom: 0;
    max-height: calc(100vh - var(--mobile-bar-h, 60px) - 1rem); overflow-y: auto;
  }
  body.iq-cta-visible .cookie-banner { bottom: env(safe-area-inset-bottom, 0px); }
  .cookie-banner__inner { padding: .8rem .9rem; gap: .6rem; flex-direction: column; align-items: stretch; }
  .cookie-banner__msg { font-size: .8125rem; line-height: 1.4; }
  .cookie-banner__text { flex: 0 0 auto; }
  /* The same three choices as on a computer: Reject all and Accept all
     side by side at equal width, and Choose underneath. */
  .cookie-banner__actions { width: 100%; display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
  .cookie-banner__actions .btn { min-width: 0; padding: .6rem .4rem; font-size: .875rem; }
  .cookie-banner__more { grid-column: 1 / -1; justify-self: center; padding: .25rem; }
  .cookie-banner--choices .cookie-banner__actions { order: 2; }
}

/* ---------- Simplified site (Oct 2026) ----------
   Window cleaning price list, the one quote form, and the advert landing
   page header. Plain on purpose: tables with hairlines, no cards, no
   coloured panels. Brand blue is used for focus and links only. */
.pl { margin: 1.25rem 0 0; }
.pl__table { width: 100%; min-width: 0; border-collapse: collapse; font-size: 1rem; margin: 0 0 1.5rem; }
.pl__table th, .pl__table td {
  background: transparent; border: 0; border-bottom: 1px solid var(--fog);
  padding: .8rem .5rem; text-align: left; vertical-align: middle;
}
.pl__table thead th {
  font-size: .8125rem; font-weight: 700; color: var(--slate);
  border-bottom: 2px solid var(--navy); padding-top: 0;
}
.pl__table tbody th { font-weight: 600; color: var(--ink); }
.pl__table td, .pl__table thead th + th { text-align: right; white-space: nowrap; }
.pl__table td { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; }
.pl__table th:first-child, .pl__table td:first-child { padding-left: 0; }
.pl__table th:last-child, .pl__table td:last-child { padding-right: 0; }
.pl__table--extras { max-width: 26rem; }
.pl__note { font-size: .9rem; color: var(--slate); margin: 0; max-width: 60ch; }
@media (max-width: 480px) {
  .pl__table { font-size: .9375rem; }
  .pl__table th, .pl__table td { padding: .7rem .35rem; }
  .pl__table tbody th { white-space: normal; }
}

.price-from { font-size: 1.5rem; font-weight: 800; color: var(--navy); margin: 0 0 .5rem; }

.qf { margin-top: 2.5rem; scroll-margin-top: 100px; }
.contact-grid .qf { margin-top: 0; }
.qf__h { margin-bottom: 1rem; }
.qf__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }
@media (max-width: 560px) { .qf__grid { grid-template-columns: 1fr; } }
.qf textarea { min-height: 96px; }
.qf__submit { min-width: 12rem; }
@media (max-width: 560px) { .qf__submit { width: 100%; } }
.qf__fine { font-size: .8125rem; color: var(--slate); margin: .8rem 0 0; }
.qf__fine a { color: var(--cyan-dark); }
.qf__form[hidden], .qf__done[hidden] { display: none; }
.qf__done { padding: 1.25rem 0; border-top: 2px solid var(--navy); }
.qf__done:focus { outline: none; }
.qf__done-h { font-size: 1.125rem; font-weight: 700; color: var(--navy); margin: 0 0 .4rem; }
.qf__done p:last-child { margin: 0; color: var(--slate); }

.lp-head { padding: clamp(1.75rem, 5vw, 3rem) 0 0; }
.lp-head h1 { font-size: clamp(1.7rem, 4vw, 2.5rem); margin-bottom: .5rem; }
.lp-head p { color: var(--slate); margin: 0; }

/* Minimal header and footer for the advert landing page. */
.site-header--minimal .nav { min-height: 76px; }
.site-header--minimal .logo img, .site-header--minimal .logo svg { height: 64px; }
@media (max-width: 600px) {
  .site-header--minimal .nav { min-height: 64px; }
  .site-header--minimal .logo img, .site-header--minimal .logo svg { height: 50px; }
}
.site-header--minimal .nav-right .lp-call { display: inline-flex; }
@media (min-width: 901px) { .site-header--minimal .lp-call { display: none; } }
.site-footer--minimal { padding: 1.5rem 0; }
.site-footer--minimal .footer-bottom { border-top: 0; padding-top: 0; }
.site-footer--minimal a { color: rgba(255,255,255,.75); }
body:has(.site-footer--minimal) { padding-bottom: 0; }
#prices { scroll-margin-top: 90px; }
.hero__sub a { color: #fff; text-decoration: underline; }

/* ---------- Brand voice pass (Oct 2026) ----------
   Restraint: real photographs carry the visual interest, blue is an
   accent for small labels and focus only, and nothing is boxed that does
   not need to be. */
.hero__trust {
  margin: 1.4rem 0 0; font-size: .875rem; font-weight: 600; letter-spacing: .01em;
  color: rgba(255,255,255,.78);
}

/* Four specific facts under a service hero. */
.proof { background: var(--midnight); border-top: 1px solid rgba(255,255,255,.08); }
.proof ul {
  list-style: none; margin: 0 auto; padding-block: 1rem;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: .6rem 1.5rem;
}
.proof li {
  margin: 0; color: #fff; font-size: .9rem; font-weight: 600; line-height: 1.35;
  padding-left: 1.1rem; position: relative;
}
.proof li::before {
  content: ""; position: absolute; left: 0; top: .5em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--cyan);
}
@media (max-width: 860px) { .proof ul { grid-template-columns: 1fr 1fr; } }

/* Service tiles: photo, title, one line. No card chrome. */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .tiles, .tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .tiles, .tiles:has(> .tile:nth-child(4):last-child) { grid-template-columns: 1fr; gap: 1.5rem; } }
.tile { display: block; text-decoration: none; color: inherit; }
.tile img { width: 100%; aspect-ratio: 16/10; object-fit: cover; border-radius: 10px; display: block; }
.tile__h { font-size: 1.0625rem; font-weight: 700; margin: .8rem 0 .25rem; color: var(--navy); }
.tile p { margin: 0; font-size: .9375rem; color: var(--slate); }
.tile:hover .tile__h, .tile:focus-visible .tile__h { color: var(--cyan-dark); text-decoration: underline; }
.more-link { margin: 2rem 0 0; font-size: .9375rem; color: var(--slate); }
.more-link a { font-weight: 600; }

/* Built on recommendations. */
.story__list { list-style: none; margin: 1.25rem 0; padding: 0; }
.story__list li { margin: 0 0 .85rem; padding-left: 1.1rem; position: relative; color: rgba(255,255,255,.82); }
.story__list li::before {
  content: ""; position: absolute; left: 0; top: .6em; width: 6px; height: 6px;
  border-radius: 50%; background: var(--cyan);
}
.story__list b { color: #fff; }

/* Reviews: two or three quotes, a rating, a link. */
.reviews__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .5rem 1.5rem; margin-bottom: 1.75rem; }
.reviews__head h2 { margin: 0; }
.rating-mini { display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); text-decoration: none; font-size: .9375rem; }
.rating-mini b { color: var(--navy); }
.rating-mini .stars .star { width: 1.05em; height: 1.05em; }
.rev-grid { display: grid; gap: 1.5rem 2.5rem; }
.rev-grid--3 { grid-template-columns: repeat(3, 1fr); }
.rev-grid--2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 860px) { .rev-grid--3, .rev-grid--2 { grid-template-columns: 1fr; } }
.reviews .rev {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0 0 0 1.1rem;
  border-left: 3px solid var(--cyan);
}
.reviews__more { margin: 1.75rem 0 0; font-size: .9375rem; }

.srow h2 a { color: inherit; text-decoration: none; }
.srow h2 a:hover { text-decoration: underline; }
.lp-head .lp-trust { font-size: .875rem; font-weight: 600; color: var(--ink); margin-top: .5rem; }
.prose .lede { font-size: inherit; color: inherit; }

/* ---------- Legal pages (Oct 2026) ---------- */
.glance {
  border: 2px solid var(--cyan-dark); border-radius: 12px;
  padding: 1.1rem 1.25rem .4rem; margin: 0 0 2rem; background: #fff;
}
.glance h2 { margin-top: 0; font-size: 1.25rem; }
.glance ul { padding-left: 1.1rem; }
.glance li { margin-bottom: .55rem; }
.legal h3 { font-size: 1.05rem; margin-top: 1.5rem; }
.legal-date { font-size: .875rem; color: var(--slate); margin-top: 2rem; }

/* ---------- How we work (Oct 2026) ---------- */
.how { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.how__item { border-top: 3px solid var(--cyan); padding-top: .9rem; }
.how__item h3 { font-size: 1.0625rem; margin: 0 0 .35rem; color: var(--navy); }
.how__item p { margin: 0; font-size: .9375rem; color: var(--slate); }
@media (max-width: 900px) { .how { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .how { grid-template-columns: 1fr; gap: 1.1rem; } }

/* ---------- About: who you deal with ---------- */
.owner { display: flex; gap: 1.25rem; align-items: center; margin: 0 0 1rem; }
.owner__img { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.owner p { margin: 0; }
@media (max-width: 480px) { .owner { gap: .9rem; } .owner__img { width: 80px; height: 80px; } }

/* ---------- Our work (case studies) ---------- */
.wcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem 1.5rem; }
.wcard { display: block; text-decoration: none; color: inherit; }
.wcard img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 10px; display: block; }
.wcard__meta { display: block; margin: .8rem 0 .2rem; font-size: .8125rem; font-weight: 600; color: var(--cyan-dark); }
.wcard__h { font-size: 1.0625rem; font-weight: 700; margin: 0 0 .25rem; color: var(--navy); }
.wcard p { margin: 0; font-size: .9375rem; color: var(--slate); }
.wcard:hover .wcard__h, .wcard:focus-visible .wcard__h { color: var(--cyan-dark); text-decoration: underline; }
@media (max-width: 900px) { .wcards { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .wcards { grid-template-columns: 1fr; } }
.case h1 { margin: .4rem 0 .6rem; }
.kicker--dark { color: var(--cyan-dark); }
.case__facts { display: flex; flex-wrap: wrap; gap: .5rem 2rem; margin: 1.25rem 0 1.5rem; padding: .9rem 0;
  border-top: 1px solid var(--fog); border-bottom: 1px solid var(--fog); }
.case__facts dt { font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--slate); }
.case__facts dd { margin: 0; font-weight: 600; }
.case .ba, .case .work { margin-bottom: 1.5rem; }
.case__story h2 { font-size: 1.25rem; margin-top: 1.75rem; }
.draft-banner { margin: 0; padding: .6rem 1rem; background: #FFE08A; color: #1F1F1F; text-align: center; font-weight: 700; }
.draft-gap { background: #FFE08A; padding: 0 .3rem; }
.owner picture { flex: 0 0 auto; display: block; }

/* ---------- Quote form: Turnstile and the "did not send" state ---------- */
.qf__ts:empty { display: none; }
.qf__ts { margin: .25rem 0 1rem; }
.form-status__msg { margin: 0; }
.form-status__actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .85rem; }
.form-status__actions .btn { flex: 1 1 12rem; justify-content: center; text-align: center; }

/* ---------- Window cleaning page (Oct 2026) ---------- */
.whero { background: var(--navy); color: #fff; }
.whero__grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: clamp(1.5rem, 4vw, 3rem);
  align-items: center; padding-block: clamp(2rem, 5vw, 4rem); }
.whero h1 { color: #fff; font-size: clamp(1.9rem, 4.4vw, 3rem); margin: .2rem 0 1rem; }
.whero__sub { color: #D7DDE2; font-size: 1.0625rem; margin: 0 0 1rem; max-width: 34rem; }
.whero__price { margin: 0 0 1.25rem; display: flex; flex-wrap: wrap; align-items: baseline; gap: .25rem .9rem; }
.whero__price b { font-size: 1.5rem; color: var(--amber); }
.whero__price span { color: #D7DDE2; font-size: .9375rem; }
.whero .hero__trust { margin-top: 1rem; }
.whero__media img { width: 100%; border-radius: 12px; display: block; aspect-ratio: 4/3; object-fit: cover; }
@media (max-width: 760px) {
  .whero__grid { grid-template-columns: 1fr; padding-block: 1.75rem 2rem; }
  .whero__media { order: 2; }
  .whero__media img { aspect-ratio: 16/10; }
}
.incl { margin: 1.25rem 0 .5rem; }
.incl__h { font-weight: 700; margin: 0 0 .5rem; }
.incl__list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: .45rem; }
.incl__list li { background: var(--mist); border-radius: 999px; padding: .35rem .8rem; font-size: .9375rem; }
.incl__list li::before { content: "\2713\00a0"; color: var(--cyan-dark); font-weight: 700; }
.pl__next { margin: 1.5rem 0 .25rem; }
.why { max-width: 820px; }
.why__list { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 1.1rem; }
.why__list h3 { font-size: 1.0625rem; margin: 0 0 .25rem; }
.why__list p { margin: 0; color: var(--slate); }
.why__photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-top: 1.75rem; }
.why__photos figure { margin: 0; }
.why__photos img { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: 10px; display: block; }
@media (max-width: 480px) { .why__photos { gap: .5rem; } }

/* ---------- Services menu (Oct 2026) ----------
   Desktop: hover opens it with a mouse, the arrow button opens it for touch
   and keyboard, and focus inside keeps it open while tabbing through.
   Mobile: Services is a tap to expand group inside the burger menu. */
.nav-dd { position: relative; display: flex; align-items: center; gap: .1rem; }
.nav-dd__toggle {
  background: none; border: 0; padding: .35rem; margin: 0; cursor: pointer;
  color: rgba(255,255,255,.88); display: inline-flex; align-items: center; border-radius: 6px;
}
.nav-dd__toggle svg { width: 16px; height: 16px; transition: transform .15s; }
.nav-dd__toggle:hover { color: var(--cyan); }
.nav-dd__toggle:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }
.nav-dd__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.nav-dd__panel {
  display: none; position: absolute; top: 100%; left: -1rem; z-index: 110;
  min-width: 250px; list-style: none; margin: 0; padding: .5rem 0;
  background: var(--midnight); border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px; box-shadow: 0 14px 30px rgba(0,0,0,.35);
}
/* A small bridge so the pointer can travel from the link to the panel. */
.nav-dd__panel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.nav-dd.is-open .nav-dd__panel,
.nav-dd:focus-within .nav-dd__panel { display: block; }
@media (hover: hover) and (pointer: fine) {
  .nav-dd:hover .nav-dd__panel { display: block; }
}
.nav-dd.is-closed .nav-dd__panel { display: none; }
.nav-links .nav-dd__panel li { margin: 0; }
.nav-links .nav-dd__panel a {
  display: block; padding: .6rem 1.1rem; border-bottom: 0; white-space: nowrap;
  font-size: .9375rem;
}
.nav-links .nav-dd__panel a:hover,
.nav-links .nav-dd__panel a:focus { background: rgba(0,168,232,.16); color: var(--cyan); }
.nav-links .nav-dd__panel a[aria-current="page"] { color: var(--cyan); border-bottom: 0; }

.mobile-menu .mm-group__toggle {
  display: flex; width: 100%; align-items: center; justify-content: space-between;
  padding: .95rem var(--gutter); background: none; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
  color: #fff; font: inherit; font-weight: 600; text-align: left; cursor: pointer;
}
.mobile-menu .mm-group__toggle svg { width: 18px; height: 18px; transition: transform .15s; }
.mobile-menu .mm-group__toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mobile-menu .mm-group__toggle:hover,
.mobile-menu .mm-group__toggle:focus-visible { background: rgba(0,168,232,.16); color: var(--cyan); }
.mobile-menu ul.mm-group__list { padding: 0; background: rgba(255,255,255,.03); }
.mobile-menu ul.mm-group__list[hidden] { display: none; }
.mobile-menu .mm-group__list a:not(.btn) { padding-left: calc(var(--gutter) + 1rem); font-weight: 500; }

/* ---------- Blog (Oct 2026) ---------- */
.post h1 { margin: .4rem 0 .6rem; }
.post__meta { color: var(--slate); font-size: .95rem; margin: 0 0 1.5rem; }
.post__image { margin: 0 0 2rem; }
.post__image img { aspect-ratio: 3 / 2; object-fit: cover; }
.post__image img, .post__body figure img { width: 100%; height: auto; border-radius: 10px; }
.post__body figure { margin: 1.75rem 0; }
.post__body blockquote { margin: 1.5rem 0; padding: .25rem 0 .25rem 1.1rem; border-left: 3px solid var(--cyan); color: var(--slate); }
.post__service { margin: 2.5rem 0 1rem; padding: 1.4rem 1.5rem; background: var(--mist); border-radius: 12px; }
.post__service h2 { font-size: 1.2rem; margin: 0 0 .5rem; }
.post__service p:last-child { margin-bottom: 0; }
.post__back { margin: 1.5rem 0 0; }
.post-list { display: grid; gap: 1.25rem; margin-top: 2rem; }
.post-card { padding: 1.25rem 0; border-top: 1px solid var(--fog); }
.post-card h2 { font-size: 1.25rem; margin: 0 0 .4rem; }
.post-card h2 a { color: inherit; text-decoration: none; }
.post-card h2 a:hover { color: var(--cyan-dark, #0777A7); text-decoration: underline; }
.post-card p { margin: 0; color: var(--slate); }
.post-card__meta { font-size: .85rem; margin-bottom: .3rem !important; }

/* ---------- Quote form: window cleaning questions (Oct 2026) ---------- */
.qf__win[hidden], [data-qf-address][hidden] { display: none; }
.choices--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 520px) { .choices--3 { grid-template-columns: 1fr; } }
.choices--3 .choice { align-items: center; }
.choices--3 .choice input { margin: 0; }
select[aria-invalid="true"] { border-color: #D9534F; }
fieldset[aria-invalid="true"] .choice { border-color: #D9534F; }
[data-qf-window-hint][hidden] { display: none; }