/* ==========================================================================
   ADI Leak Detection Sheffield
   Built to the design language of ADI's Edinburgh paid-ads landing page
   (reference/lp-edinburgh/). Tokens, radii, shadows and component shapes are
   taken from that page's own stylesheet so the Sheffield site reads as one
   piece with it. Interior pages reuse the same components.
   ========================================================================== */

/* --- Inter, self-hosted ---------------------------------------------------
   WP7. Google Fonts served the same latin woff2 for every weight we asked for,
   because Inter ships as a variable font and the weight is an axis rather than a
   separate file. So this is one 48KB file covering 100 to 900 rather than five
   copies of it, with font-display: swap and the latin unicode-range Google's own
   stylesheet declares. The Google Fonts stylesheet and both preconnects are gone
   from head(), so nothing about the type is render-blocking on a third party.
   -------------------------------------------------------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/assets/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* --- tokens, from edinburgh-lp.css ---------------------------------------- */
:root {
  --navy: #1c2475;
  --navy-2: #161c5c;
  --navy-deep: #10143a;
  --ink: #1f2540;
  --cyan: #00d4ff;
  --orange: #ffa040;
  --orange-2: #f57000;
  --orange-glow: rgba(245, 112, 0, 0.42);
  --light: #f3f5f6;
  --sky: #d6edfb;
  --sky-pale: #e9f8fd;
  --tp-green: #00b67a;

  --muted: #4b5563;
  --line: #e4e8ee;
  --line-soft: #eef1f5;

  /* orange as TEXT on a light surface: the CTA gradient is a fill colour and
     only reaches 3.1:1 as type, so links use this darker cut (5.1:1 on white) */
  --orange-text: #c44300;

  --shadow-card: 0 20px 50px rgba(6, 10, 35, 0.28);
  --shadow-soft: 0 6px 18px rgba(16, 22, 80, 0.06);
  --shadow-lift: 0 12px 30px rgba(16, 22, 80, 0.18);
  --cta-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.5),
    inset 0 0 0 1px rgba(255, 255, 255, 0.14),
    0 10px 24px var(--orange-glow),
    0 2px 6px rgba(8, 20, 60, 0.16);
  --cta-shadow-hover:
    inset 0 1px 0 rgba(255, 255, 255, 0.6),
    inset 0 0 0 1px rgba(255, 255, 255, 0.18),
    0 16px 36px rgba(245, 112, 0, 0.55),
    0 5px 12px rgba(8, 20, 60, 0.2);

  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  --shell: 1300px;
}

/* --- reset ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 24px; }

body {
  margin: 0;
  font-family: var(--body);
  color: var(--ink);
  background: #fff;
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  /* The header is last in the source (main content first for information
     retrieval) and displayed first: body is one column and .site-header is
     ordered before everything else. */
  display: flex;
  flex-direction: column;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }
a { color: inherit; }

h1, h2, h3, h4 { margin: 0; line-height: 1.2; font-weight: 800; letter-spacing: -0.3px; color: var(--navy); }
h1 { font-size: 33px; font-weight: 900; line-height: 1.15; letter-spacing: -0.4px; }
h2 { font-size: 27px; }
h3 { font-size: 23px; }
h4 { font-size: 19px; }

p { margin: 0 0 14px; }
p:last-child { margin-bottom: 0; }

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

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
}

.skip-link {
  position: absolute; left: 16px; top: -64px; z-index: 200;
  background: var(--navy); color: #fff; padding: 12px 20px;
  font-weight: 700; border-radius: 10px; text-decoration: none;
  transition: top 0.15s ease-out;
}
.skip-link:focus { top: 12px; }

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

/* --- layout --------------------------------------------------------------- */
/* There is no container element: each full-width block carries the old 1300px
   container's inset as its own inline padding, --page-inset, which is 24px until
   the viewport is wide enough to centre 1252px of content. */
:root { --page-inset: max(24px, calc((100% - 1252px) / 2)); }

/* --- the page skeleton ------------------------------------------------------
   Peter's semantic site builder MD, Part 1.2: main holds one article, the H1 is
   the article's first child, and every H2 lives in a section with its content.
   main is the grid and the article is display: contents, so the breadcrumb nav
   (outside the article) and the article's own H1, bridge text and primary action
   share one grid and can sit together on the hero photograph. Nothing wraps the H1.

   Columns: a 24px minimum gutter each side, then the old 1300px container's
   1252px of content, split at 780px because that was the hero card's width.
   Rows: a top padding row, one row per hero item (the page sets --hero-rows on
   main), a bottom padding row, then every section in an implicit row of its own.
   -------------------------------------------------------------------------- */
main {
  display: grid;
  grid-template-columns:
    [full-start] minmax(24px, 1fr)
    [content-start] min(780px, 100% - 48px)
    [card-end] minmax(0, 472px)
    [content-end] minmax(24px, 1fr)
    [full-end];
  grid-template-rows: var(--hero-top, 0px) repeat(var(--hero-rows), auto) var(--hero-bottom, 0px);
}
main > article { display: contents; }
main > *, main > article > * { grid-column: full; min-width: 0; }

/* Every top-level block of the article (each section, aside, and the two layouts
   that hold a pair of sections) is a full-width band whose padding puts its
   content where the old container did: 1252px wide and centred, or 852px for
   .copy-column. Selected by element, and wrapped in :where() so it carries no
   specificity and any section's own class overrides it. The tone-* classes set
   the band's ground. */
:where(main > article > section, main > article > aside, main > article > div:not(.primary-action), main > aside) {
  padding: 56px var(--page-inset);
}
.copy-column { padding-inline: max(24px, calc((100% - 852px) / 2)); }
.tone-light { background: var(--light); }
.tone-white { background: #fff; }
.tone-wash { background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%); }
.tone-navy { background: var(--navy-deep); color: #fff; }
.tone-navy h1, .tone-navy h2, .tone-navy h3, .tone-navy h4 { color: #fff; }
.tone-navy p { color: #d5ddf5; }

/* The H2 and the paragraph that answers it are direct children of the section
   now, so the spacing the old .sec-head wrapper gave them is set on them. The
   answering paragraph keeps its muted colour as .heading-lede, because a body
   paragraph straight after an H2 is ink and position alone cannot tell them apart. */
/* a band's own H2 (the two-section layouts set their sections' H2s themselves) */
:where(main > article > section, main > article > aside, main > aside) > h2 { margin-bottom: 30px; }
:where(main > article > section, main > article > aside, main > aside) > h2:has(+ .heading-lede) { margin-bottom: 10px; }
.heading-lede { color: var(--muted); max-width: 70ch; margin-bottom: 30px; }
.heading-lede:has(+ .heading-lede) { margin-bottom: 14px; }
.tone-navy .heading-lede { color: #d5ddf5; }
.heading-centred > h2, .heading-centred > .heading-lede { text-align: center; }
.heading-centred > .heading-lede { margin-inline: auto; }

/* --- the orange CTA, straight from the LP --------------------------------- */
.call-action {
  display: inline-block;
  text-decoration: none;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-2) 100%);
  color: var(--navy);
  font-weight: 800;
  font-size: 17px;
  line-height: 1.35;
  letter-spacing: 0.2px;
  padding: 17px 36px;
  border-radius: 16px;
  text-align: center;
  border: 0;
  cursor: pointer;
  font-family: var(--body);
  box-shadow: var(--cta-shadow);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.call-action:hover { transform: translateY(-3px); filter: brightness(1.04); box-shadow: var(--cta-shadow-hover); }
.call-action b { font-weight: 900; }
/* inline icons inside buttons: without an explicit size an inline SVG renders
   at the viewBox default, which is how a phone glyph ends up 100px tall */
.call-action svg, .secondary-action svg { width: 18px; height: 18px; flex: none; }
.call-action:has(svg), .secondary-action:has(svg) { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.call-action--block { display: block; width: 100%; }

.secondary-action {
  display: inline-block;
  text-decoration: none;
  background: #fff;
  color: var(--navy);
  font-weight: 800;
  font-size: 16px;
  padding: 15px 28px;
  border-radius: 16px;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.secondary-action:hover { transform: translateY(-2px); border-color: var(--navy); }
/* :has() is widely supported now, but the fallback keeps the icon sane without it */
@supports not selector(:has(*)) {
  .call-action svg, .secondary-action svg { display: inline-block; vertical-align: -3px; margin-right: 8px; }
}

.text-link {
  color: var(--navy);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--cyan);
  padding-bottom: 1px;
}
.text-link:hover { border-color: var(--orange-2); color: var(--orange-text); }
.tone-navy .text-link, .company-details-footer .text-link { color: #fff; border-color: var(--cyan); }
.tone-navy .text-link:hover, .company-details-footer .text-link:hover { color: var(--cyan); }

/* --- top bar -------------------------------------------------------------- */
.site-header { order: -1; }
/* 4px, not 14px, above and below (28 September 2026): the Trustpilot Mini box is
   125px, the Edinburgh LP's own height, and has its own clear space inside it,
   so the bar was 153px of which 28px was padding. It cannot shrink: under about
   114px its "TrustScore | reviews" line is cut off at any width. */
.site-header-bar { background: var(--navy); padding: 4px var(--page-inset); }
.site-header-desktop {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  /* the Trustpilot box's 125px, held before its script arrives (or if it is
     blocked), so the logo sits in the middle of the bar rather than 4px from its
     top, and the bar does not grow when the box loads */
  min-height: 125px;
}
.site-header-logo img { width: 260px; max-width: 100%; }
.header-rating { display: flex; justify-content: center; flex: 1; min-width: 0; }
[data-trustpilot] > .trustpilot-fallback { display: flex; }
.header-rating-widget { width: 90%; height: 125px; }
.header-rating-widget > .trustpilot-fallback { height: 125px; justify-content: center; }

.trustpilot-fallback {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  color: #fff;
}
.trustpilot-mark { font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; gap: 6px; }
.trustpilot-mark .trustpilot-star { color: var(--tp-green); font-size: 19px; }
.trustpilot-stars { display: inline-flex; gap: 3px; }
.trustpilot-stars i {
  width: 21px; height: 21px; background: var(--tp-green); border-radius: 3px;
  display: inline-block; position: relative;
}
.trustpilot-stars i::after {
  content: "\2605"; position: absolute; inset: 0; color: #fff;
  font-size: 15px; line-height: 21px; text-align: center; font-style: normal;
}
.trustpilot-summary { font-size: 12.5px; color: #cfd7f2; }
.trustpilot-summary strong { color: #fff; }

.header-phone a {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-2) 100%);
  color: var(--navy);
  font-weight: 900;
  font-size: 22px;
  letter-spacing: 0.2px;
  padding: 10px 26px 10px 12px;
  border-radius: 999px;
  box-shadow: var(--cta-shadow);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
  white-space: nowrap;
}
.header-phone a:hover { transform: translateY(-2px); box-shadow: var(--cta-shadow-hover); }
.header-phone .header-phone-icon {
  width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255, 255, 255, 0.38);
  display: grid; place-items: center; flex: none;
}
.header-phone .header-phone-icon svg { width: 18px; height: 18px; }
.header-phone p { margin: 0; }

.site-header-mobile { display: none; }
.mobile-brand { display: flex; justify-content: center; align-items: center; gap: 14px;
  width: 100%; align-self: stretch; }
.mobile-brand > a:not(.mobile-rating) { width: min(58%, 210px); flex: none; }
.mobile-brand .mobile-brand-logo { width: 100%; height: auto; }
/* matched to the logo beside it rather than left as the smaller of the two */
.mobile-brand .mobile-rating {
  display: flex; align-items: center; flex: 1 1 auto; min-width: 0;
  background: #fff; border-radius: 10px; padding: 7px 10px;
}
.mobile-brand .mobile-rating-widget { width: 100%; min-width: 0; height: 52px; }
.mobile-rating-widget > .trustpilot-fallback { height: 52px; justify-content: center; }
/* the light fallback, stars and wordmark only, for when the script does not land */
.trustpilot-fallback--light { color: var(--navy); flex-direction: column; gap: 3px; }
.trustpilot-fallback--light .trustpilot-mark { font-size: 14px; }
.trustpilot-fallback--light .trustpilot-stars i { width: 16px; height: 16px; }

/* The small header runs to 1100px, where the homepage hero stacks (it was 980px),
   and since 28 September 2026 it is one row: the logo, the Trustpilot box and the
   menu button side by side. The menu button used to take a 54px row of its own
   under the other two, which made the phone header 149px and put the homepage
   hero 216px past an iPhone's first screen. The Trustpilot box keeps its three
   lines (two need about 175px, which the row cannot spare), so its 60px sets the
   row; the menu button is placed on the row from the nav (see "navigation"). */
@media (max-width: 1100px) {
  .site-header-desktop { display: none; }
  .site-header-mobile { display: flex; flex-direction: column; align-items: center; gap: 10px; }
  .header-phone a { font-size: 20px; }
  .site-header { position: relative; }
  .site-header-bar { padding-block: 6px; }
  .mobile-brand { justify-content: space-between; gap: 10px; min-height: 60px; padding-right: 56px; }
  .mobile-brand > a:not(.mobile-rating) { width: min(42%, 170px); }
  .mobile-brand .mobile-rating { flex: 0 1 132px; padding: 4px 6px; }
}
/* From 701 to 1100px the row has room for the phone pill too (logo, Trustpilot
   and pill take 536px; the row has 597px at 701), so it is there from the start,
   as on the desktop bar, rather than arriving in a row of its own once the
   accreditations have scrolled past: that row made the header 64px taller in
   mid-scroll, which a browser without scroll anchoring shows as a jump. Phones
   keep the late row (the hero needs the height; it is how the live site works). */
@media (min-width: 701px) and (max-width: 1100px) {
  .site-header-mobile { flex-direction: row; justify-content: space-between; min-height: 60px; padding-right: 56px; }
  .mobile-brand { display: contents; }
}

/* --- navigation ----------------------------------------------------------- */
.site-nav {
  background: var(--navy-2); border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; flex-wrap: wrap;
  padding-inline: var(--page-inset);
}
.site-nav ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; }
.site-nav a {
  display: inline-block;
  padding: 14px 16px;
  color: #dfe5ff;
  font-size: 15px;
  font-weight: 600;
  text-decoration: none;
}
.site-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav a[aria-current="page"] { color: #fff; box-shadow: inset 0 -3px 0 var(--cyan); }

.site-nav .service-menu { position: relative; }
.site-nav .service-menu > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px; background: none; border: 0;
  color: #dfe5ff; font: 600 15px/1 var(--body); cursor: pointer;
}
.site-nav .service-menu > button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav .service-menu > button svg { width: 13px; height: 13px; transition: transform 0.16s ease; }
.site-nav .service-menu[data-open="true"] > button { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav .service-menu[data-open="true"] > button svg { transform: rotate(180deg); }
.site-nav .service-menu-panel {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(560px, 80vw); padding: 10px;
  background: #141a52; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(6, 10, 35, 0.5);
}
.site-nav .service-menu[data-open="true"] .service-menu-panel { display: grid; }
.site-nav .service-menu-panel a { padding: 10px 12px; font-size: 14.5px; border-radius: 8px; }
@media (max-width: 1100px) {
  .site-nav .service-menu { width: 100%; }
  .site-nav .service-menu > button { width: 100%; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .site-nav .service-menu-panel {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr);
    width: 100%; background: none; border: 0; box-shadow: none; padding: 0 0 0 12px;
  }
}

.site-nav-toggle {
  display: none;
  align-items: center;
  gap: 8px;
  background: none;
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 10px;
  color: #fff;
  font: 700 14px/1 var(--body);
  padding: 10px 14px;
  margin: 8px 0;
  cursor: pointer;
}
.site-nav-toggle svg { width: 16px; height: 16px; }

@media (max-width: 1100px) {
  .site-nav .service-menu { position: relative; }
.site-nav .service-menu > button {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 14px 16px; background: none; border: 0;
  color: #dfe5ff; font: 600 15px/1 var(--body); cursor: pointer;
}
.site-nav .service-menu > button:hover { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav .service-menu > button svg { width: 13px; height: 13px; transition: transform 0.16s ease; }
.site-nav .service-menu[data-open="true"] > button { color: #fff; background: rgba(255, 255, 255, 0.08); }
.site-nav .service-menu[data-open="true"] > button svg { transform: rotate(180deg); }
.site-nav .service-menu-panel {
  position: absolute; top: 100%; left: 0; z-index: 60;
  display: none; grid-template-columns: repeat(2, minmax(0, 1fr));
  width: min(560px, 80vw); padding: 10px;
  background: #141a52; border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: 14px; box-shadow: 0 20px 50px rgba(6, 10, 35, 0.5);
}
.site-nav .service-menu[data-open="true"] .service-menu-panel { display: grid; }
.site-nav .service-menu-panel a { padding: 10px 12px; font-size: 14.5px; border-radius: 8px; }
@media (max-width: 1100px) {
  .site-nav .service-menu { width: 100%; }
  .site-nav .service-menu > button { width: 100%; justify-content: space-between; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  .site-nav .service-menu-panel {
    position: static; display: grid; grid-template-columns: minmax(0, 1fr);
    width: 100%; background: none; border: 0; box-shadow: none; padding: 0 0 0 12px;
  }
}

.site-nav-toggle { display: inline-flex; }
  .site-nav ul { display: none; flex-direction: column; width: 100%; padding-bottom: 10px; }
  .site-nav[data-open="true"] ul { display: flex; }
  .site-nav a { width: 100%; padding: 12px 4px; border-top: 1px solid rgba(255, 255, 255, 0.08); }
  /* one-row header (28 September 2026): the menu button is a 44px square at the
     end of the header row, 14px down (the bar's 6px, then centred on its 60px
     row), with its word kept for screen readers only. Closed, the nav below the
     bar has nothing in flow and takes no height; open, the list drops under the
     bar as before. The skip link still targets the nav; its scroll margin lands
     the jump at the top of the page, so the button is on screen when Tab
     reaches it (the nav itself sits under the bar, past the button). */
  .site-nav-toggle {
    position: absolute; top: 14px; right: var(--page-inset);
    width: 44px; height: 44px; margin: 0; padding: 0; justify-content: center;
  }
  .site-nav-toggle svg { width: 20px; height: 20px; }
  .site-nav { min-height: 0; border-top: 0; scroll-margin-top: 160px; }
  .site-nav[data-open="true"] { border-top: 1px solid rgba(255, 255, 255, 0.1); }
  /* the open list is painted above the header bar's contents: the phone pill's
     orange glow reaches past the bar, and inline content paints over a block's
     ground, so it tinted the top of the list */
  .site-nav ul { position: relative; z-index: 1; background: var(--navy-2); }
}

/* --- trust tick strip ----------------------------------------------------- */
.trust-strip {
  list-style: none; margin: 0;
  background: var(--sky-pale);
  border-top: 1px solid rgba(0, 212, 255, 0.35);
  border-bottom: 1px solid rgba(0, 212, 255, 0.35);
  padding: 18px var(--page-inset);
  display: flex; flex-wrap: wrap;
}
.trust-strip-point {
  display: flex; align-items: center; width: calc(100% / 3);
  justify-content: center; gap: 10px;
  font-weight: 700; color: var(--navy);
}
.trust-strip-point i {
  color: #0b7fa8;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0; font-style: normal;
}
.trust-strip-point i svg { width: 15px; height: 15px; }
.trust-strip-point p { margin: 0; font-size: 16px; }

@media (max-width: 980px) {
  .trust-strip { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 10px; }
  .trust-strip-point { width: 100%; justify-content: flex-start; gap: 8px; }
  .trust-strip-point p { font-size: 15.5px; line-height: 1.35; }
}
@media (max-width: 520px) {
  .trust-strip { grid-template-columns: minmax(0, 1fr); }
}

/* --- accreditation strip -------------------------------------------------- */
/* one strip, after the hero, at every width: the hero is the first thing under
   the nav on a phone as well as on a desktop */
.accreditation-strip { display: block; padding: 40px var(--page-inset); background: #fff; border-top: 1px solid var(--line-soft); }
.accreditation-logos {
  list-style: none; margin: 0; padding: 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 24px; flex-wrap: wrap;
}
.accreditation-logos li { display: flex; justify-content: center; flex: 1 1 auto; }
.accreditation-logos img { height: 54px; width: auto; }
.accreditation-logos img.logo-small { height: 44px; }

/* --- accreditation cards -------------------------------------------------
   The main site's card family (pale blue border, soft panel, lift on hover) at
   strip scale: plain logo tiles, each a link to the one place the descriptions
   live. The front face is absolutely positioned, so the tile's height is its
   min-height and nothing else. 102px is what the tiles measured at 1440 when a
   hidden description face still sized them, so the band kept its height when the
   description faces went (17 and 19 September 2026). */
.accreditation-tiles {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}
.accreditation-tile { display: grid; }
/* the link is the tile: its min-height is the tile's height, and the logo sits
   in the middle of it */
.accreditation-tile-link {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 102px;
  padding: 12px 10px;
  text-align: center;
  text-decoration: none;
  background: var(--light);
  border: 2px solid #b3e5fc;
  border-radius: 12px;
  transition: box-shadow 0.3s ease;
}
/* whichever hits first, so a wide logo never crowds the tile */
.accreditation-tile-link img { height: 60px; width: auto; max-width: 70%; object-fit: contain; }
.accreditation-tile-link img.logo-small { height: 58px; }
.accreditation-tile-link:hover,
.accreditation-tile-link:focus-visible { box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); }

@media (max-width: 1100px) {
  .accreditation-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .accreditation-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  /* five cards in two columns leaves an orphan, so the last one takes the row */
  .accreditation-tile:last-child { grid-column: 1 / -1; }
  .accreditation-tile-link { border-radius: 10px; padding: 10px 8px; }
  .accreditation-tile-link img { height: 52px; max-width: 74%; }
  .accreditation-tile-link img.logo-small { height: 50px; }
  /* the orphan takes the full row, so its logo has width to spare and would
     otherwise sit in a mostly empty tile */
  .accreditation-tile:last-child .accreditation-tile-link img { height: 60px; max-width: 46%; }
}
@media (max-width: 980px) {
  .accreditation-logos:not(.accreditation-tiles) { gap: 14px; justify-content: center; }
  .accreditation-logos:not(.accreditation-tiles) img { height: 38px; }
  .accreditation-logos:not(.accreditation-tiles) img.logo-small { height: 32px; }
}

/* --- homepage hero ------------------------------------------------------- */
/* The same pieces as the interior hero on main's grid: the photograph and scrim
   are the article's ::before, the white card its ::after. The card is the right
   60% of the content column, as the old flex basis made it, so the card and every
   item in it are sized as 60% of that column (less the card's 26px padding and 1px
   border for the items) and pushed to its end, which rounds exactly as the flex
   layout did; a 40% left margin lands a sixty-fourth of a pixel away and changes
   the text anti-aliasing. */
/* 16px above and below the hero (22px and 26px until 28 September 2026, when the
   hero was brought inside the first screen of a 13in laptop; see "accreditations
   inside the hero" for the rest) */
main:has(> article.home-hero) { --hero-top: 16px; --hero-bottom: 16px; }
.home-hero::before {
  content: "";
  grid-column: full;
  grid-row: 1 / -1;
  background-color: var(--navy);
  background-image: inherit;
  background-size: cover;
  /* the backdrop is a blurred copy of the hero photograph, so it carries colour
     and light only and has no subject to aim at; the subject is in the frame or
     the band (see "hero photograph" below) */
  background-position: center;
  background-repeat: no-repeat;
}
.home-hero::after {
  content: "";
  grid-column: content-start / content-end;
  /* the H1, the two summary paragraphs and the primary action */
  grid-row: 2 / 6;
  width: 60%;
  justify-self: end;
  z-index: 3;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
.home-hero > :is(h1, .page-summary, .primary-action, .trust-points, .hero-accreditation-logos, .hero-accreditation-row) {
  grid-column: content-start / content-end;
  position: relative;
  z-index: 4;
}
.home-hero > :is(h1, .page-summary, .primary-action) {
  width: calc(60% - 54px);
  justify-self: end;
  margin-right: 27px;
  text-align: center;
}
.home-hero > h1 { grid-row: 2; margin-top: 20px; margin-bottom: 8px; color: var(--navy); font-size: 31px; line-height: 1.1; }
/* the summary paragraph is a content rule, so it stays in full; the leading is
   what gives the height back */
.home-hero > .page-summary { grid-row: 3; font-size: 14.5px; line-height: 1.45; margin-top: 0; margin-bottom: 8px; }
/* the summary is two paragraphs (27 September 2026): the definition and the
   signs, then the local service, which takes its own row inside the card */
.home-hero > .page-summary + .page-summary { grid-row: 4; }
/* split, each paragraph left a word alone on its last line at some widths
   ("visit." at 390, "leak." at 1440); pretty wrapping moves a second word down
   with it and changes no line count (measured from 360 to 1440). A browser
   without it wraps as before */
.home-hero > .page-summary { text-wrap: pretty; }
/* the three methods (27 September 2026), in the navy the site's other bold terms
   use; 700 rather than their 800 because this is running text */
.home-hero > .page-summary b { font-weight: 700; color: var(--navy); }
.home-hero > .primary-action { grid-row: 5; margin-bottom: 20px; display: flex; flex-direction: column; }
.home-hero > .trust-points { grid-row: 6; margin-top: 10px; }
.home-hero > :is(.hero-accreditation-logos, .hero-accreditation-row) { grid-row: 7; }
.home-hero .primary-action ul {
  list-style: none; padding: 0;
  text-align: left; margin: 0 auto 8px; flex: 1;
  display: flex; flex-direction: column; justify-content: space-evenly;
  width: max-content; max-width: 100%;
}
.home-hero .primary-action li {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 2px 0; color: var(--ink); font-size: 16px;
}
.home-hero .primary-action li i {
  color: var(--navy); margin-top: 4px; flex-shrink: 0; font-style: normal;
}
.home-hero .primary-action li i svg { width: 15px; height: 15px; }
.home-hero .hero-call-action {
  display: inline-block; text-decoration: none; align-self: center; margin-top: 8px;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-2) 100%);
  color: var(--navy); font-weight: 800; font-size: 16px; line-height: 1.35;
  padding: 11px 26px; border-radius: 16px; text-align: center;
  box-shadow: var(--cta-shadow);
  transition: transform 0.2s ease, box-shadow 0.25s ease, filter 0.2s ease;
}
.home-hero .hero-call-action:hover { transform: translateY(-3px); filter: brightness(1.04); box-shadow: var(--cta-shadow-hover); }
.home-hero .hero-call-action b { font-weight: 900; }
/* the header phone pill's handset, before the words (27 September 2026), at the
   inner-page call buttons' 18px and 10px. Inline, not a flex item: the button
   wraps to two lines on a phone, and inline it wraps as one run of text with the
   icon on the first line, where a flex column beside the text would narrow both
   lines. -3px puts its middle level with the middle of the digits. */
.home-hero .hero-call-action svg { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; }

@media (max-width: 1100px) {
  /* the card takes the full content width */
  .home-hero::after { width: auto; justify-self: stretch; }
  .home-hero > :is(h1, .page-summary, .primary-action) { width: auto; justify-self: stretch; margin-left: 27px; }
}
@media (max-width: 600px) {
  main:has(> article.home-hero) { --hero-top: 18px; --hero-bottom: 14px; }
  /* 28 September 2026, to bring the hero inside a phone's first screen: the card
     and the logo row take 12px gutters rather than the page's 24px (the sections
     below keep 24px), and the card's text 16px sides. The wider text takes a
     line out of each summary paragraph from 360 to 380px and at 430. */
  main:has(> article.home-hero) {
    grid-template-columns:
      [full-start] minmax(12px, 1fr)
      [content-start] min(780px, 100% - 24px)
      [card-end] minmax(0, 472px)
      [content-end] minmax(12px, 1fr)
      [full-end];
  }
  .home-hero > :is(h1, .page-summary, .primary-action) { margin-left: 16px; margin-right: 16px; }
  /* a touch larger on phones, with more room under it (27 September 2026; it was
     26px with 8px under it): 28px from 390px up, scaling down below so the H1
     never gains a line (a flat 28px took a third line from 365 to 380px and a
     fourth at 320). At 360 it is 25.6px, which fits "and Repair in Sheffield" on
     the second line: two lines there, where 26px had three. From 320 to 340 it
     stays three lines, as it was. */
  .home-hero > h1 { margin-top: 16px; font-size: clamp(25.5px, calc(8vw - 3.2px), 28px); line-height: 1.1; margin-bottom: 12px; }
  /* the desktop's 14.5px on phones too (was 15px, 27 September): the second
     paragraph then fits three lines at 390 instead of four, which keeps the hero
     inside Peter's 900px with the callback button in */
  .home-hero > .page-summary { font-size: 14.5px; line-height: 1.45; margin-bottom: 6px; }
  .home-hero > .primary-action { margin-bottom: 16px; }
  .home-hero .primary-action li { font-size: 15.5px; padding: 4px 0; gap: 10px; }
  .home-hero .hero-call-action { padding: 11px 18px; font-size: 16px; }
}
/* With the handset on its first line, the button's second line ("discuss your
   leak with our team") needs 251px, which 18px sides leave only from 367px up;
   at 360 it took a third line. Below 375px the sides are 12px. The button fills
   the column at these widths anyway, so only the line breaks change. */
@media (max-width: 374px) {
  .home-hero .hero-call-action { padding-inline: 12px; }
}

/* --- review cards (Part 2 of the semantic site builder MD) ----------------
   The reviewer, the review's own title, one sentence saying whose work it is
   about and its rating, the customer's words as a quote, then the rating, date
   and engineer as a small attribute list along the foot of the card. */
.review-card {
  display: flex; flex-direction: column; text-align: left;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: var(--shadow-soft);
}
.review-card-author { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-weight: 700; color: var(--navy); font-size: 15px; }
.review-card-initials {
  width: 38px; height: 38px; border-radius: 50%; background: var(--navy);
  display: grid; place-items: center; font-weight: 800; font-size: 13px;
  color: #fff; flex: none;
}
.review-card h3 { font-size: 15.5px; margin: 0 0 4px; font-weight: 800; color: var(--navy); }
.review-card-summary { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.review-card-summary a { color: var(--navy); }
.review-card blockquote { margin: 0 0 12px; flex: 1; }
.review-card blockquote p { font-size: 14px; color: var(--ink); line-height: 1.5; margin: 0; }
.review-card-facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; align-items: center;
  margin: 0; padding-top: 10px; border-top: 1px solid var(--line-soft); font-size: 12.5px;
}
.review-card-facts dt { color: var(--muted); }
.review-card-facts dd { margin: 0; color: var(--navy); font-weight: 700; }
.review-card-facts dd a { color: var(--navy); }
.review-card-stars { display: inline-flex; gap: 3px; vertical-align: middle; }
.review-card-stars i {
  width: 17px; height: 17px; background: var(--tp-green); border-radius: 3px;
  display: inline-block; position: relative;
}
.review-card-stars i::after {
  content: "\2605"; position: absolute; inset: 0; color: #fff;
  font-size: 12px; line-height: 17px; text-align: center; font-style: normal;
}

/* the real Trustpilot widget, and the panel it sits in */
.rating-panel {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 26px 24px;
  box-shadow: var(--shadow-card);
  text-align: center;
}
.rating-panel-score { display: flex; align-items: center; justify-content: center; gap: 16px; flex-wrap: wrap; }
.rating-panel-number { font-size: 46px; font-weight: 900; color: var(--navy); line-height: 1; letter-spacing: -1px; }
.rating-panel-meta { font-size: 14px; color: var(--muted); text-align: left; }
.rating-panel-meta b { color: var(--navy); }
.rating-panel .trustpilot-widget { margin-top: 6px; min-height: 0; }
.rating-panel-link { margin-top: 14px; font-size: 14px; }
.trustpilot-stars--large i { width: 30px; height: 30px; }
.trustpilot-stars--large i::after { font-size: 21px; line-height: 30px; }

/* --- "discover" / reasons ------------------------------------------------- */
.detection-method-section {
  position: relative;
  padding: 66px max(24px, calc((100% - 1252px) / 2)) 72px;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
  overflow: hidden;
}
.detection-method-section::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(720px 420px at 10% 4%, rgba(0, 212, 255, 0.08), transparent 62%),
    radial-gradient(680px 440px at 96% 98%, rgba(28, 36, 117, 0.05), transparent 62%);
}
.detection-method-section > * { position: relative; z-index: 1; }
/* the H2 and the video down the first column, the H3 and its list spanning every
   row of the second */
.detection-method-section {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  grid-template-rows: auto auto auto 1fr;
  column-gap: 50px; align-items: start;
}
.detection-method-section > * { grid-column: 1; }
.detection-method-section > .engineer-kit { grid-column: 2; grid-row: 1 / -1; }
.detection-method-section > h2 { color: var(--navy); font-size: 27px; font-weight: 800; line-height: 1.25; margin-bottom: 10px; }
.detection-method-section > h2 + p { color: var(--muted); margin-bottom: 20px; }
.video-preview {
  position: relative; display: block; border-radius: 12px; overflow: hidden;
  border: 3px solid var(--cyan); background: var(--navy); cursor: pointer;
  width: 100%; padding: 0;
}
.video-preview img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; }
.video-preview-play {
  position: absolute; inset: 0; display: grid; place-items: center;
  background: rgba(8, 12, 40, 0.25);
}
.video-preview-play span {
  width: 74px; height: 74px; border-radius: 50%;
  background: var(--cyan); display: grid; place-items: center;
  box-shadow: 0 10px 26px rgba(8, 20, 60, 0.35);
}
.video-preview-play svg { width: 28px; height: 28px; color: var(--navy); margin-left: 4px; }

.engineer-kit h3 { text-align: left; margin: 0 0 22px; line-height: 1.25; font-size: 26px; font-weight: 800; }
.engineer-kit ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 14px; }
.engineer-kit ul li {
  display: flex; align-items: flex-start; gap: 14px; margin: 0;
  color: var(--ink); font-size: 16px; line-height: 1.55;
  background: #fff; border: 1px solid #e4ebf3; border-radius: 14px;
  padding: 16px 18px; box-shadow: var(--shadow-soft);
}
.engineer-kit ul li b { color: var(--navy); font-weight: 800; }
.engineer-kit-icon {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 12px;
  background: rgba(0, 212, 255, 0.14); color: #0b7fa8;
  display: flex; align-items: center; justify-content: center;
}
.engineer-kit-icon svg { width: 21px; height: 21px; }
/* Homepage key attributes (26 September 2026): the same rows, two to a line on wide
   screens and one on phones. */
.key-attributes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 820px) { .key-attributes ul { grid-template-columns: minmax(0, 1fr); } }
.key-attributes-close { margin: 24px 0 0; }

@media (max-width: 980px) {
  .detection-method-section { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .detection-method-section > .engineer-kit { grid-column: 1; grid-row: auto; margin-top: 30px; }
  .detection-method-section > h2 { text-align: center; font-size: 23px; }
  .engineer-kit h3 { font-size: 22px; }
}

/* --- the advisor photograph in the homepage enquiry section ---------------- */
.advisor-photo {
  display: block; width: 230px; height: 230px; flex-shrink: 0;
  border-radius: 50%; object-fit: cover;
  border: 4px solid var(--cyan);
  box-shadow: var(--shadow-lift);
}
@media (max-width: 980px) {
  .advisor-photo { width: 118px; height: 118px; margin: 0 auto 18px; }
}

/* --- interior page hero --------------------------------------------------- */
/* The blurred backdrop is the article's ::before, spanning every hero row; the
   white card is its ::after, from the H1 row to the primary action. The backdrop
   URL stays an inline background-image on the article (the hero image hook, bg()),
   inherited by ::before. The overlay, the phone band and the desktop frame are in
   "hero photograph" below. */
main:has(> article.interior-page) { --hero-top: 40px; --hero-bottom: 40px; }
.interior-page::before {
  content: "";
  grid-column: full;
  grid-row: 1 / -1;
  background-color: var(--navy);
  background-image: inherit;
  background-size: cover;
  /* the backdrop is a blurred copy of the hero photograph (feature/hero-images), so
     it carries colour and light only and has no subject to aim at */
  background-position: center;
}
.interior-page::after {
  content: "";
  grid-column: content-start / card-end;
  grid-row: 3 / -2;
  margin-top: var(--band-gap, 0px);
  z-index: 3;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 20px;
  box-shadow: var(--shadow-card);
}
main:has(> article.interior-page) > .breadcrumb-trail { grid-row: 2; grid-column: content-start / content-end; position: relative; z-index: 4; }
.interior-page > h1 { grid-row: 3; }
.interior-page > h1 + p { grid-row: 4; }
.interior-page > h1 + p + p { grid-row: 5; }
.interior-page > .primary-action { grid-row: -3; }
/* 31px is the card's 30px padding and its 1px border */
.interior-page > :is(h1, p, .primary-action) {
  grid-column: content-start / card-end;
  margin-inline: 31px;
  position: relative;
  z-index: 4;
}
.interior-page > h1 { margin-top: calc(33px + var(--band-gap, 0px)); margin-bottom: 12px; }
.interior-page > p { color: var(--muted); font-size: 17px; margin-bottom: 0; }
.interior-page > p + p { margin-top: 14px; }
.interior-page > .primary-action { margin-bottom: 33px; }
.hero-action-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 20px; }
@media (max-width: 600px) {
  .interior-page > :is(h1, p, .primary-action) { margin-inline: 19px; }
  .interior-page > h1 { margin-top: calc(25px + var(--band-gap, 0px)); }
  .interior-page > .primary-action { margin-bottom: 25px; }
  .hero-action-buttons .call-action, .hero-action-buttons .secondary-action { width: 100%; }
}

/* --- hero photograph (feature/hero-images, carried into the semantic skeleton) ---
   Three files per page, from tools/hero_images.py; which file each rule shows is
   set per page in the head by hero_preload(), because it differs per page. On the
   skeleton's grid (main is the grid, the article display: contents) they are four
   layers, bottom to top:
   - the blurred backdrop, the article's ::before, full bleed (above);
   - the overlay, main's ::before, full bleed: it darkens the backdrop only, most
     of all behind the crumbs;
   - phone and tablet: the 3:2 band, full width directly above the card, with the
     card overlapping its foot by 30px. Its height is --hero-band, set per page for
     phones by hero_preload() so each hero stays within Peter's 900px at 390 where
     it was before;
   - the white card, the article's ::after, and above it the hero's text.
   The band and the desktop frame are one real image, img.hero-photograph in
   <picture class="hero-picture">, the last hero item in the markup (fix/photos-on-
   phones, 29 September 2026; until then the band was a CSS background on main's
   ::after and the img a transparent pixel below the desktop breakpoint, so phones
   and Google's smartphone crawler had no main image). The picture's sources carry
   the media queries: the square frame from the breakpoint up, sharp and above the
   overlay in the photo cell beside the card (right of it on inner pages, left of it
   on the homepage), exactly the card's height; the band below it, one source per
   width and density tier, the same tiers the head preloads. */
main:has(> article.interior-page)::before, main:has(> article.home-hero)::before {
  content: ""; grid-column: full; grid-row: 1 / -1; z-index: 1; pointer-events: none;
}
main:has(> article.home-hero)::before {
  background: linear-gradient(180deg, rgba(8, 12, 40, 0.28) 0%, rgba(8, 12, 40, 0.16) 45%, rgba(8, 12, 40, 0.42) 100%);
}
main:has(> article.interior-page)::before {
  /* dark enough behind the crumbs for their text, measured, then lighter below */
  background: linear-gradient(180deg, rgba(8, 12, 40, 0.74) 0, rgba(8, 12, 40, 0.74) 70px, rgba(8, 12, 40, 0.3) 150px, rgba(8, 12, 40, 0.45) 100%);
}
.hero-picture { display: contents; }
/* Chrome does not hide <source> itself once the <picture> is display: contents */
.hero-picture source { display: none; }
:is(.interior-page, .home-hero) .hero-photograph {
  /* exactly the card's height, never its own: contain: size keeps the 1000px file
     out of the row sizing, and stretch then fills the card's rows */
  display: block; contain: size; aspect-ratio: auto; align-self: stretch; justify-self: stretch;
  width: auto; height: auto; max-width: none; min-width: 0;
  object-fit: cover; object-position: center 30%;
  border-radius: 20px; background-color: var(--navy-deep); box-shadow: var(--shadow-card);
  position: relative; z-index: 3;
}
/* inner pages: the photo cell is the rest of the content width, 28px right of the
   780px card (444px at most), and 1px past the card top and bottom */
.interior-page .hero-photograph { grid-column: card-end / content-end; grid-row: 3 / -2; margin: -1px 0 -1px 28px; }
/* homepage: the 40% of the content width left of the card, less the 28px gap */
.home-hero .hero-photograph { grid-column: content-start / content-end; grid-row: 2 / 6; width: calc(40% - 28px); justify-self: start; }

/* Below the frame breakpoint the same img is the band, in exactly the box main's
   ::after used to fill: full width, directly above the card, the card overlapping
   its foot by 30px, its margins adding to nothing so it takes no height from the
   row it sits over. Cover-fitted it is drawn the full viewport wide, so 100vw / 1.5
   tall, and object-position slides it so the page's --band-focus point sits in the
   middle of the part the card leaves showing, without ever pulling an edge of the
   picture into the box (the arithmetic the background band used). No corner
   radius, shadow or navy ground: it lies on the blurred backdrop as the band did. */
@media (max-width: 1179px) {
  main:has(> article.interior-page) {
    --hero-band: 260px;
    /* the card starts the band's height plus 4px under the crumbs; the crumbs'
       row already carries their 16px */
    --band-gap: calc(var(--hero-band) - 12px);
  }
  .interior-page .hero-photograph {
    grid-column: full; grid-row: 3; align-self: start; justify-self: stretch;
    /* from 5px under the crumbs to 31px under the card's top edge. The background
       band sat 1px right of the card's outer edge (it once hung off the card's
       padding box, inside its 1px border); the img spans the full width instead, so
       the 780 file is drawn 1:1 on a 390px phone at 2x rather than resampled into
       389px, and the picture sits 1px further left than it did */
    height: calc(var(--hero-band) + 30px);
    margin: -11px 0 calc(-1 * (var(--hero-band) + 19px)) 0;
    z-index: 2; border-radius: 0; box-shadow: none; background-color: transparent;
    object-position: left clamp(calc(var(--hero-band) + 30px - 100vw / 1.5),
      calc(var(--hero-band) / 2 - var(--band-focus, 0.4) * 100vw / 1.5), 0px);
  }
  /* the band sits above this overlay, so it only has to darken the backdrop, most
     of all behind the crumbs (to 66px when they wrap to two lines) */
  main:has(> article.interior-page)::before {
    background: linear-gradient(180deg, rgba(8, 12, 40, 0.74) 0, rgba(8, 12, 40, 0.74) 72px, rgba(8, 12, 40, 0.35) 160px, rgba(8, 12, 40, 0.45) 100%);
  }
}
@media (max-width: 1100px) {
  /* the homepage band fills the top of the hero down to the card: 160px, not
     260px (28 September 2026), so the stacked hero fits a tablet's first screen;
     the manifest's focus (0.30) still keeps the engineer's cap, headset, eyes and
     beard in it at 820 and 1024 */
  main:has(> article.home-hero) { --hero-band: 160px; --hero-top: var(--hero-band); }
  /* stacked, the card is a positioned box that paints over the chips and logos
     under it, so its shadow falls across their top edge; the card (::after) comes
     later at the same level, which keeps that */
  .home-hero > :is(.trust-points, .hero-accreditation-logos, .hero-accreditation-row) { z-index: 3; }
  .home-hero .hero-photograph {
    grid-column: full; grid-row: 1; align-self: start; justify-self: stretch; width: auto;
    height: calc(var(--hero-band) + 30px);
    /* 1px down, as it sat inside the card's border before; the full width, not 1px
       in, so the 780 file is drawn 1:1 on a 390px phone at 2x */
    margin: 1px 0 calc(-1 * (var(--hero-band) + 31px)) 0;
    z-index: 2; border-radius: 0; box-shadow: none; background-color: transparent;
    object-position: left clamp(calc(var(--hero-band) + 30px - 100vw / 1.5),
      calc(var(--hero-band) / 2 - var(--band-focus, 0.4) * 100vw / 1.5), 0px);
  }
}
@media (max-width: 600px) {
  /* crumbs from 16px, so the band starts right under them */
  main:has(> article.interior-page) { --hero-top: 16px; --hero-band: 148px; }
  main:has(> article.home-hero) { --hero-band: 148px; }
}

.breadcrumb-trail { font-size: 13px; color: #cfd9f5; margin-bottom: 16px; }
.breadcrumb-trail ol { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; }
.breadcrumb-trail li { display: flex; align-items: center; gap: 8px; }
.breadcrumb-trail li + li::before { content: "/"; color: rgba(255, 255, 255, 0.4); }
.breadcrumb-trail a { color: #cfd9f5; text-decoration: none; }
.breadcrumb-trail a:hover { color: #fff; text-decoration: underline; }
.breadcrumb-trail [aria-current] { color: #fff; }

/* --- generic cards and grids --------------------------------------------- */
/* The small bordered notes: local examples, the areas page's two coverage notes,
   the about page's figures, the contact page's urgent-leak note and the
   thank-you page's three tips */
:is(.local-example-note, .coverage-note, .company-figure, .urgent-leak-note, .preparation-tip) {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 24px 22px;
  box-shadow: var(--shadow-soft);
}
:is(.local-example-note, .coverage-note, .company-figure, .urgent-leak-note, .preparation-tip) h3 { margin-bottom: 10px; }
:is(.local-example-note, .coverage-note, .company-figure, .urgent-leak-note, .preparation-tip) p { color: var(--muted); font-size: 15px; }

/* two across, or three for the thank-you tips */
.coverage-notes, .company-figures, .intro-sections-layout { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.preparation-tips { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .preparation-tips { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .coverage-notes, .company-figures, .intro-sections-layout, .preparation-tips { grid-template-columns: minmax(0, 1fr); } }

/* --- service cards (Part 2 of the semantic site builder MD) ---------------
   The photograph, the service as an H3 whose link covers the whole card (so the
   card still clicks through and the heading is not wrapped in a link), the
   verbalisation, then methods as label and value rows. */
.service-type-overview { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .service-type-overview { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .service-type-overview { grid-template-columns: minmax(0, 1fr); } }
.service-card {
  position: relative;
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; padding: 0 20px 22px;
  box-shadow: var(--shadow-soft);
  transition: transform 0.2s ease, box-shadow 0.25s ease;
}
.service-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lift); }
.service-card:has(h3 a:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.service-card h3 a:focus-visible { outline: none; }
img.service-card-photo {
  width: calc(100% + 40px); max-width: none; margin: 0 -20px 20px;
  aspect-ratio: 3 / 2; object-fit: cover; background: var(--navy);
}
.service-card h3 { font-size: 19px; margin-bottom: 8px; }
.service-card h3 a { color: inherit; text-decoration: none; }
.service-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.service-card > p { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.service-card-facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 14px;
  margin: 0 0 14px; font-size: 14px; align-items: baseline;
}
.service-card-facts dt { color: var(--muted); }
.service-card-facts dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; }
.service-card-more {
  margin-top: auto; display: flex; align-items: center; justify-content: flex-end; gap: 6px;
  padding-top: 12px; border-top: 1px solid var(--line-soft);
  font-size: 14px; font-weight: 800; color: var(--orange-text);
}
.service-card-more svg { width: 15px; height: 15px; }

/* tick lists */
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; font-size: 16px; }
.checklist li i { color: var(--navy); margin-top: 3px; font-style: normal; }
.checklist li i svg { width: 16px; height: 16px; }
.tone-navy .checklist li i { color: var(--cyan); }

/* steps */
.procedure-steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.procedure-steps--five { grid-template-columns: repeat(6, minmax(0, 1fr)); }
.procedure-steps--five > * { grid-column: span 2; }
.procedure-steps--five > :nth-child(4), .procedure-steps--five > :nth-child(5) { grid-column: span 3; }
.procedure-step {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: 16px; padding: 24px 20px 22px; box-shadow: var(--shadow-soft);
}
.procedure-step-number {
  width: 34px; height: 34px; border-radius: 10px;
  background: rgba(0, 212, 255, 0.16); color: var(--navy);
  display: grid; place-items: center; font-weight: 900; font-size: 15px;
  margin-bottom: 12px;
}
.procedure-step h3 { font-size: 18px; margin-bottom: 8px; }
.procedure-step p { font-size: 14.5px; color: var(--muted); }
.tone-navy .procedure-step { background: rgba(255, 255, 255, 0.05); border-color: rgba(255, 255, 255, 0.16); }
.tone-navy .procedure-step p { color: #d5ddf5; }
.tone-navy .procedure-step-number { background: rgba(0, 212, 255, 0.2); color: #fff; }
@media (max-width: 980px) {
  .procedure-steps, .procedure-steps--five { grid-template-columns: minmax(0, 1fr); }
  .procedure-steps--five > *, .procedure-steps--five > :nth-child(4), .procedure-steps--five > :nth-child(5) { grid-column: auto; }
}

/* split image + copy: the photograph spans every row of the first column and the
   H2, its paragraph and the rest of the copy sit in the second, between two 1fr
   rows that centre the copy against the photograph as align-items did */
.photo-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: 1fr auto auto auto 1fr;
  column-gap: 44px;
}
.photo-split > * { grid-column: 2; }
.photo-split > h2 { grid-row: 2; margin-bottom: 0; }
.photo-split > h2 + p { grid-row: 3; }
.photo-split > .photo-split-rest { grid-row: 4; }
img.photo-split-image {
  grid-column: 1; grid-row: 1 / -1; align-self: center;
  width: 100%; border-radius: 16px; box-shadow: var(--shadow-lift);
  max-height: 520px; object-fit: cover; object-position: center 28%;
}
@media (max-width: 980px) {
  .photo-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .photo-split > *, img.photo-split-image { grid-column: 1; grid-row: auto; }
  img.photo-split-image { margin-bottom: 28px; }
}

/* --- tables --------------------------------------------------------------- */
.data-table-scroll {
  --scroll-bg: #fff;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line);
  border-radius: 16px;
  background-color: var(--scroll-bg);
  background-image:
    linear-gradient(to right, var(--scroll-bg) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to left, var(--scroll-bg) 30%, rgba(255, 255, 255, 0)),
    linear-gradient(to right, rgba(6, 10, 35, 0.22), rgba(6, 10, 35, 0)),
    linear-gradient(to left, rgba(6, 10, 35, 0.22), rgba(6, 10, 35, 0));
  background-position: 0 0, 100% 0, 0 0, 100% 0;
  background-repeat: no-repeat;
  background-size: 36px 100%, 36px 100%, 16px 100%, 16px 100%;
  background-attachment: local, local, scroll, scroll;
  box-shadow: var(--shadow-soft);
}
.tone-navy .data-table-scroll {
  --scroll-bg: #161c46;
  border-color: rgba(255, 255, 255, 0.16);
  background-image:
    linear-gradient(to right, var(--scroll-bg) 30%, rgba(22, 28, 70, 0)),
    linear-gradient(to left, var(--scroll-bg) 30%, rgba(22, 28, 70, 0)),
    linear-gradient(to right, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0)),
    linear-gradient(to left, rgba(0, 0, 0, 0.45), rgba(0, 0, 0, 0));
}
table.data-table { width: 100%; border-collapse: collapse; font-size: 15px; min-width: 520px; }
table.data-table caption {
  text-align: left; padding: 16px 20px; font-weight: 700;
  color: var(--muted); border-bottom: 1px solid var(--line);
}
table.data-table th, table.data-table td {
  text-align: left; padding: 14px 20px; vertical-align: top;
  border-bottom: 1px solid var(--line);
}
table.data-table thead th {
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--navy); font-weight: 800; background: var(--light);
}
table.data-table tbody th { font-weight: 700; color: var(--navy); width: 30%; }
table.data-table tr:last-child th, table.data-table tr:last-child td { border-bottom: 0; }
.tone-navy table.data-table caption { color: #cfd9f5; border-color: rgba(255, 255, 255, 0.16); }
.tone-navy table.data-table thead th { background: rgba(255, 255, 255, 0.08); color: var(--cyan); }
.tone-navy table.data-table th { color: #fff; }
.tone-navy table.data-table td { color: #d5ddf5; }
.tone-navy table.data-table th, .tone-navy table.data-table td { border-color: rgba(255, 255, 255, 0.16); }

/* On a phone the 520px floor was wider than the card, so the table scrolled AND the
   caption, which is part of the table box, was laid out 520px wide and cut at the
   card edge: "quoted be" ... "booked", with the middle hidden and the No Find No Fee
   column off screen with nothing to say so. Three short columns do not need 520px,
   so below 700 the floor comes off and the cells wrap instead. This sits BEFORE the
   table.symptom-router block, which keeps its own stacked-card layout at the same width. */
@media (max-width: 700px) {
  table.data-table { min-width: 0; font-size: 14px; }
  table.data-table caption { padding: 12px 14px; font-size: 13.5px; line-height: 1.4; }
  table.data-table th, table.data-table td { padding: 10px 11px; }
  table.data-table thead th { font-size: 11px; letter-spacing: 0.05em; }
  /* 30% of a 340px card is not enough for a service name, so the column takes
     what it needs and the others wrap around it */
  table.data-table tbody th { width: auto; }
}
@media (max-width: 420px) {
  table.data-table { font-size: 13.5px; }
  table.data-table th, table.data-table td { padding: 9px 8px; }
}

/* --- accreditations inside the hero --------------------------------------- */
/* The strip sits in the hero under the chips, on the photograph, with no ground,
   border or padding of its own beyond the gap above it. */
.home-hero > .hero-accreditation-logos { margin-top: 10px; }
.hero-accreditation-logos.accreditation-tiles { gap: 10px; }
.hero-accreditation-logos .accreditation-tile-link { padding: 8px 10px; border-radius: 10px; }
.hero-accreditation-logos .accreditation-tile-link img { height: 42px; max-width: 76%; }
.hero-accreditation-logos .accreditation-tile-link img.logo-small { height: 40px; }
/* sized by shape so every mark carries a similar weight (27 September 2026) */
.hero-accreditation-logos .accreditation-tile-link img.logo-wide { height: 31px; max-width: 86%; }
.hero-accreditation-logos .accreditation-tile-link img.logo-medium { height: 37px; max-width: 86%; }
.hero-accreditation-logos .accreditation-tile-link img.logo-square { height: 48px; }

/* the phone row: five small logos, the footer's pattern, so the hero grows by a
   line rather than by a grid */
.hero-accreditation-row { display: none; }
@media (max-width: 700px) {
  .hero-accreditation-logos { display: none; }
  .hero-accreditation-row {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    list-style: none;
    margin: 10px 0 0;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.94);
    border-radius: 12px;
  }
  .hero-accreditation-row li { flex: 0 1 auto; min-width: 0; }
  .hero-accreditation-row img { height: 26px; width: auto; max-width: 100%; object-fit: contain; }
  .hero-accreditation-row img.logo-wide { height: 20px; }
  .hero-accreditation-row img.logo-medium { height: 24px; }
  .hero-accreditation-row img.logo-square { height: 32px; }
}

/* --- accreditations section (Part 2 of the semantic site builder MD) ------
   Each scheme a card: its logo on a white tile down the left, then its short name
   as the H3, its description, and the scheme's full name and status as a dl. */
.accreditation-list { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 12px; }
.accreditation-entry {
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  column-gap: 18px;
  align-items: start;
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 14px 18px;
}
.accreditation-entry > :not(.accreditation-entry-mark) { grid-column: 2; }
.accreditation-entry-mark {
  grid-column: 1; grid-row: 1 / span 3; align-self: center;
  width: 100%; height: 46px; object-fit: contain;
  background: #fff; border-radius: 8px; padding: 6px;
}
.accreditation-entry-mark--small { padding: 7px 6px; }
.accreditation-entry h3 { font-size: 16px; margin: 0 0 4px; color: var(--navy); }
.accreditation-entry > p { font-size: 15px; line-height: 1.5; color: var(--ink); margin: 0 0 8px; }
.accreditation-entry-facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px;
  margin: 0; font-size: 13.5px; line-height: 1.45;
}
.accreditation-entry-facts dt { color: var(--muted); }
.accreditation-entry-facts dd { margin: 0; color: var(--ink); }

@media (max-width: 600px) {
  .accreditation-entry { grid-template-columns: 72px minmax(0, 1fr); column-gap: 12px; padding: 12px 14px; }
  .accreditation-entry-mark { height: 40px; }
  .accreditation-entry > p { font-size: 14.5px; }
  .accreditation-entry-facts { grid-template-columns: minmax(0, 1fr); }
  .accreditation-entry-facts dd + dt { margin-top: 4px; }
}

/* the hero tiles are links now, not flip cards: same box, no back face. The
   height was coming from the back face's text, so it was stated explicitly here
   (120px) to keep the hero exactly as tall as it was. On 28 September 2026 it
   became 64px: the tallest mark (SPATA, 48px) and 8px either side. At 120px the
   tiles were the hero's deepest row, and the reason it ran past the first screen
   of a 13in laptop; from 701 to 1100px the five now sit on one row, where they
   took two. */
.hero-accreditation-logos .accreditation-tile-link { min-height: 64px; }
@media (min-width: 701px) and (max-width: 1100px) {
  .hero-accreditation-logos.accreditation-tiles { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* --- engineer strip (Part 2 of the semantic site builder MD) --------------
   A card per engineer: the face (a 4:3 file cover-cropped into a circle, never
   squashed), the name as the H3, one sentence on where he covers Sheffield from,
   then base, leak detection experience and jobs completed as a dl. */
.engineer-strip-list {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 22px;
}
.engineer-card {
  background: var(--light);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 18px 18px 20px;
  text-align: center;
}
.engineer-card-face {
  width: 116px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center 22%;
  border-radius: 50%;
  margin: 0 auto 12px;
  background: #fff;
}
.engineer-card h3 { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--navy); }
.engineer-card h3 a { text-decoration: none; }
.engineer-card h3 a:hover { text-decoration: underline; }
.engineer-card > p { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }
.engineer-card-facts {
  display: grid; grid-template-columns: auto auto; justify-content: center;
  gap: 4px 8px; margin: 0; font-size: 14.5px;
}
.engineer-card-facts dt { color: var(--muted); text-align: right; }
.engineer-card-facts dd { margin: 0; color: var(--navy); font-weight: 800; text-align: left; }

@media (max-width: 700px) {
  /* two across, then the third on its own row, rather than three cramped columns */
  .engineer-strip-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
  .engineer-card:last-child { grid-column: 1 / -1; }
  .engineer-card { padding: 14px 12px 16px; }
  .engineer-card-face { width: 92px; }
  .engineer-card > p, .engineer-card-facts { font-size: 14px; }
}
@media (max-width: 420px) {
  .engineer-strip-list { grid-template-columns: minmax(0, 1fr); }
  .engineer-card:last-child { grid-column: auto; }
  .engineer-card-face { width: 104px; }
}

/* --- FAQ ------------------------------------------------------------------ */
.faq-list { border-top: 1px solid var(--line); }
.faq-list details { border-bottom: 1px solid var(--line); }
.faq-list summary {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 20px;
  padding: 18px 0; cursor: pointer; list-style: none;
  font-weight: 800; font-size: 17px; color: var(--navy); line-height: 1.35;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
  content: "+"; flex: none; color: #0b7fa8;
  font-size: 26px; line-height: 1; font-weight: 700;
  transition: transform 0.2s ease;
}
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details > div { padding-bottom: 18px; max-width: 74ch; }
.faq-list details > div p { font-size: 15px; color: var(--muted); }
.tone-navy .faq-list, .tone-navy .faq-list details { border-color: rgba(255, 255, 255, 0.16); }
.tone-navy .faq-list summary { color: #fff; }
.tone-navy .faq-list summary::after { color: var(--cyan); }
.tone-navy .faq-list details > div p { color: #d5ddf5; }

/* --- form ----------------------------------------------------------------- */
.enquiry-form {
  background: #fff; border: 1px solid var(--line); border-radius: 20px;
  padding: 28px 26px; box-shadow: var(--shadow-card);
}
.enquiry-form h2, .enquiry-form h3 { margin-bottom: 6px; font-size: 24px; color: var(--navy); }
.enquiry-form > p { color: var(--muted); font-size: 15px; margin-bottom: 18px; }
.enquiry-form-field { margin-bottom: 14px; }
.enquiry-form-field label { display: block; font-size: 13px; font-weight: 800; color: var(--navy); margin-bottom: 6px; }
.enquiry-form-field input, .enquiry-form-field select {
  width: 100%; font: 400 16px/1.4 var(--body); color: var(--ink);
  background: var(--light); border: 1px solid var(--line);
  border-radius: 12px; padding: 13px 14px;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}
.enquiry-form-field input::placeholder { color: #8b94a7; }
.enquiry-form-field input:hover, .enquiry-form-field select:hover { border-color: #c3ccd9; }
.enquiry-form-field input:focus, .enquiry-form-field select:focus { background: #fff; border-color: var(--navy); }
.enquiry-form-field select {
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%234b5563' stroke-width='1.8'%3E%3Cpath d='M4 6l4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; background-size: 16px;
  padding-right: 40px;
}
.enquiry-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 520px) { .enquiry-form-pair { grid-template-columns: minmax(0, 1fr); gap: 0; } }
.enquiry-form-note { margin-top: 14px; font-size: 13px; color: var(--muted); line-height: 1.5; }
/* The honeypot field process.php checks: a visitor never sees it, a bot fills it. */
.enquiry-form-trap { display: none; }
.enquiry-form-note a { color: var(--navy); font-weight: 700; }
.tone-navy .enquiry-form p, .tone-navy .enquiry-form label { color: var(--muted); }
.tone-navy .enquiry-form label { color: var(--navy); }
.tone-navy .enquiry-form h2, .tone-navy .enquiry-form h3 { color: var(--navy); }

/* The quote band's H2 and copy run down the first column; the form spans every
   row of the second, down to a 1fr row that takes any height the form has over
   the copy, so the copy's own spacing never opens up. */
.enquiry-section {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  grid-template-rows: repeat(6, auto) 1fr;
  column-gap: 44px; align-items: start;
}
.enquiry-section > * { grid-column: 1; }
.enquiry-section > h2 { margin-bottom: 0; }
/* the copy's last paragraph was its column's last child, so it had no bottom margin */
.enquiry-section > :has(+ .enquiry-form) { margin-bottom: 0; }
.enquiry-section > .enquiry-form { grid-column: 2; grid-row: 1 / -1; }
@media (max-width: 980px) {
  .enquiry-section { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .enquiry-section > .enquiry-form { grid-column: 1; grid-row: auto; margin-top: 44px; }
}

/* --- chips ---------------------------------------------------------------- */
.area-chips { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.area-chips li {
  font-size: 14px; font-weight: 600; padding: 8px 14px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px; color: var(--ink);
  box-shadow: var(--shadow-soft);
}
.area-chips li b { color: var(--navy); font-weight: 800; }
.district-group + .district-group { margin-top: 34px; }
.district-group h3 { margin-bottom: 4px; }
.district-group > p { font-size: 15px; color: var(--muted); margin-bottom: 14px; }

/* --- related -------------------------------------------------------------- */
.related-services { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 800px) { .related-services { grid-template-columns: minmax(0, 1fr); } }
.related-services a {
  background: #fff; border: 1px solid var(--line); border-radius: 14px;
  padding: 16px 18px; text-decoration: none; color: inherit;
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  font-weight: 700; font-size: 15px; box-shadow: var(--shadow-soft);
}
.related-services a:hover { border-color: var(--navy); }
.related-services svg { width: 16px; height: 16px; color: var(--orange-text); flex: none; }

/* --- prose ---------------------------------------------------------------- */
.policy-text > section > h2 { font-size: 22px; margin: 34px 0 12px; }
.policy-text p, .policy-text li { font-size: 16px; color: var(--ink); }
.policy-text ul { padding-left: 20px; margin: 0 0 16px; }
.policy-text li { margin-bottom: 8px; }
.policy-text address { font-style: normal; margin-bottom: 16px; }

/* --- the sitemap (feature/html-sitemap) ------------------------------------
   Each group is a band of link tiles in the related-services tile's language.
   Three to a row, two from 980px, one from 600px. No tile is left alone in a
   row: a group of exactly four takes four to a row on a wide screen, and a last
   tile that would sit on its own spans the row. A page's children (the case
   studies under their index) sit in an indented list beneath its tile, one step
   lighter in weight, so the nesting reads at a glance. */
.sitemap-links, .sitemap-child-links {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px;
}
.sitemap-links a {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  height: 100%; padding: 16px 18px;
  background: #fff; border: 1px solid var(--line); border-radius: 14px; box-shadow: var(--shadow-soft);
  color: var(--navy); font-weight: 700; font-size: 15.5px; line-height: 1.4; text-decoration: none;
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.sitemap-links a:hover { transform: translateY(-2px); border-color: var(--navy); }
.sitemap-links svg { width: 16px; height: 16px; color: var(--orange-text); flex: none; }
.sitemap-links > li:has(> .sitemap-child-links) { grid-column: 1 / -1; display: grid; gap: 14px; }
.sitemap-links > li:has(> .sitemap-child-links) > a { height: auto; }
.sitemap-child-links { padding-left: 28px; }
.sitemap-child-links a { font-weight: 600; font-size: 15px; color: var(--ink); }
@media (min-width: 981px) {
  :is(.sitemap-links, .sitemap-child-links):has(> li:nth-child(4):last-child) { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  :is(.sitemap-links, .sitemap-child-links) > li:last-child:nth-child(3n+1):not(:nth-child(4)) { grid-column: 1 / -1; }
}
@media (max-width: 980px) {
  .sitemap-links, .sitemap-child-links { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  :is(.sitemap-links, .sitemap-child-links) > li:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 600px) {
  .sitemap-links, .sitemap-child-links { grid-template-columns: minmax(0, 1fr); gap: 10px; }
  .sitemap-links > li:has(> .sitemap-child-links) { gap: 10px; }
  .sitemap-child-links { padding-left: 20px; }
}

/* --- footer --------------------------------------------------------------- */
.company-details-footer {
  background: var(--navy-deep); color: #fff;
  padding: 48px var(--page-inset) 30px; border-top: 4px solid var(--cyan);
}
/* scoped to the footer so it outranks the logo list's phone rules, as the old
   footer selector did */
.company-details-footer .footer-accreditations { justify-content: space-between; margin-bottom: 34px; }
.company-details-footer .footer-accreditations img {
  height: clamp(28px, 3.9vw, 50px); background: #fff;
  padding: clamp(4px, 0.6vw, 8px) clamp(6px, 0.9vw, 12px); border-radius: 10px;
}
.footer-summary {
  display: flex; align-items: center; justify-content: space-between;
  gap: 28px; flex-wrap: wrap;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 28px; width: 100%;
}
.footer-summary > * { padding: 0 15px; }
.footer-text p { margin: 0; text-align: center; color: #d5ddf5; font-size: 16px; max-width: 460px; }
.footer-logo img { height: 56px; width: auto; }
/* the white panel moves from the image to the widget: a light TrustBox needs a
   light ground to stay legible on the navy footer */
.footer-rating .footer-rating-widget {
  width: 200px; background: #fff; padding: 6px 12px; border-radius: 10px;
  min-height: 58px;
}
.footer-rating-widget > .trustpilot-fallback { height: 46px; justify-content: center; }
.footer-nav {
  display: flex; flex-wrap: wrap; gap: 10px 26px; justify-content: center;
  list-style: none; margin: 26px 0 0; padding: 0;
}
.footer-nav a { color: #cdd6f6; text-decoration: none; font-size: 14.5px; }
.footer-nav a:hover { color: #fff; text-decoration: underline; }
.footer-legal { margin: 26px 0 0; text-align: center; font-size: 13px; color: #aab4dd; }
.footer-legal a { color: var(--cyan); text-decoration: underline; text-underline-offset: 2px; white-space: nowrap; }

@media (max-width: 980px) {
  .footer-summary { flex-direction: column; text-align: center; }
  .footer-summary > * { width: 100%; padding: 0; }
  .footer-rating .footer-rating-widget { width: 230px; padding: 10px 14px; border-radius: 12px; min-height: 66px; }
  .footer-legal { font-size: 11px; line-height: 1.5; }
}

/* --- sticky mobile call bar ----------------------------------------------- */
#sticky-call-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 95;
  display: none; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  background: rgba(16, 20, 58, 0.97);
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  transform: translateY(110%); transition: transform 0.2s ease;
}
#sticky-call-bar[data-show="true"] { transform: translateY(0); }
#sticky-call-bar a {
  display: block; text-align: center; text-decoration: none;
  background: linear-gradient(180deg, var(--orange) 0%, var(--orange-2) 100%);
  color: var(--navy); font-weight: 900; font-size: 17px;
  padding: 14px 16px; border-radius: 14px; box-shadow: var(--cta-shadow);
}
/* the header pill's handset, as on the hero call buttons (27 September 2026) */
#sticky-call-bar a svg { display: inline-block; width: 18px; height: 18px; margin-right: 10px; vertical-align: -3px; }
@media (max-width: 820px) { #sticky-call-bar { display: block; } body { padding-bottom: 76px; } }

/* --- centrepiece (thank you, 404) ----------------------------------------- */
main:has(> article.notice-page) { --hero-top: 64px; --hero-bottom: 64px; }
.notice-page::before {
  content: ""; grid-column: full; grid-row: 1 / -1;
  background: linear-gradient(180deg, #ffffff 0%, #eef3f9 100%);
}
.notice-page > :is(h1, p, .primary-action) { grid-column: content-start / content-end; position: relative; z-index: 1; }
.notice-page > h1 { grid-row: 2; margin-bottom: 14px; max-width: 22ch; }
.notice-page > h1 + p { grid-row: 3; }
.notice-page > h1 + p + p { grid-row: 4; }
.notice-page > .primary-action { grid-row: -3; }
.notice-page > p { max-width: 62ch; font-size: 17px; margin-bottom: 0; }
.notice-page > p + p { margin-top: 14px; }
.notice-action-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }

/* stat cards on the about page, in the LP card language */
.company-figures { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.company-figure { text-align: center; }
.company-figure-value { font-size: 40px; font-weight: 900; color: var(--navy); line-height: 1; letter-spacing: -1px; margin-bottom: 10px; }
@media (max-width: 980px) { .company-figures { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .company-figures { grid-template-columns: minmax(0, 1fr); } }

.rating-panel-link { margin-top: 18px; }
.rating-panel-link .call-action { font-size: 16px; padding: 14px 26px; }

/* --- the real engineers --------------------------------------------------- */
.engineer-profiles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
@media (max-width: 980px) { .engineer-profiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .engineer-profiles { grid-template-columns: minmax(0, 1fr); } }
.engineer-profile {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  overflow: hidden; box-shadow: var(--shadow-soft);
}
.engineer-profile-photo {
  width: 100%; aspect-ratio: 1 / 1; object-fit: cover; object-position: center 22%;
  background: var(--light);
}
.engineer-profile-details { padding: 20px 20px 22px; display: flex; flex-direction: column; flex: 1; }
.engineer-profile-name { font-size: 20px; margin-bottom: 8px; }
.engineer-profile-experience { font-size: 14.5px; color: var(--muted); margin-bottom: 14px; }
.engineer-profile-quals { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 8px; }
.engineer-profile-quals li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; align-items: start; }
.engineer-profile-quals li i { color: var(--navy); font-style: normal; margin-top: 2px; }
.engineer-profile-quals li i svg { width: 14px; height: 14px; }
.engineer-profile-fact { font-size: 14px; color: var(--muted); font-style: italic; margin-bottom: 14px; }
.engineer-profile-stats {
  margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line-soft);
  font-size: 13.5px; color: var(--muted);
}
.engineer-profile-stats b { color: var(--navy); font-weight: 800; }

/* --- case study cards (Part 2 of the semantic site builder MD) ------------
   The job's photographs, its H3, one sentence on who attended what and when,
   then postcode sector, leak type, engineer and outcome as label and value rows,
   the services as chips, and the link to the full write-up. */
.case-study-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .case-study-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .case-study-list { grid-template-columns: minmax(0, 1fr); } }
.case-study-card {
  background: #fff; border: 1px solid var(--line); border-radius: 16px;
  padding: 20px; box-shadow: var(--shadow-soft);
  display: flex; flex-direction: column;
}
.case-study-card h3 { font-size: 19px; margin-bottom: 8px; }
.case-study-card > p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.5; color: var(--ink); }
.case-study-card-facts {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 14px;
  margin: 0 0 14px; font-size: 14px; align-items: baseline;
}
.case-study-card-facts dt { color: var(--muted); }
.case-study-card-facts dd { margin: 0; color: var(--navy); font-weight: 700; text-align: right; }
.case-study-card-services { list-style: none; margin: auto 0 0; padding: 12px 0 0; border-top: 1px solid var(--line-soft); display: flex; flex-wrap: wrap; gap: 6px; }
.case-study-card-services li {
  font-size: 12.5px; font-weight: 700; padding: 5px 10px;
  background: var(--sky-pale); color: #0b5f7d;
  border: 1px solid rgba(0, 212, 255, 0.35); border-radius: 999px;
}
.case-study-card-photos { display: flex; gap: 8px; margin-bottom: 16px; }
.case-study-card-photos img {
  width: 100%; flex: 1 1 0; min-width: 0;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 10px; background: var(--light);
}
.case-study-card-more {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start;
  margin-top: 14px; font-size: 14px; font-weight: 800;
  color: var(--orange-text); text-decoration: none;
}
.case-study-card-more svg { width: 15px; height: 15px; }
.case-study-card-more:hover { text-decoration: underline; }

/* --- real named reviews --------------------------------------------------- */
.review-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 26px; }
@media (max-width: 980px) { .review-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 700px) { .review-list { grid-template-columns: minmax(0, 1fr); } }
.rating-panel--wide { text-align: center; }
.rating-panel--wide .rating-panel-meta { text-align: left; }

/* the team photograph on the contact page: shown whole, not behind a card */
.team-photo { margin: 22px 0 0; }
.team-photo img { width: 100%; border-radius: 16px; box-shadow: var(--shadow-lift); }
.team-photo figcaption { margin-top: 10px; font-size: 13.5px; color: var(--muted); }

/* Contact image and urgent advice share a row only when both have room. */
.contact-team-advice {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 22px;
  align-items: start;
  margin-top: 22px;
}
.contact-team-advice > .team-photo { margin: 0; }

/* The company-details lead uses the full band measure; phones wrap normally. */
#glance-heading + .heading-lede { max-width: none; }

/* The Areas enquiry keeps its lead direct, with a country-wide map alongside. */
#uk-coverage-map iframe { height: 360px; min-height: 0; aspect-ratio: auto; }
@media (min-width: 1200px) {
  #quote:has(> #quote-heading-areas) {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 480px);
    grid-template-rows: auto 1fr;
    gap: 18px 22px;
  }
  #quote-heading-areas { grid-column: 1 / 3; }
  #quote-heading-areas + p { grid-column: 1; grid-row: 2; margin: 0; }
  #uk-coverage-map { grid-column: 2; grid-row: 2; margin: 0; }
  #quote:has(> #quote-heading-areas) > .enquiry-form { grid-column: 3; grid-row: 1 / -1; }
}

/* --- real job photographs -------------------------------------------------- */
.job-photo-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
}
@media (max-width: 980px) { .job-photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .job-photo-grid { grid-template-columns: minmax(0, 1fr); } }
.job-photo { margin: 0; }
.job-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 14px; background: var(--light);
  box-shadow: var(--shadow-soft);
}
.job-photo figcaption {
  margin-top: 10px; font-size: 13.5px; line-height: 1.5; color: var(--muted);
}

/* --- trust chips inside the hero ------------------------------------------
   The four trust points sit under the two cards rather than in a strip above
   the hero, two rows on desktop. Each is a solid light pill with navy type, so
   the contrast holds wherever the photograph behind it is dark or busy, rather
   than depending on the scrim. */
.trust-points {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  /* one row with a single card in the hero: two rows existed to fit beside two */
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px 16px;
}
.trust-point {
  /* hugs its label rather than filling the grid track. A flat feature badge, not
     a pill (27 September 2026): no border, shadow or round checkbox, which made
     the three read as toggles; the solid light ground stays for contrast on the
     photograph */
  justify-self: start;
  display: flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 255, 255, 0.94);
  border-radius: 6px;
  padding: 8px 14px 8px 12px;
  color: var(--navy);
  font-weight: 600;
  font-size: 15.5px;
  line-height: 1.3;
}
.trust-point i {
  flex: none;
  color: #0b7fa8;
  display: flex; align-items: center; justify-content: center;
  font-style: normal;
}
.trust-point i svg { width: 15px; height: 15px; }
.trust-point span { min-width: 0; }

/* Above 1100 each pill takes the width its own label needs, rather than a quarter
   of the row: four equal tracks left two of the four labels wrapping while the
   others sat on one line, which reads as uneven. Flex rather than repeat(4, auto)
   because when the four no longer fit, flex wraps WHOLE pills onto a second row
   instead of squeezing every track at once. Below 1100 the grid is untouched, so
   the two-up and phone layouts are exactly as they were. */
@media (min-width: 1101px) {
  .trust-points {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 12px 16px;
  }
}

@media (max-width: 1100px) {
  .trust-points { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; }
  .trust-point { font-size: 15px; padding: 9px 14px 9px 10px; }
}
/* the three badges fit one row from 901px (28 September 2026), as above 1100 */
@media (min-width: 901px) and (max-width: 1100px) {
  .trust-points { display: flex; flex-wrap: wrap; justify-content: space-between; }
}
@media (max-width: 600px) {
  /* one per row on a phone: two would force each label to wrap or clip */
  .trust-points { grid-template-columns: minmax(0, 1fr); gap: 8px; margin-top: 12px; }
  .trust-point { font-size: 15.5px; }
}

/* --- symptom router (WP6) --------------------------------------------------
   New component, scoped to .symptom-router so it cannot touch anything the LP already
   draws. On a phone the three columns will not fit, and the column that matters
   most is the last one, the link to the investigation. A side-scrolling table
   hides exactly that, so below 700px each row becomes a card with its own
   labels. Above 700px it is the same data table as everywhere else on the site.
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  .data-table-scroll:has(.symptom-router) { overflow-x: visible; }
  table.symptom-router, table.symptom-router tbody, table.symptom-router tr, table.symptom-router th, table.symptom-router td { display: block; }
  table.symptom-router { min-width: 0; width: 100%; }
  table.symptom-router tbody th { width: auto; }
  table.symptom-router thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  table.symptom-router tr {
    border: 1px solid var(--line, #e2e6ef);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 12px;
    background: #fff;
  }
  table.symptom-router th, table.symptom-router td { border: 0; padding: 4px 0; width: auto; }
  table.symptom-router td::before, table.symptom-router th::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--muted, #5b6478);
    margin-bottom: 2px;
  }
}

/* Four review cards sit two by two rather than three and an orphan. Scoped to the
   modifier, so the three-card grids everywhere else are untouched. */
@media (min-width: 981px) {
  .review-list--pairs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- case study pages: story template (feature/case-study-story) ----------
   Appended rather than folded into the recorded-jobs block above, so the
   accreditation lane's edits elsewhere in this file merge cleanly. */
.interior-page--case::before { background-position: center 50%; }

/* the story bands sit a little closer together on a phone */
.job-story-section { padding-block: 48px; }
.job-story-section > p:not(.heading-lede) { max-width: 75ch; }
.job-story-section > h2 { margin-bottom: 24px; }
.job-story-section > h2:has(+ .heading-lede) { margin-bottom: 10px; }
.job-story-section > .heading-lede { margin-bottom: 24px; }
@media (max-width: 700px) {
  .job-story-section { padding-block: 40px; }
  .job-story-section > h2, .job-story-section > .heading-lede { margin-bottom: 22px; }
  .job-story-section > h2:has(+ .heading-lede) { margin-bottom: 10px; }
}

/* the job at a glance, directly under the hero */
.job-facts-section, .job-story-section.job-facts-section { padding-block: 24px; border-bottom: 1px solid var(--line-soft); }
.job-facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px 28px; margin: 0; }
.job-fact { min-width: 0; }
.job-fact--wide { grid-column: span 2; }
.job-fact:last-child { grid-column: 1 / -1; }
.job-facts dt { font-size: 13px; color: var(--muted); margin-bottom: 3px; }
.job-facts dd { margin: 0; font-size: 15.5px; font-weight: 700; color: var(--navy); line-height: 1.45; overflow-wrap: anywhere; }
.job-facts dd a { color: var(--navy); }
.job-fact-source { display: inline-block; margin-left: 10px; font-weight: 400; font-size: 14.5px; }
@media (max-width: 980px) {
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .job-fact--wide { grid-column: 1 / -1; }
}
@media (max-width: 560px) {
  .job-facts { gap: 14px 18px; }
  .job-fact-source { display: block; margin: 4px 0 0; }
}

/* the recorded timeline: numbered steps, each photograph beside its step.
   Two steps to a row on a wide screen and a small photograph beside the text,
   so the whole record reads in less height than the old photo grid took; each
   photograph opens full size. */
.job-timeline { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.job-timeline-step {
  display: grid; grid-template-columns: minmax(0, 1fr) 168px; gap: 16px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 18px;
  box-shadow: var(--shadow-soft);
}
.job-timeline-step--text { grid-template-columns: minmax(0, 1fr); }
.job-timeline-title { display: flex; align-items: center; gap: 10px; font-size: 17px; margin-bottom: 6px; }
.job-timeline-number {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center; background: var(--navy); color: #fff;
  font-size: 14px; font-weight: 800;
}
.job-timeline-text p { margin: 0 0 0 38px; font-size: 15px; line-height: 1.55; }
.job-timeline-photo { margin: 0; }
.job-timeline-photo a { display: block; }
.job-timeline-photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block;
  border-radius: 10px; background: var(--light);
}
.job-timeline-photo figcaption { margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: var(--muted); }
@media (max-width: 1100px) { .job-timeline { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 560px) {
  .job-timeline { gap: 12px; }
  .job-timeline-step { grid-template-columns: minmax(0, 1fr) 112px; gap: 12px; padding: 14px; }
  .job-timeline-step--text { grid-template-columns: minmax(0, 1fr); }
  .job-timeline-text p { margin-left: 0; font-size: 14.5px; }
  .job-timeline-title { font-size: 16px; align-items: flex-start; }
}

/* the photographs with no step of their own, and the damage before work */
.job-photo-grid--case { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 24px; }
.job-photo-grid--case .job-photo a { display: block; }
.job-photo-grid--case .job-photo img { border-radius: 10px; }
.job-photo-grid--case figcaption { font-size: 12.5px; margin-top: 6px; line-height: 1.4; }
@media (max-width: 640px) { .job-photo-grid--case { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } }
.job-closing-note { margin: 22px 0 0; max-width: 70ch; }
.job-timeline + .job-closing-note { margin-top: 22px; }

/* the engineer who attended, with one review of a similar job */
.attending-engineer { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.attending-engineer-card {
  display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 20px; align-items: start;
  background: #fff; border: 1px solid var(--line); border-radius: 16px; padding: 22px;
  box-shadow: var(--shadow-soft);
}
.attending-engineer-face { width: 120px; height: 120px; object-fit: cover; object-position: center 20%; border-radius: 14px; background: var(--light); }
.attending-engineer-name { font-size: 20px; margin-bottom: 6px; }
.attending-engineer-name a { color: var(--navy); text-decoration: none; }
.attending-engineer-name a:hover { text-decoration: underline; }
.attending-engineer-card p { margin: 0 0 10px; font-size: 15px; }
.attending-engineer-quals { margin: 0 0 12px; padding-left: 18px; font-size: 14.5px; color: var(--muted); }
.attending-engineer-card .attending-engineer-stat { margin: 0 0 4px; font-size: 14.5px; }
.attending-engineer-stat b { color: var(--navy); font-weight: 800; }
.attending-engineer-lede { margin: 0 0 10px; font-size: 14.5px; color: var(--muted); }
@media (max-width: 900px) { .attending-engineer { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .attending-engineer-card { grid-template-columns: 84px minmax(0, 1fr); gap: 14px; padding: 16px; }
  .attending-engineer-face { width: 84px; height: 84px; }
}

/* the other four recorded jobs */
.other-jobs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
@media (max-width: 980px) { .other-jobs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.other-job {
  background: #fff; border: 1px solid var(--line); border-radius: 16px; overflow: hidden;
  box-shadow: var(--shadow-soft); display: flex; flex-direction: column;
}
.other-job-link { display: block; text-decoration: none; }
.other-job-link img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--light); }
.other-job-title { display: block; padding: 14px 16px 6px; font-size: 16px; font-weight: 800; line-height: 1.3; color: var(--navy); }
.other-job-link:hover .other-job-title { text-decoration: underline; }
.other-job-outcome { margin: 0; padding: 0 16px 16px; font-size: 14px; line-height: 1.5; color: var(--muted); }

/* on a phone each card lies flat: photograph left, words right */
@media (max-width: 560px) {
  .other-jobs { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .other-job { display: grid; grid-template-columns: 110px minmax(0, 1fr); }
  .other-job-link { display: contents; }
  .other-job-link img { grid-row: 1 / span 2; height: 100%; aspect-ratio: auto; min-height: 110px; }
  .other-job-title { padding: 12px 12px 4px; font-size: 15px; }
  .other-job-outcome { padding: 0 12px 12px; font-size: 13.5px; }
}

/* --- the area map on the homepage: a lazy Google Maps embed, 16:9, no border --- */
.coverage-map { margin: 18px 0 22px; border-radius: 14px; overflow: hidden; border: 1px solid #dfe3ee; background: #eef1f7; }
.coverage-map iframe { display: block; width: 100%; aspect-ratio: 16 / 9; min-height: 220px; border: 0; }
.home-coverage-layout {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 26px; align-items: start; margin-top: 18px;
}
.home-coverage-layout > .coverage-map { margin: 0; }
@media (max-width: 700px) {
  .home-coverage-layout { grid-template-columns: minmax(0, 1fr); gap: 22px; }
}

/* --- service page sections (feature/semantic-dom) --------------------------
   The signs list and the two cards beside it: the H2 and the list down the first
   column, the cards spanning every row of the second. */
.leak-signs-layout {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-rows: auto auto auto 1fr;
  column-gap: 22px;
}
.leak-signs-layout > * { grid-column: 1; }
.leak-signs-layout > .leak-signs-notes { grid-column: 2; grid-row: 1 / -1; }
@media (max-width: 700px) {
  .leak-signs-layout { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .leak-signs-layout > .leak-signs-notes { grid-column: 1; grid-row: auto; margin-top: 22px; }
}
/* the FAQ and the related links were one band with two H2s; they are two
   sections now, sharing the band as they did */
.faq-section:has(+ .related-services-section) { padding-bottom: 0; }
.related-services-section { padding-top: 34px; }

/* --- the utility pages' opening: the privacy policy (feature/semantic-dom) and
   the sitemap (feature/html-sitemap) share it -------------------------------- */
main:has(> article:is(.policy-page, .sitemap-page)) { --hero-top: 56px; --hero-bottom: 56px; }
:is(.policy-page, .sitemap-page)::before { content: ""; grid-column: full; grid-row: 1 / -1; background: var(--navy-deep); }
main:has(> article:is(.policy-page, .sitemap-page)) > .breadcrumb-trail { grid-row: 2; grid-column: content-start / content-end; position: relative; z-index: 1; }
:is(.policy-page, .sitemap-page) > :is(h1, p) { grid-column: content-start / content-end; position: relative; z-index: 1; }
:is(.policy-page, .sitemap-page) > h1 { grid-row: 3; color: #fff; }
:is(.policy-page, .sitemap-page) > h1 + p { grid-row: 4; }
.policy-page > h1 + p + p { grid-row: 5; }
:is(.policy-page, .sitemap-page) > p { color: #d5ddf5; margin-bottom: 0; }

/* --- two sections side by side in one band (about, contact) --------------- */
.intro-sections-layout > .enquiry-form, .contact-sections-layout > .enquiry-form { align-self: start; }
:is(.intro-sections-layout, .contact-sections-layout) > section:not(.enquiry-form) > h2 { margin-bottom: 30px; }
:is(.intro-sections-layout, .contact-sections-layout) > section:not(.enquiry-form) > h2:has(+ .heading-lede) { margin-bottom: 10px; }
.contact-sections-layout {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 480px);
  gap: 44px; align-items: start;
}
@media (max-width: 980px) { .contact-sections-layout { grid-template-columns: minmax(0, 1fr); } }

/* the homepage map sat inside the heading block, so the paragraph above it kept
   its ordinary margin and the map carried the block's 30px below it */
.heading-lede:has(+ .coverage-map) { margin-bottom: 14px; }
:where(main > article > section) > .coverage-map { margin-bottom: 30px; }

/* the history split on the about page ends with the milestones table across both columns */
.photo-split > .data-table-scroll { grid-column: 1 / -1; margin-top: 34px; }

/* --- small screens: the header phone waits until the accreditations have scrolled past, so the hero
   fits the first screen; the hero card keeps its own call button and the call bar takes over --- */
.site-header-mobile .header-phone { display: none; }
html.past-accreditations .site-header-mobile .header-phone { display: block; }
/* ...except from 701 to 1100px, where it is on the small header's row from the start (28 September
   2026; see the small header), so the header never grows in mid-scroll there */
@media (min-width: 701px) and (max-width: 1100px) { .site-header-mobile .header-phone { display: block; } }

/* --- phones: the three-point trust strip under the hero is shown, one point per row (fix/photos-on-phones,
   29 September 2026, audit finding AUDIT-02). It was hidden on 19 September, when it sat in the header
   above the hero, so the inner-page hero card and its call button reached the first screen; since 20
   September it sits under the hero, so showing it moves nothing in the hero. One column to 700px, because
   two columns from 521px left the third point alone on a row --- */
@media (max-width: 700px) { .trust-strip { grid-template-columns: minmax(0, 1fr); } }

/* --- homepage hero: the call button first, then the three points. They were plain bullets from
   19 September (Peter). On 27 September Peter re-sent a design critique asking for checkmarks, so
   each point now leads with the site's own tick (the trust badges' "M20 6 9 17l-5-5" icon) in
   #15803d, the green he approved that day for the engineer sites' hero points (5.0:1 on white).
   The tick sits in a box one line tall (1.6em, the points' line height), so it is centred on the
   point's first line however the point wraps. Its stroke is 2.3 rather than the icon's 1.9, so the
   line matches the stem weight of the 16px text beside it (1.9 read faint at 1440); the badges'
   own ticks keep 1.9 --- */
.home-hero .primary-action > .hero-call-action:first-child { margin-top: 0; }
.home-hero .primary-action ul.hero-points { list-style: none; padding-left: 0; margin: 12px auto 0; flex: 0 0 auto; }
.home-hero .primary-action ul.hero-points li { display: flex; align-items: flex-start; gap: 10px; padding: 2px 0; color: var(--ink); font-size: 16px; line-height: 1.6; }
.home-hero .primary-action ul.hero-points li i { display: flex; align-items: center; height: 1.6em; margin-top: 0; color: #15803d; }
.home-hero .primary-action ul.hero-points li i svg { width: 16px; height: 16px; stroke-width: 2.3; }

/* --- homepage hero: the second way in (27 September 2026). Under the call button, an outlined
   navy "Request a call back" button (the form's own submit wording) that jumps straight to the call-back form itself (#quote-home;
   the section top, #quote, sits 854px above the form's first field on a phone), styled as Peter approved that day on the engineer sites'
   .callback-request-button: a 2px navy border, navy text at 800, smaller than the call button,
   a light ground on hover and the site's own focus ring. Not "Get a Quote" (quote and price
   wording was withdrawn on 21 September) and not "Book Online" (there is no online booking).
   Homepage only: the inner-page heroes are already tight on a phone's first screen --- */
.home-hero .callback-request-button {
  display: inline-block; align-self: center; margin-top: 10px;
  text-decoration: none; text-align: center;
  color: var(--navy); background: #fff;
  border: 2px solid var(--navy); border-radius: 14px;
  font-weight: 800; font-size: 15px; line-height: 1.35;
  padding: 9px 22px;
  transition: background-color 0.2s ease;
}
.home-hero .callback-request-button:hover { background: var(--light); }

/* --- phones, 28 September 2026: the three points at 15.5px, the size the phone rule above always
   asked for (the 16px rule here outranked it), on 1.45 leading with the tick's box to match, 8px
   under the call-back button, which sits 8px under the call button. With the one-row header and
   the rows above, this brings the whole hero inside a 390x844 screen with room to spare --- */
@media (max-width: 600px) {
  .home-hero .primary-action ul.hero-points { margin-top: 8px; }
  .home-hero .primary-action ul.hero-points li { font-size: 15.5px; line-height: 1.45; padding: 1px 0; }
  .home-hero .primary-action ul.hero-points li i { height: 1.45em; }
  /* on the wider card "repairs" and "day" were left alone on a line. Balanced
     wrapping evens a point's two lines ("heating / and mains repairs") and never
     adds one; it works in Chrome, Firefox and Safari (17.5 on), where pretty
     wrapping, which Firefox and older Safari lack, left the words stranded */
  .home-hero .primary-action ul.hero-points li span { text-wrap: balance; }
  .home-hero .callback-request-button { margin-top: 8px; }
}

/* --- phones: the four chips under the homepage hero card are hidden (Peter, 19 September); the same
   facts are in the summary, the price table and the accreditations section --- */
@media (max-width: 700px) { .home-hero > .trust-points { display: none; } }

/* --- engineer strip facts on phones (feature/strip-mobile) ------------------
   Peter, on his phone: "make the engineer ... jobs / based etc table clearer on
   mobile". Below 700px each card's facts are a plain two-column list across the
   card: label left in the muted tone, value right in bold navy, a hairline
   between rows, one left edge, and rows tall enough to read at a glance, instead
   of the centred pairs, whose left edges wandered with the label length. From
   560px down the cards run one to a row (it was 420px), so a 430px phone no
   longer squeezes "Leak detection experience" into a 184px card. */
@media (max-width: 700px) {
  .engineer-card-facts {
    grid-template-columns: minmax(0, 1fr) auto;
    justify-content: stretch;
    gap: 0;
    margin-top: 12px;
    text-align: left;
    font-size: 15px;
    line-height: 1.4;
  }
  /* a hairline above every row, unbroken across both columns (the space between
     label and value is padding, not a column gap, so the line runs through it) */
  .engineer-card-facts :is(dt, dd) { padding: 8px 2px; border-top: 1px solid var(--line); }
  .engineer-card-facts dt { text-align: left; }
  .engineer-card-facts dd { text-align: right; padding-left: 16px; }
  /* two cards side by side (561 to 700px) share a row height; the list sits at
     the foot of each, so the two lists line up when one sentence wraps */
  .engineer-card { display: flex; flex-direction: column; }
  .engineer-card > p { margin-bottom: 12px; }
  .engineer-card-facts { margin-top: auto; }
}
@media (max-width: 560px) {
  .engineer-strip-list { grid-template-columns: minmax(0, 1fr); }
  .engineer-card:last-child { grid-column: auto; }
}

/* --- live QA, 19 September: a navy fallback behind the hero photo so the breadcrumb and card
   stay readable if the image never arrives; logo images keep their aspect with explicit sizes --- */
.home-hero::before, .interior-page::before { background-color: var(--navy); }
.accreditation-entry-mark img, .footer-accreditations img { width: auto; }

/* A removed review leaves the recorded engineer profile at its natural width. */
.attending-engineer:not(:has(> .attending-engineer-review)) { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 701px) {
  .trust-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.video-player-frame {width:100%;aspect-ratio:16/9;height:auto;border:0;border-radius:12px;display:block}

/* Generated page presentation and scoped hero rules. */
.coverage-detail-note{margin-top:18px !important;font-size:15px !important;color:var(--muted) !important}
.coverage-notes{margin-top:34px !important}
.footer-followup{margin-top:12px !important}
.hero-backdrop-about-us{background-image:url(/assets/img/hero/hero-about-us-back-640.webp) !important}
.hero-backdrop-areas-we-cover{background-image:url(/assets/img/hero/hero-areas-we-cover-back-640.webp) !important}
.hero-backdrop-bathroom-leak-detection{background-image:url(/assets/img/hero/hero-bathroom-leak-detection-back-640.webp) !important}
.hero-backdrop-case-studies{background-image:url(/assets/img/hero/hero-case-studies-back-640.webp) !important}
.hero-backdrop-case-study-water-mains-leak-detection-bolton-upon-dearne{background-image:url(/assets/img/hero/hero-case-study-water-mains-leak-detection-bolton-upon-dearne-back-640.webp) !important}
.hero-backdrop-case-study-water-mains-leak-detection-chesterfield{background-image:url(/assets/img/hero/hero-case-study-water-mains-leak-detection-chesterfield-back-640.webp) !important}
.hero-backdrop-case-study-water-mains-leak-detection-sheffield{background-image:url(/assets/img/hero/hero-case-study-water-mains-leak-detection-sheffield-back-640.webp) !important}
.hero-backdrop-case-study-water-mains-leak-detection-sheffield-2{background-image:url(/assets/img/hero/hero-case-study-water-mains-leak-detection-sheffield-2-back-640.webp) !important}
.hero-backdrop-case-study-water-mains-leak-detection-sheffield-4{background-image:url(/assets/img/hero/hero-case-study-water-mains-leak-detection-sheffield-4-back-640.webp) !important}
.hero-backdrop-ceiling-leak-detection{background-image:url(/assets/img/hero/hero-ceiling-leak-detection-back-640.webp) !important}
.hero-backdrop-central-heating-leak-detection{background-image:url(/assets/img/hero/hero-central-heating-leak-detection-back-640.webp) !important}
.hero-backdrop-contact-us{background-image:url(/assets/img/hero/hero-contact-us-back-640.webp) !important}
.hero-backdrop-drainage-leak-investigation{background-image:url(/assets/img/hero/hero-drainage-leak-investigation-back-640.webp) !important}
.hero-backdrop-hot-and-cold-pipe-leak-detection{background-image:url(/assets/img/hero/hero-hot-and-cold-pipe-leak-detection-back-640.webp) !important}
.hero-backdrop-index{background-image:url(/assets/img/hero/hero-index-back-640.webp) !important}
.hero-backdrop-irrigation-leak-detection{background-image:url(/assets/img/hero/hero-irrigation-leak-detection-back-640.webp) !important}
.hero-backdrop-roof-leak-detection{background-image:url(/assets/img/hero/hero-roof-leak-detection-back-640.webp) !important}
.hero-backdrop-swimming-pool-leak-detection{background-image:url(/assets/img/hero/hero-swimming-pool-leak-detection-back-640.webp) !important}
.hero-backdrop-water-mains-leak-detection{background-image:url(/assets/img/hero/hero-water-mains-leak-detection-back-640.webp) !important}
.hero-rows-3{--hero-rows:3 !important}
.hero-rows-4{--hero-rows:4 !important}
.hero-rows-5{--hero-rows:5 !important}
.hero-rows-6{--hero-rows:6 !important}
.notice-summary{font-size:17px !important}
.privacy-hero-summary{margin-top:14px !important;max-width:58ch !important}
.related-services-heading{font-size:20px !important;margin-bottom:16px !important}
.section-followup{margin-top:24px !important}
.service-action-label{color:#fff !important}
.service-followup{margin-top:20px !important}
.tracking-frame-hidden{display:none !important;visibility:hidden !important}
.tracking-pixel-hidden{display:none !important}
body.page-about-us main#main{--band-focus:0.46}@media (max-width: 600px){body.page-about-us main#main{--hero-band:121px}}
body.page-areas-we-cover main#main{--band-focus:0.35}
body.page-bathroom-leak-detection main#main{--band-focus:0.25}@media (max-width: 600px){body.page-bathroom-leak-detection main#main{--hero-band:80px}}
body.page-case-studies main#main{--band-focus:0.6}
body.page-case-study-water-mains-leak-detection-bolton-upon-dearne main#main{--band-focus:0.4}
body.page-case-study-water-mains-leak-detection-chesterfield main#main{--band-focus:0.5}
body.page-case-study-water-mains-leak-detection-sheffield main#main{--band-focus:0.55}
body.page-case-study-water-mains-leak-detection-sheffield-2 main#main{--band-focus:0.45}
body.page-case-study-water-mains-leak-detection-sheffield-4 main#main{--band-focus:0.45}@media (max-width: 600px){body.page-case-study-water-mains-leak-detection-sheffield-4 main#main{--hero-band:119px}}
body.page-ceiling-leak-detection main#main{--band-focus:0.55}@media (max-width: 600px){body.page-ceiling-leak-detection main#main{--hero-band:106px}}
body.page-central-heating-leak-detection main#main{--band-focus:0.55}@media (max-width: 600px){body.page-central-heating-leak-detection main#main{--hero-band:80px}}
body.page-contact-us main#main{--band-focus:0.44}@media (max-width: 600px){body.page-contact-us main#main{--hero-band:80px}}
body.page-drainage-leak-investigation main#main{--band-focus:0.2}@media (max-width: 600px){body.page-drainage-leak-investigation main#main{--hero-band:80px}}
body.page-hot-and-cold-pipe-leak-detection main#main{--band-focus:0.3}@media (max-width: 600px){body.page-hot-and-cold-pipe-leak-detection main#main{--hero-band:80px}}
body.page-index main#main{--band-focus:0.3}@media (max-width: 600px){body.page-index main#main{--hero-band:80px;--band-focus:0.345}}
body.page-irrigation-leak-detection main#main{--band-focus:0.5}@media (max-width: 600px){body.page-irrigation-leak-detection main#main{--hero-band:80px}}
body.page-roof-leak-detection main#main{--band-focus:0.3}@media (max-width: 600px){body.page-roof-leak-detection main#main{--hero-band:80px}}
body.page-swimming-pool-leak-detection main#main{--band-focus:0.2}@media (max-width: 600px){body.page-swimming-pool-leak-detection main#main{--hero-band:74px}}
body.page-water-mains-leak-detection main#main{--band-focus:0.2}@media (max-width: 600px){body.page-water-mains-leak-detection main#main{--hero-band:79px}}