:root {
  --ink: #161616;
  --muted: #66635f;
  --paper: #ffffff;
  --soft: #f4f2ed;
  --line: #dedad2;
  --accent: #c9973d;
  --accent-dark: #8c6624;
  --max: 1180px;
  --narrow: 780px;
  --radius: 16px;
  --shadow: 0 18px 50px rgba(0,0,0,.08);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--ink); background: var(--paper); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; line-height: 1.6; }
a { color: inherit; text-decoration-color: rgba(22,22,22,.35); text-underline-offset: 3px; }
a:hover { text-decoration-color: var(--accent-dark); }
img { max-width: 100%; height: auto; }
.wrap { width: min(calc(100% - 36px), var(--max)); margin-inline: auto; }
.wrap-narrow { width: min(calc(100% - 36px), var(--narrow)); margin-inline: auto; }
.skip-link { position: fixed; left: 12px; top: -60px; z-index: 9999; background:#fff; padding:10px 14px; }
.skip-link:focus { top: 12px; }
.topbar { background: #111; color: #eee; font-size: 13px; }
.topbar-inner { display:flex; gap:20px; justify-content:space-between; padding-block:8px; }
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(255,255,255,.96); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(0,0,0,.08); }
.header-inner { min-height: 78px; display:grid; grid-template-columns:auto 1fr auto; gap:28px; align-items:center; }
.brand-fallback { display:flex; align-items:center; gap:10px; text-decoration:none; }
.brand-mark { display:grid; place-items:center; width:46px; height:46px; border-radius:12px; background:var(--ink); color:#fff; font-weight:800; letter-spacing:-1px; }
.brand-name { font-weight:800; font-size:20px; line-height:1; }
.brand-name small { display:block; margin-top:5px; font-size:10px; font-weight:600; color:var(--muted); letter-spacing:.04em; text-transform:uppercase; }
.custom-logo { max-height: 72px; max-width: 165px; width:auto; }
.primary-nav { justify-self:end; }
.epr-menu { display:flex; gap:20px; align-items:center; list-style:none; padding:0; margin:0; }
.epr-menu a { text-decoration:none; font-weight:650; font-size:14px; }
.epr-menu li { position:relative; }
.epr-menu .sub-menu { display:none; position:absolute; min-width:250px; background:#fff; padding:10px; list-style:none; border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); }
.epr-menu li:hover > .sub-menu, .epr-menu li:focus-within > .sub-menu { display:block; }
.epr-menu .sub-menu li + li { margin-top:4px; }
.epr-menu .sub-menu a { display:block; padding:8px 10px; border-radius:8px; }
.epr-menu .sub-menu a:hover { background:var(--soft); }
.button { display:inline-flex; align-items:center; justify-content:center; gap:8px; border-radius:999px; padding:11px 18px; background:var(--ink); color:#fff; text-decoration:none; font-weight:800; border:1px solid var(--ink); }
.button:hover { background:#000; text-decoration:none; }
.button-large { padding:14px 22px; }
.button-ghost { background:transparent; color:var(--ink); }
.button-ghost:hover { background:var(--soft); }
.button-ghost-dark { background:transparent; border-color:#fff; color:#fff; }
.button-ghost-dark:hover { background:#fff; color:#111; }
.menu-toggle { display:none; }
.hero { padding:72px 0; background:linear-gradient(130deg, #fff 0%, #f4f2ed 55%, #ece7dc 100%); border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:minmax(0,1.25fr) minmax(320px,.75fr); gap:50px; align-items:center; }
.eyebrow { margin:0 0 10px; text-transform:uppercase; letter-spacing:.12em; font-size:12px; font-weight:850; color:var(--accent-dark); }
h1,h2,h3 { line-height:1.08; letter-spacing:-.025em; }
h1 { margin:.1em 0 .35em; font-size:clamp(42px, 6vw, 76px); }
h2 { font-size:clamp(30px, 4vw, 48px); margin:.1em 0 .35em; }
h3 { font-size:22px; }
.hero-lead { max-width:760px; font-size:20px; color:#3d3a36; }
.hero-actions { display:flex; gap:12px; flex-wrap:wrap; margin:28px 0 14px; }
.hero-note { font-size:14px; color:var(--muted); }
.hero-panel { background:#171717; color:#fff; border-radius:var(--radius); padding:30px; box-shadow:var(--shadow); }
.hero-panel-title { font-size:24px; font-weight:850; margin-bottom:18px; }
.check-list { list-style:none; padding:0; margin:0; }
.check-list li { position:relative; padding:10px 0 10px 28px; border-bottom:1px solid rgba(255,255,255,.11); }
.check-list li:last-child { border-bottom:0; }
.check-list li::before { content:'✓'; position:absolute; left:0; color:#e6bd70; font-weight:900; }
.section { padding:76px 0; }
.section-soft { background:var(--soft); }
.section-dark { background:#171717; color:#f7f7f4; }
.section-heading { max-width:760px; margin-bottom:30px; }
.section-heading p:not(.eyebrow) { color:var(--muted); font-size:18px; }
.section-dark .section-heading p, .section-dark p { color:#d8d5cf; }
.split-copy { display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:start; }
.split-copy p { font-size:18px; }
.epr-card-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.epr-card { display:block; padding:25px; border:1px solid var(--line); border-radius:var(--radius); text-decoration:none; background:#fff; transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.epr-card:hover { transform:translateY(-2px); box-shadow:var(--shadow); border-color:#c8c1b4; }
.epr-card h3 { margin:0 0 8px; }
.epr-card p { margin:0; color:var(--muted); }
.area-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:12px; }
.area-link { display:flex; justify-content:space-between; align-items:center; padding:16px 18px; border:1px solid var(--line); border-radius:12px; text-decoration:none; font-weight:800; }
.area-link:hover { background:var(--soft); }
.row-heading { max-width:none; display:flex; justify-content:space-between; gap:30px; align-items:end; }
.text-link { font-weight:800; text-decoration:none; border-bottom:1px solid currentColor; }
.post-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.post-card { background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }
.post-card-image { display:block; aspect-ratio:16/10; overflow:hidden; background:#ddd; }
.post-card-image img { width:100%; height:100%; object-fit:cover; }
.post-card-body { padding:22px; }
.post-card h2 { font-size:22px; margin:8px 0 10px; }
.post-card h2 a { text-decoration:none; }
.post-card p { color:var(--muted); }
.post-meta { color:var(--muted); font-size:13px; display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.cta-section { background:#c9973d; }
.cta-box { display:flex; justify-content:space-between; gap:40px; align-items:center; }
.cta-box h2 { max-width:750px; }
.cta-actions { display:flex; flex-direction:column; gap:10px; min-width:220px; }
.content-shell { padding:58px 0 80px; }
.page-header { max-width:820px; margin-bottom:38px; }
.page-header h1, .single-header h1 { font-size:clamp(38px, 5vw, 62px); }
.page-article { max-width:1050px; }
.prose { font-size:18px; }
.prose > * { max-width:760px; }
.prose > .alignwide { max-width:1050px; }
.prose h2 { margin-top:2em; font-size:36px; }
.prose h3 { margin-top:1.8em; }
.prose ul, .prose ol { padding-left:1.25em; }
.prose a { font-weight:700; }
.blog-prose > p { margin:0 0 1.35em; }
.single-header { margin-bottom:30px; }
.single-featured { margin:0 0 35px; }
.single-featured img { width:100%; border-radius:var(--radius); }
.post-cta { margin-top:45px; padding:22px 24px; border-left:4px solid var(--accent); background:var(--soft); }
.post-cta p { margin-bottom:0; }
.archive-header { max-width:800px; }
.pagination { margin-top:35px; }
.pagination .nav-links { display:flex; gap:8px; flex-wrap:wrap; }
.pagination a, .pagination span { padding:8px 12px; border:1px solid var(--line); border-radius:8px; text-decoration:none; }
.site-footer { background:#111; color:#eee; padding:54px 0 90px; }
.footer-grid { display:grid; grid-template-columns:2fr 1fr 1fr; gap:45px; }
.footer-brand { font-size:24px; }
.footer-heading { font-size:15px; text-transform:uppercase; letter-spacing:0; color:#e6bd70; }
.footer-menu { list-style:none; padding:0; margin:0; }
.footer-menu li + li { margin-top:7px; }
.site-footer a { color:#fff; }
.muted { color:#aaa; }
.footer-bottom { margin-top:36px; padding-top:18px; border-top:1px solid #333; display:flex; justify-content:space-between; gap:20px; color:#aaa; font-size:13px; }
.mobile-callbar { display:none; }
.epr-contact-form { max-width:760px; }
.epr-form-grid { display:grid; grid-template-columns:1fr 1fr; gap:14px; }
.epr-field { margin-bottom:14px; }
.epr-field label { display:block; font-weight:800; margin-bottom:6px; }
.epr-field input, .epr-field textarea { width:100%; padding:12px 13px; border:1px solid #bbb5ac; border-radius:10px; font:inherit; }
.epr-field textarea { min-height:150px; resize:vertical; }
.epr-form-note { color:var(--muted); font-size:14px; }
.epr-alert { padding:14px 16px; border-radius:10px; margin-bottom:18px; background:#eff7ee; border:1px solid #bfd5bc; }
.epr-alert.error { background:#fff0ef; border-color:#efc2bd; }

@media (max-width: 960px) {
  .header-inner { grid-template-columns:auto auto; }
  .header-call { display:none; }
  .menu-toggle { display:inline-flex; justify-self:end; border:1px solid var(--line); background:#fff; border-radius:999px; padding:9px 14px; font-weight:800; }
  .primary-nav { display:none; grid-column:1/-1; justify-self:stretch; padding-bottom:18px; }
  .primary-nav.is-open { display:block; }
  .epr-menu { display:block; }
  .epr-menu li + li { margin-top:5px; }
  .epr-menu a { display:block; padding:8px 4px; }
  .epr-menu .sub-menu { display:block; position:static; box-shadow:none; border:0; padding:0 0 0 16px; }
  .hero-grid, .split-copy { grid-template-columns:1fr; }
  .epr-card-grid, .post-grid { grid-template-columns:repeat(2,1fr); }
  .area-grid { grid-template-columns:repeat(2,1fr); }
  .footer-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width: 640px) {
  body { padding-bottom:58px; }
  .topbar-inner { display:block; text-align:center; }
  .topbar-inner span:last-child { display:none; }
  .header-inner { min-height:68px; }
  .hero { padding:48px 0; }
  .hero-lead { font-size:18px; }
  .section { padding:52px 0; }
  .epr-card-grid, .post-grid, .area-grid, .footer-grid, .epr-form-grid { grid-template-columns:1fr; }
  .row-heading, .cta-box, .footer-bottom { display:block; }
  .row-heading .text-link { display:inline-block; margin-top:12px; }
  .cta-actions { margin-top:20px; }
  .mobile-callbar { position:fixed; display:grid; grid-template-columns:1fr 1fr; bottom:0; left:0; right:0; z-index:200; background:#111; box-shadow:0 -8px 30px rgba(0,0,0,.18); }
  .mobile-callbar a { color:#fff; text-decoration:none; text-align:center; font-weight:850; font-size:20px; padding:16px 8px; }
  .mobile-callbar a + a { background:var(--accent); color:#111; }
}

/* Homepage visual treatment v2 */
.hero-visual-layout { padding:62px 0 58px; }
.hero-grid-visual { grid-template-columns:minmax(0,1.02fr) minmax(360px,.98fr); }
.hero-art { position:relative; }
.hero-art > img { display:block; width:100%; border-radius:28px; box-shadow:0 30px 70px rgba(0,0,0,.14); }
.hero-art > img.hero-photo { aspect-ratio: 4 / 3; object-fit: cover; object-position: center; }
/* 5.4.125: the WebP <picture> wrapper must preserve the original <img> geometry. */
.hero-art > picture { display:block; width:100%; }
.hero-art > picture > img { display:block; width:100%; border-radius:28px; box-shadow:0 30px 70px rgba(0,0,0,.14); }
.hero-art > picture > img.hero-photo { aspect-ratio:4 / 3; object-fit:cover; object-position:center; }

.floating-note { position:absolute; left:-28px; bottom:28px; max-width:250px; padding:18px 20px; border-radius:16px; background:#111; color:#fff; box-shadow:0 20px 40px rgba(0,0,0,.22); }
.floating-note strong,.floating-note span { display:block; }
.floating-note span { margin-top:4px; color:#ddd; font-size:13px; }
.mini-trust { display:flex; flex-wrap:wrap; gap:8px; margin-top:22px; }
.mini-trust span { padding:8px 11px; border:1px solid #ddd4c4; border-radius:999px; background:#fff; font-size:12px; font-weight:800; }
.proof-strip { border-block:1px solid var(--line); background:#fff; }
.proof-grid { display:grid; grid-template-columns:repeat(4,1fr); }
.proof-grid > div { padding:21px 22px; border-right:1px solid var(--line); }
.proof-grid > div:last-child { border-right:0; }
.proof-grid strong,.proof-grid span { display:block; }
.proof-grid strong { font-size:15px; }
.proof-grid span { color:#777; font-size:13px; }
.visual-intro-grid { display:grid; grid-template-columns:.8fr 1.2fr; gap:60px; align-items:center; }
.feature-art img { display:block; width:100%; aspect-ratio:1.525 / 1; object-fit:cover; object-position:center; border-radius:22px; }
.epr-card-grid .epr-card { min-height:245px; display:flex; flex-direction:column; position:relative; overflow:hidden; }
.epr-card-grid .epr-card::before { content:'01'; display:grid; place-items:center; width:45px; height:45px; margin-bottom:26px; border-radius:12px; background:#efe8dc; color:#7b5a24; font-weight:900; }
.epr-card-grid .epr-card:nth-child(2)::before { content:'02'; }
.epr-card-grid .epr-card:nth-child(3)::before { content:'03'; }
.epr-card-grid .epr-card:nth-child(4)::before { content:'04'; }
.epr-card-grid .epr-card:nth-child(5)::before { content:'05'; }
.epr-card-grid .epr-card:nth-child(6)::before { content:'06'; }
.epr-card-grid .epr-card h3 { margin-top:0; }
.epr-card-grid .epr-card p { margin-bottom:0; }
.post-card-image { min-height:220px; }
.post-card:not(:has(.post-card-image))::before { content:''; display:block; aspect-ratio:16/10; background:linear-gradient(135deg,#ece7dc,#d9cfbd); }
.why-points p { padding-bottom:18px; border-bottom:1px solid #333; }
.why-points strong { color:#fff; }

@media (max-width: 960px) {
  .hero-grid-visual,.visual-intro-grid { grid-template-columns:1fr; }
  .hero-art { max-width:760px; }
  .floating-note { left:18px; }
  .proof-grid { grid-template-columns:1fr 1fr; }
  .proof-grid > div:nth-child(2) { border-right:0; }
}
@media (max-width: 640px) {
  .hero-visual-layout { padding:44px 0; }
  .floating-note { position:static; max-width:none; margin:-10px 16px 0; }
  .proof-grid > div { padding:15px 10px; }
}


/* Service + Area detail page visual treatment v1.5 */
.detail-page {
  margin-top: -58px;
}
.detail-hero {
  padding: 58px 0 62px;
  background: linear-gradient(135deg, #fff 0%, #f6f3ed 56%, #eee7db 100%);
  border-bottom: 1px solid var(--line);
}
.detail-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(330px, .8fr);
  gap: 58px;
  align-items: center;
}
.detail-hero-copy {
  max-width: 760px;
}
.detail-hero .eyebrow a {
  text-decoration: none;
}
.detail-hero h1 {
  margin: .08em 0 .32em;
  font-size: clamp(44px, 5.5vw, 70px);
}
.detail-lead {
  max-width: 760px;
  font-size: 20px;
  color: #3f3b36;
}
.detail-lead p {
  margin: 0;
}
.detail-trust-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}
.detail-trust-row span {
  padding: 8px 11px;
  border: 1px solid #d9d0c1;
  border-radius: 999px;
  background: rgba(255,255,255,.8);
  font-size: 12px;
  font-weight: 800;
}
.detail-contact-card {
  padding: 28px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
  box-shadow: var(--shadow);
}
.detail-contact-card .eyebrow {
  color: #e5bd73;
}
.detail-contact-card h2 {
  margin: .2em 0 .45em;
  font-size: 30px;
}
.detail-contact-card p:not(.eyebrow) {
  color: #d8d5cf;
}
.detail-contact-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 22px;
}
.detail-contact-card .button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.detail-contact-card .button:hover {
  background: #eee;
}
.detail-contact-card .button-ghost-dark {
  background: transparent;
  color: #fff;
}
.detail-contact-card .button-ghost-dark:hover {
  background: #fff;
  color: #111;
}
.detail-body {
  padding-top: 62px;
  padding-bottom: 82px;
}
.detail-prose {
  font-size: 17px;
}
.detail-prose > * {
  max-width: 820px;
}
.detail-prose > h2 {
  max-width: 820px;
  margin-top: 2.25em;
  padding-top: 1.15em;
  border-top: 1px solid var(--line);
  font-size: clamp(28px, 3vw, 38px);
}
.detail-prose > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
.detail-prose > p {
  color: #37342f;
}
.detail-prose > ul {
  max-width: 820px;
}
.service-detail .detail-prose > ul {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px 14px;
  padding: 0;
  list-style: none;
}
.service-detail .detail-prose > ul li {
  position: relative;
  padding: 13px 14px 13px 38px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
}
.service-detail .detail-prose > ul li::before {
  content: '✓';
  position: absolute;
  left: 15px;
  top: 12px;
  font-weight: 900;
  color: var(--accent-dark);
}
.detail-prose .epr-service-work,
.detail-prose .epr-area-work,
.detail-prose > .alignwide {
  max-width: 1050px;
}
.epr-service-work,
.epr-area-work {
  margin-top: 58px;
  padding-top: 8px;
}
.epr-service-work > h2,
.epr-area-work > h2 {
  margin-bottom: 24px;
  font-size: clamp(28px, 3vw, 38px);
}
.area-detail .detail-prose > .epr-card-grid {
  margin-top: 28px;
}
.detail-prose .epr-card-grid {
  max-width: 1050px;
  margin-top: 28px;
}
.detail-prose .epr-card-grid .epr-card {
  min-height: 220px;
}
.detail-prose > h2:last-of-type + p {
  margin-bottom: 0;
}

@media (max-width: 960px) {
  .detail-hero-grid {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .detail-contact-card {
    max-width: 700px;
  }
}
@media (max-width: 640px) {
  .detail-page {
    margin-top: -58px;
  }
  .detail-hero {
    padding: 42px 0 44px;
  }
  .detail-hero h1 {
    font-size: 42px;
  }
  .detail-lead {
    font-size: 18px;
  }
  .detail-contact-card {
    padding: 22px;
  }
  .detail-contact-card h2 {
    font-size: 26px;
  }
  .detail-body {
    padding-top: 44px;
    padding-bottom: 58px;
  }
  .service-detail .detail-prose > ul {
    grid-template-columns: 1fr;
  }
}


/* Service page photo + lower CTA v1.6 */
.detail-service-photo {
  position: relative;
  min-height: 360px;
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #ddd;
  box-shadow: var(--shadow);
}
.detail-service-photo img {
  width: 100%;
  height: 100%;
  min-height: 360px;
  object-fit: cover;
  display: block;
}
.detail-service-photo figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(17,17,17,.90);
  color: #fff;
}
.detail-service-photo figcaption .eyebrow {
  margin: 0;
  color: #e5bd73;
}
.detail-service-photo figcaption strong {
  font-size: 15px;
  line-height: 1.35;
}
.service-inline-cta {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: 54px;
  margin-bottom: 14px;
  padding: 28px 30px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
  box-shadow: var(--shadow);
}
.detail-prose > .service-inline-cta {
  max-width: 1050px;
}
.service-inline-cta .eyebrow {
  margin-bottom: 5px;
  color: #e5bd73;
}
.service-inline-cta h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(28px, 3vw, 38px);
}
.service-inline-cta p:not(.eyebrow) {
  margin: 0;
  color: #d8d5cf;
}
.service-inline-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
.service-inline-cta .button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.service-inline-cta .button:hover {
  background: #eee;
}
.service-inline-cta .button-ghost-dark {
  background: transparent;
  color: #fff;
}
.service-inline-cta .button-ghost-dark:hover {
  background: #fff;
  color: #111;
}

@media (max-width: 760px) {
  .detail-service-photo,
  .detail-service-photo img {
    min-height: 280px;
  }
  .service-inline-cta {
    grid-template-columns: 1fr;
    gap: 20px;
  }
  .service-inline-cta-actions {
    justify-content: flex-start;
  }
}


/* v1.7: CTA back in hero; real-work image moved to the end */
.service-bottom-photo {
  position: relative;
  max-width: 1050px !important;
  margin-top: 56px;
  margin-bottom: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #ddd;
  box-shadow: var(--shadow);
}
.service-bottom-photo img {
  width: 100%;
  height: 420px;
  object-fit: cover;
  display: block;
}
.service-bottom-photo figcaption {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 14px 16px;
  border-radius: 12px;
  background: rgba(17,17,17,.90);
  color: #fff;
}
.service-bottom-photo figcaption .eyebrow {
  margin: 0;
  color: #e5bd73;
}
.service-bottom-photo figcaption strong {
  font-size: 15px;
  line-height: 1.35;
}

@media (max-width: 640px) {
  .service-bottom-photo img {
    height: 280px;
  }
}


/* v2.0: blurred real-work backgrounds for service cards */
.epr-card-grid .epr-card {
  background-color:#171717;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  border-color:rgba(255,255,255,.13);
  color:#fff;
  box-shadow:0 8px 28px rgba(0,0,0,.08);
}
.epr-card-grid .epr-card:nth-child(1) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-emergency.webp');
}
.epr-card-grid .epr-card:nth-child(2) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-lock-repairs.webp');
}
.epr-card-grid .epr-card:nth-child(3) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-upvc-multipoint.webp');
}
.epr-card-grid .epr-card:nth-child(4) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-patio-sliding-bifold.webp');
}
.epr-card-grid .epr-card:nth-child(5) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-window.webp');
}
.epr-card-grid .epr-card:nth-child(6) {
  background-image:linear-gradient(rgba(15,15,15,.51),rgba(15,15,15,.76)),url('../img/service-cards/service-security.webp');
}
.epr-card-grid .epr-card h3 { color:#fff; position:relative; z-index:1; }
.epr-card-grid .epr-card p { color:rgba(255,255,255,.88); position:relative; z-index:1; }
.epr-card-grid .epr-card::before {
  position:relative;
  z-index:1;
  background:rgba(239,232,220,.94);
  color:#6f501f;
  box-shadow:0 3px 14px rgba(0,0,0,.12);
}
.epr-card-grid .epr-card:hover {
  border-color:rgba(255,255,255,.30);
  box-shadow:0 14px 34px rgba(0,0,0,.16);
}

/* v2.2 — brighten blurred service-card backgrounds a further ~10% */
.epr-service-card::before,
.service-card::before {
  opacity: .675;
}


/* v2.3 — About page */
.about-page { margin-top: -58px; }
.about-hero {
  padding: 58px 0 64px;
  background: linear-gradient(135deg, #fff 0%, #f5f1e9 60%, #ece3d5 100%);
  border-bottom: 1px solid var(--line);
}
.about-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.08fr) minmax(360px, .92fr);
  gap: 58px;
  align-items: center;
}
.about-hero-copy h1 {
  margin: .08em 0 .3em;
  font-size: clamp(48px, 5.6vw, 72px);
}
.about-lead {
  max-width: 720px;
  font-size: 20px;
  color: #3f3b36;
}
.about-lead p { margin: 0; }
.about-hero-photo,
.about-repair-photo {
  margin: 0;
  overflow: hidden;
  border-radius: 20px;
  background: #ddd;
  box-shadow: var(--shadow);
}
.about-hero-photo img {
  display: block;
  width: 100%;
  height: 390px;
  object-fit: cover;
}
.about-hero-photo figcaption,
.about-repair-photo figcaption {
  padding: 12px 15px;
  background: #171717;
  color: #d8d5cf;
  font-size: 13px;
}
.about-body {
  padding-top: 66px;
  padding-bottom: 84px;
}
.about-prose { font-size: 17px; }
.about-prose > * { max-width: 1050px; }
.about-prose > h2 {
  margin-top: 2.1em;
  font-size: clamp(30px, 3.4vw, 42px);
}
.about-prose > h2:first-child { margin-top: 0; }
.about-prose > p { color: #37342f; }
.about-points {
  max-width: 1050px !important;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 34px 0 50px;
}
.about-point {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: var(--soft);
}
.about-point strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
  color: #171717;
}
.about-point p {
  margin: 0;
  color: #5a554d;
}
.about-repair-photo {
  max-width: 1050px !important;
  margin-top: 36px;
  margin-bottom: 50px;
}
.about-repair-photo img {
  display: block;
  width: 100%;
  height: 520px;
  object-fit: cover;
}
.about-dark-block {
  max-width: 1050px !important;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 36px;
  align-items: center;
  margin-top: 54px;
  padding: 30px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
}
.about-dark-block h2 {
  margin: 0 0 8px;
  color: #fff;
  font-size: clamp(28px, 3vw, 38px);
}
.about-dark-block p {
  margin: 0;
  color: #d8d5cf;
}
.about-dark-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.about-dark-block .button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.about-dark-block .button:hover { background: #eee; }
.about-dark-block .button-ghost-dark {
  background: transparent;
  color: #fff;
}
.about-dark-block .button-ghost-dark:hover {
  background: #fff;
  color: #111;
}
@media (max-width: 900px) {
  .about-hero-grid {
    grid-template-columns: 1fr;
    gap: 34px;
  }
  .about-hero-photo { max-width: 720px; }
  .about-points { grid-template-columns: 1fr; }
  .about-dark-block { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .about-page { margin-top: -58px; }
  .about-hero { padding: 42px 0 46px; }
  .about-hero-copy h1 { font-size: 44px; }
  .about-lead { font-size: 18px; }
  .about-hero-photo img { height: 280px; }
  .about-body {
    padding-top: 46px;
    padding-bottom: 60px;
  }
  .about-repair-photo img { height: 340px; }
}


/* v2.4 — align About text blocks with the wider photo/cards width */
.about-prose > p {
  max-width: 1050px;
  line-height: 1.7;
}
.about-prose > h2 {
  max-width: 1050px;
}


/* v2.5 — About method boxes + repair photo side by side on larger screens */
.about-method-grid {
  max-width: 1050px !important;
  display: grid;
  grid-template-columns: minmax(0, .92fr) minmax(0, 1.08fr);
  gap: 22px;
  align-items: stretch;
  margin: 34px 0 50px;
}
.about-method-grid .about-points {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin: 0;
  max-width: none !important;
}
.about-method-grid .about-point {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}
.about-method-grid .about-repair-photo {
  max-width: none !important;
  margin: 0;
  height: 100%;
  display: grid;
  grid-template-rows: 1fr auto;
}
.about-method-grid .about-repair-photo img {
  height: 100%;
  min-height: 100%;
  object-fit: cover;
}

/* Preserve the current wider text balance. */
.about-prose > p,
.about-prose > h2 {
  max-width: 1050px;
}

@media (max-width: 820px) {
  .about-method-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .about-method-grid .about-points {
    order: 1;
  }
  .about-method-grid .about-repair-photo {
    order: 2;
    height: auto;
  }
  .about-method-grid .about-repair-photo img {
    height: 340px;
    min-height: 0;
  }
}

@media (max-width: 520px) {
  .about-method-grid .about-repair-photo img {
    height: 280px;
  }
}


/* v2.6 — use the full About content width; removes the unused right-hand strip */
.about-prose > * {
  max-width: none !important;
  width: 100%;
}
.about-prose > p,
.about-prose > h2,
.about-method-grid,
.about-dark-block,
.about-repair-photo {
  max-width: none !important;
  width: 100%;
}


/* v2.7 — site-wide content-width consistency
   Fixes the inherited narrow text columns on normal Pages, Service detail pages
   and Area detail pages. Homepage feature copy and individual job articles
   deliberately retain their reading-width treatment. */

/* Standard WordPress pages: Services hub, Areas hub, Reviews, Contact, etc. */
.page-article {
  max-width: none;
}
.page-article .page-header,
.page-article .entry-content.prose > *,
.page-article .entry-content.prose > .alignwide {
  max-width: none;
  width: 100%;
}

/* Service + Area detail pages: text, cards, CTAs and Recent Work all share
   the same full wrapper width instead of switching between 820/1050/1180px. */
.detail-prose > *,
.detail-prose > h2,
.detail-prose > p,
.detail-prose > ul,
.detail-prose > .alignwide,
.detail-prose .epr-card-grid,
.detail-prose .epr-service-work,
.detail-prose .epr-area-work,
.detail-prose > .service-inline-cta {
  max-width: none !important;
  width: 100%;
}

/* Keep grids responsible for their own internal columns, but let the grids
   themselves use the available page width. */
.detail-prose .epr-card-grid,
.detail-prose .post-grid,
.page-article .epr-card-grid,
.page-article .area-grid,
.page-article .post-grid {
  width: 100%;
}

/* Forms remain intentionally compact for usability; centre them so a shorter
   form never looks like an accidental missing column. */
.page-article .epr-contact-form {
  margin-right: auto;
}


/* v2.8 — Areas hub */
.coverage-visual {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: 34px;
  align-items: stretch;
  margin: 38px 0 58px;
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: linear-gradient(135deg, #f8f5ef 0%, #eee7dc 100%);
  overflow: hidden;
}
.coverage-visual-copy {
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.coverage-visual-copy h2 {
  margin: .15em 0 .45em;
  font-size: clamp(30px, 3vw, 42px);
}
.coverage-visual-copy p {
  margin-top: 0;
}
.coverage-note {
  margin-bottom: 0;
  color: var(--muted);
  font-size: 14px;
}

.coverage-diagram {
  position: relative;
  min-height: 420px;
  border-radius: 18px;
  background:
    linear-gradient(24deg, transparent 46%, rgba(201,151,61,.16) 47%, rgba(201,151,61,.16) 49%, transparent 50%),
    linear-gradient(155deg, transparent 47%, rgba(17,17,17,.07) 48%, rgba(17,17,17,.07) 50%, transparent 51%),
    radial-gradient(circle at 50% 50%, #fff 0%, #f8f4ed 56%, #ede5d8 100%);
  box-shadow: inset 0 0 0 1px rgba(17,17,17,.07);
  overflow: hidden;
}
.coverage-ring {
  position: absolute;
  left: 50%;
  top: 50%;
  border: 1px dashed rgba(201,151,61,.42);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.coverage-ring-one {
  width: 44%;
  aspect-ratio: 1;
}
.coverage-ring-two {
  width: 78%;
  aspect-ratio: 1;
}
.coverage-town {
  position: absolute;
  transform: translate(-50%, -50%);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-width: 104px;
  min-height: 42px;
  padding: 9px 12px;
  border: 1px solid #d6cfc3;
  border-radius: 999px;
  background: rgba(255,255,255,.94);
  box-shadow: 0 8px 24px rgba(0,0,0,.08);
  color: #171717;
  font-size: 13px;
  font-weight: 800;
  text-align: center;
  text-decoration: none;
  line-height: 1.15;
  z-index: 2;
}
.coverage-town:hover {
  transform: translate(-50%, -52%);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.coverage-town small {
  margin-top: 2px;
  color: #9a681d;
  font-size: 10px;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.coverage-town-ashford {
  left: 50%;
  top: 49%;
  min-width: 116px;
  min-height: 54px;
  border-color: #c9973d;
  background: #171717;
  color: #fff;
}
.coverage-town-egham { left: 19%; top: 56%; }
.coverage-town-staines { left: 29%; top: 39%; }
.coverage-town-weybridge { left: 30%; top: 76%; }
.coverage-town-walton { left: 55%; top: 78%; }
.coverage-town-sunbury { left: 68%; top: 63%; }
.coverage-town-feltham { left: 70%; top: 39%; }
.coverage-town-hounslow { left: 84%; top: 24%; }

.page-article .area-grid {
  margin: 26px 0 52px;
}
.page-article .area-link {
  min-height: 68px;
  background: #fff;
}

.areas-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin: 48px 0 56px;
}
.areas-info-card {
  padding: 28px;
  border-radius: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
}
.areas-info-card h2 {
  margin: .2em 0 .45em;
  font-size: 30px;
}
.areas-info-card p:last-child {
  margin-bottom: 0;
}

.google-area-map {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(0, 1.3fr);
  gap: 26px;
  align-items: stretch;
  margin: 56px 0;
  padding: 26px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
}
.google-area-map-copy h2 {
  margin: .2em 0 .45em;
  color: #fff;
  font-size: 32px;
}
.google-area-map-copy p:not(.eyebrow) {
  color: #d8d5cf;
}
.google-area-map .eyebrow {
  color: #e5bd73;
}
.google-area-map-frame {
  min-height: 260px;
  border-radius: 14px;
  overflow: hidden;
  background:
    radial-gradient(circle at 30% 30%, rgba(201,151,61,.22), transparent 34%),
    linear-gradient(135deg, #2c2b28 0%, #111 100%);
  border: 1px solid #393939;
}
.google-area-map-frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 300px;
  border: 0;
}
.google-map-placeholder {
  min-height: 260px;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 7px;
  padding: 28px;
  text-align: center;
}
.google-map-placeholder strong {
  font-size: 26px;
}
.google-map-placeholder span {
  color: #cfcac0;
}
.google-map-placeholder .button {
  margin-top: 12px;
  background: #fff;
  border-color: #fff;
  color: #111;
}

.areas-hub-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: 58px;
  padding: 30px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
}
.areas-hub-cta .eyebrow {
  color: #e5bd73;
}
.areas-hub-cta h2 {
  margin: .1em 0 .3em;
  color: #fff;
  font-size: 34px;
}
.areas-hub-cta p:last-child {
  margin-bottom: 0;
  color: #d8d5cf;
}
.areas-hub-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.areas-hub-cta .button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.areas-hub-cta .button-ghost-dark {
  background: transparent;
  color: #fff;
}

@media (max-width: 900px) {
  .coverage-visual,
  .google-area-map {
    grid-template-columns: 1fr;
  }
  .coverage-diagram {
    min-height: 390px;
  }
  .areas-info-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .coverage-visual {
    padding: 20px;
  }
  .coverage-diagram {
    min-height: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 18px;
    background: #f7f3ec;
  }
  .coverage-ring {
    display: none;
  }
  .coverage-town {
    position: static;
    transform: none;
    min-width: 0;
    width: 100%;
    min-height: 50px;
  }
  .coverage-town:hover {
    transform: none;
  }
  .coverage-town-ashford {
    grid-column: 1 / -1;
    order: -1;
  }
  .page-article .area-grid {
    grid-template-columns: 1fr 1fr;
  }
  .google-area-map {
    padding: 20px;
  }
  .areas-hub-cta {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 430px) {
  .page-article .area-grid,
  .coverage-diagram {
    grid-template-columns: 1fr;
  }
  .coverage-town-ashford {
    grid-column: auto;
  }
}


/* v2.9 — Reviews page */
.reviews-page {
  margin-top: -58px;
}
.reviews-hero {
  padding: 58px 0 62px;
  background: linear-gradient(135deg, #fff 0%, #f5f1e9 60%, #ece3d5 100%);
  border-bottom: 1px solid var(--line);
}
.reviews-hero-inner {
  max-width: 1180px;
}
.reviews-hero h1 {
  margin: .08em 0 .3em;
  font-size: clamp(48px, 5.6vw, 72px);
}
.reviews-lead {
  max-width: 820px;
  font-size: 20px;
  color: #3f3b36;
}
.reviews-lead p {
  margin: 0;
}
.reviews-body {
  padding-top: 64px;
  padding-bottom: 84px;
}
.reviews-prose > * {
  max-width: none !important;
  width: 100%;
}
.review-platforms {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0 0 16px;
}
.review-platform-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-height: 240px;
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 8px 26px rgba(0,0,0,.045);
  color: #171717;
  text-decoration: none;
}
.review-platform-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 30px rgba(0,0,0,.075);
}
.review-platform-name {
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--muted);
}
.review-platform-card strong {
  margin-top: 4px;
  font-size: 38px;
  line-height: 1;
}
.review-stars {
  letter-spacing: .08em;
  color: #b67a20;
}
.review-platform-detail {
  margin-top: 5px;
  color: #5a554d;
}
.review-platform-link {
  margin-top: auto;
  padding-top: 14px;
  font-weight: 800;
  color: #171717;
}
.review-count-note {
  margin: 12px 0 58px !important;
  color: var(--muted) !important;
  font-size: 13px;
}
.selected-reviews {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin: 26px 0 60px;
}
.selected-review {
  min-height: 220px;
  padding: 26px;
  border-radius: 18px;
  background: var(--soft);
  border: 1px solid var(--line);
}
.selected-review blockquote {
  margin: 16px 0 26px;
  padding: 0;
  border: 0;
  font-size: 22px;
  line-height: 1.45;
  font-weight: 700;
  color: #24211d;
}
.selected-review footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  color: var(--muted);
  font-size: 13px;
}
.selected-review footer strong {
  color: #171717;
  font-size: 15px;
}
.review-values {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin: 28px 0 56px;
}
.review-value {
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 16px;
  background: #fff;
}
.review-value strong {
  display: block;
  margin-bottom: 8px;
  font-size: 18px;
}
.review-value p {
  margin: 0;
  color: #5a554d;
}
.reviews-cta {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto;
  gap: 34px;
  align-items: center;
  margin-top: 56px;
  padding: 30px;
  border-radius: 20px;
  background: #171717;
  color: #fff;
}
.reviews-cta .eyebrow {
  color: #e5bd73;
}
.reviews-cta h2 {
  margin: .1em 0 .3em;
  color: #fff;
  font-size: 34px;
}
.reviews-cta p:last-child {
  margin-bottom: 0;
  color: #d8d5cf;
}
.reviews-cta-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.reviews-cta .button {
  background: #fff;
  border-color: #fff;
  color: #111;
}
.reviews-cta .button-ghost-dark {
  background: transparent;
  color: #fff;
}
@media (max-width: 900px) {
  .review-platforms {
    grid-template-columns: 1fr;
  }
  .review-platform-card {
    min-height: 0;
  }
  .review-values {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .reviews-page { margin-top: -58px; }
  .reviews-hero { padding: 42px 0 46px; }
  .reviews-hero h1 { font-size: 44px; }
  .reviews-lead { font-size: 18px; }
  .reviews-body {
    padding-top: 46px;
    padding-bottom: 60px;
  }
  .selected-reviews,
  .review-values {
    grid-template-columns: 1fr;
  }
  .selected-review {
    min-height: 0;
  }
  .reviews-cta {
    grid-template-columns: 1fr;
  }
}


/* v3.0 — live Google review feed integration */
.epr-live-google-reviews {
  width: 100%;
  margin: 26px 0 60px;
}

/* Server-rendered fallback / pre-connection state. */
.epr-google-reviews-awaiting {
  display: flex;
  flex-direction: column;
  gap: 5px;
  width: 100%;
  margin: 24px 0 58px;
  padding: 24px;
  border: 1px dashed #c8bca9;
  border-radius: 16px;
  background: var(--soft);
  color: #5a554d;
}
.epr-google-reviews-awaiting strong {
  color: #171717;
  font-size: 18px;
}

/* If ReplyOnTheFly's server-rendered blockquotes are present, keep them aligned
   with the EPRLocksmith reviews-page visual system while retaining its own grid. */
.epr-live-google-reviews .rotf-review {
  border-radius: 16px;
}
.epr-live-google-reviews blockquote.rotf-review {
  margin: 0;
}

/* The live Google badge sits inside the existing Google platform card. */
.epr-google-live-badge {
  margin: 3px 0 2px;
  width: 100%;
}
.review-platform-google .epr-google-live-badge {
  flex: 0 0 auto;
}

/* Exact-count note is informational, not dominant. */
.review-count-note {
  margin-bottom: 58px !important;
}

@media (max-width: 640px) {
  .epr-live-google-reviews {
    margin-bottom: 48px;
  }
}


/* v3.1 — clean static Reviews page while direct Google API access is pending */
.selected-reviews-six {
  grid-template-columns: repeat(3, 1fr);
}
.selected-reviews-six .selected-review {
  min-height: 235px;
}
.selected-reviews-six .selected-review blockquote {
  font-size: 19px;
}
@media (max-width: 900px) {
  .selected-reviews-six {
    grid-template-columns: 1fr 1fr;
  }
}
@media (max-width: 640px) {
  .selected-reviews-six {
    grid-template-columns: 1fr;
  }
  .selected-reviews-six .selected-review {
    min-height: 0;
  }
}


/* v3.2 — direct source links on the six Google review cards */
.selected-review footer .review-source-link {
  display: inline-block;
  margin-top: 10px;
  color: #171717;
  font-weight: 800;
  text-decoration: none;
}
.selected-review footer .review-source-link:hover {
  text-decoration: underline;
}


/* v3.3 — finished Contact page */
.contact-page {
  margin-top: -58px;
}
.contact-hero {
  padding: 58px 0 62px;
  background: linear-gradient(135deg, #fff 0%, #f5f1e9 60%, #ece3d5 100%);
  border-bottom: 1px solid var(--line);
}
.contact-hero-inner {
  max-width: 1180px;
}
.contact-hero h1 {
  margin: .08em 0 .3em;
  font-size: clamp(48px, 5.6vw, 72px);
}
.contact-lead {
  max-width: 850px;
  font-size: 20px;
  color: #3f3b36;
}
.contact-lead p {
  margin: 0;
}
.contact-body {
  padding-top: 64px;
  padding-bottom: 84px;
}
.contact-prose > * {
  max-width: none !important;
  width: 100%;
}

.contact-main-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.45fr) minmax(310px, .55fr);
  gap: 24px;
  align-items: start;
}
.contact-form-card {
  padding: 30px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.045);
}
.contact-form-card h2 {
  margin: .15em 0 .3em;
  font-size: clamp(30px, 3vw, 40px);
}
.contact-form-card > p:not(.eyebrow):not(.contact-privacy-note) {
  color: #555047;
}
.contact-form-card .epr-contact-form {
  max-width: none;
  width: 100%;
  margin-top: 26px;
}
.contact-form-card .epr-field input,
.contact-form-card .epr-field textarea {
  background: #fcfbf8;
  border-color: #cfc7bb;
}
.contact-form-card .epr-field input:focus,
.contact-form-card .epr-field textarea:focus {
  outline: 2px solid rgba(182,122,32,.22);
  outline-offset: 1px;
  border-color: #a76e1c;
}
.contact-form-card .button-large {
  margin-top: 4px;
}
.contact-privacy-note {
  margin: 18px 0 0 !important;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  color: var(--muted) !important;
  font-size: 13px;
}

.contact-side-stack {
  display: grid;
  gap: 16px;
}
.contact-direct-card,
.contact-info-card {
  padding: 25px;
  border-radius: 18px;
}
.contact-direct-card {
  background: #171717;
  color: #fff;
}
.contact-direct-card .eyebrow {
  color: #e5bd73;
}
.contact-direct-card h2 {
  margin: .15em 0 .35em;
  font-size: 31px;
}
.contact-direct-card h2 a {
  color: #fff;
  text-decoration: none;
}
.contact-direct-card p:not(.eyebrow) {
  color: #d8d5cf;
}
.contact-direct-card .button {
  margin-top: 10px;
  background: #fff;
  border-color: #fff;
  color: #111;
}
.contact-info-card {
  border: 1px solid var(--line);
  background: var(--soft);
}
.contact-info-card h3 {
  margin: .2em 0 .4em;
  font-size: 21px;
}
.contact-info-card h3 a {
  color: #171717;
  text-decoration: none;
  overflow-wrap: anywhere;
}
.contact-info-card p:last-of-type {
  margin-bottom: 10px;
  color: #555047;
}

.contact-prep {
  margin: 64px 0 58px;
  padding-top: 56px;
  border-top: 1px solid var(--line);
}
.contact-prep-heading {
  max-width: 760px;
  margin-bottom: 28px;
}
.contact-prep-heading h2 {
  margin: .12em 0 0;
  font-size: clamp(30px, 3.7vw, 44px);
}
.contact-prep-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.contact-prep-item {
  position: relative;
  min-height: 220px;
  padding: 25px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
}
.contact-prep-item > span {
  display: inline-block;
  margin-bottom: 30px;
  color: #a76e1c;
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .08em;
}
.contact-prep-item strong {
  display: block;
  margin-bottom: 10px;
  font-size: 20px;
}
.contact-prep-item p {
  margin: 0;
  color: #555047;
}

.contact-reassurance {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  overflow: hidden;
  border-radius: 20px;
  background: #171717;
  color: #fff;
}
.contact-reassurance > div {
  padding: 26px;
}
.contact-reassurance > div + div {
  border-left: 1px solid #343434;
}
.contact-reassurance strong,
.contact-reassurance span {
  display: block;
}
.contact-reassurance strong {
  margin-bottom: 7px;
  font-size: 18px;
}
.contact-reassurance span {
  color: #d4d0ca;
  font-size: 14px;
}

/* Contact form itself */
.contact-page .epr-form-grid {
  gap: 14px 16px;
}
.contact-page .epr-field label {
  font-size: 14px;
}
.contact-page .epr-form-note {
  margin-top: 6px;
}
.contact-page .epr-alert {
  margin-top: 0;
}

@media (max-width: 900px) {
  .contact-main-grid {
    grid-template-columns: 1fr;
  }
  .contact-side-stack {
    grid-template-columns: 1fr 1fr;
  }
  .contact-direct-card {
    grid-column: 1 / -1;
  }
  .contact-prep-grid {
    grid-template-columns: 1fr;
  }
  .contact-prep-item {
    min-height: 0;
  }
}

@media (max-width: 640px) {
  .contact-page {
    margin-top: -58px;
  }
  .contact-hero {
    padding: 42px 0 46px;
  }
  .contact-hero h1 {
    font-size: 42px;
  }
  .contact-lead {
    font-size: 18px;
  }
  .contact-body {
    padding-top: 42px;
    padding-bottom: 60px;
  }
  .contact-form-card {
    padding: 21px;
  }
  .contact-side-stack {
    grid-template-columns: 1fr;
  }
  .contact-direct-card {
    grid-column: auto;
  }
  .contact-prep {
    margin-top: 48px;
    padding-top: 44px;
  }
  .contact-reassurance {
    grid-template-columns: 1fr;
  }
  .contact-reassurance > div + div {
    border-left: 0;
    border-top: 1px solid #343434;
  }
}


/* v3.5 — mobile navigation: compact, scrollable and expandable */
.submenu-toggle {
  display: none;
}

@media (max-width: 960px) {
  .primary-nav.is-open {
    display: block;
    max-height: calc(100dvh - 150px);
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
    padding: 8px 4px 20px 0;
    scrollbar-width: thin;
  }

  .epr-menu > li {
    position: relative;
    border-bottom: 1px solid rgba(0,0,0,.06);
  }

  .epr-menu > li:last-child {
    border-bottom: 0;
  }

  .epr-menu > li > a {
    padding: 12px 44px 12px 4px;
    font-size: 16px;
  }

  .epr-menu > .menu-item-has-children > .submenu-toggle {
    display: grid;
    place-items: center;
    position: absolute;
    top: 7px;
    right: 0;
    width: 38px;
    height: 38px;
    padding: 0;
    border: 1px solid var(--line);
    border-radius: 999px;
    background: #fff;
    color: var(--ink);
    font: inherit;
    cursor: pointer;
  }

  .submenu-toggle span {
    display: block;
    font-size: 22px;
    line-height: 1;
    transform: translateY(-2px);
    transition: transform .18s ease;
  }

  .menu-item-has-children.submenu-open > .submenu-toggle span {
    transform: rotate(180deg) translateY(2px);
  }

  /* Override the old mobile rule that permanently displayed every submenu. */
  .epr-menu .sub-menu {
    display: none;
    position: static;
    min-width: 0;
    margin: 0 0 8px;
    padding: 5px 0 8px 14px;
    border: 0;
    border-left: 2px solid #eadfcd;
    border-radius: 0;
    box-shadow: none;
    background: transparent;
  }

  .epr-menu .submenu-open > .sub-menu {
    display: block;
  }

  .epr-menu .sub-menu a {
    padding: 9px 8px;
    font-size: 14px;
  }

  body.mobile-menu-open {
    overflow: hidden;
  }
}

@media (max-width: 640px) {
  .primary-nav.is-open {
    /* Leave clear room for the fixed Call / Send photos bar. */
    max-height: calc(100dvh - 185px);
    padding-bottom: 18px;
  }
}

/* v3.5 — Contact guidance now comes before the form */
.contact-prep {
  margin: 0 0 50px;
  padding-top: 0;
  border-top: 0;
}
.contact-main-grid + .contact-reassurance {
  margin-top: 58px;
}

@media (max-width: 640px) {
  .contact-prep {
    margin: 0 0 42px;
    padding-top: 0;
  }
}


/* v3.6 — mobile submenu close fix
   The desktop :hover/:focus-within rule was keeping a submenu visible after
   its arrow had been tapped closed on touch devices. On mobile, visibility
   is controlled only by the explicit .submenu-open class. */
@media (max-width: 960px) {
  .epr-menu li:hover > .sub-menu,
  .epr-menu li:focus-within > .sub-menu {
    display: none;
  }

  .epr-menu li.submenu-open > .sub-menu,
  .epr-menu li.submenu-open:hover > .sub-menu,
  .epr-menu li.submenu-open:focus-within > .sub-menu {
    display: block;
  }
}

/* v3.6 — Contact hero width consistency */
.contact-lead {
  max-width: none;
  width: 100%;
}
.contact-hero-inner > .detail-trust-row {
  width: 100%;
}


/* v3.7 — dedicated Contact confirmation page */
.contact-thanks-page {
  min-height: 64vh;
  display: flex;
  align-items: center;
  padding: 72px 0 88px;
  background:
    radial-gradient(circle at 80% 15%, rgba(201,151,61,.14), transparent 28%),
    linear-gradient(135deg, #fff 0%, #f7f3ec 100%);
}
.contact-thanks-wrap {
  width: 100%;
}
.contact-thanks-content > * {
  max-width: none !important;
}
.contact-thanks-card {
  max-width: 820px !important;
  margin: 0 auto;
  padding: 42px;
  border: 1px solid var(--line);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 18px 50px rgba(0,0,0,.07);
  text-align: center;
}
.contact-thanks-mark {
  display: grid;
  place-items: center;
  width: 72px;
  height: 72px;
  margin: 0 auto 22px;
  border-radius: 50%;
  background: #171717;
  color: #fff;
  font-size: 36px;
  font-weight: 900;
}
.contact-thanks-card .eyebrow {
  margin-bottom: 10px;
}
.contact-thanks-card h1 {
  margin: 0 auto 18px;
  max-width: 700px;
  font-size: clamp(38px, 5vw, 58px);
  line-height: 1.04;
}
.contact-thanks-lead {
  max-width: 650px !important;
  margin: 0 auto;
  font-size: 20px;
  color: #514c44;
}
.contact-thanks-actions {
  display: flex;
  justify-content: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 30px 0 24px;
}
.contact-thanks-actions .button-ghost-dark {
  background: transparent;
  color: #171717;
  border-color: #171717;
}
.contact-thanks-note {
  max-width: 650px !important;
  margin: 0 auto;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 14px;
}

@media (max-width: 640px) {
  .contact-thanks-page {
    min-height: 58vh;
    padding: 46px 0 60px;
  }
  .contact-thanks-card {
    padding: 28px 20px;
    border-radius: 20px;
  }
  .contact-thanks-mark {
    width: 62px;
    height: 62px;
    font-size: 30px;
  }
  .contact-thanks-lead {
    font-size: 18px;
  }
  .contact-thanks-actions {
    flex-direction: column;
  }
  .contact-thanks-actions .button {
    width: 100%;
  }
}


/* v3.8 — harden the Contact page for phones.
   This intentionally overrides earlier responsive rules in one place. */
@media (max-width: 640px) {
  .contact-page {
    margin-top: 0 !important;
  }

  .contact-hero {
    padding: 30px 0 34px !important;
  }

  .contact-hero-inner,
  .contact-body {
    width: min(100% - 28px, 1180px);
  }

  .contact-hero h1 {
    margin-top: 4px;
    font-size: clamp(34px, 10.5vw, 44px) !important;
    line-height: 1.04;
    overflow-wrap: anywhere;
  }

  .contact-lead {
    width: 100%;
    font-size: 17px !important;
    line-height: 1.55;
  }

  .contact-hero .detail-trust-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    width: 100%;
    margin-top: 20px;
  }

  .contact-hero .detail-trust-row span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    padding: 8px 10px;
    text-align: center;
    line-height: 1.2;
  }

  .contact-body {
    padding-top: 30px !important;
    padding-bottom: 52px !important;
  }

  /* Guidance becomes three compact, easy-to-scan mobile rows. */
  .contact-prep {
    margin: 0 0 28px !important;
    padding: 0 !important;
  }

  .contact-prep-heading {
    margin-bottom: 16px;
  }

  .contact-prep-heading h2 {
    font-size: 30px !important;
    line-height: 1.08;
  }

  .contact-prep-grid {
    display: grid;
    grid-template-columns: 1fr !important;
    gap: 10px;
  }

  .contact-prep-item {
    min-height: 0 !important;
    padding: 16px 16px 17px !important;
    border-radius: 14px;
  }

  .contact-prep-item > span {
    margin-bottom: 10px !important;
  }

  .contact-prep-item strong {
    margin-bottom: 5px;
    font-size: 17px;
  }

  .contact-prep-item p {
    font-size: 14px;
    line-height: 1.48;
  }

  .contact-main-grid {
    display: block !important;
    width: 100%;
  }

  .contact-form-card {
    width: 100%;
    padding: 18px !important;
    border-radius: 16px;
    box-sizing: border-box;
  }

  .contact-form-card h2 {
    font-size: 29px !important;
    line-height: 1.08;
  }

  .contact-form-card .epr-contact-form,
  .contact-page .epr-form-grid,
  .contact-page .epr-field {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  .contact-page .epr-field {
    margin: 0 0 16px !important;
  }

  .contact-page .epr-field label {
    display: block !important;
    margin-bottom: 7px;
    font-size: 14px !important;
  }

  /* Explicitly force every real form control to render on mobile.
     This also protects against stale/over-broad input styling from browsers. */
  .contact-page .epr-field input:not([type="hidden"]),
  .contact-page .epr-field textarea {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 50px;
    padding: 12px 13px !important;
    border: 1px solid #bbb5ac !important;
    border-radius: 10px !important;
    background: #fff !important;
    color: #171717 !important;
    -webkit-text-fill-color: #171717 !important;
    font-size: 16px !important;
    line-height: 1.3;
  }

  .contact-page .epr-field textarea {
    min-height: 145px;
  }

  .contact-page .epr-field input[type="file"] {
    min-height: 0;
    padding: 10px !important;
    overflow: hidden;
  }

  .contact-page .button-large {
    width: 100%;
    min-height: 50px;
    margin-top: 2px;
  }

  .contact-privacy-note {
    font-size: 12px !important;
    line-height: 1.5;
  }

  .contact-side-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
    width: 100%;
    margin-top: 18px;
  }

  .contact-direct-card,
  .contact-info-card {
    width: 100%;
    box-sizing: border-box;
    padding: 20px !important;
  }

  .contact-direct-card h2 {
    font-size: 28px;
  }

  .contact-direct-card .button {
    width: 100%;
    text-align: center;
  }

  .contact-reassurance {
    grid-template-columns: 1fr !important;
    margin-top: 30px !important;
    border-radius: 16px;
  }

  .contact-reassurance > div {
    padding: 18px !important;
  }
}

@media (max-width: 390px) {
  .contact-hero .detail-trust-row {
    grid-template-columns: 1fr;
  }
}


/* v4.0 — useful contextual internal links on Recent Work posts */
.work-context-links {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin: 42px 0 18px;
}
.work-context-link {
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-height: 92px;
  padding: 18px 20px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: var(--soft);
  color: #171717;
  text-decoration: none;
}
.work-context-link:hover {
  transform: translateY(-1px);
  border-color: #c9bda9;
  background: #f8f4ed;
}
.work-context-link span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .07em;
  text-transform: uppercase;
}
.work-context-link strong {
  font-size: 17px;
  line-height: 1.25;
}
.work-context-links:has(.work-context-link:only-child) {
  grid-template-columns: minmax(0, 1fr);
}
@media (max-width: 640px) {
  .work-context-links {
    grid-template-columns: 1fr;
    margin-top: 32px;
  }
  .work-context-link {
    min-height: 0;
  }
}


/* v5.4.8 — Recent Work single-page top spacing
   The generic .content-shell top padding (58px) plus the old 28px
   single-work offset created a large blank band below the header. */
.single-work-shell {
  padding-top: 18px;
}
.single-work-top {
  padding-top: 0;
}
.work-breadcrumbs {
  margin-bottom: 16px;
  color: var(--muted);
  font-size: 13px;
}
.work-breadcrumbs nav,
.work-breadcrumbs p {
  margin: 0;
}
.work-breadcrumbs p {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  align-items: center;
}
.work-breadcrumbs a {
  color: inherit;
  text-decoration: none;
}
.work-breadcrumbs a:hover {
  text-decoration: underline;
}
.work-back-link {
  display: inline-flex;
  margin-bottom: 24px;
  font-weight: 800;
  text-decoration: none;
}
.work-meta-row,
.work-card-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.work-meta-row {
  margin-bottom: 12px;
  color: var(--muted);
  font-size: 13px;
}
.work-meta-row > *:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: #aaa194;
}
.single-work .single-header {
  margin-bottom: 28px;
}
.single-work .single-header h1 {
  margin-bottom: 0;
}
.work-related-section {
  margin: 58px 0 0;
  padding: 48px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #faf8f4;
}
.work-section-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  align-items: end;
  margin-bottom: 22px;
}
.work-section-heading h2 {
  margin: 2px 0 0;
}
.work-section-heading .eyebrow {
  margin-bottom: 0;
}
.work-post-nav {
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(0,1fr);
  gap: 20px;
  align-items: center;
  margin-top: 42px;
  padding: 24px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.work-post-nav-side {
  min-width: 0;
}
.work-post-nav-side span {
  display: block;
  margin-bottom: 6px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .06em;
  text-transform: uppercase;
}
.work-post-nav-side a,
.work-post-nav-all {
  font-weight: 800;
  text-decoration: none;
}
.work-post-nav-next {
  text-align: right;
}
.work-post-nav-all {
  white-space: nowrap;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
}
.work-card-meta {
  min-height: 22px;
  margin-bottom: 8px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 800;
}
.work-card-meta > *:not(:last-child)::after {
  content: "·";
  margin-left: 8px;
  color: #aaa194;
}
.work-post-card .post-card-body > p {
  min-height: 4.8em;
}
.recent-work-header {
  max-width: 980px;
}
.recent-work-header > p:not(.eyebrow) {
  max-width: 780px;
}
.recent-work-service-links {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 22px;
}
.recent-work-service-links a {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  padding: 8px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: #fff;
  color: #171717;
  font-size: 13px;
  font-weight: 800;
  text-decoration: none;
}
.recent-work-service-links a:hover {
  background: var(--soft);
}
.recent-work-pagination {
  margin-top: 36px;
}
.recent-work-pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.recent-work-pagination .page-numbers {
  display: inline-flex;
  min-width: 40px;
  min-height: 40px;
  padding: 8px 12px;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
}
.recent-work-pagination .current {
  background: #171717;
  color: #fff;
  border-color: #171717;
}

@media (max-width: 720px) {
  .work-section-heading {
    align-items: start;
    flex-direction: column;
    gap: 10px;
  }
  .work-post-nav {
    grid-template-columns: 1fr;
    gap: 18px;
  }
  .work-post-nav-next {
    text-align: left;
  }
  .work-post-nav-all {
    justify-self: start;
    order: 3;
  }
  .work-post-card .post-card-body > p {
    min-height: 0;
  }
}


/* v4.2 — Recent Work desktop width correction only.
   Keep prose readable, but stop the whole post being trapped in the old
   780px article wrapper. */
.wrap-work {
  width: min(calc(100% - 36px), 1120px);
  margin-inline: auto;
}

/* The image, heading, navigation and contextual blocks can use the wider
   Recent Work canvas. The story paragraphs remain comfortable to read. */
.single-work .entry-content.prose > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.single-work .entry-content.prose > .alignwide {
  max-width: 1120px;
}
.single-work .entry-content.prose > .alignfull {
  max-width: none;
}

/* The Recent Work hub intro belongs to the same site width as the card grid. */
.recent-work-header {
  max-width: none;
}
.recent-work-header > p:not(.eyebrow) {
  max-width: 980px;
}

@media (max-width: 760px) {
  .wrap-work {
    width: min(calc(100% - 28px), 1120px);
  }

  .single-work .entry-content.prose > * {
    max-width: 100%;
  }

  .recent-work-header > p:not(.eyebrow) {
    max-width: none;
  }
}


/* v4.3 — finish the desktop width consistency pass.
   Reviews and Contact use bespoke templates, so they were not fully covered
   by the earlier generic page-width correction. */

/* Reviews: single-column hero copy should use the site's available canvas,
   matching the cards below instead of looking like a missing right column. */
.reviews-hero-inner {
  max-width: none;
}
.reviews-lead {
  max-width: none;
  width: 100%;
}

/* Contact: the three-step guidance is a full-width section. Its heading was
   still carrying the old 760px reading-column cap even though the three cards
   below span the full content width. */
.contact-prep-heading {
  max-width: none;
  width: 100%;
}

/* Keep the Contact hero consistent with the same full-width single-column
   treatment already applied to its lead text. */
.contact-hero-inner {
  max-width: none;
}

@media (max-width: 640px) {
  .reviews-lead,
  .contact-prep-heading {
    width: 100%;
  }
}


/* v4.4 — FINAL SITE-WIDE WIDTH CONTRACT
   Audited against every theme page type.
   Rule: single-column sections use the full 1180px site canvas.
   Width caps remain only where they are intentional for a real split layout
   or for comfortable long-form reading. */

/* ---- Full-width single-column page surfaces ---- */
.page-article,
.page-article .page-header,
.page-article .entry-content.prose > *,
.page-article .entry-content.prose > .alignwide,
.about-body,
.about-prose > *,
.reviews-hero-inner,
.reviews-lead,
.reviews-lead > *,
.reviews-body,
.reviews-prose > *,
.contact-hero-inner,
.contact-lead,
.contact-lead > *,
.contact-body,
.contact-prose > *,
.contact-prep-heading,
.recent-work-header,
.recent-work-header > p:not(.eyebrow) {
  max-width: none !important;
  width: 100%;
}

/* Recent Work hub: the intro is one normal full-width line when the viewport
   has room. It must not inherit an arbitrary 780/820/980px text cap. */
.recent-work-header > p:not(.eyebrow) {
  margin-right: 0;
}

/* Service and Area body content uses the same site canvas throughout.
   The HERO copy remains deliberately narrower because it genuinely shares the
   row with the dark contact card. */
.detail-prose > *,
.detail-prose > h2,
.detail-prose > h3,
.detail-prose > p,
.detail-prose > ul,
.detail-prose > ol,
.detail-prose > .alignwide,
.detail-prose .epr-card-grid,
.detail-prose .post-grid,
.detail-prose .epr-service-work,
.detail-prose .epr-area-work,
.detail-prose > .service-inline-cta {
  max-width: none !important;
  width: 100%;
}

/* About is a full-width body. Its HERO copy remains deliberately paired with
   the workshop image, so the hero's local reading cap is intentional. */
.about-prose > p,
.about-prose > h2,
.about-prose > h3,
.about-method-grid,
.about-dark-block,
.about-repair-photo {
  max-width: none !important;
  width: 100%;
}

/* Reviews and Contact are true single-column hero introductions. */
.reviews-hero-inner > .detail-trust-row,
.contact-hero-inner > .detail-trust-row {
  width: 100%;
  max-width: none;
}

/* Structural blocks should always follow the wrapper, never an old prose cap. */
.coverage-visual,
.areas-info-grid,
.google-area-map,
.areas-hub-cta,
.review-platforms,
.selected-reviews,
.review-values,
.reviews-cta,
.contact-prep,
.contact-prep-grid,
.contact-main-grid,
.contact-reassurance,
.recent-work-service-links,
.recent-work-grid,
.work-context-links,
.work-post-nav {
  max-width: none !important;
  width: 100%;
}

/* ---- Intentional width limits: do NOT "fix" these ----
   1) Homepage .hero-lead / .section-heading: part of the designed composition.
   2) .detail-hero-copy / .detail-lead: shares the hero with the contact card.
   3) .about-lead: shares the hero with the workshop image.
   4) Individual Recent Work story paragraphs: readable long-form line length.
   5) Contact thank-you card and 404: deliberately compact centred states. */
.single-work .entry-content.prose > * {
  max-width: 860px;
  margin-left: auto;
  margin-right: auto;
}
.single-work .entry-content.prose > .alignwide {
  max-width: 1120px;
}
.single-work .entry-content.prose > .alignfull {
  max-width: none;
}

/* Keep every principal wrapper governed by the same site-width variable. */
.wrap,
.wrap-work {
  width: min(calc(100% - 36px), var(--max));
  margin-inline: auto;
}

@media (max-width: 760px) {
  .wrap,
  .wrap-work {
    width: min(calc(100% - 28px), var(--max));
  }

  .single-work .entry-content.prose > * {
    max-width: 100%;
  }
}


/* v4.5 — Recent Work width hardening.
   v4.1 used .wrap-narrow in the single-post template. If cached HTML from that
   version survives a theme update, force that obsolete wrapper to the same
   width as the current .wrap-work canvas. */
.single-work > .wrap-narrow,
.single-work > .wrap-work {
  width: min(calc(100% - 36px), var(--max)) !important;
  max-width: none !important;
  margin-inline: auto !important;
}

.single-work .single-header,
.single-work .single-featured,
.single-work .entry-content,
.single-work .work-context-links,
.single-work .work-post-nav {
  width: 100% !important;
  max-width: none !important;
}

/* The story itself deliberately keeps a comfortable reading measure. */
.single-work .entry-content.prose > * {
  width: 100%;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.single-work .entry-content.prose > .alignwide {
  max-width: var(--max);
}

@media (max-width: 760px) {
  .single-work > .wrap-narrow,
  .single-work > .wrap-work {
    width: min(calc(100% - 28px), var(--max)) !important;
  }

  .single-work .entry-content.prose > * {
    max-width: 100%;
  }
}

/* v4.9 — Recent Work article layout, finalised.
   The IMAGE SOURCE must be an original photograph, not a collage.
   CSS never crops or distorts it. Text genuinely wraps beside the image
   and then returns to the full article width below it. */

.single-work .entry-content.prose {
  display: flow-root;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
}

/* Undo the older centred 860/900px paragraph rules inside Recent Work only.
   This is the key to allowing copy to become full-width once it passes the
   floated photograph. */
.single-work .entry-content.prose > p,
.single-work .entry-content.prose > ul,
.single-work .entry-content.prose > ol,
.single-work .entry-content.prose > h2,
.single-work .entry-content.prose > h3,
.single-work .entry-content.prose > h4,
.single-work .entry-content.prose > blockquote {
  width: auto !important;
  max-width: none !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

/* Float an original photo on the right. */
.single-work .single-featured-float {
  float: right !important;
  width: min(36%, 420px) !important;
  max-width: 420px !important;
  margin: 0 0 26px 34px !important;
  overflow: visible !important;
  aspect-ratio: auto !important;
}

.single-work .single-featured-float.is-landscape {
  width: min(39%, 450px) !important;
  max-width: 450px !important;
}

.single-work .single-featured-float.is-portrait {
  width: min(26%, 300px) !important;
  max-width: 300px !important;
}

.single-work .single-featured-float.is-square {
  width: min(30%, 345px) !important;
  max-width: 345px !important;
}

/* Preserve the intrinsic image ratio. */
.single-work .single-featured-float img {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  max-width: 100% !important;
  max-height: none !important;
  aspect-ratio: auto !important;
  object-fit: contain !important;
  object-position: center !important;
  margin: 0 !important;
  border-radius: 14px;
}

/* Structural elements begin after the story/photo flow. */
.single-work .work-context-links,
.single-work .work-post-nav {
  clear: both;
}

/* One contextual card should look like a card, not a full-width banner.
   Two cards continue to share the row. */
.single-work .work-context-links:has(.work-context-link:only-child) {
  width: min(100%, 540px) !important;
  max-width: 540px !important;
  grid-template-columns: 1fr !important;
  margin-left: 0 !important;
  margin-right: auto !important;
}

/* Mobile: stack the original image, still without changing its shape. */
@media (max-width: 640px) {
  .single-work .single-featured-float,
  .single-work .single-featured-float.is-landscape,
  .single-work .single-featured-float.is-portrait,
  .single-work .single-featured-float.is-square {
    float: none !important;
    margin: 0 auto 24px !important;
  }

  .single-work .single-featured-float,
  .single-work .single-featured-float.is-landscape {
    width: min(92%, 520px) !important;
    max-width: 520px !important;
  }

  .single-work .single-featured-float.is-portrait {
    width: min(72%, 330px) !important;
    max-width: 330px !important;
  }

  .single-work .single-featured-float.is-square {
    width: min(82%, 380px) !important;
    max-width: 380px !important;
  }

  .single-work .work-context-links:has(.work-context-link:only-child) {
    width: 100% !important;
    max-width: none !important;
  }
}


/* v5.0 — single contextual card must shrink to its content.
   No half-page banner when only Related Service OR Local Area exists. */
.single-work .work-context-links:has(> .work-context-link:only-child) {
  display: inline-grid !important;
  width: auto !important;
  max-width: 100% !important;
  grid-template-columns: auto !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.single-work .work-context-links:has(> .work-context-link:only-child) .work-context-link {
  width: auto !important;
  min-width: 0 !important;
  max-width: 100% !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
}

@media (max-width: 640px) {
  .single-work .work-context-links:has(> .work-context-link:only-child) {
    display: grid !important;
    width: 100% !important;
  }
}


/* v5.1 — deterministic one-card sizing.
   Do not rely on :has() for the basic layout. The PHP template now adds a
   class according to whether the post has one or two contextual cards. */
.single-work .work-context-links.has-one-context-link {
  display: inline-grid !important;
  grid-template-columns: max-content !important;
  width: fit-content !important;
  max-width: 100% !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.single-work .work-context-links.has-one-context-link .work-context-link {
  width: fit-content !important;
  max-width: 100% !important;
  min-width: 0 !important;
  min-height: 0 !important;
  padding: 14px 18px !important;
}

.single-work .work-context-links.has-two-context-links {
  display: grid !important;
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  width: 100% !important;
}

@media (max-width: 640px) {
  .single-work .work-context-links.has-one-context-link,
  .single-work .work-context-links.has-two-context-links {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
  }

  .single-work .work-context-links.has-one-context-link .work-context-link {
    width: 100% !important;
  }
}


/* v5.2 — Recent Work featured images 20% larger than v5.1.
   Aspect ratios, right alignment and text wrapping remain unchanged. */

.single-work .single-featured-float {
  width: min(43.2%, 504px) !important;
  max-width: 504px !important;
}

.single-work .single-featured-float.is-landscape {
  width: min(46.8%, 540px) !important;
  max-width: 540px !important;
}

.single-work .single-featured-float.is-portrait {
  width: min(31.2%, 360px) !important;
  max-width: 360px !important;
}

.single-work .single-featured-float.is-square {
  width: min(36%, 414px) !important;
  max-width: 414px !important;
}

@media (max-width: 640px) {
  .single-work .single-featured-float,
  .single-work .single-featured-float.is-landscape {
    width: min(100%, 624px) !important;
    max-width: 624px !important;
  }

  .single-work .single-featured-float.is-portrait {
    width: min(86.4%, 396px) !important;
    max-width: 396px !important;
  }

  .single-work .single-featured-float.is-square {
    width: min(98.4%, 456px) !important;
    max-width: 456px !important;
  }
}


/* v5.4 — Recent Work card image layers.
   The card template now renders two real image elements:
   - .epr-card-image-blur fills the fixed slot with a blurred cover copy;
   - .epr-card-image-main keeps the complete photograph visible with contain.
   This deliberately avoids relying on a pseudo-element/background variable and
   overrides the original generic .post-card-image img { object-fit: cover; }. */
.work-post-card .post-card-image {
  position: relative;
  display: block;
  aspect-ratio: 16 / 10;
  min-height: 220px;
  overflow: hidden;
  isolation: isolate;
  background: #ded8ce;
}

.work-post-card .post-card-image .epr-card-image-blur {
  position: absolute;
  inset: -24px;
  z-index: 0;
  display: block;
  width: calc(100% + 48px) !important;
  height: calc(100% + 48px) !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: cover !important;
  object-position: center !important;
  filter: blur(20px);
  transform: scale(1.06);
  opacity: .72;
  pointer-events: none;
}

.work-post-card .post-card-image::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(255,255,255,.10);
  pointer-events: none;
}

.work-post-card .post-card-image .epr-card-image-main {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
  object-position: center !important;
}

/* All Recent Work grids use template-parts/card-post.php, including the
   homepage shortcode, Recent Work hub, service/area work blocks and related
   jobs on single posts, so this treatment is shared everywhere. */


/* v5.4.9 — compact card system
   Presentation-only pass: smaller footprints, denser grids and less padding.
   Content, links, schema and image-delivery behaviour are unchanged. */

/* Core service / feature cards. */
.epr-card-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.epr-card,
.epr-card-grid .epr-card,
.detail-prose .epr-card-grid .epr-card {
  min-height: 150px;
  padding: 16px;
  border-radius: 14px;
}
.epr-card-grid .epr-card::before {
  width: 32px;
  height: 32px;
  margin-bottom: 12px;
  border-radius: 9px;
  font-size: 12px;
}
.epr-card-grid .epr-card h3 {
  margin-bottom: 5px;
  font-size: 18px;
  line-height: 1.18;
}
.epr-card-grid .epr-card p {
  font-size: 14px;
  line-height: 1.4;
}

/* Recent Work / job cards. */
.post-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px;
}
.post-card {
  border-radius: 14px;
}
.work-post-card .post-card-image,
.post-card-image {
  min-height: 0;
  aspect-ratio: 16 / 9;
}
.post-card-body {
  padding: 14px;
}
.post-card h2 {
  margin: 5px 0 7px;
  font-size: 18px;
  line-height: 1.18;
}
.work-card-meta,
.post-meta {
  min-height: 0;
  margin-bottom: 5px;
  font-size: 11px;
  gap: 5px;
}
.work-card-meta > *:not(:last-child)::after {
  margin-left: 5px;
}
.work-post-card .post-card-body > p {
  display: -webkit-box;
  min-height: 0;
  margin: 0;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  font-size: 14px;
  line-height: 1.38;
}

/* Area cards / links. */
.area-grid,
.page-article .area-grid {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 10px;
}
.area-link,
.page-article .area-link {
  min-height: 48px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 14px;
  line-height: 1.2;
}
.areas-info-grid {
  gap: 14px;
  margin: 34px 0 40px;
}
.areas-info-card {
  padding: 18px;
  border-radius: 14px;
}
.areas-info-card h2 {
  font-size: 24px;
}

/* About-page cards. */
.about-points,
.about-method-grid .about-points {
  gap: 10px;
}
.about-point,
.about-method-grid .about-point {
  padding: 15px;
  border-radius: 13px;
}
.about-point strong {
  margin-bottom: 5px;
  font-size: 16px;
}
.about-point p {
  font-size: 14px;
  line-height: 1.45;
}
.about-dark-block {
  gap: 22px;
  padding: 22px;
  border-radius: 16px;
}

/* Reviews cards. */
.review-platforms {
  gap: 12px;
}
.review-platform-card {
  min-height: 170px;
  padding: 18px;
  border-radius: 14px;
}
.review-platform-card strong {
  font-size: 31px;
}
.review-platform-link {
  padding-top: 8px;
}
.selected-reviews,
.selected-reviews-six {
  gap: 12px;
}
.selected-review,
.selected-reviews-six .selected-review {
  min-height: 165px;
  padding: 18px;
  border-radius: 14px;
}
.selected-review blockquote,
.selected-reviews-six .selected-review blockquote {
  margin: 10px 0 16px;
  font-size: 18px;
  line-height: 1.38;
}
.review-values {
  gap: 10px;
}
.review-value {
  padding: 15px;
  border-radius: 13px;
}
.review-value strong {
  margin-bottom: 5px;
  font-size: 16px;
}
.reviews-cta {
  gap: 22px;
  padding: 22px;
  border-radius: 16px;
}

/* Service / area hero contact card and Contact-page cards. */
.detail-contact-card {
  padding: 20px;
  border-radius: 16px;
}
.detail-contact-card h2 {
  font-size: 26px;
}
.detail-contact-actions {
  margin-top: 15px;
}
.contact-form-card {
  padding: 24px;
  border-radius: 16px;
}
.contact-side-stack {
  gap: 12px;
}
.contact-direct-card,
.contact-info-card {
  padding: 18px;
  border-radius: 14px;
}
.contact-direct-card h2 {
  font-size: 27px;
}
.contact-prep-grid {
  gap: 12px;
}
.contact-prep-item {
  min-height: 160px;
  padding: 18px;
  border-radius: 14px;
}
.contact-prep-item > span {
  margin-bottom: 16px;
}
.contact-reassurance {
  border-radius: 16px;
}
.contact-reassurance > div {
  padding: 18px;
}

/* Context cards beneath Recent Work stories. */
.work-context-links {
  gap: 10px;
}
.work-context-link {
  min-height: 70px;
  padding: 12px 14px;
  border-radius: 12px;
}
.single-work .work-context-links.has-one-context-link .work-context-link,
.single-work .work-context-links:has(> .work-context-link:only-child) .work-context-link {
  padding: 12px 14px !important;
}

/* Tablet: keep the cards compact without squeezing text too hard. */
@media (max-width: 1100px) {
  .epr-card-grid,
  .post-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
  .area-grid,
  .page-article .area-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

/* Phone / small tablet: two genuinely smaller cards per row. */
@media (max-width: 760px) {
  .epr-card-grid,
  .post-grid,
  .area-grid,
  .page-article .area-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }

  .epr-card,
  .epr-card-grid .epr-card,
  .detail-prose .epr-card-grid .epr-card {
    min-height: 0;
    padding: 13px;
    border-radius: 12px;
  }
  .epr-card-grid .epr-card::before {
    width: 28px;
    height: 28px;
    margin-bottom: 9px;
    font-size: 11px;
  }
  .epr-card-grid .epr-card h3 {
    font-size: 16px;
  }
  .epr-card-grid .epr-card p {
    font-size: 12.5px;
    line-height: 1.35;
  }

  .post-card-body {
    padding: 11px;
  }
  .post-card h2 {
    margin: 4px 0 5px;
    font-size: 16px;
    line-height: 1.16;
  }
  .work-card-meta,
  .post-meta {
    font-size: 10px;
  }
  .work-post-card .post-card-body > p {
    -webkit-line-clamp: 2;
    font-size: 12.5px;
    line-height: 1.35;
  }

  .area-link,
  .page-article .area-link {
    min-height: 42px;
    padding: 8px 10px;
    font-size: 13px;
  }

  .review-platforms,
  .selected-reviews,
  .selected-reviews-six,
  .review-values {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 10px;
  }
  .review-platform-card,
  .selected-review,
  .selected-reviews-six .selected-review,
  .review-value {
    min-height: 0;
    padding: 14px;
  }
  .review-platform-card strong {
    font-size: 25px;
  }
  .selected-review blockquote,
  .selected-reviews-six .selected-review blockquote {
    margin: 8px 0 12px;
    font-size: 15px;
  }

  .areas-info-card,
  .detail-contact-card,
  .contact-direct-card,
  .contact-info-card,
  .about-point {
    padding: 15px;
  }
}

/* Very narrow phones: preserve two-up job/service cards but keep typography sane. */
@media (max-width: 390px) {
  .epr-card-grid,
  .post-grid {
    gap: 8px;
  }
  .epr-card-grid .epr-card,
  .post-card-body {
    padding: 10px;
  }
  .epr-card-grid .epr-card h3,
  .post-card h2 {
    font-size: 15px;
  }
  .epr-card-grid .epr-card p,
  .work-post-card .post-card-body > p {
    font-size: 12px;
  }
}

/* v5.4.10 — compact vertical rhythm + homepage balance
   Halves the large presentation gaps across non-job pages, fills the homepage
   Recent Work grid with eight cards, and reduces the desktop What I repair
   image without changing its mobile treatment. Single Recent Work stories are
   intentionally excluded from the spacing pass. */

/* Homepage: halve the large top/bottom breathing room. */
.hero-visual-layout {
  padding: 31px 0 29px;
}
.section {
  padding: 38px 0;
}
.section-heading {
  margin-bottom: 20px;
}

/* Homepage What I repair: keep the mobile image exactly as before, but stop
   the desktop image from occupying the whole right-hand half of the canvas. */
@media (min-width: 961px) {
  .visual-intro-grid {
    grid-template-columns: minmax(0, 1fr) 440px;
    gap: 48px;
  }
  .feature-art {
    width: 440px;
    max-width: 100%;
    justify-self: end;
  }
}

/* All normal pages: reduce the old 58–84px structural gaps. The single job
   template uses .single-work-shell and keeps its deliberately separate rhythm. */
.content-shell:not(.single-work-shell) {
  padding-top: 30px;
  padding-bottom: 42px;
}
.content-shell:not(.single-work-shell) > .detail-page,
.content-shell:not(.single-work-shell) > .about-page,
.content-shell:not(.single-work-shell) > .reviews-page,
.content-shell:not(.single-work-shell) > .contact-page {
  margin-top: -30px;
}
.detail-hero,
.about-hero,
.reviews-hero,
.contact-hero {
  padding-top: 30px;
  padding-bottom: 32px;
}
.detail-body,
.about-body,
.reviews-body,
.contact-body {
  padding-top: 34px;
  padding-bottom: 44px;
}
.page-article .page-header,
.recent-work-hub .page-header,
.archive-header {
  margin-bottom: 22px;
}
.content-shell:not(.single-work-shell) .prose h2 {
  margin-top: 1.35em;
}
.detail-prose > h2 {
  margin-top: 1.45em;
  padding-top: .75em;
}
.epr-service-work,
.epr-area-work {
  margin-top: 32px;
}

/* Mobile: same compact rhythm, while leaving homepage / content images at
   their existing one-column width and proportions. */
@media (max-width: 640px) {
  .hero-visual-layout {
    padding: 22px 0;
  }
  .section {
    padding: 26px 0;
  }
  .section-heading {
    margin-bottom: 16px;
  }
  .content-shell:not(.single-work-shell) {
    padding-top: 26px;
    padding-bottom: 34px;
  }
  .content-shell:not(.single-work-shell) > .detail-page,
  .content-shell:not(.single-work-shell) > .about-page,
  .content-shell:not(.single-work-shell) > .reviews-page,
  .content-shell:not(.single-work-shell) > .contact-page {
    margin-top: -26px !important;
  }
  .detail-hero,
  .about-hero,
  .reviews-hero,
  .contact-hero {
    padding-top: 24px !important;
    padding-bottom: 26px !important;
  }
  .detail-body,
  .about-body,
  .reviews-body,
  .contact-body {
    padding-top: 28px;
    padding-bottom: 38px;
  }
  .page-article .page-header,
  .recent-work-hub .page-header,
  .archive-header {
    margin-bottom: 18px;
  }
  .content-shell:not(.single-work-shell) .prose h2 {
    margin-top: 1.2em;
  }
  .detail-prose > h2 {
    margin-top: 1.25em;
    padding-top: .65em;
  }
  .epr-service-work,
  .epr-area-work {
    margin-top: 24px;
  }
}

/* v5.4.11 — compact Reviews cards
   The six featured Google reviews are intentionally denser: four across on
   desktop, three on medium screens and two on phones. Card heights follow
   their own content rather than being stretched to match neighbouring cards. */
.selected-reviews-six {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  align-items: start;
}
.selected-reviews-six .selected-review {
  min-height: 0;
  align-self: start;
  padding: 14px;
  border-radius: 13px;
}
.selected-reviews-six .selected-review blockquote {
  margin: 7px 0 10px;
  font-size: 15.5px;
  line-height: 1.34;
}
.selected-reviews-six .selected-review footer {
  gap: 1px;
  font-size: 12px;
  line-height: 1.35;
}
.selected-reviews-six .selected-review footer strong {
  font-size: 13.5px;
}
.selected-reviews-six .selected-review footer .review-source-link {
  margin-top: 6px;
  font-size: 12px;
}
.selected-reviews-six .selected-review .review-stars {
  font-size: 16px;
  line-height: 1;
  letter-spacing: .04em;
}

@media (max-width: 1100px) {
  .selected-reviews-six {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .selected-reviews-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px;
    align-items: start;
  }
  .selected-reviews-six .selected-review {
    min-height: 0;
    align-self: start;
    padding: 11px;
    border-radius: 12px;
  }
  .selected-review blockquote,
  .selected-reviews-six .selected-review blockquote {
    margin: 6px 0 9px;
    font-size: 13px;
    line-height: 1.32;
  }
  .selected-reviews-six .selected-review footer {
    font-size: 10.5px;
    line-height: 1.28;
  }
  .selected-reviews-six .selected-review footer strong {
    font-size: 12px;
  }
  .selected-reviews-six .selected-review footer .review-source-link {
    margin-top: 5px;
    font-size: 10.8px;
    line-height: 1.25;
  }
  .selected-reviews-six .selected-review .review-stars {
    font-size: 14px;
  }
}

@media (max-width: 390px) {
  .selected-reviews-six {
    gap: 8px;
  }
  .selected-reviews-six .selected-review {
    padding: 10px;
  }
  .selected-review blockquote,
  .selected-reviews-six .selected-review blockquote {
    font-size: 12.5px;
  }
}


/* v5.4.12 — stacked mobile rhythm + compact footer
   On narrow screens, adjacent stacked sections should contribute one visual
   gap between them instead of each adding a full top and bottom gap. Also
   trims inherited desktop grid gaps when those grids collapse to one column.
   Footer spacing is reduced on both desktop and mobile. */
.site-footer {
  padding: 38px 0 40px;
}
.footer-grid {
  gap: 30px;
}
.footer-bottom {
  margin-top: 24px;
  padding-top: 14px;
}

@media (max-width: 640px) {
  /* Two neighbouring homepage sections now add up to roughly the old single
     26px space, rather than 26px + 26px. */
  main > .section {
    padding-top: 13px;
    padding-bottom: 13px;
  }
  body.home main > .proof-strip + .section {
    padding-top: 11px;
  }
  main > .section.cta-section {
    padding-bottom: 26px;
  }

  /* These grids retain their desktop gap after becoming one column unless
     explicitly reset; that is the large empty space visible on mobile. */
  .visual-intro-grid,
  .split-copy,
  .detail-hero-grid,
  .about-hero-grid,
  .coverage-visual,
  .google-area-map,
  .areas-hub-cta,
  .contact-main-grid {
    gap: 24px;
  }

  /* Older page modules used their own large top/bottom margins. Normalise
     those on phones so stacked blocks do not create 50–90px dead zones. */
  .about-points,
  .about-repair-photo,
  .about-dark-block,
  .coverage-visual,
  .page-article .area-grid,
  .areas-info-grid,
  .google-area-map,
  .areas-hub-cta {
    margin-top: 24px;
    margin-bottom: 24px;
  }
  .contact-prep {
    margin-top: 24px;
    margin-bottom: 24px;
    padding-top: 24px;
  }
  .contact-prep-heading {
    margin-bottom: 20px;
  }

  .site-footer {
    padding: 28px 0 20px;
  }
  .footer-grid {
    gap: 18px;
  }
  .site-footer p {
    margin-top: 6px;
    margin-bottom: 6px;
  }
  .footer-heading {
    margin-top: 0;
    margin-bottom: 8px;
  }
  .footer-menu li + li {
    margin-top: 4px;
  }
  .footer-bottom {
    margin-top: 18px;
    padding-top: 12px;
    gap: 4px;
  }
  .footer-bottom span {
    display: block;
  }
  .footer-bottom span + span {
    margin-top: 4px;
  }
}

/* v5.4.13 — harden the compact footer rules.
   Explicit child resets remove inherited/default margins and min-heights,
   and mobile switches the footer columns to flex so no grid row can retain
   spare vertical height. */
.site-footer {
  margin: 0 !important;
  padding: 28px 0 26px !important;
}
.footer-grid {
  align-items: start !important;
  gap: 22px !important;
}
.footer-grid > div {
  margin: 0 !important;
  padding: 0 !important;
  min-height: 0 !important;
  align-self: start !important;
}
.site-footer .footer-brand {
  display: block;
  margin: 0 0 6px !important;
}
.site-footer p {
  margin: 5px 0 !important;
  padding: 0 !important;
}
.site-footer .footer-heading {
  margin: 0 0 8px !important;
  padding: 0 !important;
}
.site-footer .footer-menu {
  margin: 0 !important;
  padding: 0 !important;
}
.footer-bottom {
  margin-top: 16px !important;
  padding-top: 10px !important;
  padding-bottom: 0 !important;
  min-height: 0 !important;
  align-items: start !important;
}

@media (max-width: 640px) {
  .site-footer {
    padding: 20px 0 14px !important;
  }
  .footer-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }
  .footer-grid > div {
    width: 100% !important;
  }
  .site-footer .footer-heading {
    margin-bottom: 5px !important;
  }
  .site-footer p {
    margin: 3px 0 !important;
  }
  .site-footer .footer-menu li + li {
    margin-top: 2px !important;
  }
  .footer-bottom {
    display: block !important;
    margin-top: 12px !important;
    padding-top: 8px !important;
  }
  .footer-bottom span,
  .footer-bottom span + span {
    margin: 0 !important;
    padding: 0 !important;
  }
  .footer-bottom span + span {
    display: block !important;
    margin-top: 2px !important;
  }
}


/* v5.4.15 — About page rhythm cleanup.
   The About template already owns its internal top/bottom spacing, so do not
   stack the generic content-shell bottom padding underneath it. Also remove
   the later global prose heading margin from the first About heading. */
.content-shell.about-shell {
  padding-bottom: 0 !important;
}
.about-shell .about-body {
  padding-top: 20px !important;
  padding-bottom: 22px !important;
}
.about-shell .about-prose > h2:first-child {
  margin-top: 0 !important;
}
.about-shell .about-prose > :last-child {
  margin-bottom: 0 !important;
}

@media (max-width: 640px) {
  .about-shell .about-body {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
  }
}


/* v5.4.16 — service-detail vertical rhythm cleanup.
   All six service detail pages share the same template. The old spacing pass
   left the hero bottom padding and body top padding stacked together, while
   the generic prose h2 rule also overrode the intended zero margin on the
   first service heading. Recent Work then stacked its own wrapper margin with
   the generic h2 top margin. Keep one clear visual gap at each boundary rather
   than two gaps adding together. Areas pages are intentionally untouched. */
.service-detail .detail-hero {
  padding-bottom: 18px !important;
}
.service-detail .detail-body {
  padding-top: 18px !important;
  padding-bottom: 32px !important;
}
.service-detail .detail-prose > h2:first-child {
  margin-top: 0 !important;
  padding-top: 0 !important;
  border-top: 0 !important;
}
.service-detail .detail-prose > h2:not(:first-child) {
  margin-top: .65em !important;
  padding-top: .40em !important;
}
.service-detail .epr-service-work {
  margin-top: 20px !important;
  padding-top: 0 !important;
}
.service-detail .epr-service-work > h2 {
  margin-top: 0 !important;
  margin-bottom: 16px !important;
}

@media (max-width: 640px) {
  .service-detail .detail-hero {
    padding-bottom: 14px !important;
  }
  .service-detail .detail-body {
    padding-top: 14px !important;
    padding-bottom: 26px !important;
  }
  .service-detail .detail-prose > h2:not(:first-child) {
    margin-top: .60em !important;
    padding-top: .35em !important;
  }
  .service-detail .epr-service-work {
    margin-top: 16px !important;
  }
  .service-detail .epr-service-work > h2 {
    margin-bottom: 12px !important;
  }
}

/* v5.4.17 — compact review-platform cards.
   The Google / Trustpilot / Rated People summary cards on the Reviews page
   should read as compact source summaries rather than large feature cards. */
.reviews-page .review-platforms {
  gap: 10px !important;
  margin-bottom: 12px !important;
  align-items: start;
}
.reviews-page .review-platform-card {
  min-height: 0 !important;
  padding: 12px 14px !important;
  gap: 4px !important;
  border-radius: 12px !important;
}
.reviews-page .review-platform-name {
  font-size: 11px !important;
  line-height: 1.2 !important;
}
.reviews-page .review-platform-card strong {
  margin-top: 1px !important;
  font-size: 25px !important;
  line-height: 1 !important;
}
.reviews-page .review-platform-card .review-stars {
  font-size: 15px !important;
  line-height: 1 !important;
}
.reviews-page .review-platform-detail {
  margin-top: 2px !important;
  font-size: 12.5px !important;
  line-height: 1.3 !important;
}
.reviews-page .review-platform-link {
  margin-top: 4px !important;
  padding-top: 3px !important;
  font-size: 12.5px !important;
  line-height: 1.25 !important;
}
.reviews-page .review-count-note {
  margin-top: 8px !important;
  margin-bottom: 28px !important;
}

@media (max-width: 640px) {
  .reviews-page .review-platforms {
    gap: 8px !important;
  }
  .reviews-page .review-platform-card {
    padding: 10px !important;
    gap: 3px !important;
    border-radius: 11px !important;
  }
  .reviews-page .review-platform-name {
    font-size: 9.5px !important;
  }
  .reviews-page .review-platform-card strong {
    font-size: 20px !important;
  }
  .reviews-page .review-platform-card .review-stars {
    font-size: 13px !important;
  }
  .reviews-page .review-platform-detail {
    font-size: 11px !important;
    line-height: 1.25 !important;
  }
  .reviews-page .review-platform-link {
    margin-top: 3px !important;
    padding-top: 2px !important;
    font-size: 11px !important;
  }
  .reviews-page .review-count-note {
    margin-bottom: 22px !important;
  }
}

/* v5.4.20 — Reviews utility-card + Reviews/footer rhythm + corrected homepage Why spacing.
   The four "What matters on a locksmith job" cards are small utility cards,
   not feature panels: tighten their padding/type and square off the corners.
   Also remove the oversized white tail beneath the Reviews CTA. On the
   homepage, retain all three Why statements, keep dividers only between
   statements, and remove the redundant final rule/extra bottom space. */
.reviews-page .review-values {
  gap: 9px !important;
  margin-top: 16px !important;
  margin-bottom: 16px !important;
  align-items: stretch;
}
.reviews-page .review-value {
  min-height: 0 !important;
  padding: 11px 12px !important;
  border-radius: 7px !important;
}
.reviews-page .review-value strong {
  margin-bottom: 4px !important;
  font-size: 14px !important;
  line-height: 1.2 !important;
}
.reviews-page .review-value p {
  font-size: 12.5px !important;
  line-height: 1.35 !important;
}
.reviews-page .reviews-cta {
  margin-top: 16px !important;
}
.reviews-page .reviews-body {
  padding-bottom: 18px !important;
}

.home-why {
  padding-top: 28px !important;
  padding-bottom: 16px !important;
}
.home-why .split-copy {
  align-items: center;
  gap: 42px;
}
.home-why .why-points p {
  margin: 0 !important;
  padding: 0 0 14px !important;
  border: 0 !important;
}
.home-why .why-points p + p {
  padding-top: 14px !important;
}
.home-why .why-points p:not(:last-child) {
  border-bottom: 1px solid #333 !important;
}
.home-why .why-points p:last-child {
  padding-bottom: 0 !important;
}

@media (max-width: 640px) {
  .reviews-page .review-values {
    gap: 8px !important;
    margin-top: 14px !important;
    margin-bottom: 14px !important;
  }
  .reviews-page .review-value {
    padding: 9px 10px !important;
    border-radius: 6px !important;
  }
  .reviews-page .review-value strong {
    font-size: 12.5px !important;
  }
  .reviews-page .review-value p {
    font-size: 11.5px !important;
    line-height: 1.3 !important;
  }
  .reviews-page .reviews-cta {
    margin-top: 14px !important;
  }
  .reviews-page .reviews-body {
    padding-bottom: 12px !important;
  }

  .home-why {
    padding-top: 20px !important;
    padding-bottom: 12px !important;
  }
  .home-why .split-copy {
    gap: 14px !important;
  }
  .home-why .why-points p {
    padding-bottom: 12px !important;
  }
  .home-why .why-points p + p {
    padding-top: 12px !important;
  }
  .home-why .why-points p:last-child {
    padding-bottom: 0 !important;
  }
}


/* v5.4.21 — definitive cache-busted fixes.
   Use a new physical CSS filename so LiteSpeed/CDN/browser caches cannot keep
   serving an earlier combined main.css. */
.home-why .why-points > p:last-of-type {
  border-bottom: 0 !important;
  border-block-end: 0 !important;
  box-shadow: none !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}
.home-why .why-points > p:not(:last-of-type) {
  border-bottom: 1px solid #333 !important;
}
.home-why .why-points {
  border-bottom: 0 !important;
  box-shadow: none !important;
}
.home-why {
  padding-bottom: 8px !important;
}

/* Reviews utility cards: genuinely compact and much squarer. */
.reviews-page .review-values {
  gap: 8px !important;
  margin-top: 12px !important;
  margin-bottom: 12px !important;
  align-items: start !important;
}
.reviews-page .review-values > .review-value,
.reviews-page .review-value {
  min-height: 0 !important;
  height: auto !important;
  align-self: start !important;
  padding: 8px 10px !important;
  border-radius: 4px !important;
}
.reviews-page .review-value strong {
  margin-bottom: 3px !important;
  font-size: 13px !important;
  line-height: 1.15 !important;
}
.reviews-page .review-value p {
  margin: 0 !important;
  font-size: 11.5px !important;
  line-height: 1.3 !important;
}
.reviews-page .reviews-cta {
  margin-top: 12px !important;
}
.reviews-page .reviews-body {
  padding-bottom: 10px !important;
}

@media (max-width: 640px) {
  .home-why { padding-bottom: 7px !important; }
  .reviews-page .review-values { gap: 7px !important; }
  .reviews-page .review-value { padding: 7px 8px !important; border-radius: 4px !important; }
  .reviews-page .review-value strong { font-size: 12px !important; }
  .reviews-page .review-value p { font-size: 10.8px !important; line-height: 1.27 !important; }
}

/* v5.4.22 — correct the Reviews target and rebalance homepage Why spacing.
   Previous releases over-compressed the four small "What matters" utility
   cards. Restore those to a normal compact card size, and compact the actual
   selected Google review cards instead. Long review copy remains in the HTML
   but is visually clamped on the card; the Google link remains available. */

/* Restore the four "What matters on a locksmith job" utility cards. */
.reviews-page .review-values {
  gap: 12px !important;
  margin-top: 20px !important;
  margin-bottom: 20px !important;
  align-items: stretch !important;
}
.reviews-page .review-values > .review-value,
.reviews-page .review-value {
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  padding: 16px !important;
  border-radius: 10px !important;
}
.reviews-page .review-value strong {
  display: block;
  margin-bottom: 6px !important;
  font-size: 14px !important;
  line-height: 1.22 !important;
}
.reviews-page .review-value p {
  margin: 0 !important;
  font-size: 13px !important;
  line-height: 1.42 !important;
}

/* Compact the actual selected Google review cards: 4 x 2, squarer footprint. */
.reviews-page .selected-reviews,
.reviews-page .selected-reviews-six {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 12px !important;
  align-items: stretch !important;
  margin-top: 20px !important;
  margin-bottom: 30px !important;
}
.reviews-page .selected-review,
.reviews-page .selected-reviews-six .selected-review {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: auto !important;
  align-self: stretch !important;
  padding: 12px !important;
  border-radius: 9px !important;
  overflow: hidden !important;
}
.reviews-page .selected-review blockquote,
.reviews-page .selected-reviews-six .selected-review blockquote {
  display: -webkit-box !important;
  -webkit-box-orient: vertical !important;
  -webkit-line-clamp: 8 !important;
  overflow: hidden !important;
  margin: 6px 0 9px !important;
  font-size: 13.5px !important;
  line-height: 1.28 !important;
  font-weight: 700 !important;
}
.reviews-page .selected-review footer,
.reviews-page .selected-reviews-six .selected-review footer {
  margin-top: auto !important;
  gap: 1px !important;
  font-size: 11px !important;
  line-height: 1.28 !important;
}
.reviews-page .selected-review footer strong,
.reviews-page .selected-reviews-six .selected-review footer strong {
  font-size: 12.5px !important;
}
.reviews-page .selected-review .review-source-link,
.reviews-page .selected-reviews-six .selected-review .review-source-link {
  margin-top: 5px !important;
  font-size: 10.8px !important;
  line-height: 1.22 !important;
}
.reviews-page .selected-review .review-stars,
.reviews-page .selected-reviews-six .selected-review .review-stars {
  font-size: 14px !important;
  line-height: 1 !important;
}

/* The final divider stays removed; add back 20% of the current bottom breathing room. */
.home-why {
  padding-bottom: 10px !important;
}
.home-why .why-points > p:last-of-type {
  border-bottom: 0 !important;
  border-block-end: 0 !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

@media (max-width: 760px) {
  .reviews-page .selected-reviews,
  .reviews-page .selected-reviews-six {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 9px !important;
    margin-bottom: 22px !important;
  }
  .reviews-page .selected-review,
  .reviews-page .selected-reviews-six .selected-review {
    padding: 10px !important;
    border-radius: 8px !important;
  }
  .reviews-page .selected-review blockquote,
  .reviews-page .selected-reviews-six .selected-review blockquote {
    -webkit-line-clamp: 8 !important;
    margin: 5px 0 8px !important;
    font-size: 11.8px !important;
    line-height: 1.27 !important;
  }
  .reviews-page .selected-review footer,
  .reviews-page .selected-reviews-six .selected-review footer {
    font-size: 10px !important;
    line-height: 1.24 !important;
  }
  .reviews-page .selected-review footer strong,
  .reviews-page .selected-reviews-six .selected-review footer strong {
    font-size: 11.5px !important;
  }
  .reviews-page .selected-review .review-source-link,
  .reviews-page .selected-reviews-six .selected-review .review-source-link {
    font-size: 9.8px !important;
  }
  .reviews-page .selected-review .review-stars,
  .reviews-page .selected-reviews-six .selected-review .review-stars {
    font-size: 13px !important;
  }

  .reviews-page .review-values {
    gap: 9px !important;
    margin-top: 16px !important;
    margin-bottom: 16px !important;
  }
  .reviews-page .review-value {
    padding: 12px !important;
    border-radius: 8px !important;
  }
  .reviews-page .review-value strong {
    font-size: 12.5px !important;
  }
  .reviews-page .review-value p {
    font-size: 11.5px !important;
    line-height: 1.34 !important;
  }

  .home-why {
    padding-bottom: 8.5px !important;
  }
}

/* v5.4.44 — Recent Work search + email subscription alignment.
   The subscription pill sits immediately after Search on desktop; mobile stacks it below. */
.recent-work-search-row {
  display: flex;
  width: 100%;
  margin-top: 22px;
  align-items: center;
  justify-content: flex-start;
  gap: 3px;
  flex-wrap: wrap;
}
.recent-work-search-row .recent-work-search {
  flex: 0 1 720px;
  width: min(100%, 720px);
  margin-top: 0;
}
.recent-work-search-row .epr-rwsub-hub {
  flex: 0 0 auto;
  margin: 0;
}
.recent-work-search-row .epr-rwsub-hub:has(details[open]) {
  flex: 1 0 100%;
}
@media (max-width: 760px) {
  .recent-work-search-row {
    display: block;
    width: 100%;
    margin-top: 18px;
  }
  .recent-work-search-row .recent-work-search {
    width: 100%;
    margin-top: 0;
  }
  .recent-work-search-row .epr-rwsub-hub {
    width: 100%;
    margin-top: 3px;
  }
}

/* v5.4.49 — mobile Enquire anchor lands at the top of the enquiry card, clear of the sticky header. */
@media (max-width: 640px) {
  #send-enquiry {
    scroll-margin-top: 120px;
  }
}

/* v5.4.50 — mobile homepage length reduction only.
   Desktop keeps all six service cards and all eight Recent Work cards.
   On phones, show three real cards and use the fourth grid position as a
   lightweight route to the full Services / Recent Work pages. */
.home-mobile-more-tile {
  display: none;
}

@media (max-width: 760px) {
  .home-services-section .epr-card-grid > .epr-card:nth-child(n+4) {
    display: none !important;
  }

  .home-recent-work-section .post-grid > article.post-card:nth-of-type(n+4) {
    display: none !important;
  }

  .home-services-section .home-mobile-more-tile,
  .home-recent-work-section .home-mobile-more-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
    min-height: 100%;
    padding: 14px 10px;
    border: 1px solid rgba(23, 23, 23, .14);
    border-radius: 12px;
    background: rgba(255, 255, 255, .72);
    color: #171717;
    font-size: 15px;
    line-height: 1.22;
    font-weight: 900;
    text-align: center;
    text-decoration: none;
  }

  .home-services-section .home-mobile-more-tile:hover,
  .home-recent-work-section .home-mobile-more-tile:hover {
    border-color: rgba(23, 23, 23, .28);
    background: #fff;
  }

  .home-mobile-more-tile span[aria-hidden=\"true\"] {
    font-size: 18px;
    line-height: 1;
  }

  .home-recent-work-section .row-heading > .text-link {
    display: none;
  }
}

/* v5.4.51 — simplify the sitewide footer.
   Useful links duplicate the primary navigation and are removed from markup;
   the remaining brand and contact blocks use a balanced two-column layout. */
@media (min-width: 641px) {
  .site-footer .footer-grid {
    grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr) !important;
  }
}

/* v5.4.52 — compact homepage coverage links and discreet footer privacy link. */
.home-area-links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 24px;
}
.site-footer .footer-privacy-link {
  display: inline-block;
  margin-top: 6px;
  font-size: 14px;
}
@media (max-width: 640px) {
  .home-area-links {
    align-items: flex-start;
    flex-direction: column;
    gap: 10px;
  }
}


/* v5.4.53 — slimmer mobile sticky action bar; keep the existing 20px labels. */
@media (max-width: 640px) {
  body { padding-bottom: 48px; }
  .mobile-callbar a { padding: 8px; }
}

/* v5.4.54 — calmer homepage hero typography and slimmer hero action pills.
   Desktop heading is reduced responsively to hold the existing copy to two lines
   through the normal two-column desktop range; mobile only steps down slightly.
   Hero action labels keep their existing font size while vertical padding is trimmed. */
@media (min-width: 961px) {
  .hero-visual-layout .hero-copy h1 {
    font-size: clamp(39px, 4vw, 50px);
  }
}
@media (max-width: 640px) {
  .hero-visual-layout .hero-copy h1 {
    font-size: 39px;
  }
}
.hero-visual-layout .hero-actions .button-large {
  padding-top: 9px;
  padding-bottom: 9px;
}

/* v5.4.55 — mobile homepage hero actions are redundant with the fixed Call / Enquire bar. */
@media (max-width: 640px) {
  .hero-visual-layout .hero-actions {
    display: none;
  }
}

/* v5.4.58 — mobile homepage Need Help actions stay stacked but compact.
   A single max-content grid column takes the width of the longer label, so
   both buttons are equal width without stretching across the screen. */
@media (max-width: 640px) {
  body.home .cta-section .cta-actions {
    display: grid;
    grid-template-columns: max-content;
    justify-content: center;
  }
}

/* v5.4.59 — four service-specific Recent Work cards.
   Desktop keeps all four on one line; phone/tablet uses a balanced 2 × 2 grid.
   This is scoped only to the Recent Work block on service detail pages. */
.service-detail .epr-service-work .post-grid {
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}
@media (max-width: 960px) {
  .service-detail .epr-service-work .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* v5.4.61 — homepage mobile What I repair spacing only.
   Removes the redundant heading margin after the copy and halves the stacked
   grid gap so the space before the repair image is roughly half its old size. */
@media (max-width: 640px) {
  body.home .visual-intro-grid { gap: 12px; }
  body.home .visual-intro-grid > .section-heading { margin-bottom: 0; }
}

/* v5.4.62 — homepage mobile hero trust-to-van spacing only.
   Halves the inherited 50px one-column hero grid gap between the trust pills
   and the van card; desktop/tablet remain unchanged. */
@media (max-width: 640px) {
  body.home .hero-grid-visual { gap: 25px; }
}

/* v5.4.64 — tighten service-page spacing around Customer feedback only. */
.service-detail .epr-service-review-block {
  margin-top: 22px !important;
  padding-top: 16px !important;
}
.service-detail .detail-body { padding-bottom: 14px !important; }
.content-shell.service-shell { padding-bottom: 12px !important; }
@media (max-width: 640px) {
  .service-detail .epr-service-review-block {
    margin-top: 16px !important;
    padding-top: 12px !important;
  }
  .service-detail .detail-body { padding-bottom: 12px !important; }
  .content-shell.service-shell { padding-bottom: 10px !important; }
}

/* v5.4.65 — all trust/info pills use the homepage pill text size.
   v5.4.66 — restore a small deliberate gap between the service feedback eyebrow and heading. */
.mini-trust span,
.detail-trust-row span {
  font-size: 14px !important;
}
.service-detail .epr-service-review-block > .eyebrow {
  margin-bottom: 8px !important;
}
.service-detail .epr-service-review-block > h2 {
  margin-top: 0 !important;
}


/* v5.4.68 — desktop topbar unchanged; mobile uses two rows: independent, then pricing + availability. */
.topbar-inner{display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);gap:20px;align-items:center}
.topbar-independent{text-align:left}
.topbar-availability{text-align:center;white-space:nowrap}
.topbar-pricing{text-align:right}
@media(max-width:640px){
  .topbar-inner{display:grid;grid-template-columns:auto auto;justify-content:center;column-gap:0;row-gap:1px;text-align:center;padding-block:7px}
  .topbar-inner span{display:block!important}
  .topbar-independent{grid-column:1 / -1;grid-row:1;text-align:center}
  .topbar-pricing{grid-column:1;grid-row:2;text-align:right;white-space:nowrap}
  .topbar-pricing::after{content:" · ";white-space:pre}
  .topbar-availability{grid-column:2;grid-row:2;text-align:left;white-space:nowrap}
}

/* v5.4.69 — give the header logo a little vertical breathing room without changing its size. */
.custom-logo-link{display:inline-flex;align-items:center;padding-block:6px}


/* v5.4.72 — Reviews-page spacing rhythm and trust-pill balance only.
   Keep the trust pills on their natural mobile wrap and halve the oversized
   vertical gaps around the Reviews hero, Google-review section, What matters
   section and footer. */
.reviews-page .reviews-hero {
  padding-top: 15px !important;
}
.reviews-page .review-count-note {
  margin-bottom: 14px !important;
}
.reviews-page .review-count-note + h2,
.reviews-page .selected-reviews + h2,
.reviews-page .selected-reviews-six + h2 {
  margin-top: .675em !important;
}
.reviews-page .selected-reviews,
.reviews-page .selected-reviews-six {
  margin-bottom: 15px !important;
}
.reviews-page .reviews-body {
  padding-bottom: 5px !important;
}
.content-shell.reviews-shell {
  padding-bottom: 21px !important;
}
@media (max-width: 640px) {
  .reviews-page .reviews-hero {
    padding-top: 12px !important;
  }
  .reviews-page .review-count-note {
    margin-bottom: 11px !important;
  }
  .reviews-page .review-count-note + h2,
  .reviews-page .selected-reviews + h2,
  .reviews-page .selected-reviews-six + h2 {
    margin-top: .6em !important;
  }
  .reviews-page .selected-reviews,
  .reviews-page .selected-reviews-six {
    margin-bottom: 11px !important;
  }
  .reviews-page .reviews-body {
    padding-bottom: 5px !important;
  }
  .content-shell.reviews-shell {
    padding-bottom: 17px !important;
  }
}


/* v5.4.73 Reviews CTA eyebrow/title gap + mobile pills-to-cards spacing only */
.reviews-page .reviews-cta .eyebrow {
  margin-bottom: 5px !important;
}
.reviews-page .reviews-cta h2 {
  margin-top: .05em !important;
}
@media (max-width: 640px) {
  .reviews-page .reviews-hero {
    padding-bottom: 18px !important;
  }
  .reviews-page .reviews-body {
    padding-top: 18px !important;
  }
}


/* v5.4.74 — final Reviews mobile spacing + desktop footer contact alignment.
   Reviews mobile keeps 18px below the pills and 18px above the four platform cards.
   Desktop footer contact block is aligned to the far right; tablet/mobile are unchanged. */
@media (min-width: 961px) {
  .site-footer .footer-grid > div:last-child {
    justify-self: end;
  }
}

/* v5.4.77 — homepage What I repair image: treat the Sunbury repair photo as
   a genuinely new image. Preserve its complete square composition with no
   cropping and keep it deliberately modest so it supports, rather than
   dominates, the section. */
body.home .feature-art {
  width: 320px;
  max-width: 100%;
  justify-self: end;
}
body.home .feature-art picture {
  display: block;
}
body.home .feature-art .home-repair-photo {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
  object-position: center;
}
@media (max-width: 960px) {
  body.home .feature-art {
    width: 280px;
    justify-self: center;
  }
}


/* v5.4.82 — homepage mobile What I repair paragraph spacing only.
   Halve the visual breathing room immediately above and below the copy;
   desktop/tablet remain unchanged. */
@media (max-width: 640px) {
  body.home .visual-intro-grid { gap: 6px; }
  body.home .visual-intro-grid > .section-heading h2 { margin-bottom: 9px; }
  body.home .visual-intro-grid > .section-heading p:not(.eyebrow) {
    margin-top: 9px;
    margin-bottom: 9px;
  }
}

/* v5.4.84 — compact homepage review proof directly beneath the hero trust pills.
   Mobile gets a full-width two-line strip for fast scanning; desktop/tablet keep
   the same restrained component without adding a bulky testimonial section. */
.home-review-proof {
  display: inline-flex;
  flex-direction: column;
  gap: 1px;
  max-width: 100%;
  margin-top: 12px;
  padding: 10px 14px;
  border: 1px solid #d7d0c4;
  border-radius: 14px;
  background: rgba(255,255,255,.82);
  color: var(--ink);
  line-height: 1.25;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
}
.home-review-proof strong {
  font-size: 15px;
  font-weight: 900;
}
.home-review-proof span {
  color: #5f5a53;
  font-size: 13px;
  font-weight: 700;
}
.home-review-proof:hover {
  border-color: #c7baa4;
  background: #fff;
  text-decoration: none;
}
@media (max-width: 640px) {
  body.home .home-review-proof {
    width: 100%;
    padding: 10px 12px;
    border-radius: 12px;
    text-align: center;
  }
}


/* v5.4.85 — homepage review proof typography/colour + desktop trust layout only. */
body.home .home-review-proof strong {
  color: var(--accent-dark);
  font-size: 16px;
}
body.home .home-review-proof span {
  color: var(--accent-dark);
  font-size: 14px;
}
@media (min-width: 961px) {
  body.home .mini-trust {
    display: grid;
    grid-template-columns: max-content max-content;
    justify-content: start;
    align-items: center;
    gap: 8px;
  }
  body.home .mini-trust span:nth-child(1) { grid-column: 1; grid-row: 1; }
  body.home .mini-trust span:nth-child(3) { grid-column: 2; grid-row: 1; }
  body.home .mini-trust span:nth-child(2) { grid-column: 1; grid-row: 2; }
  body.home .mini-trust span:nth-child(4) { grid-column: 2; grid-row: 2; }
}


/* v5.4.87 — homepage review proof stars + 12px desktop inline gap + mobile fit-content pill. */
body.home .home-review-proof span {
  color: #5f5a53;
}
@media (min-width: 961px) {
  body.home .home-review-proof {
    flex-direction: row;
    align-items: baseline;
    gap: 12px;
  }
}
@media (max-width: 640px) {
  body.home .home-review-proof {
    display: flex;
    width: fit-content;
    max-width: 100%;
    margin: 12px auto 0;
  }
}

/* v5.4.89 — mobile trust pills keep the requested 2 + 2 + 1 order using the original flexible wrapping behaviour.
   Row 1: Available 24/7 + Mechanical engineering background.
   Row 2: Local & independent + Most common parts carried.
   The centred review proof remains the third row. Desktop is unchanged. */
@media (max-width: 640px) {
  body.home .mini-trust {
    display: flex;
    width: auto;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
  }
  body.home .mini-trust span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    max-width: none;
    text-align: center;
  }
  body.home .mini-trust span:nth-child(1) { order: 1; }
  body.home .mini-trust span:nth-child(3) { order: 2; }
  body.home .mini-trust span:nth-child(2) { order: 3; }
  body.home .mini-trust span:nth-child(4) { order: 4; }
}

/* v5.4.90 — desktop homepage trust pills hug their own text; mobile header logo 15% smaller only. */
@media (min-width: 961px) {
  body.home .mini-trust span {
    justify-self: start;
    width: max-content;
    max-width: 100%;
  }
}
@media (max-width: 640px) {
  .custom-logo {
    max-width: 140.25px;
    max-height: 61.2px;
  }
}


/* v5.4.91 — correct homepage trust-pill packing + true mobile logo reduction + tighter mobile hero top spacing only.
   Desktop: use flex with a forced row break so each pill hugs its own content.
   Mobile: make the logo genuinely 15% smaller (117px -> 99.45px) and halve only the space above the homepage eyebrow. */
@media (min-width: 961px) {
  body.home .mini-trust {
    display: flex;
    width: max-content;
    max-width: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    column-gap: 8px;
    row-gap: 8px;
  }
  body.home .mini-trust::before {
    content: "";
    flex: 0 0 100%;
    height: 0;
    order: 3;
  }
  body.home .mini-trust span:nth-child(1) { order: 1; }
  body.home .mini-trust span:nth-child(3) { order: 2; }
  body.home .mini-trust span:nth-child(2) { order: 4; }
  body.home .mini-trust span:nth-child(4) { order: 5; }
}
@media (max-width: 640px) {
  .custom-logo {
    width: 99.45px !important;
    max-width: 99.45px !important;
    height: auto !important;
    max-height: none !important;
  }
  body.home .hero-visual-layout {
    padding-top: 11px;
  }
}
/* v5.4.93 — mobile footer 11px vertical padding + black review platform text. */
body.home .home-review-proof span{color:#111!important}
@media(max-width:640px){.site-footer{padding-top:11px!important;padding-bottom:11px!important}}

/* v5.4.94 — homepage review proof true pill + Why eyebrow standard size/colour. */
body.home .home-review-proof {
  border-radius: 999px !important;
}

/* v5.4.95 — site-wide eyebrow sizing + consistent dark-background eyebrow colour. */
.eyebrow {
  font-size: 14px !important;
}
.section-dark .eyebrow,
.detail-contact-card .eyebrow,
.service-inline-cta .eyebrow,
.detail-service-photo figcaption .eyebrow,
.service-bottom-photo figcaption .eyebrow,
.google-area-map .eyebrow,
.areas-hub-cta .eyebrow,
.reviews-cta .eyebrow,
.contact-direct-card .eyebrow,
.about-dark-block .eyebrow,
.hero-panel .eyebrow,
.contact-reassurance .eyebrow,
.about-hero-photo figcaption .eyebrow,
.about-repair-photo figcaption .eyebrow {
  color: #e5bd73 !important;
}
@media (max-width: 640px) {
  .eyebrow {
    font-size: 13px !important;
  }
}

/* v5.4.96 — mobile homepage proof-strip vertical rhythm only. */
@media (max-width: 640px) {
  body.home .proof-grid {
    padding-block: 13px;
    row-gap: 13px;
  }
  body.home .proof-grid > div {
    padding-top: 0;
    padding-bottom: 0;
  }
  body.home .proof-grid strong,
  body.home .proof-grid span {
    line-height: 1.3;
  }
}

/* v5.4.98 — mobile homepage hero rhythm only. */
@media (max-width: 640px) {
  body.home .hero-copy > .eyebrow {
    margin-bottom: 13px !important;
  }
  body.home .hero-copy > h1 {
    margin-top: 0 !important;
  }
  body.home .hero-lead {
    margin-bottom: 13px;
  }
  body.home .mini-trust {
    margin-top: 0;
    column-gap: 8px;
    row-gap: 13px;
  }
  body.home .home-review-proof {
    margin: 13px auto 0;
  }
  body.home .hero-grid-visual {
    gap: 13px;
  }
  body.home .hero-visual-layout {
    padding-bottom: 13px !important;
  }
}

/* v5.4.99 — mobile homepage hero rhythm correction. */
@media (max-width: 640px) {
  body.home .hero-copy > .eyebrow { margin-bottom: 8px !important; }
  body.home .hero-copy > h1 { margin-top: 0 !important; }
  body.home .hero-lead { margin-bottom: 13px; }
  body.home .mini-trust { margin-top: 0; column-gap: 8px; row-gap: 8px; }
  body.home .home-review-proof { margin: 8px auto 0; }
  body.home .hero-grid-visual { gap: 13px; }
  body.home .hero-visual-layout { padding-bottom: 13px !important; }
}
/* v5.4.100 — mobile H1-to-lead gap + compact floating note. */
@media (max-width: 640px) {
  body.home .hero-copy > h1 {
    margin-bottom: 13px !important;
  }
  body.home .hero-lead {
    margin-top: 0 !important;
  }
  body.home .floating-note {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 18px !important;
    padding-bottom: 8px !important;
  }
  body.home .floating-note span {
    margin-top: 0 !important;
  }
}
/* v5.4.102 — mobile floating-note line gap + one-line What I repair H2. */
@media (max-width: 640px) {
  body.home .floating-note {
    gap: 4px !important;
  }
  body.home .visual-intro-grid > .section-heading > h2 {
    font-size: clamp(24px, 8vw, 30px) !important;
    letter-spacing: -0.04em !important;
    white-space: nowrap;
  }
}
/* v5.4.108 — mobile-only homepage heading alignment and Recent Work rows. */
.rw-mobile-punct {
  display: none;
}
@media (max-width: 640px) {
  body.home .hero-copy > h1,
  body.home .visual-intro-grid > .section-heading > h2,
  body.home .home-services-section > .wrap > .section-heading > h2,
  body.home .home-recent-work-section .row-heading > div > h2,
  body.home .home-why > .wrap > div:first-child > h2,
  body.home main > section.section:not(.home-recent-work-section):not(.home-services-section):not(.home-why):not(.cta-section) > .wrap > .section-heading > h2,
  body.home .cta-section .cta-box > div:first-child > h2 {
    text-align: center;
  }

  body.home .home-recent-work-section .home-recent-heading {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    width: 100%;
  }
  body.home .home-recent-work-section .home-recent-heading > span {
    display: block;
    width: 100%;
  }
  body.home .home-recent-work-section .rw-desktop-punct,
  body.home .home-recent-work-section .rw-desktop-space {
    display: none;
  }
  body.home .home-recent-work-section .rw-mobile-punct {
    display: inline;
  }
}
/* v5.4.109 — mobile floating-note true line-spacing fix. */
@media (max-width: 640px) {
  body.home .floating-note strong,
  body.home .floating-note span {
    line-height: 1.15 !important;
  }
}
/* v5.4.112 — desktop floating-note second line on one row. */
@media (min-width: 961px) {
  body.home .floating-note {
    max-width: 340px;
  }
  body.home .floating-note span {
    white-space: nowrap;
  }
}
/* v5.4.113 — mobile Areas hub rhythm + alphabetical Local coverage. */
@media (max-width: 640px) {
  .areas-hub-page {
    margin-top: -15px;
  }
  .areas-hub-page .page-header {
    margin-bottom: 13px;
  }
  .areas-hub-page .page-header .eyebrow {
    margin-bottom: 8px !important;
  }
  .areas-hub-page .page-header h1 {
    margin: 0 !important;
  }
  .areas-hub-page .entry-content.prose > p:first-child {
    margin-top: 0;
    margin-bottom: 13px;
  }

  .areas-hub-page .coverage-visual {
    margin: 13px 0 26px;
    gap: 13px;
  }
  .areas-hub-page .coverage-visual-copy .eyebrow,
  .areas-hub-page .areas-info-card .eyebrow,
  .areas-hub-page .google-area-map .eyebrow,
  .areas-hub-page .areas-hub-cta .eyebrow {
    margin-bottom: 8px !important;
  }
  .areas-hub-page .coverage-visual-copy h2,
  .areas-hub-page .areas-info-card h2,
  .areas-hub-page .google-area-map-copy h2,
  .areas-hub-page .areas-hub-cta h2 {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }
  .areas-hub-page .coverage-visual-copy h2 + p,
  .areas-hub-page .areas-info-card h2 + p,
  .areas-hub-page .google-area-map-copy h2 + p,
  .areas-hub-page .areas-hub-cta h2 + p {
    margin-top: 0;
  }
  .areas-hub-page .coverage-visual-copy h2 + p {
    margin-bottom: 13px;
  }
  .areas-hub-page .coverage-note {
    margin-top: 0;
  }

  .areas-hub-page .coverage-diagram {
    gap: 8px;
  }
  .areas-hub-page .coverage-town-ashford { order: 1; }
  .areas-hub-page .coverage-town-egham { order: 2; }
  .areas-hub-page .coverage-town-feltham { order: 3; }
  .areas-hub-page .coverage-town-hounslow { order: 4; }
  .areas-hub-page .coverage-town-staines { order: 5; }
  .areas-hub-page .coverage-town-sunbury { order: 6; }
  .areas-hub-page .coverage-town-walton { order: 7; }
  .areas-hub-page .coverage-town-weybridge { order: 8; }

  .areas-hub-page .entry-content.prose > h2 {
    margin-top: 26px;
    margin-bottom: 9px;
    padding-top: 0;
  }
  .areas-hub-page .entry-content.prose > h2 + p {
    margin-top: 0;
    margin-bottom: 13px;
  }
  .areas-hub-page .page-article .area-grid,
  .areas-hub-page .area-grid {
    margin: 13px 0 26px;
  }
  .areas-hub-page .areas-info-grid {
    margin: 26px 0;
    gap: 13px;
  }
  .areas-hub-page .google-area-map {
    margin: 26px 0;
    gap: 13px;
  }
  .areas-hub-page .areas-hub-cta {
    margin-top: 26px;
    gap: 13px;
  }
}
/* v5.4.114 — Areas CTA finish + footer heading alignment. */
.site-footer .footer-brand {
  color: #e5bd73 !important;
}

@media (max-width: 640px) {
  .content-shell.areas-hub-shell {
    padding-bottom: 13px !important;
  }

  .areas-hub-page .areas-hub-cta {
    padding-top: 18px !important;
    padding-bottom: 18px !important;
    margin-bottom: 0 !important;
  }
}

@media (min-width: 961px) {
  .site-footer .footer-brand,
  .site-footer .footer-heading {
    font-size: 24px !important;
    line-height: 1.08 !important;
    margin-top: 0 !important;
  }
}
/* v5.4.115 — footer Contact title case. */
.site-footer .footer-heading {
  text-transform: none !important;
}

/* v5.4.116 — mobile footer Contact font size only. */
@media (max-width: 640px) {
  .site-footer .footer-heading {
    font-size: 17px;
  }
}

/* v5.4.117 — About page mobile-only spacing, aligned to the Areas hub rhythm.
   Keep the existing layout, type sizing and desktop/tablet styling unchanged. */
@media (max-width: 640px) {
  /* Same compact 11px page-start offset as the Areas hub. */
  .about-shell .about-hero {
    padding-top: 11px !important;
    padding-bottom: 13px !important;
  }
  .about-shell .about-hero-grid {
    gap: 13px;
  }
  .about-shell .about-hero-copy > .eyebrow {
    margin-bottom: 8px !important;
  }
  .about-shell .about-hero-copy > h1 {
    margin: 0 0 13px !important;
  }
  .about-shell .about-hero-copy > .detail-trust-row {
    margin-top: 13px;
  }

  /* One section boundary: 13px before and after the hero's bottom border. */
  .about-shell .about-body {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .about-shell .about-prose > h2 {
    margin-top: 26px !important;
    margin-bottom: 9px !important;
    padding-top: 0 !important;
  }
  .about-shell .about-prose > h2:first-child {
    margin-top: 0 !important;
  }
  .about-shell .about-prose > p {
    margin-top: 0;
    margin-bottom: 13px;
  }

  /* Keep each of the About content modules on the Areas page's 13/26 rhythm. */
  .about-shell .about-prose > .about-points,
  .about-shell .about-prose > .about-method-grid,
  .about-shell .about-prose > .about-repair-photo {
    margin-top: 13px;
    margin-bottom: 26px;
  }
  .about-shell .about-prose > .about-points,
  .about-shell .about-method-grid,
  .about-shell .about-method-grid .about-points {
    gap: 13px;
  }
  .about-shell .about-prose > .about-dark-block {
    margin-top: 26px;
    margin-bottom: 0 !important;
    padding-top: 18px;
    padding-bottom: 18px;
    gap: 13px;
  }
  .about-shell .about-dark-block .eyebrow {
    margin-bottom: 8px !important;
  }
  .about-shell .about-dark-block h2 {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }
  .about-shell .about-dark-block h2 + p {
    margin-top: 0;
  }
}

/* v5.4.118 — About mobile trust pills: two deliberate rows with natural pill widths.
   Row 1: Available 24/7 | Mechanical engineering background
   Row 2: Independent locksmith | Based in Ashford */
@media (max-width: 640px) {
  .about-shell .about-hero-copy > .detail-trust-row {
    display: flex;
    flex-wrap: wrap;
    column-gap: 8px;
    row-gap: 4px; /* Two 4px gaps around the zero-height row break = 8px. */
  }
  .about-shell .about-hero-copy > .detail-trust-row > span {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
    text-align: center;
  }
  .about-shell .about-hero-copy > .detail-trust-row > span:nth-child(2) { order: 1; }
  .about-shell .about-hero-copy > .detail-trust-row > span:nth-child(3) { order: 2; flex: 1 1 0; }
  .about-shell .about-hero-copy > .detail-trust-row > span:nth-child(1) { order: 4; }
  .about-shell .about-hero-copy > .detail-trust-row > span:nth-child(4) { order: 5; flex: 1 1 0; }
  .about-shell .about-hero-copy > .detail-trust-row::after {
    content: "";
    flex-basis: 100%;
    height: 0;
    order: 3;
  }
}

/* v5.4.119 — About page mobile only: compact Image rights section boundaries.
   13px from the final dark CTA to the following heading, and from the
   final licensing paragraph box to the footer. */
@media (max-width: 640px) {
  .about-shell .about-prose > .about-dark-block + h2 {
    margin-top: 13px !important;
  }
  .about-shell .about-body {
    padding-bottom: 0 !important;
  }
  .about-shell .about-prose > p:last-child {
    margin-bottom: 13px !important;
  }
}

/* v5.4.120 — About mobile: target the actual Image rights heading, regardless
   of whether WordPress puts an extra element between it and the dark CTA.
   Only this final section's transition is changed; desktop is unaffected. */
@media (max-width: 640px) {
  .about-shell .about-prose .about-dark-block {
    margin-bottom: 0 !important;
  }
  .about-shell .about-prose > *:has(.about-dark-block) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  .about-shell .about-prose h2.about-image-rights-heading {
    margin-top: 13px !important;
    padding-top: 0 !important;
  }
  .about-shell .about-prose p.about-rights-blank-spacer,
  .about-shell .about-prose .wp-block-spacer:has(+ h2.about-image-rights-heading),
  .about-shell .about-prose p:empty:has(+ h2.about-image-rights-heading),
  .about-shell .about-prose p:has(> br:only-child):has(+ h2.about-image-rights-heading) {
    display: none !important;
  }
}


/* v5.4.121 — Contact page mobile: exact two-row trust pills, compact section
   spacing in the Areas/About rhythm, and numbered guidance headings inline. */
@media (max-width: 640px) {
  /* Keep the four original pills and their text sizes, but force the two pairs
     requested, including on narrow phones (where an older rule made one col). */
  .contact-page .contact-hero .detail-trust-row {
    display: grid;
    grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
    column-gap: 8px;
    row-gap: 8px;
    margin-top: 13px;
  }
  .contact-page .contact-hero .detail-trust-row > span {
    min-width: 0;
  }
  .contact-page .contact-hero .detail-trust-row > span:nth-child(1) { grid-area: 1 / 1; }
  .contact-page .contact-hero .detail-trust-row > span:nth-child(2) { grid-area: 2 / 1; }
  .contact-page .contact-hero .detail-trust-row > span:nth-child(3) { grid-area: 1 / 2; }
  .contact-page .contact-hero .detail-trust-row > span:nth-child(4) { grid-area: 2 / 2; }

  /* Main hero and guidance: same 8/9/13/26px relationships as Areas/About. */
  .contact-page .contact-hero {
    padding-top: 11px !important;
    padding-bottom: 13px !important;
  }
  .contact-page .contact-hero .eyebrow { margin-bottom: 8px !important; }
  .contact-page .contact-hero h1 {
    margin: 0 0 13px !important;
  }
  .contact-page .contact-lead p { margin: 0 !important; }
  .contact-page .contact-body {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .contact-page .contact-prose > .contact-prep {
    margin: 0 0 26px !important;
    padding: 0 !important;
  }
  .contact-page .contact-prep-heading { margin-bottom: 13px !important; }
  .contact-page .contact-prep-heading .eyebrow { margin-bottom: 8px !important; }
  .contact-page .contact-prep-heading h2 {
    margin: 0 !important;
    padding: 0 !important;
  }
  .contact-page .contact-prep-grid { gap: 13px; }

  /* Match 01/02/03 to the existing 17px titles, on the same first line.
     The description stays full width directly below, without affecting copy. */
  .contact-page .contact-prep-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 9px;
    align-content: start;
  }
  .contact-page .contact-prep-item > span {
    grid-column: 1;
    grid-row: 1;
    align-self: baseline;
    margin: 0 !important;
    font-size: 17px;
    line-height: 1.25;
  }
  .contact-page .contact-prep-item > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: baseline;
    min-width: 0;
    margin: 0 !important;
    line-height: 1.25;
  }
  .contact-page .contact-prep-item > p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0 !important;
  }

  /* Continue the same rhythm through the form, side cards and reassurance. */
  .contact-page .contact-main-grid { gap: 13px; }
  .contact-page .contact-form-card h2 { margin: 0 0 9px !important; }
  .contact-page .contact-form-card > h2 + p {
    margin-top: 0 !important;
    margin-bottom: 13px;
  }
  .contact-page .contact-form-card .epr-contact-form { margin-top: 13px; }
  .contact-page .contact-direct-card .eyebrow { margin-bottom: 8px !important; }
  .contact-page .contact-direct-card h2 { margin: 0 0 9px !important; }
  .contact-page .contact-direct-card h2 + p { margin-top: 0; }
  .contact-page .contact-info-card h3 { margin: 0 0 9px; }
  .contact-page .contact-info-card h3 + p { margin-top: 0; }
  .contact-page .contact-side-stack { gap: 13px !important; margin-top: 13px; }
  .contact-page .contact-main-grid + .contact-reassurance {
    margin-top: 26px !important;
  }
  /* The body already gives the final card 13px clearance to the footer. */
  .content-shell:not(.single-work-shell):has(> .contact-page) {
    padding-bottom: 0 !important;
  }
}

/* v5.4.122 — mobile navigation: consistent one-third-reduced row padding,
   shorter outer gaps, fixed alignment based on the widest primary label
   ("Recent Work", measured ~106px at the existing 17px font).
   Keep a fixed list width so an expanded submenu cannot re-centre the links. */
@media (max-width: 640px) {
  .site-header .header-inner {
    row-gap: 0;
  }
  .site-header .primary-nav.is-open {
    padding: 8px 4px 8px 0;
    scrollbar-gutter: stable;
  }
  .site-header .epr-menu {
    width: calc(50% + 53px);
    margin-left: auto;
    margin-right: 0;
  }
  .site-header .epr-menu > li {
    margin-top: 0;
    margin-bottom: 0;
  }
  .site-header .epr-menu > li > a {
    padding: 8px 44px 8px 0;
  }
  .site-header .epr-menu > .menu-item-has-children > .submenu-toggle {
    top: 2px;
  }
  .site-header .epr-menu .sub-menu {
    margin: 0 0 4px;
    padding: 4px 0 4px 12px;
  }
  .site-header .epr-menu .sub-menu li + li {
    margin-top: 0;
  }
  .site-header .epr-menu .sub-menu a {
    padding: 6px 4px;
  }
}

/* v5.4.123 — Mobile-only, right-half flyout menu.
   Position the opened panel relative to the full-width sticky header, outside
   header grid flow, so neither opening it nor expanding a submenu moves the page.
   Retain v5.4.122's compact item and submenu spacing without changing desktop. */
@media (max-width: 640px) {
  .site-header .primary-nav.is-open {
    position: absolute;
    top: 100%;
    left: 50%;
    right: 0;
    width: 50%;
    margin: 0;
    background: #fff;
    border-left: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    box-shadow: -10px 14px 24px rgba(0, 0, 0, .10);
    z-index: 1;
    /* Keep the last menu item clear of the fixed Call / Enquire bar. */
    max-height: calc(100dvh - 205px);
    padding: 8px 8px 8px 8px;
  }

  /* Pin all rows to the same left edge, including expanded submenu content.
     No centring based on the expanded menu's changing intrinsic width. */
  .site-header .epr-menu {
    width: 100%;
    margin-inline: 0;
  }
}


/* v5.4.124 — phone-only flyout refinements; preserve v5.4.122 item sizing.
   The vertical panel position is measured against the actual Menu button by
   main.js, not against the much taller logo/header box. */
@media (max-width: 640px) {
  .site-header .primary-nav.is-open {
    top: var(--epr-mobile-nav-top, 100%);
    max-height: var(--epr-mobile-nav-max-height, calc(100dvh - 205px));
  }

  /* Wrapping submenu labels retain a clear hanging bullet. */
  .site-header .epr-menu .sub-menu a {
    position: relative;
    padding-left: 17px;
  }
  .site-header .epr-menu .sub-menu a::before {
    content: "\2022";
    position: absolute;
    left: 3px;
    top: 6px;
    line-height: inherit;
    color: var(--accent-dark);
    font-weight: 800;
  }

  /* Unlike the earlier mobile drawer, this half-width menu has no backdrop.
     Touching the visible page dismisses it and must allow page scrolling. */
  body.mobile-menu-open {
    overflow: visible;
  }
}

/* v5.4.127 — mobile-only Menu button text size; other menu styles unchanged. */
@media (max-width: 640px) {
  .site-header .menu-toggle { font-size: 18px; }
}


/* v5.4.128 — mobile-only continuation of the approved 8/9/13/26px rhythm.
   Scoped to remaining page templates; Home, Areas hub, About, Contact and
   Reviews are intentionally excluded. Typography is never changed here. */
@media (max-width: 640px) {
  /* Service hub and remaining ordinary WordPress pages. */
  .content-shell:has(> .page-article:not(.areas-hub-page)) {
    padding-bottom: 13px;
  }
  .page-article:not(.areas-hub-page) { margin-top: -15px; }
  .page-article:not(.areas-hub-page) .page-header { margin-bottom: 13px; }
  .page-article:not(.areas-hub-page) .page-header .eyebrow { margin-bottom: 8px !important; }
  .page-article:not(.areas-hub-page) .page-header h1 { margin: 0 !important; }
  .page-article:not(.areas-hub-page) .entry-content.prose > p {
    margin-top: 0;
    margin-bottom: 13px;
  }
  .page-article:not(.areas-hub-page) .entry-content.prose > h2 {
    margin-top: 26px;
    margin-bottom: 9px;
    padding-top: 0;
  }
  .page-article:not(.areas-hub-page) .entry-content.prose > h2:first-child { margin-top: 0; }
  .page-article:not(.areas-hub-page) .entry-content.prose > h2 + p { margin-top: 0; }
  .page-article:not(.areas-hub-page) .entry-content.prose > .epr-card-grid {
    margin-top: 13px;
    margin-bottom: 26px;
    gap: 13px;
  }

  /* Six service details and the individual area pages share this template. */
  .content-shell:has(> .detail-page) { padding-bottom: 0; }
  .detail-page .detail-hero {
    padding-top: 11px !important;
    padding-bottom: 13px !important;
  }
  .detail-page .detail-hero-grid { gap: 13px; }
  .detail-page .detail-hero .eyebrow { margin-bottom: 8px !important; }
  .detail-page .detail-hero h1 { margin: 0 0 13px !important; }
  .detail-page .detail-lead p { margin: 0; }
  .detail-page .detail-trust-row { margin-top: 13px; }
  .detail-page .detail-contact-card { padding-block: 18px; }
  .detail-page .detail-contact-card .eyebrow { margin-bottom: 8px !important; }
  .detail-page .detail-contact-card h2 { margin: 0 0 9px !important; }
  .detail-page .detail-contact-card p:not(.eyebrow) { margin: 0 0 13px; }
  .detail-page .detail-contact-actions { margin-top: 13px; gap: 8px; }
  .detail-page .detail-body {
    padding-top: 13px !important;
    padding-bottom: 13px !important;
  }
  .detail-page .detail-prose > h2 {
    margin-top: 26px !important;
    margin-bottom: 9px !important;
    padding-top: 0 !important;
  }
  /* An older, more-specific service heading rule also used !important. */
  .service-detail .detail-prose > h2:not(:first-child) {
    margin-top: 26px !important;
    padding-top: 0 !important;
  }
  .detail-page .detail-prose > h2:first-child { margin-top: 0 !important; }
  .detail-page .detail-prose > h2 + p,
  .detail-page .detail-prose > h2 + ul { margin-top: 0; }
  .detail-page .detail-prose > p { margin-top: 0; margin-bottom: 13px; }
  .detail-page .detail-prose > ul,
  .detail-page .detail-prose > ol { margin-bottom: 13px; }
  .detail-page .detail-prose > .epr-card-grid {
    margin-top: 13px !important;
    margin-bottom: 26px;
    gap: 13px;
  }
  .detail-page .epr-service-work,
  .detail-page .epr-area-work {
    margin-top: 26px !important;
    padding-top: 0 !important;
  }
  .detail-page .epr-service-work > h2,
  .detail-page .epr-area-work > h2 {
    margin-top: 0 !important;
    margin-bottom: 9px !important;
  }
  .detail-page .epr-service-work .post-grid,
  .detail-page .epr-area-work .post-grid { gap: 13px; }
  .detail-page .service-inline-cta {
    margin-top: 26px;
    margin-bottom: 13px;
    padding-block: 18px;
    gap: 13px;
  }
  .detail-page .service-inline-cta .eyebrow { margin-bottom: 8px !important; }
  .detail-page .service-inline-cta h2 { margin: 0 0 9px !important; }
  .detail-page .service-inline-cta p:not(.eyebrow) { margin-top: 0; }

  /* Recent Work index and archives: no change to search, map or subscriber logic. */
  .content-shell.recent-work-hub,
  body.archive main.content-shell { padding-top: 11px; padding-bottom: 13px; }
  .recent-work-hub .recent-work-header,
  body.archive .archive-header { margin-bottom: 26px; }
  .recent-work-hub .recent-work-header .eyebrow,
  body.archive .archive-header .eyebrow { margin-bottom: 8px !important; }
  .recent-work-hub .recent-work-header h1,
  body.archive .archive-header h1 { margin: 0 0 13px; }
  .recent-work-hub .recent-work-header > p:not(.eyebrow) { margin: 0 0 13px; }
  .recent-work-hub .recent-work-search-row { margin-top: 13px; }
  .recent-work-hub .recent-work-service-links { margin-top: 13px; gap: 8px; }
  .recent-work-hub .recent-work-grid,
  body.archive .post-grid { gap: 13px; }
  .recent-work-hub .recent-work-pagination,
  body.archive .pagination { margin-top: 13px; }

  /* Individual job stories: preserve the existing order and media treatment. */
  .single-work-shell { padding-top: 11px; }
  .single-work-shell .work-breadcrumbs { margin-bottom: 13px; }
  .single-work-shell .work-back-link { margin-bottom: 13px; }
  .single-work-shell .work-meta-row { margin-bottom: 9px; }
  .single-work-shell .single-header { margin-bottom: 13px; }
  .single-work-shell .work-context-links {
    margin-top: 26px;
    margin-bottom: 13px;
    gap: 13px;
  }
  .single-work-shell .work-post-nav {
    margin-top: 26px;
    padding-block: 13px;
    gap: 13px;
  }
  .single-work-shell .work-related-section {
    margin-top: 26px;
    padding-block: 26px;
  }
  .single-work-shell .work-section-heading { gap: 13px; margin-bottom: 13px; }

  /* Numbered service cards, on any page: move only the heading beside its
     number. All existing font sizes, weights and colours remain untouched. */
  .epr-card-grid .epr-card {
    display: grid;
    grid-template-columns: 28px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 13px;
    align-content: start;
  }
  .epr-card-grid .epr-card::before {
    grid-column: 1;
    grid-row: 1;
    margin-bottom: 0;
  }
  .epr-card-grid .epr-card h3 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    align-self: center;
    margin-top: 0;
  }
  .epr-card-grid .epr-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin-top: 9px;
  }
}

/* v5.4.130 — Mobile service pages only: visually remove the divider immediately
   above prose H2s without shifting them by even 1px. Dividers on other blocks,
   including those followed by an eyebrow, are unchanged. */
@media (max-width: 640px) {
  .service-detail .detail-prose > h2 {
    border-top-color: transparent;
  }
}


/* v5.4.131 — Mobile area detail pages only: hide the same H2 divider
   removed from mobile service detail pages, retaining its exact spacing.
   Eyebrow-associated borders and all other page templates are unaffected. */
@media (max-width: 640px) {
  .area-detail .detail-prose > h2 {
    border-top-color: transparent;
  }
}


/* v5.4.133 — Desktop Recent Work search and email alignment only.
   Keep the 720px form footprint when there is room, but let its input occupy
   all space not used by Search. The email pill anchors to the far-right edge.
   On narrower desktop widths the pill wraps rather than squashing the input.
   Mobile layout and all other page templates are unchanged. */
@media (min-width: 761px) {
  .recent-work-hub .recent-work-search-row .recent-work-search {
    display: flex;
    flex: 0 0 min(100%, 720px);
    align-items: stretch;
    gap: 10px;
    min-width: 0;
    max-width: 720px;
  }
  .recent-work-hub .recent-work-search input[type="search"] {
    flex: 1 1 auto;
    width: auto;
    min-width: 0;
  }
  .recent-work-hub .recent-work-search button[type="submit"] {
    flex: 0 0 auto;
  }
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub {
    margin-left: auto;
  }
}


/* v5.4.134 — Conservative desktop spacing cleanup. Desktop (>=961px) only.
   Fix excessive module-to-module whitespace where original 50-58px margins
   survived the general compact-rhythm pass. Typography, sizing, mobile and
   Reviews are deliberately not changed. */
@media (min-width: 961px) {
  /* Areas hub: original independently-spaced blocks leave overlarge breaks. */
  .areas-hub-page .coverage-visual { margin-top: 24px; margin-bottom: 28px; }
  .areas-hub-page .area-grid { margin-top: 22px; margin-bottom: 28px; }
  .areas-hub-page .areas-info-grid { margin-top: 28px; margin-bottom: 28px; }
  .areas-hub-page .google-area-map { margin-top: 28px; margin-bottom: 28px; }
  .areas-hub-page .areas-hub-cta { margin-top: 28px; }

  /* About: remove accumulated 50px module tails + large heading starts. */
  .about-shell .about-prose > .about-points,
  .about-shell .about-prose > .about-method-grid,
  .about-shell .about-prose > .about-repair-photo {
    margin-top: 24px;
    margin-bottom: 28px;
  }
  .about-shell .about-prose > .about-dark-block { margin-top: 28px; }
  .about-shell .about-prose > h2:not(:first-child) { margin-top: 30px; }

  /* Contact: avoid 50-58px breaks between the guidance, form and reassurance. */
  .contact-page .contact-prep { margin-bottom: 28px; }
  .contact-page .contact-main-grid + .contact-reassurance { margin-top: 28px; }

  /* Area detail: the H2 margin PLUS border padding previously accumulated. */
  .area-detail .detail-prose > h2:not(:first-child) {
    margin-top: 24px;
    padding-top: 14px;
  }
  .area-detail .epr-area-work { margin-top: 26px; padding-top: 0; }
  .area-detail .epr-area-work > h2 { margin-top: 0; margin-bottom: 16px; }

  /* Single jobs: retain a proper related-work section without a huge lead-in. */
  .single-work-shell .work-related-section {
    margin-top: 30px;
    padding-top: 30px;
    padding-bottom: 30px;
  }
}

/* v5.4.134 — Search only: half-width desktop form, far-right email pill.
   At and below 760px, input + button together fill the content width;
   exactly 8px separates that search row from the subscription pill. */
@media (min-width: 761px) {
  .recent-work-hub .recent-work-search-row .recent-work-search {
    flex: 0 1 min(50%, 590px);
    width: min(50%, 590px);
    max-width: 590px;
  }
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub { margin-left: auto; }
}
@media (max-width: 760px) {
  .recent-work-hub .recent-work-search-row .recent-work-search {
    display: flex;
    align-items: stretch;
    width: 100%;
    max-width: none;
    min-width: 0;
    margin: 0;
    gap: 8px;
  }
  .recent-work-hub .recent-work-search input[type="search"] {
    flex: 1 1 0;
    width: 100%;
    min-width: 0;
  }
  .recent-work-hub .recent-work-search button[type="submit"] { flex: 0 0 auto; }
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub {
    margin-top: 8px !important;
    margin-bottom: 0;
  }
}

/* v5.4.134 — Always take the visually-hidden accessible search label out
   of the flex row; otherwise its text can steal ~200px from the input in
   contexts where WordPress's global .screen-reader-text CSS is absent. */
.recent-work-hub .recent-work-search .screen-reader-text {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}


/* v5.4.135 — Recent Work search controls and service-pill spacing only.
   The current 21px native input and button become 32px (approximately 50%
   taller), on mobile and desktop. Their existing horizontal widths stay put.
   Move the service links down, away from the email subscription control,
   without relocating the map or changing its behaviour. */
.recent-work-hub .recent-work-search input[type="search"],
.recent-work-hub .recent-work-search button[type="submit"] {
  box-sizing: border-box;
  height: 32px;
  min-height: 32px;
}
@media (max-width: 760px) {
  /* The subscriber pill is separated by 8px above AND below, before the
     independent service-link section spacing. */
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub {
    margin-top: 8px !important;
    margin-bottom: 8px !important;
  }
}


/* v5.4.136 — Recent Work hub and cards.
   v5.4.135 only increased the nav margin inside the header, pushing the map
   down with it. Move the nav below the header and place it directly above the
   map hook with an explicit small gap. These are page-specific rules. */
/* More of the original job summary is visible without stretching other cards.
   Both original theme cards and shortcode-generated work cards use these
   classes; keep the Read job link at the bottom of every equal-height row. */
.work-post-card {
  display: flex;
  flex-direction: column;
  height: 100%;
}
.work-post-card .post-card-body {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-width: 0;
}
.work-post-card .post-card-body > p {
  -webkit-line-clamp: 6;
  line-clamp: 6;
}
.work-post-card .post-card-body > .text-link {
  align-self: flex-start;
  margin-top: auto;
  padding-top: 12px;
}
@media (max-width: 760px) {
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub {
    margin-top: 15px !important;
    margin-bottom: 8px !important;
  }
  .work-post-card .post-card-body > p {
    -webkit-line-clamp: 6;
    line-clamp: 6;
  }
}

/* Shared post-grid markup is also used by the homepage Recent Work shortcode. */
.post-grid > .post-card { display: flex; flex-direction: column; height: 100%; }
.post-grid > .post-card .post-card-body { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.post-grid > .post-card .post-card-body > p { -webkit-line-clamp: 6; line-clamp: 6; }
.post-grid > .post-card .post-card-body > .text-link { align-self: flex-start; margin-top: auto; padding-top: 12px; }


/* v5.4.137 — Place service links in their requested ACTUAL position, after
   the job cards and pagination, immediately before the map plugin's after-grid
   hook. This corrects the previous mistaken above-grid positioning.
   Use more space BEFORE the pills than AFTER them, on desktop and mobile. */
.recent-work-hub > .wrap > .recent-work-pagination + .recent-work-service-links {
  margin: 28px 0 0;
}
.recent-work-hub .recent-work-service-links + .epr-rw-map-section {
  margin-top: 10px;
}
@media (max-width: 760px) {
  .recent-work-hub > .wrap > .recent-work-pagination + .recent-work-service-links {
    margin-top: 22px;
  }
  .recent-work-hub .recent-work-service-links + .epr-rw-map-section {
    margin-top: 10px;
  }
}


/* v5.4.138 — Exact Recent Work spacing and five-line job summaries.
   The existing inner WordPress pagination nav inherits .pagination's own
   margin-top, so neutralise it instead of stacking two pagination margins. */
.post-grid > .post-card .post-card-body > p,
.work-post-card .post-card-body > p {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 5;
  line-clamp: 5;
  overflow: hidden;
}
.recent-work-hub > .wrap > .recent-work-pagination {
  margin-top: 15px !important;
}
.recent-work-hub .recent-work-pagination .navigation.pagination {
  margin-top: 0 !important;
}
/* The plugin map's own bottom margin and the page's bottom padding used to
   accumulate. Keep a single, measured 15px clearance before the footer. */
.recent-work-hub .epr-rw-map-section {
  margin-bottom: 0 !important;
}
main.content-shell.recent-work-hub {
  padding-bottom: 15px !important;
}


/* v5.4.139 — Recent Work: independent, correctly paginated 6-up mobile
   and 8-up desktop grids. Do not just hide cards 7/8: that would skip jobs.
   Both HTML grids render once on the server to avoid mobile-cache problems. */
.recent-work-hub .recent-work-results-mobile { display: none; }
.recent-work-hub .recent-work-results-desktop { display: block; }
/* Restores the existing pill-to-map rhythm after wrapping the two result lists. */
.recent-work-hub > .wrap > .recent-work-service-links { margin: 28px 0 0; }
@media (max-width: 760px) {
  .recent-work-hub .recent-work-results-mobile { display: block; }
  .recent-work-hub .recent-work-results-desktop { display: none; }
  /* Equal visible gaps: bottom of Search -> pill, then pill -> first card. */
  .recent-work-hub .recent-work-search-row .epr-rwsub-hub {
    margin-top: 15px !important;
    margin-bottom: 0 !important;
  }
  .recent-work-hub > .wrap > .recent-work-header {
    margin-bottom: 15px !important;
  }
  .recent-work-hub > .wrap > .recent-work-service-links { margin-top: 22px; }
}
/* Keep the fixed 15px pagination gap after introducing result wrappers. */
.recent-work-hub .recent-work-results-mobile .recent-work-pagination,
.recent-work-hub .recent-work-results-desktop .recent-work-pagination {
  margin-top: 15px !important;
}


/* v5.4.140 — Make Recent Work JOB cards about 20% shorter in their TEXT
   portion only. Keep the image aspect ratio and dimensions untouched.
   Reduce the description from 5 to 3 lines, avoid excess link padding,
   and use slightly tighter vertical body padding. No font-size changes. */
.post-grid > .work-post-card .post-card-body {
  padding-block: 11px;
}
.post-grid > .work-post-card .post-card-body > p {
  -webkit-line-clamp: 3;
  line-clamp: 3;
}
.post-grid > .work-post-card .post-card-body > .text-link {
  padding-top: 5px;
}
@media (max-width: 760px) {
  .post-grid > .work-post-card .post-card-body { padding-block: 10px; }
}
@media (max-width: 390px) {
  .post-grid > .work-post-card .post-card-body { padding-block: 6px; }
}
@media (max-width: 340px) {
  .post-grid > .work-post-card .post-card-body { padding-block: 4px; }
}


/* v5.4.141 — see assets/js/recent-work-card-fill.js for dynamic per-card
   excerpt line allocation on the Recent Work index. No CSS layout changes. */


/* v5.4.142 — Recent Work service pills become service cards, using the site
   palette only. Desktop displays all six in one row; mobile shows a three-column
   3x2 grid. */
.recent-work-hub > .wrap > .recent-work-service-section {
  margin: 28px 0 0;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}
.recent-work-service-section__header {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(260px, .8fr);
  gap: 16px 28px;
  align-items: end;
  margin-bottom: 18px;
}
.recent-work-service-section__header h2 {
  margin: 0;
  font-size: clamp(28px, 3.2vw, 44px);
}
.recent-work-service-section__intro {
  margin: 0;
  max-width: 520px;
  color: var(--muted);
  font-size: 15px;
  line-height: 1.55;
}
.recent-work-hub .recent-work-service-links {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 14px;
  margin-top: 0;
}
.recent-work-service-links .recent-work-service-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 164px;
  padding: 16px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 8px 24px rgba(0,0,0,.04);
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease, background-color .15s ease;
}
.recent-work-service-links .recent-work-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--accent);
  box-shadow: 0 14px 30px rgba(0,0,0,.08);
  text-decoration: none;
}
.recent-work-service-card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 14px;
}
.recent-work-service-card__icon {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  color: var(--accent-dark);
  background: rgba(201, 151, 61, .12);
  border: 1px solid rgba(201, 151, 61, .2);
  flex: 0 0 auto;
}
.recent-work-service-card__icon svg {
  width: 22px;
  height: 22px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recent-work-service-card__arrow {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 999px;
  background: var(--accent);
  color: #fff;
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  flex: 0 0 auto;
}
.recent-work-service-card:hover .recent-work-service-card__arrow {
  background: var(--accent-dark);
}
.recent-work-service-card__title {
  display: block;
  margin: 0 0 8px;
  font-size: 15px;
  line-height: 1.25;
  font-weight: 800;
  letter-spacing: -.02em;
  text-wrap: balance;
}
.recent-work-service-card__description {
  display: block;
  margin-top: auto;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.45;
  text-wrap: pretty;
}
.recent-work-service-section + .epr-rw-map-section {
  margin-top: 14px;
}
@media (max-width: 1120px) {
  .recent-work-service-section__header {
    grid-template-columns: 1fr;
    align-items: start;
  }
  .recent-work-service-section__intro {
    max-width: 680px;
  }
  /* Desktop keeps all six cards on a single row. */
}
@media (max-width: 760px) {
  .recent-work-hub > .wrap > .recent-work-service-section {
    margin-top: 22px;
    padding-top: 16px;
  }
  .recent-work-service-section__header {
    gap: 10px;
    margin-bottom: 14px;
  }
  .recent-work-service-section__header h2 {
    font-size: 22px;
  }
  .recent-work-service-section__intro {
    font-size: 14px;
    line-height: 1.5;
  }
  .recent-work-hub .recent-work-service-links {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .recent-work-service-links .recent-work-service-card {
    min-height: 165px;
    padding: 10px 8px;
    border-radius: 14px;
  }
  .recent-work-service-card__top {
    margin-bottom: 10px;
    gap: 5px;
  }
  .recent-work-service-card__icon {
    width: 32px;
    height: 32px;
  }
  .recent-work-service-card__icon svg {
    width: 18px;
    height: 18px;
  }
  .recent-work-service-card__arrow {
    width: 23px;
    height: 23px;
    font-size: 13px;
  }
  .recent-work-service-card__title {
    font-size: 12px;
    line-height: 1.25;
    margin-bottom: 6px;
  }
  .recent-work-service-card__description {
    font-size: 11px;
    line-height: 1.35;
  }
  .recent-work-service-section + .epr-rw-map-section {
    margin-top: 12px;
  }
}


/* v5.4.143 — Approved Option 3 refinements and functional service filter.
   Keep the existing EPR palette, exact six-card row on desktop and 3x2 grid
   on mobile. Correct the old pill-style align-items:center cascade. */
.recent-work-service-links .recent-work-service-card {
  align-items: stretch;
  text-align: left;
}
.recent-work-service-links .recent-work-service-card__top {
  width: 100%;
  align-self: stretch;
  justify-content: space-between;
}
.recent-work-service-links .recent-work-service-card__icon {
  margin-right: auto;
}
.recent-work-service-links .recent-work-service-card__arrow {
  margin-left: auto;
}
.recent-work-service-links .recent-work-service-card.is-active {
  border-color: var(--accent);
  box-shadow: 0 0 0 1px var(--accent), 0 8px 24px rgba(0,0,0,.04);
}
.recent-work-service-card:focus-visible {
  outline: 3px solid var(--accent-dark);
  outline-offset: 3px;
}
.recent-work-filter-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px 16px;
  padding: 10px 14px;
  margin-bottom: 15px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--soft);
  font-size: 14px;
}
.recent-work-filter-status a { font-weight: 750; }
.recent-work-results-anchor { scroll-margin-top: 112px; }
@media (min-width: 761px) {
  .recent-work-service-section__header {
    grid-template-columns: minmax(0, .75fr) minmax(0, 1.25fr);
    gap: 20px;
    align-items: end;
  }
  .recent-work-service-section__intro {
    max-width: none;
    width: 100%;
    font-size: 14px;
    line-height: 1.55;
  }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .recent-work-service-section__header {
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
  }
}
@media (max-width: 760px) {
  .recent-work-service-links .recent-work-service-card {
    justify-content: flex-start;
  }
  .recent-work-service-links .recent-work-service-card__top {
    margin-bottom: 9px;
  }
  .recent-work-service-links .recent-work-service-card__title {
    margin-bottom: 6px;
  }
  .recent-work-service-links .recent-work-service-card__description {
    margin-top: 0;
  }
  .recent-work-filter-status {
    font-size: 13px;
  }
}

/* Keep the subtitle visually secondary, rather than inheriting the old pill
   link's font-weight:800. At narrow desktop sizes the six compact cards
   remain on one row without their icon and arrow overlapping. */
.recent-work-service-links .recent-work-service-card__description {
  font-weight: 400;
  margin-top: 0;
}
@media (min-width: 761px) and (max-width: 1120px) {
  .recent-work-service-links .recent-work-service-card {
    padding: 12px;
  }
  .recent-work-service-links .recent-work-service-card__top {
    gap: 5px;
  }
  .recent-work-service-links .recent-work-service-card__icon {
    width: 34px;
    height: 34px;
  }
  .recent-work-service-links .recent-work-service-card__icon svg {
    width: 18px;
    height: 18px;
  }
  .recent-work-service-links .recent-work-service-card__arrow {
    width: 23px;
    height: 23px;
  }
  .recent-work-service-links .recent-work-service-card__title,
  .recent-work-service-links .recent-work-service-card__description {
    overflow-wrap: anywhere;
  }
}


/* v5.4.144 — approved Recent Work service card refinements.
   Localised to this section; no global layout or filter changes. */
@media (min-width: 761px) {
  .recent-work-service-section__header {
    grid-template-columns: minmax(0, .70fr) minmax(0, 1.30fr);
    align-items: end;
  }
  .recent-work-service-section__intro--desktop {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: flex-end;
    text-align: right;
    gap: 0;
  }
  .recent-work-service-section__intro--desktop span { display: block; }
  .recent-work-service-section__intro--mobile { display: none; }
}
@media (min-width: 761px) and (max-width: 1120px) {
  .recent-work-service-section__header {
    grid-template-columns: 1fr;
  }
  .recent-work-service-section__intro--desktop {
    max-width: none;
    width: 100%;
    align-items: flex-end;
    text-align: right;
  }
}
.recent-work-service-links .recent-work-service-card__arrow {
  display: grid;
  place-items: center;
  padding: 0;
  text-align: center;
}
.recent-work-service-card__arrow svg {
  display: block;
  width: 18px;
  height: 18px;
  overflow: visible;
  fill: none;
  stroke: #fff;
  stroke-width: 2.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.recent-work-service-links .recent-work-service-card__icon svg {
  width: 24px;
  height: 24px;
  stroke-width: 2.15;
}
@media (max-width: 760px) {
  .recent-work-service-section__intro--desktop { display: none; }
  .recent-work-service-section__intro--mobile {
    display: block;
    max-width: none;
    font-size: 14px;
    line-height: 1.45;
  }
  .recent-work-service-links .recent-work-service-card {
    min-height: 0;
    height: auto;
    padding-block: 9px;
  }
  .recent-work-service-links .recent-work-service-card__top {
    margin-bottom: 7px;
  }
  .recent-work-service-links .recent-work-service-card__title {
    margin: 0 0 5px;
    line-height: 1.22;
  }
  .recent-work-service-links .recent-work-service-card__description {
    margin: 0;
    line-height: 1.35;
  }
  .recent-work-service-links .recent-work-service-card__icon svg {
    width: 22px;
    height: 22px;
    stroke-width: 2.3;
  }
  .recent-work-service-card__arrow svg {
    width: 18px;
    height: 18px;
    stroke-width: 3.2;
  }
}


/* Increase mobile category-title size only where it stays legible. Extra-long
   titles use semantically equivalent compact labels at very small widths,
   while the full service name remains available to assistive technology. */
.recent-work-service-card__title-compact { display: none; }
@media (max-width: 760px) {
  .recent-work-service-links .recent-work-service-card__title { font-size: 13px; }
}
@media (max-width: 400px) and (min-width: 390px) {
  .recent-work-service-links .recent-work-service-card:nth-child(6) .recent-work-service-card__title { font-size: 12px; }
}
@media (max-width: 389px) {
  .recent-work-service-links .recent-work-service-card:nth-child(6) .recent-work-service-card__title-full { display: none; }
  .recent-work-service-links .recent-work-service-card:nth-child(6) .recent-work-service-card__title-compact { display: block; }
}
@media (max-width: 340px) {
  .recent-work-service-links .recent-work-service-card:nth-child(3) .recent-work-service-card__title-full,
  .recent-work-service-links .recent-work-service-card:nth-child(4) .recent-work-service-card__title-full { display: none; }
  .recent-work-service-links .recent-work-service-card:nth-child(3) .recent-work-service-card__title-compact,
  .recent-work-service-links .recent-work-service-card:nth-child(4) .recent-work-service-card__title-compact { display: block; }
}


/* v5.4.145 — Recent Work service section desktop heading: give the heading
   enough width to stay on one line while preserving the right-aligned,
   one-sentence-per-line introduction. Mobile and narrow desktop unchanged. */
@media (min-width: 1121px) {
  .recent-work-service-section__header {
    grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  }
}


/* v5.4.146 — Reviews page MOBILE ONLY.
   Three hero source pills in one row (Google, Trustpilot, Independent Reviews),
   compact three-across platform summaries, and four visible selected Google
   review cards. Desktop and other pages deliberately keep their previous rules. */
@media (max-width: 760px) {
  /* Existing hero markup is Independent, Google, Trustpilot, Rated People.
     Reorder VISUALLY only at mobile widths. No desktop text/content changes. */
  .reviews-page .reviews-hero-inner > .detail-trust-row {
    display: grid;
    grid-template-columns: minmax(0, .72fr) minmax(0, 1fr) minmax(0, 1.48fr);
    gap: 6px;
    align-items: stretch;
    width: 100%;
  }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span {
    display: grid;
    place-items: center;
    min-width: 0;
    margin: 0;
    padding: 7px 3px;
    font-size: clamp(10px, 2.85vw, 12px) !important;
    line-height: 1.25;
    letter-spacing: -.015em;
    white-space: nowrap;
    text-align: center;
  }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span:nth-child(2) { order: 1; }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span:nth-child(3) { order: 2; }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span:nth-child(1) { order: 3; }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span:nth-child(4) { display: none; }

  /* Three existing source-summary cards below the hero, one horizontal row. */
  .reviews-page .review-platforms {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 7px !important;
    align-items: stretch;
  }
  .reviews-page .review-platforms > .review-platform-card {
    min-width: 0;
    height: 100%;
    padding: 9px 7px !important;
    border-radius: 10px !important;
    overflow-wrap: anywhere;
  }
  .reviews-page .review-platforms .review-platform-name {
    font-size: clamp(9px, 2.5vw, 11px) !important;
    letter-spacing: 0;
  }
  .reviews-page .review-platforms .review-platform-card strong {
    font-size: clamp(18px, 4.7vw, 23px) !important;
  }
  .reviews-page .review-platforms .review-stars {
    font-size: clamp(11px, 3vw, 13px) !important;
    letter-spacing: 0;
  }
  .reviews-page .review-platforms .review-platform-detail,
  .reviews-page .review-platforms .review-platform-link {
    font-size: clamp(10px, 2.8vw, 12px) !important;
    line-height: 1.3 !important;
  }
  .reviews-page .review-platforms .epr-google-live-badge {
    max-width: 100%;
  }

  /* The original eight authentic reviews remain in markup and on desktop;
     the mobile layout only shows the first four, without changing source text. */
  .reviews-page .selected-reviews > .selected-review:nth-child(n+5),
  .reviews-page .selected-reviews-six > .selected-review:nth-child(n+5) {
    display: none !important;
  }
}


/* v5.4.147 — Reviews: mobile typography + explicit Google-section rhythm.
   No desktop layout changes. The heading is marked in the Reviews PHP only. */
@media (max-width: 760px) {
  /* The site's standard mobile eyebrow is 13px; use the same here. */
  .reviews-page .reviews-hero-inner > .detail-trust-row {
    grid-template-columns: minmax(0, .68fr) minmax(0, .92fr) minmax(0, 1.6fr);
  }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span {
    font-size: 13px !important;
    font-weight: 800;
    letter-spacing: -.035em;
    padding-inline: 2px;
  }

  /* Platform card titles were also below the eyebrow scale (9–11px). */
  .reviews-page .review-platforms .review-platform-name {
    font-size: 13px !important;
    line-height: 1.2 !important;
    letter-spacing: -.02em;
  }

  /* One 13px rhythm between the preceding note, heading, accompanying copy
     and review-card grid, without the stacked 1.2em h2 / p margins. */
  .reviews-page .reviews-prose .review-count-note {
    margin-bottom: 0 !important;
  }
  .reviews-page .reviews-prose > h2.epr-selected-google-heading {
    margin-top: 13px !important;
    margin-bottom: 13px !important;
    padding-top: 0 !important;
  }
  .reviews-page .reviews-prose > h2.epr-selected-google-heading + p {
    margin-top: 0 !important;
    margin-bottom: 13px !important;
  }
  .reviews-page .reviews-prose > h2.epr-selected-google-heading + .selected-reviews,
  .reviews-page .reviews-prose > h2.epr-selected-google-heading + .selected-reviews-six,
  .reviews-page .reviews-prose > h2.epr-selected-google-heading + p + .selected-reviews,
  .reviews-page .reviews-prose > h2.epr-selected-google-heading + p + .selected-reviews-six {
    margin-top: 13px !important;
  }
  /* The author name is the review-card title; body and source-link fonts were
     previously as small as 11.8px / 9.8px on mobile. */
  .reviews-page .selected-review footer strong,
  .reviews-page .selected-reviews-six .selected-review footer strong {
    font-size: 13px !important;
    line-height: 1.27 !important;
  }
  .reviews-page .selected-review blockquote,
  .reviews-page .selected-reviews-six .selected-review blockquote {
    font-size: 13.5px !important;
    line-height: 1.38 !important;
  }
  .reviews-page .selected-review footer,
  .reviews-page .selected-reviews-six .selected-review footer {
    font-size: 11.5px !important;
    line-height: 1.33 !important;
  }
  .reviews-page .selected-review .review-source-link,
  .reviews-page .selected-reviews-six .selected-review .review-source-link {
    font-size: 11.5px !important;
    line-height: 1.33 !important;
  }
}

@media (max-width: 340px) {
  .reviews-page .review-platforms > .review-platform-card:nth-child(2) .review-platform-name {
    font-size: 12px !important;
    white-space: nowrap;
    letter-spacing: -.045em;
  }
}

/* Match the site eyebrow's 14px size above the 640px phone breakpoint. */
@media (min-width: 641px) and (max-width: 760px) {
  .reviews-page .reviews-hero-inner > .detail-trust-row > span {
    font-size: 14px !important;
  }
}


/* v5.4.148 — MOBILE ONLY: Reviews count, hero spacing, homepage Areas and
   homepage/Reviews CTAs. No desktop layout or existing links are changed. */
.epr-review-count-mobile { display: none; }
.epr-review-count-desktop { display: inline; }
@media (max-width: 760px) {
  .epr-review-count-mobile { display: inline; }
  .epr-review-count-desktop { display: none; }

  /* The mobile hero has an 18px gap after its pills; match the preceding gap
     with the same 18px rather than inheriting the old 24px trust-row margin. */
  .reviews-page .reviews-hero-inner > .detail-trust-row {
    margin-top: 18px !important;
  }
  .reviews-page .reviews-hero {
    padding-bottom: 18px !important;
  }

  /* Reviews CTA: two side-by-side actions; Send precedes Call visually. */
  .reviews-page .reviews-cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    width: 100%;
  }
  .reviews-page .reviews-cta-actions > .button {
    min-width: 0;
    width: 100%;
    display: inline-flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 10px 7px;
    font-size: clamp(12px, 3.45vw, 14px);
    line-height: 1.25;
    white-space: normal;
  }
  .reviews-page .reviews-cta-actions > a[href^="tel:"] { order: 2; }
  .reviews-page .reviews-cta-actions > a:not([href^="tel:"]) { order: 1; }
}
@media (max-width: 640px) {
  /* Home: keep the heading on one line, without squeezing other sections. */
  body.home .home-areas-section > .wrap > .section-heading > h2 {
    font-size: clamp(16px, 5.2vw, 21px) !important;
    line-height: 1.2 !important;
    letter-spacing: -.03em;
    white-space: nowrap;
  }
  /* Two existing links now share one row, in their original order. */
  body.home .home-areas-section .home-area-links {
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-between;
    align-items: center;
    gap: 7px;
  }
  body.home .home-areas-section .home-area-links > a {
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    font-size: clamp(11px, 3.45vw, 14px);
    line-height: 1.4;
    white-space: nowrap;
    letter-spacing: -.025em;
  }
  /* Homepage Need Help: retain destinations, Send before Call on one row. */
  body.home .cta-section .cta-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: stretch;
    width: 100%;
    gap: 8px;
  }
  body.home .cta-section .cta-actions > a {
    min-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    padding: 10px 7px;
    line-height: 1.25;
    font-size: clamp(12px, 3.7vw, 14px);
    white-space: nowrap;
  }
  body.home .cta-section .cta-actions > a[href^="tel:"] { order: 2; }
  body.home .cta-section .cta-actions > a:not([href^="tel:"]) { order: 1; }
}


/* v5.4.149 — Reviews mobile: match the *visible* space around the hero
   source pills. Previously 18px hero bottom padding + 18px reviews-body top
   padding were stacked (36px plus border), while only one gap was measured.
   Top 16px; below = 8px + 1px border + 7px = 16px. */
@media (max-width: 760px) {
  .reviews-page .reviews-hero-inner > .detail-trust-row {
    margin-top: 16px !important;
  }
  .reviews-page .reviews-hero {
    padding-bottom: 8px !important;
  }
  .reviews-page .reviews-body {
    padding-top: 7px !important;
  }
}


/* v5.4.150 — Desktop homepage copy width and mobile Reviews pill rhythm.
   Target the exact sections; retain all existing content and functionality. */
@media (min-width: 961px) {
  /* The copy-heavy left half needs more space than the short proof points. */
  body.home .home-why .split-copy {
    grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  }
  /* The Areas description is one line on desktop: don't inherit the
     generic 760px reading-column cap for this full-width section. */
  body.home .home-areas-section > .wrap > .section-heading {
    max-width: none;
    width: 100%;
  }
}
@media (max-width: 760px) {
  /* Tighten the space ABOVE the review-source pills independently of the
     hero/body clearance. Neutralise any paragraph bottom margin as well. */
  .reviews-page .reviews-lead > p {
    margin-bottom: 0 !important;
  }
  .reviews-page .reviews-hero-inner > .detail-trust-row {
    margin-top: 12px !important;
    grid-template-columns: minmax(0, .60fr) minmax(0, .78fr) minmax(0, 1.62fr);
  }
  /* Restore clear breathing room BELOW the pills before the summary cards:
     10px hero + 1px border + 7px body = 18px visible. */
  .reviews-page .reviews-hero {
    padding-bottom: 10px !important;
  }
  .reviews-page .reviews-body {
    padding-top: 7px !important;
  }
  .reviews-page .reviews-hero-inner > .detail-trust-row > span {
    font-size: 14px !important;
  }
}
@media (min-width: 641px) and (max-width: 760px) {
  .reviews-page .reviews-hero-inner > .detail-trust-row > span {
    font-size: 15px !important;
  }
}


/* v5.4.151 — Desktop typography: only text previously declared at weight 800
   becomes weight 700 with 0.3px tracking. Preserve phone/tablet styling. */
@media (min-width: 761px) {
  .brand-mark { font-weight: 700; letter-spacing: 0.3px; }
  .brand-name { font-weight: 700; letter-spacing: 0.3px; }
  .button { font-weight: 700; letter-spacing: 0.3px; }
  .area-link { font-weight: 700; letter-spacing: 0.3px; }
  .text-link { font-weight: 700; letter-spacing: 0.3px; }
  .epr-field label { font-weight: 700; letter-spacing: 0.3px; }
  .menu-toggle { font-weight: 700; letter-spacing: 0.3px; }
  .mini-trust span { font-weight: 700; letter-spacing: 0.3px; }
  .detail-trust-row span { font-weight: 700; letter-spacing: 0.3px; }
  .coverage-town { font-weight: 700; letter-spacing: 0.3px; }
  .review-platform-link { font-weight: 700; letter-spacing: 0.3px; }
  .selected-review footer .review-source-link { font-weight: 700; letter-spacing: 0.3px; }
  .work-back-link { font-weight: 700; letter-spacing: 0.3px; }
  .work-post-nav-side a,
.work-post-nav-all { font-weight: 700; letter-spacing: 0.3px; }
  .work-card-meta { font-weight: 700; letter-spacing: 0.3px; }
  .recent-work-service-links a { font-weight: 700; letter-spacing: 0.3px; }
  .recent-work-service-card__arrow { font-weight: 700; letter-spacing: 0.3px; }
  .recent-work-service-card__title { font-weight: 700; letter-spacing: 0.3px; }
  .recent-work-service-links .recent-work-service-card__description {
    letter-spacing: normal;
  }
}


/* v5.4.152 — DESKTOP ONLY: numbered Contact guidance and numbered service
   cards use the same inline number/title arrangement already approved for
   mobile. Match each number's text size to its actual title size; keep the
   card copy beneath the complete heading row. No mobile changes. */
@media (min-width: 761px) {
  .contact-page .contact-prep-item {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: 13px;
    row-gap: 10px;
    align-content: start;
  }
  .contact-page .contact-prep-item > span {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
    font-size: 20px;
    line-height: 1.2;
    margin: 0;
  }
  .contact-page .contact-prep-item > strong {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    margin: 0;
    line-height: 1.2;
  }
  .contact-page .contact-prep-item > p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }

  .epr-card-grid .epr-card,
  .detail-prose .epr-card-grid .epr-card {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 9px;
    align-content: start;
  }
  .epr-card-grid .epr-card::before {
    grid-column: 1;
    grid-row: 1;
    align-self: start;
    margin: 0;
    font-size: 18px;
    line-height: 1;
  }
  .epr-card-grid .epr-card h3 {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    min-width: 0;
    margin: 0;
  }
  .epr-card-grid .epr-card p {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: 0;
  }
}


/* v5.4.154 — Mobile footer Contact heading remains 21px. */
@media (max-width: 640px) {
  .site-footer .footer-heading {
    font-size: 21px;
  }
}

/* v5.4.155 — Requested fixed 30px mobile Areas heading, matching the
   Need Help heading. Do not scale it down for narrow phones. Allow natural
   wrapping when the full phrase cannot fit, so text never gets clipped. */
@media (max-width: 760px) {
  body.home .home-areas-section > .wrap > .section-heading > h2 {
    font-size: 30px !important;
    white-space: normal;
  }
}


/* v5.4.157 — Desktop-only header typography. Increase the primary menu to
   16px/700 with 0.3px tracking, offsetting the wider glyphs with tighter
   inter-item spacing so the nav stays in its established horizontal footprint.
   Increase Call to 18px while retaining its existing outer pill dimensions by
   reducing internal padding. Tablet/mobile header styles remain untouched. */
@media (min-width: 961px) {
  .site-header .epr-menu { gap: 8.6px; }
  .site-header .epr-menu a {
    font-size: 16px;
    font-weight: 700;
    letter-spacing: 0.3px;
  }
  .site-header .header-call {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.3px;
    padding: 9.4px 8.6px;
    white-space: nowrap;
  }
}

/* v5.4.158 — Desktop-only navigation weight and Services dropdown sizing.
   Keep the existing 16px/0.3px labels and 18px/700 Call pill unchanged.
   Services is the second primary item (Home / Services / Areas / ...).
   Allow its dropdown to grow with the actual label lengths; prevent wraps. */
@media (min-width: 961px) {
  .site-header .epr-menu a {
    font-weight: 600;
  }
  .site-header .epr-menu > li.menu-item-has-children:nth-child(2) > .sub-menu {
    width: max-content;
    min-width: 250px;
  }
  .site-header .epr-menu > li.menu-item-has-children:nth-child(2) > .sub-menu a {
    white-space: nowrap;
  }
}


/* v5.4.159 — Desktop-only primary navigation adjustment.
   Increase horizontal spacing between the seven top-level links from 8.6px
   to 10px and set their weight to 650. The Services dropdown, Call pill,
   and all tablet/mobile menu styles remain unchanged. */
@media (min-width: 961px) {
  .site-header .epr-menu { gap: 10px; }
  .site-header .epr-menu > li > a { font-weight: 650; }
}

/* v5.4.160 — Desktop primary navigation text only: 17px and weight 600.
   Retain v5.4.159's 10px gap, the unchanged dropdown labels and Call pill. */
@media (min-width: 961px) {
  .site-header .epr-menu > li > a {
    font-size: 17px;
    font-weight: 600;
  }
}

/* v5.4.161 — Desktop top-level menu links: weight 650 only.
   Keep 17px font size, 10px gap, +0.3px tracking, Services dropdown
   and Call pill unchanged. Tablet/mobile remain unchanged. */
@media (min-width: 961px) {
  .site-header .epr-menu > li > a {
    font-weight: 650;
  }
}

/* v5.4.162 — Desktop top-level navigation font weight 630 only.
   Retain 17px font size, 10px gap and +0.3px letter spacing.
   The Services submenu and Call pill are unaffected; tablet/mobile unchanged. */
@media (min-width: 961px) {
  .site-header .epr-menu > li > a {
    font-weight: 630;
  }
}

/* v5.4.163 — Desktop top-level menu weight 640 only.
   Keep 17px font size, 10px horizontal gap and +0.3px tracking.
   Services dropdown, Call pill, tablet and mobile unchanged. */
@media (min-width: 961px) {
  .site-header .epr-menu > li > a {
    font-weight: 640;
  }
}

/* v5.4.164 — Desktop-only global eyebrow typography.
   Reduce weight 850 to 750 and tracking .12em to 0.8px on desktop.
   Existing desktop font size 14px, colours, margins and all smaller
   screen typography remain unchanged. */
@media (min-width: 961px) {
  .eyebrow {
    font-weight: 750;
    letter-spacing: 0.8px;
  }
}


/* v5.4.165 — Desktop-only Contact and Reviews page spacing.
   Contact: the last body padding (44px) and outer shell padding (42px)
   currently stack above the footer; halve both without changing the footer.
   Reviews: restore hero/eyebrow top padding from 15px to the standard 30px.
   Keep tablet/mobile and every other page exactly as before. */
@media (min-width: 961px) {
  .contact-page .contact-body {
    padding-bottom: 22px;
  }
  .content-shell:not(.single-work-shell):has(> .contact-page) {
    padding-bottom: 21px;
  }
  .reviews-page .reviews-hero {
    padding-top: 30px !important;
  }
}


/* v5.4.166 — Desktop-only, site-wide 15px clearance above the footer.
   Page templates previously stacked the outer content-shell padding with
   their inner body padding. Keep exactly one outer 15px clearance; remove
   only the trailing body padding, not top/side spacing or the footer itself.
   Preserve the 15px Recent Work finish. The homepage ends in a full-bleed
   gold CTA rather than a content shell, so trim its bottom padding too. */
@media (min-width: 961px) {
  main.content-shell {
    padding-bottom: 15px !important;
  }
  /* Higher specificity is needed for the older About, Reviews and
     Services overrides that already use !important. */
  main.content-shell.about-shell,
  main.content-shell.reviews-shell,
  main.content-shell.service-shell {
    padding-bottom: 15px !important;
  }
  main.content-shell > .detail-page > .detail-body,
  main.content-shell > .about-page > .about-body,
  main.content-shell > .reviews-page > .reviews-body,
  main.content-shell > .contact-page > .contact-body {
    padding-bottom: 0 !important;
  }
  main.content-shell .entry-content.prose > :last-child {
    margin-bottom: 0 !important;
  }
  body.home main > .cta-section:last-child {
    padding-bottom: 15px !important;
  }
}


/* v5.4.167 — Desktop-only site-wide 30px clearance before the footer.
   Increase the approved v5.4.166 15px finish to 30px for all content-shell
   page types, including Recent Work's stronger existing !important override.
   Keep inner page-body padding at zero as established in v5.4.166; keep
   tablet and mobile completely unchanged. */
@media (min-width: 961px) {
  main.content-shell,
  main.content-shell.about-shell,
  main.content-shell.reviews-shell,
  main.content-shell.service-shell,
  main.content-shell.recent-work-hub {
    padding-bottom: 30px !important;
  }
  body.home main > .cta-section:last-child {
    padding-bottom: 30px !important;
  }
}


/* v5.4.168 — About page desktop: equal space before/after the black
   “Need help” card. Previous independent module margins could stack with
   the card's own top margin. No global, tablet or mobile changes. */
@media (min-width: 961px) {
  .about-shell .about-prose > .about-dark-block,
  .about-shell .about-prose > *:has(> .about-dark-block) {
    margin-top: 30px !important;
    margin-bottom: 30px !important;
  }
  /* An editor group wrapper must not contribute a second card margin. */
  .about-shell .about-prose > *:has(> .about-dark-block) > .about-dark-block {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }
  /* Only the immediately preceding About module loses its trailing margin. */
  .about-shell .about-prose > *:has(+ .about-dark-block),
  .about-shell .about-prose > *:has(+ * > .about-dark-block) {
    margin-bottom: 0 !important;
  }
  /* Keep the next heading from adding its own margin to the card gap. */
  .about-shell .about-prose > .about-dark-block + h2,
  .about-shell .about-prose > *:has(> .about-dark-block) + h2 {
    margin-top: 0 !important;
  }
  /* Suppress only editor-generated empty spacing directly before this card. */
  .about-shell .about-prose > :is(.wp-block-spacer, p:empty, p:has(> br:only-child)):has(+ .about-dark-block),
  .about-shell .about-prose > :is(.wp-block-spacer, p:empty, p:has(> br:only-child)):has(+ * > .about-dark-block) {
    display: none !important;
  }
}


/* v5.4.169 — DESKTOP ONLY: About final CTA + licensing transition.
   Fix the actual cascade, not just the card margin: the site-wide .prose h2
   margin was adding ~1.35em above the dark card heading, and the licensing H2
   and editor blank paragraphs were adding extra clearance below the card.
   Keep the v5.4.168 30px before/after card, but make both measured boundaries
   consistent and preserve the existing 22px symmetrical internal padding. */
@media (min-width: 961px) {
  /* Override the stronger general .content-shell .prose h2 margin ONLY here. */
  .about-shell .about-prose .about-dark-block h2 {
    margin-top: 0 !important;
    margin-bottom: 8px !important;
    padding-top: 0 !important;
  }
  .about-shell .about-prose .about-dark-block p {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
  }

  /* The licensing heading is not necessarily directly adjacent to the CTA:
     WordPress can leave one or more empty editor paragraphs between them. */
  .about-shell .about-prose h2.about-image-rights-heading {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
  .about-shell .about-prose p.about-rights-blank-spacer,
  .about-shell .about-prose > .about-dark-block ~ p:empty:has(~ h2.about-image-rights-heading),
  .about-shell .about-prose > .about-dark-block ~ p:has(> br:only-child):has(~ h2.about-image-rights-heading),
  .about-shell .about-prose > .about-dark-block ~ .wp-block-spacer:has(~ h2.about-image-rights-heading) {
    display: none !important;
  }
}


/* v5.4.170 — About method section, desktop only: approved Option 5.
   Keep the real WordPress text and original repair collage; display the
   collage at left with its full natural aspect ratio and three readable,
   compact icon cards at right. No tablet/mobile or unrelated components. */
@media (min-width: 961px) {
  .about-shell .about-method-grid {
    display: grid;
    grid-template-columns: minmax(0, min(46%, 445px)) minmax(0, 1fr);
    max-width: 1030px !important;
    margin-inline: auto;
    column-gap: 22px;
    align-items: center;
    margin-top: 26px;
    margin-bottom: 30px;
  }
  .about-shell .about-method-grid .about-repair-photo {
    order: -1;
    align-self: center;
    height: auto;
    width: 100%;
    margin: 0;
    display: block;
    overflow: hidden;
    border-radius: 15px;
  }
  .about-shell .about-method-grid .about-repair-photo img {
    display: block;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: none;
    object-fit: contain;
  }
  .about-shell .about-method-grid .about-repair-photo figcaption {
    padding: 11px 13px;
    font-size: 12px;
    line-height: 1.4;
  }
  .about-shell .about-method-grid .about-points {
    order: 1;
    align-self: center;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 12px;
    margin: 0;
    width: 100%;
  }
  .about-shell .about-method-grid .about-point {
    display: grid;
    grid-template-columns: 58px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 15px;
    row-gap: 5px;
    align-content: center;
    align-items: center;
    min-height: 145px;
    padding: 18px 20px;
    border-radius: 14px;
    background: #f7f5f0;
  }
  .about-shell .about-method-grid .about-point::before {
    content: "";
    grid-column: 1;
    grid-row: 1 / span 2;
    display: block;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background-color: #f5e5c7;
    background-image: url('../img/about/icon-diagnose.svg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: 28px 28px;
  }
  .about-shell .about-method-grid .about-point:nth-child(2)::before {
    background-image: url('../img/about/icon-repair.svg');
  }
  .about-shell .about-method-grid .about-point:nth-child(3)::before {
    background-image: url('../img/about/icon-parts.svg');
  }
  .about-shell .about-method-grid .about-point strong {
    grid-column: 2;
    grid-row: 1;
    display: block;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    line-height: 1.25;
  }
  .about-shell .about-method-grid .about-point p {
    grid-column: 2;
    grid-row: 2;
    margin: 0;
    font-size: 15px;
    line-height: 1.48;
  }
}


/* v5.4.171 — About Option 5 refinement (desktop only).
   Reduce the collage width by 15% from the approved v5.4.170 layout.
   Match the three cards' combined height to the collage including caption,
   with three equal card heights and equal 12px gaps. */
@media (min-width: 961px) {
  .about-shell .about-method-grid {
    grid-template-columns: minmax(0, min(39.1%, 378.25px)) minmax(0, 1fr);
    align-items: stretch;
  }
  .about-shell .about-method-grid .about-repair-photo {
    align-self: start;
  }
  .about-shell .about-method-grid .about-points {
    height: 100%;
    min-height: 0;
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-self: stretch;
  }
  .about-shell .about-method-grid .about-point {
    min-height: 0;
    height: 100%;
    padding-block: 10px;
  }
}
@media (min-width: 961px) and (max-width: 979px) {
  .about-shell .about-method-grid .about-point { padding-block: 6px; }
}


/* v5.4.172 — Contact page desktop-only eyebrow / phone-number rhythm.
   Stop the general content-shell .prose h2 margin from overriding local
   heading spacing in the preparation, enquiry and direct-call panels.
   Match the direct-call number-to-description gap to its eyebrow-to-number
   gap by removing the paragraph's default top margin. */
@media (min-width: 961px) {
  .contact-page .contact-prep-heading > .eyebrow,
  .contact-page .contact-form-card > .eyebrow,
  .contact-page .contact-direct-card > .eyebrow {
    margin-bottom: 8px;
  }
  main.content-shell .contact-page .contact-prep-heading h2,
  main.content-shell .contact-page .contact-form-card h2,
  main.content-shell .contact-page .contact-direct-card h2 {
    margin-top: 0;
  }
  main.content-shell .contact-page .contact-direct-card h2 {
    margin-bottom: 8px;
  }
  .contact-page .contact-direct-card h2 + p:not(.eyebrow) {
    margin-top: 0;
  }
}


/* v5.4.173 — Desktop Contact page only: 15px above and below each
   eyebrow in the hero, preparation, enquiry and direct-call panels.
   Above means container-top padding; below means eyebrow-to-next-heading.
   The previous phone-number-to-description 8px gap stays unchanged. */
@media (min-width: 961px) {
  .contact-page .contact-hero,
  .contact-page .contact-body,
  .contact-page .contact-direct-card {
    padding-top: 15px;
  }
  /* The enquiry card has a 1px border: 14px padding gives 15px visibly. */
  .contact-page .contact-form-card {
    padding-top: 14px;
  }
  .contact-page .contact-hero .eyebrow,
  .contact-page .contact-prep-heading > .eyebrow,
  .contact-page .contact-form-card > .eyebrow,
  .contact-page .contact-direct-card > .eyebrow {
    margin-top: 0;
    margin-bottom: 15px;
  }
}

/* v5.4.174 — Contact page desktop-only eyebrow spacing: 24px above/below.
   Hero heading top margin was contributing an extra gap beyond the eyebrow.
   Preserve 8px phone-number-to-description spacing and all smaller layouts. */
@media (min-width: 961px) {
  .contact-page .contact-hero,
  .contact-page .contact-body,
  .contact-page .contact-direct-card {
    padding-top: 24px;
  }
  /* Enquiry card has a 1px border: 23px + 1px = 24px. */
  .contact-page .contact-form-card {
    padding-top: 23px;
  }
  .contact-page .contact-hero .eyebrow,
  .contact-page .contact-prep-heading > .eyebrow,
  .contact-page .contact-form-card > .eyebrow,
  .contact-page .contact-direct-card > .eyebrow {
    margin-top: 0;
    margin-bottom: 24px;
  }
  /* Remove the leftover .08em heading margin, not an eyebrow gap. */
  main.content-shell .contact-page .contact-hero h1 {
    margin-top: 0;
  }
}

/* v5.4.175 — Desktop Contact hero only: remove the additional 24px
   bottom margin on the Contact eyebrow. The eyebrow has no bottom padding;
   its previous margin-bottom produced the visible excess gap. Keep all
   other Contact eyebrows and both smaller layouts unchanged. */
@media (min-width: 961px) {
  .contact-page .contact-hero .eyebrow {
    margin-bottom: 0;
  }
}


/* v5.4.176 — Desktop only: apply the approved Contact hero rhythm to
   TOP-OF-PAGE eyebrows immediately followed by the page H1.  Fix both
   sides of the pair: older sections contributed eyebrow bottom margins
   (some !important) and H1 top margins, which could stack.  Keep page
   hero/container top padding, eyebrow typography, H1 bottom margins,
   section-level eyebrows, callout/card eyebrows and <=960px unchanged. */
@media (min-width: 961px) {
  :is(
    .hero-visual-layout .hero-copy,
    .detail-page .detail-hero-copy,
    .about-page .about-hero-copy,
    .reviews-page .reviews-hero-inner,
    .contact-page .contact-hero-inner,
    .page-header
  ) > p.eyebrow:has(+ h1) {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }
  :is(
    .hero-visual-layout .hero-copy,
    .detail-page .detail-hero-copy,
    .about-page .about-hero-copy,
    .reviews-page .reviews-hero-inner,
    .contact-page .contact-hero-inner,
    .page-header
  ) > p.eyebrow + h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}


/* v5.4.177 — Desktop-only page-top eyebrow alignment.
   Align the FIRST hero/page-header eyebrow to 24px beneath the start of its
   page surface, consistently across the homepage, bespoke heroes, standard
   WordPress pages, archive and Recent Work.  The original detail/About copy
   columns were vertically centred against taller adjacent images; align only
   those copy columns to the grid top so the photo cannot add variable offset.
   Scope narrowly to the page's first hero/header: no nested sections, card
   eyebrows, mobile/tablet layout, typography or eyebrow-to-H1 rhythm change. */
@media (min-width: 961px) {
  /* Homepage has no content-shell; its hero section starts the page. */
  body.home main > .hero-visual-layout {
    padding-top: 24px;
  }
  body.home .hero-grid-visual > .hero-copy {
    align-self: start;
  }

  /* Standard page / Areas hub / Recent Work / archive / 404 page headers. */
  main.content-shell:not(.single-work-shell) {
    padding-top: 24px !important;
  }

  /* Bespoke heroes cancel shell padding before supplying their own padding. */
  main.content-shell:not(.single-work-shell) > :is(
    .detail-page, .about-page, .reviews-page, .contact-page
  ) {
    margin-top: -24px;
  }
  main.content-shell:not(.single-work-shell) > :is(
    .detail-page, .about-page, .reviews-page, .contact-page
  ) > :is(.detail-hero, .about-hero, .reviews-hero, .contact-hero) {
    padding-top: 24px !important;
  }

  /* Prevent photo height from vertically offsetting the page-top eyebrow. */
  main.content-shell:not(.single-work-shell) > .detail-page .detail-hero-copy,
  main.content-shell:not(.single-work-shell) > .about-page .about-hero-copy {
    align-self: start;
  }
}

/* v5.4.178 — Desktop-only H1 typography and page-top eyebrow rhythm.
   Use the Services index H1 scale everywhere on desktop, including the
   seven main-menu pages, detail pages and genuine job posts.
   The page-top eyebrow/H1 pair receives one 24px margin below the eyebrow,
   with no compensating H1 top margin/padding. This deliberately supersedes
   v5.4.176's zero-gap rule; internal section/card eyebrows remain untouched.
   No rule applies below the 961px desktop breakpoint. */
@media (min-width: 961px) {
  main h1 {
    font-size: clamp(38px, 5vw, 62px) !important;
  }
  :is(
    .hero-visual-layout .hero-copy,
    .detail-page .detail-hero-copy,
    .about-page .about-hero-copy,
    .reviews-page .reviews-hero-inner,
    .contact-page .contact-hero-inner,
    .page-header
  ) > p.eyebrow:has(+ h1) {
    margin-bottom: 24px !important;
    padding-bottom: 0 !important;
  }
  :is(
    .hero-visual-layout .hero-copy,
    .detail-page .detail-hero-copy,
    .about-page .about-hero-copy,
    .reviews-page .reviews-hero-inner,
    .contact-page .contact-hero-inner,
    .page-header
  ) > p.eyebrow + h1 {
    margin-top: 0 !important;
    padding-top: 0 !important;
  }
}

/* v5.4.179 — Area detail Recent Work: match the four-card service layout.
   Four across on desktop, two columns on tablet and mobile.
   Only the area job grid is affected; existing service layout is unchanged. */
@media (min-width: 961px) {
  .area-detail .epr-area-work .post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (max-width: 960px) {
  .area-detail .epr-area-work .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* v5.4.180 — Individual job page Related Recent Work.
   Exactly four slots across on desktop, balanced 2 x 2 at <=960px.
   Matches the Services/Areas four-card layout without affecting the
   Recent Work index, homepage, or other grids. */
@media (min-width: 961px) {
  .single-work-shell .work-related-section .post-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}
@media (max-width: 960px) {
  .single-work-shell .work-related-section .post-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* v5.4.181 — Individual Recent Work job pages only.
   On phones, remove the inherited 80px dead space AFTER the Need help card,
   while preserving its existing space above. On desktop, reduce only the
   45px dead space BEFORE that card. Tablet, the card design, and all other
   page types retain their previous spacing. */
@media (max-width: 640px) {
  main.content-shell.single-work-shell {
    padding-bottom: 15px;
  }
}
@media (min-width: 961px) {
  .single-work-shell .post-cta {
    margin-top: 15px;
  }
}

/* v5.4.182 — Single Recent Work stories: unified end-of-page spacing.
   v5.4.181 left the original .post-cta margin-top:45px active on phones
   and tablet, and tablet retained content-shell padding-bottom:80px.
   Match the established desktop 15px CTA approach on every device;
   keep mobile's approved 15px below the CTA and desktop's 30px.
   This scope does not touch any other page or the four related cards. */
.single-work-shell .post-cta {
  margin-top: 15px;
}
@media (min-width: 641px) and (max-width: 960px) {
  main.content-shell.single-work-shell {
    padding-bottom: 30px;
  }
}