: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:.1em; 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; 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; }
.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:-18px 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;
  }
}


/* v4.1 — Recent Work master template */
.single-work-top {
  padding-top: 28px;
}
.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. */