/*
Theme Name: SiteSync Regancy
Description: Lightweight one-page theme for the Regancy Roofing sites, following the 2026 Regancy design (middlewich.regancyroofing.co.uk) without a page builder. Content comes from the SiteSync plugin; this theme only renders it.
Version: 2.2.0
Requires at least: 6.2
Requires PHP: 7.4
Author: SiteSync
Text Domain: sitesync-regancy
Update URI: false
*/

/* Barlow and Barlow Condensed (SIL Open Font License 1.1), Latin subset, served with the theme. */
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 400; font-display: swap; src: url(assets/fonts/barlow-400.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 500; font-display: swap; src: url(assets/fonts/barlow-500.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-700.woff2) format("woff2"); }
@font-face { font-family: "Barlow"; font-style: normal; font-weight: 800; font-display: swap; src: url(assets/fonts/barlow-800.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 600; font-display: swap; src: url(assets/fonts/barlow-condensed-600.woff2) format("woff2"); }
@font-face { font-family: "Barlow Condensed"; font-style: normal; font-weight: 700; font-display: swap; src: url(assets/fonts/barlow-condensed-700.woff2) format("woff2"); }

/* Colours from the design. primary_color / accent_color in site.json override the navy and the
   gold, so another brand (Just Paving) can reuse the theme; functions.php sets --on-gold and
   --gold-on-dark to suit the accent. */
:root {
	--navy: var(--sitesync-primary, #182933);
	--navy-2: color-mix(in srgb, var(--navy), #3a7a99 30%);
	--navy-3: color-mix(in srgb, var(--navy), #000 38%);
	--gold: var(--sitesync-accent, #d0ad6d);
	--gold-2: color-mix(in srgb, var(--gold), #fff 25%);
	--gold-d: color-mix(in srgb, var(--gold), #000 12%);
	--on-gold: var(--navy);
	--gold-on-dark: var(--gold);
	--ink: #1b252c;
	--muted: #5d6b74;
	--line: #e3e7ea;
	--bg: #f5f3ef;
	--green: #25d366;
	--radius: 14px;
	--shadow: 0 18px 50px -18px rgb(15 28 36 / .35);
	--head: "Barlow Condensed", "Barlow", "Arial Narrow", Arial, sans-serif;
	--body: "Barlow", "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 84px; -webkit-text-size-adjust: 100%; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; font-family: var(--body); font-size: 17px; line-height: 1.6; color: var(--ink); background: #fff; -webkit-font-smoothing: antialiased; }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }
ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { margin: 0; font-family: var(--head); font-weight: 700; line-height: 1.02; letter-spacing: .2px; text-transform: uppercase; }
h2 { font-size: clamp(34px, 4.4vw, 52px); color: var(--navy); margin-bottom: 14px; }
h1 em, h2 em { font-style: normal; color: var(--gold); }
.wrap { width: min(1200px, 100% - 40px); margin-inline: auto; }
.screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip-link:focus { position: fixed; top: .5rem; left: .5rem; width: auto; height: auto; clip: auto; z-index: 300; background: #fff; color: var(--navy); padding: .5rem 1rem; }
.icon { width: 1em; height: 1em; flex: none; fill: currentColor; }
svg.icon[viewBox="0 0 24 24"] { fill: none; }

.section { padding: 96px 0; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 14px; font-weight: 700; font-size: 13px; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold-d); }
.eyebrow::before { content: ""; width: 28px; height: 2px; background: var(--gold); }
.lead, .lead p { font-size: 19px; color: var(--muted); }
.section-head { max-width: 760px; margin: 0 auto; text-align: center; }
.section-head .eyebrow::after { content: ""; width: 28px; height: 2px; background: var(--gold); }
.prose { color: var(--muted); }
.prose strong { color: var(--navy); }
.prose a { color: var(--gold-d); }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 13px 20px; border: 0; border-radius: 10px; font: 700 15px/1.1 var(--body); text-align: center; text-decoration: none; cursor: pointer; transition: transform .15s, box-shadow .15s, background-color .15s; }
.btn:hover, .btn:focus-visible { transform: translateY(-2px); }
.btn .icon { width: 20px; height: 20px; }
.btn--gold { background: var(--gold); color: var(--on-gold); box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--gold), transparent 10%); }
.btn--gold:hover, .btn--gold:focus-visible { background: var(--gold-2); }
.btn--navy { background: var(--navy); color: #fff; }
.btn--navy:hover, .btn--navy:focus-visible { background: var(--navy-2); }
.btn--ghost { background: rgb(255 255 255 / .08); color: #fff; border: 1.5px solid rgb(255 255 255 / .35); }
.btn--ghost:hover, .btn--ghost:focus-visible { background: rgb(255 255 255 / .16); }
.btn--whatsapp { background: var(--green); color: #fff; }
.btn--lg { padding: 19px 30px; font-size: 18px; }

/* ---------- Top bar and header ---------- */
.topbar { background: var(--navy-3); color: #cfd7dc; font-size: 14px; }
.topbar__inner { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 9px 0; }
.topbar__items { display: flex; flex-wrap: wrap; gap: 6px 24px; }
.topbar b { color: #fff; }
.topbar a { color: #fff; text-decoration: none; }
.topbar__stars { color: var(--gold-on-dark); letter-spacing: 1px; }

.site-header { position: sticky; top: 0; z-index: 50; background: #fff; border-bottom: 1px solid var(--line); }
.site-header__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 12px 0; }
.site-header__logo { flex: none; color: var(--navy); font-weight: 800; text-decoration: none; }
.site-header__logo img { width: auto; height: 54px; }
.site-nav { display: flex; gap: 22px; }
.site-nav a { font-weight: 600; font-size: 15px; color: var(--navy); text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a:focus-visible { color: var(--gold-d); }
.site-header__cta { display: flex; align-items: center; gap: 14px; }
.site-header__phone { display: flex; flex-direction: column; align-items: flex-end; line-height: 1.1; text-decoration: none; white-space: nowrap; }
.site-header__phone small { font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: 1px; }
.site-header__phone strong { font-family: var(--head); font-size: 28px; color: var(--navy); }
.site-header__call { display: none; white-space: nowrap; }
.site-header__quote { white-space: nowrap; }

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 70px 0 90px; background: var(--navy); color: #fff; }
.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: .9; }
.hero::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(100deg, color-mix(in srgb, var(--navy-3), transparent 4%) 0%, color-mix(in srgb, var(--navy), transparent 10%) 42%, color-mix(in srgb, var(--navy), transparent 45%) 100%); }
.hero__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1.15fr .85fr; gap: 56px; align-items: center; }
.hero__badge { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 22px; padding: 8px 14px; border: 1px solid color-mix(in srgb, var(--gold-on-dark), transparent 55%); border-radius: 40px; background: color-mix(in srgb, var(--gold-on-dark), transparent 86%); color: color-mix(in srgb, var(--gold-on-dark), #fff 30%); font-weight: 600; font-size: 14px; }
.hero__badge i { width: 8px; height: 8px; border-radius: 50%; background: #4ade80; box-shadow: 0 0 0 4px rgb(74 222 128 / .25); }
.hero__title { margin-bottom: 20px; font-size: clamp(46px, 6.2vw, 82px); color: #fff; }
.hero__title em { color: var(--gold-on-dark); }
.hero__intro { max-width: 600px; margin-bottom: 26px; font-size: 20px; color: #d7dfe4; }
.hero__ticks { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 22px; max-width: 620px; margin-bottom: 32px; }
.hero__ticks li { display: flex; align-items: flex-start; gap: 10px; font-weight: 600; }
.hero__ticks .icon { width: 22px; height: 22px; margin-top: 1px; color: var(--gold-on-dark); }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-bottom: 34px; }
.hero__proof { display: flex; flex-wrap: wrap; align-items: center; gap: 20px; }
.proof { display: flex; align-items: center; gap: 10px; }
.proof + .proof { padding-left: 20px; border-left: 1px solid rgb(255 255 255 / .2); }
.proof__score { font-family: var(--head); font-size: 34px; font-weight: 700; line-height: 1; }
.proof__meta { font-size: 13px; line-height: 1.3; color: #b9c5cc; }
.proof__stars { display: block; color: var(--gold-on-dark); font-size: 15px; letter-spacing: 1px; }
.proof__logo { display: flex; align-items: center; justify-content: center; height: 48px; min-width: 48px; padding: 0 10px; border-radius: 8px; background: #fff; }
.proof__logo img { display: block; width: 92px; height: auto; }
.proof--google .proof__logo img { width: 26px; }
.proof--badge img { width: 48px; height: 48px; padding: 3px; border-radius: 8px; background: #fff; object-fit: contain; }

/* ---------- Quote form cards ---------- */
.form-card { position: relative; overflow: hidden; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--shadow); }
.form-card__head { padding: 20px 26px; background: var(--gold); color: var(--on-gold); }
.form-card__head h2 { margin: 0; font-size: 30px; color: inherit; }
.form-card__head p { margin: 0; font-weight: 600; font-size: 15px; }
.sitesync-form { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; padding: 22px 26px 26px; }
.sitesync-field { margin: 0 0 12px; min-width: 0; }
.sitesync-field--select, .sitesync-field--textarea, .sitesync-submit, .form-note, .sitesync-form .cf-turnstile { grid-column: 1 / -1; }
.sitesync-field label { display: block; margin-bottom: 5px; font-size: 13px; font-weight: 700; color: var(--navy); text-transform: uppercase; letter-spacing: .6px; }
.sitesync-field label span { color: var(--gold-d); }
.sitesync-field input, .sitesync-field select, .sitesync-field textarea { width: 100%; padding: 14px; border: 1.5px solid #d5dbdf; border-radius: 10px; background: #fbfbfa; font: inherit; font-size: 16px; color: var(--ink); transition: border-color .15s, box-shadow .15s; }
.sitesync-field textarea { min-height: 84px; resize: vertical; }
.sitesync-field input:focus, .sitesync-field select:focus, .sitesync-field textarea:focus { outline: 0; border-color: var(--gold); background: #fff; box-shadow: 0 0 0 4px color-mix(in srgb, var(--gold), transparent 78%); }
.sitesync-submit { margin: 6px 0 0; }
.sitesync-submit .btn { width: 100%; }
.form-note { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 12px 0 0; font-size: 13px; color: var(--muted); text-align: center; }
.form-note .icon { width: 15px; height: 15px; color: var(--gold-d); }
.sitesync-form-message { margin: 22px 26px 0; padding: 12px 14px; border-radius: 8px; font-weight: 600; }
.sitesync-form-message--sent { margin-bottom: 26px; background: #e7f6ec; color: #135c2d; }
.sitesync-form-message--error { background: #fdecec; color: #9b2c2c; }

/* ---------- Trust strip ---------- */
.trust { padding: 28px 0; background: var(--bg); border-bottom: 1px solid var(--line); }
.trust__list { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.trust__item { display: flex; align-items: center; gap: 14px; }
.trust__icon { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: var(--navy); color: var(--gold-on-dark); }
.trust__icon .icon { width: 26px; height: 26px; }
.trust__item strong { display: block; font-size: 17px; line-height: 1.2; color: var(--navy); }
.trust__item strong + span { font-size: 14px; color: var(--muted); }

/* ---------- About ---------- */
.about__inner { display: grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items: start; }
.about__head { position: sticky; top: 120px; }
.about__head .btn { margin-top: 14px; }
.about__text { font-size: 18px; }

/* ---------- Services ---------- */
.section--services-intro { padding-top: 0; }
.section--about + .section--services-intro { padding-top: 0; }
.services__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 28px; margin-top: 48px; }
.service.section { padding: 0; }
.service { display: flex; flex-direction: column; overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; transition: transform .2s, box-shadow .2s; scroll-margin-top: 100px; }
.service:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.service__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #dfe4e7; }
.service__media img { width: 100%; height: 100%; object-fit: cover; }
.service__tag { position: absolute; left: 16px; bottom: 16px; max-width: calc(100% - 32px); padding: 6px 12px; border-radius: 6px; background: var(--navy); color: var(--gold-on-dark); font-weight: 700; font-size: 13px; letter-spacing: 1.2px; line-height: 1.3; text-transform: uppercase; }
.service__body { display: flex; flex: 1; flex-direction: column; padding: 26px 28px 28px; }
.service h3 { margin-bottom: 10px; font-size: 32px; color: var(--navy); }
.service__text { margin-bottom: 8px; }
.service__more { margin-bottom: 16px; color: var(--muted); }
.service__more summary { display: inline-flex; align-items: center; gap: 6px; list-style: none; font-weight: 700; color: var(--gold-d); cursor: pointer; }
.service__more summary::-webkit-details-marker { display: none; }
.service__more summary::after { content: "+"; font-size: 20px; line-height: 1; }
.service__more[open] summary::after { content: "−"; }
.service__more[open] summary { margin-bottom: 12px; }
.service__more-close, .service__more[open] .service__more-open { display: none; }
.service__more[open] .service__more-close { display: inline; }
.service__points { list-style: none; display: grid; gap: 8px; margin: 0 0 22px; }
.service__points li { position: relative; padding-left: 22px; font-size: 15px; color: var(--muted); }
.service__points li::before { content: ""; position: absolute; left: 0; top: 7px; width: 10px; height: 10px; border-radius: 2px; background: var(--gold); transform: rotate(45deg); }
.service__points strong { color: var(--ink); font-weight: 600; }
.service__actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: auto; }
.services__grid > .service:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (min-width: 1081px) {
	.services__grid > .service:last-child:nth-child(odd) { flex-direction: row; }
	.services__grid > .service:last-child:nth-child(odd) .service__media { flex: 0 0 50%; aspect-ratio: auto; min-height: 360px; }
}
section.service { margin-block: 48px; }

/* ---------- Call band ---------- */
.band { position: relative; overflow: hidden; padding: 0; background: var(--navy); color: #fff; }
.band::after { content: ""; position: absolute; right: -120px; top: -120px; width: 420px; height: 420px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--gold), transparent 78%), transparent 70%); }
.band__inner { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 44px 0; }
.band h2 { max-width: 720px; margin-bottom: 6px; font-size: clamp(30px, 3.4vw, 42px); color: #fff; }
.band h2 em { color: var(--gold-on-dark); }
.band p { font-size: 18px; color: #c6d0d6; }
.band__ctas { display: flex; flex: none; flex-wrap: wrap; gap: 12px; }

/* ---------- Why us ---------- */
.why { background: var(--bg); }
.why__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: start; }
.why__grid--no-photo { grid-template-columns: 1fr; }
.why__photo { position: sticky; top: 110px; }
.why__photo > img { width: 100%; aspect-ratio: 4 / 5; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow); }
.why__stamp { position: absolute; right: -18px; bottom: 30px; display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 14px; background: #fff; box-shadow: var(--shadow); }
.why__stamp img { width: 64px; height: 64px; object-fit: contain; }
.why__stamp strong { display: block; font-size: 17px; line-height: 1.2; color: var(--navy); }
.why__stamp span { font-size: 13px; color: var(--muted); }
.why__text > .prose p:first-child { font-size: 19px; }
.usps { list-style: none; display: grid; grid-template-columns: 1fr 1fr; gap: 18px; margin: 30px 0; }
.usp { padding: 20px; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.usp .icon { display: block; width: 30px; height: 30px; margin-bottom: 8px; color: var(--gold-d); }
.usp strong { display: block; margin-bottom: 4px; font-size: 18px; line-height: 1.25; color: var(--navy); }
.usp span { display: block; font-size: 15px; line-height: 1.45; color: var(--muted); }
.why__quote { margin: 0 0 28px; padding: 18px 22px; border-left: 3px solid var(--gold); border-radius: 0 12px 12px 0; background: #fff; }
.why__quote h3 { margin-bottom: 8px; font-size: 24px; color: var(--navy); }
.steps { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 70px; counter-reset: step; }
.step { position: relative; padding-top: 18px; }
.step::before { counter-increment: step; content: "0" counter(step); display: block; margin-bottom: 8px; font-family: var(--head); font-weight: 700; font-size: 58px; line-height: 1; color: var(--gold); }
.step::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--gold), transparent); }
.step strong { display: block; margin-bottom: 4px; font-size: 20px; color: var(--navy); }
.step span { font-size: 15px; color: var(--muted); }

/* ---------- Our work ---------- */
.gallery { list-style: none; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: 12px; margin-top: 44px; }
.gallery li:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.gallery li.is-wide { grid-column: span 2; }
.gallery li.is-full { grid-column: 1 / -1; }
.gallery a { display: block; height: 100%; overflow: hidden; border-radius: 12px; background: #dfe4e7; }
.gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.gallery a:hover img, .gallery a:focus-visible img { transform: scale(1.06); }

/* Lightbox for the project photos */
.lightbox { width: 100vw; max-width: none; height: 100vh; height: 100dvh; max-height: none; margin: 0; padding: 0; border: 0; background: rgb(8 14 18 / .94); color: #fff; }
.lightbox::backdrop { background: transparent; }
.lightbox__figure { display: grid; place-items: center; align-content: center; gap: .8rem; height: 100%; margin: 0; padding: 4rem 5rem 2.5rem; }
.lightbox__image { max-width: 100%; max-height: calc(100dvh - 8rem); object-fit: contain; border-radius: 8px; box-shadow: 0 10px 40px rgb(0 0 0 / .5); user-select: none; }
.lightbox__count { font-size: .8rem; letter-spacing: .1em; opacity: .75; }
.lightbox__button { position: absolute; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 0; border-radius: 50%; background: rgb(255 255 255 / .12); color: #fff; cursor: pointer; transition: background-color .2s ease; }
.lightbox__button:hover, .lightbox__button:focus-visible { background: var(--gold); color: var(--on-gold); }
.lightbox__button .icon { width: 18px; height: 18px; }
.lightbox__close { top: 1rem; right: 1rem; }
.lightbox__prev, .lightbox__next { top: 50%; transform: translateY(-50%); }
.lightbox__prev { left: 1rem; }
.lightbox__prev .icon { transform: scaleX(-1); }
.lightbox__next { right: 1rem; }
html.has-lightbox { overflow: hidden; }

/* ---------- Reviews ---------- */
.reviews { background: var(--navy); color: #fff; }
.reviews h2 { color: #fff; }
.reviews h2 em, .reviews .eyebrow { color: var(--gold-on-dark); }
.reviews .lead { color: #c6d0d6; }
.reviews__top { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 30px; }
.reviews__scores { display: flex; gap: 14px; }
.reviews__score { padding: 14px 20px; border: 1px solid rgb(255 255 255 / .12); border-radius: 12px; background: rgb(255 255 255 / .06); text-align: center; text-decoration: none; }
.reviews__score b { display: block; font-family: var(--head); font-size: 40px; line-height: 1; color: var(--gold-on-dark); }
.reviews__score span { font-size: 13px; color: #c6d0d6; }
.reviews__grid { list-style: none; columns: 3; column-gap: 20px; margin-top: 44px; }
.review { break-inside: avoid; margin-bottom: 20px; padding: 24px; border: 1px solid rgb(255 255 255 / .1); border-radius: 14px; background: rgb(255 255 255 / .05); }
.review__stars { display: block; margin-bottom: 10px; color: var(--gold-on-dark); letter-spacing: 2px; }
.review__text { margin: 0 0 14px; font-size: 16px; color: #e3e9ec; }
.review__text p { margin-bottom: .7em; }
.review__name { display: flex; align-items: center; gap: 10px; margin: 0; font-weight: 700; font-size: 15px; }
.review__name span { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--gold); color: var(--on-gold); font-weight: 800; }
.reviews__cta { margin-top: 20px; text-align: center; }

/* ---------- Areas ---------- */
.areas__grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 56px; align-items: center; }
.areas__text .prose { margin-bottom: 18px; font-size: 18px; }
.areas__text .btn { margin-top: 8px; }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 22px; }
.chips li { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border: 1px solid var(--line); border-radius: 40px; background: var(--bg); font-weight: 600; font-size: 15px; color: var(--navy); }
.chips .icon { width: 14px; height: 14px; color: var(--gold-d); }
.chips li.is-home { border-color: var(--navy); background: var(--navy); color: #fff; }
.chips li.is-home .icon { color: var(--gold-on-dark); }
.areas__map iframe, .area-map { display: block; width: 100%; border: 0; border-radius: 18px; box-shadow: var(--shadow); }
.areas__map iframe { height: 450px; }
/* The drawn map (regancy_area_map): one base map drawn in two frames, wide and (on phones) tall,
   with the pins and names laid over it in page pixels so they stay the same size at any width. */
.area-map { position: relative; height: auto; aspect-ratio: 1.3; overflow: hidden; background: #d5e1e8; text-align: left; }
.area-map__defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.area-map__base { position: absolute; inset: 0; width: 100%; height: 100%; }
.area-map__base--tall { display: none; }
.area-map__sea { fill: #d5e1e8; }
.area-map__land { fill: #e9e4d8; }
.area-map__county { fill: #fbf9f3; }
.area-map__borders, .area-map__roads, .area-map__edge { fill: none; vector-effect: non-scaling-stroke; stroke-linejoin: round; }
.area-map__borders { stroke: #b3aa96; stroke-width: 1; stroke-dasharray: 4 3; }
.area-map__roads { stroke: #dccda8; stroke-width: 1.6; }
.area-map__edge { stroke: var(--navy); stroke-width: 2; opacity: .7; }
.area-map__places { position: absolute; inset: 0; margin: 0; padding: 0; list-style: none; font-size: 13px; }
.area-map__place { position: absolute; left: var(--x); top: var(--y); width: 0; height: 0; }
.area-map__place .icon { position: absolute; left: -10px; bottom: -1px; width: 20px; height: 27px; color: var(--gold); overflow: visible; filter: drop-shadow(0 1px 1px rgb(0 0 0 / .3)); }
.area-map__place .icon path { stroke: var(--navy); stroke-width: 26; paint-order: stroke; }
.area-map__place span { position: absolute; left: 12px; top: -19px; transform: translateY(-50%); color: var(--navy); font-weight: 700; line-height: 1.1; white-space: nowrap; text-shadow: 0 0 2px #fff, 0 0 2px #fff, 0 0 3px #fff, 0 0 4px #fff; }
.area-map__place.is-left span { left: auto; right: 12px; }
.area-map__place.is-above span { left: 0; top: -31px; transform: translate(-50%, -100%); }
.area-map__place.is-below span { left: 0; top: 3px; transform: translateX(-50%); }
.area-map__place.is-home { z-index: 1; }
.area-map__place.is-home .icon { left: -13px; width: 26px; height: 35px; color: var(--navy); }
.area-map__place.is-home .icon path { stroke: var(--gold); }
.area-map__place.is-home span { left: 15px; top: -24px; font-size: 1.15em; font-weight: 800; }
.area-map__place.is-home.is-left span { left: auto; right: 15px; }
.area-map__place.is-home.is-above span { left: 0; top: -39px; }

/* ---------- FAQs ---------- */
.faq { background: var(--bg); }
.faq__list { max-width: 860px; margin: 44px auto 0; }
.faq__item { margin-bottom: 12px; overflow: hidden; border: 1px solid var(--line); border-radius: 12px; background: #fff; }
.faq__item summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; list-style: none; cursor: pointer; font-size: 18px; font-weight: 700; line-height: 1.35; color: var(--navy); }
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after { content: "+"; flex: none; font-size: 28px; font-weight: 400; line-height: 1; color: var(--gold-d); transition: transform .2s; }
.faq__item[open] summary::after { transform: rotate(45deg); }
.faq__item summary:focus-visible { outline: 2px solid var(--gold); outline-offset: -2px; }
.faq__answer { padding: 0 24px 22px; color: var(--muted); }
.faq__answer p + p { margin-top: 10px; }

/* ---------- Contact ---------- */
.final { background: linear-gradient(135deg, var(--navy-3), var(--navy-2)); color: #fff; }
.final__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.final h2 { color: #fff; }
.final h2 em, .final .eyebrow { color: var(--gold-on-dark); }
.final .prose { margin-bottom: 28px; font-size: 18px; color: #c6d0d6; }
.final .prose strong { color: #fff; }
.contact-links { list-style: none; display: grid; gap: 16px; }
.contact-links a { display: flex; align-items: center; gap: 16px; text-decoration: none; }
.contact-links i { display: grid; place-items: center; flex: none; width: 52px; height: 52px; border-radius: 12px; background: color-mix(in srgb, var(--gold-on-dark), transparent 85%); color: var(--gold-on-dark); }
.contact-links .icon { width: 24px; height: 24px; }
.contact-links small { display: block; font-size: 13px; font-weight: 600; color: #98a8b1; text-transform: uppercase; letter-spacing: 1px; }
.contact-links b { font-size: 21px; overflow-wrap: anywhere; }

/* ---------- Footer ---------- */
.site-footer { background: var(--navy-3); color: #98a8b1; font-size: 15px; }
.footer { display: grid; grid-template-columns: 1.3fr 1fr 1.1fr .7fr; gap: 40px; padding: 64px 0 40px; }
.footer h2 { margin-bottom: 14px; font-size: 22px; color: #fff; }
.footer ul { list-style: none; display: grid; gap: 8px; }
.footer a { color: #cfd7dc; text-decoration: none; }
.footer a:hover, .footer a:focus-visible { color: var(--gold-on-dark); }
.footer li a, .footer li span { display: inline-flex; align-items: center; gap: 10px; }
.footer li .icon { width: 16px; height: 16px; color: var(--gold-on-dark); }
.footer__logo img { width: auto; height: 50px; margin-bottom: 18px; }
.footer__text strong { color: #fff; }
.footer__badges { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.footer__badges img { width: 120px; height: 46px; padding: 6px 10px; border-radius: 8px; background: #fff; object-fit: contain; }
.footer__accreditations img { width: 86px; padding: 4px; border-radius: 10px; background: #fff; }
.copyright { border-top: 1px solid rgb(255 255 255 / .08); padding: 20px 0; font-size: 14px; text-align: center; }
.copyright p { margin: 0; }

/* ---------- Floating buttons and the phone action bar ---------- */
.to-top { position: fixed; left: 1.4rem; bottom: 1.4rem; z-index: 60; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--navy); color: #fff; box-shadow: 0 6px 18px rgb(0 0 0 / .25); opacity: 0; visibility: hidden; transition: opacity .25s ease, visibility .25s; }
.to-top.is-visible { opacity: 1; visibility: visible; }
.to-top .icon { width: 16px; height: 16px; }
#wpfront-scroll-top-container { display: none !important; } /* see functions.php */
/* WhatsApp button (business.whatsapp in site.json): bottom right on larger screens; phones get
   the action bar instead. The back-to-top button is bottom left (Jacob, 2026-09-28). */
.whatsapp { position: fixed; right: 1.4rem; bottom: 1.4rem; z-index: 60; display: grid; place-items: center; width: 60px; height: 60px; border-radius: 50%; background: var(--green); color: #fff; box-shadow: 0 3px 12px rgb(0 0 0 / .3); transition: transform .2s ease; }
.whatsapp:hover, .whatsapp:focus-visible { transform: scale(1.08); }
.whatsapp .icon { width: 32px; height: 32px; }
.action-bar { display: none; }

/* ---------- Smaller screens ---------- */
@media (max-width: 1240px) {
	.site-nav { display: none; }
}
@media (min-width: 1081px) and (max-width: 1240px) {
	/* Two-column hero on a narrow screen: a tighter review row, without the CORC badge (it is in the ticks above). */
	.hero__proof { gap: 14px; }
	.proof + .proof { padding-left: 14px; }
	.proof--badge { display: none; }
	.proof__logo img { width: 80px; }
}
@media (max-width: 1080px) {
	.hero__inner, .about__inner, .why__grid, .areas__grid, .final__grid { grid-template-columns: 1fr; gap: 44px; }
	.about__head { position: static; }
	.why__photo { position: relative; top: auto; }
	/* Without a map the chips sit in their own column; on one column they go before the closing text. */
	.areas__grid--chips { display: flex; flex-direction: column; gap: 0; }
	.areas__grid--chips .areas__text { display: contents; }
	.areas__grid--chips .areas__chips { order: 1; margin-bottom: 24px; }
	.areas__grid--chips .areas__footer, .areas__grid--chips .areas__call { order: 2; }
	.areas__grid--chips .areas__call { align-self: flex-start; }
	.trust__list { grid-template-columns: repeat(2, 1fr); }
	.reviews__grid { columns: 2; }
	.steps { grid-template-columns: repeat(2, 1fr); }
	.why__photo { max-width: 560px; }
	.why__photo > img { aspect-ratio: 4 / 3; }
	.footer { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 720px) {
	body { font-size: 16px; padding-bottom: 76px; }
	.section { padding: 68px 0; }
	.wrap { width: min(1200px, 100% - 32px); }
	h2 { font-size: clamp(30px, 8.5vw, 40px); }
	.lead, .lead p { font-size: 17px; }
	.topbar__items span:nth-child(n+2), .topbar__right { display: none; }
	.topbar__inner { justify-content: center; }
	.site-header__logo img { height: 42px; }
	.site-header__phone, .site-header__quote { display: none; }
	.site-header__call { display: inline-flex; padding: 11px 14px; font-size: 16px; }
	.site-header__call .icon { width: 18px; height: 18px; }
	.hero { padding: 38px 0 56px; }
	.hero__title { font-size: clamp(38px, 11vw, 52px); }
	.hero__intro { font-size: 17px; }
	.hero__ticks { grid-template-columns: 1fr; }
	.hero__ctas .btn { flex: 1 1 100%; }
	.hero__proof { display: none; }
	.trust__list { gap: 16px; }
	.trust__icon { width: 42px; height: 42px; }
	.trust__item strong { font-size: 15px; }
	.trust__item strong + span { font-size: 13px; }
	.about__text { font-size: 17px; }
	.services__grid { grid-template-columns: 1fr; }
	.service h3 { font-size: 28px; }
	.service__body { padding: 22px; }
	.band__inner { flex-direction: column; align-items: flex-start; }
	.band__ctas, .band__ctas .btn { width: 100%; }
	.usps { grid-template-columns: 1fr; }
	.steps { grid-template-columns: 1fr; margin-top: 50px; }
	.why__stamp { right: 10px; }
	.gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; }
	.gallery li.is-wide, .gallery li.is-full { grid-column: span 1; }
	.gallery li.is-wide-phone { grid-column: span 2; }
	.reviews__grid { columns: 1; }
	.faq__item summary { padding: 18px; font-size: 17px; }
	.faq__answer { padding: 0 18px 18px; }
	.areas__map { margin-inline: -16px; }
	.area-map, .areas__map iframe { border-radius: 0; }
	.area-map { aspect-ratio: var(--tall, .8); }
	.area-map__base--wide { display: none; }
	.area-map__base--tall { display: block; }
	.area-map__place { left: var(--tx); top: var(--ty); }
	.area-map__places { font-size: 12px; }
	.areas__map iframe { height: 420px; }
	.sitesync-form { grid-template-columns: 1fr; padding: 18px 18px 22px; }
	.form-card__head { padding: 18px; }
	.form-card__head h2 { font-size: 26px; }
	.contact-links b { font-size: 18px; }
	.footer { grid-template-columns: 1fr; gap: 32px; padding-top: 48px; }
	.lightbox__figure { padding: 4rem .5rem 5.5rem; }
	.lightbox__image { max-height: calc(100dvh - 10rem); }
	.lightbox__prev, .lightbox__next { top: auto; bottom: 1rem; transform: none; }
	.lightbox__prev { left: calc(50% - 60px); }
	.lightbox__next { right: calc(50% - 60px); }

	.action-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; display: grid; grid-template-columns: 1.4fr 1fr; gap: 8px; padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: #fff; box-shadow: 0 -8px 30px -10px rgb(0 0 0 / .35); }
	.action-bar--three { grid-template-columns: 1.4fr 1.2fr 1fr; }
	.action-bar .btn { padding: 15px 8px; font-size: 15px; }
	.action-bar .btn .icon { width: 18px; height: 18px; }
	.whatsapp { display: none; }
	.to-top { left: 12px; bottom: 88px; width: 40px; height: 40px; }
}