/* ==========================================================================
   On Time Plumbing & Hot Water — design system
   Replicated from the "Blocked Drain & CCTV Inspections" page design.

   Tokens below are lifted from the live site so new SEO pages inherit the
   exact same look. Build new pages from the section patterns in this file;
   see README.md for the component catalogue.
   ========================================================================== */

/* --- Tokens --------------------------------------------------------------- */
:root {
  --navy:        #023058;   /* primary dark — headings, dark bands           */
  --navy-deep:   #003183;   /* elementor "primary" — nav links, form labels  */
  --teal:        #42A6B6;   /* primary CTA / accent                          */
  --teal-alt:    #2AA9BA;   /* secondary accent, outline borders             */
  --cyan:        #00BAFF;   /* hero eyebrow                                  */
  --ink:         #023058;   /* body copy on light                            */
  --muted:       #666666;   /* small print                                   */
  --line:        #D1D5DB;
  --surface:     #FFFFFF;
  --surface-alt: #F5F5F5;
  --tint:        rgba(66, 166, 182, .12);  /* tinted service cards           */

  --grad-bar:    linear-gradient(90deg, var(--teal) 0%, var(--navy) 100%);
  --grad-footer: linear-gradient(90deg, var(--teal) 12%, var(--navy) 90%);
  --grad-btn:    linear-gradient(90deg, var(--teal) 0%, #5FBCCB 100%);
  /* Light scrim behind internal-page hero text — keeps the background photo
     visible while still giving white hero text enough contrast. */
  --grad-hero-page: linear-gradient(90deg, rgba(2, 48, 88, .45) 0%, rgba(2, 48, 88, .15) 45%, rgba(2, 48, 88, 0) 65%);

  --font:        "Montserrat", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-alt:    "Poppins", var(--font);

  --wrap:        1480px;   /* e-con-inner max-width on the live site         */
  --gutter:      20px;
  --radius:      6px;
  --radius-lg:   12px;
  --shadow:      0 2px 18px rgba(2, 48, 88, .10);
  --shadow-card: 0 4px 24px rgba(2, 48, 88, .12);

  --sec-y:       72px;     /* vertical rhythm between sections               */
}

/* --- Reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink);
  background: var(--surface);
  overflow-x: hidden;
}
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }
ul { margin: 0; padding: 0; list-style: none; }

h1, h2, h3, h4 { font-family: var(--font); font-weight: 700; color: var(--navy); margin: 0 0 .5em; }
h1 { font-size: clamp(34px, 4.3vw, 62px); line-height: 1.1;  color: #fff; }
h2 { font-size: clamp(26px, 2.65vw, 38px); line-height: 1.1; }
h3 { font-size: clamp(18px, 1.5vw, 21px); line-height: 1.25; }
p  { margin: 0 0 1em; line-height: 1.5; }
p:last-child { margin-bottom: 0; }

/* --- Layout --------------------------------------------------------------- */
.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--sec-y); }
.section--tight { padding-block: 48px; }
.section--dark { background: var(--navy); color: #fff; }
.section--dark h2, .section--dark h3 { color: #fff; }
.section--alt { background: var(--surface-alt); }

.grid { display: grid; gap: 32px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }

.eyebrow {
  font-size: 15px; font-weight: 700; letter-spacing: .02em;
  text-transform: uppercase; color: var(--cyan); margin: 0 0 18px;
}
.lede { font-size: 17px; }
.center { text-align: center; }
.section-head { max-width: 820px; margin: 0 auto 44px; text-align: center; }
.section-head p { color: var(--ink); }

/* --- Buttons -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--font); font-size: 19px; font-weight: 700; line-height: 1;
  padding: 16px 22px; border-radius: var(--radius);
  border: 2px solid transparent; transition: .2s ease;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn--primary:hover { background: var(--navy); border-color: var(--navy); }
.btn--outline {
  background: transparent; color: var(--navy);
  border: 1px solid var(--teal-alt); font-size: 14px; padding: 19px 22px;
  border-radius: 5px; text-transform: uppercase; letter-spacing: .02em;
}
.btn--outline:hover { background: var(--teal-alt); color: #fff; }
.btn--light { background: #fff; color: var(--navy); border-color: #fff; }
.btn--light:hover { background: var(--navy); color: #fff; }
.btn-row { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; margin-top: 26px; }

/* --- Top bar -------------------------------------------------------------- */
.topbar {
  background: var(--grad-bar); color: #fff;
  display: flex; align-items: center; justify-content: center; min-height: 60px;
}
.topbar a {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: clamp(14px, 1.6vw, 22px); font-weight: 800; font-style: italic;
  text-align: center;
}
.topbar svg { width: 22px; height: 22px; flex: none; }

/* --- Header --------------------------------------------------------------- */
.site-header { position: sticky; top: 0; z-index: 60; }
.header-main { background: #fff; box-shadow: 0 0 10px -3px rgba(0, 0, 0, .5); }
.header-inner {
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
  min-height: 118px;
}
.logo img { width: 100%; max-width: 260px; }

.nav > ul { display: flex; align-items: center; gap: 4px; }
.nav li { position: relative; }
.nav a {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 12px 15px; font-family: var(--font-alt);
  font-size: 15px; font-weight: 600; color: var(--navy-deep);
}
.nav a:hover, .nav .is-current > a { color: var(--teal); }
.nav .caret { width: 10px; height: 10px; transition: transform .2s; }

.nav .submenu {
  position: absolute; top: 100%; left: 0; min-width: 290px;
  background: #fff; border-radius: var(--radius); box-shadow: var(--shadow-card);
  padding: 10px 0; opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: .18s ease;
}
.nav li:hover > .submenu, .nav li:focus-within > .submenu {
  opacity: 1; visibility: visible; transform: translateY(0);
}
.nav .submenu a { display: block; padding: 10px 22px; font-size: 14.5px; font-weight: 500; }
.nav .submenu a:hover { background: var(--tint); }

.header-cta {
  display: inline-flex; flex-direction: column; justify-content: center;
  background: var(--teal); color: #fff; border-radius: var(--radius);
  padding: 12px 22px; min-width: 200px;
}
.header-cta small { font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.header-cta strong {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 19px; font-weight: 700; font-style: italic;
}
.header-cta svg { width: 18px; height: 18px; }
.header-cta:hover { background: var(--navy); }

.nav-toggle { display: none; background: none; border: 0; padding: 10px; color: var(--navy); }
.nav-toggle svg { width: 28px; height: 28px; }
.nav-toggle .ico-close { display: none; }
.nav-toggle[aria-expanded="true"] .ico-close { display: block; }
.nav-toggle[aria-expanded="true"] .ico-open { display: none; }

/* --- Hero ----------------------------------------------------------------- */
.hero {
  position: relative; display: flex; align-items: flex-end;
  min-height: 82vh; padding-block: 60px 80px;
  background-size: cover; background-position: 50% 50%; color: #fff;
}
.hero .wrap { position: relative; z-index: 2; }
.hero--page::before {
  content: ""; position: absolute; inset: 0; z-index: 1; background: var(--grad-hero-page);
}

/* Background video layer — the Vimeo hero from the existing homepage.
   The iframe is sized to 16:9 and scaled up so it always covers the hero box. */
.hero-video { position: absolute; inset: 0; overflow: hidden; z-index: 0; pointer-events: none; }
.hero-video iframe {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 100vw; height: 56.25vw;          /* 16:9 from width  */
  min-height: 100%; min-width: 177.78vh;  /* 16:9 from height */
  border: 0;
}
.hero-grid { display: grid; grid-template-columns: 1fr 435px; gap: 48px; align-items: end; }
.hero-copy p { max-width: 46ch; }
.hero h1 { margin-bottom: 22px; }
/* Lifts the copy clear of the section below — the reference leaves ~150px
   under the last line, against ~80px under the form. */
.hero-copy { padding-bottom: 70px; }

/* --- Quote form (GoHighLevel embed) ---------------------------------------
   The reference page has NO card around the form: the white rounded panel is
   the GHL form's own background. Adding a second white card double-frames it,
   so this is just a 20px rounded clip on the iframe. */
.quote-card { border-radius: 20px; overflow: hidden; }
.quote-card iframe {
  display: block; width: 100%; border: 0; border-radius: 20px; background: #fff;
}
/* Optional heading above a form, for pages whose GHL form has none of its own */
.quote-title {
  font-size: 23px; font-weight: 700; color: #fff;
  text-align: center; line-height: 1.5; margin: 0 0 18px;
}

/* --- Trust bar ------------------------------------------------------------ */
.trustbar { position: relative; margin-top: -66px; z-index: 5; }
.trustbar-inner {
  background: #fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-card);
  padding: 30px; display: grid; grid-template-columns: repeat(4, 1fr);
}
.trust-item { text-align: center; padding: 6px 14px; }
.trust-item + .trust-item { border-left: 1px solid var(--line); }
.trust-item img { height: 67px; width: auto; margin: 0 auto 14px; }
/* The Google graphic is a single supplied asset (logo + stars + review count) */
.trust-item--google { display: grid; place-items: center; }
.trust-item--google img { height: auto; max-height: 133px; max-width: 100%; margin: 0; }
.trust-item strong { display: block; font-size: 21px; font-weight: 700; line-height: 1.35; color: var(--navy); }
.trust-item span { display: block; font-size: 16px; font-weight: 500; color: var(--navy); margin-top: 4px; }

/* --- Media panel (image beside copy) -------------------------------------- */
.media { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); }
.media img { width: 100%; height: 100%; object-fit: cover; }
.media--tall img { aspect-ratio: 4 / 3; }
/* Keeps a portrait photo from making a two-column row unbalanced */
.media--cap img { aspect-ratio: 4 / 3.4; max-height: 560px; }

/* Stat badge overlapping an image (homepage "20+ years") */
.media-stat { position: relative; }
.stat-badge {
  /* Sits inside the container: a negative `right` pushes past the wrap edge and
     creates document-level horizontal overflow at viewports near --wrap. */
  position: absolute; right: 16px; bottom: -28px;
  background: var(--navy); color: #fff; border-radius: var(--radius-lg);
  border: 6px solid var(--teal); padding: 22px 30px; max-width: 260px;
  box-shadow: var(--shadow-card);
}
.stat-badge b { display: block; font-size: 44px; font-weight: 700; line-height: 1; }
.stat-badge span { display: block; font-size: 14px; margin-top: 8px; line-height: 1.35; }

/* --- Check list ----------------------------------------------------------- */
.checklist { display: grid; gap: 12px; margin: 18px 0 0; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; }
.checklist svg { width: 22px; height: 22px; flex: none; color: var(--teal); margin-top: 1px; }
.checklist--2 { grid-template-columns: repeat(2, 1fr); column-gap: 28px; }

/* --- Icon row (dark band) ------------------------------------------------- */
.icon-row { display: grid; grid-template-columns: repeat(5, 1fr); gap: 24px; text-align: center; }
.icon-row img { height: 62px; width: auto; margin: 0 auto 14px; }
.icon-row span { display: block; font-size: 16px; font-weight: 600; color: #fff; }

/* --- Feature cards (tinted) ----------------------------------------------- */
.cards { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.card { background: var(--tint); border-radius: var(--radius-lg); padding: 32px; }
.card h3 { color: var(--teal-alt); margin-bottom: .55em; }
.card p { font-size: 15px; }

/* --- Service tiles (image + label) ---------------------------------------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.tile {
  background: #fff; border: 1px solid rgba(66, 166, 182, .35); border-radius: var(--radius-lg);
  overflow: hidden; display: flex; flex-direction: column; transition: .22s ease;
}
.tile img { aspect-ratio: 3 / 2; object-fit: cover; width: 100%; }
.tile span {
  display: block; padding: 20px 16px; text-align: center;
  font-size: 17px; font-weight: 600; color: var(--navy-deep); line-height: 1.35;
}
.tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-card); border-color: var(--teal); }

/* --- Reason list (icon + copy rows) --------------------------------------- */
.reasons { display: grid; gap: 22px; }
.reason { display: flex; gap: 16px; }
.reason .ico {
  flex: none; width: 44px; height: 44px; border-radius: 8px;
  background: var(--teal); color: #fff;
  display: grid; place-items: center;
}
.reason .ico svg { width: 22px; height: 22px; }
.reason h3 { color: var(--teal-alt); font-size: 18px; margin-bottom: .3em; }
.reason p { font-size: 15px; }

/* --- Value row (dark band, 4 up) ------------------------------------------ */
.values { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; }
.value { display: flex; gap: 14px; align-items: flex-start; }
.value img { width: 42px; height: 42px; flex: none; object-fit: contain; }
.value strong { display: block; font-size: 17px; font-weight: 700; color: #fff; }
.value span { display: block; font-size: 14px; color: rgba(255, 255, 255, .82); margin-top: 4px; }

/* --- Areas ---------------------------------------------------------------- */
.area-list { columns: 2; column-gap: 28px; margin-top: 18px; }
.area-list li { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; break-inside: avoid; }
.area-list svg { width: 20px; height: 20px; flex: none; color: var(--teal); }
.map-frame { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-card); min-height: 380px; }
.map-frame iframe { width: 100%; height: 100%; min-height: 380px; border: 0; display: block; }

/* --- FAQ ------------------------------------------------------------------ */
.faq { max-width: 980px; margin-inline: auto; display: grid; gap: 14px; }
.faq-item { background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.faq-q {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 20px;
  background: none; border: 0; text-align: left;
  padding: 20px 24px; font-size: 16px; font-weight: 600; color: var(--navy-deep);
}
.faq-q .sign { flex: none; width: 18px; height: 18px; position: relative; }
.faq-q .sign::before, .faq-q .sign::after {
  content: ""; position: absolute; background: var(--navy-deep);
  left: 50%; top: 50%; transform: translate(-50%, -50%);
}
.faq-q .sign::before { width: 16px; height: 2px; }
.faq-q .sign::after  { width: 2px; height: 16px; transition: transform .2s; }
.faq-item.is-open .faq-q .sign::after { transform: translate(-50%, -50%) scaleY(0); }
.faq-a { display: none; padding: 0 24px 22px; font-size: 15px; color: var(--ink); }
.faq-item.is-open .faq-a { display: block; }

/* --- Reviews -------------------------------------------------------------- */
.rating-card {
  display: flex; align-items: center; justify-content: center; gap: 16px;
  background: var(--surface-alt); border-radius: var(--radius-lg);
  padding: 22px 30px; max-width: 720px; margin: 0 auto 36px;
}
.rating-card .score { font-size: 34px; font-weight: 700; color: var(--navy); line-height: 1; }
.rating-card .stars { color: #FBBC04; font-size: 22px; letter-spacing: 2px; }
.rating-card small { display: block; font-size: 13px; color: var(--muted); margin-top: 3px; }
.rating-card img { height: 20px; width: auto; display: inline-block; vertical-align: -4px; }

.reviews { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.review { background: #fff; border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 22px; }
.review .stars { color: #FBBC04; font-size: 15px; letter-spacing: 1px; margin-bottom: 10px; }
.review p { font-size: 14.5px; color: var(--ink); }
.review .who { display: flex; align-items: center; gap: 10px; margin-top: 16px; }
.review .avatar {
  width: 34px; height: 34px; border-radius: 50%; flex: none;
  background: var(--teal); color: #fff; display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.review .who b { display: block; font-size: 14px; color: var(--navy); }
.review .who span { display: block; font-size: 12px; color: var(--muted); }

/* --- Urgent band ---------------------------------------------------------- */
.urgent {
  position: relative; overflow: hidden; color: #fff;
  background-size: cover; background-position: left 30% center;
}
.urgent::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(2, 1, 1, 0) 25%, var(--teal-alt) 32%);
}
.urgent .wrap { position: relative; z-index: 1; }
.urgent-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 40px;
  align-items: center; padding-block: 52px;
}
.urgent-copy { grid-column: 2; }
.urgent .eyebrow { color: rgba(255, 255, 255, .85); }
.urgent h2 { color: #fff; font-style: italic; margin-bottom: .35em; }
.urgent p { margin-bottom: 22px; }

/* --- Brand strip ---------------------------------------------------------- */
.brands { background: #fff; padding-block: 44px; }
.brand-track {
  display: flex; align-items: center; justify-content: space-between;
  gap: 48px; flex-wrap: wrap;
}
.brand-track img { height: 58px; width: auto; max-width: 150px; object-fit: contain; }

/* --- Bottom quote block ---------------------------------------------------
   Matches the reference: the block ends with a full-width navy strip, and only
   the form card reaches down across it. The grey stops dead on that line.
   The panel carries no background of its own — when it did, its rounded corners
   dropped past the grey into the navy. Its bottom padding keeps its content
   clear of the navy strip. The card never overlaps the contact strip below. */
.quote-block {
  background: linear-gradient(
    var(--surface-alt) calc(100% - 56px), var(--navy) calc(100% - 56px));
  padding-block: 64px 0;
}
.quote-block-inner {
  display: grid; grid-template-columns: 420px 1fr; gap: 48px; align-items: start;
}
/* Bottom-aligned so the card reaches the block's base and crosses the navy
   strip, however tall the panel beside it happens to be. */
.quote-block .quote-card { position: relative; z-index: 2; align-self: end; }
.quote-block .areas-panel {
  padding: 16px 0 76px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 36px; align-items: center;
}

/* --- Contact strip -------------------------------------------------------- */
.contact-strip { background: var(--navy); color: #fff; padding-block: 34px; }
.contact-strip-inner { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.contact-strip .item { display: flex; align-items: center; gap: 16px; }
.contact-strip svg { width: 40px; height: 40px; flex: none; color: #fff; }
.contact-strip small { display: block; font-size: 15px; font-weight: 500; letter-spacing: .02em; text-transform: uppercase; }
.contact-strip strong { display: block; font-size: 20px; font-weight: 700; font-style: italic; }

/* --- Footer --------------------------------------------------------------- */
.site-footer { background: var(--grad-footer); color: #fff; padding-block: 56px 0; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1.6fr 1fr 1fr; gap: 36px; }
.footer-brand img { max-width: 230px; margin-bottom: 18px; }
.footer-brand p { font-size: 13.5px; color: rgba(255, 255, 255, .85); }
.socials { display: flex; gap: 10px; margin-top: 18px; }
.socials a {
  width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .15);
  display: grid; place-items: center; transition: .2s;
}
.socials a:hover { background: #fff; color: var(--navy); }
.socials svg { width: 17px; height: 17px; }
.site-footer h3 { font-size: 20px; font-style: italic; color: #fff; margin-bottom: .8em; }
.footer-links { display: grid; gap: 10px; }
.footer-links.two-col { grid-template-columns: 1fr 1fr; column-gap: 24px; }
.footer-links a { font-size: 14px; color: rgba(255, 255, 255, .88); }
.footer-links a:hover { color: #fff; text-decoration: underline; }
.footer-bottom {
  margin-top: 44px; padding-block: 18px; border-top: 1px solid rgba(255, 255, 255, .18);
  text-align: center; font-size: 13px; color: rgba(255, 255, 255, .8);
}

/* --- Sticky mobile call bar ----------------------------------------------- */
.callbar { display: none; }

/* --- Responsive ----------------------------------------------------------- */
@media (max-width: 1180px) {
  .hero-grid { grid-template-columns: 1fr 420px; gap: 32px; }
  .quote-block-inner { grid-template-columns: 380px 1fr; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 1024px) {
  :root { --sec-y: 56px; }
  .header-cta { display: none; }
  .nav-toggle { display: block; order: 3; }
  .header-inner { min-height: 88px; }

  /* Mobile menu panel */
  .nav {
    display: none;
    position: fixed; inset: 0; top: 0; z-index: 80;
    background: var(--navy); overflow-y: auto;
    padding: 84px 22px 40px;
  }
  .nav.is-open { display: block; }
  .nav > ul { display: block; }
  .nav a { display: flex; justify-content: space-between; color: #fff; font-size: 17px; padding: 14px 4px; }
  .nav > ul > li + li { border-top: 1px solid rgba(255, 255, 255, .14); }
  .nav .caret { width: 14px; height: 14px; transition: transform .2s; }
  .nav .has-sub.is-open > a .caret { transform: rotate(180deg); }

  .nav .submenu {
    position: static; opacity: 1; visibility: visible; transform: none;
    background: transparent; box-shadow: none; padding: 0 0 10px 12px;
    min-width: 0; display: none;
  }
  .nav .has-sub.is-open > .submenu { display: block; }
  .nav .submenu a { color: rgba(255, 255, 255, .85); font-size: 15px; padding: 10px 4px; }
  .nav .submenu a:hover { background: transparent; color: #fff; }

  /* Close button sits over the panel */
  .nav.is-open + .header-cta { display: none; }
  .nav-toggle[aria-expanded="true"] { position: fixed; top: 18px; right: 16px; z-index: 90; color: #fff; }

  .hero { min-height: 0; padding-block: 48px; }
  .hero--page::before { background: linear-gradient(180deg, rgba(2, 48, 88, .5) 0%, rgba(2, 48, 88, .35) 100%); }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .hero-copy p { max-width: none; }
  .hero-copy { padding-bottom: 0; }

  .split, .grid--2, .cards, .quote-block-inner { grid-template-columns: 1fr; }
  .split { gap: 32px; }
  .trustbar { margin-top: 0; }
  .trustbar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px 0; }
  .trust-item:nth-child(odd) { border-left: 0; }
  .trust-item:nth-child(n+3) { border-top: 1px solid var(--line); padding-top: 24px; }

  .tiles, .reviews { grid-template-columns: repeat(2, 1fr); }
  .icon-row { grid-template-columns: repeat(3, 1fr); gap: 28px; }
  .values { grid-template-columns: repeat(2, 1fr); }
  .grid--4 { grid-template-columns: repeat(2, 1fr); }

  .stat-badge { right: 16px; bottom: -20px; }

  .urgent-copy { grid-column: 1; }
  .urgent-inner { grid-template-columns: 1fr; }
  .urgent::before { background: linear-gradient(180deg, rgba(42, 169, 186, .9), rgba(42, 169, 186, .96)); }

  /* Single column: no overlap to stage, so plain grey with normal padding. */
  .quote-block { background: var(--surface-alt); padding-block: 56px; }
  .quote-block-inner { gap: 0; }
  .quote-block .areas-panel { padding: 40px 0 0; grid-template-columns: 1fr; }

  .contact-strip-inner { grid-template-columns: 1fr; gap: 20px; }

  /* mobile sticky call bar */
  .callbar {
    display: grid; grid-template-columns: 1fr 1fr; gap: 1px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
    background: rgba(2, 48, 88, .25); box-shadow: 0 -2px 14px rgba(0, 0, 0, .18);
  }
  .callbar a {
    display: flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 10px; font-size: 15px; font-weight: 700; color: #fff;
  }
  .callbar svg { width: 18px; height: 18px; }
  .callbar .call { background: var(--teal); }
  .callbar .quote { background: var(--navy); }
  body { padding-bottom: 54px; }
}

@media (max-width: 640px) {
  :root { --gutter: 18px; --sec-y: 44px; }
  .topbar { min-height: 46px; padding-block: 8px; }
  .topbar a { font-size: 13px; gap: 8px; }
  .topbar svg { width: 16px; height: 16px; }
  .logo img { max-width: 190px; }

  .trustbar-inner { grid-template-columns: 1fr; padding: 24px; }
  .trust-item { border-left: 0 !important; padding: 18px 0; }
  .trust-item + .trust-item { border-top: 1px solid var(--line); }

  .tiles, .reviews, .icon-row, .values, .grid--4, .checklist--2, .area-list { grid-template-columns: 1fr; columns: 1; }
  .quote-card { padding: 24px; }
  .card { padding: 24px; }
  .stat-badge { position: static; margin-top: 16px; max-width: none; }
  .brand-track { gap: 28px; justify-content: center; }
  .brand-track img { height: 32px; }
  .footer-grid { grid-template-columns: 1fr; }
  .footer-links.two-col { grid-template-columns: 1fr; }
}

/* --- Motion ---------------------------------------------------------------- */
/* Guarded behind .js (set by an inline script in <head>) so a JS failure can
   never leave sections invisible — the failure mode that plagues the old site. */
.js .reveal { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.js .reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* --- Reviews fallback ------------------------------------------------------
   Revealed by js/main.js only when the Elfsight widget fails to render, so a
   third-party outage never leaves a bare heading over empty space. */
.reviews-fallback {
  display: flex; flex-direction: column; align-items: center; gap: 22px;
  padding: 12px 0 8px; text-align: center;
}
.reviews-fallback[hidden] { display: none; }
.reviews-fallback img { height: auto; max-height: 133px; width: auto; }