/*
Theme Name: PW Carpentry
Theme URI: https://www.pw-carpentry.co.uk/
Author: Welch Marketing Ltd
Author URI: https://www.welchmarketing.co.uk/
Description: A premium, plugin free WordPress theme built for PW Carpentry, building and carpentry specialists in South East London and Kent. Brand colours taken from the PW Carpentry logo. Self building pages and menus, a full Welch Settings admin panel, lead capture with its own database table, UK GDPR and PECR cookie consent, Schema.org structured data, per service and per town SEO pages, self hosted fonts and WCAG 2.2 AA accessibility.
Version: 1.9.8
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: pwc
Tags: business, custom-menu, custom-logo, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* -------------------------------------------------------------------------
 * Self hosted fonts. Nothing is requested from a third party, so no cookie
 * or connection happens before the visitor has consented to anything.
 * DM Sans and Inter are both licensed under the SIL Open Font License 1.1.
 * ---------------------------------------------------------------------- */

@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "DM Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/dm-sans-latin-700-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("assets/fonts/inter-latin-400-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("assets/fonts/inter-latin-500-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("assets/fonts/inter-latin-600-normal.woff2") format("woff2");
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("assets/fonts/inter-latin-700-normal.woff2") format("woff2");
}

/* -------------------------------------------------------------------------
 * Tokens. The colour values here are fallbacks: the live values come from
 * Welch Settings and are injected after this file, so they win.
 * ---------------------------------------------------------------------- */

:root {
	--brand: #941313;
	--brand-2: #A52D2D;
	--brand-3: #6B0E0E;
	--accent: #FFDD59;
	--accent-2: #FFE47D;
	--accent-ink: #941313;
	--on-accent: #1C1517;
	--ink: #1C1517;
	--cream: #FBF6F2;

	--muted: #5C5153;
	--line: #E9DFDD;
	--white: #FFFFFF;

	/* Neutral tints for text sitting on a brand coloured band. Written as
	   white with an alpha, so they stay readable whatever brand colour the
	   client sets in Welch Settings. */
	--on-brand: rgba(255, 255, 255, 0.88);
	--on-brand-2: rgba(255, 255, 255, 0.74);
	--on-brand-faint: rgba(255, 255, 255, 0.5);

	--font-display: "DM Sans", "Segoe UI", system-ui, sans-serif;
	--font-body: "Inter", "Segoe UI", system-ui, sans-serif;

	--maxw: 76rem;
	--gutter: clamp(1.1rem, 4vw, 1.9rem);
	--radius: 0.85rem;
	--radius-sm: 0.5rem;
	--speed: 0.22s;
	--shadow: 0 1.4rem 3rem rgba(20, 22, 26, 0.1);
	--shadow-sm: 0 0.4rem 1.2rem rgba(20, 22, 26, 0.08);
}

/* -------------------------------------------------------------------------
 * Base
 * ---------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box }

html {
	overflow-x: hidden;
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: clamp(1rem, 0.97rem + 0.16vw, 1.06rem);
	line-height: 1.7;
	font-weight: 400;
}

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: 700;
	line-height: 1.16;
	letter-spacing: -0.015em;
	color: var(--ink);
	margin: 0 0 0.7rem;
	text-wrap: balance;
}

h1 { font-size: clamp(2.05rem, 1.5rem + 2.6vw, 3.5rem) }
h2 { font-size: clamp(1.65rem, 1.3rem + 1.5vw, 2.5rem) }
h3 { font-size: clamp(1.18rem, 1.08rem + 0.45vw, 1.42rem) }

p { margin: 0 0 1.05rem }
p:last-child { margin-bottom: 0 }

a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px }
a:hover { color: var(--brand) }

img, svg, video { max-width: 100%; height: auto }
img { display: block }

ul, ol { margin: 0 0 1.05rem; padding-left: 1.2rem }

strong { font-weight: 700 }

/* Focus is always visible, and never removed. */
:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
	border-radius: 3px;
}

.skip-link {
	position: absolute;
	left: -100vw;
	top: 0;
	z-index: 999;
	background: var(--brand);
	color: #fff;
	padding: 0.9rem 1.4rem;
	font-weight: 700;
	font-family: var(--font-display);
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus {
	left: 0;
	color: #fff;
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(1px, 1px, 1px, 1px);
	white-space: nowrap;
}

/* The low specificity backstop. Any icon with no context rule stays at 1em,
   even if this stylesheet arrives late or a cache serves a stale copy. */
.icon {
	width: 1em;
	height: 1em;
	display: inline-block;
	flex: none;
	vertical-align: -0.125em;
	fill: currentColor;
}

/* The logo gets its own class so a bare descendant selector never sizes the
   tick icons that sit in the same footer column. */
.site-logo {
	height: 2.9rem;
	width: auto;
	max-width: 100%;
	display: block;
}

.wrap {
	width: 100%;
	max-width: var(--maxw);
	margin: 0 auto;
	padding: 0 var(--gutter);
}

/* A narrow reading column that also carries wrap: restore the container width
   on the combined selector and cap the children instead. The children are then
   aligned left, not centred, so the body copy starts on the same line as the
   breadcrumbs, the date and the headline above it. Centring the measure inside
   a full width container leaves the article looking detached from its own
   header. Note this is capping and aligning the CHILDREN. The element carrying
   wrap keeps the container width and its own centring, which is the thing that
   must never be changed. */
.wrap.narrow { max-width: var(--maxw) }
.wrap.narrow > * { max-width: 48rem; margin-left: 0; margin-right: auto }

.section {
	padding-top: clamp(3.2rem, 6vw, 5.6rem);
	padding-bottom: clamp(3.2rem, 6vw, 5.6rem);
}
/* Every section declares its tone, light or cream, so the join between two of
   them can be handled. */
.section--light { background: var(--white) }
.section--cream { background: var(--cream) }

/* Two sections in a row on the SAME background stack their padding: the first
   one's bottom plus the second one's top, so roughly 11rem of empty space with
   no colour change to explain it. It reads as a rendering fault rather than a
   break. Where the tone changes there is a visible edge and the double gap is
   correct, so only the matching joins are collapsed. The first section keeps
   its bottom padding, which becomes the single gap between them. */
.section--light + .section--light,
.section--cream + .section--cream { padding-top: 0 }

/* The same doubling happens where a section follows the closing call to action
   band or the trust strip, both of which carry their own generous padding. */
.cta + .section,
.trust + .section { padding-top: clamp(2.4rem, 4.5vw, 4rem) }

.section__head {
	max-width: 46rem;
	margin: 0 0 clamp(2rem, 4vw, 3rem);
}
.section__title { margin-bottom: 0.6rem }
.section__text { color: var(--muted); font-size: 1.05rem }
.section__actions { margin-top: 2rem }

.kicker {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-ink);
	margin: 0 0 0.6rem;
}

/* -------------------------------------------------------------------------
 * Buttons
 * ---------------------------------------------------------------------- */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.55rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.98rem;
	line-height: 1;
	padding: 0.9rem 1.5rem;
	min-height: 44px;
	border: 2px solid transparent;
	border-radius: 999px;
	text-decoration: none;
	cursor: pointer;
	transition: transform var(--speed), background var(--speed), color var(--speed), border-color var(--speed);
}
.btn:hover { transform: translateY(-2px) }
.btn svg { width: 1.05em; height: 1.05em }

.btn--lg { padding: 1.05rem 1.9rem; font-size: 1.03rem }

.btn--accent { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.btn--accent:hover { background: var(--accent-2); border-color: var(--accent-2); color: var(--on-accent) }

.btn--dark { background: var(--brand); color: #fff; border-color: var(--brand) }
.btn--dark:hover { background: var(--brand-2); border-color: var(--brand-2); color: #fff }

.btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.45) }
.btn--ghost:hover { background: #fff; color: var(--brand); border-color: #fff }

/* -------------------------------------------------------------------------
 * Top bar
 * ---------------------------------------------------------------------- */

.topbar {
	background: var(--brand-3);
	color: var(--on-brand);
	font-size: 0.86rem;
}
.topbar__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 0.55rem;
	padding-bottom: 0.55rem;
}
.topbar__msg { margin: 0; color: var(--on-brand-2) }
.topbar__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.4rem;
	flex-wrap: wrap;
}
.topbar__links li { display: flex; align-items: center; gap: 0.4rem }
.topbar__links a { color: #fff; text-decoration: none; font-weight: 600 }
.topbar__links a:hover { color: var(--accent-2) }
.topbar__links svg { color: var(--accent-2) }
.topbar__email a { word-break: break-word }
.topbar__msg { display: none }
.topbar__hours { display: none }

/* -------------------------------------------------------------------------
 * Header
 * ---------------------------------------------------------------------- */

.site-header {
	position: sticky;
	top: 0;
	z-index: 500;
	background: rgba(255, 255, 255, 0.97);
	border-bottom: 1px solid var(--line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: 1.2rem;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; text-decoration: none }
.brand--footer .site-logo { margin-bottom: 1rem }

.nav-toggle-input { position: absolute; opacity: 0; pointer-events: none }

.nav-toggle {
	display: none;
	align-items: center;
	gap: 0.45rem;
	order: 5;
	margin-left: auto;
	min-height: 44px;
	padding: 0.5rem 0.8rem;
	border: 2px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 700;
	color: var(--ink);
	background: #fff;
	cursor: pointer;
}
.nav-toggle svg { width: 1.3em; height: 1.3em }
.nav-toggle__open { display: inline-flex }
.nav-toggle__close { display: none }
.nav-toggle__text { font-size: 0.9rem }
#nav-toggle:focus-visible + .nav-toggle { outline: 3px solid var(--accent); outline-offset: 3px }

.primary-nav {
	display: flex;
	align-items: center;
	margin-left: auto;
	/* When the open menu is scrolled to its end, the scroll must stop there
	   rather than carrying on into the page behind it. Declared on the base
	   rule so it applies wherever the panel scrolls. */
	overscroll-behavior: contain;
}
.primary-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0.15rem;
}
.primary-nav a {
	display: block;
	white-space: nowrap;
	padding: 0.6rem 0.7rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--ink);
	text-decoration: none;
	border-radius: var(--radius-sm);
}
.primary-nav a:hover { background: var(--cream); color: var(--accent-ink) }
.primary-nav .current-menu-item > a,
.primary-nav .current-menu-ancestor > a { color: var(--accent-ink) }

.primary-nav .menu-item-has-children { position: relative }
.primary-nav .sub-menu {
	position: absolute;
	left: 0;
	top: 100%;
	list-style: none;
	margin: 0;
	padding: 0.4rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-sm);
	min-width: 14rem;
	display: none;
	z-index: 20;
}
.primary-nav .menu-item-has-children:hover > .sub-menu,
.primary-nav .menu-item-has-children:focus-within > .sub-menu { display: block }
.primary-nav .sub-menu a { white-space: normal }


.header-cta {
	display: flex;
	align-items: center;
	gap: 0.6rem;
	flex: 0 0 auto;
}
.header-cta .btn { font-size: 0.9rem; padding: 0.75rem 1.15rem }

/* -------------------------------------------------------------------------
 * Hero. One column only: kicker, headline, one paragraph, two buttons and
 * the trust chips. A form never goes here. The measure is capped on the
 * content, never on hero__inner, because that element carries wrap.
 * ---------------------------------------------------------------------- */

.hero {
	position: relative;
	background: linear-gradient(105deg, var(--brand-3) 0%, var(--brand) 52%, var(--brand-2) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.hero--photo { background-color: var(--brand) }

.hero__inner {
	position: relative;
	padding-top: clamp(3.4rem, 7vw, 6.4rem);
	padding-bottom: clamp(3.4rem, 7vw, 6.4rem);
}
.hero--compact .hero__inner {
	padding-top: clamp(2.6rem, 5vw, 4.4rem);
	padding-bottom: clamp(2.6rem, 5vw, 4.4rem);
}

.hero__kicker,
.hero__title,
.hero__text,
.hero__actions,
.hero__chips { max-width: 56rem }

.hero__kicker {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.82rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--accent-2);
	margin: 0 0 0.9rem;
}
.hero__title { color: #fff; margin-bottom: 1rem }
.hero__text { color: var(--on-brand); font-size: clamp(1.03rem, 1rem + 0.3vw, 1.18rem); margin-bottom: 1.9rem }

.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-bottom: 2rem }

.hero__chips {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.6rem 1.4rem;
}
.chip {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-size: 0.92rem;
	font-weight: 500;
	color: var(--on-brand);
}
.chip svg { color: var(--accent-2) }

.crumbs { margin-bottom: 1.2rem }
.crumbs__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.3rem;
	font-size: 0.85rem;
}
.crumbs__item { display: flex; align-items: center; gap: 0.3rem; color: var(--on-brand-2) }
.crumbs a { color: var(--on-brand); text-decoration: none }
.crumbs a:hover { color: var(--accent-2); text-decoration: underline }
.crumbs__sep { color: var(--on-brand-faint); font-size: 0.8em }

/* Breadcrumbs on a light article header. */
.single__head .crumbs__item { color: var(--muted) }
.single__head .crumbs a { color: var(--accent-ink) }

/* -------------------------------------------------------------------------
 * Trust strip
 * ---------------------------------------------------------------------- */

.trust {
	background: var(--brand-3);
	color: var(--on-brand);
}
.trust__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.4rem;
	flex-wrap: wrap;
	padding-top: 1.1rem;
	padding-bottom: 1.1rem;
}
.trust__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.7rem 1.8rem;
}
.trust__item {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.93rem;
}
.trust__item svg { color: var(--accent-2); font-size: 1.15em }
.trust__badges { display: flex; align-items: center; gap: 1.2rem; flex-wrap: wrap }
.trust__badge {
	height: 2.4rem;
	width: auto;
	background: #fff;
	border-radius: var(--radius-sm);
	padding: 0.3rem 0.5rem;
}

/* -------------------------------------------------------------------------
 * Layout helpers
 * ---------------------------------------------------------------------- */

.split {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 5vw, 3.6rem);
	align-items: center;
}
.split__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem }

.grid { display: grid; gap: clamp(1.2rem, 2.6vw, 1.9rem) }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr)) }
.grid--4 { grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)) }

.cards {
	display: grid;
	gap: clamp(1.2rem, 2.6vw, 1.9rem);
	grid-template-columns: repeat(auto-fit, minmax(min(17rem, 100%), 1fr));
}

/* -------------------------------------------------------------------------
 * Image frames. A placeholder never renders as a broken image, and a filled
 * frame drops the dashed border and covers the box.
 * ---------------------------------------------------------------------- */

.imgframe {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.3rem;
	text-align: center;
	padding: 1.4rem;
	border: 2px dashed var(--line);
	border-radius: var(--radius);
	background-color: var(--cream);
	background-image: repeating-linear-gradient(135deg, rgba(28, 21, 23, 0.05) 0, rgba(28, 21, 23, 0.05) 0.7rem, transparent 0.7rem, transparent 1.4rem);
	color: var(--muted);
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.imgframe__label {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.95rem;
	color: var(--ink);
}
.imgframe__hint { font-size: 0.78rem; color: var(--muted) }

.imgframe--filled {
	border: 0;
	padding: 0;
	background-image: none;
}
.imgframe--filled img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.imgframe--tall { aspect-ratio: 4 / 5 }
.imgframe--square { aspect-ratio: 1 / 1 }
.imgframe--portrait { aspect-ratio: 3 / 4 }
.imgframe--card { aspect-ratio: 16 / 10; border-radius: var(--radius) var(--radius) 0 0 }

/* Twelve photos, in column counts that all divide into twelve, so the last
   row is never short at any width. Auto-fit was landing on five columns
   around 1024px, which left a ragged pair on their own. minmax(0,1fr) keeps
   every track able to shrink, so nothing can force a sideways scrollbar. */
.gallery {
	display: grid;
	gap: clamp(0.7rem, 1.6vw, 1.1rem);
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* -------------------------------------------------------------------------
 * Cards
 * ---------------------------------------------------------------------- */

.card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	overflow: hidden;
	transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent) }
.card__media { display: block }
.card__media .imgframe { border-left: 0; border-right: 0; border-top: 0 }
.card__body { padding: 1.3rem 1.4rem 1.5rem; display: flex; flex-direction: column; flex: 1 }
.card__title { font-size: 1.2rem; margin-bottom: 0.5rem }
.card__title a { color: var(--ink); text-decoration: none }
.card__title a:hover { color: var(--accent-ink) }
.card__text { color: var(--muted); font-size: 0.96rem; flex: 1 }
.card__more {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 1rem;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.92rem;
	color: var(--accent-ink);
	white-space: nowrap;
}

/* The cards in a row are already equal height, but their notes are different
   lengths, so without this the link line sits at a different point in each
   one. Pushing it down with margin-top: auto lands every one on the same
   line, whatever the note above it does. */
.areacard {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.4rem;
	transition: transform var(--speed), box-shadow var(--speed), border-color var(--speed);
}
.areacard .card__more { margin-top: auto; padding-top: 0.4rem }
.areacard:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: var(--accent) }
.areacard__title { font-size: 1.15rem; margin-bottom: 0.5rem }
.areacard__title a { display: inline-flex; align-items: center; gap: 0.45rem; color: var(--ink); text-decoration: none }
.areacard__title a:hover { color: var(--accent-ink) }
.areacard__title svg { color: var(--accent-ink) }
.areacard__text { color: var(--muted); font-size: 0.94rem; margin-bottom: 0.8rem }
.areacard__title span { display: inline-block }

/* -------------------------------------------------------------------------
 * Features, ticks, towns
 * ---------------------------------------------------------------------- */

.feature__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 3rem;
	height: 3rem;
	border-radius: 50%;
	background: var(--accent);
	color: var(--on-accent);
	font-size: 1.4rem;
	margin-bottom: 0.9rem;
}
.feature__title { font-size: 1.15rem; margin-bottom: 0.4rem }
.feature__text { color: var(--muted); font-size: 0.96rem }
.feature--boxed {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem 1.5rem;
}

.ticks { list-style: none; margin: 1.4rem 0; padding: 0; display: grid; gap: 0.6rem }
.ticks li { display: flex; align-items: flex-start; gap: 0.6rem }
.ticks svg { color: var(--accent-ink); margin-top: 0.35em; font-size: 1.1em }

.towns { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.6rem }
.towns__item a {
	display: inline-flex;
	align-items: center;
	gap: 0.45rem;
	min-height: 44px;
	padding: 0.6rem 1.1rem;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: 999px;
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 0.94rem;
	color: var(--ink);
	text-decoration: none;
	transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.towns__item a:hover { background: var(--brand); color: #fff; border-color: var(--brand) }
.towns__item a svg { color: var(--accent-ink) }
.towns__item a:hover svg { color: var(--accent-2) }
.towns__item.is-current a { background: var(--accent); border-color: var(--accent); color: var(--on-accent) }

/* -------------------------------------------------------------------------
 * Reviews
 * ---------------------------------------------------------------------- */

.review {
	margin: 0;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 0.9rem;
}
.stars { display: inline-flex; gap: 0.15rem; color: var(--accent-ink); font-size: 1.05rem }
.review__job {
	margin: 0;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	color: var(--ink);
}
.review__text { margin: 0; flex: 1 }
.review__text p { margin: 0; font-size: 1rem }
.review__by { display: flex; align-items: center; gap: 0.7rem; font-size: 0.92rem; color: var(--muted) }
.review__avatar { width: 2.6rem; height: 2.6rem; border-radius: 50%; object-fit: cover }
.review__by strong { display: block; color: var(--ink) }
.review__place { display: block; font-size: 0.86rem }
.review__date { display: block; font-size: 0.82rem }

.empty-note {
	background: #fff;
	border: 1px solid var(--line);
	border-left: 4px solid var(--accent);
	border-radius: var(--radius-sm);
	padding: 1.3rem 1.5rem;
	color: var(--muted);
}

/* -------------------------------------------------------------------------
 * FAQs
 * ---------------------------------------------------------------------- */

.faqs { display: grid; gap: 0.7rem }
.faq {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	overflow: hidden;
}
.faq__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: 1.1rem 1.3rem;
	min-height: 44px;
	cursor: pointer;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.03rem;
	color: var(--ink);
	list-style: none;
}
.faq__q::-webkit-details-marker { display: none }
.faq__icon { color: var(--accent-ink); transition: transform var(--speed) }
.faq[open] .faq__icon { transform: rotate(90deg) }
.faq__a { padding: 0 1.3rem 1.2rem; color: var(--muted) }

/* -------------------------------------------------------------------------
 * Forms
 * ---------------------------------------------------------------------- */

.split--form { align-items: start }

.form-card {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: clamp(1.3rem, 3vw, 2rem);
	box-shadow: var(--shadow-sm);
}
.form__grid {
	display: grid;
	gap: 1rem;
	grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.field { margin: 0; display: flex; flex-direction: column; gap: 0.35rem }
.field--full { grid-column: 1 / -1 }
.field label { font-family: var(--font-display); font-weight: 600; font-size: 0.92rem; color: var(--ink) }
.req { font-weight: 400; color: var(--muted); font-size: 0.85em }

.field input[type="text"],
.field input[type="tel"],
.field input[type="email"],
.field select,
.field textarea {
	width: 100%;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: #fff;
	border: 2px solid var(--line);
	border-radius: var(--radius-sm);
	padding: 0.7rem 0.85rem;
	min-height: 44px;
}
.field textarea { min-height: 7rem; resize: vertical }
.field input:focus, .field select:focus, .field textarea:focus { border-color: var(--accent); outline-offset: 1px }
.field input[aria-invalid="true"], .field textarea[aria-invalid="true"] { border-color: #B3261E }
.field__err { color: #B3261E; font-size: 0.87rem; font-weight: 600 }

.field--check { flex-direction: row; flex-wrap: wrap; align-items: flex-start; gap: 0.6rem }
.field--check input { margin-top: 0.3rem; width: 1.15rem; height: 1.15rem; flex: none; accent-color: var(--accent-ink) }
.field--check label { font-weight: 400; font-family: var(--font-body); font-size: 0.94rem; flex: 1 }
.field--check .field__err { flex: 1 1 100% }

.consent { margin-top: 1.3rem; padding-top: 1.1rem; border-top: 1px solid var(--line) }
.consent__note { font-size: 0.87rem; color: var(--muted); margin-bottom: 0.8rem }

.form__submit { margin: 1.4rem 0 0 }
.form__submit .btn { width: 100% }

/* The honeypot. Hidden from people, still present for a bot to fill in. */
.hp-wrap {
	position: absolute;
	left: -100vw;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

.notice-box {
	display: flex;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 1rem 1.2rem;
	border-radius: var(--radius-sm);
	margin-bottom: 1.3rem;
	font-size: 0.96rem;
}
.notice-box p { margin: 0 }
.notice-box--ok { background: #E8F4EC; border: 1px solid #B6DCC4; color: #14532D }
.notice-box--ok svg { color: #2E7D4F; font-size: 1.25em; margin-top: 0.15em }
.notice-box--err { background: #FDECEA; border: 1px solid #F3C0BB; color: #7F1D1D }

.contact-list { list-style: none; margin: 1.6rem 0 0; padding: 0; display: grid; gap: 0.7rem }
.contact-list li { display: flex; align-items: center; gap: 0.7rem }
.contact-list svg { color: var(--accent-ink); font-size: 1.15em }
.contact-list a { color: var(--ink); font-weight: 600; text-decoration: none; word-break: break-word }
.contact-list a:hover { color: var(--accent-ink); text-decoration: underline }

/* -------------------------------------------------------------------------
 * Closing call to action band
 * ---------------------------------------------------------------------- */

.cta {
	background: linear-gradient(105deg, var(--brand-3) 0%, var(--brand) 100%);
	background-size: cover;
	background-position: center;
	color: #fff;
}
.cta--photo { background-color: var(--brand) }
.cta__inner {
	padding-top: clamp(2.8rem, 5vw, 4.4rem);
	padding-bottom: clamp(2.8rem, 5vw, 4.4rem);
	text-align: center;
}
.cta__title { color: #fff; max-width: 44rem; margin-left: auto; margin-right: auto }
.cta__text { color: var(--on-brand); max-width: 42rem; margin-left: auto; margin-right: auto; margin-bottom: 1.9rem }
.cta__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; justify-content: center }

/* -------------------------------------------------------------------------
 * Articles and prose
 * ---------------------------------------------------------------------- */

.single__head { background: var(--cream); border-bottom: 1px solid var(--line) }
.single__head-inner {
	padding-top: clamp(2.4rem, 5vw, 3.8rem);
	padding-bottom: clamp(2.4rem, 5vw, 3.8rem);
}
.single__title, .single__date { max-width: 48rem }
.single__date { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.5rem }

.prose h2 { margin-top: 2.2rem }
.prose h3 { margin-top: 1.7rem }
.prose ul, .prose ol { padding-left: 1.3rem }
.prose li { margin-bottom: 0.4rem }
.prose a { font-weight: 600 }

.posts { display: grid; gap: 1.4rem }
.postcard {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--radius);
	padding: 1.6rem;
}
.postcard__date { color: var(--muted); font-size: 0.86rem; margin-bottom: 0.4rem }
.postcard__title { font-size: 1.35rem; margin-bottom: 0.5rem }
.postcard__title a { color: var(--ink); text-decoration: none }
.postcard__title a:hover { color: var(--accent-ink) }
.postcard__excerpt { color: var(--muted) }
.postcard__more { margin: 1.1rem 0 0 }

.postnav__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem }
.postnav a { font-weight: 600 }

.pagination { margin-top: 2.2rem }
.pagination .nav-links { display: flex; flex-wrap: wrap; gap: 0.4rem }
.pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding: 0 0.6rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	text-decoration: none;
	color: var(--ink);
	font-weight: 600;
}
.pagination .page-numbers.current { background: var(--brand); color: #fff; border-color: var(--brand) }

/* -------------------------------------------------------------------------
 * Footer
 * ---------------------------------------------------------------------- */

/* The main body of the footer is white, so an uploaded logo on a white
   background sits in it without a visible box around it. The bottom bar keeps
   the brand colour, which closes the page and holds the legal links. A top
   border gives the white footer an edge against a white section above it. */
.site-footer { background: var(--white); color: var(--muted); border-top: 1px solid var(--line) }
.site-footer__top {
	display: grid;
	gap: clamp(2rem, 4vw, 3rem);
	grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
	padding-top: clamp(3rem, 5vw, 4.4rem);
	padding-bottom: clamp(2.4rem, 4vw, 3.4rem);
}
.footer__about { font-size: 0.94rem; margin-bottom: 1.2rem }
.footer__title {
	font-size: 1rem;
	color: var(--ink);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.footer__list, .footer__contact, .footer__badges, .footer__social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.55rem;
}
.footer__list a, .footer__contact a {
	color: var(--ink);
	text-decoration: none;
	font-size: 0.94rem;
}
.footer__list a:hover, .footer__contact a:hover { color: var(--accent-ink); text-decoration: underline }
.footer__contact li { display: flex; align-items: flex-start; gap: 0.6rem; font-size: 0.94rem }
.footer__contact svg { color: var(--accent-ink); margin-top: 0.25em }
.footer__email a { word-break: break-word }
.footer__badges li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.9rem }
.footer__badges svg { color: var(--accent-ink) }
.footer__social { display: flex; gap: 0.7rem; margin-top: 1.2rem }
.footer__social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	border: 1px solid var(--line);
	color: var(--ink);
	font-size: 1.2rem;
}
.footer__social a:hover { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }

.site-footer__bottom { background: var(--brand); color: var(--on-brand) }
.footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	flex-wrap: wrap;
	padding-top: 1.2rem;
	padding-bottom: 1.2rem;
}
.footer__copy { margin: 0; font-size: 0.86rem }
.footer__legal { display: flex; align-items: center; gap: 1.1rem; flex-wrap: wrap }
.footer__legal-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 1.1rem;
	flex-wrap: wrap;
}
.footer__legal a, .pwc-cookie-open {
	color: var(--on-brand);
	font-size: 0.86rem;
	text-decoration: none;
}
.footer__legal a:hover, .pwc-cookie-open:hover { color: var(--accent-2); text-decoration: underline }

/* The Cookie settings control sits in the footer, not as a floating button. */
.pwc-cookie-open {
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
	font-family: inherit;
	cursor: pointer;
	min-height: 44px;
}

/* -------------------------------------------------------------------------
 * Sticky bottom bar. Hidden by default and switched on at the same width
 * that the header buttons disappear, so there is never a width with no
 * visible way to call.
 * ---------------------------------------------------------------------- */

/* Hidden at the top of the page, where the hero already carries a call button
   and a quote button, and slid up into view once those have scrolled away.
   Both states are declared here, outside the media query, so neither class
   falls back to a browser default at any width. */
.stickybar {
	display: none;
	transform: translateY(100%);
	visibility: hidden;
	transition: transform var(--speed) ease, visibility var(--speed) ease;
}
.stickybar--visible { transform: none; visibility: visible }
.stickybar__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	flex: 1;
	min-height: 56px;
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1rem;
	text-decoration: none;
}
.stickybar__btn--call { background: var(--accent); color: var(--on-accent) }
.stickybar__btn--quote { background: var(--brand); color: #fff }

/* -------------------------------------------------------------------------
 * Cookie consent banner
 * ---------------------------------------------------------------------- */

.pwc-cookie {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 900;
	background: var(--brand-3);
	color: var(--on-brand);
	box-shadow: 0 -0.5rem 1.9rem rgba(0, 0, 0, 0.3);
	max-height: 90vh;
	overflow-y: auto;
}
.pwc-cookie[hidden] { display: none }
.pwc-cookie__inner {
	display: flex;
	flex-direction: column;
	gap: 1rem;
	padding-top: clamp(1.1rem, 3vw, 1.6rem);
	padding-bottom: clamp(1.1rem, 3vw, 1.6rem);
}
.pwc-cookie__title {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 1.08rem;
	color: #fff;
	margin: 0 0 0.35rem;
}
.pwc-cookie__body { margin: 0; font-size: 0.92rem; line-height: 1.65; color: var(--on-brand-2) }
.pwc-cookie__body a { color: var(--accent-2); text-decoration: underline; margin-right: 0.8rem }

.pwc-cookie__prefs[hidden] { display: none }
.pwc-cookie__set { border: 0; margin: 0; padding: 0 }
.pwc-cookie__legend {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.92rem;
	color: #fff;
	padding: 0;
	margin-bottom: 0.7rem;
}
.pwc-cookie__row { display: flex; align-items: flex-start; gap: 0.7rem; margin-bottom: 0.7rem }
.pwc-cookie__row input {
	margin-top: 0.25rem;
	width: 1.15rem;
	height: 1.15rem;
	flex: none;
	accent-color: var(--accent);
}
.pwc-cookie__cat { display: block; font-weight: 700; color: #fff; font-size: 0.92rem }
.pwc-cookie__desc { display: block; font-size: 0.85rem; color: var(--on-brand-2) }

.pwc-cookie__actions { display: flex; gap: 0.6rem; flex-wrap: wrap }
.pwc-cookie__btn {
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 0.93rem;
	line-height: 1;
	min-height: 44px;
	padding: 0.8rem 1.4rem;
	border-radius: 999px;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background var(--speed), color var(--speed), border-color var(--speed);
}
.pwc-cookie__btn[hidden] { display: none }
.pwc-cookie__btn--accept { background: var(--accent); color: var(--on-accent); border-color: var(--accent) }
.pwc-cookie__btn--accept:hover { background: var(--accent-2); border-color: var(--accent-2) }
.pwc-cookie__btn--plain { background: #fff; color: var(--ink); border-color: #fff }
.pwc-cookie__btn--plain:hover { background: #EFE7E5; border-color: #EFE7E5 }
.pwc-cookie__btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.4) }
.pwc-cookie__btn--ghost:hover { background: rgba(255, 255, 255, 0.12) }

/* -------------------------------------------------------------------------
 * Breakpoints
 * ---------------------------------------------------------------------- */

@media (min-width: 30em) {
	.gallery { grid-template-columns: repeat(3, minmax(0, 1fr)) }
}

@media (min-width: 40em) {
	.topbar__msg { display: block }
	.gallery { grid-template-columns: repeat(4, minmax(0, 1fr)) }
	.split { grid-template-columns: 1fr 1fr }
	.form__submit .btn { width: auto }
	.postnav__list { grid-template-columns: 1fr 1fr }
}

@media (min-width: 62em) {
	.topbar__hours { display: flex }
	.gallery { grid-template-columns: repeat(6, minmax(0, 1fr)) }
	.split { grid-template-columns: 1.05fr 0.95fr }
	.section__head { margin-bottom: clamp(2rem, 4vw, 3rem) }
}

/* Below this width the desktop nav becomes the full screen menu, the header
   buttons go away and the sticky bar takes over. The two happen together on
   purpose, so there is never a width with no visible way to call. */
@media (max-width: 67.5em) {
	.nav-toggle { display: inline-flex }
	.header-cta { display: none }
	.stickybar {
		display: flex;
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 600;
		box-shadow: 0 -0.3rem 1.2rem rgba(0, 0, 0, 0.18);
	}
	body { padding-bottom: 56px }

	.primary-nav {
		display: none;
		position: fixed;
		inset: 0;
		z-index: 700;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		margin: 0;
		padding: 5.5rem var(--gutter) 6rem;
		background: var(--brand-3);
		overflow-y: auto;
	}
	#nav-toggle:checked ~ .primary-nav { display: flex }

	/* Freeze the page behind the open menu. Without this the page keeps
	   scrolling under the panel, so closing the menu leaves the visitor
	   somewhere they did not choose to be. Scoped to the widths where the
	   menu exists, and driven by the same checkbox that opens it, so it stays
	   pure CSS and cannot be left stuck on by a script that failed to load. */
	html:has(#nav-toggle:checked),
	body:has(#nav-toggle:checked) {
		overflow: hidden;
		overscroll-behavior: none;
	}

	.primary-nav__list { flex-direction: column; align-items: stretch; gap: 0 }
	.primary-nav a {
		white-space: normal;
		padding: 0.85rem 0;
		font-size: 1.12rem;
		color: #fff;
		border-bottom: 1px solid rgba(255, 255, 255, 0.12);
		border-radius: 0;
	}
	.primary-nav a:hover { background: transparent; color: var(--accent-2) }
	.primary-nav .current-menu-item > a,
	.primary-nav .current-menu-ancestor > a { color: var(--accent-2) }

	/* The nested submenu must go transparent, or light text lands on the
	   white desktop background and the panel looks empty. */
	.primary-nav .sub-menu {
		position: static;
		display: block;
		background: transparent;
		border: 0;
		box-shadow: none;
		padding: 0 0 0 1rem;
		min-width: 0;
	}
	.primary-nav .sub-menu a { font-size: 1rem; color: var(--on-brand-2) }


	#nav-toggle:checked ~ .nav-toggle { position: fixed; right: var(--gutter); top: 1rem; z-index: 800 }
	#nav-toggle:checked ~ .nav-toggle .nav-toggle__open { display: none }
	#nav-toggle:checked ~ .nav-toggle .nav-toggle__close { display: inline-flex }

	/* The banner sits on the bottom edge rather than above the sticky bar,
	   because the bar is hidden at the top of the page where the banner first
	   appears. The banner is stacked above the bar, so it covers it. */
	.pwc-cookie { bottom: 0 }
}

@media (max-width: 40em) {
	.topbar__inner { justify-content: center }
	.topbar__links { gap: 1rem; justify-content: center }
	.topbar__email { display: none }
	.site-logo { height: 2.4rem }
	.nav-toggle__text { display: none }
	.trust__inner { justify-content: center; text-align: center }
	.trust__list { justify-content: center }
	.footer__bar { justify-content: center; text-align: center }
	.footer__legal { justify-content: center }
	/* The list is itself a wrapping flex row, so centring its parent only
	   centres the block. Each wrapped line needs centring too, or the links
	   stay ragged left inside a centred box. */
	.footer__legal-list { justify-content: center }
	.pwc-cookie__actions .pwc-cookie__btn { flex: 1 1 auto }
}

/* -------------------------------------------------------------------------
 * Motion and print
 * ---------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto }
	*, *::before, *::after {
		animation-duration: 0.01ms;
		animation-iteration-count: 1;
		transition-duration: 0.01ms;
		scroll-behavior: auto;
	}
	.btn:hover, .card:hover, .areacard:hover { transform: none }
}

@media print {
	.topbar, .site-header, .stickybar, .pwc-cookie, .cta, #enquire { display: none }
	body { padding-bottom: 0; color: #000 }
	a { text-decoration: underline }
}