/*
 * Southfield Core: Area page design system.
 *
 * BRAND, extracted from the site's own assets:
 *   charcoal #323232, gold #bc7c04, white. The orange, magenta and cyan in the
 *   Elementor data are widget defaults, not brand: they occur in identical
 *   triplets, which is the tell.
 *
 * WHY THE PREVIOUS VERSION READ AS A DOCUMENT
 * It used a 13rem sticky label rail inside a 71rem shell. Rail plus gap took
 * 336px, so 30 percent of the container was structurally blank on all eleven
 * sections, and at the exact breakpoint where the rail appeared the H2 dropped
 * to 17px muted grey. "Huge empty white areas", "typography too small" and
 * "confusing hierarchy" were one CSS defect, not three. The rail is gone.
 * Replaced by a 12 column grid at 1500px, matching the Elementor header
 * container so the H1 aligns with the logo.
 *
 * CONTRAST, computed not guessed. Four failures in the previous version:
 *   white on gold          3.49:1  FAIL  ->  #1c1c1c on gold      4.89:1
 *   #767c84 body meta      4.21:1  FAIL  ->  #6b6b6b             5.33:1
 *   gold text on white     3.49:1  FAIL  ->  #9a6304             5.05:1
 *   gold text on charcoal  3.68:1  FAIL  ->  #d9922a             4.94:1
 * Brand gold is untouched as a fill and rule colour. It cannot carry body text.
 *
 * FONT. The spec called for self hosted Archivo. No woff2 is present in the
 * repository, so this uses a tuned system stack with tighter tracking on
 * display sizes. Swapping in Archivo later is one @font-face plus one token.
 * Worth knowing: the site already pulls six remote Google Font stylesheets
 * (Ubuntu across seven subsets, Roboto, Roboto Slab, Ramabhadra, Poppins,
 * Unbounded), so self hosting one family and dequeuing those six would make the
 * site faster, not slower.
 *
 * ACCENT BUDGET: no more than three gold occurrences visible in one viewport.
 * EYEBROW BUDGET: four uppercase labels on the whole page. More reads cluttered.
 */

.sfc-page {
	/* Brand */
	--char: #323232;
	--char-deep: #232323;
	--char-raise: #3d3d3d;
	--gold: #bc7c04;
	--gold-bright: #d9922a;
	--gold-ink: #9a6304;

	/* Text */
	--t1: #1d1d1d;
	--t2: #4a4a4a;
	--t3: #6b6b6b;
	--on-dark-1: #ffffff;
	--on-dark-2: rgba(255, 255, 255, 0.74);
	--on-dark-3: rgba(255, 255, 255, 0.55);

	/* Surfaces and lines */
	--s0: #ffffff;
	--s1: #faf8f5;
	--s2: #f2eee7;
	--line1: #e4dfd6;
	--line2: #cfc8bb;
	--line-dark: rgba(255, 255, 255, 0.14);
	--line-dark-2: rgba(255, 255, 255, 0.24);

	--sh2: 0 2px 4px rgba(28, 28, 28, 0.05), 0 18px 40px -18px rgba(28, 28, 28, 0.22);

	/* Layout */
	--page: 93.75rem;
	--measure: 36rem;
	--gut: 1.5rem;

	/* Type */
	--font: "Segoe UI Variable Display", "Segoe UI", -apple-system, BlinkMacSystemFont,
		"Helvetica Neue", Arial, sans-serif;
	--fs-h1: clamp(2.5rem, 1.6rem + 4.4vw, 4.75rem);
	--fs-h2: clamp(1.875rem, 1.35rem + 2.2vw, 3rem);
	--fs-h3: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem);
	--fs-lead: clamp(1.25rem, 1.05rem + 0.85vw, 1.625rem);
	--fs-body: clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);
	--fs-small: 0.9375rem;
	--fs-label: 0.8125rem;
	--fs-micro: 0.75rem;
	--fs-figure: clamp(1.625rem, 1.2rem + 1.3vw, 2.125rem);
	--fs-quote: clamp(1.375rem, 1.1rem + 1.5vw, 2rem);

	font-family: var(--font);
	font-size: var(--fs-body);
	line-height: 1.65;
	color: var(--t2);
	-webkit-font-smoothing: antialiased;
	overflow-x: clip;
}

.sfc-page :where(h1, h2, h3) {
	color: var(--t1);
	font-family: var(--font);
	text-wrap: balance;
	margin: 0;
}

.sfc-page h1 {
	font-size: var(--fs-h1);
	line-height: 1.02;
	letter-spacing: -0.032em;
	font-weight: 700;
}

.sfc-page h2 {
	font-size: var(--fs-h2);
	line-height: 1.08;
	letter-spacing: -0.024em;
	font-weight: 700;
}

.sfc-page h3 {
	font-size: var(--fs-h3);
	line-height: 1.2;
	letter-spacing: -0.012em;
	font-weight: 600;
}

.sfc-page p {
	margin: 0 0 1.1em;
}

.sfc-page p:last-child {
	margin-bottom: 0;
}

.sfc-page a {
	color: var(--gold-ink);
}

/* Container and 12 column grid */

.sfc-in {
	max-width: var(--page);
	margin-inline: auto;
	padding-inline: 1.25rem;
}

@media (min-width: 48rem) {
	.sfc-in {
		padding-inline: 2rem;
	}
}

@media (min-width: 64rem) {
	.sfc-in {
		padding-inline: 2.5rem;
	}
}

@media (min-width: 90rem) {
	.sfc-in {
		padding-inline: 3rem;
	}
}

.sfc-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gut);
}

@media (min-width: 48rem) {
	.sfc-grid {
		grid-template-columns: repeat(8, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.sfc-grid {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

@media (min-width: 90rem) {
	.sfc-grid {
		gap: 2rem;
	}
}

/* Section rhythm. Padding derived from the heading, never larger than 2.2x. */

.sfc-sec {
	padding-block: clamp(3rem, 5.2vw, 6.5rem);
}

.sfc-sec--dark {
	background: var(--char-deep);
	color: var(--on-dark-2);
	padding-block: clamp(3.5rem, 6.4vw, 8rem);
}

.sfc-sec--dark :where(h2, h3) {
	color: var(--on-dark-1);
}

.sfc-sec--tint {
	background: var(--s1);
	border-block: 1px solid var(--line1);
}

.sfc-head {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.sfc-head {
		grid-column: 1 / 9;
	}
}

.sfc-head p {
	font-size: var(--fs-lead);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--t2);
	max-width: 34rem;
	margin: 0.875rem 0 0;
}

.sfc-sec--dark .sfc-head p {
	color: var(--on-dark-2);
}

.sfc-label {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--gold-ink);
	margin-bottom: 0.75rem;
}

.sfc-sec--dark .sfc-label {
	color: var(--gold-bright);
}

.sfc-label::before {
	content: "";
	width: 1.75rem;
	height: 2px;
	background: currentColor;
	flex: none;
}

.sfc-prose {
	max-width: var(--measure);
}

.sfc-prose > :last-child {
	margin-bottom: 0;
}

.sfc-prose h3 {
	margin: 1.75rem 0 0.5rem;
}

.sfc-prose strong {
	color: var(--t1);
	font-weight: 600;
}

/* ============================================================
 * Buttons. No shadow, no transform. Buttons that move are the tell.
 * ========================================================= */

.sfc-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 3rem;
	padding: 0 1.5rem;
	border: 1px solid transparent;
	border-radius: 2px;
	font: 600 0.8125rem/1 var(--font);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition: background-color 140ms linear, color 140ms linear, border-color 140ms linear;
}

.sfc-btn--lg {
	min-height: 3.5rem;
	padding: 0 2rem;
	font-size: 0.875rem;
}

/* Near black on brand gold: 4.89:1. White on gold was 3.49:1 and failed. */
.sfc-btn--gold {
	background: var(--gold);
	border-color: var(--gold);
	color: #1c1c1c;
}

.sfc-btn--gold:hover,
.sfc-btn--gold:focus-visible {
	background: var(--gold-bright);
	border-color: var(--gold-bright);
	color: #1c1c1c;
}

.sfc-btn--dark {
	background: var(--char-deep);
	border-color: var(--char-deep);
	color: #fff;
}

.sfc-btn--dark:hover,
.sfc-btn--dark:focus-visible {
	background: var(--gold);
	border-color: var(--gold);
	color: #1c1c1c;
}

.sfc-btn--ghost {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.5);
	color: #fff;
}

.sfc-btn--ghost:hover,
.sfc-btn--ghost:focus-visible {
	background: #fff;
	border-color: #fff;
	color: #1c1c1c;
}

.sfc-btn--line {
	background: transparent;
	border-color: var(--char);
	color: var(--t1);
}

.sfc-btn--line:hover,
.sfc-btn--line:focus-visible {
	background: var(--char-deep);
	border-color: var(--char-deep);
	color: #fff;
}

.sfc-page :focus-visible {
	outline: 3px solid var(--char);
	outline-offset: 2px;
}

.sfc-sec--dark :focus-visible,
.sfc-sticky :focus-visible {
	outline-color: var(--gold-bright);
}

.sfc-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

/* ============================================================
 * Breadcrumb
 * ========================================================= */

/* sfc_breadcrumbs() emits class "sfc-breadcrumb". These rules only ever named
   "sfc-crumb", so the trail has been rendering at full body size and full body
   colour on every Area page. Both names are matched rather than renaming one,
   because the markup class is the one in the PHP and the shorthand may exist in
   saved Elementor content. */
.sfc-crumb,
.sfc-breadcrumb {
	font-size: var(--fs-micro);
	color: var(--t3);
	padding-top: 1.25rem;
}

.sfc-crumb a,
.sfc-breadcrumb a {
	color: var(--t3);
	text-decoration: none;
}

.sfc-crumb a:hover,
.sfc-breadcrumb a:hover {
	color: var(--gold-ink);
}

/* ============================================================
 * Introduction: text plus a portrait photo that bleeds right
 * ========================================================= */

.sfc-intro__text {
	grid-column: 1 / -1;
}

.sfc-intro__fig {
	grid-column: 1 / -1;
	margin: 0;
	position: relative;
}

@media (min-width: 64rem) {
	.sfc-intro__text {
		grid-column: 1 / 7;
	}

	.sfc-intro__fig {
		grid-column: 8 / -1;
	}
}

.sfc-intro__fig img {
	width: 100%;
	height: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.1);
	filter: saturate(0.9) contrast(1.05);
}

@media (min-width: 64rem) {
	.sfc-intro__fig img {
		aspect-ratio: 4 / 5;
	}
}

.sfc-cap {
	font-size: var(--fs-micro);
	color: var(--t3);
	margin-top: 0.625rem;
}

/* ============================================================
 * Why choose: four static cards with outlined numerals
 * ========================================================= */

.sfc-why {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(1, minmax(0, 1fr));
	gap: var(--gut);
	counter-reset: why;
}

@media (min-width: 40rem) {
	.sfc-why {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.sfc-why {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

/* Not links, so deliberately no hover lift. Faking interactivity is a tell. */
.sfc-why__card {
	background: var(--s0);
	border: 1px solid var(--line1);
	border-radius: 3px;
	padding: clamp(1.5rem, 2.2vw, 2.25rem);
	counter-increment: why;
}

.sfc-why__card::before {
	content: counter(why, decimal-leading-zero);
	display: block;
	font-size: clamp(2.75rem, 4vw, 4rem);
	font-weight: 700;
	line-height: 0.9;
	letter-spacing: -0.04em;
	margin-bottom: 0.75rem;
	color: #e3d3ae;
	-webkit-text-stroke: 1px var(--gold);
	-webkit-text-fill-color: transparent;
}

.sfc-why__card h3 {
	margin-bottom: 0.5rem;
}

.sfc-why__card p {
	font-size: 1.0625rem;
	color: var(--t2);
	max-width: 34ch;
}

/* ============================================================
 * Services: two photo features plus a hairline table
 * ========================================================= */

.sfc-feat {
	grid-column: 1 / -1;
	display: grid;
	gap: var(--gut);
}

@media (min-width: 64rem) {
	.sfc-feat {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

.sfc-feat__card {
	display: flex;
	flex-direction: column;
	background: var(--s0);
	border: 1px solid var(--line1);
	border-radius: 3px;
	overflow: hidden;
	text-decoration: none;
	position: relative;
	transition: box-shadow 180ms cubic-bezier(0.2, 0, 0, 1),
		transform 180ms cubic-bezier(0.2, 0, 0, 1), border-color 180ms linear;
}

.sfc-feat__card::before {
	content: "";
	position: absolute;
	inset-inline: 0;
	top: 0;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 260ms cubic-bezier(0.2, 0, 0, 1);
	z-index: 2;
}

.sfc-feat__card:hover,
.sfc-feat__card:focus-visible {
	transform: translateY(-3px);
	box-shadow: var(--sh2);
	border-color: var(--line2);
}

.sfc-feat__card:hover::before,
.sfc-feat__card:focus-visible::before {
	transform: scaleX(1);
}

.sfc-feat__img {
	aspect-ratio: 3 / 2;
	overflow: hidden;
}

.sfc-feat__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9) contrast(1.05);
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sfc-feat__card:hover .sfc-feat__img img {
	transform: scale(1.035);
}

.sfc-feat__body {
	padding: clamp(1.25rem, 2vw, 1.75rem);
}

.sfc-feat__body h3 {
	font-size: 1.375rem;
	color: var(--t1);
	margin-bottom: 0.375rem;
}

.sfc-feat__body p {
	font-size: 1.0625rem;
	color: var(--t2);
	margin-bottom: 0.75rem;
}

.sfc-more {
	font-size: var(--fs-label);
	font-weight: 600;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--gold-ink);
}

/* Hairline table: 1px gap over a line colour is the cheapest way to make
   ten items read as organised rather than scattered. */
.sfc-tiles {
	grid-column: 1 / -1;
	margin-top: 2rem;
	display: grid;
	grid-template-columns: 1fr;
	gap: 1px;
	background: var(--line1);
	border: 1px solid var(--line1);
}

@media (min-width: 40rem) {
	.sfc-tiles {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 64rem) {
	.sfc-tiles {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

.sfc-tile {
	background: var(--s0);
	padding: 1.25rem 1.375rem;
	display: flex;
	align-items: center;
	gap: 0.875rem;
	text-decoration: none;
	min-height: 5.25rem;
	position: relative;
	transition: background-color 160ms linear, box-shadow 160ms linear;
}

.sfc-tile:hover,
.sfc-tile:focus-visible {
	background: var(--s1);
	box-shadow: inset 2px 0 0 var(--gold);
}

.sfc-tile__ico {
	width: 1.375rem;
	height: 1.375rem;
	color: var(--gold);
	flex: none;
}

.sfc-tile__txt {
	min-width: 0;
	flex: 1 1 auto;
}

.sfc-tile__name {
	display: block;
	font-size: 1.0625rem;
	font-weight: 600;
	color: var(--t1);
	line-height: 1.25;
}

.sfc-tile__sub {
	display: block;
	font-size: 0.8125rem;
	color: var(--t3);
	margin-top: 0.1875rem;
	line-height: 1.35;
}

.sfc-tile__arrow {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--line2);
	flex: none;
	transition: color 160ms linear, transform 160ms linear;
}

.sfc-tile:hover .sfc-tile__arrow {
	color: var(--gold);
	transform: translateX(2px);
}


/* ============================================================
 * Gallery mosaic on charcoal. A small mat plus an inset hairline is
 * what turns a phone snap into a plate.
 * ========================================================= */

.sfc-mosaic {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 0.5rem;
	grid-auto-rows: clamp(6rem, 26vw, 9rem);
}

@media (min-width: 48rem) {
	.sfc-mosaic {
		grid-template-columns: repeat(6, minmax(0, 1fr));
		grid-auto-rows: clamp(8rem, 12vw, 13rem);
	}
}

@media (min-width: 64rem) {
	.sfc-mosaic {
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}
}

.sfc-mosaic figure {
	margin: 0;
	overflow: hidden;
	position: relative;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
	background: var(--char-raise);
}

.sfc-mosaic img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: saturate(0.9) contrast(1.05) brightness(0.97);
	transition: transform 700ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.sfc-mosaic figure:hover img {
	transform: scale(1.035);
}

/* Lead spans 2x2 on mobile, 4x2 at tablet, 6x2 at desktop. Every row fills. */
.sfc-mosaic > *:nth-child(1) {
	grid-column: span 2;
	grid-row: span 2;
}

@media (min-width: 48rem) {
	.sfc-mosaic > *:nth-child(1) {
		grid-column: span 4;
	}

	.sfc-mosaic > *:nth-child(2),
	.sfc-mosaic > *:nth-child(3) {
		grid-column: span 2;
	}

	.sfc-mosaic > *:nth-child(4),
	.sfc-mosaic > *:nth-child(5) {
		grid-column: span 3;
	}

	.sfc-mosaic > *:nth-child(6) {
		grid-column: span 6;
	}
}

@media (min-width: 64rem) {
	.sfc-mosaic > *:nth-child(1) {
		grid-column: span 6;
	}

	.sfc-mosaic > *:nth-child(2),
	.sfc-mosaic > *:nth-child(3) {
		grid-column: span 3;
	}

	.sfc-mosaic > *:nth-child(4),
	.sfc-mosaic > *:nth-child(5) {
		grid-column: span 3;
	}

	.sfc-mosaic > *:nth-child(6) {
		grid-column: span 6;
	}
}

.sfc-gal__foot {
	grid-column: 1 / -1;
	margin-top: 2rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1rem 2rem;
	align-items: center;
	justify-content: space-between;
}

.sfc-gal__note {
	font-size: var(--fs-micro);
	color: var(--on-dark-3);
	max-width: 44ch;
	margin: 0;
}

/* ============================================================
 * Local area: charcoal panel plus photo
 * ========================================================= */

.sfc-local__panel {
	grid-column: 1 / -1;
	background: var(--char);
	border-radius: 3px;
	padding: clamp(1.75rem, 3vw, 2.5rem);
	color: var(--on-dark-2);
}

.sfc-local__fig {
	grid-column: 1 / -1;
	margin: 0;
}

@media (min-width: 64rem) {
	.sfc-local__panel {
		grid-column: 1 / 7;
	}

	.sfc-local__fig {
		grid-column: 7 / -1;
	}
}

.sfc-local__panel h2 {
	color: #fff;
	font-size: clamp(1.5rem, 2vw, 2rem);
	margin-bottom: 1rem;
}

.sfc-local__fig img {
	width: 100%;
	height: 100%;
	min-height: 16rem;
	object-fit: cover;
	object-position: 42% 58%;
	display: block;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.1);
	filter: saturate(0.9) contrast(1.05);
}

.sfc-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4375rem;
	list-style: none;
	margin: 0;
	padding: 0;
}

.sfc-chips li {
	font-size: var(--fs-small);
	font-weight: 500;
	padding: 0.4375rem 0.75rem;
	border: 1px solid var(--line-dark-2);
	border-radius: 2px;
	background: rgba(255, 255, 255, 0.04);
	color: rgba(255, 255, 255, 0.92);
}

.sfc-facts {
	margin: 1.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line-dark);
	display: grid;
	gap: 0.625rem;
	font-size: var(--fs-small);
}

.sfc-facts > div {
	display: grid;
	grid-template-columns: minmax(0, 9rem) minmax(0, 1fr);
	gap: 1rem;
}

.sfc-facts dt {
	color: var(--on-dark-3);
}

.sfc-facts dd {
	margin: 0;
	color: #fff;
	font-variant-numeric: tabular-nums;
}

.sfc-facts a {
	color: var(--gold-bright);
}

/* ============================================================
 * Accordion: rule separated rows, not a stack of cards
 * ========================================================= */

.sfc-acc {
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.sfc-acc {
		grid-column: 6 / -1;
	}

	.sfc-acc__head {
		grid-column: 1 / 5;
	}
}

.sfc-acc details {
	border-top: 1px solid var(--line1);
}

.sfc-acc details:last-of-type {
	border-bottom: 1px solid var(--line1);
}

.sfc-acc summary {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 1.5rem;
	gap: 1.5rem;
	align-items: center;
	padding-block: 1.375rem;
	cursor: pointer;
	list-style: none;
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	font-weight: 600;
	color: var(--t1);
	transition: color 160ms linear;
}

.sfc-acc summary::-webkit-details-marker {
	display: none;
}

.sfc-acc summary:hover {
	color: var(--gold-ink);
}

.sfc-acc__mark {
	position: relative;
	width: 0.875rem;
	height: 0.875rem;
	justify-self: end;
}

.sfc-acc__mark::before,
.sfc-acc__mark::after {
	content: "";
	position: absolute;
	background: var(--gold);
	inset-block-start: 50%;
	inset-inline-start: 0;
	width: 100%;
	height: 1px;
}

.sfc-acc__mark::after {
	transform: rotate(90deg);
	transition: transform 200ms ease-out, opacity 200ms ease-out;
}

.sfc-acc details[open] .sfc-acc__mark::after {
	transform: rotate(0deg);
	opacity: 0;
}

.sfc-acc__body {
	padding-bottom: 1.5rem;
	max-width: var(--measure);
}

.sfc-acc__body > :last-child {
	margin-bottom: 0;
}

/* ============================================================
 * Final CTA: dark, photo backed, with a contact card
 * ========================================================= */

.sfc-final {
	position: relative;
	background: var(--char-deep);
	border-top: 3px solid var(--gold);
	overflow: hidden;
}

.sfc-final__bg {
	position: absolute;
	inset: 0;
	margin: 0;
}

.sfc-final__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	opacity: 0.2;
	filter: grayscale(0.4) contrast(1.05);
}

.sfc-final__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient(120% 100% at 20% 100%, rgba(26, 26, 26, 0.55), rgba(26, 26, 26, 0.92));
}

.sfc-final__in {
	position: relative;
	padding-block: clamp(4rem, 7vw, 9rem);
}

.sfc-final__text {
	grid-column: 1 / -1;
}

.sfc-final__card {
	grid-column: 1 / -1;
}

@media (min-width: 64rem) {
	.sfc-final__text {
		grid-column: 1 / 8;
	}

	.sfc-final__card {
		grid-column: 9 / -1;
		align-self: center;
	}
}

.sfc-final h2 {
	color: #fff;
	font-size: clamp(2rem, 1.5rem + 2.4vw, 3.25rem);
	max-width: 22ch;
}

/* Two selectors deliberately. As a single class this lost the specificity tie
   with `.sfc-page p { margin: 0 0 1.1em }` and the whole margin was discarded,
   so the note sat hard against the H2 and the buttons sat hard against it. */
.sfc-final .sfc-final__note {
	color: var(--on-dark-2);
	max-width: 46ch;
	margin: 1.25rem 0 2rem;
}

.sfc-card-dark {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid rgba(255, 255, 255, 0.12);
	border-radius: 3px;
	padding: clamp(1.5rem, 2.4vw, 2rem);
}

.sfc-card-dark dt {
	font-size: var(--fs-label);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--on-dark-3);
}

.sfc-card-dark dd {
	margin: 0.25rem 0 1.25rem;
	color: #fff;
	font-size: 1.25rem;
	font-weight: 600;
	font-variant-numeric: tabular-nums;
}

.sfc-card-dark dd:last-child {
	margin-bottom: 0;
}

.sfc-card-dark dd a {
	color: #fff;
	text-decoration: none;
	border-bottom: 1px solid var(--gold);
}

.sfc-card-dark__reg {
	font-size: var(--fs-micro);
	color: var(--on-dark-3);
	margin: 1.25rem 0 0;
	padding-top: 1rem;
	border-top: 1px solid var(--line-dark);
}

/* ============================================================
 * Sticky call bar, small screens. The HFE header is not sticky,
 * so this is the only persistent CTA and is load bearing.
 * ========================================================= */

.sfc-sticky {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 95;
	display: none;
	gap: 0.5rem;
	padding: 0.5rem 0.75rem calc(0.5rem + env(safe-area-inset-bottom));
	background: rgba(35, 35, 35, 0.96);
	backdrop-filter: blur(8px);
	border-top: 2px solid var(--gold);
}

@media (max-width: 47.9375rem) {
	.sfc-sticky {
		display: flex;
	}

	.sfc-page {
		padding-bottom: 4.75rem;
	}
}

.sfc-sticky .sfc-btn {
	flex: 1 1 0;
	min-height: 2.875rem;
	padding-inline: 0.75rem;
	font-size: 0.75rem;
}

.sfc-sticky .sfc-btn--gold {
	flex: 1.25 1 0;
}

/* ============================================================
 * Areas hub
 * ========================================================= */

/* Masthead. The hub has no hero: a directory should show its first link inside
   the first screen, and a 34rem photographic band guarantees it cannot. The
   heading column is capped at 7 of 12 so the standfirst keeps a sane measure,
   and the remaining columns carry the aggregate facts rather than white space,
   which was the exact defect the old label rail introduced elsewhere. */
.sfc-mast {
	padding-block: clamp(2.25rem, 4vw, 3.75rem) clamp(2.5rem, 4.4vw, 4rem);
}

.sfc-mast__text {
	grid-column: 1 / -1;
}

.sfc-mast__facts {
	grid-column: 1 / -1;
	margin: 2rem 0 0;
	display: grid;
	gap: 1px;
	background: var(--line1);
	border: 1px solid var(--line1);
	font-size: var(--fs-small);
}

@media (min-width: 64rem) {
	.sfc-mast__text {
		grid-column: 1 / 8;
	}

	.sfc-mast__facts {
		grid-column: 9 / -1;
		margin-top: 0;
		align-self: end;
	}
}

.sfc-mast__facts > div {
	background: var(--s1);
	padding: 0.875rem 1.125rem;
}

.sfc-mast__facts dt {
	font-size: var(--fs-micro);
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--t3);
}

.sfc-mast__facts dd {
	margin: 0.25rem 0 0;
	color: var(--t1);
	font-weight: 600;
	line-height: 1.35;
}

/* The H1 has line-height 1.02 and no bottom margin, so the lead needs its own
   top margin. Two classes deep on purpose: `.sfc-page p { margin: 0 0 1.1em }`
   is also two selectors and appears earlier, so a single class here loses the
   tie and the margin silently computes to zero. Same trick as `.sfc-head p`. */
.sfc-mast .sfc-mast__lead {
	font-size: var(--fs-lead);
	line-height: 1.4;
	letter-spacing: -0.012em;
	color: var(--t2);
	max-width: 46ch;
	margin: clamp(1.5rem, 2.4vw, 2.25rem) 0 0;
}

.sfc-mast .sfc-actions {
	margin-top: 2rem;
}

/* Self sizing tracks, not a hard two column rule. With a single Area published
   the old `repeat(2, 1fr)` left an empty half card on the page, which reads as
   a rendering fault. auto-fit collapses the spare track instead, and the 34rem
   floor keeps the maximum at two columns so the blurbs stay readable. */
.sfc-hub {
	grid-column: 1 / -1;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 34rem), 1fr));
	gap: 1px;
	background: var(--line1);
	border: 1px solid var(--line1);
}

.sfc-hub__item {
	position: relative;
	background: var(--s0);
	padding: clamp(1.5rem, 2.4vw, 2rem);
	display: flex;
	flex-direction: column;
	transition: background-color 160ms linear, box-shadow 160ms linear;
}

.sfc-hub__item:hover,
.sfc-hub__item:focus-within {
	background: var(--s1);
	box-shadow: inset 3px 0 0 var(--gold);
}

.sfc-hub__item h2 {
	font-size: 1.375rem;
	margin-bottom: 0.5rem;
}

.sfc-hub__item h2 a {
	color: var(--t1);
	text-decoration: none;
}

.sfc-hub__item h2 a:hover {
	color: var(--gold-ink);
}

/* The whole card is the target. The anchor stays on the heading so the link
   text is still the town, which is what the accessible name should be. */
.sfc-hub__item h2 a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.sfc-hub__item p {
	max-width: var(--measure);
}

.sfc-hub .sfc-hub__meta {
	font-size: var(--fs-micro);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--t3);
	margin: 0.75rem 0 0;
}

/* Pushed to the bottom edge so cards of unequal blurb length still line their
   affordances up along one row. */
.sfc-hub__side {
	display: flex;
	flex-direction: column;
	margin-top: auto;
}

.sfc-hub__more {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	padding-top: 1.25rem;
}

/* A lone Area is the normal state of a hub that is still being filled in. Left
   as a column it stretched a 36rem paragraph across a 1500px card and left the
   right two thirds blank, which reads as a broken grid rather than a design.
   As a row the card fills its own width at any container size. */
@media (min-width: 64rem) {
	/* A single card has roughly 600px of prose in it. Stretched over the full
	   1500px container no internal arrangement rescues it, so the hub itself
	   narrows to 8 of 12 columns and the leftover becomes page whitespace,
	   which is what the masthead already does above it. */
	.sfc-hub:has(> .sfc-hub__item:only-child) {
		grid-column: 1 / 9;
	}

	.sfc-hub__item:only-child {
		flex-direction: row;
		align-items: stretch;
		gap: 0;
		padding-block: clamp(2rem, 3vw, 2.75rem);
	}

	/* Basis is the measure plus its own gutter, so the divider lands just past
	   the end of the prose rather than floating in the middle of the card. */
	.sfc-hub__item:only-child .sfc-hub__body {
		flex: 0 1 calc(var(--measure) + clamp(2rem, 4vw, 3.5rem));
		padding-right: clamp(2rem, 4vw, 3.5rem);
	}

	/* A hairline, not a gap. Without it the space between the prose and the
	   facts reads as the card failing to fill, which is the same complaint the
	   old label rail earned. */
	.sfc-hub__item:only-child .sfc-hub__side {
		flex: 1 1 auto;
		margin-top: 0;
		justify-content: flex-end;
		border-left: 1px solid var(--line1);
		padding-left: clamp(2rem, 4vw, 3.5rem);
	}

	.sfc-hub .sfc-hub__item:only-child .sfc-hub__meta {
		margin-top: 0;
	}
}

.sfc-hub__arrow {
	width: 1.125rem;
	height: 1.125rem;
	color: var(--line2);
	flex: none;
	transition: color 160ms linear, transform 160ms linear;
}

.sfc-hub__item:hover .sfc-hub__arrow {
	color: var(--gold);
	transform: translateX(2px);
}

/* ============================================================
 * Editor note, signed in staff only
 * ========================================================= */

.sfc-todo {
	background: #fdf7e8;
	border: 1px solid #e9d29b;
	border-left: 3px solid var(--gold);
	padding: 0.875rem 1.125rem;
	font-size: 0.875rem;
	color: #6a5316;
	margin-block: 1rem;
	max-width: var(--measure);
}

.sfc-todo strong {
	display: block;
	font-size: 0.625rem;
	letter-spacing: 0.11em;
	text-transform: uppercase;
	margin-bottom: 0.25rem;
	color: #8a6a12;
}

/* ============================================================
 * Reveal. Scroll driven, CSS only, no JavaScript. Default state is
 * visible, so Safari and Firefox simply get static content.
 * ========================================================= */

@supports (animation-timeline: view()) {
	@media (prefers-reduced-motion: no-preference) {
		.sfc-rise {
			animation: sfc-rise linear both;
			animation-timeline: view();
			animation-range: entry 8% cover 26%;
		}
	}
}

@keyframes sfc-rise {
	from {
		opacity: 0;
		transform: translateY(12px);
	}

	to {
		opacity: 1;
		transform: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.sfc-page *,
	.sfc-page *::before,
	.sfc-page *::after {
		animation-duration: 1ms !important;
		transition-duration: 1ms !important;
	}

	.sfc-rise {
		opacity: 1 !important;
		transform: none !important;
	}

	.sfc-mosaic figure:hover img,
	.sfc-feat__card:hover .sfc-feat__img img {
		transform: none !important;
	}

	.sfc-feat__card:hover {
		transform: none !important;
	}
}

/* ============================================================
 * Utility classes used by the Area template
 * ========================================================= */

.sfc-intro__body {
	margin-top: 1.25rem;
}

.sfc-intro__cta {
	margin-top: 1.75rem;
}

.sfc-span-all {
	grid-column: 1 / -1;
}

.sfc-local {
	margin-top: clamp(2rem, 4vw, 3.5rem);
	align-items: stretch;
}

.sfc-links {
	padding-block: 2rem;
	font-size: 0.9375rem;
	color: var(--t3);
}

.sfc-links p {
	margin: 0 0 0.375rem;
}

.sfc-links a {
	color: var(--gold-ink);
	font-weight: 600;
}


@media (min-width: 64rem) {
	.sfc-quotes:has(> :nth-child(2)) {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ============================================================
 * Icons. The rewrite dropped these and an unsized inline SVG
 * expands to fill its flex parent, which broke the phone button.
 * ========================================================= */

.sfc-page .sfc-icon {
	display: block;
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
}

.sfc-page .sfc-icon--btn {
	width: 1rem;
	height: 1rem;
}

.sfc-page .sfc-icon--service {
	width: 1.1875rem;
	height: 1.1875rem;
	color: var(--gold);
}

.sfc-page .sfc-tile__ico {
	width: 1.375rem;
	height: 1.375rem;
	color: var(--gold);
}

.sfc-page .sfc-tile__arrow {
	width: 1.125rem;
	height: 1.125rem;
}

/* Keep button labels on one line where they reasonably can be. */
.sfc-btn {
	white-space: nowrap;
}

@media (max-width: 24rem) {
	.sfc-btn {
		white-space: normal;
	}
}

/* ============================================================
 * Button colours must out-specify the generic link colour.
 * `.sfc-page a` is (0,1,1) and was beating `.sfc-btn--gold` (0,1,0),
 * so every button label was rendering in gold-ink. On the gold fill
 * that measured about 1.4:1, effectively illegible.
 * These are (0,2,0) and win cleanly without !important.
 * ========================================================= */

.sfc-page .sfc-btn--gold,
.sfc-page .sfc-btn--gold:hover,
.sfc-page .sfc-btn--gold:focus-visible {
	color: #1c1c1c;
}

.sfc-page .sfc-btn--ghost {
	color: #fff;
}

.sfc-page .sfc-btn--ghost:hover,
.sfc-page .sfc-btn--ghost:focus-visible {
	color: #1c1c1c;
}

.sfc-page .sfc-btn--dark {
	color: #fff;
}

.sfc-page .sfc-btn--dark:hover,
.sfc-page .sfc-btn--dark:focus-visible {
	color: #1c1c1c;
}

.sfc-page .sfc-btn--line {
	color: var(--t1);
}

.sfc-page .sfc-btn--line:hover,
.sfc-page .sfc-btn--line:focus-visible {
	color: #fff;
}

/* Same class of bug: these anchors are cards and tiles, not text links. */
.sfc-page .sfc-feat__card,
.sfc-page .sfc-tile,
.sfc-page .sfc-hub__item h2 a {
	color: inherit;
	text-decoration: none;
}

.sfc-page .sfc-more {
	color: var(--gold-ink);
}

.sfc-page .sfc-trust__fig a {
	color: #fff;
}

.sfc-page .sfc-card-dark dd a {
	color: #fff;
}

/* ============================================================
 * Flow.
 *
 * The gold rule that used to close the photographic hero went with it. A white
 * masthead against a white first section needs no divider: the section change is
 * carried by .sfc-sec--tint, and a gold line under a white block would read as a
 * leftover from the dark band rather than as structure.
 * ========================================================= */

/* The breadcrumb now leads the page, above the H1, so it needs room over it
   rather than sitting tight under a hero. */
.sfc-page .sfc-crumb,
.sfc-page .sfc-breadcrumb {
	padding-block: 1.125rem 0;
}

/* The masthead's bottom padding and the first section's top padding used to be
   separated by a hero edge. On white against white they simply add up: measured
   at 164px of empty page between the CTA buttons and the first heading. The
   section drops most of its top padding so the two read as one transition.
   Excluded when the next band is tinted or dark, because there the background
   change is doing the separating and the full rhythm is correct. */
.sfc-page .sfc-mast + .sfc-sec:not(.sfc-sec--tint):not(.sfc-sec--dark) {
	padding-top: clamp(1.25rem, 2vw, 2rem);
}

.sfc-page > .sfc-in:has(.sfc-crumb) + .sfc-sec,
.sfc-page > .sfc-in:has(.sfc-breadcrumb) + .sfc-sec {
	padding-top: clamp(1.75rem, 3vw, 3rem);
}

/* Adjacent sections must never share a texture. If two tinted bands ever end up
   next to each other, drop the duplicated border so it reads as one band. */
.sfc-page .sfc-sec--tint + .sfc-sec--tint {
	border-top: 0;
}

.sfc-page .sfc-sec--dark + .sfc-sec--dark {
	padding-top: 0;
}

/* The mid CTA strip sits directly under the dark gallery. Its own top border is
   the accent, so it does not need the tint band's hairline as well. */
.sfc-page .sfc-sec--dark + .sfc-strip {
	border-top-width: 3px;
}

/* Local area: the prose block and the panel pair are one section, so the gap
   between them is an intra-section step, not a section boundary. */
.sfc-page .sfc-local {
	margin-top: clamp(1.75rem, 3.5vw, 3rem);
}

/* Stop the last section colliding with the Elementor footer. */
.sfc-page .sfc-final {
	margin-bottom: 0;
}

/* ============================================================
 * Alignment.
 *
 * The hero text was rendering centred. This stylesheet is number 15 of 54, so
 * the Elementor kit (28) and the theme (33, 34) beat any equal specificity rule
 * of mine. These are prefixed with the #content id, which neither can match, so
 * they win without !important.
 * ========================================================= */

#content.sfc-page,
#content.sfc-page .sfc-head,
#content.sfc-page .sfc-sec,
#content.sfc-page .sfc-prose,
#content.sfc-page .sfc-why__card,
#content.sfc-page .sfc-feat__body,
#content.sfc-page .sfc-local__panel,
#content.sfc-page .sfc-acc,
#content.sfc-page .sfc-q,
#content.sfc-page .sfc-final__text,
#content.sfc-page .sfc-strip__in,
#content.sfc-page .sfc-mast__text,
#content.sfc-page .sfc-mast__facts,
#content.sfc-page .sfc-hub__item,
#content.sfc-page .sfc-tile {
	text-align: left;
}

#content.sfc-page .sfc-mast h1,
#content.sfc-page .sfc-mast__lead,
#content.sfc-page .sfc-actions {
	text-align: left;
	margin-inline: 0;
	justify-content: flex-start;
}

/* ============================================================
 * Paired prose and image. Fills the half of the container that a
 * 36rem measure leaves blank, which was the same defect as the old rail.
 * ========================================================= */

.sfc-half {
	grid-column: 1 / -1;
}

.sfc-half__fig {
	grid-column: 1 / -1;
	margin: 0;
	align-self: start;
}

@media (min-width: 64rem) {
	.sfc-half {
		grid-column: 1 / 7;
	}

	.sfc-half__fig {
		grid-column: 8 / -1;
	}
}

.sfc-half__fig img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.1);
	filter: saturate(0.9) contrast(1.05);
}

/* Image under the accordion heading, desktop only: on mobile the accordion
   should follow its heading immediately rather than being pushed down. */
.sfc-acc__fig {
	display: none;
	margin: 1.75rem 0 0;
}

@media (min-width: 64rem) {
	.sfc-acc__fig {
		display: block;
	}
}

.sfc-acc__fig img {
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
	display: block;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.1);
	filter: saturate(0.9) contrast(1.05);
}

/* ============================================================
 * Masthead heading measure.
 *
 * The hero's own centring bug went with the hero: .sfc-mast is not a grid, its
 * inner is a normal .sfc-in container, so there is no auto track to collapse.
 * What survives is the measure. 22ch rather than the hero's old 16ch, which
 * starved longer titles such as "Loft Conversions in Leamington Spa".
 * ========================================================= */

#content.sfc-page .sfc-mast h1 {
	max-width: 22ch;
}

/* Belt and braces: any full bleed band gets an explicit single 1fr column so an
   auto track can never collapse to its content. */
#content.sfc-page .sfc-final {
	grid-template-columns: minmax(0, 1fr);
}


.sfc-tile--ask .sfc-tile__ico {
	color: var(--t3);
}

.sfc-tile--ask:hover .sfc-tile__ico {
	color: var(--gold);
}

@media (min-width: 40rem) {
	.sfc-tile--ask {
		grid-column: span 2;
	}
}

/* ============================================================
 * Paired figures: keep them proportionate to the text beside them.
 *
 * The intro figure was 4:5. At 566px wide that is 707px tall, plus a caption,
 * which drove the whole row to 735px and stretched the text column to match,
 * leaving dead space under the button. Measured, not guessed.
 *
 * 4:3 at the same width is 425px, which is close to the text column's natural
 * content height, so neither side dictates the other. The object-position keeps
 * the house and the lawn in frame when the portrait source is cropped.
 * ========================================================= */

@media (min-width: 64rem) {
	#content.sfc-page .sfc-intro__fig img {
		aspect-ratio: 4 / 3;
		object-position: 50% 38%;
	}
}

/* No paired figure may exceed a sane height at any width. A portrait source in a
   wide column is the one case that can run away. */
#content.sfc-page .sfc-intro__fig img,
#content.sfc-page .sfc-half__fig img {
	max-height: 32rem;
}

#content.sfc-page .sfc-acc__fig img {
	max-height: 26rem;
}

/* Align the pair to the top so a short figure does not stretch, and the text
   keeps its own natural height. */
#content.sfc-page .sfc-intro__fig,
#content.sfc-page .sfc-half__fig {
	align-self: start;
}

/* On the tinted local band the inner panel keeps its charcoal, but the paired
   figure needs a slightly stronger edge so it does not float on the tint. */
.sfc-sec--tint .sfc-half__fig img,
.sfc-sec--tint .sfc-local__fig img {
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.14);
}

/* ============================================================
 * Heading to text rhythm, normalised.
 *
 * Each wrapper had grown its own value: .sfc-head used 0.875rem, the intro
 * 1.25rem, the local panel 1rem, the why cards 0.5rem and the feature cards
 * 0.375rem. Five different gaps for the same relationship, which is why the
 * spacing read as inconsistent from section to section.
 *
 * One scale, keyed to the size of the heading above it:
 *   after a large H2   1rem to a lead line, 1.375rem to a content block
 *   after an H3        0.5rem
 *   heading block to a grid or card row   clamp(1.75rem, 3vw, 2.75rem)
 *
 * Prefixed with #content so these win against the earlier ad hoc rules without
 * needing !important.
 * ========================================================= */

/* A two line H2 at 48px was too tight at 1.08. */
#content.sfc-page h2 {
	line-height: 1.12;
}

#content.sfc-page h3 {
	line-height: 1.25;
}

/* Heading straight to its supporting line */
#content.sfc-page .sfc-head p {
	margin-top: 1rem;
}

/* Heading to a block of body copy */
#content.sfc-page .sfc-intro__body,
#content.sfc-page h2 + .sfc-prose {
	margin-top: 1.375rem;
}

/* Heading to a list or a set of chips */
#content.sfc-page .sfc-local__panel h2 + .sfc-chips,
#content.sfc-page h2 + .sfc-chips {
	margin-top: 1.25rem;
}

/* Subheadings inside prose */
#content.sfc-page .sfc-prose h3 {
	margin-top: 1.875rem;
	margin-bottom: 0.5rem;
}

#content.sfc-page .sfc-prose h3:first-child {
	margin-top: 0;
}

/* Card headings sit closer to their own text, but not as close as before */
#content.sfc-page .sfc-why__card h3,
#content.sfc-page .sfc-feat__body h3 {
	margin-bottom: 0.625rem;
}

/* Heading block to the grid or cards beneath it */
#content.sfc-page .sfc-head {
	margin-bottom: clamp(1.75rem, 3vw, 2.75rem);
}

/* Accordion answer needs air under the question, and the question needs a
   consistent tap and click target height. */
#content.sfc-page .sfc-acc summary {
	padding-block: 1.4375rem;
}

#content.sfc-page .sfc-acc__body {
	padding-top: 0.25rem;
}

/* The numbered planning steps had their own inherited spacing. */
#content.sfc-page .sfc-acc__body p + p {
	margin-top: 1.1em;
}

/* Buttons that follow prose need a clear break, not a paragraph gap. */
#content.sfc-page .sfc-intro__cta {
	margin-top: 2rem;
}

/* A heading block that carries only an eyebrow label does not need the full
   section margin beneath it. The testimonial was stacking 2.75rem of head margin
   on top of the quote's own 2.5rem of padding for the hanging quote mark. */
#content.sfc-page .sfc-head:not(:has(h2)) {
	margin-bottom: 0.25rem;
}

/* ============================================================
 * Wide material band.
 *
 * A tight 21:9 crop of a real material reads as a deliberate choice where a
 * wide snapshot reads as a record. It also fills width without competing with a
 * text column for height, which is what the portrait in the heading column was
 * doing.
 * ========================================================= */

.sfc-band {
	margin: clamp(2rem, 4vw, 3rem) auto 0;
}

.sfc-band img {
	width: 100%;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: 50% 62%;
	display: block;
	border-radius: 3px;
	box-shadow: inset 0 0 0 1px rgba(28, 28, 28, 0.14);
	filter: saturate(0.9) contrast(1.05);
}

@media (max-width: 47.9375rem) {
	.sfc-band img {
		aspect-ratio: 16 / 9;
	}
}

/* The heading column no longer carries a figure, so it and the accordion are
   both short and balanced when everything is collapsed. */
#content.sfc-page .sfc-acc__head {
	align-self: start;
}

/* 21:9 is correct maths but the wrong visual weight: at 1404px wide that is
   602px tall, which made a decorative band the heaviest thing in the section.
   3:1 with a hard cap keeps it a strip rather than a feature. */
#content.sfc-page .sfc-band img {
	aspect-ratio: 3 / 1;
	max-height: 24rem;
}

@media (max-width: 47.9375rem) {
	#content.sfc-page .sfc-band img {
		aspect-ratio: 2 / 1;
		max-height: 14rem;
	}
}

/* Centre the crop: on a paving photograph the courses and the edging run through
   the middle, so 62% was cutting to bare ground. */
#content.sfc-page .sfc-band img {
	object-position: 50% 50%;
}

/* ============================================================
 * Testimonial.
 *
 * The previous version was a pull quote floating on white with an empty right
 * hand side, which read as unfinished rather than spacious. On charcoal the
 * surrounding dark is deliberate, the quote carries real weight at 40px, and the
 * right hand column does useful work instead of sitting blank.
 * ========================================================= */

.sfc-said__q {
	grid-column: 1 / -1;
	margin: 0;
	position: relative;
	padding-left: 2.75rem;
}

.sfc-said__more {
	grid-column: 1 / -1;
	margin-top: 2rem;
}

@media (min-width: 64rem) {
	.sfc-said__q {
		grid-column: 1 / 9;
	}

	.sfc-said__more {
		grid-column: 10 / -1;
		margin-top: 0;
		align-self: end;
		justify-self: end;
	}
}

/* Hanging quote mark, set in the gutter so the text edge stays true. */
.sfc-said__q::before {
	content: "\201C";
	position: absolute;
	left: 0;
	top: 1.75rem;
	font-size: 4.5rem;
	line-height: 0.7;
	color: var(--gold);
}

#content.sfc-page .sfc-said__q .sfc-label {
	color: var(--gold-bright);
	margin-bottom: 1rem;
}

#content.sfc-page .sfc-said__q p {
	color: #fff;
	font-size: clamp(1.375rem, 1.05rem + 1.6vw, 2.5rem);
	line-height: 1.26;
	letter-spacing: -0.022em;
	font-weight: 500;
	margin: 0;
	max-width: 34ch;
	text-wrap: balance;
}

#content.sfc-page .sfc-said__q cite {
	display: block;
	font-style: normal;
	font-size: 0.8125rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--on-dark-3);
	margin-top: 1.75rem;
	padding-top: 1.25rem;
	position: relative;
}

#content.sfc-page .sfc-said__q cite::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 2.25rem;
	height: 2px;
	background: var(--gold);
}

/* Coverage qualifier. Sits under the named areas so the list reads as examples
   rather than as the boundary of where the firm will travel. */
#content.sfc-page .sfc-reach {
	font-size: 0.9375rem;
	line-height: 1.55;
	color: var(--on-dark-2);
	margin: 1.125rem 0 0;
	max-width: 46ch;
}

/* ============================================================
 * Masthead, after the facts column was removed.
 *
 * The text used to sit in the left half with an aggregated fact list in the
 * right. With the facts gone a half empty two column grid reads as a mistake,
 * so the text spans the full grid and the lead carries its own measure. That is
 * a deliberate full width masthead rather than a column with a hole beside it.
 * ========================================================= */

#content.sfc-page .sfc-mast__text {
	grid-column: 1 / -1;
}