/* Eflow delivery kit - CSS baseline. Include FIRST in every build, then the
   template/site styles. Every rule here is a shipped-bug fix from Dundrum. */

/* -- reset: the 8px UA body margin rendered as a white frame around every
      section on mobile, invisible in desktop screenshots -- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, picture, video { max-width: 100%; display: block; }
picture { display: contents; } /* keeps absolutely-positioned img layouts intact */

/* -- responsive header: the CTA clipped off-screen 1280-1500px in production.
      Pattern: below 1500, tighten gaps + drop the phone TEXT (keep the button).
      Tune the numbers per template, keep the structure. -- */
@media (max-width: 1500px) {
  .header-inner { gap: 20px; padding: 0 28px; }
  .header-phone { display: none; }
  .main-nav > ul > li > a { padding-left: 11px; padding-right: 11px; }
}

/* -- mobile footer brand: centre across the WHOLE stacked range. The 561-860px
      band was left-aligned while <560 centred - always centre the full range -- */
@media (max-width: 860px) {
  .ft-brand { margin-left: auto; margin-right: auto; text-align: center; }
  .ft-brand .ft-logo { margin-left: auto; margin-right: auto; }
  .ft-tag { margin-left: auto; margin-right: auto; text-align: center; }
  .ft-social { justify-content: center; }
}

/* -- gallery: grid loads THUMBS (600px), lightbox swaps in full res via data-full.
      Serving full-size photos into 171px slots cost Dundrum 43MB on one page.
      JS: lbImg.src = im.getAttribute('data-full') || im.src; -- */
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }

/* -- sticky mobile call bar: every trades site gets one; body padding reserves
      space so the bar never covers content -- */
@media (max-width: 900px) {
  .mobile-call-bar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 1200; }
  .mobile-call-bar a { flex: 1; text-align: center; padding: 16px 0 17px; font-weight: 700; }
  body { padding-bottom: 56px; }
}

/* -- reduced motion: calm is the register anyway; respect the preference -- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* JMC Power Cleaning — design tokens extracted from the printed leaflet (brand/LEAFLET.md). */
:root {
  /* colour */
  --blue-900: #0B2A6F;
  --blue-800: #0F3A94;
  --blue-700: #1348B5;
  --blue-600: #1E63CC;
  --blue-500: #2F7FE0;
  --blue-400: #4A98EA;
  --blue-300: #6FB6F5;
  --blue-200: #9FD0F8;
  --blue-100: #BFE0FA;
  --blue-050: #E9F4FD;
  --red-600: #D9202B;
  --red-700: #B7141E;
  --white: #FFFFFF;
  --cream: #F4EFE6;
  --ink: #0B1B3A;
  --fb: #1877F2;
  --wa: #25D366;
  --wa-btn: #128C4A;
  --tt: #010101;

  --grad-masthead: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-600) 100%);
  --grad-body: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-400) 55%, var(--blue-300) 100%);
  --grad-body-deep: linear-gradient(180deg, var(--blue-600) 0%, var(--blue-500) 60%, var(--blue-400) 100%);

  /* type */
  --font-display: "Arial Black", "Archivo Black", Arial, Helvetica, sans-serif;
  --font-condensed: "Arial Narrow", "Archivo Narrow", "Roboto Condensed", Arial, sans-serif;
  --font-body: Arial, "Arimo", Helvetica, sans-serif;
  --font-serif: "Barlow", Arial, sans-serif;

  --fs-wordmark: clamp(4.5rem, 26vw, 9rem);
  --fs-h1: clamp(1.9rem, 5.2vw, 3.4rem);
  --fs-h2: clamp(1.5rem, 3.6vw, 2.4rem);
  --fs-h3: clamp(1.15rem, 2.2vw, 1.4rem);
  --fs-body: clamp(1rem, 1.05vw, 1.125rem);
  --fs-small: 0.8125rem;
  --fs-cta: clamp(1.15rem, 3vw, 1.9rem);

  /* spacing */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --measure: 62ch;
  --wrap: 72rem;
  --gutter: clamp(1rem, 4vw, 2.5rem);

  /* surface */
  --radius: 0;
  --frame: 3px solid var(--white);
  --shadow-frame: 0 8px 22px rgba(11, 42, 111, 0.38);
  --shadow-lift: 0 10px 30px rgba(11, 42, 111, 0.28);
  --keyline: 1px solid rgba(255, 255, 255, 0.35);

  /* motion */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --dur: 480ms;
}

/* JMC Power Cleaning — leaflet component library. Every design imports this after tokens.css. */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--white);
  background: var(--blue-500);
  background-image: var(--grad-body);
  background-attachment: scroll;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1, h2, h3, h4, p, ul, figure { margin: 0; }
ul { padding: 0; list-style: none; }
.wrap { width: min(100% - 2 * var(--gutter), var(--wrap)); margin-inline: auto; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }

/* ---------- top strip (phone + nav) ---------- */
.topstrip {
  background: var(--blue-900);
  color: var(--white);
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-size: 0.95rem;
}
.topstrip .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 2.75rem; }
.topstrip nav { display: flex; gap: clamp(0.75rem, 2.5vw, 1.75rem); }
.topstrip nav a { text-decoration: none; opacity: 0.92; padding: 0.4rem 0; border-bottom: 2px solid transparent; }
.topstrip nav a:hover { opacity: 1; border-bottom-color: var(--red-600); }
.topstrip .phone { text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; }
.topstrip .phone svg { width: 1rem; height: 1rem; fill: var(--red-600); }
@media (max-width: 720px) { .topstrip nav { display: none; } .topstrip .wrap { justify-content: center; } }

/* ---------- masthead (leaflet header band) ---------- */
.masthead {
  position: relative;
  background: var(--grad-masthead);
  text-align: center;
  padding: clamp(1.25rem, 4vw, 2.5rem) var(--gutter) clamp(2.25rem, 6vw, 3.75rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 50% 100%, 0 calc(100% - 1.6rem));
}
.masthead--flat { clip-path: none; padding-bottom: clamp(1.25rem, 4vw, 2.25rem); }
.wordmark {
  display: inline-grid;
  grid-template-columns: auto auto;
  align-items: start;
  column-gap: clamp(0.5rem, 2vw, 1rem);
  text-decoration: none;
}
.wordmark__jmc {
  font-family: var(--font-display);
  font-weight: 900;
  font-size: var(--fs-wordmark);
  line-height: 0.9;
  letter-spacing: -0.03em;
  color: var(--white);
  paint-order: stroke fill;
  -webkit-text-stroke: 0.045em var(--blue-900);
  text-shadow: 0.045em 0.045em 0 var(--blue-900), 0.09em 0.09em 0 rgba(11, 42, 111, 0.35);
}
.wordmark__fb {
  width: clamp(1.6rem, 5.5vw, 2.6rem);
  height: clamp(1.6rem, 5.5vw, 2.6rem);
  background: var(--fb);
  display: grid;
  place-items: center;
  margin-top: 0.15em;
  box-shadow: 0.08rem 0.08rem 0 var(--blue-900);
}
.wordmark__fb svg { width: 70%; height: 70%; fill: var(--white); }
.wordmark__sub {
  grid-column: 1 / -1;
  font-family: var(--font-condensed);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.1rem, 4.2vw, 2rem);
  color: var(--white);
  margin-top: 0.15em;
}
.wordmark--small .wordmark__jmc { font-size: clamp(2.4rem, 6vw, 3.4rem); }
.wordmark--small .wordmark__sub { font-size: clamp(0.8rem, 1.6vw, 0.95rem); }
.wordmark--small .wordmark__fb { width: 1.2rem; height: 1.2rem; }

/* ---------- headings ---------- */
.h-red, .h-white {
  font-family: var(--font-display);
  font-weight: 900;
  text-transform: uppercase;
  line-height: 1.05;
  letter-spacing: -0.005em;
  text-wrap: balance;
}
.h-red { color: var(--red-600); text-shadow: 0 0 2px rgba(255, 255, 255, 0.85), 0 1px 0 rgba(255, 255, 255, 0.55); }
.h-white { color: var(--white); text-shadow: 0 2px 0 rgba(11, 42, 111, 0.35); }
.h1 { font-size: var(--fs-h1); }
.h2 { font-size: var(--fs-h2); }
.h3 { font-size: var(--fs-h3); }
.lede { max-width: var(--measure); font-weight: 700; }
.muted { color: var(--blue-100); }

/* ---------- red bullet list ---------- */
.list-red { display: grid; gap: 0.55rem; }
.list-red li {
  position: relative;
  padding-left: 1.6rem;
  font-weight: 700;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  line-height: 1.35;
  text-shadow: 0 1px 0 rgba(11, 42, 111, 0.35);
}
.list-red li::before {
  content: "";
  position: absolute;
  left: 0.1rem;
  top: 0.5em;
  width: 0.7rem;
  height: 0.7rem;
  border-radius: 50%;
  background: var(--red-600);
  box-shadow: 0 0 0 2px var(--white), 0 1px 2px rgba(11, 42, 111, 0.4);
}

/* ---------- photo frames and before/after pairs ---------- */
.frame {
  position: relative;
  border: var(--frame);
  box-shadow: var(--shadow-frame);
  background: var(--blue-900);
  overflow: hidden;
}
.frame img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4 / 3; }
.frame__label {
  position: absolute;
  top: 0.45rem;
  right: 0.6rem;
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--white);
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.75), 0 0 6px rgba(0, 0, 0, 0.5);
}
.frame__label--left { right: auto; left: 0.6rem; }
/* "before" treatment: stands in for James's real before shots until they arrive */
.is-before img { filter: sepia(0.35) saturate(0.55) brightness(0.68) contrast(1.15) hue-rotate(35deg); }
.is-before::after {
  content: "";
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 60% at 50% 100%, rgba(60, 90, 30, 0.45), transparent 60%),
    linear-gradient(180deg, rgba(20, 40, 20, 0.05), rgba(40, 70, 30, 0.35));
  pointer-events: none;
}

.pair { position: relative; display: grid; }
.pair--stack { grid-template-columns: 1fr; }
.pair--stack .frame:first-child { width: 78%; justify-self: start; }
.pair--stack .frame:last-child { width: 78%; justify-self: end; margin-top: -22%; z-index: 1; }
.pair--side { grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.pair--side .frame img { aspect-ratio: 1 / 1; }

/* ---------- bands ---------- */
.band { padding-block: clamp(2.5rem, 6vw, 4.5rem); }
.band--tight { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.band--body { background: var(--grad-body); }
.band--deep { background: var(--grad-body-deep); }
.band--navy { background: var(--blue-900); }
.band--ice { background: var(--blue-100); color: var(--blue-900); }
.band--ice :focus-visible, .contact-band :focus-visible { outline-color: var(--red-600); }
.band--ice .faq details { border-color: rgba(11, 42, 111, 0.22); }
.band--white { background: var(--white); color: var(--ink); }

/* ---------- contact band (serif, navy on ice) ---------- */
.contact-band {
  background: linear-gradient(180deg, var(--blue-200), var(--blue-100));
  color: var(--blue-900);
  font-family: var(--font-serif);
  font-weight: 700;
  text-align: center;
  font-size: clamp(1.05rem, 2.2vw, 1.45rem);
  line-height: 1.35;
}
.contact-band .wrap { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: var(--s-4); padding-block: var(--s-5); }
.contact-band a { color: inherit; text-decoration: none; }
.contact-band a:hover { text-decoration: underline; }
@media (max-width: 640px) {
  .contact-band .wrap { grid-template-columns: 1fr; }
  .contact-band .socials { justify-content: center; }
}

/* ---------- social tiles ---------- */
.socials { display: flex; gap: 0.6rem; align-items: center; }
.socials a { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--white); box-shadow: 0 2px 6px rgba(11, 42, 111, 0.3); transition: transform 200ms var(--ease-out); }
.socials a:hover { transform: translateY(-2px); }
.socials svg { width: 60%; height: 60%; }
.socials .tt { background: var(--tt); }
.socials .wa { background: var(--wa); }
.socials .fb { background: var(--fb); }
.socials .fb svg, .socials .tt svg, .socials .wa svg { fill: var(--white); }

/* ---------- red CTA bar ---------- */
.cta-bar {
  display: block;
  background: var(--red-600);
  color: var(--white);
  font-family: var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--fs-cta);
  text-align: center;
  text-decoration: none;
  padding: clamp(0.85rem, 2.2vw, 1.25rem) var(--gutter);
  transition: background 200ms var(--ease-out);
}
.cta-bar:hover { background: var(--red-700); }
.cta-bar small { display: block; font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0.12em; opacity: 0.9; margin-top: 0.15rem; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem;
  font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  font-size: clamp(1rem, 1.6vw, 1.2rem);
  padding: 0.8rem 1.4rem; text-decoration: none; border: 0; cursor: pointer;
  transition: transform 200ms var(--ease-out), background 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.btn svg { width: 1.1em; height: 1.1em; fill: currentColor; }
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn--red { background: var(--red-600); color: var(--white); box-shadow: 0 4px 12px rgba(183, 20, 30, 0.35); }
.btn--red:hover { background: var(--red-700); }
.btn--white { background: var(--white); color: var(--blue-900); box-shadow: 0 4px 12px rgba(11, 42, 111, 0.25); }
.btn--white:hover { background: var(--blue-050); }
.btn--wa { background: var(--wa-btn); color: var(--white); box-shadow: 0 4px 12px rgba(18, 140, 74, 0.35); }
.btn--wa:hover { background: #0f7a40; }
.btn--ghost { background: transparent; color: var(--white); border: 2px solid var(--white); }
.btn--ghost:hover { background: rgba(255, 255, 255, 0.12); }
.btn--block { display: flex; width: 100%; }

/* ---------- footer ---------- */
.footer { background: var(--blue-900); color: var(--blue-100); font-size: var(--fs-small); padding-block: var(--s-6); }
.footer .wrap { display: grid; gap: var(--s-4); grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); }
.footer a { color: var(--white); text-decoration: none; }
.footer a:hover { text-decoration: underline; }
.footer h4 { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.08em; color: var(--white); margin-bottom: 0.4rem; font-size: 0.9rem; }
.footer .legal { grid-column: 1 / -1; border-top: var(--keyline); padding-top: var(--s-4); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-3); }

/* ---------- mobile sticky call bar ---------- */
.callbar {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: grid; grid-template-columns: 1fr 1fr;
  background: var(--red-600); box-shadow: 0 -6px 18px rgba(11, 42, 111, 0.4);
}
.callbar a {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
  font-family: var(--font-serif); font-weight: 700; text-transform: uppercase; letter-spacing: 0.03em;
  color: var(--white); text-decoration: none; padding: 0.95rem 0.5rem; font-size: 1.05rem;
}
.callbar a + a { background: var(--wa-btn); }
.callbar svg { width: 1.2rem; height: 1.2rem; fill: currentColor; }
@media (min-width: 721px) { .callbar { display: none; } }
@media (max-width: 720px) { .footer { padding-bottom: calc(var(--s-6) + 3.6rem); } }

/* ---------- reveal motion (one authored moment) ---------- */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; transform: translateY(18px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
  .reveal.in { opacity: 1; transform: none; }
  .reveal[data-delay="1"] { transition-delay: 90ms; }
  .reveal[data-delay="2"] { transition-delay: 180ms; }
  .reveal[data-delay="3"] { transition-delay: 270ms; }
}

/* ---------- FAQ ---------- */
.faq details { border-top: var(--keyline); }
.faq details:last-child { border-bottom: var(--keyline); }
.faq summary { cursor: pointer; list-style: none; padding: 0.9rem 0; font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; gap: 1rem; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); color: var(--red-600); }
.faq details[open] summary::after { content: "\2013"; }
.faq p { padding-bottom: 0.9rem; max-width: var(--measure); }

/* JMC Power Cleaning — site layer (round 2). Loads after leaflet.css. Turns the leaflet system into a modern homepage:
   sticky nav, hero with trust signals, service cards, why-us, gallery, about, reviews, areas, FAQ, quote. */

:root {
  --radius: 4px;
  --radius-lg: 8px;
  --shadow-card: 0 1px 2px rgba(11, 42, 111, 0.08), 0 10px 28px rgba(11, 42, 111, 0.14);
  --shadow-card-hover: 0 2px 4px rgba(11, 42, 111, 0.1), 0 18px 40px rgba(11, 42, 111, 0.2);
  --ice-line: rgba(11, 42, 111, 0.14);
}
[id] { scroll-margin-top: 4.25rem; }
.btn { border-radius: var(--radius); }
.frame { border-radius: 3px; }
.frame img { aspect-ratio: 4 / 3; }
.wordmark__fb { display: none; }
.wordmark { grid-template-columns: auto; }

/* ---------- sticky nav ---------- */
.nav {
  position: sticky; top: 0; z-index: 40;
  background: var(--blue-900);
  color: var(--white);
  box-shadow: 0 2px 12px rgba(11, 42, 111, 0.35);
}
.nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 3.75rem; }
.nav__brand { display: inline-grid; text-decoration: none; line-height: 1; }
.nav__brand .jmc { font-family: var(--font-display); font-weight: 900; font-size: 1.6rem; letter-spacing: -0.03em; color: var(--white); paint-order: stroke fill; -webkit-text-stroke: 0.04em var(--blue-900); }
.nav__brand .sub { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; color: var(--blue-100); margin-top: 0.1rem; }
.nav__links { display: flex; gap: clamp(0.75rem, 2.2vw, 1.6rem); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.95rem; }
.nav__links a { text-decoration: none; padding: 0.4rem 0; border-bottom: 2px solid transparent; opacity: 0.92; }
.nav__links a:hover { opacity: 1; border-bottom-color: var(--red-600); }
.nav .btn { padding: 0.6rem 1rem; font-size: 0.95rem; }
@media (max-width: 860px) { .nav__links { display: none; } }
@media (max-width: 480px) { .nav .btn span { display: none; } }

/* ---------- hero ---------- */
.hero { background: var(--grad-body); color: var(--white); position: relative; overflow: clip; }
.hero__mast {
  background: var(--grad-masthead);
  text-align: center;
  padding: clamp(1.5rem, 4vw, 2.75rem) var(--gutter) clamp(2.5rem, 6vw, 4rem);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 50% 100%, 0 calc(100% - 1.6rem));
  margin-bottom: -0.5rem;
}
.hero__body { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(2.5rem, 6vw, 4.5rem); }
.hero__grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.hero__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; line-height: 1.02; letter-spacing: -0.01em; font-size: clamp(2rem, 4.6vw, 3.4rem); color: var(--white); text-shadow: 0 2px 0 rgba(11, 42, 111, 0.35); text-wrap: balance; }
.hero__title em { font-style: normal; color: var(--red-600); text-shadow: 0 0 2px rgba(255,255,255,.85), 0 2px 0 rgba(255,255,255,.55); }
.hero__sub { margin-top: 1rem; max-width: 52ch; font-size: clamp(1.05rem, 1.5vw, 1.25rem); font-weight: 700; text-shadow: 0 1px 0 rgba(11, 42, 111, 0.35); }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; }
.hero__actions .btn { font-size: clamp(1.05rem, 1.6vw, 1.2rem); padding: 0.95rem 1.5rem; }
.trust { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1.5rem; }
.chip {
  display: inline-flex; align-items: center; gap: 0.5rem;
  background: rgba(255, 255, 255, 0.96); color: var(--blue-900);
  font-family: var(--font-body); font-weight: 700; font-size: 0.9rem;
  padding: 0.45rem 0.8rem 0.45rem 0.6rem; border-radius: 999px;
  box-shadow: 0 2px 8px rgba(11, 42, 111, 0.22);
}
.chip svg { width: 1.1rem; height: 1.1rem; flex: none; }
.chip .stars { display: inline-flex; gap: 1px; }
.chip .stars svg { width: 0.85rem; height: 0.85rem; fill: #F5B400; }
.chip small { font-weight: 400; color: #33487a; }
.hero__media { position: relative; }
@media (max-width: 860px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { max-width: 34rem; }
}

/* ---------- sections ---------- */
.section { padding-block: clamp(3rem, 7vw, 5.5rem); }
.section--tight { padding-block: clamp(2rem, 5vw, 3.5rem); }
.section__head { max-width: 60ch; margin-bottom: clamp(1.5rem, 3.5vw, 2.75rem); }
.section__head .h-red { font-size: var(--fs-h2); }
.section__lede { margin-top: 0.75rem; font-size: clamp(1.05rem, 1.4vw, 1.2rem); font-weight: 700; }
.section__head--center { margin-inline: auto; text-align: center; }
.band--white, .band--ice { color: var(--ink); }
.band--white .h-red, .band--ice .h-red { text-shadow: none; }
.band--white .section__lede, .band--ice .section__lede { color: #2c3e66; font-weight: 400; }
.band--white .list-red li, .band--ice .list-red li { color: var(--ink); text-shadow: none; }
.band--white .list-red li::before, .band--ice .list-red li::before { box-shadow: 0 0 0 2px var(--blue-100); }
.band--white .h-white, .band--ice .h-white { color: var(--blue-900); text-shadow: none; }
.band--white .muted, .band--ice .muted { color: #2c3e66; }

/* ---------- service cards ---------- */
.svc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.svc {
  display: grid; grid-template-rows: auto 1fr;
  background: var(--white); color: var(--ink);
  border-radius: var(--radius-lg); overflow: hidden;
  box-shadow: var(--shadow-card);
  text-decoration: none;
  transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out);
}
.svc:hover { transform: translateY(-3px); box-shadow: var(--shadow-card-hover); }
.svc img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.svc__body { padding: 1.1rem 1.2rem 1.3rem; display: grid; gap: 0.5rem; align-content: start; }
.svc__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; color: var(--red-600); }
.svc__body p { color: #2c3e66; font-size: 0.98rem; }
.svc__more { margin-top: auto; font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem; color: var(--blue-700); display: inline-flex; align-items: center; gap: 0.35rem; }
.svc__more svg { width: 1rem; height: 1rem; fill: currentColor; }
@media (max-width: 900px) { .svc-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .svc-grid { grid-template-columns: 1fr; } }

/* ---------- why us ---------- */
.why-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1rem, 2.5vw, 2rem); }
.why { display: grid; gap: 0.6rem; align-content: start; }
.why__icon { width: 3rem; height: 3rem; border-radius: 50%; background: var(--red-600); display: grid; place-items: center; box-shadow: 0 0 0 3px rgba(255,255,255,.9), 0 6px 16px rgba(11,42,111,.35); }
.why__icon svg { width: 1.5rem; height: 1.5rem; fill: var(--white); }
.why__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; color: var(--white); text-shadow: 0 2px 0 rgba(11,42,111,.35); }
.why p { color: var(--blue-050); }
@media (max-width: 900px) { .why-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 480px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- before/after gallery ---------- */
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.pair--side figcaption { grid-column: 1 / -1; }
.gallery-grid figcaption { margin-top: 0.6rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; font-size: 0.95rem; }
.gallery-grid figcaption span:last-child { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: 0.08em; color: var(--blue-100); }
@media (max-width: 860px) { .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .gallery-grid { grid-template-columns: 1fr; } }

/* ---------- about ---------- */
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.about-grid p + p { margin-top: 0.9rem; }
.about__facts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem 1.5rem; margin-top: 1.25rem; }
.about__facts div { border-top: 3px solid var(--red-600); padding-top: 0.5rem; }
.about__facts b { display: block; font-family: var(--font-display); font-weight: 900; font-size: 1.05rem; color: var(--blue-900); }
.about__facts span { color: #2c3e66; font-size: 0.92rem; }
@media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } }

/* ---------- reviews ---------- */
.review-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.5vw, 1.75rem); }
.review { background: var(--white); border-radius: var(--radius-lg); padding: 1.25rem 1.35rem; box-shadow: var(--shadow-card); display: grid; gap: 0.7rem; align-content: start; position: relative; }
.review .stars { display: inline-flex; gap: 2px; }
.review .stars svg { width: 1rem; height: 1rem; fill: #F5B400; }
.review p { color: var(--ink); font-size: 1rem; line-height: 1.55; }
.review footer { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-size: 0.9rem; color: #2c3e66; }
.review footer b { color: var(--blue-900); }
.review footer svg { width: 1.1rem; height: 1.1rem; }
.review--placeholder { outline: 2px dashed var(--blue-300); outline-offset: -2px; }
.review--placeholder::before { content: "Real review goes here"; position: absolute; top: -0.65rem; left: 1rem; background: var(--blue-300); color: var(--blue-900); font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.7rem; padding: 0.15rem 0.5rem; border-radius: 999px; }
.review--placeholder p { color: #55679a; font-style: italic; }
@media (max-width: 860px) { .review-grid { grid-template-columns: 1fr; } }
.rating-row { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: clamp(1.25rem, 3vw, 2rem); }

/* ---------- areas ---------- */
.area-list { display: flex; flex-wrap: wrap; gap: 0.6rem; }
.area-list li { background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.35); padding: 0.45rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.95rem; }
.area-list li.is-home { background: var(--red-600); border-color: var(--red-600); }

/* ---------- quote form ---------- */
.form { display: grid; gap: .8rem; }
.form label { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .06em; font-weight: 700; font-size: .9rem; display: grid; gap: .3rem; color: var(--blue-900); }
.form input, .form textarea, .form select { font: inherit; font-family: var(--font-body); padding: .75rem .85rem; border: 1.5px solid var(--ice-line); border-radius: var(--radius); background: var(--white); color: var(--ink); width: 100%; box-shadow: inset 0 1px 2px rgba(11,42,111,.06); }
.form input:focus, .form textarea:focus, .form select:focus { outline: 3px solid var(--red-600); outline-offset: 1px; border-color: var(--blue-700); }
.form .row { display: grid; grid-template-columns: 1fr 1fr; gap: .8rem; }
.form .help { font-family: var(--font-body); font-size: .88rem; color: #2c3e66; text-transform: none; letter-spacing: 0; font-weight: 400; }
.form .help a { color: var(--blue-700); }
.quote-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.quote-card { background: var(--white); border-radius: var(--radius-lg); padding: clamp(1.25rem, 3vw, 2rem); box-shadow: var(--shadow-card); }
@media (max-width: 860px) { .quote-grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .form .row { grid-template-columns: 1fr; } }

/* ---------- faq on light ---------- */
.band--white .faq details, .band--ice .faq details { border-color: var(--ice-line); }
.band--white .faq summary, .band--ice .faq summary { color: var(--blue-900); }
.band--white .faq p, .band--ice .faq p { color: #2c3e66; }

/* ---------- footer tidy ---------- */
.footer .nav__brand .jmc { font-size: 2rem; }

/* ---------- uniform hero (round 3): JMC masthead + photo scene with copy, trust, and quote form ---------- */
.hero__scene {
  position: relative; isolation: isolate; min-height: 560px; display: grid; align-items: center;
  background: var(--blue-900) url("../../assets/photos/gbp_clean.jpg") center 40% / cover no-repeat;
  padding-block: clamp(2.5rem, 6vw, 4.5rem);
}
.hero__scene::before {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(100deg, rgba(8, 26, 70, 0.94) 0%, rgba(8, 26, 70, 0.8) 42%, rgba(8, 26, 70, 0.42) 100%);
}
.hero__scene .hero__grid { grid-template-columns: 1.15fr 0.85fr; align-items: center; }
.hero__scene .hero__title { font-size: clamp(1.9rem, 3.5vw, 2.9rem); max-width: 18ch; }
.hero__scene .hero__sub { color: rgba(255, 255, 255, 0.9); text-shadow: none; font-weight: 400; max-width: 50ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; }
.hero__ticks { display: grid; gap: 0.6rem; margin-top: 1.1rem; font-weight: 700; font-size: 0.98rem; }
.hero__ticks li { display: flex; align-items: center; gap: 0.6rem; }
.hero__ticks i { width: 1.25rem; height: 1.25rem; border-radius: 50%; background: var(--red-600); display: inline-grid; place-items: center; flex: none; box-shadow: 0 0 0 2px rgba(255,255,255,.85); }
.hero__ticks i svg { width: 0.8rem; height: 0.8rem; fill: var(--white); }
.gpill { display: inline-flex; align-items: center; gap: 0.6rem; background: var(--white); color: var(--blue-900); border-radius: 10px; padding: 0.6rem 0.9rem; font-weight: 700; box-shadow: 0 12px 30px -12px rgba(0,0,0,.6); margin-top: 1.4rem; text-decoration: none; }
.gpill svg { width: 1.1rem; height: 1.1rem; }
.gpill .stars { display: inline-flex; gap: 1px; }
.gpill .stars svg { width: 0.9rem; height: 0.9rem; fill: #F5B400; }
.gpill small { font-weight: 400; color: #33487a; }
.gpill + .gpill { margin-left: 0.6rem; }
.hero__form {
  background: var(--white); color: var(--ink);
  border-radius: 14px; padding: clamp(1.25rem, 2.5vw, 1.75rem);
  box-shadow: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
  max-width: 30rem; width: 100%; justify-self: end;
}
.hero__form h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; color: var(--red-600); font-size: 1.45rem; line-height: 1.1; }
.hero__form .fs { color: #2c3e66; font-size: 0.95rem; margin: 0.35rem 0 1rem; line-height: 1.5; }
.hero__form .note { font-size: 0.8rem; color: #55679a; text-align: center; margin-top: 0.4rem; }
.hero__form .note a { color: var(--blue-700); }
.hero__form .btn { width: 100%; }
.hero__strip { background: var(--white); color: var(--blue-900); border-bottom: 1px solid var(--ice-line); }
.hero__strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); }
.hero__strip span { display: flex; align-items: center; gap: 0.6rem; padding: 1.1rem 1.25rem; border-left: 1px solid var(--ice-line); font-weight: 700; font-size: 0.95rem; }
.hero__strip span:first-child { border-left: 0; padding-left: 0; }
.hero__strip i { width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--red-600); flex: none; }
@media (max-width: 900px) {
  .hero__scene .hero__grid { grid-template-columns: 1fr; }
  .hero__form { justify-self: stretch; max-width: none; }
  .hero__strip .wrap { grid-template-columns: 1fr 1fr; }
  .hero__strip span { border-left: 0; padding: 0.75rem 0; }
}
@media (max-width: 480px) { .hero__strip .wrap { grid-template-columns: 1fr; } .hero__strip span { padding: 0.5rem 0; } }

/* ---------- round 3b: variant D type, masthead as nav, chevron keyline ---------- */
.wordmark__jmc { font-size: clamp(3.4rem, 13vw, 5.5rem); }
.wordmark__sub { font-size: clamp(0.95rem, 3vw, 1.35rem); }
.hero__title { font-family: "Barlow", Arial, sans-serif; font-weight: 800; letter-spacing: 0.005em; line-height: 1; text-shadow: none; }
.hero__scene .hero__title { font-size: clamp(2.2rem, 4.2vw, 3.6rem); }
.hero__title em { text-shadow: none; }
.hero__sub, .hero__scene .hero__sub { font-family: "Barlow", Arial, sans-serif; font-size: clamp(1.1rem, 1.5vw, 1.3rem); }
.btn { font-family: "Barlow", Arial, sans-serif; font-weight: 700; letter-spacing: 0.06em; border-radius: 6px; font-size: 1rem; padding: 0.95rem 1.5rem; }
.cta-bar { font-family: "Barlow", Arial, sans-serif; font-weight: 800; letter-spacing: 0.06em; }
.callbar a { font-family: "Barlow", Arial, sans-serif; letter-spacing: 0.05em; }
.hero__ticks, .gpill, .hero__strip span, .hero__form, .form label, .chip { font-family: "Barlow", Arial, sans-serif; }
.hero__ticks { font-weight: 600; }
.hero__form h2 { font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 1.6rem; }
.form label { font-size: 0.85rem; letter-spacing: 0.06em; }
.h-red, .h-white, .svc__title, .why__title, .nav__brand .sub, .section__head .h-red { font-family: "Barlow", Arial, sans-serif; font-weight: 800; letter-spacing: 0.005em; }
.h-red, .section__head .h-red { text-shadow: none; }
.svc__more, .topstrip, .footer h4 { font-family: "Barlow", Arial, sans-serif; }

/* masthead carries the nav */
.hero__mastwrap { position: relative; }
.hero__mastwrap::before {
  content: ""; position: absolute; inset: 0 0 -4px 0; background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 1.6rem), 50% 100%, 0 calc(100% - 1.6rem));
}
.hero__mastwrap .hero__mast { position: relative; margin-bottom: 0; padding: clamp(1rem, 2.5vw, 1.5rem) var(--gutter) clamp(2.4rem, 5vw, 3.4rem); }
.hero__mast .wordmark { text-decoration: none; }
.mastnav { display: flex; align-items: center; justify-content: center; gap: clamp(0.9rem, 2.4vw, 2rem); margin-top: clamp(0.9rem, 2vw, 1.4rem); flex-wrap: wrap; }
.mastnav a:not(.btn) { color: var(--white); text-decoration: none; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; padding: 0.3rem 0; border-bottom: 2px solid transparent; opacity: 0.94; }
.mastnav a:not(.btn):hover { opacity: 1; border-bottom-color: var(--red-600); }
.mastnav .btn { padding: 0.6rem 1.1rem; font-size: 0.9rem; }
@media (max-width: 860px) { .mastnav a:not(.btn) { display: none; } }

/* slim bar only after scrolling past the masthead */
.nav { position: fixed; inset-inline: 0; top: 0; transform: translateY(-100%); transition: transform 260ms var(--ease-out); }
.nav.is-shown { transform: none; }
.nav .nav__brand .jmc { font-size: 1.5rem; }

/* ---------- round 3c: thicker chevron cut-off, why-us as cards ---------- */
.hero__mastwrap::before { inset: 0 0 -1.1rem 0; }
@media (max-width: 720px) { .hero__mastwrap::before { inset: 0 0 -0.7rem 0; } }
.why-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 2vw, 1.5rem); }
.why {
  grid-template-columns: auto 1fr; column-gap: 1.1rem; row-gap: 0.35rem; align-items: start;
  background: var(--white); color: var(--ink);
  padding: clamp(1.25rem, 2.5vw, 1.6rem) clamp(1.25rem, 2.5vw, 1.75rem);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
}
.why__icon { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; box-shadow: none; }
.why__icon svg { width: 1.5rem; height: 1.5rem; }
.why__num { grid-row: 1 / span 2; box-shadow: none !important; }
.why__title { color: var(--blue-900); text-shadow: none; font-size: 1.25rem; align-self: end; }
.why__title a { color: inherit; }
.why p { color: #2c3e66; grid-column: 2; font-size: 1rem; line-height: 1.55; }
@media (max-width: 720px) { .why-grid { grid-template-columns: 1fr; } }

/* ---------- round 3d (Liam's note 1): true V chevron, uniform white band, photo straight underneath ---------- */
:root { --chev-d: clamp(1.75rem, 3.6vw, 3.4rem); --chev-t: 0.9rem; }
@media (max-width: 720px) { :root { --chev-d: 1.6rem; --chev-t: 0.6rem; } }
.hero { background: transparent; }
.hero__mastwrap { position: relative; z-index: 2; padding-bottom: var(--chev-t); }
.hero__mastwrap::before {
  content: ""; position: absolute; inset: 0; background: var(--white);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chev-d)), 50% 100%, 0 calc(100% - var(--chev-d)));
}
.hero__mastwrap .hero__mast {
  position: relative; margin: 0;
  padding-bottom: calc(var(--chev-d) + clamp(1.25rem, 2.5vw, 2rem));
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--chev-d)), 50% 100%, 0 calc(100% - var(--chev-d)));
}
.hero__scene { z-index: 1; margin-top: calc(-1 * (var(--chev-d) + var(--chev-t))); padding-top: calc(var(--chev-d) + var(--chev-t) + clamp(2.5rem, 6vw, 4.5rem)); }

/* ---------- round 3e (Liam's notes 2 and 3): trust strip as a navy bar, why -> work fades into the white about section ---------- */
.hero__strip { background: var(--blue-900); color: var(--white); border-bottom: 0; }
.hero__strip .wrap { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; }
.hero__strip span {
  flex: 1 1 auto; justify-content: center; padding: 1rem 1.5rem; border-left: 1px solid rgba(255, 255, 255, 0.18);
  font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: 0.9rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white);
}
.hero__strip span:first-child { border-left: 0; padding-left: 1.5rem; }
.hero__strip i { width: 1.15rem; height: 1.15rem; border-radius: 50%; background: var(--red-600); box-shadow: 0 0 0 2px rgba(255,255,255,.75); display: inline-grid; place-items: center; }
.hero__strip i::after { content: ""; width: 0.5rem; height: 0.28rem; border-left: 2px solid var(--white); border-bottom: 2px solid var(--white); transform: rotate(-45deg) translate(1px, -1px); }
@media (max-width: 900px) { .hero__strip .wrap { display: grid; grid-template-columns: 1fr 1fr; } .hero__strip span { border-left: 0; padding: 0.7rem 0.5rem; justify-content: flex-start; } .hero__strip span:first-child { padding-left: 0.5rem; } }
@media (max-width: 480px) { .hero__strip .wrap { grid-template-columns: 1fr; } .hero__strip span { padding: 0.45rem 0; } }

#why { background: linear-gradient(180deg, var(--blue-800) 0%, var(--blue-700) 35%, var(--blue-500) 100%); }
#work { background: linear-gradient(180deg, var(--blue-500) 0%, var(--blue-300) 45%, var(--blue-100) 78%, var(--white) 100%); padding-bottom: clamp(3.5rem, 8vw, 6.5rem); }
#work .section__lede { color: var(--white); }
#work .gallery-grid figcaption { color: var(--blue-900); }
#work .gallery-grid figcaption span:last-child { color: var(--blue-800); }
#work .frame { border-color: var(--white); box-shadow: 0 8px 22px rgba(11, 42, 111, 0.28); }
#about { padding-top: clamp(1.5rem, 4vw, 3rem); }

@media (min-width: 901px) { .hero__strip .wrap { display: grid; grid-template-columns: repeat(4, 1fr); } .hero__strip span { padding: 1rem 0.75rem; font-size: 0.85rem; letter-spacing: 0.06em; white-space: nowrap; } .hero__strip span:first-child { padding-left: 0.75rem; } }

/* ---------- round 3f: softer photo frames ---------- */
.frame { border-radius: 12px; border-width: 3px; box-shadow: 0 10px 26px rgba(11, 42, 111, 0.28); }
.frame img { border-radius: 9px; }
.pair--side { gap: 0.8rem; }
.svc img { border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hero__form { border-radius: 16px; }
.about__facts b, .rating__item b, .review footer b { font-family: "Barlow", Arial, sans-serif; font-weight: 800; }
.band--white .frame { border-color: var(--blue-050); }

/* JMC build layer: the production-only rules on top of the design system (nav menus, inner-page hero, service page bits). */
.skip { position: absolute; left: -999px; top: 0; background: var(--white); color: var(--blue-900); padding: .5rem 1rem; z-index: 100; }
.skip:focus { left: 1rem; }

/* icons sprite inline: hide the symbol host */
svg[aria-hidden="true"][style*="display:none"] { display: none; }

/* services dropdown, desktop */
.dd { position: relative; }
.dd__menu { display: none; position: absolute; left: 50%; top: 100%; transform: translateX(-50%); min-width: 17rem; background: var(--white); color: var(--blue-900); border-radius: 8px; box-shadow: var(--shadow-card-hover); padding: .5rem 0; margin: .4rem 0 0; list-style: none; z-index: 60; text-align: left; }
.dd__menu li a { display: block; padding: .55rem 1rem; color: var(--blue-900) !important; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: none !important; letter-spacing: 0 !important; font-size: .98rem !important; border: 0 !important; opacity: 1 !important; }
.dd__menu li a:hover { background: var(--blue-050); }
.dd:hover .dd__menu, .dd:focus-within .dd__menu { display: block; }
.dd::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: .5rem; }
/* the Services trigger is inside .dd, so it must be a box like its sibling links or it rides 6px high */
.nav__links .dd { display: inline-flex; align-items: center; }
/* hero: quote button on its own line, mobile and landline paired beneath it (Liam, 15 Sep: both numbers) */
.hero__phones { flex: 0 0 100%; display: flex; flex-wrap: wrap; gap: .75rem; }
.nav__links .dd > a { display: inline-block; }

/* mobile menu: burger in the header, full-screen navy panel with the links and the contact buttons */
.mnav, .nav__menu { display: none; }
html.menu-open { overflow: hidden; }
/* the open panel covers the screen, so the masthead's chevron clip-path (which would clip the fixed panel) and the bottom bar can go */
html.menu-open .hero__mastwrap, html.menu-open .hero__mast, html.menu-open .hero { clip-path: none !important; overflow: visible !important; }
html.menu-open .callbar, html.menu-open .nav:not(.nav--static) { display: none !important; }
@media (max-width: 860px) {
  .mnav { display: block; margin-top: .75rem; text-align: center; }
  /* home masthead: the phone pill goes (the number is in the sticky bar and the menu) and the burger takes its slot, centred under the wordmark */
  .hero__mast .mastnav { display: none; }
  .hero__mast .mnav { margin-top: clamp(.9rem, 2vw, 1.4rem); }
  .hero__mast .mnav summary { padding: .7rem 1.35rem .7rem 1.1rem; font-size: .95rem; gap: .7rem; }
  .hero__mast .mnav__burger { width: 1.35rem; gap: 5px; }
  /* the scroll-in bar mirrors the inner-page bar: brand left, MENU pill right, no phone button */
  .nav:not(.nav--static) > .wrap > .btn { display: none; }
  .nav__menu { display: inline-flex; margin-left: auto; }
  /* 1. the trust strip repeats the hero ticks on a phone */
  .hero__strip { display: none; }
  .mnav summary, .nav__menu { list-style: none; background: none; -webkit-appearance: none; appearance: none; line-height: 1; cursor: pointer; display: inline-flex; align-items: center; gap: .6rem; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; font-size: .9rem; color: var(--white); padding: .55rem .95rem .55rem .8rem; border: 1.5px solid rgba(255,255,255,.55); border-radius: 6px; -webkit-tap-highlight-color: transparent; }
  .mnav summary::-webkit-details-marker { display: none; }
  .mnav__burger { display: inline-grid; gap: 4px; width: 1.15rem; }
  .mnav__burger i { display: block; height: 2px; background: currentColor; border-radius: 2px; }
  .mnav__panel { position: fixed; inset: 0; z-index: 120; background: var(--blue-900); color: var(--white); overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; padding: max(1rem, env(safe-area-inset-top)) 1.25rem max(1.25rem, env(safe-area-inset-bottom)); text-align: left; animation: mnav-in 220ms var(--ease-out); }
  @keyframes mnav-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
  .mnav__head { display: flex; align-items: center; justify-content: space-between; padding-bottom: 1rem; border-bottom: 1px solid rgba(255,255,255,.14); }
  .mnav__brand { color: var(--white); text-decoration: none; line-height: 1; }
  .mnav__brand b { display: block; font-family: "Archivo Black", "Arial Black", Arial, sans-serif; font-size: 1.9rem; letter-spacing: -.01em; }
  .mnav__brand span { display: block; font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--blue-100); margin-top: .3rem; }
  .mnav__close { width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1.5px solid rgba(255,255,255,.35); background: transparent; color: var(--white); display: grid; place-items: center; cursor: pointer; padding: 0; }
  .mnav__close svg { width: 1.35rem; height: 1.35rem; fill: currentColor; }
  .mnav__nav { padding: .85rem 0 1rem; }
  .mnav__link { display: block; padding: .55rem 0; color: var(--white); text-decoration: none; font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 1.55rem; line-height: 1.1; text-transform: uppercase; letter-spacing: .01em; }
  .mnav__label { margin: 1.1rem 0 .35rem; font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: .72rem; letter-spacing: .18em; text-transform: uppercase; color: #F26B73; }
  .mnav__services { display: grid; }
  .mnav__services a { display: flex; align-items: center; gap: .5rem; padding: .42rem 0; color: var(--blue-100); text-decoration: none; font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: 1.05rem; }
  .mnav__services a svg { width: .85rem; height: .85rem; fill: var(--red-600); flex: none; }
  .mnav__contact { margin-top: auto; position: sticky; bottom: 0; background: var(--blue-900); padding: 1rem 0 max(.25rem, env(safe-area-inset-bottom)); border-top: 1px solid rgba(255,255,255,.14); display: grid; grid-template-columns: 1fr 1fr; gap: .55rem; }
  .mnav__contact .btn { justify-content: center; text-align: center; font-size: .98rem; padding: .85rem .7rem; }
  .mnav__contact .btn--red, .mnav__contact .btn--wa { grid-column: 1 / -1; }
  .mnav__tel { background: var(--white); color: var(--blue-900); }
  .mnav__tel svg { fill: var(--red-600); }
  .mnav__contact .btn--wa { background: var(--wa-btn); color: var(--white); }
  .mnav__contact .btn--wa svg { fill: var(--white); }
}
@media (prefers-reduced-motion: reduce) { .mnav__panel { animation: none; } }
  .mastnav .btn { display: inline-flex; }
}
.nav .nav__links .dd > a { color: var(--white); }

/* inner page hero: masthead + blue band with the h1 and a framed photo */
.hero__mastwrap--compact .hero__mast { padding-top: clamp(.9rem, 2vw, 1.25rem); }
.hero--inner { background: var(--grad-body); }
.ihero { padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 6vw, 4rem); }
.ihero__grid { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: center; }
.ihero .hero__title { font-size: clamp(2rem, 3.8vw, 3.1rem); max-width: 18ch; }
.ihero .hero__sub { font-weight: 400; text-shadow: none; color: rgba(255,255,255,.94); }
.ihero .hero__sub + .hero__sub { margin-top: .6rem; }
.ihero__media img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .ihero__grid { grid-template-columns: 1fr; } .ihero__media { max-width: 34rem; } }

/* service page */
.two-col { display: grid; grid-template-columns: 1.2fr .8fr; gap: clamp(1.5rem, 5vw, 4rem); align-items: start; }
.two-col .list-red li { font-size: 1.08rem; }
.aside { background: var(--blue-900); color: var(--white); border-radius: var(--radius-lg); padding: 1.5rem; }
.aside .h3 { color: var(--white); margin-bottom: .75rem; }
.area-list--navy li { padding: 0; }
.area-list--navy li a { display: block; padding: .45rem .9rem; color: var(--white); text-decoration: none; }
.area-list--navy li:hover { background: rgba(255,255,255,.22); }
@media (max-width: 860px) { .two-col { grid-template-columns: 1fr; } }
.why-grid--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 900px) { .why-grid--3 { grid-template-columns: 1fr; } }
.why__num { grid-row: 1 / span 2; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--red-600); color: var(--white); display: grid; place-items: center; font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 1.4rem; }
.svc--mini { padding: 1.1rem 1.2rem 1.2rem; grid-template-rows: auto; }
.svc--mini .svc__title { margin-bottom: .35rem; }
.svc--mini p { color: #2c3e66; font-size: .95rem; }
.area-list li a { color: inherit; text-decoration: none; }
.area-list li { padding: 0; }
.area-list li a { display: block; padding: .45rem .9rem; }
.prose { max-width: 70ch; }
.prose p + p { margin-top: .9rem; }
.hero__form .row label select, .hero__form .row label input { min-width: 0; }
.gallery-grid figcaption span:last-child { color: var(--blue-100); }
#work .gallery-grid figcaption span:last-child { color: var(--blue-800); }
.section .btn--white svg { fill: currentColor; }

/* the review placeholders must never ship: make them loud in the build */
.review--placeholder::before { content: "Real Facebook review goes here"; }

/* mobile call bar: the kit reserves body padding; our footer already does */
@media (max-width: 900px) { body { padding-bottom: 0; } }

/* self-hosted faces first so every device renders the same and the fonts actually load */
:root {
  --font-display: "Archivo Black", "Arial Black", Arial, Helvetica, sans-serif;
  --font-condensed: "Archivo Narrow", "Arial Narrow", Arial, sans-serif;
  --font-body: "Arimo", Arial, Helvetica, sans-serif;
  --font-serif: "Barlow", Arial, sans-serif;
}
/* form labels: sentence case, no tracking (no kicker register anywhere on the site) */
.form label { text-transform: none; letter-spacing: 0; font-size: .95rem; font-weight: 700; color: var(--blue-900); }
.hero__form .form label, .hero__form label { text-transform: none; letter-spacing: 0; }

/* before/after: two pairs per row, 4:3 photos, so each shot is big enough to read */
.gallery-grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 3vw, 2.25rem) clamp(1.25rem, 3vw, 2.5rem); }
.pair--side { gap: 0.9rem; }
.pair--side .frame img { aspect-ratio: 4 / 3; }
.gallery-grid figcaption { font-size: 1.05rem; margin-top: .75rem; }
@media (max-width: 720px) { .gallery-grid { grid-template-columns: 1fr; } }

/* before/after compare sliders (one frame per job) */
.cmp__stage { position: relative; aspect-ratio: 4 / 3; overflow: hidden; cursor: ew-resize; touch-action: pan-y; user-select: none; -webkit-user-select: none; }
.cmp__layer { position: absolute; inset: 0; }
.cmp__layer img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: auto; display: block; }
.cmp__layer--before { clip-path: inset(0 calc(100% - var(--pos)) 0 0); }
.cmp__layer--before .frame__label { transition: opacity .2s; }
.cmp__divider { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 3px; background: var(--white); transform: translateX(-50%); box-shadow: 0 0 0 1px rgba(11,42,111,.25); pointer-events: none; }
.cmp__grip { position: absolute; top: 50%; left: 50%; width: 2.6rem; height: 2.6rem; transform: translate(-50%, -50%); border-radius: 50%; background: var(--red-600); border: 3px solid var(--white); box-shadow: 0 4px 12px rgba(11,42,111,.45); display: grid; place-items: center; }
.cmp__grip svg { width: 1.3rem; height: 1.3rem; fill: var(--white); }
.cmp__range { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: ew-resize; }
.cmp__stage:has(.cmp__range:focus-visible) { outline: 3px solid var(--white); outline-offset: 3px; }
.cmp__stage:has(.cmp__range:focus-visible) .cmp__grip { box-shadow: 0 0 0 4px rgba(217,32,43,.45), 0 4px 12px rgba(11,42,111,.45); }
.cmp figcaption { margin-top: .75rem; font-weight: 700; display: flex; justify-content: space-between; gap: 1rem; font-size: 1.05rem; }
.cmp figcaption span:last-child { font-family: var(--font-condensed); text-transform: uppercase; letter-spacing: .08em; color: var(--blue-100); }
#work .cmp figcaption span:last-child { color: var(--blue-800); }
@media (prefers-reduced-motion: no-preference) { .cmp__stage:not(.is-used) .cmp__grip { animation: cmp-nudge 1.4s var(--ease-out) 1s 2; } }
@keyframes cmp-nudge { 0%,100% { transform: translate(-50%,-50%); } 30% { transform: translate(calc(-50% - 8px),-50%); } 70% { transform: translate(calc(-50% + 8px),-50%); } }

/* ---------- footer (Povash structure, JMC colours) ---------- */
.pf { background: var(--blue-900); color: var(--white); font-family: "Barlow", Arial, sans-serif; }
.pf a { color: inherit; text-decoration: none; }
.pf__strip { background: var(--blue-800); border-bottom: 1px solid rgba(255,255,255,.12); overflow: hidden; }
.pf__striprow { display: grid; grid-template-columns: auto 1fr; align-items: stretch; gap: clamp(1.5rem, 4vw, 3rem); }
.pf__brand { display: inline-grid; align-content: center; line-height: 1; position: relative; padding: 1.5rem 3.5rem 1.5rem 0; }
.pf__brand::before { content: ""; position: absolute; top: 0; bottom: 0; left: -50vw; right: 1.5rem; background: var(--blue-700); clip-path: polygon(0 0, 100% 0, calc(100% - 2.2rem) 100%, 0 100%); z-index: 0; }
.pf__brand .jmc, .pf__brand .sub { position: relative; z-index: 1; }
.pf__brand .jmc { font-family: var(--font-display); font-weight: 900; font-size: 2.4rem; letter-spacing: -.03em; color: var(--white); paint-order: stroke fill; -webkit-text-stroke: .04em var(--blue-900); }
.pf__brand .sub { font-family: var(--font-condensed); font-weight: 700; text-transform: uppercase; letter-spacing: .1em; font-size: .78rem; color: var(--blue-100); margin-top: .15rem; }
.pf__contacts { display: grid; grid-template-columns: 1.4fr .9fr 1fr; }
.pf__c { display: flex; align-items: center; gap: .9rem; padding: 1.4rem 1.5rem; border-left: 1px solid rgba(255,255,255,.14); }
.pf__c:first-child { border-left: 0; padding-left: 0; }
.pf__c i { width: 2.4rem; height: 2.4rem; flex: none; display: grid; place-items: center; }
.pf__c i svg { width: 1.7rem; height: 1.7rem; fill: var(--red-600); }
.pf__c small { display: block; color: var(--blue-100); font-size: .85rem; font-weight: 500; }
.pf__c b { display: block; font-weight: 700; font-size: .98rem; margin-top: .1rem; overflow-wrap: anywhere; }
a.pf__c:hover b { color: var(--blue-100); }
.pf__main { padding: clamp(2.5rem, 6vw, 4.5rem) 0 clamp(2rem, 5vw, 3.5rem); }
.pf__cols { display: grid; grid-template-columns: 1.4fr 1fr 1.2fr 1fr; gap: clamp(1.5rem, 4vw, 3.5rem); }
.pf__col h4 { font-weight: 800; font-size: 1.25rem; margin-bottom: 1.1rem; color: var(--white); }
.pf__col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: .55rem; }
.pf__col li a { display: inline-flex; align-items: center; gap: .35rem; color: var(--white); font-weight: 500; font-size: .98rem; transition: color 160ms, transform 160ms; }
.pf__col li a svg { width: 1.05rem; height: 1.05rem; fill: var(--red-600); flex: none; }
@media (hover: hover) { .pf__col li a:hover { color: var(--white); transform: translateX(3px); } }
.pf__about p { color: var(--blue-100); line-height: 1.6; margin-bottom: 1.25rem; max-width: 34ch; font-family: var(--font-body); font-size: .95rem; }
.pf__about .btn { font-size: .95rem; padding: .75rem 1.15rem; }
.pf__about .btn svg { width: 1.1em; height: 1.1em; }
.pf__bar { background: #081F52; border-top: 1px solid rgba(255,255,255,.1); font-family: var(--font-body); font-size: .9rem; color: var(--blue-100); }
.pf__barrow { display: flex; align-items: center; justify-content: center; text-align: center; gap: 1rem; padding: 1.1rem 0; flex-wrap: wrap; }
.pf__bar a { color: var(--white); }
/* bottom-bar socials: solid brand-colour roundels, bigger glyphs (Liam, 15 Sep: the grey ones were weak) */
@media (max-width: 960px) {
  .pf__striprow { grid-template-columns: 1fr; gap: 0; }
  .pf__brand { padding: 1.25rem 0; }
  .pf__brand::before { right: -50vw; clip-path: none; }
  .pf__contacts { grid-template-columns: 1fr; }
  .pf__c { border-left: 0; padding: .9rem 0; border-top: 1px solid rgba(255,255,255,.12); }
  .pf__c:first-child { border-top: 0; }
  .pf__cols { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) { .pf__cols { grid-template-columns: 1fr; } .pf__barrow { justify-content: center; text-align: center; } }
@media (max-width: 900px) { .pf { padding-bottom: 3.6rem; } }

/* sticky contact bar, every screen size: Call | Free quote | WhatsApp */
.callbar { display: grid !important; grid-template-columns: repeat(3, 1fr); position: fixed; inset-inline: 0; bottom: 0; z-index: 60; box-shadow: 0 -6px 18px rgba(11,42,111,.35); }
.callbar a { padding: .9rem .5rem; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: 1rem; }
.callbar svg { width: 1.15rem; height: 1.15rem; }
.callbar__call { background: var(--red-600); }
.callbar__quote { background: var(--blue-900) !important; }
.callbar__wa { background: var(--wa-btn) !important; }
.callbar a:hover { filter: brightness(1.1); }
/* bottom bar is a phone and tablet thing; desktop has the phone button in the nav (Liam, 15 Sep) */
@media (min-width: 901px) { .callbar { display: none !important; } }
body { padding-bottom: 0 !important; }
.pf { padding-bottom: 3.4rem !important; }   /* room for the bottom bar */
@media (min-width: 901px) { .pf { padding-bottom: 0 !important; } }   /* no bar on desktop, no reserve */
@media (max-width: 480px) { .callbar a { font-size: .86rem; letter-spacing: .03em; gap: .35rem; padding-inline: .25rem; } }
:root { --font-serif: "Barlow", Arial, sans-serif; }

/* calm bottom bar: white, navy text, hairline dividers */
.callbar { background: var(--white) !important; box-shadow: 0 -4px 16px rgba(11,42,111,.18); border-top: 1px solid var(--ice-line); }
.callbar a, .callbar__call, .callbar__quote, .callbar__wa { background: var(--white) !important; color: var(--blue-900) !important; }
.callbar a + a { border-left: 1px solid var(--ice-line); }
.callbar a:hover { filter: none; background: var(--blue-050) !important; }
.callbar__call svg { fill: var(--red-600); }
.callbar__quote svg { fill: var(--blue-700); }
.callbar__wa svg { fill: var(--wa-btn); }

.form__status { margin-top: .6rem; font-size: .95rem; min-height: 1.2em; }
.form__status.is-ok { color: #128C4A; font-weight: 700; }
.form__status.is-err { color: var(--red-700); font-weight: 700; }
.form__status a { color: var(--blue-700); }
.form button[disabled] { opacity: .7; cursor: wait; }

/* ---------- homepage round 4: Povash structures in the JMC system ---------- */
.section__head .h-red, .section__head .h-white, .why2 .h-red, .about3 .h-red, .rev3 .h-red { font-size: clamp(2.2rem, 3.9vw, 3.3rem); line-height: 1; }
.section__head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; max-width: none; }
.section__head--row > div { max-width: 60ch; }
.section__head--row .btn { flex: none; margin-bottom: .25rem; }
@media (max-width: 720px) { .section__head--row { display: block; } .section__head--row .btn { margin-top: 1rem; } }
.lede-red { color: var(--red-600); font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: clamp(1.15rem, 1.7vw, 1.4rem); line-height: 1.35; margin-top: 1rem; }
.muted-text { color: #2c3e66; margin-top: .9rem; }
.btn--navy { background: var(--blue-900); color: var(--white); }
.btn--navy:hover { background: var(--blue-800); }

/* services: navy top half, white bottom, cards straddle the seam */
.svc-band { position: relative; background: var(--white); padding-bottom: clamp(3rem, 6vw, 5rem); }
.svc-band__top { background: var(--blue-900); color: var(--white); padding: clamp(3rem, 6vw, 5rem) 0 clamp(7rem, 12vw, 10rem); }
.svc-band__top .section__lede { color: var(--blue-100); font-weight: 400; margin-top: .75rem; }
.pcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2.2vw, 1.75rem); margin-top: calc(-1 * clamp(5.5rem, 10vw, 8.5rem)); }
.pcard { display: flex; flex-direction: column; background: var(--white); color: var(--ink); text-decoration: none; padding: 1.1rem 1.1rem 1.4rem; border-radius: 4px; box-shadow: 0 18px 40px -18px rgba(11,42,111,.45), 0 2px 6px rgba(11,42,111,.08); transition: transform 260ms var(--ease-out), box-shadow 260ms var(--ease-out); }
.pcard:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -18px rgba(11,42,111,.55), 0 2px 6px rgba(11,42,111,.08); }
.pcard__img { overflow: hidden; border-radius: 3px; }
.pcard__img img { aspect-ratio: 4 / 3; width: 100%; object-fit: cover; transition: transform 600ms var(--ease-out); }
.pcard:hover .pcard__img img { transform: scale(1.04); }
.pcard__body { padding: 1.25rem .35rem 0; display: flex; flex-direction: column; flex: 1; }
.pcard__title { font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.2rem, 1.7vw, 1.45rem); line-height: 1.1; color: var(--blue-900); }
.pcard__body p { color: #2c3e66; margin-top: .6rem; font-size: .98rem; }
.pcard__foot { margin-top: auto; padding-top: 1.25rem; display: flex; align-items: center; justify-content: space-between; }
.pcard__more { font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .9rem; color: var(--blue-700); }
.pcard__tile { width: 3.25rem; height: 3.25rem; background: var(--red-600); display: grid; place-items: center; border-radius: 3px; margin-right: -1.45rem; margin-bottom: -1.75rem; transition: background 200ms var(--ease-out); }
.pcard__tile svg { width: 1.4rem; height: 1.4rem; fill: var(--white); }
.pcard:hover .pcard__tile { background: var(--blue-700); }
.srows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0 clamp(1rem, 2.5vw, 2rem); margin-top: clamp(2rem, 4vw, 3rem); border-top: 2px solid var(--blue-900); }
.srow { display: grid; grid-template-columns: auto 1fr auto; gap: .9rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--ice-line); color: var(--ink); text-decoration: none; }
.srow__n { width: 2rem; height: 2rem; border-radius: 50%; background: var(--red-600); color: var(--white); display: grid; place-items: center; font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: .95rem; }
.srow__t b { display: block; font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.05rem; color: var(--blue-900); line-height: 1.1; }
.srow__t span { display: block; color: #2c3e66; font-size: .92rem; margin-top: .2rem; }
.srow > svg { width: 1.1rem; height: 1.1rem; fill: var(--blue-700); transition: transform 200ms var(--ease-out); }
.srow:hover > svg { transform: translateX(4px); }
.srow:hover .srow__t b { color: var(--red-600); }
@media (max-width: 960px) { .pcards { grid-template-columns: 1fr 1fr; } .srows { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .pcards { grid-template-columns: 1fr; margin-top: -4rem; } .svc-band__top { padding-bottom: 5.5rem; } .srows { grid-template-columns: 1fr; } }

/* why James: text + points left, framed photo with red offset right */
.why2__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.why-points { display: grid; gap: .8rem; list-style: none; padding: 0; margin: 1.5rem 0 0; }
.why-points li { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: start; }
.why-points i { width: 2.3rem; height: 2.3rem; border-radius: 50%; background: var(--red-600); display: grid; place-items: center; margin-top: .1rem; }
.why-points i svg { width: 1.15rem; height: 1.15rem; fill: var(--white); }
.why-points b { display: block; font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.1rem; line-height: 1.1; color: var(--blue-900); }
.why-points p { margin-top: .25rem; color: #2c3e66; font-size: .98rem; }
.why2__photo { position: relative; padding: 0 1.25rem 1.25rem 0; }
.why2__photo::before { content: ""; position: absolute; inset: 1.5rem 0 0 1.5rem; background: var(--red-600); border-radius: 14px; }
.why2__photo .frame { position: relative; }
.why2__photo img { aspect-ratio: 11 / 13; }
/* why photo carousel: stacked slides, slow crossfade, the frame keeps the first slide's box */
.why2__frame { display: grid; }
.why2__frame > .why2__slide { grid-area: 1 / 1; width: 100%; height: auto; opacity: 0; transition: opacity 900ms ease; }
.why2__frame > .why2__slide.is-on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .why2__frame > .why2__slide { transition: none; } }
/* two equal buttons under the points; they stack with a gap on narrow screens */
.why2__actions { display: grid; grid-template-columns: repeat(2, minmax(0, 15rem)); gap: .75rem; margin-top: 1.5rem; }
.why2__actions .btn { justify-content: center; text-align: center; }
@media (max-width: 480px) { .why2__actions { grid-template-columns: 1fr; max-width: 22rem; } }
@media (max-width: 860px) { .why2__grid { grid-template-columns: 1fr; } .why2__photo { max-width: 26rem; } }

/* about: two overlapping photos with a label box (Povash about) */
.about3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.about3__photos { position: relative; padding-bottom: 8rem; padding-right: 22%; }
.about3__a img { aspect-ratio: 1 / 1; }
.about3__b { position: absolute; right: 0; bottom: 3.5rem; width: 58%; border-width: 4px; }
.about3__b img { aspect-ratio: 4 / 3; }
.about3__b::before { content: ""; position: absolute; left: 0; right: 0; top: -1.1rem; height: .55rem; background: var(--red-600); border-radius: 2px; }
.about3__label { position: absolute; left: 0; bottom: 3rem; display: inline-flex; align-items: stretch; background: var(--white); color: var(--blue-900); text-decoration: none; box-shadow: var(--shadow-card-hover); border-radius: 4px; overflow: hidden; z-index: 2; }
.about3__label span { padding: 1rem 1.25rem; font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: 1.05rem; align-self: center; }
.about3__label i { width: 3.25rem; background: var(--red-600); display: grid; place-items: center; }
.about3__label i svg { width: 1.3rem; height: 1.3rem; fill: var(--white); }
.about3__facts { display: grid; grid-template-columns: 1fr auto; gap: 1.5rem; margin-top: 1.5rem; align-items: stretch; }
.about3__feats { display: grid; gap: 1rem; }
.about3__feats b { display: block; font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; color: var(--blue-900); font-size: 1.05rem; padding-left: .9rem; position: relative; }
.about3__feats b::before { content: ""; position: absolute; left: 0; top: .35em; border: 5px solid transparent; border-left: 7px solid var(--red-600); }
.about3__feats p { color: #2c3e66; font-size: .95rem; margin-top: .2rem; padding-left: .9rem; }
.statbox { background: var(--blue-050); border-radius: 6px; padding: 1.25rem 1.5rem; text-align: center; display: grid; align-content: center; min-width: 9rem; }
.statbox b { font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 3rem; line-height: .95; color: var(--red-600); }
.statbox b span { font-size: .55em; vertical-align: top; }
.statbox > span { font-family: "Barlow", Arial, sans-serif; font-weight: 700; color: var(--blue-900); font-size: .9rem; margin-top: .35rem; }
@media (max-width: 860px) { .about3__grid { grid-template-columns: 1fr; } .about3__photos { max-width: 30rem; } }
@media (max-width: 480px) { .about3__facts { grid-template-columns: 1fr; } }

/* reviews: quote card beside a photo with badge, two claim tiles (Povash testimonials) */
.rev3__grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2rem, 5vw, 4rem); align-items: start; }
.tcard { position: relative; background: var(--white); border-radius: 4px; padding: 2.5rem 2rem 1.75rem; margin-top: 1.75rem; box-shadow: var(--shadow-card); min-height: 18rem; display: grid; }
.tcard__quote { position: absolute; top: .6rem; left: 1.6rem; font-family: "Archivo Black", "Arial Black", sans-serif; font-size: 5rem; line-height: 1; color: var(--red-600); }
.tcard__slide { display: none; margin: 0; padding-top: 1.5rem; }
.tcard__slide.is-on { display: block; }
.tcard__slide blockquote { margin: 0; }
.tcard__slide blockquote p { font-size: 1.15rem; line-height: 1.6; color: var(--ink); }
.tcard__slide figcaption { display: flex; align-items: center; gap: .9rem; margin-top: 1.5rem; }
.tcard__avatar { flex: none; width: 3.25rem; height: 3.25rem; border-radius: 50%; background: var(--fb); display: grid; place-items: center; font-size: 0; }
.tcard__avatar svg { width: 1.6rem; height: 1.6rem; fill: var(--white); }
.tcard__avatar--g { background: var(--white); border: 1px solid var(--ice-line); box-shadow: 0 1px 4px rgba(11,42,111,.14); }
.tcard__avatar--g svg { width: 1.7rem; height: 1.7rem; }
.tcard__stars { display: inline-flex; gap: .1rem; margin-right: .5rem; vertical-align: -.1em; }
.tcard__stars svg { width: .95rem; height: .95rem; fill: #F5B400; }
.tcard__slide figcaption b { display: block; font-family: "Barlow", Arial, sans-serif; font-weight: 800; color: var(--blue-700); font-size: 1.05rem; }
.tcard__slide figcaption span { color: #55679a; font-size: .9rem; }
.tcard__dots { position: absolute; right: 1.75rem; bottom: 1.9rem; display: flex; gap: .45rem; }
.tcard__dot { width: .7rem; height: .7rem; border-radius: 50%; border: 0; background: var(--blue-100); cursor: pointer; padding: 0; }
.tcard__dot.is-on { background: var(--blue-700); }
.tcard.review--placeholder::before { top: -.65rem; }
.rev3__photo { position: relative; }
.rev3__photo img { aspect-ratio: 4 / 3; }
.rev3__badge { position: absolute; right: 0; bottom: 0; background: var(--red-600); color: var(--white); text-decoration: none; padding: 1rem 1.25rem; display: grid; text-align: center; min-width: 8.5rem; border-radius: 4px 0 12px 0; }
.rev3__badge b { font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 2rem; line-height: 1; }
.rev3__badge span { font-family: "Barlow", Arial, sans-serif; font-weight: 600; font-size: .8rem; line-height: 1.2; margin-top: .25rem; }
.claimtiles { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 1.5rem; }
.claimtile { position: relative; overflow: hidden; color: var(--white); padding: 2.25rem 1.5rem; text-align: center; display: grid; justify-items: center; gap: .9rem; border-radius: 4px; min-height: 11rem; }
.claimtile::after { content: ""; position: absolute; right: -40%; bottom: -60%; width: 100%; height: 100%; background: rgba(255,255,255,.08); transform: rotate(-30deg); }
.claimtile svg { width: 2.75rem; height: 2.75rem; fill: var(--white); opacity: .95; }
.claimtile b { font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 1.35rem; line-height: 1.15; max-width: 12ch; }
.claimtile--red { background: var(--red-600); }
.claimtile--navy { background: var(--blue-900); }
@media (max-width: 860px) { .rev3__grid { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .claimtiles { grid-template-columns: 1fr; } }

/* areas: by county on navy */
.band--navy { background: var(--blue-900); color: var(--white); }
.band--navy .section__lede { color: var(--blue-100); font-weight: 400; }
.counties { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.25rem, 3vw, 2.5rem); border-top: 1px solid rgba(255,255,255,.25); padding-top: clamp(1.5rem, 3vw, 2.5rem); }
.county__name { font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1; color: var(--white); margin-bottom: 1rem; }
.county .area-list li { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.3); }
.county .area-list li:hover { background: var(--red-600); border-color: var(--red-600); }
.county__note { color: var(--blue-100); max-width: 26ch; }
@media (max-width: 860px) { .counties { grid-template-columns: 1fr; } }

/* round 4 fixes */
#why.why2 { background: var(--white); }
#work { background: linear-gradient(180deg, var(--blue-700) 0%, var(--blue-500) 35%, var(--blue-200) 80%, var(--white) 100%); }
#work .section__head .h-red { color: var(--white); } /* red on the blue band reads badly (Liam, 15 Sep) */
.svc-band__top .h-white { font-size: clamp(2.2rem, 3.9vw, 3.3rem); line-height: 1; }
.hero__strip { border-bottom: 1px solid rgba(255,255,255,.22); }
.svc-band__top { border-top: 1px solid rgba(255,255,255,.12); }

/* ---------- round 4b: elevation (textures, air, tiles, steps) ---------- */
.section { padding-block: clamp(3.5rem, 8vw, 6.5rem); }
:root {
  --topo: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='300' viewBox='0 0 600 300'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.08' stroke-width='1.5'%3E%3Cpath d='M0 40c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3Cpath d='M0 90c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3Cpath d='M0 140c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3Cpath d='M0 190c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3Cpath d='M0 240c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3Cpath d='M0 290c80-30 140 30 220 0s140-40 220-10 100 50 160 30'/%3E%3C/g%3E%3C/svg%3E");
  --bubbles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420' viewBox='0 0 420 420'%3E%3Cg fill='none' stroke='%23ffffff' stroke-opacity='.10' stroke-width='2'%3E%3Ccircle cx='60' cy='70' r='34'/%3E%3Ccircle cx='160' cy='40' r='14'/%3E%3Ccircle cx='300' cy='90' r='52'/%3E%3Ccircle cx='390' cy='30' r='18'/%3E%3Ccircle cx='110' cy='200' r='22'/%3E%3Ccircle cx='230' cy='230' r='40'/%3E%3Ccircle cx='370' cy='210' r='26'/%3E%3Ccircle cx='40' cy='330' r='46'/%3E%3Ccircle cx='190' cy='360' r='16'/%3E%3Ccircle cx='320' cy='340' r='30'/%3E%3C/g%3E%3C/svg%3E");
  --dots: radial-gradient(rgba(11,42,111,.16) 1.2px, transparent 1.3px);
}

/* the other six services as tiles */
.stiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 2vw, 1.5rem); margin-top: clamp(2rem, 4vw, 3rem); }
.stile { position: relative; display: grid; gap: .5rem; align-content: start; background: var(--blue-050); color: var(--ink); text-decoration: none; padding: 1.4rem 1.4rem 1.5rem; border-radius: 4px; border-top: 4px solid var(--blue-900); transition: transform 240ms var(--ease-out), background 240ms var(--ease-out), border-color 240ms var(--ease-out), box-shadow 240ms var(--ease-out); }
.stile:hover { transform: translateY(-3px); background: var(--white); border-top-color: var(--red-600); box-shadow: var(--shadow-card); }
.stile__n { font-family: "Barlow", Arial, sans-serif; font-weight: 800; color: var(--red-600); font-size: 1.1rem; letter-spacing: .04em; }
.stile b { font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.15rem; line-height: 1.1; color: var(--blue-900); }
.stile > span { color: #2c3e66; font-size: .95rem; }
.stile em { font-style: normal; margin-top: .4rem; display: inline-flex; align-items: center; gap: .35rem; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; color: var(--blue-700); }
.stile em svg { width: .95rem; height: .95rem; fill: currentColor; }
@media (max-width: 960px) { .stiles { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .stiles { grid-template-columns: 1fr; } }

/* how it works */
.how-band { background: var(--blue-050); position: relative; overflow: hidden; }
.how-band::after { content: ""; position: absolute; right: -6rem; top: -6rem; width: 28rem; height: 28rem; border-radius: 50%; background: radial-gradient(circle, rgba(19,72,181,.12), rgba(19,72,181,0) 70%); pointer-events: none; }
.steps3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); position: relative; margin-top: 1rem; }
.step { position: relative; background: var(--white); border-radius: 6px; padding: 2.75rem 1.6rem 1.75rem; box-shadow: var(--shadow-card); }
.step__n { position: absolute; top: -1.4rem; left: 1.6rem; width: 2.8rem; height: 2.8rem; border-radius: 50%; background: var(--red-600); color: var(--white); display: grid; place-items: center; font-family: "Barlow", Arial, sans-serif; font-weight: 800; font-size: 1.25rem; box-shadow: 0 0 0 4px var(--blue-050); }
.step h3 { font-family: "Barlow", Arial, sans-serif; font-weight: 800; text-transform: uppercase; font-size: 1.25rem; line-height: 1.1; color: var(--blue-900); }
.step p { margin-top: .6rem; color: #2c3e66; }
.steps3 .step:not(:last-child)::after { content: ""; position: absolute; right: calc(-1 * clamp(1.5rem, 3vw, 2.5rem)); top: 50%; width: clamp(1.5rem, 3vw, 2.5rem); height: 2px; background: var(--blue-300); }
@media (max-width: 860px) { .steps3 { grid-template-columns: 1fr; gap: 2.25rem; } .steps3 .step::after { display: none; } }

/* testimonial card texture */
.tcard > * { position: relative; z-index: 1; }
.tcard.review--placeholder::before { z-index: 2; }

/* squarer photo treatment, Povash weight */
.about3__label { border-radius: 2px; }
.about3__a, .about3__b, .why2__photo .frame, .rev3__photo .frame { border-radius: 4px; }
.about3__a img, .about3__b img, .why2__photo img, .rev3__photo img { border-radius: 2px; }
.why2__photo::before { border-radius: 4px; }

/* review carousel: real Facebook recommendations, crossfade */
.tcard { min-height: 21rem; }
.tcard__slide.is-on { animation: tfade 500ms var(--ease-out); }
@keyframes tfade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.tcard__slide blockquote p { font-size: 1.1rem; }
.tcard__slide figcaption span { font-size: .85rem; }
@media (prefers-reduced-motion: reduce) { .tcard__slide.is-on { animation: none; } }

/* round 4c fixes */
.how-band { color: var(--ink); }
.how-band .section__lede { color: #2c3e66; font-weight: 400; }
.how-band .section__head .h-red { text-shadow: none; }
.tcard > .tcard__dots { position: absolute; right: 1.75rem; bottom: 1.6rem; z-index: 2; }
.tcard { padding-top: 2rem; min-height: 19rem; }
.tcard__slide { padding-top: 2.4rem; }
.tcard__slide figcaption { padding-right: 6rem; }

/* ---------- the wash sweep: lance grip, spray fan, one auto sweep per slider ---------- */
.cmp__grip { width: 3.4rem; height: 3.4rem; background: var(--red-600); }
.cmp__grip svg { width: 2rem; height: 2rem; fill: none; stroke: var(--white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cmp__spray { position: absolute; top: 50%; left: var(--pos); width: 9rem; height: 6rem; transform: translate(calc(-100% - 0.9rem), -50%) scaleX(-1); pointer-events: none; opacity: 0; transition: opacity 250ms var(--ease-out); filter: drop-shadow(0 0 3px rgba(11,42,111,.55)); z-index: 3; }
.cmp__stage.is-spraying .cmp__spray, .cmp__stage.is-dragging .cmp__spray { opacity: 1; }
.cmp__spray line { stroke: #BFE0FA; stroke-width: 2; stroke-linecap: round; stroke-dasharray: 6 10; animation: spray-run .35s linear infinite; }
.cmp__spray line:nth-child(2) { stroke-width: 1.6; animation-duration: .3s; opacity: .8; }
.cmp__spray line:nth-child(3) { stroke-width: 1.4; animation-duration: .4s; opacity: .7; }
.cmp__spray line:nth-child(4) { stroke-width: 1.6; animation-duration: .32s; opacity: .8; }
.cmp__spray line:nth-child(5) { stroke-width: 1.2; animation-duration: .38s; opacity: .6; }
.cmp__spray circle { fill: #E9F4FD; animation: spray-drop .9s ease-out infinite; }
.cmp__spray circle:nth-child(7) { animation-delay: .15s; } .cmp__spray circle:nth-child(8) { animation-delay: .3s; }
.cmp__spray circle:nth-child(9) { animation-delay: .45s; } .cmp__spray circle:nth-child(10) { animation-delay: .6s; }
.cmp__spray circle:nth-child(11) { animation-delay: .75s; }
@keyframes spray-run { to { stroke-dashoffset: -16; } }
@keyframes spray-drop { 0% { transform: translate(0,0) scale(1); opacity: 1; } 100% { transform: translate(70px, var(--dy, 0)) scale(.3); opacity: 0; } }
.cmp__stage.is-spraying { cursor: default; }
.cmp__stage.is-spraying .cmp__divider { box-shadow: 0 0 0 1px rgba(11,42,111,.25), 0 0 18px rgba(255,255,255,.7); }
@media (prefers-reduced-motion: reduce) { .cmp__spray { display: none; } .cmp__spray line, .cmp__spray circle { animation: none; } }

/* wash 3: louder spray */
.cmp__spray { width: 12rem; height: 8rem; filter: drop-shadow(0 0 2px rgba(19,72,181,.9)) drop-shadow(0 0 8px rgba(255,255,255,.6)); }
.cmp__spray line { stroke: #fff; stroke-width: 3; stroke-dasharray: 8 9; }
.cmp__spray line:nth-child(2), .cmp__spray line:nth-child(4) { stroke-width: 2.4; }
.cmp__spray line:nth-child(3), .cmp__spray line:nth-child(5) { stroke-width: 1.8; }
.cmp__spray circle { fill: #fff; }
.cmp__spray .mist { fill: rgba(255,255,255,.35); animation: mist 1.1s ease-in-out infinite alternate; }
@keyframes mist { from { transform: scale(.85); opacity: .5; } to { transform: scale(1.1); opacity: .9; } }
.cmp__grip svg { width: 2.2rem; height: 2.2rem; stroke-width: 2.2; }

/* no spray: plain grip, the sweep alone */
.cmp__spray { display: none !important; }
.cmp__grip { width: 2.6rem; height: 2.6rem; }
.cmp__grip svg { width: 1.3rem; height: 1.3rem; fill: var(--white); stroke: none; }
.cmp__stage.is-spraying .cmp__divider { box-shadow: 0 0 0 1px rgba(11,42,111,.25); }

/* review carousel: one fixed box. Every slide sits in the same grid cell (hidden ones keep their height), so the card is
   as tall as the tallest clamped review and the page no longer shifts as it rotates; long reviews clamp to a few lines
   with a Read more that expands only on tap (Liam, 16 Sep) */
.tcard:not(.tcard--static) .tcard__quote { grid-area: 1 / 1; }
.tcard:not(.tcard--static) .tcard__slide { display: block; grid-area: 2 / 1; visibility: hidden; }
.tcard:not(.tcard--static) .tcard__slide.is-on { visibility: visible; }
.tcard:not(.tcard--static) .tcard__slide blockquote p { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 5; overflow: hidden; }
.tcard:not(.tcard--static) .tcard__slide.is-open blockquote p { display: block; -webkit-line-clamp: unset; overflow: visible; }
.tcard__more { display: inline-block; margin-top: .6rem; padding: 0; border: 0; background: none; cursor: pointer; font-family: "Barlow", Arial, sans-serif; font-weight: 700; font-size: .95rem; color: var(--red-600); text-decoration: underline; text-underline-offset: .2em; }
.tcard__more:hover { color: var(--blue-700); }
@media (max-width: 720px) { .tcard:not(.tcard--static) .tcard__slide blockquote p { -webkit-line-clamp: 6; } }

/* ---------- inner pages round 5: static nav, scene hero without the masthead band ---------- */
.nav--static { position: sticky; top: 0; transform: none; box-shadow: 0 2px 12px rgba(11,42,111,.35); }
.nav--static .nav__links { display: flex; }
.nav--static .nav__links a { color: var(--white); }
.nav--static .dd__menu li a { color: var(--blue-900) !important; }
.mnav--bar { display: none; margin: 0; }
@media (max-width: 860px) {
  .nav--static .nav__links { display: none; }
  /* phone header: brand left, burger far right, no phone button (the menu and the bottom bar carry the numbers; Liam, 15 Sep) */
  .mnav--bar { display: block; position: relative; text-align: left; margin-left: auto; }
  .mnav--bar summary, .nav__menu { padding: .5rem .75rem .5rem .7rem; font-size: .85rem; }
  .nav--static > .wrap > .btn { display: none; }
}
.hero--scene .hero__scene { margin-top: 0; padding-top: clamp(2.5rem, 6vw, 4.5rem); min-height: 0; }
.hero--scene .hero__scene::before { background: linear-gradient(100deg, rgba(8,26,70,.93) 0%, rgba(8,26,70,.78) 45%, rgba(8,26,70,.4) 100%); }
.hero--scene .hero__title { font-size: clamp(2rem, 3.6vw, 3rem); max-width: 18ch; }
.hero__grid--single { grid-template-columns: 1fr; }
.hero__grid--single > div { max-width: 62ch; }
.hero--scene .hero__media { max-width: 30rem; justify-self: end; width: 100%; }
.hero--scene .hero__media img { aspect-ratio: 4 / 3; }
@media (max-width: 860px) { .hero--scene .hero__media { justify-self: start; } }
.hero--plain { background: var(--grad-masthead); color: var(--white); }

/* service page: quote card beside the includes list */
.tcard--static { margin-top: 0; min-height: 0; }
.tcard--static .tcard__slide { display: block; }
.two-col .tcard { align-self: start; }

/* gallery jump links */
.jump { background: var(--blue-900); position: sticky; top: 3.75rem; z-index: 30; }
.jump .wrap { display: flex; gap: .25rem 1.25rem; flex-wrap: wrap; padding: .6rem 0; }
.jump a { color: var(--white); text-decoration: none; font-family: "Barlow", Arial, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .82rem; padding: .3rem 0; border-bottom: 2px solid transparent; }
.jump a:hover { border-bottom-color: var(--red-600); }
@media (max-width: 860px) { .jump { position: static; } }
.section .stiles + .stiles { margin-top: 0; }
.band--white .stile { background: var(--blue-050); }
.band--white .stile:hover { background: var(--white); }
.nav--static .nav__links { align-items: center; }
.nav--static .dd { display: inline-flex; align-items: center; }
.nav--static .dd > a { display: inline-block; }