/*
 * Components — shared UI elements that appear across multiple templates.
 *
 *  - Contact form + standalone contact section (homepage + project single)
 *  - Testimonials carousel (homepage)
 *  - Content blocks (project single + service single — the alternating
 *    image/text rows, scrollable gallery, before/after comparison slider)
 *  - Archive hero (project archive + service archive)
 *
 * Loaded sitewide alongside foundation + layout.
 */

/* ──────────────────────────────────────────────────────────────────
 * Visually hidden — utility (used by testimonials carousel for sr-only labels)
 * ────────────────────────────────────────────────────────────────── */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ──────────────────────────────────────────────────────────────────
 * Standalone contact section
 * Used on the project single template — same visual language as the
 * homepage contact band, with its own white background, padding and
 * emblem watermark.
 * ────────────────────────────────────────────────────────────────── */
.contact-section--standalone {
	position: relative;
	overflow: hidden;
	background: var(--colour-white);
	padding: 6rem 0;
	border-top: 1px solid var(--colour-border);
}

.contact-section--standalone .contact-watermark {
	position: absolute;
	left: 0;
	top: 50%;
	width: min(72vw, 850px);
	margin-left: -23%;
	transform: translateY(-50%) rotate(11deg);
	transform-origin: center center;
	z-index: 0;
	pointer-events: none;
}

.contact-section--standalone .contact-watermark__parallax {
	will-change: transform;
}

.contact-section .container {
	position: relative;
	z-index: 1;
}

.contact-watermark__img {
	width: 100%;
	height: auto;
	display: block;
	filter: brightness(0);
	opacity: 0.055;
}

/* ──────────────────────────────────────────────────────────────────
 * Contact form
 * ────────────────────────────────────────────────────────────────── */
.contact-heading {
	text-align: center;
	margin-bottom: 3rem;
}

.contact-heading h2 {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--heritage-green);
	margin-bottom: 0.6rem;
}

.contact-heading p {
	font-size: 0.95rem;
	color: var(--colour-text-light);
	max-width: 480px;
	margin: 0 auto;
}

.contact-form {
	max-width: 680px;
	margin: 0 auto;
}

/* Submission result banners (rendered above the form after a POST). */
.contact-form__notice {
	max-width: 680px;
	margin: 0 auto 1.75rem;
	padding: 1rem 1.25rem;
	border-radius: 8px;
	border: 1px solid transparent;
	font-size: 0.95rem;
	line-height: 1.6;
}

.contact-form__notice--success {
	background: rgba(10, 75, 44, 0.06);
	border-color: rgba(10, 75, 44, 0.25);
	color: var(--heritage-green);
}

.contact-form__notice--error {
	background: rgba(179, 45, 46, 0.06);
	border-color: rgba(179, 45, 46, 0.3);
	color: #9c2427;
}

/* ──────────────────────────────────────────────────────────────────
 * Contact page — two-column split layout (intro + map | form)
 * Used by template-contact.php.
 * ────────────────────────────────────────────────────────────────── */
.contact-section--split {
	background: var(--colour-white);
	padding: 5rem 0;
	border-top: 1px solid var(--colour-border);
}

.contact-layout {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3.5rem;
	align-items: start;
}

.contact-layout__text {
	margin-bottom: 0;
}

/* Divider between the intro copy and the map. */
.contact-layout__rule {
	border: 0;
	border-top: 1px solid var(--colour-border);
	margin: 2.25rem 0;
}

/* In the split layout the heading + form fill their column (no centering). */
.contact-layout__form .contact-heading {
	text-align: left;
	margin-bottom: 1.75rem;
}

.contact-layout__form .contact-heading p {
	margin-left: 0;
}

.contact-layout__form .contact-form,
.contact-layout__form .contact-form__notice {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}

/* Google Map embed */
.contact-map {
	border-radius: 10px;
	overflow: hidden;
	border: 1px solid var(--colour-border);
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.06);
}

.contact-map__frame {
	display: block;
	width: 100%;
	height: 100%;
	min-height: 360px;
	border: 0;
}

/* Stack columns on tablets / phones */
@media (max-width: 900px) {
	.contact-layout {
		grid-template-columns: 1fr;
		gap: 2.5rem;
	}

	.contact-map__frame {
		min-height: 300px;
	}
}

.contact-form .form-row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.25rem;
}

.contact-form .form-field {
	margin-bottom: 1.25rem;
	display: flex;
	flex-direction: column;
}

.contact-form label {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.14em;
	color: var(--urban-grey);
	margin-bottom: 0.5rem;
}

.contact-form input[type="text"],
.contact-form input[type="email"],
.contact-form input[type="tel"],
.contact-form select,
.contact-form textarea {
	font-family: var(--font-body);
	font-size: 0.95rem;
	color: var(--colour-text);
	padding: 0.9rem 1.1rem;
	background: var(--colour-cream);
	border: 1px solid var(--colour-border);
	border-radius: 6px;
	transition: border-color 0.3s, background 0.3s, box-shadow 0.3s;
}

.contact-form textarea { resize: vertical; }
.contact-form select   { cursor: pointer; appearance: none; width: 100%; }

.contact-form input[type="tel"] { width: 100%; }

.contact-form input:focus,
.contact-form textarea:focus {
	outline: none;
	border-color: var(--heritage-green);
	background: var(--colour-white);
	box-shadow: 0 0 0 3px rgba(10, 75, 44, 0.08);
}

.contact-form .form-footer {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-top: 1.5rem;
	gap: 2rem;
	flex-wrap: wrap;
}

.contact-form button[type="submit"] {
	margin-left: 0;
}

.form-select-wrap {
	position: relative;
}

.form-select-wrap::after {
	content: '';
	position: absolute;
	right: 1.1rem;
	top: 50%;
	margin-top: -3px;
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid var(--urban-grey);
	pointer-events: none;
}

.field-required {
	color: var(--heritage-green);
	font-weight: 600;
}

/* Captcha — clean tick checkbox. */
.captcha {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	cursor: pointer;
	padding: 0.65rem 1rem;
	border: 1px solid var(--colour-border);
	border-radius: 6px;
	background: var(--colour-cream);
	transition: border-color 0.3s, background 0.3s;
}

.captcha:hover {
	border-color: var(--heritage-green);
}

.captcha input[type="checkbox"] {
	position: absolute;
	opacity: 0;
	pointer-events: none;
}

.captcha-box {
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--urban-grey);
	border-radius: 4px;
	background: var(--colour-white);
	position: relative;
	flex-shrink: 0;
	transition: background 0.25s, border-color 0.25s;
}

.captcha-box::after {
	content: '';
	position: absolute;
	left: 6px;
	top: 2px;
	width: 5px;
	height: 10px;
	border: solid var(--colour-white);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg) scale(0);
	transition: transform 0.25s ease;
}

.captcha input:checked ~ .captcha-box {
	background: var(--cleaning);
	border-color: var(--cleaning);
}

.captcha input:checked ~ .captcha-box::after {
	transform: rotate(45deg) scale(1);
}

.captcha-label {
	font-size: 0.85rem;
	font-weight: 500;
	color: var(--colour-text);
}

/* ──────────────────────────────────────────────────────────────────
 * Testimonials carousel (homepage)
 * ────────────────────────────────────────────────────────────────── */
.testimonials-section {
	position: relative;
	padding: 4.5rem 1.5rem 5rem;
	background: #e8e4dc;
	border-top: 1px solid var(--colour-border);
	border-bottom: 1px solid rgba(10, 75, 44, 0.08);
	overflow: hidden;
}


.testimonials-section__inner {
	position: relative;
	z-index: 1;
	max-width: 920px;
	margin: 0 auto;
	text-align: center;
}

.testimonials-carousel {
	position: relative;
	z-index: 1;
	min-height: min(14rem, 42vw);
	/* Grid-stack every slide in the same cell so the carousel height grows to
	 * the TALLEST testimonial — long quotes no longer get clipped. Slides are
	 * vertically centred, so a short quote sits mid-height rather than pinned to
	 * the top when a longer one sets the height. */
	display: grid;
	align-items: center;
}

/* Stacked slides — outer crossfade matches .hero-slide. All slides share one
 * grid cell; the inactive ones still occupy it (visibility:hidden), so the
 * container always reserves room for the longest quote. */
.testimonial-slide {
	margin: 0;
	padding: 0 0.5rem;
	border: 0;
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.85s ease, visibility 0.85s ease;
}

.testimonial-slide.is-active {
	opacity: 1;
	visibility: visible;
	z-index: 1;
}

.testimonial-slide:not(.is-active) {
	pointer-events: none;
}

/* Inner copy — same easing as hero cascade. */
.testimonial-slide .testimonial-slide__quote,
.testimonial-slide .testimonial-slide__cite {
	opacity: 0;
	transform: translateY(1rem);
	transition:
		opacity 0.48s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.52s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonial-slide.is-active:not(.testimonial-slide--exiting) .testimonial-slide__quote {
	transition-delay: 0.08s;
}

.testimonial-slide.is-active:not(.testimonial-slide--exiting) .testimonial-slide__cite {
	transition-delay: 0.18s;
}

.testimonial-slide.is-active:not(.testimonial-slide--exiting) .testimonial-slide__quote,
.testimonial-slide.is-active:not(.testimonial-slide--exiting) .testimonial-slide__cite {
	opacity: 1;
	transform: translateY(0);
}

/* First paint: no entrance animation (mirrors .hero-slide--static-first). */
.testimonial-slide.testimonial-slide--static-first.is-active:not(.testimonial-slide--exiting) .testimonial-slide__quote,
.testimonial-slide.testimonial-slide--static-first.is-active:not(.testimonial-slide--exiting) .testimonial-slide__cite {
	opacity: 1;
	transform: none;
	transition: none;
}

/* Exit — reverse cascade, same timing family as .hero-slide--exiting. */
.testimonial-slide.is-active.testimonial-slide--exiting .testimonial-slide__quote,
.testimonial-slide.is-active.testimonial-slide--exiting .testimonial-slide__cite {
	opacity: 0;
	transform: translateY(-0.75rem);
	transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

.testimonial-slide.is-active.testimonial-slide--exiting .testimonial-slide__quote {
	transition-delay: 0.24s;
}

.testimonial-slide.is-active.testimonial-slide--exiting .testimonial-slide__cite {
	transition-delay: 0.12s;
}

.testimonial-slide__quote {
	font-family: var(--font-quote);
	font-size: clamp(1.2rem, 2.2vw, 1.75rem);
	font-style: italic;
	font-weight: 300;
	line-height: 1.32;
	color: var(--heritage-green);
	letter-spacing: 0.02em;
	text-transform: none;
	margin: 0 auto 1.25rem;
	max-width: 52rem;
}

.testimonial-slide__cite {
	display: block;
	font-family: var(--font-body);
	font-size: 0.85rem;
	font-style: normal;
	color: var(--colour-text-light);
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.testimonials-pagination {
	display: flex;
	justify-content: center;
	gap: 0.55rem;
	margin-top: 2.25rem;
	flex-wrap: wrap;
	align-items: center;
}

/* Stacked emblem dots (smaller than hero 24px): dark silhouette → full
 * colour when active. */
.testimonials-pagination__dot {
	width: 24px;
	height: 24px;
	padding: 0;
	border: none;
	border-radius: 0;
	background: transparent;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials-pagination__dot-stack {
	position: relative;
	width: 24px;
	height: 24px;
	display: block;
}

.testimonials-pagination__dot-img {
	position: absolute;
	left: 0;
	top: 0;
	width: 24px;
	height: 24px;
	object-fit: contain;
	display: block;
	pointer-events: none;
}

/* Idle: dark mark on cream. */
.testimonials-pagination__dot-img--dark {
	filter: brightness(0);
	opacity: 0.4;
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Active / hover: full-colour emblem reads lighter. */
.testimonials-pagination__dot-img--light {
	opacity: 0;
	transition: opacity 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.testimonials-pagination__dot:hover .testimonials-pagination__dot-img--dark,
.testimonials-pagination__dot:focus-visible .testimonials-pagination__dot-img--dark,
.testimonials-pagination__dot.is-active .testimonials-pagination__dot-img--dark {
	opacity: 0;
}

.testimonials-pagination__dot:hover .testimonials-pagination__dot-img--light,
.testimonials-pagination__dot:focus-visible .testimonials-pagination__dot-img--light,
.testimonials-pagination__dot.is-active .testimonials-pagination__dot-img--light {
	opacity: 1;
}

.testimonials-pagination__dot.is-active {
	transform: scale(1.1);
}

.testimonials-pagination__dot:focus-visible {
	outline: 2px solid rgba(10, 75, 44, 0.4);
	outline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────────
 * Project content blocks
 * Shared between project single and service single (rendered by
 * stylesfacade_render_content_blocks() in inc/content-blocks.php).
 * ────────────────────────────────────────────────────────────────── */
.project-block {
	padding: 3rem 0;
	border-top: 1px solid var(--colour-border);
}

.project-block__title {
	font-size: 1.3rem;
	color: var(--heritage-green);
	margin-top: 0;
	margin-bottom: 1rem;
}

.project-block__inner {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 3rem;
	align-items: start;
}

/* Alternate orientation — every other image-bearing block flips visually
 * via grid `order` so the image moves to the right and the text to the
 * left. Source order stays image → text for screen-reader consistency. */
.project-block--reverse .project-block__image { order: 2; }
.project-block--reverse .project-block__text  { order: 1; }

.project-block__image {
	margin: 0; /* reset browser <figure> margin */
}

.project-block__image img {
	width: 100%;
	height: auto;
	display: block;
	border-radius: 4px;
}

.project-block__caption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--urban-grey, #6b6b6b);
	font-style: italic;
}

.project-block__text {
	font-size: 1rem;
	color: var(--colour-text);
	line-height: 1.8;
}

.project-block__text--full {
	max-width: 780px;
}

.project-block__text h2,
.project-block__text h3,
.project-block__text h4 {
	color: var(--heritage-green);
	margin-bottom: 0.75rem;
	margin-top: 1.5rem;
}

.project-block__text h2:first-child,
.project-block__text h3:first-child,
.project-block__text h4:first-child {
	margin-top: 0;
}

.project-block__text p {
	margin-bottom: 1rem;
}

.project-block__text ul,
.project-block__text ol {
	padding-left: 1.5rem;
	margin-bottom: 1rem;
}

.project-block__text li {
	margin-bottom: 0.4rem;
}

.project-block__text a {
	color: var(--heritage-green);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ──────────────────────────────────────────────────────────────────
 * Per-section service-colour accent
 *
 * A content section with a linked service colour gets a coloured rule
 * above its title. The colour is supplied inline as --sfs-row-accent on
 * the <section>, falling back to heritage green.
 * ────────────────────────────────────────────────────────────────── */
.project-block--accent .project-block__title::before {
	content: '';
	display: block;
	width: 52px;
	height: 4px;
	border-radius: 2px;
	margin-bottom: 0.9rem;
	background: var(--sfs-row-accent, var(--heritage-green));
}

/* ──────────────────────────────────────────────────────────────────
 * Per-section case-study callout
 *
 * A two-column card rendered beneath a content section that has a linked
 * case-study project: the project's featured image on the left, editorial
 * content on the right. When the section carries a service colour, that
 * colour is used as the accent detail (top bar + label + CTA).
 * ────────────────────────────────────────────────────────────────── */
.project-block__case-study {
	display: grid;
	/* The content row above is `1fr 1fr` with a 3rem gap, so its image edge
	 * sits at 50% + 1.5rem. This card has no internal gap, so we offset the
	 * columns by half the row gap to make the image edge line up exactly.
	 * Default (image in left cell): image spans 0 → 50% - 1.5rem. */
	grid-template-columns: calc(50% - 1.5rem) 1fr;
	gap: 0;
	margin-top: 2.25rem;
	background: var(--colour-white);
	border: 1px solid var(--colour-border);
	border-top: 4px solid var(--sfs-row-accent, var(--heritage-green));
	border-radius: 8px;
	overflow: hidden;
	text-decoration: none;
	box-shadow: 0 6px 28px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.35s ease, transform 0.35s ease;
}

.project-block__case-study:hover {
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.1);
	transform: translateY(-3px);
}

/* Image column — always uniform regardless of source dimensions */
.project-block__case-study-media {
	position: relative;
	overflow: hidden;
	min-height: 260px; /* floor for very short content columns */
}

.project-block__case-study-media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.95) contrast(1.02);
	transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}

.project-block__case-study:hover .project-block__case-study-media img {
	transform: scale(1.05);
}

/* Mirror the parent row's left/right flip so image + content always match.
 * Image now sits in the right cell → offset columns the other way so the
 * image edge aligns with the row image above (starts at 50% + 1.5rem). */
.project-block--reverse .project-block__case-study {
	grid-template-columns: calc(50% + 1.5rem) 1fr;
}
.project-block--reverse .project-block__case-study-media  { order: 2; }
.project-block--reverse .project-block__case-study-content { order: 1; }

.project-block__case-study-content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.7rem;
	padding: 2rem 2.25rem;
}

.project-block__case-study-label {
	font-family: var(--font-heading);
	font-size: 0.6rem;
	font-weight: 700;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--colour-white);
	background: var(--sfs-row-accent, var(--heritage-green));
	border-radius: 3px;
	padding: 0.32rem 0.6rem;
}

.project-block__case-study-title {
	font-family: var(--font-heading);
	font-size: clamp(1.2rem, 1.8vw, 1.5rem);
	font-weight: 700;
	color: var(--heritage-green);
	line-height: 1.25;
}

.project-block__case-study-blurb {
	font-size: 0.95rem;
	line-height: 1.65;
	color: var(--colour-text-light);
}

.project-block__case-study-cta {
	margin-top: 0.25rem;
	font-family: var(--font-heading);
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--heritage-green);
	white-space: nowrap;
}

.project-block__case-study-cta span {
	display: inline-block;
	transition: transform 0.3s ease;
}

.project-block__case-study:hover .project-block__case-study-cta span {
	transform: translateX(4px);
}

/* Stack image above content on narrow viewports */
@media (max-width: 680px) {
	.project-block__case-study,
	.project-block--reverse .project-block__case-study {
		grid-template-columns: 1fr;
	}

	/* Restore natural stacking order when flipped */
	.project-block--reverse .project-block__case-study-media,
	.project-block--reverse .project-block__case-study-content {
		order: unset;
	}

	/* With absolute-positioned img, the container needs an explicit height */
	.project-block__case-study-media {
		aspect-ratio: 16 / 9;
		min-height: unset;
	}

	.project-block__case-study-content {
		padding: 1.6rem 1.5rem;
	}
}

@media (prefers-reduced-motion: reduce) {
	.project-block__case-study,
	.project-block__case-study-media img,
	.project-block__case-study-cta span {
		transition: none;
	}
}

/* ──────────────────────────────────────────────────────────────────
 * Scrollable gallery carousel (per content block)
 * ────────────────────────────────────────────────────────────────── */
.sfs-block-gallery-carousel {
	position: relative;
	margin-top: 1rem;
}

.sfs-block-gallery-carousel__viewport {
	overflow: hidden;
	border-radius: 4px;
}

.sfs-block-gallery-carousel__track {
	display: flex;
	gap: 6px;
	will-change: transform;
}

/* Each item is 1/3 of the viewport so three are always visible. */
.sfs-block-gallery-carousel__item {
	flex: 0 0 calc(33.333% - 4px);
	min-width: 0;
}

.sfs-block-gallery-carousel__item img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	border-radius: 3px;
}

/* Arrow buttons — overlaid on the left and right edges. */
.sfs-block-gallery-carousel__btn {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2;
	width: 32px;
	height: 32px;
	border-radius: 50%;
	border: none;
	background: rgba(0, 0, 0, 0.5);
	color: #fff;
	font-size: 1rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 180ms ease, transform 180ms ease;
	padding: 0;
}
.sfs-block-gallery-carousel__btn:hover {
	background: rgba(0, 0, 0, 0.75);
	transform: translateY(-50%) scale(1.08);
}
.sfs-block-gallery-carousel__btn--prev { left: 4px; }
.sfs-block-gallery-carousel__btn--next { right: 4px; }

/* ──────────────────────────────────────────────────────────────────
 * Gallery Switcher — replaces the carousel when the "Scrollable
 * Gallery" option is enabled on a content block.
 * Layout: large main image → caption → scrollable thumbnail strip.
 * ────────────────────────────────────────────────────────────────── */
.sfs-block-gallery-switcher {
	width: 100%;
}

.sfs-block-gallery-switcher__main-img {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	object-position: center;
	border-radius: 4px;
	transition: opacity 0.25s ease;
}

/* Caption animates in/out smoothly so the thumbnail strip floats
 * up or down elastically rather than jumping. Height is driven by JS
 * (see smoothSwapCaption in inc/block-gallery.js) which pins the
 * current pixel height, swaps the text, then animates to the new
 * scrollHeight — the only reliable way to transition between two
 * different content heights. */
.sfs-block-gallery-switcher__caption {
	overflow: hidden;
	opacity: 1;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.5;
	color: var(--urban-grey, #6b7280);
	font-style: italic;
	transition: height 0.4s cubic-bezier(0.4, 0, 0.2, 1),
	            opacity 0.3s ease,
	            margin-top 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.sfs-block-gallery-switcher__caption.is-hidden {
	height: 0;
	opacity: 0;
	margin-top: 0;
}

/* Thumbnail strip — carousel-style, three across */
.sfs-block-gallery-switcher__strip-wrap {
	position: relative;
	margin-top: 0.75rem;
}

.sfs-block-gallery-switcher__strip {
	overflow: hidden;
	/* Establish a stacking context so will-change:transform on the inner
	 * track doesn't bleed above the absolutely-positioned nav buttons. */
	position: relative;
	z-index: 0;
}

.sfs-block-gallery-switcher__strip-track {
	display: flex;
	gap: 6px;
	will-change: transform;
	/* Transition timing is driven by JS (TRANSITION constant in
	 * inc/block-gallery.js) — set inline during navigation and cleared
	 * after the DOM-rotate step so subsequent rotations start clean. */
}

/* Three thumbnails always visible — same maths as the old carousel */
.sfs-block-gallery-switcher__thumb {
	flex: 0 0 calc(33.333% - 4px);
	aspect-ratio: 3 / 2;
	padding: 0;
	background: none;
	border: 2px solid transparent;
	border-radius: 3px;
	overflow: hidden;
	cursor: pointer;
	opacity: 0.6;
	transition: opacity 0.2s ease, border-color 0.2s ease;
}

.sfs-block-gallery-switcher__thumb:hover:not(.is-active) {
	opacity: 0.85;
	border-color: var(--colour-border, #d1d5db);
}

.sfs-block-gallery-switcher__thumb.is-active {
	opacity: 1;
	border-color: transparent; /* no border highlight — full opacity marks the active thumb */
}

/* No focus ring on mouse click; keep it for keyboard navigation (accessibility). */
.sfs-block-gallery-switcher__thumb:focus:not(:focus-visible) {
	outline: none;
}

.sfs-block-gallery-switcher__thumb img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	pointer-events: none;
}

/* Prev / next nav buttons — overlaid on the strip edges */
.sfs-block-gallery-switcher__nav {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 2; /* above the strip's z-index:0 stacking context */
	width: 28px;
	height: 28px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(0, 0, 0, .48);
	color: #fff;
	font-size: 14px;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	transition: background 0.2s ease, transform 0.2s ease;
}

.sfs-block-gallery-switcher__nav--prev { left: 4px; }
.sfs-block-gallery-switcher__nav--next { right: 4px; }

.sfs-block-gallery-switcher__nav:hover:not(:disabled) {
	background: rgba(0, 0, 0, .72);
	transform: translateY(-50%) scale(1.08);
}

.sfs-block-gallery-switcher__nav:disabled {
	opacity: 0.3;
	cursor: default;
}

/* ──────────────────────────────────────────────────────────────────
 * Before/After comparison slider (per content block)
 * ────────────────────────────────────────────────────────────────── */
.sfs-comparison {
	--sfs-pos: 50%;
	position: relative;
	width: 100%;
	max-width: 900px;
	margin: 0 auto;
	overflow: hidden;
	border-radius: 4px;
	background: #000;
	user-select: none;
	touch-action: pan-y;
	cursor: ew-resize;
	box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

/* The "after" layer sits in normal flow: its image's natural aspect ratio
 * determines the container's height. */
.sfs-comparison__layer--after {
	position: relative;
	display: block;
}

.sfs-comparison__layer--after .sfs-comparison__img {
	display: block;
	width: 100%;
	height: auto;
}

/* The "before" layer is absolutely positioned to fill the container, then
 * clipped from the right by the --sfs-pos custom property. */
.sfs-comparison__layer--before {
	position: absolute;
	inset: 0;
	overflow: hidden;
	clip-path: inset(0 calc(100% - var(--sfs-pos)) 0 0);
}

.sfs-comparison__layer--before .sfs-comparison__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sfs-comparison__img {
	-webkit-user-drag: none;
	pointer-events: none;
}

.sfs-comparison__label {
	position: absolute;
	top: 1rem;
	padding: 0.4rem 0.85rem;
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--colour-white);
	background: rgba(10, 75, 44, 0.85);
	border-radius: 2px;
	pointer-events: none;
}

.sfs-comparison__label--before { left: 1rem; }
.sfs-comparison__label--after  { right: 1rem; background: rgba(0, 0, 0, 0.7); }

.sfs-comparison__handle {
	position: absolute;
	top: 0;
	bottom: 0;
	left: var(--sfs-pos);
	width: 44px;
	margin-left: -22px;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: ew-resize;
	z-index: 2;
	touch-action: none;
}

.sfs-comparison__handle:focus { outline: none; }

.sfs-comparison__handle:focus-visible .sfs-comparison__handle-grip {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.95), 0 0 0 6px var(--heritage-green);
}

.sfs-comparison__handle-line {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 2px;
	margin-left: -1px;
	background: var(--colour-white);
	box-shadow: 0 0 8px rgba(0, 0, 0, 0.45);
}

.sfs-comparison__handle-grip {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 44px;
	height: 44px;
	margin-top: -22px;
	margin-left: -22px;
	border-radius: 50%;
	background: var(--colour-white);
	color: var(--heritage-green);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.3);
	transition: transform 0.2s ease;
}

.sfs-comparison__handle:hover .sfs-comparison__handle-grip,
.sfs-comparison.is-dragging .sfs-comparison__handle-grip {
	transform: scale(1.08);
}

/* Comparison block: spacing when an image appears above the slider
 * inside the same figure, and caption below */
.project-block__image:has(> img) .sfs-comparison--block,
.project-block__image:has(> figcaption) .sfs-comparison--block {
	margin-top: 1.75rem;
}

.project-block__caption--comparison {
	margin-top: 0.6rem;
	font-size: 0.875rem;
	color: var(--charcoal, #444);
	font-style: italic;
}

/* Admin: caption textarea below the two BA image pickers */
.sfs-block-comparison-caption-wrap {
	margin-top: 12px;
	padding-top: 12px;
	border-top: 1px solid #e0e0e0;
}

/* ──────────────────────────────────────────────────────────────────
 * Project card grid — shared by:
 *   - partials/project-cards-grid.php   (homepage "Selected projects",
 *                                        project single "Other projects",
 *                                        service single "Related projects")
 *   - archive-sfs_project.php           (filterable projects grid)
 *
 * The cream "paper" background on .projects-section is added by the
 * partial; the project archive places its own .projects-page-grid-wrap
 * around the same .projects-grid and skips the band background.
 * ────────────────────────────────────────────────────────────────── */
.projects-section {
	padding: 5rem 0;
	background-color: var(--colour-cream);
	/* Subtle woven grid — reads as paper / linen, stays below content contrast. */
	background-image:
		linear-gradient(rgba(10, 75, 44, 0.016) 1px, transparent 1px),
		linear-gradient(90deg, rgba(10, 75, 44, 0.012) 1px, transparent 1px);
	background-size: 20px 20px;
	background-position: 0 0;
}

/* Sectors archive: its grid section reuses .projects-page-grid-wrap, whose
 * padding + cream background live in project.css — which this template does
 * not load. Without it the cards ride up tight under the hero. Restore the
 * intended spacing here (scoped to the sectors archive) so it sits in keeping
 * with the Services and Projects archives. */
.sectors-archive .projects-page-grid-wrap {
	padding: 4.5rem 0 1.5rem;
	background-color: var(--colour-cream);
}

/* Consistent cards→button gap on the Projects & Services archives too — the
 * shared .projects-page-cta above supplies the balanced spacing below. */
.page-template-template-projects-archive .projects-page-grid-wrap,
.page-template-template-services-archive .services {
	padding-bottom: 1.5rem;
}

/* ──────────────────────────────────────────────────────────────────
 * Policies archive — a clean list of policy links (written pages open
 * their page; PDFs download). Used by template-policies-archive.php.
 * ────────────────────────────────────────────────────────────────── */
.policies-section {
	padding: 4.5rem 0 5rem;
	background-color: var(--colour-cream);
}

.policies-list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
	max-width: 760px;
	display: grid;
	gap: 0.85rem;
}

.policies-list__link {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.15rem 1.4rem;
	background: var(--colour-white);
	border: 1px solid var(--colour-border);
	border-radius: 8px;
	text-decoration: none;
	color: var(--colour-text);
	box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04);
	transition: box-shadow 0.3s ease, transform 0.3s ease, border-color 0.3s ease;
}

.policies-list__link:hover {
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	transform: translateY(-2px);
	border-color: var(--heritage-green);
}

.policies-list__icon {
	color: var(--heritage-green);
	font-size: 22px;
	width: 22px;
	height: 22px;
	flex-shrink: 0;
}

.policies-list__title {
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1.05rem;
	color: var(--heritage-green);
	flex: 1;
	line-height: 1.3;
}

.policies-list__action {
	flex-shrink: 0;
	font-family: var(--font-heading);
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--colour-text-light);
	white-space: nowrap;
}

.policies-list__action span {
	display: inline-block;
	transition: transform 0.25s ease;
}

.policies-list__link:hover .policies-list__action span {
	transform: translateX(3px);
}

.policies-list__link.is-pdf:hover .policies-list__action span {
	transform: translateY(2px);
}

@media (max-width: 600px) {
	.policies-list__link {
		flex-wrap: wrap;
		gap: 0.6rem 1rem;
	}
	.policies-list__action {
		margin-left: 42px;
	}
}

/* Footer: mark PDF policies with a small "PDF" tag. */
.footer-policies__nav a.is-pdf::after {
	content: "PDF";
	display: inline-block;
	margin-left: 0.4em;
	font-size: 0.6em;
	font-weight: 700;
	letter-spacing: 0.06em;
	vertical-align: middle;
	opacity: 0.55;
}

.projects-heading {
	text-align: center;
	margin-bottom: 3rem;
}

.projects-heading h2 {
	font-family: var(--font-heading);
	font-size: 2rem;
	color: var(--heritage-green);
	margin-bottom: 0.6rem;
}

.projects-heading p {
	font-size: 0.95rem;
	color: var(--colour-text-light);
	max-width: 600px;
	margin: 0 auto;
}

/* Default project card grid — CSS grid. Used by the homepage "Selected
 * projects", the project-single "Other projects" and the service-single
 * "Related projects" strips. The filterable archive overrides this below so
 * Isotope can position items absolutely. */
.projects-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 1.5rem;
}

/* Projects archive only — Isotope masonry. Isotope positions each item
 * absolutely, so the container is a plain block and items get explicit widths:
 * 3 cols × (33.333% − 16px) + 2 gutters × 24px = 100%. The sizer/gutter helper
 * divs only exist inside this grid. */
#projectsFilteredGrid {
	display: block;
	position: relative;
}

#projectsFilteredGrid .project-grid-sizer,
#projectsFilteredGrid .project-card {
	width: calc(33.333% - 16px);
}

#projectsFilteredGrid .project-grid-gutter {
	width: 24px;
}

#projectsFilteredGrid .project-card {
	margin-bottom: 1.5rem; /* vertical gap between masonry rows */
}

.projects-cta {
	text-align: center;
	margin-top: 2.5rem;
}

/* The card itself — full-bleed image with hover-revealed overlay. */
.project-card {
	position: relative;
	overflow: hidden;
	border-radius: 6px;
}

.project-card img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	transition: transform 0.6s ease;
	filter: saturate(0.92) contrast(1.02);
}

.project-card:hover img {
	transform: scale(1.07);
}

a.project-card--link {
	display: block;
	color: inherit;
	text-decoration: none;
}

a.project-card--link:focus-visible {
	outline: 2px solid var(--heritage-green);
	outline-offset: 4px;
	border-radius: 6px;
}

/* Overlay band at the bottom of each card — title (and optional meta line).
 * On hover the band fills with the service colour and the meta line slides up. */
.project-overlay {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.5rem 1.25rem;
	background: linear-gradient(to top, rgba(0, 0, 0, 0.55), transparent 65%);
	display: flex;
	flex-direction: column;
	align-items: center;
}

.project-overlay::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--service-colour, rgba(10, 75, 44, 0.97));
	opacity: 0;
	transition: opacity 0.45s ease;
	z-index: 0;
}

.project-card:hover .project-overlay::before { opacity: 1; }

/* Service-colour modifiers (taxonomy slug → overlay tint). */
.project-overlay--cleaning    { --service-colour: rgba(94, 177, 48, 0.97); }
.project-overlay--restoration { --service-colour: rgba(88, 73, 152, 0.97); }
.project-overlay--decorating  { --service-colour: rgba(80, 179, 216, 0.97); }
.project-overlay--survey      { --service-colour: rgba(233, 123, 50, 0.97); }
.project-overlay--heritage    { --service-colour: rgba(10, 75, 44, 0.97); }

.project-overlay h3,
.project-overlay p {
	position: relative;
	z-index: 1;
}

.project-overlay h3 {
	font-family: var(--font-heading);
	font-size: 1rem;
	font-weight: 600;
	color: var(--colour-white);
	margin-bottom: 0;
	text-align: center;
	transform: translateY(0);
	transition: transform 0.4s ease;
}

.project-card:hover .project-overlay h3 {
	transform: translateY(-5px);
}

.project-overlay p {
	font-size: 0.7rem;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.12em;
	color: rgba(255, 255, 255, 0.9);
	opacity: 0;
	transform: translateY(8px);
	transition: opacity 0.35s ease 0.05s, transform 0.35s ease 0.05s;
	margin-top: 0.3rem;
}

.project-card:hover .project-overlay p {
	opacity: 1;
	transform: translateY(0);
}

/* Heritage overlay keeps a slightly lighter tint on the subtitle. */
.project-overlay--heritage p {
	color: rgba(255, 255, 255, 0.85);
}

/* ──────────────────────────────────────────────────────────────────
 * Archive hero (shared by project + service archives)
 * ────────────────────────────────────────────────────────────────── */
.projects-page-hero {
	padding: 4rem 0 1.5rem;
	background: var(--colour-white);
	border-bottom: 1px solid var(--colour-border);
}

.projects-page-hero__eyebrow {
	font-family: var(--font-heading);
	font-size: 0.7rem;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--colour-text-light);
	margin-bottom: 0.75rem;
}

.projects-page-hero__title {
	font-family: var(--font-heading);
	font-size: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--heritage-green);
	margin-bottom: 1rem;
}

.projects-page-hero__lead {
	font-size: 1rem;
	color: var(--colour-text-light);
	max-width: none; /* full column width — matches eyebrow + title */
	line-height: 1.75;
}

.projects-page-empty {
	text-align: center;
	color: var(--colour-text-light);
	margin-top: 2rem;
	font-size: 0.95rem;
}

.projects-page-cta {
	text-align: center;
	/* Balanced breathing room either side of the button: ~4.5rem above (with the
	 * grid section's reduced bottom padding) and ~4.5rem below before the
	 * testimonials band. Shared by the Projects, Services & Sectors archives. */
	padding: 3rem 0 4.5rem;
	background: var(--colour-cream);
}

/* ──────────────────────────────────────────────────────────────────
 * Responsive
 * ────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
	/* Default grid → single column on mobile. */
	.projects-grid { grid-template-columns: 1fr; }

	/* Archive Isotope → 2-col on mobile: 2w + 1 gutter (24px) = 100% → w = 50% - 12px */
	#projectsFilteredGrid .project-grid-sizer,
	#projectsFilteredGrid .project-card { width: calc(50% - 12px); }

	.project-block__inner {
		grid-template-columns: 1fr;
		gap: 1.75rem;
	}

	.sfs-comparison__label {
		font-size: 0.65rem;
		padding: 0.3rem 0.7rem;
	}

	.sfs-comparison__handle-grip {
		width: 38px;
		height: 38px;
		margin-top: -19px;
		margin-left: -19px;
	}

	.contact-section--standalone {
		padding: 4rem 0;
	}

	.contact-section--standalone .contact-watermark {
		margin-left: -35%;
		width: min(110vw, 620px);
	}

	.contact-watermark__img {
		opacity: 0.045;
	}

	.contact-form .form-row { grid-template-columns: 1fr; gap: 0; }
	.contact-form .form-footer { flex-direction: column; align-items: stretch; }
}

@media (prefers-reduced-motion: reduce) {
	.sfs-comparison__handle-grip { transition: none; }

	.contact-watermark__parallax {
		transform: none !important;
		will-change: auto;
	}

	.testimonials-pagination__dot {
		transition-duration: 0.01ms;
	}
	.testimonials-pagination__dot-img--dark,
	.testimonials-pagination__dot-img--light {
		transition-duration: 0.01ms;
	}
	.testimonial-slide {
		transition: none !important;
	}
	.testimonial-slide.is-active {
		position: relative;
	}
	.testimonial-slide .testimonial-slide__quote,
	.testimonial-slide .testimonial-slide__cite {
		opacity: 1 !important;
		transform: none !important;
		transition: none !important;
	}
}

/* ══════════════════════════════════════════════════════════════════
 * FAQ accordion — shared by news posts and the FAQ page template.
 * Smooth open/close via grid-template-rows; plus↔minus icon morphs by
 * rotating the vertical bar onto the horizontal one.
 * ════════════════════════════════════════════════════════════════ */
.faq-accordion__title {
	font-family: var(--font-heading);
	font-size: 1.5rem;
	color: var(--heritage-green);
	margin: 0 0 1.25rem;
}

.faq-accordion__list {
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}

.faq-accordion__item {
	border: 1px solid var(--colour-border);
	border-radius: 6px;
	background: var(--colour-white);
}

.faq-accordion__heading {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

.faq-accordion__trigger {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	margin: 0;
	padding: 1.05rem 1.25rem;
	background: none;
	border: 0;
	cursor: pointer;
	text-align: left;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.4;
	color: var(--heritage-green);
}

.faq-accordion__trigger:hover { color: var(--heritage-green-deep); }
.faq-accordion__trigger:focus-visible {
	outline: 2px solid var(--heritage-green);
	outline-offset: -2px;
	border-radius: 6px;
}

.faq-accordion__q { flex: 1; }

/* Plus / minus icon built from two bars. */
.faq-accordion__icon {
	position: relative;
	flex: 0 0 18px;
	width: 18px;
	height: 18px;
}

.faq-accordion__icon::before,
.faq-accordion__icon::after {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	background: currentColor;
	border-radius: 2px;
}

.faq-accordion__icon::before {           /* horizontal bar — always present */
	width: 14px;
	height: 2px;
	transform: translate(-50%, -50%);
}

.faq-accordion__icon::after {            /* vertical bar — rotates away on open */
	width: 2px;
	height: 14px;
	transform: translate(-50%, -50%) rotate(0deg);
	transition: transform 0.35s ease;
}

.faq-accordion__item.is-open .faq-accordion__icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

/* Smoothly animated panel height. */
.faq-accordion__panel {
	display: grid;
	grid-template-rows: 0fr;
	transition: grid-template-rows 0.35s ease;
}

.faq-accordion__item.is-open .faq-accordion__panel {
	grid-template-rows: 1fr;
}

.faq-accordion__inner { overflow: hidden; }

.faq-accordion__a {
	padding: 0 1.25rem 1.15rem;
	line-height: 1.7;
	color: var(--colour-text);
}

.faq-accordion__a p { margin: 0 0 0.75rem; }
.faq-accordion__a p:last-child { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.faq-accordion__panel,
	.faq-accordion__icon::after { transition: none; }
}

/* ── Content-block video embed ─────────────────────────────────────
 * Optional YouTube embed rendered at the bottom of a content section.
 * Responsive 16:9 frame that fills the column (or the container in the
 * full-width tiled-strip layout). */
.sfs-block-video {
	margin-top: 1.75rem;
}
.project-block__text .sfs-block-video {
	margin-top: 1.5rem;
}
.sfs-block-video__frame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	background: #000;
	border-radius: 4px;
	overflow: hidden;
}
.sfs-block-video__frame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* ──────────────────────────────────────────────────────────────────
 * Consent tick on the contact form (GDPR). Sits directly above the
 * submit button; the label is clickable across its whole width.
 * ────────────────────────────────────────────────────────────────── */
.form-consent {
	margin: 0 0 1.25rem;
}

.form-consent label {
	display: flex;
	align-items: flex-start;
	gap: 0.65rem;
	cursor: pointer;
	font-size: 0.8rem;
	line-height: 1.5;
	color: var(--colour-text-light);
}

.form-consent input[type="checkbox"] {
	flex: 0 0 auto;
	width: 16px;
	height: 16px;
	margin: 0.1rem 0 0;
	accent-color: var(--heritage-green);
	cursor: pointer;
}

.form-consent a {
	color: var(--heritage-green);
	text-decoration: underline;
}

.form-consent a:hover {
	color: var(--heritage-green-deep);
}