/* ==========================================================================
   Site Plans FL — area and county pages
   Tokens come from Settings; the fallbacks keep everything working regardless.
   ========================================================================== */

.spfl {
	--o: var(--spfl-orange, #E8730C);
	--o-dark: var(--spfl-orange-dark, #C85F05);
	--o-soft: rgba(232, 115, 12, .1);
	--teal: var(--spfl-teal, #14504C);
	--deep: var(--spfl-teal-deep, #0B3A37);
	--ink: var(--spfl-ink, #101820);
	--body: #33454E;
	--muted: #5A6B74;
	--grey: var(--spfl-grey, #F6F8F8);
	--cream: var(--spfl-cream, #FDF0E3);
	--line: #E4EAEC;
	--line-soft: #EEF2F3;
	--wa: #25D366;
	--r: 14px;
	--r-sm: 8px;
	--wrap: 1280px;
	--gap: clamp(28px, 4vw, 64px);
	--pad: clamp(64px, 7vw, 108px);
	--fh: var(--spfl-font-head, 'Poppins', system-ui, sans-serif);
	--fb: var(--spfl-font-body, 'Poppins', system-ui, sans-serif);

	font-family: var(--fb);
	color: var(--body);
	font-size: 17px;
	line-height: 1.72;
	-webkit-font-smoothing: antialiased;
}

.spfl *,
.spfl *::before,
.spfl *::after { box-sizing: border-box; }

.spfl img { max-width: 100%; height: auto; display: block; }
.spfl .spfl-i { flex: 0 0 auto; }
.spfl p, .spfl li, .spfl h1, .spfl h2, .spfl h3, .spfl td { overflow-wrap: anywhere; }

@supports not (overflow: clip) { .spfl { overflow-x: hidden; } }

/* ------------------------------------------------------ layout primitives */

.spfl-wrap {
	width: 100%;
	max-width: var(--wrap);
	margin-inline: auto;
	padding-inline: clamp(18px, 4vw, 40px);
}
.spfl-narrow { max-width: 920px; }
.spfl-center { text-align: center; }

/* Every band uses the same vertical rhythm. */
.spfl-s { padding-block: var(--pad); }
.spfl-s-light { background: #fff; }
.spfl-s-grey { background: var(--grey); }
.spfl-s-dark { background: var(--deep); color: #C6DCD8; }
.spfl-s-light + .spfl-s-light,
.spfl-s-grey + .spfl-s-grey { padding-top: 0; }

.spfl-split {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
	gap: var(--gap);
	align-items: start;
}
.spfl-split-wide { grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); }
.spfl-split-flip .spfl-split-a { order: 2; }

/* ---------------------------------------------------------------- type */

.spfl-h1, .spfl-h, .spfl h2, .spfl h3, .spfl h4 {
	font-family: var(--fh);
	color: var(--ink);
	letter-spacing: -.022em;
	margin: 0 0 16px;
	text-wrap: balance;
}

.spfl-h1 {
	font-size: clamp(2.5rem, 4.6vw, 4rem);
	font-weight: 800;
	line-height: 1.06;
	color: #fff;
	margin-bottom: 22px;
	text-shadow: 0 2px 18px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.5);
}

.spfl-h {
	font-size: clamp(1.9rem, 3vw, 2.75rem);
	font-weight: 800;
	line-height: 1.14;
}
.spfl-h-invert, .spfl-s-dark .spfl-h, .spfl-s-dark h3 { color: #fff; }

.spfl h3 { font-size: 1.09rem; font-weight: 700; line-height: 1.4; }

.spfl-accent { color: var(--o); }
.spfl-italic { font-style: italic; }

.spfl-eyebrow {
	display: flex;
	align-items: center;
	gap: 11px;
	font-family: var(--fh);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .15em;
	text-transform: uppercase;
	color: var(--o);
	margin: 0 0 16px;
}
.spfl-center .spfl-eyebrow { justify-content: center; }
.spfl-eyebrow-dash { width: 28px; height: 2px; background: var(--o); border-radius: 2px; }

.spfl-lede {
	font-size: clamp(1.05rem, 1.4vw, 1.2rem);
	line-height: 1.65;
	color: var(--body);
	margin: 0 0 28px;
	max-width: 60ch;
}
.spfl-center .spfl-lede { margin-inline: auto; }

.spfl-body { margin: 0 0 22px; }
.spfl-body-center { margin-inline: auto; max-width: 62ch; }
.spfl-small { font-size: .94rem; color: var(--muted); margin: 18px 0 0; }
.spfl-small-teal { color: var(--teal); }

.spfl-prose p { margin: 0 0 18px; }
.spfl-prose p:last-child { margin-bottom: 0; }
.spfl-prose a { color: var(--o); font-weight: 600; }
.spfl-prose strong { color: var(--ink); }

.spfl-s-dark .spfl-lede,
.spfl-s-dark .spfl-body,
.spfl-s-dark .spfl-prose,
.spfl-s-dark .spfl-small { color: #C6DCD8; }

/* Standard section header block. */
.spfl-head { max-width: 62ch; margin-bottom: 44px; }
.spfl-head-center { margin-inline: auto; text-align: center; }
.spfl-head :last-child { margin-bottom: 0; }

/* -------------------------------------------------------------- buttons */

.spfl a.spfl-btn,
.spfl button.spfl-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--fh);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.2;
	padding: 17px 30px;
	border-radius: var(--r-sm);
	text-decoration: none;
	border: 2px solid transparent;
	cursor: pointer;
	transition: background-color .18s ease, border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.spfl a.spfl-btn:hover, .spfl button.spfl-btn:hover { transform: translateY(-2px); }
.spfl .spfl-btn:focus-visible { outline: 3px solid #F7A85C; outline-offset: 3px; }

.spfl .spfl-btn-orange { background: var(--o); color: #fff; box-shadow: 0 6px 18px rgba(232, 115, 12, .28); }
.spfl .spfl-btn-orange:hover { background: var(--o-dark); color: #fff; box-shadow: 0 10px 24px rgba(232, 115, 12, .34); }

.spfl .spfl-btn-wa { background: var(--wa); color: #06371C; }
.spfl .spfl-btn-wa:hover { background: #1EBB58; color: #06371C; }

.spfl .spfl-btn-ghost { background: rgba(255, 255, 255, .06); color: #fff; border-color: rgba(255, 255, 255, .34); }
.spfl .spfl-btn-ghost:hover { border-color: var(--o); background: rgba(232, 115, 12, .12); color: #fff; }

.spfl .spfl-btn-sm { padding: 12px 20px; font-size: .9rem; }

.spfl-cta-row { display: flex; flex-wrap: wrap; gap: 14px; }
.spfl-cta-center { justify-content: center; }

.spfl-link {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--fh);
	font-weight: 700;
	font-size: .92rem;
	color: var(--teal);
	text-decoration: none;
	border-bottom: 2px solid transparent;
}
.spfl-link:hover { color: var(--o); border-bottom-color: var(--o); }
.spfl-s-dark .spfl-link { color: #7FD8C6; }

/* =========================================================================
   Hero — fills the screen, video behind, form floating on top
   ========================================================================= */

.spfl-hero {
	position: relative;
	background: var(--deep);
	display: flex;
	align-items: center;
	min-height: 92vh;
	min-height: 92svh;
	padding-block: clamp(48px, 6vw, 80px);
	overflow: hidden;
	isolation: isolate;
}
.spfl-hero-short { min-height: 0; padding-block: clamp(56px, 6vw, 92px); }

.spfl-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	z-index: -3;
}

.spfl-hero-tint {
	position: absolute;
	inset: 0;
	z-index: -2;
	background:
		linear-gradient(100deg, rgba(8, 44, 42, .55) 0%, rgba(9, 50, 47, .48) 46%, rgba(11, 58, 55, .36) 100%),
		radial-gradient(120% 100% at 80% 8%, rgba(31, 106, 99, .3) 0%, rgba(11, 58, 55, 0) 60%);
}

/* A quiet drafting grid — the page is selling drawings, after all. */
.spfl-hero-grid {
	position: absolute;
	inset: 0;
	z-index: -1;
	background-image:
		linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, transparent 82%);
	pointer-events: none;
}

.spfl-hero-inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(400px, 460px);
	gap: clamp(32px, 4vw, 68px);
	align-items: center;
	width: 100%;
}

.spfl-badge {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	background: rgba(232, 115, 12, .18);
	border: 1px solid rgba(232, 115, 12, .46);
	color: #FBBB77;
	font-family: var(--fh);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .05em;
	padding: 9px 18px;
	border-radius: 999px;
	margin: 0 0 24px;
}
.spfl-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--o); }

.spfl-hero .spfl-lede { color: #D3E5E2; max-width: 52ch; text-shadow: 0 1px 8px rgba(0,0,0,.4); }

/* Real county data, visible before the fold. */
.spfl-facts-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	list-style: none;
	margin: 0 0 30px;
	padding: 0;
}
.spfl-facts-pills li {
	display: flex;
	flex-direction: column;
	gap: 2px;
	background: rgba(255, 255, 255, .07);
	border: 1px solid rgba(255, 255, 255, .16);
	border-radius: 10px;
	padding: 11px 18px;
	min-width: 120px;
}
.spfl-facts-pills span {
	font-size: .69rem;
	font-weight: 700;
	letter-spacing: .11em;
	text-transform: uppercase;
	color: #8FB3AD;
}
.spfl-facts-pills strong {
	font-family: var(--fh);
	font-size: .98rem;
	font-weight: 700;
	color: #fff;
}

.spfl-dotlist {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 6px 18px;
	margin: 0 0 28px;
	padding: 0;
	font-size: .93rem;
	color: #A9C6C1;
}
.spfl-dotlist li { display: flex; align-items: center; gap: 18px; }
.spfl-dotlist li::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: var(--o); }
.spfl-dotlist li:last-child::after { display: none; }

.spfl-hero-aside { display: grid; gap: 16px; align-content: center; min-width: 0; }

.spfl-hero-scroll {
	position: absolute;
	left: 50%;
	bottom: 22px;
	transform: translateX(-50%);
	color: rgba(255, 255, 255, .5);
	font-size: .72rem;
	letter-spacing: .18em;
	text-transform: uppercase;
	font-weight: 600;
	text-decoration: none;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
}
.spfl-hero-scroll::after {
	content: '';
	width: 1px; height: 26px;
	background: linear-gradient(rgba(255,255,255,.5), transparent);
}
.spfl-hero-scroll:hover { color: #fff; }

/* =========================================================================
   Enquiry form — the most important object on the page
   ========================================================================= */

.spfl-form-card {
	background: #fff;
	border-radius: var(--r);
	padding: 30px 30px 26px;
	box-shadow: 0 28px 60px rgba(4, 26, 24, .34), 0 2px 6px rgba(4, 26, 24, .16);
	position: relative;
	overflow: hidden;
}
.spfl-form-card::before {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 5px;
	background: linear-gradient(90deg, var(--o) 0%, #F5A44A 45%, var(--teal) 100%);
}
.spfl-form-bottom { box-shadow: 0 10px 34px rgba(16, 32, 38, .1); border: 1px solid var(--line); }

.spfl-form-head { margin-bottom: 20px; }
.spfl-form-title {
	font-family: var(--fh);
	font-size: 1.34rem;
	font-weight: 800;
	color: var(--ink);
	line-height: 1.24;
	margin: 0 0 8px;
}
.spfl-form-sub { margin: 0; font-size: .95rem; line-height: 1.6; color: var(--muted); }

.spfl-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.spfl-f { margin: 0; min-width: 0; }
.spfl-f-wide { grid-column: 1 / -1; }

.spfl-f label {
	display: block;
	font-family: var(--fh);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #4A5C65;
	margin-bottom: 7px;
}
.spfl-f label span[aria-hidden] { color: var(--o); }
.spfl-f-opt {
	display: block;
	text-transform: none;
	letter-spacing: 0;
	font-weight: 500;
	font-size: .73rem;
	color: #8695A0;
	margin-top: 3px;
}

.spfl-form input[type="text"],
.spfl-form input[type="email"],
.spfl-form input[type="tel"],
.spfl-form select,
.spfl-form textarea {
	width: 100%;
	font-family: var(--fb);
	font-size: 15.5px;
	line-height: 1.5;
	color: var(--ink);
	background: #F7F9FA;
	border: 1.5px solid #D3DCE0;
	border-radius: var(--r-sm);
	padding: 13px 14px;
	transition: border-color .15s ease, box-shadow .15s ease, background-color .15s ease;
	-webkit-appearance: none;
	appearance: none;
}
.spfl-form input::placeholder,
.spfl-form textarea::placeholder { color: #93A3AB; }
.spfl-form select {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none' stroke='%234A5C65' stroke-width='2'%3E%3Cpath d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 36px;
}
.spfl-form textarea { resize: vertical; min-height: 92px; }
.spfl-form input:focus,
.spfl-form select:focus,
.spfl-form textarea:focus {
	outline: none;
	background: #fff;
	border-color: var(--teal);
	box-shadow: 0 0 0 3px rgba(20, 80, 76, .14);
}
.spfl-form input.is-invalid { border-color: #C0392B; box-shadow: 0 0 0 3px rgba(192, 57, 43, .12); }

.spfl-f-file input[type="file"] {
	width: 100%;
	font-size: 13px;
	color: var(--muted);
	background: #F7F9FA;
	border: 1.5px dashed #D3DCE0;
	border-radius: var(--r-sm);
	padding: 11px 13px;
}
.spfl-f-file input[type="file"]::file-selector-button {
	font-family: var(--fh);
	font-weight: 600;
	font-size: 13px;
	border: 0;
	border-radius: 6px;
	background: var(--teal);
	color: #fff;
	padding: 8px 14px;
	margin-right: 12px;
	cursor: pointer;
}

.spfl .spfl-form-submit { width: 100%; margin-top: 18px; font-size: 1.02rem; padding: 18px 28px; }
.spfl .spfl-form-submit.is-busy { opacity: .65; pointer-events: none; }

.spfl-form-note { margin: 13px 0 0; font-size: .78rem; color: #8695A0; line-height: 1.5; }
.spfl-form-alt { margin: 9px 0 0; font-size: .86rem; color: var(--muted); }
.spfl-form-alt a { color: var(--o); font-weight: 700; }

.spfl-form-error {
	margin: 13px 0 0;
	padding: 11px 14px;
	border-radius: var(--r-sm);
	background: #FCEDEB;
	color: #A5271A;
	font-size: .88rem;
	border-left: 3px solid #C0392B;
}

.spfl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.spfl-form-success { text-align: center; padding: 18px 4px 8px; }
.spfl-form-success h3 { font-size: 1.2rem; margin: 0 0 8px; }
.spfl-form-success p { margin: 0; font-size: .95rem; color: var(--muted); }
.spfl-form-tick {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 52px; height: 52px;
	border-radius: 50%;
	background: rgba(37, 211, 102, .14);
	color: #108B3D;
	margin-bottom: 15px;
}
.spfl-form-card.is-sent .spfl-form { display: none; }

.spfl-formband-inner {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, .92fr);
	gap: var(--gap);
	align-items: center;
}

/* =========================================================================
   Trust
   ========================================================================= */

.spfl-trust { background: #fff; border-block: 1px solid var(--line); }
.spfl-trust-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px 32px;
	padding-block: 20px;
}
.spfl-trust-item {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--fh);
	font-weight: 600;
	font-size: .92rem;
	color: var(--ink);
}
.spfl-trust-item .spfl-i { color: var(--o); }

.spfl-badges { background: var(--grey); border-bottom: 1px solid var(--line); }
.spfl-badges-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: clamp(20px, 4vw, 56px);
	padding-block: 26px;
}
.spfl-badge-item {
	display: flex;
	align-items: center;
	gap: 12px;
	max-width: 260px;
}
.spfl-badge-item img {
	width: auto;
	height: 58px;
	object-fit: contain;
	flex: 0 0 auto;
}
.spfl-badge-item span {
	font-family: var(--fh);
	font-size: .84rem;
	font-weight: 600;
	line-height: 1.35;
	color: var(--ink);
}

/* =========================================================================
   Content blocks
   ========================================================================= */

.spfl-ticks { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.spfl-ticks-2 { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px 30px; }
.spfl-ticks li { display: flex; gap: 12px; align-items: flex-start; font-size: 1rem; line-height: 1.55; }
.spfl-ticks .spfl-i { color: var(--o); margin-top: 4px; }
.spfl-ticks-boxed {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 30px 32px;
	margin-top: 30px;
}
.spfl-s-dark .spfl-ticks li { color: #C6DCD8; }

.spfl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 9px; margin: 0 0 28px; padding: 0; }
.spfl-chips-center { justify-content: center; }
.spfl-chips li {
	font-size: .87rem;
	font-weight: 500;
	padding: 9px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .08);
	border: 1px solid rgba(255, 255, 255, .18);
	color: #DCEAE7;
}
.spfl-chips-light li { background: #fff; border-color: var(--line); color: var(--ink); }
.spfl-chips-light li:hover { border-color: var(--o); }
.spfl-chips-light a { color: inherit; text-decoration: none; }

.spfl-places { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 22px; padding: 0; }
.spfl-places li a, .spfl-places li span {
	display: block;
	font-family: var(--fh);
	font-size: .93rem;
	font-weight: 600;
	padding: 11px 18px;
	border-radius: var(--r-sm);
	background: #fff;
	border: 1px solid var(--line);
	color: var(--ink);
	text-decoration: none;
}
.spfl-s-light .spfl-places li a, .spfl-s-light .spfl-places li span { background: var(--grey); }
.spfl-places li a:hover { border-color: var(--o); color: var(--o); }

/* Facts table */
.spfl-table {
	border-radius: var(--r);
	overflow: hidden;
	box-shadow: 0 12px 30px rgba(16, 32, 38, .1);
}
.spfl-table-head {
	background: var(--deep);
	color: #fff;
	font-family: var(--fh);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	padding: 18px 24px;
	border-left: 4px solid var(--o);
}
.spfl-table-row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	background: var(--teal);
	color: #D3E5E2;
	padding: 16px 24px;
	border-top: 1px solid rgba(255, 255, 255, .08);
	font-size: .96rem;
}
.spfl-table-value { font-family: var(--fh); font-weight: 700; color: #fff; text-align: right; }

/* Panels and notes */
.spfl-panel { background: #fff; border: 1px solid var(--line); border-radius: var(--r); padding: 30px 32px; }
.spfl-s-dark .spfl-panel { background: rgba(255, 255, 255, .05); border-color: rgba(255, 255, 255, .15); }
.spfl-panel-title {
	font-family: var(--fh);
	font-size: .8rem;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--teal);
	margin-bottom: 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--line);
}
.spfl-s-dark .spfl-panel-title { color: #7FD8C6; border-color: rgba(255,255,255,.14); }

.spfl-note {
	background: var(--grey);
	border-left: 4px solid var(--o);
	border-radius: 0 var(--r-sm) var(--r-sm) 0;
	padding: 22px 26px;
	margin-top: 22px;
	font-size: .97rem;
}
.spfl-note p { margin: 0; }
.spfl-note h3 { display: flex; align-items: center; gap: 10px; margin: 0 0 9px; }
.spfl-note h3 .spfl-i { color: var(--o); }
.spfl-note-cream { background: var(--cream); }
.spfl-s-grey .spfl-note { background: #fff; }
.spfl-s-dark .spfl-note { background: rgba(0, 0, 0, .25); color: #C6DCD8; }
.spfl-s-dark .spfl-note h3 { color: #fff; }

/* Cards */
.spfl-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
	gap: 20px;
}
.spfl-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 0;
	overflow: hidden;
	transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}
.spfl-card-img {
	position: relative;
	aspect-ratio: 16 / 10;
	background: linear-gradient(160deg, #F2F5F6, #E7ECEE);
	overflow: hidden;
}
.spfl-card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform .4s cubic-bezier(.22,.61,.36,1);
}
.spfl-card:hover .spfl-card-img img { transform: scale(1.05); }
.spfl-card-body {
	padding: 22px 24px 26px;
	display: flex;
	flex-direction: column;
	flex: 1;
}
.spfl-card-body .spfl-chip { margin-top: 4px; }
.spfl-card:hover { border-color: #CBD8DD; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(16, 32, 38, .09); }
.spfl-card h2, .spfl-card h3 { margin: 0 0 9px; font-size: 1.08rem; }
.spfl-card p { margin: 0 0 16px; font-size: .95rem; line-height: 1.6; color: var(--muted); }
.spfl-card .spfl-link { margin-top: auto; align-self: flex-start; }
.spfl-card-link { text-decoration: none; color: var(--body); }
.spfl-card-county { font-size: .84rem !important; color: var(--o); font-weight: 700; margin-bottom: 8px !important; }

.spfl-chip {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px; height: 46px;
	border-radius: 12px;
	background: #EDF3F4;
	color: var(--teal);
	margin-bottom: 18px;
}
.spfl-card:hover .spfl-chip { background: var(--o-soft); color: var(--o); }

/* Steps */
.spfl-steps {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin: 0;
	padding: 0;
	counter-reset: spfl;
}
.spfl-steps li {
	background: #fff;
	border: 1px solid var(--line);
	border-radius: var(--r);
	padding: 28px;
	position: relative;
}
.spfl-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px; height: 38px;
	border-radius: 10px;
	background: var(--o-soft);
	font-family: var(--fh);
	font-size: .88rem;
	font-weight: 800;
	color: var(--o);
	margin-bottom: 14px;
}
.spfl-steps h3 { margin: 0 0 7px; }
.spfl-steps p { margin: 0; font-size: .94rem; color: var(--muted); }

/* Alert / corrections */
.spfl-alert {
	background: var(--cream);
	border: 1px solid #F2D8BC;
	border-radius: 20px;
	padding: clamp(30px, 4vw, 56px);
}
.spfl-alert-head { max-width: 60ch; }

/* Figures and media */
.spfl-figure { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); background: #fff; }
.spfl-figure img { width: 100%; }
.spfl-figure figcaption { padding: 14px 18px; font-size: .88rem; color: var(--muted); }
.spfl-mapbox { border-radius: var(--r); overflow: hidden; border: 1px solid var(--line); }
.spfl-mapbox iframe { width: 100%; height: 360px; border: 0; display: block; }

.spfl-media-split { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 20px; margin-top: 40px; }
.spfl-media-card {
	position: relative;
	border-radius: var(--r);
	overflow: hidden;
	min-height: 260px;
	display: flex;
	align-items: flex-end;
	background: var(--deep);
}
.spfl-media-card img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.spfl-media-card-body {
	position: relative;
	z-index: 1;
	padding: 24px;
	width: 100%;
	background: linear-gradient(transparent, rgba(6, 34, 32, .92) 62%);
	color: #fff;
}
.spfl-media-card-body h3 { color: #fff; margin: 0 0 6px; }
.spfl-media-card-body p { margin: 0; font-size: .92rem; color: #D3E5E2; }

.spfl-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 18px; margin-top: 40px; }
.spfl-gallery-item { margin: 0; background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spfl-gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spfl-gallery-item figcaption { padding: 14px 18px; font-size: .88rem; color: var(--muted); }

.spfl-contact { display: flex; flex-direction: column; gap: 12px; margin-top: 24px; }
.spfl-contact a {
	display: inline-flex;
	align-items: center;
	gap: 11px;
	font-family: var(--fh);
	font-weight: 600;
	color: var(--ink);
	text-decoration: none;
}
.spfl-contact a:hover { color: var(--o); }
.spfl-contact .spfl-i { color: var(--o); }
.spfl-s-dark .spfl-contact a { color: #fff; }

/* FAQ */
.spfl-faq { display: grid; gap: 12px; }
.spfl-faq-item { background: #fff; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; }
.spfl-faq-item[open] { border-color: #CBD8DD; box-shadow: 0 10px 28px rgba(16, 32, 38, .07); }
.spfl-faq-item summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 20px;
	cursor: pointer;
	padding: 22px 26px;
	font-family: var(--fh);
	font-weight: 600;
	font-size: 1.04rem;
	color: var(--ink);
	list-style: none;
}
.spfl-faq-item summary::-webkit-details-marker { display: none; }
.spfl-faq-icon { position: relative; flex: 0 0 auto; width: 20px; height: 20px; }
.spfl-faq-icon::before, .spfl-faq-icon::after {
	content: '';
	position: absolute;
	background: var(--o);
	border-radius: 2px;
	transition: transform .2s ease;
}
.spfl-faq-icon::before { top: 9px; left: 2px; width: 16px; height: 2px; }
.spfl-faq-icon::after { top: 2px; left: 9px; width: 2px; height: 16px; }
.spfl-faq-item[open] .spfl-faq-icon::after { transform: scaleY(0); }
.spfl-faq-a { padding: 0 26px 24px; font-size: .99rem; color: var(--body); }
.spfl-faq-a p { margin: 0 0 12px; }
.spfl-faq-a p:last-child { margin-bottom: 0; }

/* Final band */
.spfl-final {
	position: relative;
	background: var(--deep);
	overflow: hidden;
}
.spfl-final .spfl-hero-grid { z-index: 0; }
.spfl-final > * { position: relative; z-index: 1; }
.spfl-final .spfl-body { color: #C6DCD8; max-width: 56ch; margin-inline: auto; }

/* Sticky page menu */
.spfl-jump {
	position: sticky;
	top: 0;
	z-index: 40;
	background: rgba(255, 255, 255, .97);
	backdrop-filter: blur(10px);
	border-bottom: 1px solid var(--line);
}
.spfl-jump-inner {
	display: flex;
	align-items: center;
	gap: 20px;
	overflow-x: auto;
	scrollbar-width: none;
	padding-block: 11px;
}
.spfl-jump-inner::-webkit-scrollbar { display: none; }
.spfl-jump-label {
	flex: 0 0 auto;
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .13em;
	text-transform: uppercase;
	color: #8695A0;
}
.spfl-jump ul { display: flex; gap: 6px; list-style: none; margin: 0; padding: 0; }
.spfl-jump li { flex: 0 0 auto; }
.spfl-jump a {
	display: block;
	font-size: .89rem;
	font-weight: 600;
	color: var(--body);
	text-decoration: none;
	padding: 8px 15px;
	border-radius: 999px;
	white-space: nowrap;
}
.spfl-jump a:hover { background: var(--grey); color: var(--ink); }
.spfl-jump a.is-current { background: var(--teal); color: #fff; }

.spfl-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; }
.spfl-progress span { display: block; height: 100%; width: 0; background: var(--o); transition: width .1s linear; }

.spfl section[id], .spfl [id] { scroll-margin-top: 92px; }

/* Sticky bar + float */
.spfl-sticky {
	position: fixed;
	inset: auto 0 0 0;
	z-index: 55;
	background: #fff;
	border-top: 1px solid var(--line);
	box-shadow: 0 -6px 24px rgba(16, 32, 38, .1);
	transform: translateY(100%);
	transition: transform .25s ease;
}
.spfl-sticky.is-visible { transform: translateY(0); }
.spfl-sticky-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 13px; }
.spfl-sticky-text { font-size: .94rem; }
.spfl-sticky-actions { display: flex; gap: 10px; flex: 0 0 auto; }

.spfl-float-wa {
	position: fixed;
	right: 22px; bottom: 22px;
	z-index: 50;
	width: 58px; height: 58px;
	border-radius: 50%;
	background: var(--wa);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 8px 24px rgba(37, 211, 102, .42);
}
.spfl-float-wa:hover { background: #1EBB58; }

.spfl-pagination { margin-top: 44px; text-align: center; }
.spfl-pagination ul { list-style: none; display: inline-flex; gap: 6px; padding: 0; }
.spfl-pagination a, .spfl-pagination span {
	display: block; padding: 9px 15px; border-radius: var(--r-sm);
	background: var(--grey); color: var(--ink); text-decoration: none; font-weight: 600;
}
.spfl-pagination .current { background: var(--o); color: #fff; }

/* =========================================================================
   Responsive
   ========================================================================= */

@media (max-width: 1180px) {
	.spfl-hero-inner { grid-template-columns: minmax(0, 1fr) minmax(360px, 420px); }
}

@media (max-width: 1024px) {
	.spfl-hero { min-height: 0; }
	.spfl-hero-inner { grid-template-columns: 1fr; gap: 34px; }
	.spfl-hero-aside { max-width: 560px; width: 100%; }
	.spfl-hero-scroll { display: none; }
	.spfl-split, .spfl-split-wide, .spfl-split-even, .spfl-formband-inner { grid-template-columns: 1fr; }
	.spfl-split-flip .spfl-split-a { order: 0; }
}

@media (max-width: 860px) {
	.spfl-badges-inner { gap: 18px 28px; }
	.spfl-badge-item { max-width: 210px; }
	.spfl-badge-item img { height: 46px; }
	.spfl-badge-item span { font-size: .78rem; }
	.spfl-trust-inner { justify-content: flex-start; gap: 12px 24px; }
	.spfl-trust-item { font-size: .85rem; }
}

@media (max-width: 720px) {
	.spfl { font-size: 16px; }
	.spfl-s { padding-block: 52px; }
	.spfl-head { margin-bottom: 32px; }
	.spfl-form-card { padding: 24px 20px 22px; }
	.spfl-form-grid { grid-template-columns: 1fr; gap: 15px; }
	.spfl-ticks-boxed, .spfl-panel { padding: 22px; }
	.spfl-alert { padding: 26px 20px; }
	.spfl-card, .spfl-steps li { padding: 24px; }
	.spfl-facts-pills li { flex: 1 1 44%; min-width: 0; }
	.spfl section[id], .spfl [id] { scroll-margin-top: 72px; }
}

@media (max-width: 520px) {
	.spfl-h1 { font-size: 2.15rem; line-height: 1.12; }
	.spfl-h { font-size: 1.65rem; }
	.spfl-lede { font-size: 1rem; }
	.spfl .spfl-btn { width: 100%; padding: 16px 22px; }
	.spfl-cta-row { flex-direction: column; }
	.spfl-badges-inner { justify-content: flex-start; gap: 16px; }
	.spfl-badge-item { max-width: none; flex: 1 1 100%; }
	.spfl-table-row { flex-direction: column; align-items: flex-start; gap: 4px; }
	.spfl-table-value { text-align: left; }
	.spfl-faq-item summary { padding: 18px 20px; font-size: .98rem; gap: 14px; }
	.spfl-faq-a { padding: 0 20px 20px; }
	.spfl-sticky-inner { flex-direction: column; align-items: stretch; gap: 10px; }
	.spfl-sticky-text { display: none; }
	.spfl-sticky-actions .spfl-btn { flex: 1; }
	.spfl-float-wa { bottom: 86px; right: 14px; width: 52px; height: 52px; }
	.spfl-mapbox iframe { height: 260px; }
}

@media (pointer: coarse) {
	.spfl-jump a { padding: 11px 16px; }
	.spfl-faq-item summary { min-height: 58px; }
}

@media (prefers-reduced-motion: reduce) {
	.spfl *, .spfl *::before, .spfl *::after {
		transition-duration: .001ms !important;
		animation-duration: .001ms !important;
	}
	.spfl-hero-video { display: none; }
}

@media print {
	.spfl-jump, .spfl-sticky, .spfl-float-wa, .spfl-progress, .spfl-form-card, .spfl-hero-video { display: none !important; }
	.spfl-s { padding-block: 18px; break-inside: avoid; }
	.spfl-hero { background: #fff !important; min-height: 0; }
	.spfl-hero-tint, .spfl-hero-grid { display: none; }
	.spfl-h1, .spfl-hero .spfl-lede { color: #000 !important; }
}

/* ==========================================================================
   v4.1 — contrast fixes, hero figure, branding accents
   ========================================================================== */

/* Heading colour on dark backgrounds needed to beat `.spfl h2`. */
.spfl .spfl-h-invert,
.spfl-final h2,
.spfl-final h3,
.spfl-s-dark h2,
.spfl-s-dark h3 { color: #fff; }
.spfl-final p, .spfl-final .spfl-body { color: #C6DCD8; }

/* Hero side figure, now that the form has moved to the end of the page. */
.spfl-hero-figure {
	margin: 0;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(255, 255, 255, .06);
	border: 1px solid rgba(255, 255, 255, .16);
	box-shadow: 0 30px 60px rgba(3, 22, 20, .42);
}
.spfl-hero-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.spfl-hero-figure figcaption {
	padding: 18px 22px 20px;
	font-size: .92rem;
	line-height: 1.5;
	color: #C6DCD8;
}
.spfl-hero-figure-tag {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	background: rgba(232, 115, 12, .2);
	color: #FBBB77;
	font-family: var(--fh);
	font-size: .72rem;
	font-weight: 700;
	letter-spacing: .09em;
	text-transform: uppercase;
	padding: 5px 12px;
	border-radius: 999px;
	margin-bottom: 10px;
}
.spfl-hero-figure figcaption > .spfl-hero-figure-tag { display: inline-flex; }

/* Branding accent: a short orange rule opening every section heading block. */
.spfl-head > .spfl-h::before {
	content: '';
	display: block;
	width: 46px;
	height: 4px;
	border-radius: 4px;
	background: var(--o);
	margin-bottom: 20px;
}
.spfl-head-center > .spfl-h::before { margin-inline: auto; }
.spfl-s-dark .spfl-head > .spfl-h::before { background: #F7A85C; }

/* The dark band gets the drafting grid too, so branding carries through. */
.spfl-s-dark { position: relative; overflow: hidden; }
.spfl-s-dark > .spfl-wrap { position: relative; z-index: 1; }
.spfl-s-dark::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image:
		linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
		linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
	background-size: 64px 64px;
	mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 78%);
	-webkit-mask-image: radial-gradient(80% 70% at 50% 0%, #000, transparent 78%);
	pointer-events: none;
}

/* Form band reads as the conversion point, not another grey section. */
.spfl-formband { background: linear-gradient(180deg, var(--grey) 0%, #EDF2F2 100%); }
.spfl-formband .spfl-form-card { border: 1px solid var(--line); }

/* Cards: a quiet top accent on hover so the grid feels intentional. */
.spfl-card { position: relative; overflow: hidden; }
.spfl-card::after {
	content: '';
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: var(--o);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .22s ease;
}
.spfl-card:hover::after { transform: scaleX(1); }

/* Tighter, more legible tick lists. */
.spfl-ticks li { color: var(--body); }
.spfl-panel .spfl-ticks li { font-size: .97rem; }

/* --------------------------------------------------------- responsive v2 */

@media (max-width: 1024px) {
	.spfl-hero { padding-block: 56px 64px; }
	.spfl-hero-figure img { aspect-ratio: 16 / 9; }
	.spfl-facts-pills li { flex: 1 1 auto; }
}

@media (max-width: 760px) {
	.spfl-head > .spfl-h::before { width: 38px; height: 3px; margin-bottom: 16px; }
	.spfl-hero-figure { border-radius: 14px; }
	.spfl-media-card { min-height: 210px; }
	.spfl-media-split, .spfl-cards, .spfl-steps { gap: 14px; }
	.spfl-formband-inner { gap: 26px; }
	.spfl-badges-inner { padding-block: 20px; }
}

@media (max-width: 560px) {
	.spfl-facts-pills { gap: 8px; }
	.spfl-facts-pills li { flex: 1 1 100%; flex-direction: row; align-items: baseline; justify-content: space-between; padding: 10px 14px; }
	.spfl-facts-pills span { font-size: .66rem; }
	.spfl-hero-figure figcaption { padding: 14px 16px 16px; font-size: .86rem; }
	.spfl-badge { font-size: .72rem; padding: 7px 14px; }
	.spfl-badge-item { gap: 10px; }
	.spfl-badge-item img { height: 42px; }
	.spfl-alert { border-radius: 14px; }
	.spfl-chips li { font-size: .82rem; padding: 8px 13px; }
}

/* ------------------------------------------------------------- admin-free */
.spfl-hero-scroll { display: none; }
@media (min-width: 1025px) and (min-height: 700px) {
	.spfl-hero-scroll { display: flex; }
}

/* ==========================================================================
   v5.0 — new sections, and the sticky bar rebuilt for phones
   ========================================================================== */

/* ── Services grid ─────────────────────────────────────────────────────── */

.spfl-svc{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr));
	gap:18px;
}
.spfl .spfl-svc-card{
	display:flex;flex-direction:column;min-width:0;
	background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;
	text-decoration:none;color:inherit;
	box-shadow:0 1px 2px rgba(16,34,46,.05),0 14px 28px -20px rgba(16,34,46,.3);
	transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.spfl a.spfl-svc-card:hover{transform:translateY(-4px);border-color:var(--o);box-shadow:0 2px 4px rgba(16,34,46,.06),0 22px 38px -22px rgba(16,34,46,.42)}

.spfl-svc-img{
	position:relative;display:block;aspect-ratio:4/3;overflow:hidden;padding:12px;
	background:linear-gradient(160deg,#fff 0%,#EDF2F4 100%);
}
.spfl-svc-img::before{
	content:'';position:absolute;inset:0;pointer-events:none;
	background-image:linear-gradient(rgba(16,34,46,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(16,34,46,.04) 1px,transparent 1px);
	background-size:24px 24px;
}
.spfl-svc-img img{
	position:relative;z-index:1;width:100%;height:100%;object-fit:contain;
	pointer-events:none;-webkit-user-select:none;user-select:none;
	-webkit-user-drag:none;-webkit-touch-callout:none;
	filter:drop-shadow(0 6px 14px rgba(16,34,46,.14));
	transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.spfl-svc-card:hover .spfl-svc-img img{transform:scale(1.04)}
.spfl-svc-shield{
	position:absolute;inset:0;z-index:2;
	background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='140' viewBox='0 0 220 140'%3E%3Ctext x='110' y='74' font-family='Poppins,Arial,sans-serif' font-size='14' font-weight='700' letter-spacing='2.4' fill='%2310222E' fill-opacity='0.07' text-anchor='middle' transform='rotate(-24 110 74)'%3ESITE PLANS FL%3C/text%3E%3C/svg%3E");
	background-repeat:repeat;user-select:none;
}

.spfl-svc-body{display:flex;flex-direction:column;flex:1;padding:18px 20px 20px}
.spfl .spfl-svc-body strong{font-family:var(--fh);font-size:1.02rem;font-weight:700;color:var(--ink);line-height:1.3;margin-bottom:7px}
.spfl .spfl-svc-body > span{font-size:.9rem;line-height:1.55;color:var(--muted)}
.spfl-svc-go{
	display:inline-flex;align-items:center;gap:6px;margin-top:auto;padding-top:14px;
	font-family:var(--fh);font-size:.85rem;font-weight:700;color:var(--teal);
}
.spfl-svc-card:hover .spfl-svc-go{color:var(--o)}

/* ── Why us ────────────────────────────────────────────────────────────── */

.spfl-reasons{list-style:none;margin:26px 0 0;padding:0;display:grid;gap:18px}
.spfl-reasons li{display:flex;gap:14px;align-items:flex-start}
.spfl-reason-tick{
	flex:0 0 auto;display:inline-flex;align-items:center;justify-content:center;
	width:26px;height:26px;margin-top:2px;border-radius:8px;
	background:var(--o-soft);color:var(--o);
}
.spfl .spfl-reasons strong{display:block;font-family:var(--fh);font-size:1rem;font-weight:700;color:var(--ink);line-height:1.4;margin-bottom:2px}
.spfl .spfl-reasons em{font-style:normal;display:block;font-size:.93rem;line-height:1.55;color:var(--muted)}

/* ── Mid-page CTA band ─────────────────────────────────────────────────── */

.spfl-midcta{
	position:relative;overflow:hidden;
	background:linear-gradient(140deg,var(--teal) 0%,var(--deep) 100%);
}
.spfl-midcta > .spfl-wrap{position:relative;z-index:1}
.spfl-midcta-inner{
	display:grid;grid-template-columns:minmax(0,1fr) auto;
	gap:clamp(24px,4vw,56px);align-items:center;
}
.spfl-midcta .spfl-body{color:#C6DCD8;max-width:56ch;margin-bottom:18px}
.spfl-midcta-points{list-style:none;display:flex;flex-wrap:wrap;gap:10px 22px;margin:0;padding:0}
.spfl-midcta-points li{
	display:inline-flex;align-items:center;gap:9px;
	font-family:var(--fh);font-size:.92rem;font-weight:600;color:#fff;
}
.spfl-midcta-points .spfl-i{color:#F7A85C}
.spfl-midcta-action{flex:0 0 auto}

/* ── Reviews ───────────────────────────────────────────────────────────── */

.spfl-reviews{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,290px),1fr));
	gap:18px;
}
.spfl-review{
	margin:0;display:flex;flex-direction:column;
	background:#fff;border:1px solid var(--line);border-radius:14px;
	padding:26px 26px 22px;
	box-shadow:0 1px 2px rgba(16,34,46,.05),0 14px 30px -22px rgba(16,34,46,.3);
}
.spfl-stars{color:var(--o);font-size:1.02rem;letter-spacing:.14em;margin-bottom:12px}
.spfl .spfl-review blockquote{
	margin:0 0 18px;padding:0;border:0;font-size:.98rem;line-height:1.65;color:var(--body);
	quotes:none;
}
.spfl .spfl-review blockquote::before{content:'“';color:var(--o);font-weight:800}
.spfl .spfl-review blockquote::after{content:'”';color:var(--o);font-weight:800}
.spfl-review figcaption{margin-top:auto;padding-top:16px;border-top:1px solid var(--line)}
.spfl .spfl-review figcaption strong{display:block;font-family:var(--fh);font-size:.95rem;font-weight:700;color:var(--ink)}
.spfl .spfl-review figcaption span{display:block;font-size:.82rem;color:var(--muted);margin-top:2px}

/* ── Embedded shortcode output ─────────────────────────────────────────── */
.spfl-embed{margin-top:8px}
.spfl-embed > *:first-child{margin-top:0}

/* ══════════════════════════════════════════════════════════════════════
   Sticky bar — rebuilt. The old version stacked into a tall block on
   phones and covered the page; this keeps it to one compact row.
   ══════════════════════════════════════════════════════════════════════ */

.spfl-sticky{
	padding-bottom:env(safe-area-inset-bottom);
}
.spfl-sticky-inner{
	display:flex;align-items:center;justify-content:space-between;
	gap:16px;padding-block:12px;
}
.spfl-sticky-actions{display:flex;gap:10px;flex:0 0 auto}

@media (max-width:900px){
	.spfl-sticky-text{font-size:.86rem;line-height:1.4}
}

@media (max-width:640px){
	/* One row, both buttons side by side, text dropped — it never fitted. */
	.spfl-sticky-inner{
		flex-direction:row;
		align-items:center;
		gap:8px;
		padding-block:9px;
		padding-inline:12px;
	}
	.spfl-sticky-text{display:none}
	.spfl-sticky-actions{
		display:grid;
		grid-template-columns:1fr 1fr;
		gap:8px;
		width:100%;
	}
	.spfl .spfl-sticky-actions .spfl-btn{
		width:100%;
		min-width:0;
		padding:13px 10px;
		font-size:.86rem;
		gap:6px;
		white-space:nowrap;
		overflow:hidden;
		text-overflow:ellipsis;
		border-radius:9px;
	}
	/* The floating WhatsApp bubble must clear the bar. */
	.spfl-float-wa{bottom:calc(74px + env(safe-area-inset-bottom))}
}

@media (max-width:380px){
	.spfl .spfl-sticky-actions .spfl-btn{padding:12px 6px;font-size:.8rem;letter-spacing:-.01em}
}

/* Give the page room so the bar never sits on top of the last section. */
@media (max-width:640px){
	.spfl-final,.spfl-formband:last-of-type{padding-bottom:calc(52px + env(safe-area-inset-bottom))}
}

/* ── New sections, responsive ──────────────────────────────────────────── */

@media (max-width:900px){
	.spfl-midcta-inner{grid-template-columns:1fr;gap:24px}
	.spfl-midcta-action{width:100%}
	.spfl .spfl-midcta-action .spfl-btn{width:100%}
}

@media (max-width:720px){
	.spfl-svc{gap:14px}
	.spfl-svc-body{padding:16px 16px 18px}
	.spfl-review{padding:22px 20px 20px}
	.spfl-reasons{gap:15px}
	.spfl-midcta-points{gap:8px 16px}
	.spfl-midcta-points li{font-size:.88rem}
}

@media (max-width:480px){
	.spfl-svc{grid-template-columns:1fr}
	.spfl-svc-img{aspect-ratio:16/10}
	.spfl-reviews{grid-template-columns:1fr}
}

/* ==========================================================================
   v5.0.1 — spacing, alignment, moving reviews, 3-up process
   ========================================================================== */

/* ── Buttons were sitting right on top of the content above them ──────── */

.spfl .spfl-block-cta{
	margin:clamp(30px,3.5vw,46px) 0 0 !important;
	padding:0;
	clear:both;
}
.spfl .spfl-block-cta.spfl-center{text-align:center}
.spfl-svc + .spfl-block-cta,
.spfl-cards + .spfl-block-cta,
.spfl-steps + .spfl-block-cta,
.spfl-faq + .spfl-block-cta,
.spfl-ticks + .spfl-block-cta,
.spfl-reasons + .spfl-block-cta,
.spfl-note + .spfl-block-cta,
.spfl-prose + .spfl-block-cta{margin-top:clamp(32px,3.5vw,48px) !important}

/* Anything following a list or a panel needs air, not just the CTA. */
.spfl-ticks-boxed + .spfl-small,
.spfl-panel + .spfl-note{margin-top:20px}

/* ── Even split: text and image columns line up on the same baseline ──── */

.spfl-split-even{
	grid-template-columns:minmax(0,1fr) minmax(0,1fr);
	align-items:start;
	gap:clamp(30px,4vw,68px);
}
.spfl-split-even .spfl-split-a,
.spfl-split-even .spfl-split-b{min-width:0}

/* The image column fills its half instead of floating small inside it. */
.spfl-split-even .spfl-figure{width:100%;margin:0}
.spfl-split-even .spfl-figure img{width:100%;height:auto}

/* On a tall text column, let the image stay in view as you read. */
@media (min-width:1025px){
	.spfl-split-even .spfl-split-b > .spfl-figure{position:sticky;top:110px}
}

/* Prose should use the column it is given. */
.spfl-split-even .spfl-prose,
.spfl-split-even .spfl-body{max-width:none}

/* ── How it works: two rows of three ──────────────────────────────────── */

.spfl-steps{grid-template-columns:repeat(3,minmax(0,1fr))}

@media (max-width:900px){
	.spfl-steps{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:560px){
	.spfl-steps{grid-template-columns:1fr}
}

/* Make the six cards read as equal blocks rather than ragged ones. */
.spfl-steps li{display:flex;flex-direction:column}
.spfl-steps li p{margin-top:auto;padding-top:6px}

/* ── Reviews: one moving row ──────────────────────────────────────────── */

.spfl-marquee{
	position:relative;
	overflow:hidden;
	margin-top:8px;
	/* fade the edges so cards enter and leave rather than getting cut */
	-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
	mask-image:linear-gradient(90deg,transparent 0,#000 6%,#000 94%,transparent 100%);
}
.spfl-marquee-track{
	display:flex;
	width:max-content;
	animation:spfl-scroll 46s linear infinite;
}
.spfl-marquee:hover .spfl-marquee-track,
.spfl-marquee:focus-within .spfl-marquee-track{animation-play-state:paused}

.spfl-marquee-set{display:flex;gap:18px;padding-right:18px}

@keyframes spfl-scroll{
	from{transform:translateX(0)}
	to{transform:translateX(-50%)}
}

.spfl-marquee .spfl-review{
	flex:0 0 clamp(280px,26vw,360px);
	margin:0;
}

/* Motion off — becomes a normal scrollable row. */
@media (prefers-reduced-motion:reduce){
	.spfl-marquee{overflow-x:auto;-webkit-mask-image:none;mask-image:none}
	.spfl-marquee-track{animation:none;width:auto}
	.spfl-marquee-set:last-child{display:none}
}

/* Touch devices: swipe it instead of watching it. */
@media (hover:none){
	.spfl-marquee{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch}
	.spfl-marquee-track{animation:none;width:auto}
	.spfl-marquee-set:last-child{display:none}
	.spfl-marquee .spfl-review{scroll-snap-align:center}
	.spfl-marquee::-webkit-scrollbar{height:0}
}

/* ── Services grid: give the cards room to breathe ───────────────────── */

.spfl-svc{margin-top:clamp(28px,3vw,40px)}

/* ── Section heads never sit flush against what follows ──────────────── */

.spfl-head{margin-bottom:clamp(30px,3.5vw,48px)}
.spfl-head + .spfl-ticks,
.spfl-head + .spfl-prose{margin-top:0}

/* ── Embedded shortcodes shouldn't inherit our centred head spacing ──── */
.spfl-embed{margin-top:0}

/* ── Mobile pass over everything added in 5.0 ────────────────────────── */

@media (max-width:1024px){
	.spfl-split-even{grid-template-columns:1fr;gap:28px}
	.spfl-split-even .spfl-split-b > .spfl-figure{position:static}
	.spfl-split-even.spfl-split-flip .spfl-split-a{order:0}
}

@media (max-width:720px){
	.spfl .spfl-block-cta{margin-top:26px !important}
	.spfl .spfl-block-cta .spfl-btn{width:100%}
	.spfl-marquee{-webkit-mask-image:none;mask-image:none}
	.spfl-marquee .spfl-review{flex:0 0 84vw}
	.spfl-steps li{padding:22px}
}

/* ==========================================================================
   v5.0.1 — layout polish
   ========================================================================== */

/* ── Embedded shortcode sections ──────────────────────────────────────── */

/* A shortcode brings its own padding. Ours was stacking on top of it and
   leaving a dead band of whitespace. */
.spfl-embed{margin:0}
.spfl-embed > *:first-child{margin-top:0 !important}
.spfl-embed > *:last-child{margin-bottom:0 !important}

/* Most embedded sections paint their own background, so drop ours. */
#case-studies{padding-block:0;background:transparent}
#case-studies > .spfl-wrap{padding-inline:0;max-width:none}
#case-studies .spfl-head{
	max-width:var(--wrap);
	margin-inline:auto;
	padding-inline:clamp(18px,4vw,40px);
	padding-top:clamp(56px,7vw,96px);
}

/* ── Vertical rhythm ──────────────────────────────────────────────────── */

/* Two dark or two grey bands running together read as one long block. */
.spfl-s-dark + .spfl-s-dark{padding-top:0}
.spfl-midcta + .spfl-s{padding-top:clamp(56px,7vw,96px)}

/* A section whose heading block is missing should not keep its head spacing. */
.spfl-s > .spfl-wrap > .spfl-head:empty{display:none}

/* ── Section heads ────────────────────────────────────────────────────── */

/* Centred heads were drifting wider than the content beneath them. */
.spfl-head-center{max-width:min(62ch,860px)}

/* ── Cards line up even when the copy lengths differ ──────────────────── */

.spfl-cards,.spfl-svc,.spfl-reviews{align-items:stretch}
.spfl-card,.spfl-svc-card{height:100%}

/* ── Figures never overflow their column ──────────────────────────────── */

.spfl-figure{max-width:100%;overflow:hidden}
.spfl-figure img{display:block;width:100%;height:auto}

/* ── Prose links inside sections stay legible ─────────────────────────── */

.spfl-prose a{text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.spfl-prose a:hover{text-decoration-thickness:2px}

/* ── Trust and badge strips centre properly when they wrap ────────────── */

@media (max-width:1100px){
	.spfl-trust-inner{justify-content:center;text-align:center}
}

/* ── Mid-page CTA: keep the button from stretching oddly ──────────────── */

.spfl-midcta-action .spfl-btn{white-space:nowrap}

/* ── Final mobile sweep ───────────────────────────────────────────────── */

@media (max-width:640px){
	#case-studies .spfl-head{padding-top:44px}
	.spfl-head-center{max-width:none}
	.spfl-hero-figure figcaption{font-size:.84rem}
	.spfl-facts-pills li{padding:11px 14px}
	.spfl-table-head{font-size:.72rem;letter-spacing:.09em}
	.spfl-alert{border-radius:14px}
	.spfl-reasons li{gap:12px}
	.spfl-svc-body{padding:16px 16px 18px}
	.spfl-review blockquote{font-size:.94rem}
}

@media (max-width:400px){
	.spfl-wrap{padding-inline:14px}
	.spfl-badge{font-size:.68rem;padding:6px 12px}
	.spfl-h1{font-size:1.95rem}
	.spfl-stars{font-size:.94rem}
}

/* ==========================================================================
   v5.1 — trust badges made visible, and reassurance copy at each CTA
   ========================================================================== */

/* ── Trust badges ─────────────────────────────────────────────────────── */

/* They were a faint grey strip that read as decoration. Now they read as
   proof: a labelled band, bigger marks, each on its own card. */
.spfl-badges{
	background:linear-gradient(180deg,#FFFFFF 0%,var(--grey) 100%);
	border-bottom:1px solid var(--line);
	padding-block:clamp(26px,3vw,42px);
}

.spfl .spfl-badges-label{
	margin:0 0 20px;
	text-align:center;
	font-family:var(--fh);
	font-size:.76rem;
	font-weight:700;
	letter-spacing:.15em;
	text-transform:uppercase;
	color:var(--muted);
}

.spfl-badges-inner{
	display:grid;
	grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));
	gap:14px;
	padding-block:0;
	align-items:stretch;
}

.spfl-badge-item{
	display:flex;
	align-items:center;
	gap:14px;
	max-width:none;
	min-width:0;
	background:#fff;
	border:1px solid var(--line);
	border-radius:14px;
	padding:16px 18px;
	box-shadow:0 1px 2px rgba(16,34,46,.05),0 14px 28px -22px rgba(16,34,46,.35);
	transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.spfl-badge-item:hover{
	transform:translateY(-3px);
	border-color:var(--o);
	box-shadow:0 2px 4px rgba(16,34,46,.06),0 20px 34px -22px rgba(16,34,46,.45);
}

.spfl-badge-item img{
	height:64px;
	width:auto;
	max-width:76px;
	object-fit:contain;
	flex:0 0 auto;
	filter:none;
}
.spfl .spfl-badge-item span{
	font-family:var(--fh);
	font-size:.9rem;
	font-weight:600;
	line-height:1.4;
	color:var(--ink);
}

/* ── Reassurance line under buttons ───────────────────────────────────── */

.spfl .spfl-cta-note{
	display:inline-flex;
	align-items:center;
	gap:8px;
	margin:14px 0 0;
	font-size:.88rem;
	font-weight:600;
	color:var(--muted);
}
.spfl .spfl-cta-note .spfl-i{color:#1D7A4C}
.spfl .spfl-cta-note-invert{color:#A9C6C1}
.spfl .spfl-cta-note-invert .spfl-i{color:#7FD8C6}
.spfl-center .spfl-cta-note,
.spfl-cta-center + .spfl-cta-note{justify-content:center;width:100%}

/* ── Hero promise line ────────────────────────────────────────────────── */

.spfl .spfl-promise{
	margin:14px 0 0;
	padding-left:14px;
	border-left:3px solid var(--o);
	font-size:.95rem;
	line-height:1.6;
	color:#C6DCD8;
	max-width:52ch;
}

/* ── Responsive ───────────────────────────────────────────────────────── */

@media (max-width:860px){
	.spfl-badge-item{padding:14px 15px;gap:12px}
	.spfl-badge-item img{height:52px;max-width:62px}
	.spfl .spfl-badge-item span{font-size:.84rem}
}

@media (max-width:640px){
	.spfl-badges-inner{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
	.spfl-badge-item{flex-direction:column;text-align:center;gap:10px;padding:16px 12px}
	.spfl-badge-item img{height:48px;max-width:60px}
	.spfl .spfl-badge-item span{font-size:.78rem;line-height:1.35}
	.spfl-badge-item:hover{transform:none}
	.spfl .spfl-badges-label{margin-bottom:14px;font-size:.7rem}
	.spfl .spfl-cta-note{font-size:.83rem;justify-content:center;width:100%}
	.spfl .spfl-promise{font-size:.9rem;padding-left:12px}
}

@media (max-width:400px){
	.spfl-badges-inner{grid-template-columns:1fr}
	.spfl-badge-item{flex-direction:row;text-align:left}
}