/* West London Roofing Maintenance Ltd
   One stylesheet. Tokens from 03_DESIGN_SYSTEM. Mobile first.
   1 tokens, 2 base, 3 type, 4 layout, 5 roofline rule, 6 buttons, 7 header and nav, 8 sticky bar,
   9 hero, 10 trust line and proof strip, 11 service cards, 12 photo band, 13 process, 14 reviews,
   15 postcode checker, 16 about short, 17 faq, 18 cta band and form, 19 footer, 20 service blocks,
   21 gallery and lightbox, 22 contact and about pages, 23 motion states, 24 view transitions, 25 utilities */

/* 1. Tokens */
:root {
  --tile-red: #A0241A;
  --navy: #1C2A5E;
  --slate: #2A2E33;
  --lead: #6E747C;
  --mortar: #DDD9D3;
  --sky: #F2F4F3;
  --white: #FFFFFF;
  --tile-red-deep: #7E1B13;
  --navy-deep: #121B40;
  --navy-tint: #E8EBF4;
  --red-tint: #F7E8E6;
  --slate-deep: #1D2024;
  --success: #2F6B3A;

  --sky-85: rgba(242, 244, 243, 0.85);
  --sky-80: rgba(242, 244, 243, 0.8);
  --white-12: rgba(255, 255, 255, 0.12);
  --white-18: rgba(255, 255, 255, 0.18);
  --white-20: rgba(255, 255, 255, 0.2);
  --white-60: rgba(255, 255, 255, 0.6);
  --focus: rgba(28, 42, 94, 0.4);

  --font: Archivo, "Helvetica Neue", Arial, sans-serif;
  --t-display-1: clamp(40px, 24.5px + 4.13vw, 84px);
  --t-display-2: clamp(34px, 24.85px + 2.44vw, 60px);
  --t-number: clamp(48px, 31.1px + 4.51vw, 96px);
  --t-h3: clamp(22px, 19.2px + 0.75vw, 30px);
  --t-h4: clamp(18px, 16.6px + 0.38vw, 22px);
  --t-body: clamp(16px, 15.3px + 0.19vw, 18px);
  --t-small: clamp(14px, 13.65px + 0.094vw, 15px);
  --t-label: clamp(12px, 11.65px + 0.094vw, 13px);

  --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 24px;
  --s-6: 32px; --s-7: 48px; --s-8: 64px; --s-9: 96px; --s-10: 128px;
  --section: clamp(64px, 8vw, 128px);

  --container: 1320px;
  --gutter: clamp(20px, 4vw, 48px);
  --grid-gap: 16px;

  --r-tag: 3px; --r-ctl: 4px; --r-card: 6px; --r-panel: 8px;
  --header-h: 64px;
  --sticky-h: 64px;
  --shadow-menu: 0 12px 32px rgba(42, 46, 51, 0.12);
  --shadow-bar: 0 -8px 24px rgba(42, 46, 51, 0.16);
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
}
@media (min-width: 768px) { :root { --grid-gap: 24px; } }
@media (min-width: 1024px) { :root { --grid-gap: 32px; --header-h: 92px; } }

/* 2. Base */
@font-face {
  font-family: Archivo;
  src: url("../fonts/archivo-variable.woff2") format("woff2");
  font-weight: 100 900;
  font-stretch: 62% 125%;
  font-style: normal;
  font-display: swap;
}
*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
}
html.lenis, html.lenis body { height: auto; }
html.lenis { scroll-behavior: auto; }
.lenis.lenis-smooth { scroll-behavior: auto; }
.lenis.lenis-stopped { overflow: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body {
  margin: 0;
  font-family: var(--font);
  font-size: var(--t-body);
  line-height: 1.55;
  color: var(--slate);
  background: var(--sky);
  overflow-x: clip;
}
body.has-sticky { padding-bottom: calc(var(--sticky-h) + env(safe-area-inset-bottom)); }
@media (min-width: 1024px) { body.has-sticky { padding-bottom: 0; } }
img, svg, video { display: block; max-width: 100%; }
img { height: auto; }
picture { display: block; }
figure { margin: 0; }
a { color: var(--navy); text-decoration: underline; text-underline-offset: 2px; transition: color 150ms, text-underline-offset 150ms; }
a:hover { color: var(--tile-red); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
button { font: inherit; color: inherit; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0 0 var(--s-4); }
p:last-child { margin-bottom: 0; }
address { font-style: normal; }
::selection { background: var(--navy-tint); color: var(--navy); }

/* 3. Type */
h1, h2, h3, h4 { margin: 0; color: var(--navy); }
.display-1, .display-2, .number {
  font-weight: 800;
  font-stretch: 75%;
  letter-spacing: -0.02em;
  line-height: 0.98;
}
.display-1 { font-size: var(--t-display-1); }
.display-2 { font-size: var(--t-display-2); }
.number { font-size: var(--t-number); font-variant-numeric: tabular-nums; line-height: 0.95; }
h1, h2 { font-size: var(--t-display-2); font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; line-height: 0.98; }
h3, .h3 { font-size: var(--t-h3); font-weight: 700; font-stretch: 90%; letter-spacing: -0.01em; line-height: 1.1; }
h4, .h4 { font-size: var(--t-h4); font-weight: 700; font-stretch: 90%; letter-spacing: -0.01em; line-height: 1.15; }
.lede { font-size: var(--t-body); max-width: 68ch; }
strong, b { font-weight: 600; }
.small { font-size: var(--t-small); font-weight: 500; color: var(--lead); }
.label {
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.04em;
  font-variant-numeric: tabular-nums;
}
.label--caps { text-transform: uppercase; }
.kicker {
  display: block;
  font-size: var(--t-small);
  font-weight: 600;
  color: var(--tile-red);
  margin: 0 0 var(--s-3);
}
.measure { max-width: 68ch; }
.tabular { font-variant-numeric: tabular-nums; }
.on-dark, .on-dark h2, .on-dark h3, .on-dark h4 { color: var(--white); }
.on-dark p { color: var(--sky-85); }
.on-dark a { color: var(--white); }
.on-dark a:hover { color: var(--white); }
.on-dark .kicker { color: var(--sky-85); }

/* 4. Layout */
.container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); position: relative; }
.section--tight { padding-block: clamp(48px, 5vw, 80px); }
.section--white { background: var(--white); }
.grid { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: var(--grid-gap); }
@media (min-width: 768px) { .grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }
.section__head { margin-bottom: var(--s-6); }
.section__head .lede { margin-top: var(--s-4); }
@media (min-width: 1024px) { .section__head { margin-bottom: var(--s-7); } }
main { display: block; }
.cv { content-visibility: auto; contain-intrinsic-size: auto 720px; }

/* grain: dark sections only, 6 percent, monochrome */
.grain { position: relative; isolation: isolate; }
.grain::before {
  content: "";
  position: absolute;
  inset: 0;
  background: url("../img/grain.png") repeat;
  background-size: 128px 128px;
  opacity: 0.06;
  pointer-events: none;
  z-index: 0;
}
.grain > * { position: relative; z-index: 1; }

/* 5. Roofline rule */
.rule {
  display: block;
  width: 64px;
  height: 16px;
  color: var(--tile-red);
  overflow: visible;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  margin: 0 0 var(--s-4);
}
@media (min-width: 1024px) { .rule { width: 96px; height: 24px; } }
.rule--white { color: var(--white); }
.rule--divider { width: 100%; height: auto; margin: 0; }
.rule--nav {
  display: block;
  width: 24px;
  height: 8px;
  margin: 2px 0 0;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 200ms var(--ease-out);
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* 6. Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-2);
  min-height: 48px;
  padding: 14px 24px;
  border-radius: var(--r-ctl);
  border: 2px solid transparent;
  font-weight: 700;
  font-stretch: 90%;
  font-size: var(--t-body);
  line-height: 1.1;
  text-decoration: none;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  transition: background-color 150ms, border-color 150ms, color 150ms;
  -webkit-tap-highlight-color: transparent;
}
.btn svg { width: 20px; height: 20px; flex: none; }
.btn--primary { background: var(--tile-red); color: var(--white); border-color: var(--tile-red); }
.btn--primary:hover { background: var(--tile-red-deep); border-color: var(--tile-red-deep); color: var(--white); }
.btn--secondary { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn--secondary:hover { background: var(--navy-tint); color: var(--navy); }
.btn--dark { background: transparent; color: var(--white); border-color: var(--white-60); }
.btn--dark:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); color: var(--white); }
.btn--wa { background: var(--navy); color: var(--white); border-color: var(--navy); }
.btn--wa:hover { background: var(--navy-deep); border-color: var(--navy-deep); color: var(--white); }
.btn--block { width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: 0.7; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-3); }
@media (max-width: 479px) { .btn-row .btn { flex: 1 1 100%; } }
.tag {
  display: inline-block;
  background: var(--tile-red);
  color: var(--white);
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.04em;
  padding: 6px 10px;
  border-radius: var(--r-tag);
  line-height: 1;
  white-space: nowrap;
}
.tag--sm { padding: 4px 7px; }

/* 7. Header and nav */
.header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--white);
  border-bottom: 1px solid var(--mortar);
  height: var(--header-h);
  view-transition-name: site-header;
}
.header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4);
}
.logo { display: inline-flex; align-items: center; text-decoration: none; flex: none; }
.logo img { height: 44px; width: auto; transition: height 250ms ease-out; }
.logo__desktop { display: none; }
.logo__mobile { display: block; }
.nav { display: none; }
.header__actions { display: flex; align-items: center; gap: var(--s-4); }
.header__phone {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  text-decoration: none;
  color: var(--navy);
  font-weight: 700;
  font-stretch: 88%;
  letter-spacing: 0.02em;
  font-variant-numeric: tabular-nums;
  font-size: var(--t-body);
  white-space: nowrap;
  min-height: 44px;
}
.header__phone:hover { color: var(--navy); }
.header__phone .header__num { display: none; }
.header__phone svg { width: 24px; height: 24px; }
.header__quote { display: none; }
.burger {
  width: 44px;
  height: 44px;
  border: 0;
  background: transparent;
  border-radius: var(--r-ctl);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  color: var(--navy);
}
.burger span {
  position: absolute;
  left: 11px;
  width: 22px;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 250ms var(--ease-inout), opacity 250ms;
}
.burger span:nth-child(1) { top: 14px; }
.burger span:nth-child(2) { top: 21px; }
.burger span:nth-child(3) { top: 28px; }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (min-width: 1024px) {
  .logo img { height: 68px; }
  .logo__desktop { display: block; }
  .logo__mobile { display: none; }
  .header { transition: height 250ms ease-out; }
  .header.is-shrunk { --header-h: 68px; }
  .header.is-shrunk .logo img { height: 50px; }
  .nav { display: flex; align-items: center; gap: var(--s-5); }
  .nav__item { position: relative; }
  .nav__link {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 10px 2px;
    text-decoration: none;
    color: var(--slate);
    font-weight: 600;
    line-height: 1.2;
    background: transparent;
    border: 0;
  }
  .nav__link:hover { color: var(--slate); }
  .nav__link:hover .rule--nav,
  .nav__link[aria-current="page"] .rule--nav,
  .nav__item.is-current > .nav__link .rule--nav { stroke-dashoffset: 0; }
  .nav__link--menu .chev-wrap { display: inline-flex; align-items: center; }
  .nav__link--menu .chev { width: 12px; height: 12px; margin-left: 6px; transition: transform 180ms; }
  .nav__item.is-open .chev { transform: rotate(180deg); }
  .menu {
    position: absolute;
    top: calc(100% + 6px);
    left: -12px;
    min-width: 320px;
    background: var(--white);
    border: 1px solid var(--mortar);
    border-radius: var(--r-card);
    box-shadow: var(--shadow-menu);
    padding: 12px 0;
    margin: 0;
    opacity: 0;
    transform: translateY(-6px);
    visibility: hidden;
    pointer-events: none;
    transition: opacity 140ms var(--ease-out), transform 140ms var(--ease-out), visibility 0s linear 140ms;
    z-index: 60;
  }
  .nav__item.is-open .menu {
    opacity: 1;
    transform: translateY(0);
    visibility: visible;
    pointer-events: auto;
    transition: opacity 180ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s;
  }
  .menu a {
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0 20px;
    text-decoration: none;
    color: var(--slate);
    font-weight: 600;
  }
  .menu a:hover, .menu a:focus-visible { background: var(--navy-tint); color: var(--navy); outline-offset: -3px; }
  .header__phone .header__num { display: inline; }
  .header__phone svg { display: none; }
  .header__quote { display: inline-flex; }
  .burger { display: none; }
}

/* Mobile menu panel */
.mobile-menu {
  position: fixed;
  top: var(--header-h);
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--white);
  z-index: 45;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 350ms var(--ease-inout), visibility 0s linear 350ms;
  padding: var(--s-5) var(--gutter) calc(var(--s-8) + env(safe-area-inset-bottom));
}
.mobile-menu.is-open { clip-path: inset(0); visibility: visible; transition: clip-path 350ms var(--ease-inout), visibility 0s; }
.mobile-menu__list > li { border-top: 1px solid var(--mortar); }
.mobile-menu__list > li:last-child { border-bottom: 1px solid var(--mortar); }
.mobile-menu__list a {
  display: flex;
  align-items: center;
  min-height: 52px;
  padding: 10px 0;
  text-decoration: none;
  color: var(--slate);
  font-weight: 700;
  font-stretch: 90%;
  font-size: var(--t-h4);
}
.mobile-menu__list a[aria-current="page"] { color: var(--navy); }
.mobile-menu__sub { padding: 0 0 var(--s-3) var(--s-4); }
.mobile-menu__sub a { min-height: 44px; font-size: var(--t-body); font-weight: 600; padding: 6px 0; }
.mobile-menu__ctas { display: grid; gap: var(--s-3); margin-top: var(--s-5); }
@media (min-width: 1024px) { .mobile-menu { display: none; } }

/* 8. Mobile sticky bar */
.sticky-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--white);
  box-shadow: var(--shadow-bar);
  padding-bottom: env(safe-area-inset-bottom);
  transform: translateY(110%);
  transition: transform 350ms var(--ease-out);
}
.sticky-bar.is-visible { transform: translateY(0); }
.sticky-bar.is-hidden { transform: translateY(110%); transition-duration: 250ms; }
.sticky-bar .btn {
  min-height: var(--sticky-h);
  border-radius: 0;
  border: 0;
  font-size: var(--t-body);
}
@media (min-width: 1024px) { .sticky-bar { display: none; } }

/* 9. Hero */
.hero { position: relative; background: var(--white); overflow: clip; }
.hero__media { position: relative; overflow: hidden; height: min(60vh, 600px); min-height: 360px; background: var(--mortar); }
.hero__media img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.hero__panel { background: var(--white); padding: var(--s-6) var(--gutter) var(--s-8); }
.hero__panel .rule { margin-bottom: var(--s-4); }
.hero__panel h1 { margin: 0 0 var(--s-5); max-width: 18ch; font-size: var(--t-display-1); }
.hero__sub { font-size: var(--t-body); margin: 0 0 var(--s-5); max-width: 40ch; }
.hero__sub a { white-space: nowrap; font-weight: 600; }
.hero__ctas { margin-bottom: var(--s-6); }
@media (min-width: 1024px) {
  /* Split hero: text column on white, photo column filling the rest to the right edge. One straight seam, nothing overlaps. */
  .hero { display: grid; grid-template-columns: minmax(0, 46fr) minmax(0, 54fr); min-height: min(calc(100vh - var(--header-h)), 860px); }
  .hero__panel { order: 1; display: flex; align-items: center; padding: var(--s-8) var(--s-8) var(--s-8) max(var(--gutter), calc((100vw - var(--container)) / 2 + var(--gutter))); }
  .hero__inner { width: 100%; max-width: 560px; }
  .hero__panel h1 { max-width: 15ch; font-size: clamp(40px, 3.6vw + 12px, 68px); }
  .hero__media { order: 2; height: auto; min-height: 100%; }
  .hero__media img { position: absolute; inset: 0; object-position: 58% 40%; }
}

/* Page heroes: About, Services, Gallery, Contact */
.page-hero { background: var(--white); border-bottom: 1px solid var(--mortar); }
.page-hero__inner { padding-block: clamp(40px, 6vw, 80px) clamp(40px, 5vw, 64px); }
.page-hero h1 { margin: 0 0 var(--s-4); max-width: 18ch; }
.page-hero .lede { margin: 0 0 var(--s-5); }
.page-hero--centre .page-hero__inner { text-align: center; }
.page-hero--centre h1, .page-hero--centre .lede { margin-inline: auto; }
.page-hero--centre .rule { margin-inline: auto; }
.page-hero--centre .trust-line { justify-content: center; }
.page-hero__grid { display: grid; gap: var(--s-6); }
.page-hero__media { overflow: hidden; border-radius: var(--r-ctl); aspect-ratio: 3 / 2; background: var(--mortar); }
.page-hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 1024px) {
  .page-hero__grid { grid-template-columns: 5fr 7fr; gap: var(--grid-gap); align-items: center; }
}

/* 10. Trust line and proof strip */
.trust-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2) var(--s-4);
  text-decoration: none;
  color: var(--slate);
  font-size: var(--t-label);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  line-height: 1.4;
}
.trust-line span { display: inline-flex; align-items: center; gap: var(--s-4); }
.trust-line span + span::before { content: ""; width: 4px; height: 4px; background: var(--tile-red); flex: none; }
.trust-line:hover { color: var(--navy); text-decoration: underline; text-underline-offset: 3px; }
.on-dark .trust-line { color: var(--sky-85); }
.on-dark .trust-line:hover { color: var(--white); }

.proof { background: var(--white); border-bottom: 1px solid var(--mortar); }
.proof__grid { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3) var(--s-7); padding-block: var(--s-4); }
.proof__item { margin: 0; display: inline-flex; align-items: baseline; gap: var(--s-2); white-space: nowrap; }
.proof__num { font-size: clamp(26px, 20px + 1.2vw, 38px); font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; line-height: 1; color: var(--navy); font-variant-numeric: tabular-nums; }
.proof__lab { font-size: var(--t-small); font-weight: 600; color: var(--slate); }
.proof__seal { display: inline-flex; align-items: center; margin-left: auto; }
.proof__seal img { width: 52px; height: auto; }
@media (max-width: 767px) { .proof__grid { gap: var(--s-2) var(--s-5); } .proof__seal { margin-left: 0; } }

/* 11. Service cards (Home) */
.cards { display: grid; gap: var(--grid-gap); }
@media (min-width: 768px) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.card {
  display: flex;
  flex-direction: column;
  background: var(--white);
  border: 1px solid var(--mortar);
  border-radius: var(--r-card);
  overflow: hidden;
  text-decoration: none;
  color: var(--slate);
  transition: border-color 200ms;
}
.card:hover, .card:focus-visible { border-color: var(--navy); color: var(--slate); }
.card__media { position: relative; aspect-ratio: 3 / 2; overflow: hidden; background: var(--mortar); }
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 400ms var(--ease-out); }
.card:hover .card__media img { transform: scale(1.03); }
.card__tag { position: absolute; top: var(--s-3); left: var(--s-3); }
.card__body { padding: var(--s-4); display: flex; flex-direction: column; gap: var(--s-2); }
@media (min-width: 1024px) { .card__body { padding: var(--s-5); } }
.card__body h3 { color: var(--navy); }
.card__body p { color: var(--slate); }

/* 12. Photo band (Shown, not sold) */
.band { background: var(--white); }
.band__text { padding-bottom: var(--s-6); }
.band__text p { max-width: 60ch; }
.band__figures { display: grid; gap: var(--s-5); }
.band__crop { overflow: hidden; aspect-ratio: 21 / 9; background: var(--mortar); }
.band__crop img { width: 100%; height: 100%; object-fit: cover; }
.band__figure figcaption { padding: var(--s-3) var(--gutter) 0; font-size: var(--t-small); font-weight: 500; color: var(--lead); max-width: 60ch; }
@media (min-width: 768px) { .band__figures--two { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) {
  .band__text { display: grid; grid-template-columns: 5fr 7fr; gap: var(--grid-gap); align-items: end; }
}
/* photo pair: before beside after, split by the vertical stepped rule */
.pair { display: grid; grid-template-columns: 1fr 12px 1fr; align-items: stretch; background: var(--white); }
.pair__side { position: relative; overflow: hidden; }
.pair__side img { width: 100%; height: 100%; object-fit: cover; }
.pair__lab {
  position: absolute; top: var(--s-3);
  background: rgba(42, 46, 51, 0.7); color: var(--white);
  font-size: var(--t-label); font-weight: 600; font-stretch: 88%; letter-spacing: 0.04em;
  padding: 5px 8px; border-radius: var(--r-tag);
}
.pair__side--before .pair__lab { left: var(--s-3); }
.pair__side--after .pair__lab { right: var(--s-3); }
.pair__rule { background: var(--white); position: relative; }
.pair__rule svg { position: absolute; inset: 0; width: 100%; height: 100%; color: var(--tile-red); }

/* 13. Process steps (Home and Services): four numbered cards on one line, the last one navy */
.process { background: var(--sky); }
.steps { position: relative; display: grid; gap: var(--s-5); padding-top: 22px; }
.steps::before { content: ""; position: absolute; left: calc(var(--s-5) + 20px); top: 0; bottom: 0; width: 3px; background: var(--mortar); }
.step { position: relative; background: var(--white); border: 1px solid var(--mortar); border-radius: var(--r-card); padding: var(--s-6) var(--s-5) var(--s-5); }
.step__num {
  position: absolute; top: -22px; left: var(--s-5);
  width: 44px; height: 44px;
  background: var(--navy); color: var(--white);
  border-radius: var(--r-ctl);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-stretch: 75%; font-size: 20px; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.step h3 { font-size: var(--t-h4); margin-bottom: var(--s-2); }
.step p { color: var(--slate); max-width: 36ch; }
.step--last { background: var(--navy); border-color: var(--navy); }
.step--last h3 { color: var(--white); }
.step--last p { color: var(--sky-85); }
.step--last .step__num { background: var(--tile-red); }
@media (min-width: 768px) {
  .steps { grid-template-columns: repeat(2, 1fr); gap: var(--s-8) var(--grid-gap); }
  .steps::before { display: none; }
}
@media (min-width: 1024px) {
  .steps { grid-template-columns: repeat(4, 1fr); gap: var(--grid-gap); }
  .steps::before { display: block; left: var(--s-5); right: var(--s-5); top: 20px; bottom: auto; width: auto; height: 3px; }
  .step { padding: var(--s-6) var(--s-5) var(--s-6); }
}

/* 14. Reviews widget */
.reviews { background: var(--sky); }
.reviews .section__head { text-align: center; }
.reviews .section__head .rule { margin-inline: auto; }
.rev-widget {
  background: var(--white);
  border: 1px solid var(--mortar);
  border-radius: var(--r-panel);
  padding: 20px;
}
@media (min-width: 1024px) { .rev-widget { padding: var(--s-6); } }
.rev-head {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--mortar);
  margin-bottom: var(--s-5);
}
.rev-head__seal { display: block; width: 78px; height: 78px; }
.rev-head__seal img { width: 78px; height: auto; }
.rev-head__score { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--s-2) var(--s-3); }
.rev-head__score .number { color: var(--navy); font-size: clamp(44px, 31.1px + 3.5vw, 72px); }
.rev-head__meta { color: var(--lead); text-transform: uppercase; font-variant-numeric: tabular-nums; }
.rev-head__subs { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); color: var(--lead); text-transform: uppercase; }
.rev-head__subs b { color: var(--navy); font-weight: 700; margin-left: 4px; }
.rev-head .btn { grid-column: 1 / -1; width: 100%; }
@media (min-width: 1024px) {
  .rev-head { grid-template-columns: auto auto 1fr auto; }
  .rev-head__subs { grid-column: auto; }
  .rev-head .btn { grid-column: auto; width: auto; justify-self: end; }
}
.marq { position: relative; overflow: hidden; }
.marq__track {
  display: flex;
  gap: 14px;
  align-items: stretch;
  will-change: transform;
  touch-action: pan-y;
}
.marq--static .marq__track {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  padding-bottom: var(--s-2);
  will-change: auto;
}
.marq--static .rev-card { scroll-snap-align: start; }
.marq.is-dragging .marq__track { cursor: grabbing; }
.rev-card {
  flex: 0 0 280px;
  width: 280px;
  background: var(--white);
  border: 1px solid var(--mortar);
  border-radius: var(--r-card);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  user-select: none;
}
@media (min-width: 1024px) { .rev-card { flex-basis: 320px; width: 320px; } }
.rev-card__top { display: flex; justify-content: space-between; align-items: flex-start; }
.rev-card__score { font-size: var(--t-h3); font-weight: 800; font-stretch: 75%; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
.rev-card__score small { font-size: var(--t-label); font-weight: 600; font-stretch: 88%; color: var(--lead); margin-left: 2px; }
.rev-card__tick { width: 18px; height: 18px; flex: none; }
.rev-card__job { color: var(--tile-red); text-transform: uppercase; }
.rev-card__title { color: var(--navy); font-size: var(--t-h4); }
.rev-card__body {
  margin: 0;
  color: var(--slate);
  font-size: var(--t-small);
  font-weight: 400;
  line-height: 1.5;
  overflow: hidden;
  max-height: calc(1.5em * 5);
  transition: max-height 300ms var(--ease-inout);
}
.rev-card__more {
  align-self: flex-start;
  background: none; border: 0; padding: 0;
  color: var(--tile-red);
  font-size: var(--t-label); font-weight: 600; font-stretch: 88%; letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
}
.rev-card__foot {
  margin-top: auto;
  padding-top: var(--s-3);
  border-top: 1px solid var(--mortar);
  color: var(--lead);
  text-transform: uppercase;
  display: flex; align-items: center; gap: 6px;
}
.rev-card__foot .tick { color: var(--tile-red); font-weight: 700; }
.marq__btns { display: flex; justify-content: center; gap: var(--s-3); margin-top: var(--s-5); }
.marq__btn {
  width: 44px; height: 44px;
  border: 1px solid var(--slate);
  border-radius: var(--r-ctl);
  background: var(--white);
  color: var(--slate);
  display: inline-flex; align-items: center; justify-content: center;
  transition: background-color 150ms, color 150ms;
}
.marq__btn:hover { background: var(--navy-tint); color: var(--navy); }
.marq__btn svg { width: 18px; height: 18px; }
/* contact page: header row plus three static cards */
.rev-static { display: grid; gap: 14px; }
@media (min-width: 768px) { .rev-static { grid-template-columns: repeat(3, 1fr); } }
.rev-static .rev-card { width: auto; flex: none; }

/* 15. Postcode checker */
.cov { background: var(--slate-deep); color: var(--white); position: relative; overflow: clip; }
.cov__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cov__van { position: absolute; inset: -4%; will-change: transform; }
.cov__van img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; opacity: 0.22; }
.cov__veil { position: absolute; inset: 0; background: rgba(29, 32, 36, 0.82); }
.cov__grain { position: absolute; inset: 0; background: url("../img/grain.png") repeat; background-size: 128px 128px; opacity: 0.06; pointer-events: none; }
.cov .container { position: relative; z-index: 1; }
.cov__grid { display: grid; gap: var(--s-6); }
.cov__lead h2 { color: var(--white); margin-bottom: var(--s-4); max-width: 16ch; }
.cov__lead p { color: var(--sky-85); max-width: 52ch; }
.cov__panel {
  background: rgba(28, 42, 94, 0.92);
  border: 1px solid var(--white-12);
  border-radius: var(--r-panel);
  padding: var(--s-5);
}
@media (min-width: 768px) { .cov__panel { padding: var(--s-6); } }
.cov__panel h3 { color: var(--white); margin-bottom: var(--s-4); }
.cov__form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-2); }
.cov__input {
  height: 56px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--white-18);
  border-radius: var(--r-ctl);
  color: var(--white);
  padding: 0 var(--s-4);
  font-size: var(--t-body);
  font-weight: 600;
  font-stretch: 88%;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  min-width: 0;
  transition: border-color 150ms, box-shadow 150ms;
}
.cov__input::placeholder { color: rgba(255, 255, 255, 0.45); text-transform: uppercase; }
.cov__input:focus { outline: none; border-color: var(--white); box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.25); }
.cov__input.is-invalid { border-color: var(--tile-red); }
.cov__form .btn { min-height: 56px; }
.cov__result { margin-top: var(--s-5); display: none; }
.cov__result.is-filled { display: block; }
.cov__result h4, .cov__result .cov__head { color: var(--white); font-size: var(--t-h3); font-weight: 700; font-stretch: 90%; letter-spacing: -0.01em; line-height: 1.15; margin: 0 0 var(--s-2); }
.cov__result p { color: var(--sky-80); margin-bottom: var(--s-4); }
.cov__chips { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-5); }
.cov__chips li {
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid var(--white-20);
  border-radius: var(--r-ctl);
  color: var(--white);
  font-size: var(--t-label);
  font-weight: 600; font-stretch: 88%; letter-spacing: 0.04em;
  padding: 7px 10px;
}
@media (min-width: 1024px) {
  .cov__grid { grid-template-columns: 5fr 1fr 6fr; align-items: center; }
  .cov__panel { grid-column: 3; }
}

/* 16. About short (Home) */
.about-short { background: var(--white); }
.about-short__grid { display: grid; gap: var(--s-6); }
.about-short__media { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-ctl); background: var(--mortar); }
.about-short__media img { width: 100%; height: 100%; object-fit: cover; }
.about-short__text p { max-width: 60ch; margin-bottom: var(--s-5); }
@media (min-width: 1024px) {
  .about-short__grid { grid-template-columns: 7fr 5fr; gap: var(--grid-gap); align-items: center; }
  .about-short__text { padding-left: var(--s-5); }
}

/* 17. FAQ accordion */
.faq { background: var(--sky); }
.faq__list { max-width: 820px; }
.faq__item { border-top: 1px solid var(--mortar); }
.faq__item:last-child { border-bottom: 1px solid var(--mortar); }
.faq__q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  background: none; border: 0; padding: var(--s-4) 0;
  text-align: left;
  color: var(--slate);
  font-size: var(--t-h4); font-weight: 600; font-stretch: 90%; line-height: 1.25;
}
.faq__q:hover { color: var(--navy); }
.faq__glyph { position: relative; width: 20px; height: 20px; flex: none; transition: transform 200ms var(--ease-inout); }
.faq__glyph::before, .faq__glyph::after { content: ""; position: absolute; background: var(--tile-red); border-radius: 1px; }
.faq__glyph::before { left: 0; top: 9px; width: 20px; height: 2px; }
.faq__glyph::after { left: 9px; top: 0; width: 2px; height: 20px; }
.faq__q[aria-expanded="true"] .faq__glyph { transform: rotate(45deg); }
.faq__a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 260ms var(--ease-inout); }
.faq__a > div { overflow: hidden; }
.faq__a p { max-width: 68ch; padding-bottom: var(--s-5); color: var(--slate); }
.faq__item.is-open .faq__a { grid-template-rows: 1fr; }
@media (min-width: 1024px) { .faq__grid { display: grid; grid-template-columns: 4fr 8fr; gap: var(--grid-gap); } .faq__list { max-width: none; } }

/* 18. CTA band and form */
.cta { background: var(--navy); color: var(--white); }
.cta__grid { display: grid; gap: var(--s-7); }
.cta__text h2 { color: var(--white); margin-bottom: var(--s-4); max-width: 14ch; }
.cta__text p { color: var(--sky-85); margin-bottom: var(--s-5); max-width: 40ch; }
.cta__num {
  display: inline-block;
  color: var(--white);
  text-decoration: none;
  font-size: var(--t-number);
  font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-bottom: var(--s-6);
  transition: color 150ms;
}
.cta__num:hover { color: var(--white); text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 3px; }
.cta__form { background: var(--white); color: var(--slate); border-radius: var(--r-panel); padding: var(--s-5); }
@media (min-width: 768px) { .cta__form { padding: var(--s-6); } }
.cta__form h2, .cta__form h3 { color: var(--navy); font-size: var(--t-h3); margin-bottom: var(--s-5); }
@media (min-width: 1024px) {
  .cta__grid { grid-template-columns: 6fr 1fr 5fr; align-items: center; }
  .cta__form { grid-column: 3; }
}

.form { display: grid; gap: var(--s-5); }
.form__fields { display: grid; gap: var(--s-5); }
.field { display: grid; gap: var(--s-2); }
.field label { font-size: var(--t-small); font-weight: 600; color: var(--slate); }
.field input, .field textarea {
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  background: var(--white);
  border: 1px solid var(--mortar);
  border-radius: var(--r-ctl);
  color: var(--slate);
  font-size: var(--t-body);
  transition: border-color 150ms, box-shadow 150ms;
}
.field textarea { min-height: calc(1.55em * 4 + 26px); resize: vertical; }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--focus); }
.field.is-error input, .field.is-error textarea { border-color: var(--tile-red); }
.field__error { display: none; font-size: var(--t-small); font-weight: 500; color: var(--tile-red-deep); }
.field.is-error .field__error { display: block; }
.field__help { font-size: var(--t-small); color: var(--lead); font-weight: 500; }
.field--file { position: relative; }
.field--file input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; min-height: 0; padding: 0; }
.field--file input:focus-visible + .field__file-row .btn { outline: 3px solid var(--focus); outline-offset: 2px; }
.field__file-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-3); }
.field__file-row .btn { cursor: pointer; font-size: var(--t-body); font-weight: 700; color: var(--navy); }
.field__file-name { font-size: var(--t-small); color: var(--slate); font-weight: 500; }
.field--honey { position: absolute; left: -9999px; top: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form__submit { width: 100%; position: relative; }
@media (min-width: 768px) { .form__submit { width: auto; justify-self: start; } }
.form__submit.is-sending::after {
  content: "";
  position: absolute; inset: -5px;
  border-radius: 7px;
  padding: 2px;
  background: conic-gradient(from 0deg, var(--navy) 0 25%, transparent 25% 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: spin 1s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }
.form__msg { display: none; padding: var(--s-4); border-radius: var(--r-ctl); font-weight: 500; }
.form__msg.is-shown { display: block; }
.form__msg--ok { background: rgba(47, 107, 58, 0.08); color: var(--success); }
.form__msg--ok a { color: var(--success); font-weight: 700; }
.form__msg--fail { background: var(--red-tint); color: var(--tile-red-deep); }
.form__msg--fail a { color: var(--tile-red-deep); font-weight: 700; }
.form.is-done .form__fields, .form.is-done .form__submit { display: none; }

/* 19. Footer */
.footer { background: var(--slate-deep); color: var(--sky-80); }
.footer a { color: var(--sky-80); text-decoration: none; }
.footer a:hover { color: var(--white); text-decoration: underline; }
.footer__grid { display: grid; gap: var(--s-6); padding-block: var(--s-8) var(--s-7); }
.footer h2 { color: var(--sky); font-size: var(--t-h4); font-weight: 700; font-stretch: 90%; margin-bottom: var(--s-3); }
.footer__logo { display: inline-block; background: var(--white); padding: 10px 12px; border-radius: var(--r-ctl); margin-bottom: var(--s-4); }
.footer__logo img { height: 40px; width: auto; }
.footer__seal { display: inline-block; margin-top: var(--s-4); }
.footer__seal img { width: 72px; height: auto; }
.footer ul li { padding: 3px 0; }
.footer__areas { columns: 2; column-gap: var(--s-4); }
.footer__contact li { display: flex; align-items: center; gap: var(--s-2); }
.footer__contact svg { width: 18px; height: 18px; flex: none; }
.footer__bottom { background: var(--navy-deep); font-size: var(--t-small); color: var(--sky-80); }
.footer__bottom .container { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-2) var(--s-4); padding-block: var(--s-4); }
@media (min-width: 768px) { .footer__grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .footer__grid { grid-template-columns: 4fr 2fr 3fr 3fr; gap: var(--grid-gap); } }

/* 20. Service blocks (Services page) */
.chips-bar { background: var(--white); border-bottom: 1px solid var(--mortar); }
.chips-bar--sticky { position: sticky; top: var(--header-h); z-index: 30; }
.chips { display: flex; gap: var(--s-2); overflow-x: auto; padding: var(--s-3) 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips-bar .container { position: relative; }
.chips-bar .container::after {
  content: ""; position: absolute; right: 0; top: 0; bottom: 0; width: 48px;
  background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--white));
  pointer-events: none;
}
@media (min-width: 1024px) { .chips-bar .container::after { display: none; } .chips { flex-wrap: wrap; } }
.chip {
  flex: none;
  display: inline-flex; flex-direction: column; align-items: center; justify-content: center;
  height: 40px; padding: 0 18px;
  border: 1px solid var(--mortar); border-radius: 20px;
  background: var(--white);
  color: var(--slate);
  font-weight: 600; font-size: var(--t-small);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color 150ms, color 150ms, border-color 150ms;
  line-height: 1;
  gap: 2px;
}
.chip .rule--nav { stroke-dashoffset: 1; width: 20px; height: 7px; margin: 0; }
.chip:hover { color: var(--navy); border-color: var(--navy-tint); background: var(--navy-tint); }
.chip.is-active, .chip[aria-current="true"], .chip[aria-pressed="true"] { background: var(--navy-tint); color: var(--navy); border-color: var(--navy-tint); }
.chip.is-active .rule--nav, .chip[aria-current="true"] .rule--nav, .chip[aria-pressed="true"] .rule--nav { stroke-dashoffset: 0; }

.svc-block { padding-block: var(--section); scroll-margin-top: calc(var(--header-h) + 72px); background: var(--white); }
.svc-block:nth-of-type(even) { background: var(--sky); }
.svc-block__grid { display: grid; gap: var(--s-6); }
.svc-block__media { display: grid; gap: var(--s-3); align-content: start; }
.svc-block__photo { overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--r-ctl); background: var(--mortar); }
.svc-block__photo img { width: 100%; height: 100%; object-fit: cover; }
.svc-block__thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-3); }
.svc-block__thumbs button { padding: 0; border: 0; background: var(--mortar); border-radius: var(--r-ctl); overflow: hidden; aspect-ratio: 1; cursor: zoom-in; }
.svc-block__thumbs img { width: 100%; height: 100%; object-fit: cover; }
.svc-block__text h2 { margin-bottom: var(--s-4); }
.svc-block__text > p { max-width: 62ch; margin-bottom: var(--s-5); }
.covers { display: grid; grid-template-columns: 1fr; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.covers h3 { font-size: var(--t-h4); grid-column: 1 / -1; margin-bottom: var(--s-1); }
.covers li { position: relative; padding-left: 16px; font-weight: 500; }
.covers li::before { content: ""; position: absolute; left: 0; top: 0.65em; width: 4px; height: 4px; background: var(--tile-red); }
@media (min-width: 480px) { .covers { grid-template-columns: 1fr 1fr; } }
.pullquote {
  border-left: 3px solid var(--navy);
  padding: var(--s-1) 0 var(--s-1) var(--s-4);
  margin: 0 0 var(--s-5);
}
.pullquote p { font-weight: 500; margin-bottom: var(--s-1); }
.pullquote cite { font-style: normal; font-size: var(--t-small); color: var(--lead); font-weight: 500; }
.svc-block__ctas { margin-bottom: var(--s-6); }
.svc-block__faq .faq__list { max-width: none; }
.svc-block__more { margin-top: var(--s-3); }
.svc-divider { background: var(--white); padding: 0; line-height: 0; }
.svc-divider--sky { background: var(--sky); }
@media (min-width: 1024px) {
  .svc-block__grid { grid-template-columns: 5fr 7fr; gap: var(--grid-gap); align-items: start; }
  .svc-block--flip .svc-block__grid { grid-template-columns: 7fr 5fr; }
  .svc-block--flip .svc-block__media { order: 2; }
  .svc-block--flip .svc-block__text { order: 1; }
}

/* 21. Gallery and lightbox */
.gallery { background: var(--white); }
.gallery__grid { columns: 1; column-gap: var(--grid-gap); }
@media (min-width: 768px) { .gallery__grid { columns: 2; } }
@media (min-width: 1024px) { .gallery__grid { columns: 3; } }
.tile {
  break-inside: avoid;
  margin: 0 0 var(--grid-gap);
  position: relative;
  border-radius: var(--r-ctl);
  overflow: hidden;
  background: var(--white);
}
.tile.is-hidden { display: none; }
.tile__btn { display: block; width: 100%; padding: 0; border: 0; background: var(--mortar); text-align: left; cursor: zoom-in; border-radius: var(--r-ctl); overflow: hidden; }
.tile__btn img { width: 100%; height: auto; display: block; }
.tile figcaption {
  padding: var(--s-3) 0 var(--s-2);
  font-size: var(--t-small); font-weight: 500; color: var(--lead);
}
@media (hover: hover) and (min-width: 1024px) {
  .tile figcaption {
    position: absolute; left: 0; right: 0; bottom: 0;
    background: rgba(42, 46, 51, 0.9);
    color: var(--white);
    padding: var(--s-3) var(--s-4);
    opacity: 0;
    transition: opacity 200ms;
  }
  .tile:hover figcaption, .tile:focus-within figcaption { opacity: 1; }
}
.gallery__empty { padding: var(--s-7) 0; color: var(--lead); font-weight: 500; display: none; }
.gallery__empty.is-shown { display: block; }

.lightbox {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(29, 32, 36, 0.94);
  display: none;
  align-items: center; justify-content: center;
  padding: var(--s-4);
}
.lightbox.is-open { display: flex; }
.lightbox__stage { position: relative; max-width: min(1400px, 92vw); width: 100%; display: flex; flex-direction: column; align-items: center; gap: var(--s-3); }
.lightbox__media { max-width: 100%; display: flex; justify-content: center; touch-action: pan-y; }
.lightbox__media img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: var(--r-ctl); user-select: none; }
.lightbox__media .pair { max-height: 78vh; }
.lightbox__cap { color: var(--sky-85); font-size: var(--t-small); font-weight: 500; text-align: center; max-width: 70ch; }
.lightbox__btn {
  position: absolute; width: 44px; height: 44px;
  border: 1px solid var(--white-60); border-radius: var(--r-ctl);
  background: rgba(29, 32, 36, 0.6); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, 0.12); border-color: var(--white); }
.lightbox__btn svg { width: 20px; height: 20px; }
.lightbox__close { top: var(--s-3); right: var(--s-3); position: fixed; }
.lightbox__prev { left: 0; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 0; top: 50%; transform: translateY(-50%); }
body.is-locked { overflow: hidden; }

/* 22. Contact and About pages */
.routes { display: grid; gap: var(--s-4); }
.route { background: var(--white); border: 1px solid var(--mortar); border-radius: var(--r-card); padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }
.route h2 { font-size: var(--t-h3); }
.route__big { font-size: var(--t-h3); font-weight: 800; font-stretch: 75%; color: var(--navy); text-decoration: none; font-variant-numeric: tabular-nums; letter-spacing: -0.01em; word-break: break-word; }
.route__big:hover { color: var(--tile-red); }
.route .small { color: var(--lead); }
@media (min-width: 768px) { .routes { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } }
.contact-form { background: var(--sky); }
.contact-form .cta__form { max-width: 760px; border: 1px solid var(--mortar); }
.details { display: grid; gap: var(--s-6); }
.details h3 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.details ul li { padding: 2px 0; }
@media (min-width: 768px) { .details { grid-template-columns: repeat(2, 1fr); gap: var(--grid-gap); } }

.facts { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.facts li {
  display: inline-flex; align-items: center; gap: 10px;
  border: 1px solid var(--mortar); background: var(--white); border-radius: var(--r-ctl);
  padding: 9px 14px 9px 12px; font-weight: 600; font-size: var(--t-small); color: var(--navy);
}
.facts li::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tile-red); flex: none; }

/* About hero: intro, facts and trust line beside the photo, nothing left over for a second section */
.about-hero { display: grid; gap: var(--s-6); }
.about-hero__text .lede { margin: 0 0 var(--s-5); max-width: 58ch; }
.about-hero__text .facts { margin-bottom: var(--s-6); }
.about-hero__media { aspect-ratio: 3 / 2; }
@media (min-width: 1024px) {
  .about-hero { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: center; }
  .about-hero__media { aspect-ratio: 4 / 3; }
}

.people__grid { display: grid; gap: var(--s-6); }
.people__media { overflow: hidden; border-radius: var(--r-ctl); aspect-ratio: 3 / 2; background: var(--mortar); }
.people__media img { width: 100%; height: 100%; object-fit: cover; }
.people__list { display: grid; gap: var(--s-5); }
.person h3 { margin-bottom: var(--s-2); }
.person p { max-width: 52ch; }
.person__photo { overflow: hidden; border-radius: var(--r-ctl); aspect-ratio: 4 / 5; margin-bottom: var(--s-3); max-width: 320px; background: var(--mortar); }
.person__photo img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 768px) { .people__list--two { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } }
@media (min-width: 1024px) { .people__grid { grid-template-columns: 5fr 7fr; gap: var(--s-8); align-items: center; } }

/* How we work: three panels, the customer words set apart from ours */
.how__list { display: grid; gap: var(--s-5); }
.how__item { display: flex; flex-direction: column; background: var(--sky); border-radius: var(--r-card); padding: var(--s-5); }
.how__item h3 { font-size: var(--t-h3); font-weight: 800; font-stretch: 75%; letter-spacing: -0.02em; margin-bottom: var(--s-3); }
.how__item > p { max-width: 52ch; padding-bottom: var(--s-5); }
.how__item .pullquote { margin-top: auto; background: var(--white); border-left: 3px solid var(--navy); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.how__item .pullquote p { margin-bottom: var(--s-2); }
@media (min-width: 1024px) { .how__list { grid-template-columns: repeat(3, 1fr); gap: var(--grid-gap); } .how__item { padding: var(--s-6); } }

/* Vetted: the checks sit level with the text, each with a tick */
.vetted__grid { display: grid; gap: var(--s-6); }
.vetted__text p { max-width: 60ch; margin-bottom: var(--s-5); }
.vetted__checks { display: grid; grid-template-columns: 1fr; gap: 0 var(--s-6); align-self: center; }
.vetted__checks li { display: flex; align-items: center; gap: var(--s-3); font-weight: 500; padding: 10px 0; border-bottom: 1px solid var(--mortar); }
.vetted__checks .check {
  width: 20px; height: 20px; flex: none; border-radius: 4px;
  background: var(--tile-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M5.5 11.5 9.5 15.5 16.5 7' stroke='%23fff' stroke-width='2.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
}
@media (min-width: 480px) { .vetted__checks { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .vetted__grid { grid-template-columns: 6fr 6fr; gap: var(--s-8); align-items: center; } }

.legal { max-width: 68ch; }
.legal p { margin-bottom: var(--s-4); }
.notfound { min-height: 60vh; display: flex; align-items: center; background: var(--white); }
.notfound ul { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-4); margin-top: var(--s-5); }

/* 23. Motion initial states. Only with the js class, which the head script adds when motion is allowed.
   If site.js fails the class is removed and everything is visible. */
html.js .hero [data-hero], html.js .page-hero [data-hero] { opacity: 0; }
html.js .rule[data-draw] { stroke-dashoffset: 1; }
html.js [data-settle] img { transform: scale(1.04); }
.hero__media { will-change: auto; }
@media (prefers-reduced-motion: reduce) {
  html.js .hero [data-hero], html.js .page-hero [data-hero] { opacity: 1; }
  html.js .rule[data-draw] { stroke-dashoffset: 0; }
  html.js [data-settle] img { transform: none; }
  .rule--nav, .card__media img, .sticky-bar, .mobile-menu, .menu, .faq__a, .faq__glyph, .rev-card__body, .btn, .chip, .burger span, a, .logo img, .header {
    transition-duration: 120ms !important;
  }
  .sticky-bar { transform: translateY(0); }
  .sticky-bar.is-hidden { transform: translateY(110%); }
  .form__submit.is-sending::after { animation: none; }
  .card:hover .card__media img { transform: none; }
  .mobile-menu { transition: opacity 120ms, visibility 0s linear 120ms; clip-path: none; opacity: 0; }
  .mobile-menu.is-open { opacity: 1; transition: opacity 120ms, visibility 0s; }
  .menu { transform: none; transition: opacity 120ms, visibility 0s linear 120ms; }
  .nav__item.is-open .menu { transition: opacity 120ms, visibility 0s; }
}

/* 24. View transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: 180ms ease-out both vt-out; }
::view-transition-new(root) { animation: 220ms ease-out both vt-in; }
::view-transition-old(site-header), ::view-transition-new(site-header) { animation: none; mix-blend-mode: normal; }
@keyframes vt-out { to { opacity: 0; } }
@keyframes vt-in { from { opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* 25. Utilities */
.vh { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: var(--s-4); top: -60px; z-index: 200;
  background: var(--navy); color: var(--white); padding: 10px 14px; border-radius: var(--r-ctl);
  text-decoration: none; font-weight: 700;
  transition: top 150ms;
}
.skip:focus { top: var(--s-3); color: var(--white); }
.nowrap { white-space: nowrap; }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.mb-5 { margin-bottom: var(--s-5); }
[hidden] { display: none !important; }

/* 26. Cover-fit fixes: a picture element must fill its crop so the img inside can cover it */
.hero__media picture, .card__media picture, .band__crop picture, .about-short__media picture, .page-hero__media picture,
.svc-block__photo picture, .svc-block__thumbs picture, .people__media picture, .person__photo picture, .cov__van picture, .pair__side picture { height: 100%; }
.hero__media { height: min(60vh, 600px); }
.notfound { min-height: min(60vh, 600px); }
.cov .kicker { color: var(--sky-85); }
.footer__seal { background: var(--white); border-radius: 50%; padding: 5px; line-height: 0; }
@media (min-width: 1024px) { .hero__media { height: auto; } }
.trust-line span { display: inline; gap: 0; }
.trust-line > span { display: inline-flex; align-items: center; gap: var(--s-4); }
.trust-line span + span::before { content: none; }
.trust-line > span + span::before { content: ""; width: 4px; height: 4px; background: var(--tile-red); flex: none; }
.route__big--email { font-size: var(--t-h4); font-stretch: 88%; overflow-wrap: anywhere; word-break: normal; }
.logo__pic { display: block; }
@media (max-width: 1023px) { .header__phone .tag { display: none; } }

/* 27. Empty photo slots: a text card on Home, a full-width text block on Services. Never a grey box. */
.card--text { background: var(--navy); border-color: var(--navy); justify-content: center; min-height: 260px; }
.card--text .card__body { padding: var(--s-5); gap: var(--s-3); align-items: flex-start; }
.card--text h3 { color: var(--white); font-size: var(--t-h3); }
.card--text p { color: var(--sky-85); }
.card--text:hover, .card--text:focus-visible { border-color: var(--tile-red); }
.svc-block--text .svc-block__grid { grid-template-columns: minmax(0, 1fr); }
.svc-block--text .svc-block__text > p { max-width: 68ch; }
.svc-block--text .svc-block__more { margin: 0 0 var(--s-6); }

/* 28. Revision 3 (Max, 19 Sept, second review) */

/* Hero: the text block sits centred in its half, so the space either side of it is even instead of a big gap on the left */
@media (min-width: 1024px) {
  .hero__panel { justify-content: center; padding: var(--s-8) clamp(32px, 5vw, 96px); }
  .hero__inner { max-width: 560px; }
}

/* Proof band: four cells on navy, numbers big enough to read as a statement, nothing crammed */
.proof { background: var(--navy); border-bottom: 0; color: var(--white); }
.proof__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding-block: 0; }
.proof__item { display: flex; flex-direction: column; align-items: flex-start; gap: var(--s-1); padding: var(--s-5) var(--s-4); white-space: normal; margin: 0; }
.proof__num { color: var(--white); font-size: clamp(36px, 28px + 1.6vw, 52px); }
.proof__lab { color: var(--sky-85); font-size: var(--t-small); }
.proof__seal { padding: var(--s-4); margin: 0; grid-column: 1 / -1; justify-content: center; border-top: 1px solid var(--white-12); }
.proof__seal img { width: 60px; height: auto; background: var(--white); border-radius: 50%; padding: 4px; }
@media (min-width: 768px) {
  .proof__grid { grid-template-columns: repeat(3, 1fr) auto; }
  .proof__item { padding: var(--s-6) var(--s-6) var(--s-6) 0; border-right: 1px solid var(--white-12); margin-right: var(--s-6); }
  .proof__item:first-child { padding-left: 0; }
  .proof__seal { grid-column: auto; border-top: 0; justify-content: flex-end; padding: 0; }
  .proof__seal img { width: 72px; }
}

/* Services dropdown: an invisible bridge fills the gap under the link so the pointer never leaves the item on its way to the list */
@media (min-width: 1024px) {
  .menu::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
  .menu a { white-space: nowrap; }
}

/* Header shrink: the sticky chips bar follows the header height, so there is never a strip of page showing between them */
@media (min-width: 1024px) {
  html.hdr-shrunk { --header-h: 68px; }
  .chips-bar--sticky { transition: top 250ms ease-out; }
}

/* Materials and manufacturers strip: quiet greyscale marks, colour and the product line on hover or focus */
.brands { background: var(--sky); border-top: 1px solid var(--mortar); border-bottom: 1px solid var(--mortar); }
.brands__head { text-align: center; margin-bottom: var(--s-5); }
.brands__head h2 { font-size: var(--t-h4); font-weight: 700; font-stretch: 90%; letter-spacing: 0; color: var(--lead); }
.brands__row { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: var(--s-4) var(--s-6); }
.brand { position: relative; display: flex; flex-direction: column; align-items: center; gap: var(--s-2); padding: var(--s-3) var(--s-4); border-radius: var(--r-ctl); text-decoration: none; color: var(--slate); cursor: default; }
.brand svg { height: 40px; width: auto; display: block; filter: grayscale(1); opacity: 0.62; transition: filter 250ms, opacity 250ms; }
.brand__use { font-size: var(--t-label); font-weight: 600; font-stretch: 88%; letter-spacing: 0.02em; color: var(--lead); opacity: 0; transform: translateY(-4px); transition: opacity 200ms, transform 200ms var(--ease-out); white-space: nowrap; }
.brand:hover svg, .brand:focus-visible svg, .brand.is-on svg { filter: none; opacity: 1; }
.brand:hover .brand__use, .brand:focus-visible .brand__use, .brand.is-on .brand__use { opacity: 1; transform: none; }
@media (hover: none) { .brand svg { filter: none; opacity: 0.9; } .brand__use { opacity: 1; transform: none; } }
@media (min-width: 1024px) { .brands__row { gap: var(--s-4) var(--s-8); } .brand svg { height: 44px; } }

/* Review modal: the full review, opened from a card or its Read more */
.rev-card { cursor: pointer; }
.rev-card:hover { border-color: var(--navy); }
.rmodal {
  position: fixed; inset: 0; z-index: 110;
  background: rgba(29, 32, 36, 0.72);
  display: none; align-items: center; justify-content: center;
  padding: var(--s-4);
}
.rmodal.is-open { display: flex; }
.rmodal__panel {
  position: relative;
  width: min(560px, 100%);
  max-height: 90vh; overflow: auto;
  background: var(--white); border-radius: var(--r-panel);
  padding: var(--s-6) var(--s-5) var(--s-5);
}
@media (min-width: 768px) { .rmodal__panel { padding: var(--s-7) var(--s-6) var(--s-6); } }
.rmodal__top { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); margin-bottom: var(--s-3); }
.rmodal__verified { display: inline-flex; align-items: center; gap: 6px; color: var(--tile-red); text-transform: uppercase; }
.rmodal__score { font-size: var(--t-h3); font-weight: 800; font-stretch: 75%; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1; }
.rmodal__score small { font-size: var(--t-label); font-weight: 600; font-stretch: 88%; color: var(--lead); margin-left: 2px; }
.rmodal__title { font-size: var(--t-h3); margin-bottom: var(--s-4); padding-bottom: var(--s-4); border-bottom: 1px solid var(--mortar); }
.rmodal__body { font-size: var(--t-body); line-height: 1.6; margin-bottom: var(--s-5); }
.rmodal__foot { display: flex; justify-content: space-between; gap: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--mortar); color: var(--lead); text-transform: uppercase; }
.rmodal__foot b { color: var(--slate); }
.rmodal__close { position: absolute; top: var(--s-3); right: var(--s-3); width: 44px; height: 44px; border: 0; background: transparent; color: var(--slate); border-radius: var(--r-ctl); display: inline-flex; align-items: center; justify-content: center; }
.rmodal__close:hover { background: var(--navy-tint); color: var(--navy); }
.rmodal__close svg { width: 20px; height: 20px; }

/* 29. Who you'll deal with: two cards side by side, each with a photo slot on top when a photo exists */
.people__cards { display: grid; gap: var(--s-4); }
.people__cards .person { display: flex; flex-direction: column; background: var(--white); border: 1px solid var(--mortar); border-radius: var(--r-card); overflow: hidden; }
.people__cards .person__photo { margin: 0; max-width: none; aspect-ratio: 3 / 2; border-radius: 0; }
.people__cards .person__body { display: flex; flex-direction: column; flex: 1; padding: var(--s-5); }
.people__cards .person h3 { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-3); }
.people__cards .person h3::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--tile-red); flex: none; }
.people__cards .person p { max-width: 48ch; margin-bottom: var(--s-5); }
.people__cards .person .btn { margin-top: auto; align-self: flex-start; }
@media (min-width: 768px) { .people__cards { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } .people__cards .person__body { padding: var(--s-6); } }

/* Manufacturers: one row at desktop */
@media (min-width: 1024px) { .brands__row { gap: var(--s-3) var(--s-6); } .brand { padding: var(--s-3) var(--s-2); } }

/* 30. Service page template (v2). Same tokens and patterns as the hub blocks. */
.crumbs { margin-bottom: var(--s-6); }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); font-size: var(--t-small); font-weight: 500; color: var(--lead); }
.crumbs li { display: inline-flex; align-items: center; gap: var(--s-3); }
.crumbs li + li::before { content: ""; width: 4px; height: 4px; background: var(--tile-red); flex: none; }
.crumbs a { color: var(--lead); text-decoration: none; }
.crumbs a:hover { color: var(--navy); text-decoration: underline; }
.crumbs [aria-current] { color: var(--slate); font-weight: 600; }

.svc-hero__grid { display: grid; gap: var(--s-6); }
.svc-hero__text h1 { max-width: 16ch; }
.svc-hero__text .lede { margin: 0 0 var(--s-5); }
.svc-hero__text .lede a { white-space: nowrap; font-weight: 600; }
.svc-hero__media { display: grid; gap: var(--s-3); align-content: start; }
.svc-hero__lead { display: grid; gap: var(--s-2); }
.svc-hero__lead .lb-btn { aspect-ratio: 3 / 2; border-radius: var(--r-ctl); overflow: hidden; }
.svc-hero__lead figcaption { max-width: 60ch; }
.lb-btn { display: block; width: 100%; padding: 0; border: 0; background: var(--mortar); cursor: zoom-in; text-align: left; }
.lb-btn picture, .lb-btn img { width: 100%; height: 100%; object-fit: cover; }
.svc-hero__media .svc-block__thumbs button { background: var(--mortar); }
@media (min-width: 1024px) {
  .svc-hero__grid--photo { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .svc-hero__text h1 { max-width: 14ch; }
  .svc-hero__text .lede { max-width: 62ch; }
}

/* Copy sections: heading left, text right, a hairline between each */
.svc-copy .container { display: grid; gap: 0; }
.svc-copy__row { display: grid; gap: var(--s-3); padding: var(--s-6) 0; border-top: 1px solid var(--mortar); }
.svc-copy__row:first-child { border-top: 0; padding-top: 0; }
.svc-copy__row:last-child { padding-bottom: 0; }
.svc-copy__row h2 { font-size: var(--t-h3); }
.svc-copy__row p { max-width: 68ch; }
@media (min-width: 1024px) {
  .svc-copy__row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--grid-gap); padding: var(--s-7) 0; }
  .svc-copy__row h2 { font-size: var(--t-display-2); max-width: 12ch; }
}

/* Areas line: the towns separated by red squares, commas kept for screen readers */
.areas { background: var(--sky); }
.areas .kicker { margin-bottom: var(--s-2); }
.areas__line { max-width: 76ch; font-weight: 500; line-height: 1.8; }
.areas__towns span { display: inline; }
.areas__towns span:not(.vh) + .vh + span::before { content: ""; display: inline-block; width: 4px; height: 4px; background: var(--tile-red); margin: 0 10px; vertical-align: middle; }

/* Reviews: static quote blocks, two up on desktop */
.svc-reviews__grid { display: grid; gap: var(--s-5); }
.svc-reviews__grid .pullquote { margin: 0; background: var(--sky); border-radius: 0 var(--r-ctl) var(--r-ctl) 0; padding: var(--s-4) var(--s-4) var(--s-4) var(--s-5); }
.svc-reviews__link { margin-top: var(--s-5); font-weight: 600; }
@media (min-width: 768px) { .svc-reviews__grid { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); } }

/* Related services */
.related__cards { margin-bottom: var(--s-5); }
@media (min-width: 768px) { .related__cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 1024px) { .related__cards { grid-template-columns: 1fr 1fr; max-width: 900px; } }
.related__links { display: flex; flex-wrap: wrap; gap: var(--s-3) var(--s-6); font-weight: 600; }
.svc-hero__lead { aspect-ratio: auto; overflow: visible; background: transparent; }
.related__cards .card--text { min-height: 0; }

/* 31. Header logo size (Max, 21 Sept: the mark was 97px wide at desktop, far too small). Desktop header 92px with a 68px logo, 50px when shrunk; phones 44px. Between 1024 and 1279 the nav needs the room, so the logo steps down and the labels never wrap. */
.nav__link { white-space: nowrap; }
@media (min-width: 1024px) and (max-width: 1279px) {
  .logo img { height: 56px; }
  .header.is-shrunk .logo img { height: 46px; }
  .nav { gap: var(--s-4); }
}

/* 32. Loading screen, hero cycle, live process steps, promise strip and photo backgrounds (Max, 21 Sept) */
/* Loading screen: sky panel, logo, red roofline draw, navy bar. Only when the js class is on; site.js removes it on load (0.6s min, 1.6s cap, once per session). */
.loader { display: none; }
html.js .loader { display: block; position: fixed; inset: 0; z-index: 200; background: var(--white); transition: opacity 320ms ease-out; }
html.js .loader.is-done { opacity: 0; pointer-events: none; }
.loader__box { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: var(--s-4); animation: loader-in 420ms var(--ease-out) both; }
.loader__logo { width: min(260px, 64vw); height: auto; display: block; }
.loader__rule { display: block; overflow: visible; color: var(--tile-red); stroke-dasharray: 1; stroke-dashoffset: 1; animation: loader-draw 800ms var(--ease-inout) 120ms forwards; }
.loader__bar { width: 140px; height: 3px; background: var(--mortar); border-radius: 2px; overflow: hidden; }
.loader__bar span { display: block; height: 100%; width: 38%; background: var(--navy); border-radius: 2px; animation: loader-bar 1000ms var(--ease-inout) infinite; }
@keyframes loader-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes loader-draw { to { stroke-dashoffset: 0; } }
@keyframes loader-bar { 0% { transform: translateX(-100%); } 100% { transform: translateX(290%); } }

/* Hero cycle: three brand slides, crossfade with a slow push-in on the live slide, red progress bars */
.hero__media--cycle { background: var(--navy-deep); }
.hero__media--cycle .hero__slide { position: absolute; inset: 0; opacity: 0; transition: opacity 1400ms ease; }
.hero__media--cycle .hero__slide.is-on { opacity: 1; }
.hero__media--cycle .hero__slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 50%); transform: scale(1); }
html.js .hero__media--cycle .hero__slide.is-on img { animation: hero-kb 7400ms linear forwards; }
@keyframes hero-kb { from { transform: scale(1); } to { transform: scale(1.07); } }
.hero__dots { position: absolute; left: var(--s-5); bottom: var(--s-5); z-index: 2; display: flex; gap: 6px; }
.hero__dots span { position: relative; width: 30px; height: 3px; background: var(--white-60); border-radius: 2px; overflow: hidden; }
.hero__dots span::after { content: ""; position: absolute; inset: 0; background: var(--tile-red); transform: scaleX(0); transform-origin: left; }
html.js .hero__dots span.is-on::after { animation: hero-dot 7400ms linear forwards; }
@keyframes hero-dot { to { transform: scaleX(1); } }
@media (min-width: 1024px) {
  .hero__media--cycle .hero__slide img { object-position: var(--pos, 58% 40%); }
  .hero__dots { left: auto; right: var(--s-6); bottom: var(--s-6); }
}

/* What happens when you call: photo behind a navy veil, live steps, promise strip */
.process--photo { position: relative; overflow: clip; background: var(--navy-deep); color: var(--white); }
.process__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.process__bg picture { display: block; }
.process__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.process__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 27, 64, 0.90) 0%, rgba(18, 27, 64, 0.80) 55%, rgba(18, 27, 64, 0.92) 100%); }
.process--photo .container { position: relative; z-index: 1; }
.process--photo h2 { color: var(--white); }
.process--photo .lede { color: var(--sky-85); }
.process--photo .steps::before { background: var(--white-20); }
.steps--live .step { cursor: pointer; transition: border-color 200ms; }
.steps--live .step:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
.steps--live .step h3 { position: relative; padding-bottom: var(--s-2); padding-right: var(--s-6); }
.steps--live .step h3::after { content: ""; position: absolute; left: 0; bottom: 0; width: 40px; height: 3px; background: var(--tile-red); transform: scaleX(0); transform-origin: left; transition: transform 320ms var(--ease-out); }
.steps--live .step__num { transition: background-color 200ms, transform 320ms var(--ease-out); }
.step__more { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 360ms var(--ease-out); }
.step__more > div { overflow: hidden; }
.step__more p { margin: 0; padding-top: var(--s-3); color: var(--lead); font-size: var(--t-small); max-width: 36ch; }
.step__more a { color: inherit; font-weight: 600; }
.step--last .step__more p { color: var(--sky-85); }
.step__cue { position: absolute; right: var(--s-4); top: var(--s-4); width: 22px; height: 22px; border: 1.5px solid var(--mortar); border-radius: 50%; }
.step__cue::before, .step__cue::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 1.5px; background: var(--navy); transform: translate(-50%, -50%); transition: transform 300ms var(--ease-out); }
.step__cue::after { transform: translate(-50%, -50%) rotate(90deg); }
.step--last .step__cue { border-color: var(--white-20); }
.step--last .step__cue::before, .step--last .step__cue::after { background: var(--white); }
.steps--live .step:focus-visible, .steps--live .step.is-open { border-color: var(--tile-red); }
.steps--live .step:focus-visible h3::after, .steps--live .step.is-open h3::after { transform: scaleX(1); }
.steps--live .step:focus-visible .step__num, .steps--live .step.is-open .step__num { background: var(--tile-red); transform: translateY(-3px); }
.steps--live .step:focus-visible .step__more, .steps--live .step.is-open .step__more { grid-template-rows: 1fr; }
.steps--live .step:focus-visible .step__cue::after, .steps--live .step.is-open .step__cue::after { transform: translate(-50%, -50%) rotate(0deg); }
@media (hover: hover) {
  .steps--live .step:hover { border-color: var(--tile-red); }
  .steps--live .step:hover h3::after { transform: scaleX(1); }
  .steps--live .step:hover .step__num { background: var(--tile-red); transform: translateY(-3px); }
  .steps--live .step:hover .step__more { grid-template-rows: 1fr; }
  .steps--live .step:hover .step__cue::after { transform: translate(-50%, -50%) rotate(0deg); }
}
.promises { list-style: none; margin: var(--s-7) 0 0; padding: var(--s-4) var(--s-5); display: grid; gap: var(--s-4); background: rgba(255, 255, 255, 0.07); border: 1px solid var(--white-12); border-radius: var(--r-card); }
.promises li { display: flex; align-items: center; gap: var(--s-3); font-weight: 700; font-stretch: 90%; letter-spacing: 0.01em; color: var(--white); }
.promises svg { width: 36px; height: 36px; flex: none; color: var(--white); background: var(--tile-red); border-radius: 50%; padding: 8px; }
@media (min-width: 768px) { .promises { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .promises { grid-template-columns: repeat(4, 1fr); padding: var(--s-5) var(--s-6); } }

/* CTA band: the hard hat photo under the navy, so the band reads as navy with depth rather than a flat block */
.cta--photo { position: relative; overflow: clip; }
.cta__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.cta__bg picture { display: block; }
.cta__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; }
.cta__veil { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(28, 42, 94, 0.95) 0%, rgba(28, 42, 94, 0.86) 55%, rgba(28, 42, 94, 0.78) 100%); }
.cta--photo > .container { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .hero__slide, .hero__slide img, .hero__dots span::after, .loader__box, .loader__rule, .loader__bar span, .step__more, .step__num, .step__cue::after, .steps--live .step h3::after { animation: none !important; transition: none !important; }
}

/* 33. Max's fifth review (21 Sept): photo page heroes, Checkatrade tick on the trust line, contact cards lift, Services before during after */
/* Trust line: the Checkatrade tick leads the numbers so it is clear where they come from */
.trust-line__seal { display: block; flex: none; width: 34px; height: auto; }
.page-hero--photo .trust-line__seal, .on-dark .trust-line__seal { width: 38px; background: var(--white); border-radius: 50%; padding: 2px; }

/* Page heroes on a photo: About, Services, Gallery, Contact. Navy veil strongest behind the text, photo clear on the right. */
.page-hero--photo { position: relative; overflow: clip; isolation: isolate; background: var(--navy-deep); border-bottom: 0; }
.page-hero__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.page-hero__bg picture { display: block; }
.page-hero__bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 40%); }
.page-hero__veil { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 27, 64, 0.88) 0%, rgba(18, 27, 64, 0.76) 100%); }
.page-hero--photo .page-hero__inner { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; min-height: clamp(340px, 36vw, 520px); padding-block: clamp(56px, 7vw, 104px); }
.page-hero--photo h1 { color: var(--white); max-width: 16ch; }
.page-hero--photo .lede { color: var(--sky-85); max-width: 52ch; }
.page-hero--photo .trust-line { color: var(--sky-85); }
.page-hero--photo .trust-line:hover { color: var(--white); }
@media (min-width: 1024px) {
  .page-hero__veil { background: linear-gradient(90deg, rgba(18, 27, 64, 0.95) 0%, rgba(18, 27, 64, 0.86) 36%, rgba(18, 27, 64, 0.44) 68%, rgba(18, 27, 64, 0.16) 100%); }
  .page-hero--centre .page-hero__veil { background: radial-gradient(ellipse at 50% 50%, rgba(18, 27, 64, 0.86) 0%, rgba(18, 27, 64, 0.70) 55%, rgba(18, 27, 64, 0.52) 100%); }
}

/* About hero on the photo: intro, facts and trust line, the van photo is no longer repeated here */
.page-hero--about .about-hero__text { max-width: 720px; }
.page-hero--photo .facts li { background: rgba(255, 255, 255, 0.08); border-color: var(--white-20); color: var(--white); }

/* Contact: the three ways to reach us sit over the bottom edge of the photo hero */
.page-hero--lift .page-hero__inner { padding-bottom: calc(clamp(56px, 7vw, 104px) + 48px); }
.routes-lift { position: relative; z-index: 2; padding-top: 0; }
.routes-lift .routes { margin-top: -48px; }
.routes-lift .route { border-color: transparent; box-shadow: 0 16px 40px rgba(18, 27, 64, 0.16); }
@media (min-width: 1024px) {
  .page-hero--lift .page-hero__inner { padding-bottom: calc(clamp(56px, 7vw, 104px) + 72px); }
  .routes-lift .routes { margin-top: -72px; }
}

/* Services: before, during and after from two real jobs. Tabs appear only when site.js has wired them (is-tabbed);
   without JS both jobs show stacked under their own titles. */
.bda { position: relative; overflow: clip; background: var(--navy-deep); color: var(--white); }
.bda__head { display: grid; gap: var(--s-5); margin-bottom: var(--s-7); }
.bda .section__head { margin-bottom: 0; }
.bda h2 { color: var(--white); }
.bda .lede { color: var(--sky-85); max-width: 56ch; }
.bda__tabs { display: none; }
.bda.is-tabbed .bda__tabs { display: inline-flex; flex-wrap: wrap; justify-self: start; gap: 4px; padding: 4px; background: rgba(255, 255, 255, 0.08); border: 1px solid var(--white-12); border-radius: 999px; }
.bda__tab { appearance: none; border: 0; background: transparent; color: var(--sky-85); font: inherit; font-size: var(--t-small); font-weight: 700; font-stretch: 90%; min-height: 44px; padding: 10px 18px; border-radius: 999px; cursor: pointer; transition: background-color 200ms, color 200ms; }
.bda__tab:hover { color: var(--white); }
.bda__tab[aria-selected="true"] { background: var(--white); color: var(--navy); }
.bda__tab:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.bda__panel + .bda__panel { margin-top: var(--s-8); }
.bda.is-tabbed .bda__panel + .bda__panel { margin-top: 0; }
.bda.is-tabbed .bda__panel[hidden] { display: none; }
.bda.is-tabbed .bda__panel:not([hidden]) { animation: bda-in 420ms var(--ease-out) both; }
@keyframes bda-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.bda__title { font-size: var(--t-h4); color: var(--white); margin-bottom: var(--s-5); }
.bda.is-tabbed .bda__title { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; margin: 0; }
.bda__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-6); }
.bda__step { position: relative; margin: 0; }
.bda__frame { position: relative; }
.bda__photo { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; padding: 0; border: 0; border-radius: var(--r-card); overflow: hidden; background: var(--navy); cursor: zoom-in; }
.bda__photo picture, .bda__photo img { display: block; width: 100%; height: 100%; }
.bda__photo img { object-fit: cover; transition: transform 700ms var(--ease-out); }
.bda__photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 27, 64, 0) 55%, rgba(18, 27, 64, 0.6) 100%); pointer-events: none; }
.bda__photo:focus-visible { outline: 3px solid var(--white); outline-offset: 3px; }
.bda__tag { position: absolute; left: var(--s-4); bottom: var(--s-4); z-index: 1; display: inline-flex; align-items: center; gap: 10px; padding: 6px 14px 6px 6px; border-radius: var(--r-ctl); background: var(--slate); color: var(--white); font-size: var(--t-small); font-weight: 800; font-stretch: 90%; letter-spacing: 0.06em; text-transform: uppercase; line-height: 1; }
.bda__num { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px; background: rgba(255, 255, 255, 0.16); font-size: 15px; font-stretch: 75%; letter-spacing: 0; font-variant-numeric: tabular-nums; }
.bda__step--during .bda__tag { background: var(--navy); }
.bda__step--after .bda__tag { background: var(--tile-red); }
.bda__cap { margin: var(--s-3) 0 0; color: var(--sky-85); font-size: var(--t-small); max-width: 38ch; }
.bda__more { display: inline-block; margin-top: var(--s-6); color: var(--white); font-weight: 700; text-decoration: underline; text-decoration-color: var(--tile-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.bda__more:hover { color: var(--white); text-decoration-color: var(--white); }
@media (hover: hover) { .bda__photo:hover img { transform: scale(1.04); } }
@media (min-width: 768px) {
  .bda__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--grid-gap); }
  /* a white roundel with a chevron on the gap between photos, so the three read as one sequence */
  .bda__step:not(:last-child) .bda__frame::after {
    content: ""; position: absolute; z-index: 3; top: 50%; right: calc(var(--grid-gap) / -2); width: 36px; height: 36px; transform: translate(50%, -50%); border-radius: 50%;
    background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M6 3l5 5-5 5' fill='none' stroke='%231C2A5E' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 16px no-repeat;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.3);
  }
}
@media (min-width: 1024px) {
  .bda__head { grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--s-8); }
}
@media (prefers-reduced-motion: reduce) {
  .bda__photo img, .bda.is-tabbed .bda__panel:not([hidden]) { transition: none !important; animation: none !important; }
}
/* Gallery: filter chips sit straight under the photo hero, no white band in between */
.page-hero--photo + .gallery { padding-top: 0; }
/* Contact cards: the email fits on one line in the lifted card from 1024 up */
@media (min-width: 1024px) { .routes-lift .route__big--email { font-size: clamp(15px, 0.6vw + 8px, 19px); letter-spacing: -0.01em; } }
/* Contact: the form panel centred under the lifted cards instead of hanging left */
.contact-form .cta__form { margin-inline: auto; }
/* Contact: no dead band between the lifted cards and the form */
.routes-lift { padding-bottom: 0; }
.routes-lift + .contact-form { padding-top: var(--s-7); }
/* Contact details at the end of the page: phone numbers (mobile and landline) beside the company details */
.details #hours-block:empty { display: none; }
.details__lines { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-4); }
.details__lines li { padding: 0; }
.details__label { display: block; margin-bottom: 2px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--lead); }
.details__num { font-size: var(--t-h3); font-weight: 800; font-stretch: 75%; letter-spacing: -0.01em; line-height: 1.1; color: var(--navy); text-decoration: none; font-variant-numeric: tabular-nums; }
.details__num:hover { color: var(--tile-red); }
@media (min-width: 768px) { .details > div + div { border-left: 1px solid var(--mortar); padding-left: var(--s-6); } }

/* 34. Max, 22 Sept: gallery organised (even grid of finished work, a dedicated before and after section), three before during after tabs */
.gallery__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--s-2) var(--s-5); margin-bottom: var(--s-5); }
.gallery__h { font-size: var(--t-display-2); }
.gallery__sub { margin: 0; color: var(--lead); max-width: 52ch; }
.gallery__jump { font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--tile-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.gallery__jump:hover { color: var(--tile-red); }

/* Finished work: even square tiles, captions always under the photo */
.gallery__grid--even { columns: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-5) var(--grid-gap); }
@media (min-width: 1024px) { .gallery__grid--even { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.gallery__grid--even .tile { margin: 0; }
.gallery__grid--even .tile__btn { aspect-ratio: 1; }
.gallery__grid--even .tile__btn picture { display: block; width: 100%; height: 100%; }
.gallery__grid--even .tile__btn img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 45%); transition: transform 500ms var(--ease-out); }
@media (hover: hover) { .gallery__grid--even .tile__btn:hover img { transform: scale(1.03); } }
.gallery__grid--even .tile figcaption, .ba__grid .tile figcaption { position: static; opacity: 1; background: none; color: var(--lead); padding: var(--s-2) 0 0; }

/* Before and after: its own band, every pair the same size (two square halves) */
.ba { background: var(--sky); }
.ba__grid { display: grid; gap: var(--s-6) var(--grid-gap); }
@media (min-width: 768px) { .ba__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ba__grid .tile { margin: 0; background: transparent; }
.ba__grid .tile__btn { background: var(--white); }
.ba__grid .pair__side { aspect-ratio: 1; }
.ba__grid .pair__side picture, .ba__grid .pair__side img { display: block; width: 100%; height: 100%; }
.gallery__more { margin: var(--s-7) 0 0; color: var(--slate); }
.gallery__more a { color: var(--navy); font-weight: 600; }

/* Before, during and after tabs: three jobs; on phones the tabs stack full width instead of wrapping inside a pill */
@media (max-width: 767px) {
  .bda.is-tabbed .bda__tabs { display: grid; justify-self: stretch; border-radius: var(--r-card); }
  .bda__tab { border-radius: var(--r-ctl); text-align: left; }
}

/* 35. Max, 22 Sept: social icons under the Home reviews; the Services chips bar goes dark so no white stripe sits between the navy hero and the navy section below */
.socials { display: flex; flex-direction: column; align-items: center; gap: var(--s-3); margin-top: var(--s-7); }
.socials__lab { font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lead); }
.socials__list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-4); }
.socials__btn { display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--navy); color: var(--white); transition: background-color 200ms, transform 200ms var(--ease-out); }
.socials__btn svg { width: 24px; height: 24px; }
.socials__btn:hover { background: var(--tile-red); color: var(--white); transform: translateY(-2px); }
.socials__btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

.chips-bar--sticky { background: var(--navy-deep); border-top: 1px solid var(--white-12); border-bottom: 1px solid var(--white-12); }
.chips-bar--sticky .container::after { background: linear-gradient(to right, rgba(18, 27, 64, 0), var(--navy-deep)); }
.chips-bar--sticky .chip { background: rgba(255, 255, 255, 0.06); border-color: var(--white-20); color: var(--sky-85); }
.chips-bar--sticky .chip:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--white-60); color: var(--white); }
.chips-bar--sticky .chip.is-active, .chips-bar--sticky .chip[aria-current="true"], .chips-bar--sticky .chip[aria-pressed="true"] { background: var(--white); border-color: var(--white); color: var(--navy); }
.chips-bar--sticky .chip .rule--nav { color: var(--tile-red); }
.chips-bar--sticky .chip:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .socials__btn { transition: none; } .socials__btn:hover { transform: none; } }

/* 36. Max, 22 Sept: materials and manufacturers strip smaller (a nice extra, not a headline); on Home it sits under "Twelve years" on white */
.brands { padding-block: clamp(28px, 3vw, 44px); }
.brands__head { margin-bottom: var(--s-3); }
.brands__head h2 { font-size: var(--t-label); font-weight: 700; font-stretch: 100%; letter-spacing: 0.08em; text-transform: uppercase; color: var(--lead); }
.brands__row { gap: var(--s-2) var(--s-5); }
.brand { padding: var(--s-2) var(--s-3); gap: 6px; }
.brand svg { height: 30px; }
.brands--light { background: var(--white); border-top: 1px solid var(--mortar); border-bottom: 1px solid var(--mortar); }
@media (max-width: 767px) { .brand svg { height: 26px; } .brands__row { gap: var(--s-2) var(--s-4); } }
/* Phones: service block columns never grow past the screen, and a long "See all ... photos" button wraps instead of pushing the page sideways */
.svc-block__grid > * { min-width: 0; }
@media (max-width: 767px) {
  .svc-block__media .btn { white-space: normal; max-width: 100%; text-align: center; line-height: 1.25; height: auto; min-height: 48px; padding-block: 12px; }
  /* Materials strip: two rows of three logos; the product line opens on tap instead of taking up room all the time */
  .brands__row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3) var(--s-2); justify-items: center; align-items: center; }
  .brand { padding: var(--s-2) 0; max-width: 100%; }
  .brand svg { height: 22px; max-width: 100%; }
  .brand__use { display: none; white-space: normal; text-align: center; max-width: 100%; }
  .brand.is-on .brand__use { display: block; opacity: 1; transform: none; }
}

/* 37. Max, 23 Sept: "Who you'll deal with" sits on the team photo. Full-width photo band, faces clear in the top two thirds,
   the two cards lifted over its bottom edge. */
.people--photo { background: var(--sky); padding-bottom: var(--section); overflow: clip; }
.people--photo .section__head { margin-bottom: var(--s-6); }
.people__band { position: relative; margin: 0; height: clamp(300px, 44vw, 680px); overflow: hidden; background: var(--navy-deep); }
.people__band picture { display: block; }
.people__band img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 40%; }
.people__band::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18, 27, 64, 0) 52%, rgba(18, 27, 64, 0.55) 100%); pointer-events: none; }
.people__cards-wrap { position: relative; z-index: 1; margin-top: calc(-1 * clamp(64px, 9vw, 150px)); }

.people--photo .people__cards { gap: var(--s-4); }
.people--photo .people__cards .person { position: relative; border: 0; border-radius: var(--r-panel); background: var(--white); box-shadow: 0 28px 60px -24px rgba(18, 27, 64, 0.45), 0 2px 6px rgba(18, 27, 64, 0.06); overflow: hidden; }
.people--photo .people__cards .person::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--tile-red); }
.people--photo .people__cards .person:nth-child(2)::before { background: var(--navy); }
.people--photo .people__cards .person__body { padding: var(--s-6) var(--s-5) var(--s-5); }
.person__head { display: flex; align-items: center; gap: var(--s-4); margin-bottom: var(--s-4); }
.person__icon { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; background: var(--tile-red); color: var(--white); }
.person:nth-child(2) .person__icon { background: var(--navy); }
.person__icon svg { width: 24px; height: 24px; }
.person__role { display: block; margin-bottom: 2px; font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tile-red); }
.person:nth-child(2) .person__role { color: var(--navy); }
.people--photo .people__cards .person h3 { display: block; margin: 0; font-size: var(--t-h3); }
.people--photo .people__cards .person h3::before { content: none; }
.people--photo .people__cards .person p { color: var(--slate); max-width: 46ch; margin-bottom: var(--s-5); }
@media (min-width: 768px) {
  .people--photo .people__cards { grid-template-columns: 1fr 1fr; gap: var(--grid-gap); }
  .people--photo .people__cards .person__body { padding: var(--s-7) var(--s-6) var(--s-6); }
}
@media (min-width: 1024px) {
  .people__band img { object-position: 50% 42%; }
}
/* no dead band between the photo hero and "Who you'll deal with" */
.people--photo { padding-top: clamp(48px, 5vw, 80px); padding-bottom: clamp(56px, 6vw, 96px); }
.people--photo .section__head { margin-bottom: var(--s-5); }

/* 38. Pre-launch phone pass (28 Sept): tap targets at least 40px, no card wider than a 320px screen */
.header__phone { min-width: 44px; justify-content: center; }
.crumbs a { display: inline-flex; align-items: center; min-height: 40px; }
.bda__more, .gallery__jump { display: inline-block; padding-block: 10px; }
.rev-card__more { padding-block: 12px; margin-block: -12px; }
.route__big, .details__num { display: inline-flex; align-items: center; min-height: 44px; }
.routes > * { min-width: 0; }
.route .btn { white-space: normal; max-width: 100%; text-align: center; height: auto; min-height: 48px; }
@media (max-width: 1023px) {
  .footer ul li { padding: 0; }
  .footer ul li a { display: inline-flex; align-items: center; min-height: 40px; }
}
.footer__bottom a { display: inline-flex; align-items: center; min-height: 40px; }

/* 39. Max, 29 Sept: gallery tiles and the before and after pairs came up empty on his iPhone. Every photo that sits inside a
   tappable box sized by aspect-ratio is now pinned to that box (Safari can give a percentage height inside a button or an
   aspect-ratio box a height of 0, and a lazy photo with no height is never fetched). Old browsers without aspect-ratio get
   the same square from padding. */
.gallery__grid--even .tile__btn, .ba__grid .pair__side, .svc-block__thumbs button, .svc-hero__lead .lb-btn, .bda__photo { position: relative; }
.gallery__grid--even .tile__btn picture, .ba__grid .pair__side picture, .svc-block__thumbs button picture, .svc-hero__lead .lb-btn picture, .bda__photo picture { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.gallery__grid--even .tile__btn img, .ba__grid .pair__side img, .svc-block__thumbs button img, .svc-hero__lead .lb-btn img, .bda__photo img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; object-fit: cover; }
.ba__grid .pair__lab { z-index: 1; }
@supports not (aspect-ratio: 1) {
  .gallery__grid--even .tile__btn, .ba__grid .pair__side, .svc-block__thumbs button { height: 0; padding-top: 100%; }
  .svc-hero__lead .lb-btn { height: 0; padding-top: 66.667%; }
  .bda__photo { height: 0; padding-top: 75%; }
}

/* 40. Max, 29 Sept: phones show the whole logo (the cropped "West London" only mark is gone), so the phone header is taller to
   keep "Roofing Maintenance Ltd" readable. */
@media (max-width: 1023px) {
  :root { --header-h: 74px; }
  .logo img { height: 58px; }
}
@media (min-width: 768px) and (max-width: 1023px) {
  :root { --header-h: 84px; }
  .logo img { height: 66px; }
}
@media (max-width: 359px) {
  :root { --header-h: 68px; }
  .logo img { height: 52px; }
}

/* 41. Max, 29 Sept: the Checkatrade strip on phones was a two by two grid with an empty cell and the seal alone on a third row.
   Now one tidy row: the seal first (it is where the numbers come from), then the three figures in equal columns split by thin rules. */
@media (max-width: 767px) {
  .proof__grid { grid-template-columns: auto repeat(3, minmax(0, 1fr)); align-items: center; padding-block: var(--s-4); }
  .proof__seal { order: -1; grid-column: auto; border-top: 0; padding: 0 var(--s-3) 0 0; margin: 0; border-right: 1px solid var(--white-12); align-self: stretch; }
  .proof__seal img { width: 48px; padding: 3px; }
  .proof__item { align-items: center; text-align: center; gap: 6px; padding: 2px var(--s-2); }
  .proof__item + .proof__item { border-left: 1px solid var(--white-12); }
  .proof__num { font-size: clamp(25px, 7.4vw, 34px); }
  .proof__lab { font-size: 12px; line-height: 1.25; letter-spacing: 0.01em; }
}
@media (max-width: 359px) {
  .proof__seal { padding-right: var(--s-2); }
  .proof__seal img { width: 40px; }
  .proof__item { padding-inline: 4px; }
  .proof__lab { font-size: 11px; }
}

/* 42. Trust line: the item gap was also applied inside each item, so "9.55 / 10" read as "9.55    / 10". Items keep their own
   spacing now and only the red square separates them. On Home phones the score and review count sit in the strip straight
   below, so the hero line keeps the other four points as a tidy two by two list instead of three ragged rows. */
.trust-line > span { gap: 0; }
.trust-line > span + span::before { margin-right: var(--s-4); }
@media (max-width: 767px) {
  .hero .trust-line { display: grid; grid-template-columns: repeat(2, max-content); gap: var(--s-3) var(--s-6); }
  .hero .trust-line__seal, .hero .trust-line > span:nth-of-type(1), .hero .trust-line > span:nth-of-type(2) { display: none; }
  .hero .trust-line > span::before { content: ""; width: 6px; height: 6px; margin-right: var(--s-2); background: var(--tile-red); flex: none; }
}
@media (max-width: 359px) {
  .hero .trust-line { gap: var(--s-3) var(--s-4); }
}
@media (max-width: 767px) { .proof__item { align-self: start; } }

/* 43. Trust lines under the page titles (About, Services, Gallery, Contact, Roof repairs) on phones: the Checkatrade tick on the
   left and the six points as a neat two column list beside it, every point marked the same way, instead of centred ragged rows */
@media (max-width: 767px) {
  .trust-line { display: grid; grid-template-columns: auto repeat(2, max-content); gap: var(--s-3) var(--s-5); align-items: center; }
  .page-hero--centre .trust-line { justify-content: center; }
  .trust-line__seal { grid-row: 1 / span 3; margin-right: var(--s-1); }
  .trust-line > span::before { content: ""; width: 6px; height: 6px; margin-right: var(--s-2); background: var(--tile-red); flex: none; }
}
@media (max-width: 767px) {
  .trust-line > span::before, .trust-line > span + span::before { margin-right: var(--s-2); }
}
/* small phones: the tick sits above the list so the two columns never run past the screen */
@media (max-width: 389px) {
  .trust-line { grid-template-columns: repeat(2, max-content); gap: var(--s-3) var(--s-4); }
  .trust-line__seal { grid-row: auto; grid-column: 1 / -1; margin: 0 0 var(--s-1); }
  .page-hero--centre .trust-line__seal { justify-self: center; }
}
.notfound ul li { padding: 0; }
.notfound ul a { display: inline-flex; align-items: center; min-height: 44px; font-weight: 600; }

/* 44. About hero on phones: the six company facts sit in one tidy panel, two columns with thin rules, instead of six loose pills
   in ragged rows. The trust line under it no longer repeats "Free estimates" and "Cards accepted", which are already facts. */
.about-hero__text .trust-line > span:nth-of-type(n+5) { display: none; }
@media (max-width: 767px) {
  .page-hero--photo .facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--white-20); border-radius: var(--r-card); background: rgba(255, 255, 255, 0.06); overflow: hidden; }
  .page-hero--photo .facts li { background: transparent; border: 0; border-radius: 0; padding: 12px; align-items: flex-start; line-height: 1.3; }
  .page-hero--photo .facts li:nth-child(n+3) { border-top: 1px solid var(--white-12); }
  .page-hero--photo .facts li:nth-child(even) { border-left: 1px solid var(--white-12); }
  .page-hero--photo .facts li::before { margin-top: 5px; }
  .about-hero__text .trust-line { grid-template-columns: auto repeat(2, max-content); }
  .about-hero__text .trust-line__seal { grid-row: 1 / span 2; }
}
@media (max-width: 389px) {
  .about-hero__text .trust-line { grid-template-columns: auto repeat(2, max-content); gap: var(--s-3) var(--s-4); }
  .about-hero__text .trust-line__seal { grid-row: 1 / span 2; grid-column: auto; width: 34px; }
}
@media (max-width: 767px) { .trust-line { justify-content: start; } }
/* Vetted by Checkatrade: two columns from 360px so the twelve checks are not one long list */
@media (min-width: 360px) and (max-width: 479px) {
  .vetted__checks { grid-template-columns: 1fr 1fr; gap: 0 var(--s-4); }
  .vetted__checks li { align-items: flex-start; font-size: var(--t-small); line-height: 1.3; }
  .vetted__checks .check { margin-top: 1px; }
}

/* 45. A service with one thumbnail: the thumbnail and its "See all" button share the row, no empty squares beside it */
.svc-block__thumbs--one .svc-block__more { grid-column: 2 / -1; margin: 0; display: flex; align-items: center; }
.svc-block__thumbs--one .svc-block__more .btn { width: 100%; white-space: normal; text-align: center; height: auto; min-height: 48px; line-height: 1.25; padding-block: 12px; }

/* 46. Trust line from 768px: the tick on the left and the six points in three even columns over two rows, every point marked
   the same way, so a wrapped row never starts with a stray separator. About shows four points (two are already facts). */
@media (min-width: 768px) {
  .trust-line { display: grid; grid-template-columns: auto repeat(3, max-content); gap: var(--s-3) var(--s-6); align-items: center; justify-content: start; }
  .page-hero--centre .trust-line { justify-content: center; }
  .trust-line__seal { grid-row: 1 / span 2; margin-right: var(--s-1); }
  .trust-line > span::before, .trust-line > span + span::before { content: ""; width: 6px; height: 6px; margin-right: var(--s-2); background: var(--tile-red); flex: none; }
  .about-hero__text .trust-line { grid-template-columns: auto repeat(2, max-content); }
}
/* wide photo page heroes (Services, Gallery, Contact) have room for the six points on one line from 1024px: keep them on one line there */
@media (min-width: 1024px) {
  .page-hero--photo .page-hero__inner > .trust-line { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
  .page-hero--photo .page-hero__inner > .trust-line > span::before { content: none; }
  .page-hero--photo .page-hero__inner > .trust-line > span + span::before { content: ""; margin-right: var(--s-5); }
}
@media (min-width: 768px) { .trust-line > .trust-line__seal { margin-right: -12px; } }
@media (min-width: 1024px) { .page-hero--photo .page-hero__inner > .trust-line > .trust-line__seal { margin-right: 0; } }
/* Before and after, two across: an odd last pair sits centred under the others instead of leaving half a row empty */
@media (min-width: 768px) {
  .ba__grid > .tile:last-child:nth-child(odd) { grid-column: 1 / -1; justify-self: center; width: calc(50% - var(--grid-gap) / 2); }
}

/* 47. Cookie banner (Max, 30 Sept: PECR, Google Consent Mode v2). A card at the bottom of the screen, never a wall: the page
   behind it scrolls and works. Accept and Reject are the same size, colour and weight. On phones it sits over the Call and
   WhatsApp bar until answered; the menu, lightbox and loading screen stay above it. */
.consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 44; background: var(--navy-deep); color: var(--white); border-top: 3px solid var(--tile-red); box-shadow: 0 -12px 40px -12px rgba(18, 27, 64, 0.45); padding: var(--s-4) var(--gutter) calc(var(--s-4) + env(safe-area-inset-bottom)); animation: consent-in 260ms var(--ease-out); }
@keyframes consent-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.consent__inner { max-width: 560px; }
.consent__title { margin: 0 0 var(--s-1); font-size: var(--t-label); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--white); }
.consent__text, .consent__now { margin: 0 0 var(--s-3); font-size: var(--t-small); line-height: 1.45; color: var(--sky-85); }
.consent__now { color: var(--white); font-weight: 600; }
.consent__text a { color: var(--white); text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
.consent__text a:hover { color: var(--white); text-decoration-color: var(--tile-red); }
.consent__btns { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-3); }
.consent__btn { min-height: 48px; padding: 12px 16px; background: var(--white); color: var(--navy); border-color: var(--white); }
.consent__btn:hover { background: var(--sky); border-color: var(--sky); color: var(--navy); }
.consent__btn:focus-visible { outline: 3px solid var(--tile-red); outline-offset: 2px; }
@media (min-width: 768px) {
  .consent { left: auto; right: var(--s-5); bottom: var(--s-5); max-width: 460px; border-top: 0; border-left: 4px solid var(--tile-red); border-radius: var(--r-panel); padding: var(--s-5); }
}
@media (prefers-reduced-motion: reduce) { .consent { animation: none; } }

/* "Cookie settings" beside Privacy in the footer, and "Change cookie settings" on the privacy page: buttons that read as links */
.footer__legal { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0 var(--s-5); }
.footer__cookies { display: inline-flex; align-items: center; min-height: 40px; padding: 0; border: 0; background: none; font: inherit; color: var(--sky-80); cursor: pointer; }
.footer__cookies:hover { color: var(--white); text-decoration: underline; }
.footer__cookies:focus-visible { outline: 2px solid var(--white); outline-offset: 2px; }
.legal h2 { margin: var(--s-7) 0 var(--s-3); font-size: var(--t-h3); color: var(--navy); }
.legal__cookies { display: inline; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--navy); text-decoration: underline; text-decoration-color: var(--tile-red); text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.legal__cookies:hover { color: var(--tile-red); }
.legal__table { overflow-x: auto; margin: 0 0 var(--s-5); }
.legal__table table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 10px 12px 10px 0; border-bottom: 1px solid var(--mortar); }
.legal__table th { font-weight: 700; color: var(--navy); }
.legal__table td:first-child { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; white-space: nowrap; }
/* Privacy page: the text lines up with the page title on the left instead of floating in the middle */
.container.legal { max-width: var(--container, 1320px); }
.legal > * { max-width: 68ch; }
.legal__table th { white-space: nowrap; }
/* the cookie table stacks on phones: each cookie is a small block of label and value instead of four squeezed columns */
@media (max-width: 599px) {
  .legal__table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .legal__table table, .legal__table tbody, .legal__table tr, .legal__table td { display: block; }
  .legal__table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--mortar); }
  .legal__table td { display: grid; grid-template-columns: 7.5em minmax(0, 1fr); gap: var(--s-3); padding: 4px 0; border: 0; white-space: normal; }
  .legal__table td::before { content: attr(data-label); font-family: Archivo, system-ui, sans-serif; font-weight: 700; color: var(--navy); }
}
/* Form: a note under the thank-you when a photo could not go; a failed send leaves the fields and button in place */
.form__msg--note { background: var(--sky); color: var(--slate); }
.form.is-failed .form__msg--fail { display: block; }
/* arriving from one of our own pages: no loading screen, not even for a frame */
html.no-loader .loader { display: none; }
/* the cookie card never runs off a zoomed-in screen; focus moved to the page start after a first choice shows no ring */
.consent { max-height: 70vh; overflow-y: auto; }
#main:focus { outline: none; }
/* while the cookie card is up, the end of the page can scroll above it, and on phones the Call and WhatsApp bar steps aside
   (it would sit under the card; the phone icon in the header still rings) */
body.consent-open { padding-bottom: calc(var(--consent-h, 0px) + 8px); }
@media (max-width: 767px) { body.consent-open .sticky-bar { transform: translateY(110%); visibility: hidden; } }
/* "What it covers" heading now sits before its list (a heading inside a ul is invalid HTML) */
.covers__h { font-size: var(--t-h4); margin-bottom: var(--s-2); }
/* link from the roof repairs block on Services to its own page */
.svc-block__page { margin: calc(-1 * var(--s-2)) 0 var(--s-5); }
.svc-block__page a { display: inline-flex; align-items: center; min-height: 40px; font-weight: 700; color: var(--navy); text-decoration: underline; text-decoration-color: var(--tile-red); text-decoration-thickness: 2px; text-underline-offset: 5px; }
.svc-block__page a:hover { color: var(--tile-red); }

/* 48. Agency credit (Max, 1 Oct): "Site by" and the MAVEX lockup at the end of the footer's bottom line. One colour so it sits in
   the footer's own grey, the blue accent kept as the MAVEX signature, 9px tall. Quiet until hovered when it is a link. */
.credit { display: inline-flex; align-items: center; gap: 7px; min-height: 40px; color: var(--sky-80); text-decoration: none; opacity: 0.75; transition: opacity 200ms; white-space: nowrap; }
.credit__by { font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; }
.credit__mark { display: block; height: 9px; width: auto; flex: none; }
.credit__accent { fill: #7A93FF; }
a.credit:hover, a.credit:focus-visible { opacity: 1; color: var(--white); text-decoration: none; }
a.credit:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }
@media (min-width: 768px) { .footer__legal .credit { padding-left: var(--s-5); border-left: 1px solid var(--white-12); } }
@media (prefers-reduced-motion: reduce) { .credit { transition: none; } }

/* 49. Launch performance (1 Oct). The Home hero photo is never opacity-hidden (it sits under the loader and only scales in), so
   it counts as painted the moment it arrives. Empty JS-filled containers keep their space, so the page does not jump when they
   fill. (If site.js never arrives, a timer in the head drops the loader and shows the page as plain HTML after 8 seconds.) */
html.js .hero [data-hero="photo"] { opacity: 1; }
.chips:empty { min-height: 64px; }
#gallery-grid:empty { min-height: 150vh; }

/* 50. Launch accessibility pass (1 Oct). Keyboard focus is visible everywhere: solid navy on light sections, white on the dark
   ones (the old ring was 40% navy, invisible on navy). Form fields keep their own navy border plus soft ring. Grey small text
   passes AA on the sky background, the postcode prompt is readable, focused items on phones stay clear of the Call bar, and the
   last few standalone links are 40px or more to tap. */
:root { --lead: #646A72; }
:focus-visible { outline: 3px solid var(--navy); outline-offset: 2px; }
.footer :focus-visible, .cta :focus-visible, .proof :focus-visible, .cov :focus-visible, .page-hero--photo :focus-visible,
.bda :focus-visible, .process--photo :focus-visible, .lightbox :focus-visible, .consent a:focus-visible,
.sticky-bar :focus-visible, .footer__bottom :focus-visible { outline-color: var(--white); }
.socials__btn:focus-visible, .field--file input:focus-visible + .field__file-row .btn { outline-color: var(--navy); }
.cov__input::placeholder { color: rgba(255, 255, 255, 0.6); }
@media (max-width: 1023px) { html { scroll-padding-bottom: calc(var(--sticky-h) + 16px); } }
.related__links a, .svc-reviews__link a { display: inline-flex; align-items: center; min-height: 44px; }
.legal__cookies { display: inline-flex; align-items: center; min-height: 40px; }
/* white panels inside dark sections keep the navy ring (the CTA quote form, the process step cards' own links) */
.cta__form :focus-visible, .process--photo .step :focus-visible { outline-color: var(--navy); }

/* 51. Privacy line under the quote form (1 Oct). The form always sits on the white .cta__form panel. */
.form__note { font-size: var(--t-small); color: var(--lead); margin-top: calc(var(--s-3) - var(--s-5)); }
.form__note a { color: var(--navy); font-weight: 600; text-decoration: underline; text-decoration-color: var(--tile-red); text-underline-offset: 3px; }
.form__note a:hover { color: var(--tile-red); }
.form.is-done .form__note { display: none; }