/* Savvy Fire Protection — design system (home/footer redesign: docs/DESIGN-NOTES.md).
   1 Fonts · 2 Tokens · 3 Base · 4 Layout · 5 Buttons · 6 Header/nav · 7 Breadcrumbs · 8 Footer ·
   9 Mobile CTA bar · 10 Components (cards, CTA band, facts strip, FAQ) · 11 Archives · 12 Style guide · 14 Pages · 15 Home sections · 13 Motion */

/* 1 Fonts — Inter variable (SIL OFL), self-hosted. Fallback metrics limit layout shift while it loads. */
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-ext-wght-normal.woff2") format("woff2");
	unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
	font-family: "Barlow Condensed";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/barlow-condensed-latin-700-normal.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107.4%;
	ascent-override: 90.2%;
	descent-override: 22.5%;
	line-gap-override: 0%;
}
/* Heading face fallback: Arial Bold scaled to Barlow Condensed's average width (measured over the site's heading strings)
   and vertical metrics, so the swap moves little. size-adjust 75.63%; ascent 1.000 and descent 0.200 em / 0.7563. */
@font-face {
	font-family: "Barlow Condensed Fallback";
	src: local("Arial Bold"), local("Arial-BoldMT");
	font-weight: 700;
	size-adjust: 75.63%;
	ascent-override: 132.22%;
	descent-override: 26.44%;
	line-gap-override: 0%;
}

/* 2 Tokens. Existing site palette retained (red #de2626, navy #122c51; the dark navy
   is derived from it at the same hue). Every ratio is measured by the style guide
   (/style-guide/ reads this block). Rules of use:
   - Red fills (buttons, bars, borders, focus ring): --color-accent; white on it 4.76:1.
   - Red as TEXT on light backgrounds (eyebrows, links on hover): --color-accent-hover (6.07:1 on white, 5.60:1 on alt).
   - On dark (#0a192e / #122c51): never red text. White for text; --color-accent-on-dark (light red) for small icons only. */
:root {
	/* Brand */
	--color-primary: #122c51; /* = logo navy */
	--color-primary-dark: #0a192e; /* same hue (215deg) and saturation as primary, lightness 19% -> 11% */
	--color-primary-hover: #183b6c; /* same hue, lightness 26% */
	--color-hero-end: #1b5fb0; /* brighter blue, same hue family: lightest point of the hero gradient (white on it 6.34:1) */
	--color-secondary: #526779;
	--color-accent: #de2626;
	--color-accent-hover: #c01f1f;
	--color-accent-tint: #fdeeee;
	--color-accent-on-dark: #ff9a9a;
	--color-primary-tint: #e8eef7; /* pale navy wash: AFSS panel, testimonials band, notices */
	--color-exit: var(--color-success); /* exit marker on the evacuation-plan illustration */

	/* Text, surfaces, lines */
	--color-text: #25313b;
	--color-muted: #526779;
	--color-background: #ffffff;
	--color-background-alt: #f3f6f8;
	--color-border: #d8e0e6;
	--color-control-border: #7d8f9e; /* >= 3:1 on white for form controls and UI outlines */
	--color-white: #ffffff;
	--color-on-accent: #ffffff;
	--color-on-dark: #ffffff;
	--color-on-dark-muted: #d5dee6;
	--color-focus: var(--color-accent);
	--color-focus-on-dark: #ffffff;

	/* Overlays on dark backgrounds */
	--overlay-on-dark: rgb(255 255 255 / 12%);
	--line-on-dark-faint: rgb(255 255 255 / 15%);
	--line-on-dark: rgb(255 255 255 / 22%);
	--line-on-dark-strong: rgb(255 255 255 / 50%);
	--line-plan-wall: rgb(255 255 255 / 30%); /* hero floor drawing (D2): walls, one weight */
	--line-plan-swing: rgb(255 255 255 / 22%); /* door-swing arcs */
	--line-plan-leader: rgb(255 255 255 / 60%); /* callout leader lines and the "You are here" ring */
	--overlay-grid: rgb(255 255 255 / 5%); /* drafting-paper grid lines in the hero */

	/* Status colours (always paired with an icon and text, never colour alone) */
	--color-success: #1e6b3a;
	--color-success-bg: #e9f6ee;
	--color-success-text: #14391f;
	--color-error: #a4161a;
	--color-error-bg: #fdecec;
	--color-error-text: #5c0b0d;
	--color-warning-bg: #fff3bf;
	--color-warning-text: #4a3b00;

	--width-container: 76rem;
	--width-content: 40rem;
	--height-header: 4.75rem;
	--height-cta-bar: 4.25rem;

	--font-body: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-heading: "Barlow Condensed", "Barlow Condensed Fallback", "Arial Narrow", sans-serif; /* 700 only; headings and large numerals (D1) */
	--font-size-small: 0.875rem;
	--font-size-body: 1rem;
	--font-size-large: 1.125rem;
	--font-size-h4: 1.25rem;
	--font-size-h3: clamp(1.375rem, 1.2rem + 0.7vw, 1.65rem);
	--font-size-h2: clamp(1.9rem, 1.4rem + 1.75vw, 2.75rem);
	--font-size-display: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); /* statements and large quotes */
	--font-size-phone: clamp(2.5rem, 1.3rem + 4.8vw, 4.4rem); /* footer phone number */
	--font-size-h1: clamp(2.25rem, 1.65rem + 2.65vw, 3.6rem);
	--font-weight-regular: 400;
	--font-weight-medium: 500;
	--font-weight-semibold: 600;
	--font-weight-bold: 700;
	--font-weight-display: 800;

	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 0.75rem;
	--space-4: 1rem;
	--space-5: 1.5rem;
	--space-6: 2rem;
	--space-7: 3rem;
	--space-8: 4rem;
	--space-9: 6rem; /* hero and quote-section spacing (D2) */
	--section-space: clamp(3rem, 7vw, 5.5rem);

	--radius-small: 0.25rem;
	--radius-medium: 0.5rem;
	--radius-large: 0.875rem;
	--shadow-small: 0 1px 3px rgb(18 44 81 / 10%);
	--shadow-medium: 0 8px 24px rgb(18 44 81 / 12%);
	--shadow-large: 0 16px 40px rgb(18 44 81 / 16%);
	--shadow-bar: 0 -4px 16px rgb(18 44 81 / 14%);
	--transition-fast: 150ms ease;
	--transition-standard: 220ms ease;
	--tap-target: 2.75rem; /* 44px minimum touch target */
}

/* 3 Base */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	color: var(--color-text);
	background: var(--color-background);
	font-family: var(--font-body);
	font-size: var(--font-size-body);
	font-weight: var(--font-weight-regular);
	line-height: 1.6;
	overflow-x: clip;
	-webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; height: auto; }
a { color: var(--color-primary); text-underline-offset: 0.18em; transition: color var(--transition-fast); }
a:hover { color: var(--color-accent-hover); }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: 2px; }
.site-footer :focus-visible,
.sps-band--dark :focus-visible { outline-color: var(--color-focus-on-dark); }
h1, h2, h3, h4, h5, h6 {
	margin-block: 0 var(--space-4);
	color: var(--color-primary);
	font-family: var(--font-heading);
	font-weight: var(--font-weight-bold);
	line-height: 1.2;
	letter-spacing: 0;
	text-wrap: balance;
}
h1 { font-size: var(--font-size-h1); }
h2 { font-size: var(--font-size-h2); }
h3 { font-size: var(--font-size-h3); }
h4 { font-size: var(--font-size-h4); }
p { margin-block: 0 var(--space-4); }
:target { scroll-margin-top: calc(var(--height-header) + var(--space-4)); }

/* 4 Layout */
.container { width: min(calc(100% - 2 * var(--space-4)), var(--width-container)); margin-inline: auto; }
.content-container {
	width: min(calc(100% - 2 * var(--space-4)), var(--width-content));
	margin-inline-start: max(var(--space-4), calc((100% - var(--width-container)) / 2));
	margin-inline-end: 0;
}
.section { padding-block: var(--section-space); }
.section--alternate { background: var(--color-background-alt); }
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	z-index: 100000;
	width: auto;
	height: auto;
	clip: auto;
	padding: var(--space-3) var(--space-4);
	margin: 0;
	color: var(--color-primary);
	background: var(--color-background);
	box-shadow: var(--shadow-medium);
}
.skip-link:focus { position: fixed; top: var(--space-2); left: var(--space-2); }
.site-main { min-height: 55vh; padding-block: clamp(var(--space-6), 5vw, var(--space-8)); }
.site-main--flush { padding-block: 0; }
.entry__title,
.archive-title,
.not-found h1,
.no-results h1,
.no-results h2 { color: var(--color-primary); line-height: 1.2; }
.entry__title a { color: inherit; text-decoration: none; }
.entry__meta { color: var(--color-muted); font-size: var(--font-size-small); }
.entry__image { margin-block: var(--space-5); }
.entry__image img { display: block; }
.entry__content > * { max-width: 100%; }
.entry__content .alignwide { width: min(calc(100vw - 2 * var(--space-4)), var(--width-container)); max-width: none; margin-inline: calc(50% - min(50vw - var(--space-4), var(--width-container) / 2)); }
.entry__content .alignfull { width: 100vw; max-width: 100vw; margin-inline: calc(50% - 50vw); }
.archive-header { margin-bottom: var(--space-6); }

/* 5 Buttons — all >= 44px tall. Primary = accessible orange; secondary = navy outline; ghost for dark bands. */
.button,
.wp-block-button__link {
	display: inline-flex;
	min-height: var(--tap-target);
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-2) var(--space-5);
	border: 2px solid transparent;
	border-radius: var(--radius-small);
	font-weight: var(--font-weight-semibold);
	font-size: var(--font-size-body);
	line-height: 1.25;
	text-align: center;
	text-decoration: none;
	transition: background-color var(--transition-standard), border-color var(--transition-standard), color var(--transition-standard), transform var(--transition-standard);
	cursor: pointer;
}
.button:hover { transform: translateY(-1px); }
.button--primary,
.is-style-sps-primary .wp-block-button__link,
.wp-block-button:not([class*="is-style-sps-"]) .wp-block-button__link { color: var(--color-on-accent); background: var(--color-accent); }
.button--primary:hover,
.is-style-sps-primary .wp-block-button__link:hover,
.wp-block-button:not([class*="is-style-sps-"]) .wp-block-button__link:hover { color: var(--color-on-accent); background: var(--color-accent-hover); }
.button--navy { color: var(--color-on-dark); background: var(--color-primary); }
.button--navy:hover { color: var(--color-on-dark); background: var(--color-primary-hover); }
.button--secondary,
.is-style-sps-secondary .wp-block-button__link { color: var(--color-primary); border-color: var(--color-primary); background: transparent; }
.button--secondary:hover,
.is-style-sps-secondary .wp-block-button__link:hover { color: var(--color-on-dark); background: var(--color-primary); }
.button--ghost,
.is-style-sps-ghost .wp-block-button__link { color: var(--color-on-dark); border-color: var(--color-on-dark); background: transparent; }
.button--ghost:hover,
.is-style-sps-ghost .wp-block-button__link:hover { color: var(--color-primary); background: var(--color-on-dark); }
.button--large { min-height: 3.25rem; padding-inline: var(--space-6); font-size: var(--font-size-large); }
.button--block { display: flex; width: 100%; }
.button-row,
.wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin-block: 0 var(--space-4); }
.button-row > *, .wp-block-buttons > .wp-block-button { margin: 0; }

/* 6 Header and navigation (D1, option A: light bar, quiet menu). Red stays on buttons; the current section is underlined in navy.
   Desktop mega menu from 72.0625rem (theme.js reads the same 72rem); tablet and phone use the collapsible panel. */
.site-header { position: relative; z-index: 50; border-bottom: 1px solid var(--color-border); background: var(--color-background); }
.site-header__inner { min-height: var(--height-header); display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-between; gap: var(--space-5); }
.site-branding { flex: 0 0 auto; min-width: 0; }
.site-title { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-primary); font-size: 1.25rem; font-weight: var(--font-weight-bold); line-height: 1.1; text-decoration: none; letter-spacing: -0.015em; }
.site-title:hover { color: var(--color-primary); }
.site-title__mark { width: 0.5rem; align-self: stretch; border-radius: 2px; background: var(--color-accent); }
.custom-logo-link { display: inline-flex; align-items: center; }
.custom-logo { display: block; width: auto; max-width: min(15rem, 44vw); max-height: 3.5rem; object-fit: contain; }
.site-tagline { margin: var(--space-1) 0 0; color: var(--color-muted); font-size: var(--font-size-small); line-height: 1.3; }
.header-panel { display: flex; flex: 1 1 auto; align-items: center; justify-content: space-between; gap: var(--space-5); min-width: 0; }
.primary-navigation { min-width: 0; }
.navigation-menu,
.sub-menu,
.footer-link-list { margin: 0; padding: 0; list-style: none; }
.primary-navigation .navigation-menu { display: flex; align-items: center; gap: 0; margin-left: var(--space-2); }
.navigation-menu .menu-item { position: static; }
.navigation-menu a { color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.primary-navigation .navigation-menu > .menu-item > .menu-item__row > a,
.primary-navigation .navigation-menu > .menu-item > a { display: inline-flex; min-height: var(--tap-target); align-items: center; padding-inline: var(--space-2); font-weight: var(--font-weight-medium); box-shadow: inset 0 -3px 0 transparent; transition: box-shadow var(--transition-fast), color var(--transition-fast); }
.navigation-menu a:hover { color: var(--color-primary); }
.primary-navigation .navigation-menu > .menu-item > .menu-item__row > a:hover,
.primary-navigation .navigation-menu > .menu-item > a:hover { box-shadow: inset 0 -3px 0 var(--color-secondary); }
.primary-navigation .navigation-menu > .current-menu-item > a,
.primary-navigation .navigation-menu > .current-menu-item > a:hover,
.primary-navigation .navigation-menu > .current-menu-item > .menu-item__row > a,
.primary-navigation .navigation-menu > .current-menu-item > .menu-item__row > a:hover,
.primary-navigation .navigation-menu > .current-menu-ancestor > a,
.primary-navigation .navigation-menu > .current-menu-ancestor > a:hover,
.primary-navigation .navigation-menu > .current-menu-ancestor > .menu-item__row > a,
.primary-navigation .navigation-menu > .current-menu-ancestor > .menu-item__row > a:hover,
.primary-navigation .navigation-menu > .current-menu-parent > .menu-item__row > a,
.primary-navigation .navigation-menu > .current-menu-parent > .menu-item__row > a:hover { box-shadow: inset 0 -3px 0 var(--color-primary); font-weight: var(--font-weight-bold); }
.menu-item__row { display: flex; align-items: center; }
.submenu-toggle {
	display: inline-flex; width: 2.25rem; height: var(--tap-target); margin-left: calc(-1 * var(--space-2)); align-items: center; justify-content: center;
	padding: 0; border: 0; border-radius: var(--radius-small); color: var(--color-primary); background: transparent; cursor: pointer;
}
.submenu-toggle__icon { width: 0.55rem; height: 0.55rem; margin-top: -0.2rem; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform var(--transition-fast); }
.submenu-toggle[aria-expanded="true"] .submenu-toggle__icon { margin-top: 0.15rem; transform: rotate(-135deg); }
.header-actions { display: flex; flex: 0 0 auto; align-items: center; gap: var(--space-4); }
.header-phone { display: inline-flex; min-height: var(--tap-target); align-items: center; gap: var(--space-2); color: var(--color-primary); text-decoration: none; white-space: nowrap; }
.header-phone .icon { flex: none; }
.header-phone__text { display: flex; flex-direction: column; justify-content: center; line-height: 1.1; }
.header-phone__label { color: var(--color-muted); font-size: var(--font-size-small); }
.header-phone__number { font-family: var(--font-heading); font-size: 1.5rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.header-phone:hover { color: var(--color-accent-hover); }
.menu-toggle { display: none; }

/* Desktop mega menu: full-width white panel, links in three columns under a "View all" row. */
@media (min-width: 72.0625rem) {
	.primary-navigation .sub-menu {
		position: absolute; top: 100%; left: 0; right: 0; z-index: 60;
		display: none; column-count: 3; column-gap: var(--space-6);
		padding-block: var(--space-5) var(--space-6); padding-inline: max(var(--space-4), calc((100% - var(--width-container)) / 2));
		border-bottom: 1px solid var(--color-border); background: var(--color-background); box-shadow: var(--shadow-large);
	}
	.primary-navigation .sub-menu.is-open { display: block; }
	/* No-JS fallback: hover and keyboard focus open the panel. */
	html:not(.has-js) .primary-navigation .menu-item-has-children:hover > .sub-menu,
	html:not(.has-js) .primary-navigation .menu-item-has-children:focus-within > .sub-menu { display: block; }
	html:not(.has-js) .submenu-toggle { display: none; }
	.sub-menu li { break-inside: avoid; }
	.sub-menu .menu-item__all { column-span: all; margin-bottom: var(--space-3); padding-bottom: var(--space-2); border-bottom: 1px solid var(--color-border); }
	.sub-menu a { display: flex; min-height: var(--tap-target); align-items: center; padding: var(--space-2) var(--space-3); border-radius: var(--radius-small); font-weight: var(--font-weight-medium); white-space: normal; }
	.sub-menu a:hover { background: var(--color-background-alt); }
	.sub-menu .menu-item__all a { padding-inline: 0; font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: 0.18em; }
	.sub-menu .menu-item__all a:hover { background: transparent; }
	.sub-menu .menu-item__all a::after { content: "→" / ""; margin-left: var(--space-2); }
	.header-actions { gap: var(--space-3); }
}
@media (min-width: 72.0625rem) and (max-width: 82rem) {
	.site-header__inner,
	.header-panel { gap: var(--space-3); }
	.header-phone__label { display: none; }
	.header-phone__number { font-size: 1.375rem; }
	.header-phone .icon { display: none; }
}

/* Tablet/mobile: collapsible panel with accordion sub-menus. */
@media (max-width: 72rem) {
	.site-header__inner { flex-wrap: wrap; justify-content: space-between; padding-block: var(--space-2); }
	.menu-toggle { min-width: var(--tap-target); height: var(--tap-target); align-items: center; justify-content: center; border: 1px solid var(--color-control-border); border-radius: var(--radius-small); color: var(--color-primary); background: var(--color-background); cursor: pointer; }
	.has-js .menu-toggle { display: inline-flex; }
	.header-panel { flex-basis: 100%; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-4); padding-block: var(--space-2) var(--space-4); }
	.has-js .header-panel { display: none; }
	.has-js .header-panel.is-open { display: flex; }
	.primary-navigation .navigation-menu { align-items: stretch; flex-direction: column; margin-left: 0; }
	.primary-navigation .navigation-menu > .menu-item { border-bottom: 1px solid var(--color-border); }
	.primary-navigation .navigation-menu > .menu-item > a { display: flex; }
	.primary-navigation .navigation-menu > .menu-item > .menu-item__row > a,
	.primary-navigation .navigation-menu > .menu-item > a,
	.primary-navigation .navigation-menu > .menu-item > .menu-item__row > a:hover,
	.primary-navigation .navigation-menu > .menu-item > a:hover { box-shadow: none; font-size: var(--font-size-large); }
	.menu-item__row { justify-content: space-between; }
	.menu-item__row > a { flex: 1; }
	.submenu-toggle { width: var(--tap-target); margin-left: 0; }
	.has-js .sub-menu { display: none; padding: 0 0 var(--space-3) var(--space-4); }
	.has-js .sub-menu.is-open { display: block; }
	html:not(.has-js) .submenu-toggle { display: none; }
	.sub-menu a { display: flex; min-height: var(--tap-target); align-items: center; padding-inline: var(--space-3); white-space: normal; }
	.sub-menu .menu-item__all a { padding-inline: 0; color: var(--color-primary); font-weight: var(--font-weight-bold); text-decoration: underline; text-underline-offset: 0.18em; }
	.sub-menu .menu-item__all a::after { content: "→" / ""; margin-left: var(--space-2); }
	.header-actions { flex-wrap: wrap; justify-content: flex-start; }
	.menu-toggle__icon,
	.menu-toggle__icon::before,
	.menu-toggle__icon::after { display: block; width: 1.25rem; height: 2px; background: currentColor; }
	.menu-toggle__icon { position: relative; }
	.menu-toggle__icon::before,
	.menu-toggle__icon::after { position: absolute; left: 0; content: ""; }
	.menu-toggle__icon::before { top: -0.4rem; }
	.menu-toggle__icon::after { top: 0.4rem; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon { background: transparent; }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before { top: 0; transform: rotate(45deg); }
	.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after { top: 0; transform: rotate(-45deg); }
}
@media (max-width: 30rem) {
	.header-actions { flex-direction: column; align-items: stretch; }
	.header-actions .button { width: 100%; }
}

/* 7 Breadcrumbs */
.breadcrumbs { border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); font-size: var(--font-size-small); }
.breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; margin-block: 0; padding-block: var(--space-2); padding-inline: 0; list-style: none; }
.breadcrumbs__item { display: inline-flex; align-items: center; min-height: 1.75rem; color: var(--color-muted); }
.breadcrumbs__item + .breadcrumbs__item::before { content: "/"; margin-inline: var(--space-2); color: var(--color-muted); }
.breadcrumbs a { display: inline-flex; min-height: 1.75rem; align-items: center; color: var(--color-primary); }
.breadcrumbs [aria-current="page"] { color: var(--color-text); font-weight: var(--font-weight-medium); }
/* Phones (560px and below): one line, never wrapping. Earlier crumbs keep their size; the current page shrinks and ends in an ellipsis.
   The whole trail stays in the markup, visible and in the tab order (DECISIONS C5-1). */
@media (max-width: 35rem) {
	.breadcrumbs__list { flex-wrap: nowrap; }
	.breadcrumbs__item { flex: 0 0 auto; white-space: nowrap; }
	.breadcrumbs__item:last-child { flex: 0 1 auto; min-width: 0; }
	.breadcrumbs__item:last-child > [aria-current="page"] { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* 8 Footer — call-to-action strip, brand tile, three calm columns (links, services, contact), legal row. No boxed contact card. */
.site-footer { color: var(--color-on-dark); background: var(--color-primary); }
.site-footer a { color: var(--color-on-dark); }

/* Call-to-action strip: large phone number + quote button */
.footer-cta { padding-block: clamp(2.5rem, 6vw, 4rem); background: var(--color-primary-dark); }
.footer-cta__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5) var(--space-7); }
.footer-cta__text { min-width: 0; }
.footer-cta__title { margin: 0 0 var(--space-2); color: var(--color-on-dark); font-size: var(--font-size-h3); font-weight: var(--font-weight-bold); letter-spacing: 0; }
.footer-cta__phone { display: inline-block; padding-block: var(--space-1); color: var(--color-on-dark); font-family: var(--font-heading); font-size: var(--font-size-phone); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; letter-spacing: 0; line-height: 1.05; text-decoration: underline; text-decoration-thickness: 3px; text-decoration-color: var(--line-on-dark-strong); text-underline-offset: 0.15em; white-space: nowrap; }
.site-footer .footer-cta__phone:hover { color: var(--color-on-dark); text-decoration-color: var(--color-on-dark); }
.footer-cta__note { max-width: 34rem; margin: var(--space-2) 0 0; color: var(--color-on-dark-muted); }
.footer-cta .button { flex: 0 0 auto; }

/* Brand row: white logo tile + one line about the business */
.site-footer__main { padding-block: var(--space-7) var(--space-5); }
.site-footer__brand { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4) var(--space-6); padding-bottom: var(--space-6); border-bottom: 1px solid var(--line-on-dark); }
.footer-brand__logo { display: inline-flex; align-items: center; justify-content: center; padding: var(--space-3); border-radius: var(--radius-medium); background: var(--color-background); line-height: 0; }
.footer-brand__logo img,
.footer-brand__logo .custom-logo { display: block; width: auto; max-width: none; height: 3.5rem; max-height: none; }
.footer-brand__logo .custom-logo-link { display: inline-flex; }
.footer-brand__text { min-width: 0; max-width: 40rem; }
.footer-brand__text p { margin: 0; color: var(--color-on-dark-muted); }
.footer-badge { display: inline-block; margin-top: var(--space-3) !important; padding: var(--space-1) var(--space-3); border: 1px dashed var(--line-on-dark-strong); border-radius: var(--radius-small); font-size: var(--font-size-small); }

/* Columns */
.footer-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.2fr); gap: var(--space-6) var(--space-7); padding-top: var(--space-6); }
.footer-column__title { margin: 0 0 var(--space-3); color: var(--color-on-dark); font-size: 1.25rem; font-weight: var(--font-weight-bold); letter-spacing: 0; text-transform: none; }
.footer-link-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer-link-list a,
.footer-legal-list a { display: inline-block; padding-block: var(--space-1); color: var(--color-on-dark-muted); line-height: 1.4; text-decoration: underline; text-decoration-color: transparent; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.site-footer .footer-link-list a,
.site-footer .footer-legal-list a { color: var(--color-on-dark-muted); }
.site-footer .footer-link-list a:hover,
.site-footer .footer-legal-list a:hover { color: var(--color-on-dark); text-decoration-color: currentColor; }

/* Contact column: plain icon rows */
.footer-rows { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer-rows li { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: var(--space-3); align-items: start; margin: 0; line-height: 1.45; }
.footer-icon { display: inline-flex; justify-content: center; padding-top: 0.15rem; color: var(--color-on-dark-muted); }
.footer-icon .icon { display: block; }
.footer-rows a { overflow-wrap: anywhere; text-decoration: underline; text-decoration-color: var(--line-on-dark-strong); text-underline-offset: 0.2em; }
.site-footer .footer-rows a:hover { text-decoration-color: var(--color-on-dark); }
.footer-rows address { font-style: normal; }
.footer-hours { color: var(--color-on-dark-muted); }
.footer-social { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-5); margin: var(--space-4) 0 0; padding: 0; list-style: none; font-size: 0.9375rem; }
.footer-social__link { display: inline-flex; min-height: 2.25rem; align-items: center; gap: var(--space-2); text-decoration: underline; text-decoration-color: var(--line-on-dark-strong); text-underline-offset: 0.2em; }
.footer-social__link .icon { color: var(--color-on-dark-muted); }
.site-footer .footer-social__link:hover { text-decoration-color: var(--color-on-dark); }

.site-footer__bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-5); margin-top: var(--space-6); padding-block: var(--space-4) var(--space-5); border-top: 1px solid var(--line-on-dark); color: var(--color-on-dark-muted); font-size: var(--font-size-small); }
.site-footer__bottom p { margin: 0; }
.footer-legal-list { display: flex; flex-wrap: wrap; gap: var(--space-1) var(--space-4); margin: 0; padding: 0; list-style: none; }
@media (max-width: 63.9375rem) {
	.footer-columns { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.footer-column--contact { grid-column: 1 / -1; }
	.footer-column--contact .footer-rows { max-width: 30rem; }
}
@media (max-width: 39.9375rem) {
	.footer-columns { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
	.footer-brand__logo img,
	.footer-brand__logo .custom-logo { height: 3rem; }
}

/* 9 Mobile sticky call / quote bar (phones only). */
.mobile-cta-bar { display: none; }
@media (max-width: 47.9375rem) {
	.mobile-cta-bar {
		position: fixed; right: 0; bottom: 0; left: 0; z-index: 90;
		display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-2);
		padding: var(--space-2) var(--space-2) calc(var(--space-2) + env(safe-area-inset-bottom));
		border-top: 1px solid var(--color-border); background: var(--color-background); box-shadow: var(--shadow-bar);
	}
	/* One line per label, so the bar keeps its height (3rem button + 2 x 0.5rem padding + 1px rule, within --height-cta-bar). */
	.mobile-cta-bar .button { min-height: 3rem; padding-inline: var(--space-3); white-space: nowrap; }
	.has-mobile-cta { padding-bottom: calc(var(--height-cta-bar) + env(safe-area-inset-bottom)); }
	/* Keep a focused or anchored element out from under the fixed bar. */
	html { scroll-padding-bottom: calc(var(--height-cta-bar) + env(safe-area-inset-bottom)); }
}

/* 10 Components */
.card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); box-shadow: var(--shadow-small); }
.sps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); gap: var(--space-5); margin-block: var(--space-5); }
.sps-grid--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 22rem), 1fr)); }
.sps-card { position: relative; display: flex; flex-direction: column; margin: 0; padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); transition: border-color var(--transition-fast); }
.sps-card:hover,
.sps-card:focus-within { border-color: var(--color-primary); }
.sps-card > :last-child { margin-bottom: 0; }
.sps-card :where(h2, h3, h4) { margin-bottom: var(--space-2); font-size: var(--font-size-h4); }
.sps-card :where(h2, h3, h4) a { color: var(--color-primary); text-decoration: none; }
.sps-card :where(h2, h3, h4) a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; } /* whole card is the link target */
.sps-card :where(h2, h3, h4) a:hover { color: var(--color-accent-hover); text-decoration: underline; }
.sps-card a:focus-visible { outline-offset: 2px; }
.sps-card p { color: var(--color-muted); font-size: 0.9375rem; }
.sps-card__more { margin-top: auto; padding-top: var(--space-3); color: var(--color-accent-hover); font-weight: var(--font-weight-semibold); font-size: 0.9375rem; }
/* Eyebrow: red, all caps. Use ONLY where the label carries information (e.g. "Error 404"); never as section decoration. */
.sps-eyebrow { margin-bottom: var(--space-2); color: var(--color-accent-hover); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: 0.08em; text-transform: uppercase; }

.sps-band { padding-block: var(--section-space); }
.sps-band__inner { width: min(calc(100% - 2 * var(--space-4)), var(--width-container)); margin-inline: auto; }
.sps-band--alt { background: var(--color-background-alt); }
.sps-band--dark { color: var(--color-on-dark); background: var(--color-primary); }
.sps-band--dark :where(h1, h2, h3, h4, p, li) { color: var(--color-on-dark); }
.sps-band--dark a:not(.wp-block-button__link):not(.button) { color: var(--color-on-dark); }
.sps-band--tint,
.sps-band--wash { color: var(--color-text); background: var(--color-primary-tint); }
.sps-band--ink { background: var(--color-primary-dark); }
.sps-band--tint :where(h1, h2, h3) { color: var(--color-primary); }
.sps-cta__inner { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: center; gap: var(--space-5) var(--space-7); }
.sps-cta h2 { margin-bottom: var(--space-2); }
.sps-cta__text > :last-child, .sps-cta__actions > :last-child { margin-bottom: 0; }
.sps-cta__actions .wp-block-buttons { justify-content: flex-end; margin: 0; }
.sps-cta__phone { margin-top: var(--space-3); font-size: var(--font-size-large); font-weight: var(--font-weight-bold); }
@media (max-width: 47.9375rem) {
	.sps-cta__inner { grid-template-columns: minmax(0, 1fr); }
	.sps-cta__actions .wp-block-buttons { justify-content: flex-start; }
}

/* Facts strip: four facts separated by hairlines, no icons or coloured bars. */
.sps-trust { border-block: 1px solid var(--color-border); background: var(--color-background); }
.sps-trust__list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; margin-block: 0; margin-inline: auto; padding: 0; list-style: none; }
.sps-trust__item { margin: 0; padding: var(--space-4) var(--space-5); border-left: 1px solid var(--color-border); }
.sps-trust__item:first-child { padding-left: 0; border-left: 0; }
@media (max-width: 64rem) {
	.sps-trust__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sps-trust__item:nth-child(odd) { padding-left: 0; border-left: 0; }
	.sps-trust__item:nth-child(n + 3) { border-top: 1px solid var(--color-border); }
}
@media (max-width: 36rem) {
	.sps-trust__list { grid-template-columns: minmax(0, 1fr); }
	.sps-trust__item { padding-inline: 0; border-left: 0; }
	.sps-trust__item:nth-child(n + 2) { border-top: 1px solid var(--color-border); }
}
.sps-trust__item p { margin: 0; }
.sps-trust__title { color: var(--color-primary); font-weight: var(--font-weight-bold); line-height: 1.3; }
.sps-trust__text { color: var(--color-muted); font-size: var(--font-size-small); line-height: 1.4; }

.sps-faq { margin-block: var(--space-5); border-top: 1px solid var(--color-border); }
.sps-faq details { margin: 0; border-bottom: 1px solid var(--color-border); }
.sps-faq summary { position: relative; display: flex; min-height: 3.25rem; align-items: center; padding: var(--space-3) 2.75rem var(--space-3) 0; color: var(--color-primary); font-size: var(--font-size-large); font-weight: var(--font-weight-semibold); line-height: 1.35; cursor: pointer; list-style: none; }
.sps-faq summary::-webkit-details-marker { display: none; }
.sps-faq summary::after { content: ""; position: absolute; top: 50%; right: var(--space-2); width: 0.6rem; height: 0.6rem; margin-top: -0.45rem; border-right: 2px solid var(--color-primary); border-bottom: 2px solid var(--color-primary); transform: rotate(45deg); transition: transform var(--transition-fast); }
.sps-faq details[open] > summary::after { margin-top: -0.15rem; transform: rotate(-135deg); }
.sps-faq summary:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sps-faq details > :not(summary) { max-width: 44rem; }
.sps-faq details > :last-child { margin-bottom: var(--space-4); }

.sps-notice { padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-primary); border-radius: var(--radius-small); background: var(--color-primary-tint); color: var(--color-primary); }
.sps-notice > :last-child { margin-bottom: 0; }
.sps-verify { padding: 0.05em 0.35em; border-radius: var(--radius-small); background: var(--color-warning-bg); color: var(--color-warning-text); font-weight: var(--font-weight-semibold); } /* visible [[VERIFY]] placeholder */

/* 11 Archives (shared card previews) */
.content-list { display: grid; gap: var(--space-6); }
.content-card { display: grid; grid-template-columns: minmax(0, 16rem) minmax(0, 1fr); gap: var(--space-4) var(--space-5); padding-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); }
.content-card__image { display: block; grid-row: span 2; overflow: hidden; border-radius: var(--radius-medium); background: var(--color-background-alt); }
.content-card__image img { display: block; width: 100%; height: 100%; min-height: 10rem; object-fit: cover; }
.content-card__title { margin-bottom: var(--space-2); font-size: var(--font-size-h3); }
.content-card__title a { color: var(--color-primary); text-decoration: none; }
.content-card__title a:hover { color: var(--color-accent-hover); text-decoration: underline; }
.content-card__meta { color: var(--color-muted); font-size: var(--font-size-small); }
.content-card__categories a { color: inherit; }
.content-card__excerpt { max-width: var(--width-content); }
.content-card__excerpt > :last-child { margin-bottom: 0; }
.archive-header > :last-child { margin-bottom: 0; }
@media (max-width: 40rem) {
	.site-footer__bottom { margin-top: var(--space-5); }
	.content-card { grid-template-columns: minmax(0, 1fr); }
	.content-card__image { grid-row: auto; }
	.content-card__image img { max-height: 16rem; }
	.custom-logo { max-width: 60vw; }
}

/* 12 Style guide (temporary page) */
.sg-h1 { margin: 0 0 var(--space-3); color: var(--color-primary); font-size: var(--font-size-h1); font-weight: var(--font-weight-bold); line-height: 1.2; letter-spacing: -0.01em; }
.sg-section { padding-block: var(--space-6); border-bottom: 1px solid var(--color-border); }
.sg-section > h2 { margin-bottom: var(--space-4); }
.sg-note { color: var(--color-muted); font-size: var(--font-size-small); }
.sg-swatches { display: grid; grid-template-columns: repeat(auto-fill, minmax(10rem, 1fr)); gap: var(--space-3); margin: 0; padding: 0; list-style: none; }
.sg-swatch { overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); font-size: var(--font-size-small); }
.sg-swatch__chip { display: flex; min-height: 4rem; align-items: flex-end; padding: var(--space-2); font-weight: var(--font-weight-semibold); }
.sg-swatch__meta { display: block; padding: var(--space-2); }
.sg-type > * { margin-block: 0 var(--space-3); }
.sg-demo { margin-block: var(--space-4); padding: var(--space-4); border: 1px dashed var(--color-control-border); border-radius: var(--radius-medium); }
.sg-demo--flush { padding: 0; overflow: hidden; }
.sg-field { display: grid; gap: var(--space-1); max-width: 24rem; margin-bottom: var(--space-3); }
.sg-field input { min-height: var(--tap-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-small); font: inherit; }

/* 14 Pages: hero, page content, forms, testimonials, steps, sitemap, 404 */
.page-hero { padding-block: clamp(var(--space-6), 5vw, var(--space-7)); border-bottom: 1px solid var(--color-border); background: var(--color-background-alt); }
.page-hero__title { max-width: 52rem; margin-bottom: var(--space-3); }
.page-hero__lead {  margin: 0; color: var(--color-text); font-size: var(--font-size-large); } /*max-width: var(--width-content);*/
.page-content { padding-block: var(--section-space); }
/*.page-content > :where(p, ul, ol, h2, h3, h4, .wp-block-quote) { max-width: var(--width-content); }*/
.page-content > :where(h2) { margin-top: var(--space-7); }
.page-content > :where(h2):first-child { margin-top: 0; }
.entry--home .home-content > * { margin-block: 0; }
.sps-band__inner > :where(h2, .sps-lead) { max-width: 46rem; }
.sps-lead { font-size: var(--font-size-large); }
.sps-band__inner > h2 + .sps-lead { margin-top: calc(-1 * var(--space-2)); }

/* Home hero (D2, option A from the design-direction session): an airy hero (headline, intro, two buttons and an image slot, at least
   560px tall from 56.0625rem) and the quote form in its own section directly below it, with 6rem (96px) of space above the
   form. "Get a Free Quote" and the header's "Request a Quote" scroll to that section (#quote) and theme.js moves focus to its
   heading. The slot is a fixed-ratio box (3:2 from 56.0625rem, 4:3 below), never taller than 360px, that shows the floor
   drawing until a real photo is placed in it (see the slot rules below). */
.sps-hero { position: relative; min-height: 35rem; padding-block: var(--space-8); color: var(--color-on-dark); background: linear-gradient(var(--overlay-grid) 1px, transparent 1px) 0 0 / 3rem 3rem, linear-gradient(90deg, var(--overlay-grid) 1px, transparent 1px) 0 0 / 3rem 3rem, linear-gradient(135deg, var(--color-primary) 0%, var(--color-hero-end) 100%); } /* drafting-paper grid over the gradient (layers on the section itself, not a pseudo-element, so contrast checkers can read it) */
.sps-hero :where(h1, p) { color: var(--color-on-dark); }
.sps-hero h1 { max-width: 46rem; margin-bottom: var(--space-5); font-size: clamp(2.35rem, 1.65rem + 3.3vw, 3.85rem); }
.sps-hero .sps-lead { max-width: 40rem; color: var(--color-on-dark); }
.sps-hero .wp-block-buttons { margin-top: var(--space-6); }
.sps-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); align-content: center; }
.sps-hero__grid > * { min-width: 0; }
.sps-hero__plan { display: contents; } /* the slot is the grid item; this block wrapper takes no space */
@media (max-width: 29.9375rem) {
	.sps-hero { padding-bottom: 0; } /* phone: the slot runs edge to edge and meets the hero's bottom edge */
}
@media (min-width: 56.0625rem) {
	.sps-hero { padding-block: var(--space-9); }
	.sps-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: center; min-height: 23rem; }
}

/* Hero image slot (fixed aspect ratio, so the layout never shifts). Fallback state: no photo, the floor drawing shows. Photo
   state: put one <img> as the first child of the figure (width and height attributes, object-fit does the cropping, give it
   alt text and remove aria-hidden); the drawing hides itself and the frame goes. Height never exceeds 360px: 3:2 at a
   width of at most 33.75rem, 4:3 at a width of at most 30rem. */
.sps-hero__media { position: relative; width: min(100%, 30rem); margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border: 1px solid var(--line-plan-swing); border-radius: var(--radius-large); }
.sps-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.sps-hero__media:has(> img) { border: 0; }
.sps-hero__media:has(> img) .sps-drawing__svg { display: none; }
@media (max-width: 29.9375rem) {
	.sps-hero__media { width: auto; margin-inline: calc(-1 * var(--space-4)); border-width: 1px 0 0; border-radius: 0; }
}
@media (min-width: 56.0625rem) {
	.sps-hero__media { width: min(100%, 33.75rem); justify-self: end; aspect-ratio: 3 / 2; }
}

/* Quote section: the form on its own, label rows line up (the message field has its own row), the collection notice is a plain
   line of normal text directly above the send button. */
.sps-enquiry { padding-block: var(--space-9); background: var(--color-background); scroll-margin-top: 0; }
.sps-enquiry__card { display: grid; gap: var(--space-4) var(--space-6); color: var(--color-text); }
.sps-enquiry__card > h2 { margin: 0; color: var(--color-primary); font-size: var(--font-size-h2); }
.sps-enquiry .sps-form--compact { max-width: none; }
.sps-enquiry .sps-form__hint { margin: 0 0 var(--space-4); }
.sps-enquiry .sps-form--compact .sps-form__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.sps-enquiry .sps-form--compact .sps-form__field { grid-column: auto; }
.sps-enquiry .sps-form--compact input,
.sps-enquiry .sps-form--compact select { min-height: var(--tap-target); padding-block: var(--space-2); }
.sps-enquiry .sps-form--compact textarea { min-height: 7rem; }
.sps-enquiry .sps-form--compact .form-notice { margin: var(--space-5) 0 0; padding: 0; border: 0; border-radius: 0; background: none; color: var(--color-text); font-size: var(--font-size-body); line-height: 1.6; }
.sps-enquiry .sps-form--compact .form-notice p { max-width: 46rem; margin: 0; }
.sps-enquiry .sps-form--compact .sps-form__submit { margin: var(--space-4) 0 0; }
.sps-enquiry .sps-form--compact .sps-form__submit .button { width: auto; min-height: 3.25rem; }
@media (min-width: 40.0625rem) {
	.sps-enquiry .sps-form--compact .sps-form__grid { grid-template-columns: repeat(12, minmax(0, 1fr)); }
	.sps-enquiry .sps-form--compact .sps-form__field--name,
	.sps-enquiry .sps-form--compact .sps-form__field--email,
	.sps-enquiry .sps-form--compact .sps-form__field--phone { grid-column: span 4; }
	.sps-enquiry .sps-form--compact .sps-form__field--suburb { grid-column: span 8; }
	.sps-enquiry .sps-form--compact .sps-form__field--state { grid-column: span 4; }
	.sps-enquiry .sps-form--compact .sps-form__field--message { grid-column: 1 / -1; }
}
@media (min-width: 72.0625rem) {
	.sps-enquiry__card { grid-template-columns: minmax(10rem, 3fr) minmax(0, 9fr); align-items: start; }
}

/* Hero floor drawing (D2, P1): the slot's fallback content. Decorative (aria-hidden) and not an evacuation diagram. 1px = 1 SVG
   unit: the slot crops it, never scales it (offset so the labels, route and symbols sit inside every slot size). Walls, swings
   and leaders are low-opacity lines (tokens --line-plan-*); labels, route, symbols and the exit sign are full strength. */
.sps-drawing__svg { position: absolute; top: -2.5rem; left: 0.75rem; width: 87.5rem; max-width: none; height: auto; pointer-events: none; }
.dr-wall { fill: none; stroke: var(--line-plan-wall); stroke-width: 1.25; stroke-linecap: butt; }
.dr-swing { fill: none; stroke: var(--line-plan-swing); stroke-width: 1; }
.dr-leader { fill: none; stroke: var(--line-plan-leader); stroke-width: 1; }
.dr-label { fill: var(--color-on-dark); font-family: var(--font-body); font-size: 13px; font-weight: var(--font-weight-medium); letter-spacing: 0; }
.dr-label--mid { text-anchor: middle; }
.dr-label--you { font-weight: var(--font-weight-semibold); }
.dr-red { fill: var(--color-accent); stroke: var(--color-on-dark); stroke-width: 1; }
.dr-white { fill: var(--color-on-dark); }
.dr-glyph { fill: none; stroke: var(--color-on-dark); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }
.dr-exit { fill: var(--color-exit); stroke: var(--color-on-dark); stroke-width: 1.25; }
.dr-exit-label { fill: var(--color-on-dark); font-family: var(--font-body); font-size: 12.5px; font-weight: var(--font-weight-bold); }
.dr-you-ring { fill: none; stroke: var(--line-plan-leader); stroke-width: 1.25; }
.dr-you { fill: var(--color-on-dark); }
.dr-route { fill: none; stroke: var(--color-on-dark); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; }
.dr-route-head { fill: var(--color-on-dark); }
/* The one page-load moment: the escape route draws outward from "you are here", once. Reduced motion shows the finished drawing. */
@keyframes sps-route-draw {
	from { stroke-dasharray: 1; stroke-dashoffset: 1; }
	to { stroke-dasharray: 1; stroke-dashoffset: 0; }
}
@keyframes sps-route-head { from { opacity: 0; } to { opacity: 1; } }
.dr-route { animation: sps-route-draw 1.6s cubic-bezier(0.4, 0, 0.2, 1) 0.3s both; }
.dr-route-head { animation: sps-route-head 0.2s linear 1.7s both; } /* arrowhead appears as the line reaches it: same single moment */

/* Two-column split (text + aside) */
.sps-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: var(--space-6) var(--space-7); align-items: start; }
@media (max-width: 47.9375rem) { .sps-split { grid-template-columns: minmax(0, 1fr); } }

.sps-list { padding-left: 1.25rem; }
.sps-list li { margin-bottom: var(--space-2); }

/* Testimonials (verbatim quotes; no review/rating markup). Plain quotes; the testimonials page lists them under a navy rule. */
.sps-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); gap: var(--space-6) var(--space-6); margin-block: var(--space-5); }
.sps-quotes .sps-quote { padding-top: var(--space-4); border-top: 2px solid var(--color-primary); }
.sps-quote { margin: 0; padding: 0; border: 0; background: none; }
.sps-quote p { margin: 0 0 var(--space-3); color: var(--color-text); font-size: 1.0625rem; line-height: 1.55; }
.sps-quote cite { color: var(--color-primary); font-style: normal; font-weight: var(--font-weight-bold); }
.sps-quote cite::before { content: "— "; }

/* Forms */
.sps-form { max-width: 46rem; }
.sps-form__hint { color: var(--color-muted); font-size: var(--font-size-small); }
.sps-form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4) var(--space-5); }
.sps-form__field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.sps-form__field--wide { grid-column: 1 / -1; }
.sps-form label { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.sps-form__req { color: var(--color-accent-hover); }
.sps-form input,
.sps-form select,
.sps-form textarea { width: 100%; min-height: var(--tap-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-small); color: var(--color-text); background: var(--color-background); font: inherit; }
.sps-form textarea { min-height: 9rem; resize: vertical; }
.sps-form input:focus-visible,
.sps-form select:focus-visible,
.sps-form textarea:focus-visible { outline: 3px solid var(--color-focus); outline-offset: 1px; border-color: var(--color-primary); }
.sps-form .has-error input,
.sps-form .has-error select,
.sps-form .has-error textarea { border-color: var(--color-error); border-width: 2px; }
.sps-form__error { margin: 0; color: var(--color-error); font-size: var(--font-size-small); font-weight: var(--font-weight-semibold); }
.sps-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.sps-form__submit { margin-top: var(--space-5); }
.form-status { max-width: 46rem; margin-bottom: var(--space-5); padding: var(--space-4) var(--space-5); border-left: 4px solid; border-radius: var(--radius-small); }
.form-status h2 { margin-bottom: var(--space-2); font-size: var(--font-size-h3); }
.form-status > :last-child { margin-bottom: 0; }
.form-status ul { margin: 0; padding-left: 1.25rem; }
.form-status--success { border-color: var(--color-success); background: var(--color-success-bg); color: var(--color-success-text); }
.form-status--success h2 { color: var(--color-success-text); }
.form-status--error { border-color: var(--color-error); background: var(--color-error-bg); color: var(--color-error-text); }
.form-status--error h2, .form-status--error a { color: var(--color-error-text); }
.form-notice { margin-top: var(--space-5); padding: var(--space-4) var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background-alt); font-size: var(--font-size-small); }
.form-notice__title { margin-bottom: var(--space-2); font-size: 1rem; }
.form-notice ul { margin: 0; padding-left: 1.25rem; }
.form-notice li { margin-bottom: var(--space-2); }
@media (max-width: 40rem) { .sps-form__grid { grid-template-columns: minmax(0, 1fr); } }

.sps-form--compact { max-width: none; }
.sps-form--compact .sps-form__grid { gap: var(--space-2) var(--space-3); }
.sps-form--compact label { font-size: var(--font-size-small); }
.sps-form--compact input,
.sps-form--compact select { min-height: 2.5rem; padding-block: var(--space-1); }
.sps-form--compact textarea { min-height: 3.75rem; }
@media (min-width: 40.0625rem) {
	.sps-form--compact .sps-form__grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
	.sps-form--compact .sps-form__field--name,
	.sps-form--compact .sps-form__field--email { grid-column: span 3; }
	.sps-form--compact .sps-form__field--phone,
	.sps-form--compact .sps-form__field--suburb,
	.sps-form--compact .sps-form__field--state { grid-column: span 2; }
	.sps-form--compact .sps-form__field--message { grid-column: 1 / -1; }
}
.sps-form--compact .form-notice { margin-top: var(--space-2); padding: var(--space-2) var(--space-3); font-size: 0.8125rem; line-height: 1.4; }
.sps-form--compact .form-notice p { margin: 0; }
.sps-form--compact .sps-form__submit { margin-top: var(--space-3); }
.sps-form--compact .sps-form__submit .button { width: 100%; min-height: 2.75rem; }

/* Contact details card */
.sps-contact-card { padding: var(--space-5); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background-alt); }
.sps-contact-card h2, .sps-contact-card h3 { font-size: var(--font-size-h3); }
.sps-contact-phone { margin: 0 0 var(--space-4); font-family: var(--font-heading); font-size: 1.925rem; font-weight: var(--font-weight-bold); line-height: 1.1; }
.sps-contact-phone a { color: var(--color-primary); }
.sps-contact-card address { font-style: normal; }
.sps-contact-card dl { margin: 0 0 var(--space-4); }
.sps-contact-card dt { margin-top: var(--space-3); color: var(--color-primary); font-weight: var(--font-weight-bold); }
.sps-contact-card dd { margin: 0; }

/* HTML sitemap */
.sitemap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr)); gap: var(--space-6) var(--space-5); }
.sitemap-group h2 { margin-bottom: var(--space-3); font-size: var(--font-size-h3); }
.sitemap-list { margin: 0; padding: 0; list-style: none; }
.sitemap-list a { display: inline-flex; min-height: var(--tap-target); align-items: center; }

/* 404 */
.not-found { max-width: 46rem; margin-inline: auto; padding-block: var(--space-6); }
.not-found__lead { font-size: var(--font-size-large); }
.not-found__search { margin-block: var(--space-5); }
.not-found__search form { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.not-found__search label { flex: 1 1 14rem; }
.not-found__search input[type="search"] { width: 100%; min-height: var(--tap-target); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-small); font: inherit; }
.not-found__search input[type="submit"] { min-height: var(--tap-target); padding: var(--space-2) var(--space-5); border: 0; border-radius: var(--radius-small); color: var(--color-on-dark); background: var(--color-primary); font: inherit; font-weight: var(--font-weight-semibold); cursor: pointer; }
.not-found__sub { margin-top: var(--space-6); font-size: var(--font-size-h3); }
.not-found__links { display: grid; gap: 0; margin: 0 0 var(--space-5); padding: 0; list-style: none; }
.not-found__links a { display: inline-flex; min-height: var(--tap-target); align-items: center; font-weight: var(--font-weight-medium); }

.sg-table-wrap { overflow-x: auto; border: 1px solid var(--color-border); border-radius: var(--radius-medium); }
.sg-table { width: 100%; min-width: 46rem; border-collapse: collapse; font-size: var(--font-size-small); }
.sg-table th, .sg-table td { padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--color-border); text-align: left; vertical-align: top; }
.sg-table thead th { background: var(--color-background-alt); color: var(--color-primary); }
.sg-dot { display: inline-block; width: 0.9rem; height: 0.9rem; margin-right: var(--space-1); border: 1px solid var(--color-control-border); border-radius: 50%; vertical-align: -0.1rem; }
/* Logo, footer logo panel, status icons */
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { display: block; width: auto; height: 3.25rem; }
.site-header .site-logo img { height: 3.5rem; }
.sps-form__error { display: flex; align-items: flex-start; gap: var(--space-2); }
.sps-form__error .icon { flex: none; margin-top: 0.1rem; }
.form-status h2 { display: flex; align-items: center; gap: var(--space-2); }
.form-status h2 .icon { flex: none; }

/* 15 Home page sections (docs/DESIGN-NOTES.md). Each band has its own composition; red is not used for decoration. */
.sps-band :where(h1, h2) { font-weight: var(--font-weight-bold); letter-spacing: 0; }
.sps-more { margin: 0; font-weight: var(--font-weight-bold); }
.sps-more a { color: var(--color-primary); text-decoration: underline; text-decoration-color: var(--color-control-border); text-decoration-thickness: 2px; text-underline-offset: 0.25em; }
.sps-more a:hover { color: var(--color-primary-hover); text-decoration-color: currentColor; }
.sps-more a::after { content: "→"; content: "→" / ""; display: inline-block; margin-left: 0.35em; } /* decorative arrow: not announced, not underlined */
.sps-twocol { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-6) clamp(2rem, 5vw, 4rem); align-items: start; }
.sps-twocol > * { min-width: 0; }
.sps-twocol__intro { position: sticky; top: var(--space-6); }
.sps-twocol__intro > h2 { margin-bottom: var(--space-3); }
.sps-twocol__intro > :last-child { margin-bottom: 0; }
.sps-twocol__intro .sps-lead { margin-bottom: var(--space-4); }
@media (max-width: 56rem) {
	.sps-twocol { grid-template-columns: minmax(0, 1fr); }
	.sps-twocol__intro { position: static; }
}
.sps-head { margin-bottom: var(--space-6); }
.sps-head > h2 { margin-bottom: var(--space-2); }
.sps-head > :last-child { margin-bottom: 0; }
.sps-head > .sps-lead { max-width: 40rem; }
.sps-head--row { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--space-2) var(--space-5); }
.sps-head--row > h2 { margin-bottom: 0; }

/* Services: indexed rows (index, equipment symbol, name = link, one-line description) */
.sps-index { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-primary); counter-reset: sps-idx; }
.sps-index__row { position: relative; display: grid; grid-template-columns: 2rem 3.25rem minmax(0, 1fr) 1.5rem; align-items: center; gap: 0 var(--space-4); margin: 0; padding: var(--space-4) var(--space-3); border-bottom: 1px solid var(--color-border); counter-increment: sps-idx; transition: background-color var(--transition-fast); }
.sps-index__row::before { content: counter(sps-idx, decimal-leading-zero); color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.sps-index__row:hover { background: var(--color-background-alt); }
.sps-index__sym { display: grid; width: 3.25rem; height: 3.25rem; place-items: center; border: 1.5px solid var(--color-primary); border-radius: var(--radius-small); color: var(--color-primary); }
.sps-index__body { min-width: 0; }
.sps-index__body h3 { margin: 0 0 0.125rem; font-size: clamp(1.25rem, 1.15rem + 0.45vw, 1.5rem); }
.sps-index__body h3 a { color: var(--color-primary); text-decoration: none; }
.sps-index__body h3 a::after { content: ""; position: absolute; inset: 0; }
.sps-index__row:hover h3 a { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; }
.sps-index__body h3 a:focus-visible { outline: none; }
.sps-index__body h3 a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: -3px; }
.sps-index__body p { margin: 0; color: var(--color-muted); font-size: 0.9375rem; line-height: 1.45; }
.sps-index__row::after { content: "→"; content: "→" / ""; color: var(--color-primary); font-size: 1.25rem; text-align: right; }
@media (max-width: 40rem) {
	.sps-index__row { grid-template-columns: 1.75rem 2.75rem minmax(0, 1fr); gap: 0 var(--space-3); padding-inline: var(--space-1); }
	.sps-index__sym { width: 2.75rem; height: 2.75rem; }
	.sps-index__row::after { display: none; }
}

/* Industries: grouped text links under rules */
.sps-industries .sps-head { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-3) var(--space-7); align-items: end; }
.sps-industries .sps-head > * { margin: 0; }
.sps-directory { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-6) var(--space-5); }
.sps-directory__group { padding-top: var(--space-3); border-top: 2px solid var(--color-primary); }
.sps-directory h3 { margin: 0 0 var(--space-2); font-size: 1.0625rem; }
.sps-directory ul { margin: 0; padding: 0; list-style: none; }
.sps-directory li { margin: 0; }
.sps-directory a { display: flex; min-height: var(--tap-target); align-items: center; color: var(--color-text); text-decoration: underline; text-decoration-color: var(--color-control-border); text-decoration-thickness: 1px; text-underline-offset: 0.3em; }
.sps-directory a:hover { color: var(--color-primary); text-decoration-color: var(--color-primary); text-decoration-thickness: 2px; }
@media (max-width: 64rem) {
	.sps-directory { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sps-industries .sps-head { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 36rem) { .sps-directory { grid-template-columns: minmax(0, 1fr); } }

/* AFSS: one wide panel on a pale navy wash */
.sps-afss { padding-block: var(--space-7); }
.sps-panel { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: var(--space-5) var(--space-7); align-items: center; padding: clamp(1.5rem, 4vw, 2.75rem); border-radius: var(--radius-large); background: var(--color-primary-tint); }
.sps-panel h2 { margin-bottom: var(--space-2); font-size: clamp(1.65rem, 1.3rem + 1.3vw, 2.2rem); }
.sps-panel__text > :last-child,
.sps-panel__actions > :last-child { margin-bottom: 0; }
.sps-panel__text p { color: var(--color-text); }
.sps-panel__actions .wp-block-buttons { justify-content: flex-end; margin: 0; }
@media (max-width: 56rem) {
	.sps-panel { grid-template-columns: minmax(0, 1fr); }
	.sps-panel__actions .wp-block-buttons { justify-content: flex-start; }
}

/* Process: connected timeline on the darkest navy */
.sps-process .sps-head { max-width: 40rem; }
.sps-timeline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 var(--space-5); margin: var(--space-7) 0 0; padding: 0; list-style: none; counter-reset: sps-tl; }
.sps-timeline > li { position: relative; margin: 0; padding-top: 4.25rem; color: var(--color-on-dark-muted); counter-increment: sps-tl; }
.sps-timeline > li::before { content: counter(sps-tl); position: absolute; top: 0; left: 0; z-index: 1; display: grid; width: 2.75rem; height: 2.75rem; place-items: center; border: 2px solid var(--color-on-dark); border-radius: 50%; color: var(--color-on-dark); background: var(--color-primary-dark); font-weight: var(--font-weight-display); font-variant-numeric: tabular-nums; }
.sps-timeline > li:not(:last-child)::after { content: ""; position: absolute; top: calc(1.375rem - 1px); left: 2.75rem; right: calc(-1 * var(--space-5)); height: 2px; background: var(--line-on-dark-strong); }
.sps-timeline > li:last-child::before { color: var(--color-primary-dark); background: var(--color-on-dark); }
.sps-timeline strong { display: block; margin-bottom: var(--space-2); color: var(--color-on-dark); font-size: var(--font-size-h3); line-height: 1.2; }
@media (max-width: 56rem) {
	.sps-timeline { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: var(--space-6); }
	.sps-timeline > li { max-width: 38rem; min-height: 2.75rem; padding: 0.125rem 0 var(--space-6) 4rem; }
	.sps-timeline > li:last-child { padding-bottom: 0; }
	.sps-timeline > li:not(:last-child)::after { top: 2.75rem; right: auto; bottom: 0; left: calc(1.375rem - 1px); width: 2px; height: auto; }
}

/* Why us: one strong statement, then a data plate of verified facts */
.sps-why__grid { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--space-6) clamp(2rem, 6vw, 5rem); align-items: start; margin-top: var(--space-5); }
.sps-why__grid > * { min-width: 0; }
.sps-statement { margin: 0 0 var(--space-5); }
.sps-statement blockquote { margin: 0; padding: 0; }
.sps-statement p { margin: 0; color: var(--color-primary); font-family: var(--font-heading); font-size: var(--font-size-display); font-weight: var(--font-weight-bold); letter-spacing: 0; line-height: 1.15; text-wrap: balance; }
.sps-statement figcaption { margin-top: var(--space-3); color: var(--color-muted); font-weight: var(--font-weight-semibold); }
.sps-statement figcaption::before { content: "— "; }
.sps-why__main > p:last-child { max-width: 36rem; margin-bottom: 0; font-size: var(--font-size-large); }
.sps-plate { margin: 0; border-top: 2px solid var(--color-primary); }
.sps-plate > div { display: grid; grid-template-columns: 7rem minmax(0, 1fr); gap: var(--space-4); padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.sps-plate dt { color: var(--color-muted); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); line-height: 1.6; }
.sps-plate dd { margin: 0; color: var(--color-primary); font-size: var(--font-size-large); font-weight: var(--font-weight-bold); line-height: 1.35; }
.sps-plate > div:first-child dd { font-family: var(--font-heading); font-size: 2.75rem; font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; line-height: 1.1; }
@media (max-width: 56rem) { .sps-why__grid { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 30rem) { .sps-plate > div { grid-template-columns: minmax(0, 1fr); gap: var(--space-1); } }

/* Testimonials: one large quote and two smaller */
.sps-voices { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: var(--space-6) clamp(2rem, 6vw, 5rem); align-items: start; }
.sps-voices > * { min-width: 0; }
.sps-quote--lead::before { content: "“" / ""; display: block; height: 3.5rem; color: var(--color-secondary); font-family: var(--font-heading); font-size: 6rem; font-weight: var(--font-weight-display); line-height: 1; }
.sps-quote--lead p { color: var(--color-primary); font-size: clamp(1.375rem, 1.05rem + 1.3vw, 2rem); font-weight: var(--font-weight-bold); letter-spacing: -0.01em; line-height: 1.3; }
.sps-quote--lead cite { font-size: var(--font-size-large); }
.sps-voices__aside .sps-quote { padding-block: var(--space-4); border-top: 1px solid var(--color-primary); }
.sps-voices__aside .sps-quote:first-child { padding-top: var(--space-4); border-top-width: 2px; }
.sps-voices__aside .sps-quote:last-child { padding-bottom: 0; }
@media (max-width: 56rem) { .sps-voices { grid-template-columns: minmax(0, 1fr); } }

/* FAQ in the split layout; service area strip */
.sps-faqband .sps-faq { margin: 0; border-top: 2px solid var(--color-primary); }
.sps-area-band { padding-block: var(--space-7); }
.sps-area { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: var(--space-3) clamp(2rem, 5vw, 4rem); align-items: baseline; }
.sps-area h2 { margin: 0; font-size: var(--font-size-h3); }
.sps-area p { max-width: 40rem; margin: 0; font-size: var(--font-size-large); }
@media (max-width: 56rem) { .sps-area { grid-template-columns: minmax(0, 1fr); } }

/* 16 Service page (cycle 1; wireframe docs/04-wireframes/service-page.md). C-1 hero with the lead image slot IMG-1, C-2 meta line,
   C-3 requirement-and-source list. C-4 (image in the related rows) is not built: the rows are text only. */
.service-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
.service-hero__grid > * { min-width: 0; }
.service-hero__answer { max-width: 46rem; font-size: var(--font-size-large); }
.service-hero__answer > :last-child { margin-bottom: 0; }
.service-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: var(--space-5) 0 0; }
@media (max-width: 47.9375rem) { .service-hero__actions { display: none; } } /* phones: the sticky Call / Get a Quote bar is the one action */
.service-meta { display: flex; flex-wrap: wrap; gap: 0 var(--space-4); margin: var(--space-5) 0 0; color: var(--color-muted); font-size: var(--font-size-small); }
.service-meta > span + span::before { content: "·"; content: "·" / ""; margin-right: var(--space-4); }
.service-meta a { color: var(--color-primary); }
/* IMG-1: fixed ratio, never taller than 360px (3:2 at most 33.75rem wide, 4:3 at most 30rem, edge to edge under 30rem). */
.service-hero__media { position: relative; width: min(100%, 30rem); margin: 0; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--radius-large); }
.service-hero__media > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.service-hero__media--fallback { display: none; place-items: center; border: 1px solid var(--color-border); background: var(--color-primary-tint); color: var(--color-primary); } /* F1: the no-photo panel, same size as the photo, desktop only */
@media (max-width: 29.9375rem) {
	.page-hero--media { padding-bottom: 0; }
	.service-hero__media { width: auto; margin-inline: calc(-1 * var(--space-4)); border-radius: 0; }
}
@media (min-width: 56.0625rem) {
	.service-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); align-items: center; }
	.service-hero__media { width: min(100%, 33.75rem); justify-self: end; aspect-ratio: 3 / 2; }
	.service-hero__media--fallback { display: grid; }
}
/* Sections: text bands separated by space and one rule; the process stays the one dark band. */
.service-content .sps-band { padding-block: clamp(var(--space-7), 5vw, var(--space-8)); }
.service-content .sps-band + .sps-band:not(.sps-band--dark) { border-top: 1px solid var(--color-border); }
.service-content .sps-band--dark + .sps-band { border-top: 0; }
/* Imported plain blocks also need a reading column; patterned bands keep their own layout. */
.service-content > :where(.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote) {
	width: min(calc(100% - 2 * var(--space-4)), var(--width-content));
	max-width: none;
	margin-inline-start: max(var(--space-4), calc((100% - var(--width-container)) / 2));
	margin-inline-end: 0;
}
.service-content > .wp-block-heading { margin-top: var(--space-7); margin-bottom: var(--space-3); }
.service-content > h3.wp-block-heading,
.service-content > h4.wp-block-heading { margin-top: var(--space-6); }
.service-content > .wp-block-paragraph { font-size: var(--font-size-large); line-height: 1.65; }
.service-content > :first-child:not(.sps-band) { margin-top: var(--space-7); }
.service-content > :last-child:not(.sps-band) { margin-bottom: var(--space-8); }
.sps-twocol__body > :first-child { margin-top: 0; }
.sps-twocol__body > :last-child { margin-bottom: 0; }
.sps-twocol__body > * { max-width: 46rem; }
.service-content .sps-faqband .sps-faq { margin: 0; }
.service-content .sps-faqband .sps-faq details > :not(summary) { max-width: 46rem; }
/* C-3 sources list: requirement left, linked source right; stacks on phones. */
.sps-sources { margin: 0; padding: 0; list-style: none; border-top: 2px solid var(--color-primary); }
.sps-sources > li { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-1) var(--space-6); margin: 0; padding: var(--space-4) 0; border-bottom: 1px solid var(--color-border); }
.sps-sources > li > strong { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.sps-sources + p { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--font-size-small); }
@media (max-width: 40rem) { .sps-sources > li { grid-template-columns: minmax(0, 1fr); } }

/* 17 Blog (cycle 2, blog slice; DECISIONS BL-T1 to BL-T6). Category links, post card with a 3:2 image slot, featured post, article layout,
   key points, contents list, sources, organisation box, contextual call to action, pagination. Reuses .page-hero, .service-meta, .sps-notice,
   .sps-band, .sps-more and the tokens; no new tokens, colours or breakpoints. Authoring classes for post bodies: .sps-keypoints, .sps-article-sources. */
.blog-categories { border-bottom: 1px solid var(--color-border); }
.blog-categories__list { display: flex; flex-wrap: wrap; gap: 0 var(--space-5); margin-block: 0; padding: 0; list-style: none; }
.blog-categories__item { margin: 0; }
.blog-categories__link { display: inline-flex; min-height: var(--tap-target); align-items: center; border-bottom: 3px solid transparent; color: var(--color-primary); font-weight: var(--font-weight-medium); text-decoration: none; }
a.blog-categories__link:hover { border-bottom-color: var(--color-secondary); color: var(--color-primary); } /* same cue as the header menu: slate on hover, navy and bold for the current one */
.blog-categories__link[aria-current="page"] { border-bottom-color: var(--color-primary); font-weight: var(--font-weight-bold); }
.blog-listing { padding-block: var(--section-space); }
.blog-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-7) var(--space-5); }
@media (min-width: 40rem) { .blog-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .blog-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Post card: the title link stretches over the card, so the whole card is one target with one name. */
.blog-card { position: relative; display: flex; flex-direction: column; gap: var(--space-4); min-width: 0; }
.blog-card__media,
.blog-featured__media { display: grid; place-items: center; overflow: hidden; aspect-ratio: 3 / 2; border-radius: var(--radius-medium); background: var(--color-background-alt); }
.blog-card__media > img,
.blog-featured__media > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blog-card__media--fallback,
.blog-featured__media--fallback { border: 1px solid var(--color-border); background: var(--color-primary-tint); color: var(--color-primary); } /* no-image state: tinted panel and one line symbol, same size as a photo */
.blog-card__meta { margin: 0 0 var(--space-2); color: var(--color-muted); font-size: var(--font-size-small); }
.blog-card__category { color: var(--color-primary); font-weight: var(--font-weight-semibold); }
.blog-card__category + time::before { content: "·"; content: "·" / ""; margin-inline: var(--space-2); color: var(--color-muted); font-weight: var(--font-weight-regular); }
.blog-card__title,
.blog-featured__title { margin-bottom: var(--space-2); }
.blog-card__title { font-size: var(--font-size-h3); }
.blog-card__title a,
.blog-featured__title a { color: var(--color-primary); text-decoration: none; }
.blog-card__title a::after,
.blog-featured__title a::after { content: ""; position: absolute; inset: 0; }
.blog-card__title a:hover,
.blog-featured__title a:hover { color: var(--color-accent-hover); text-decoration: underline; text-decoration-thickness: 2px; }
.blog-card__title a:focus-visible,
.blog-featured__title a:focus-visible { outline: 0; }
.blog-card__title a:focus-visible::after,
.blog-featured__title a:focus-visible::after { outline: 3px solid var(--color-focus); outline-offset: 3px; border-radius: var(--radius-medium); } /* the focus ring is drawn round the whole card */
.blog-card__excerpt { margin: 0; }
/* Featured post: the newest article, first page of the index only. */
.blog-featured { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-5); margin-bottom: var(--space-7); padding-bottom: var(--space-7); border-bottom: 1px solid var(--color-border); }
.blog-featured > * { min-width: 0; }
.blog-featured__title { font-size: var(--font-size-h2); }
.blog-featured__excerpt { max-width: 46rem; margin: 0; font-size: var(--font-size-large); }
.blog-featured:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
@media (min-width: 56.0625rem) {
	.blog-featured {  gap: var(--space-7); align-items: center; } /*grid-template-columns: repeat(2, minmax(0, 1fr));*/
}
/* Pagination (the_posts_pagination): 44px targets, current page filled navy. */
.blog-listing .pagination { margin-top: var(--space-8); }
.blog-listing .pagination .nav-links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.blog-listing .page-numbers { display: inline-flex; min-width: var(--tap-target); min-height: var(--tap-target); align-items: center; justify-content: center; padding-inline: var(--space-3); border: 1px solid var(--color-control-border); border-radius: var(--radius-small); color: var(--color-primary); font-weight: var(--font-weight-semibold); text-decoration: none; }
.blog-listing a.page-numbers:hover { border-color: var(--color-primary); background: var(--color-primary-tint); color: var(--color-primary); }
.blog-listing .page-numbers.current { border-color: var(--color-primary); background: var(--color-primary); color: var(--color-on-dark); }
.blog-listing .page-numbers.dots { border-color: transparent; }
/* Article: shared 40rem reading measure aligned to the site grid; images and tables may break out to 56rem. */
.entry--article,
body.single-post {  --article-wide: 56rem; } /* --article-measure: var(--width-content); the reading width is shared with other detail pages; images and tables may break out to the wider frame */
.article-main { max-width: var(--article-wide); margin-inline: 0; padding-block: var(--space-7) var(--section-space); }
/* Hero text uses the same reading measure as the article body; desktop aligns it to the site grid below. */
.entry--article .page-hero__title,
.entry--article .page-hero__lead,
.entry--article .article-byline { max-width: var(--article-measure); margin-inline: auto; }
.article-byline { margin-top: var(--space-4); }
.article-byline a { display: inline-block; padding-block: var(--space-1); } /* 24px target when the byline wraps in the narrower column */
.article-image { margin: 0 0 var(--space-6); }
.article-image img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-large); }
.article-image figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--font-size-small); }
.article-body { font-size: var(--font-size-large); line-height: 1.65; }
.article-body > * { max-width: var(--article-measure); margin-inline: auto; }
.article-body.entry__content > :where(figure, table, .wp-block-image, .wp-block-table, .wp-block-gallery, .wp-block-embed, .alignwide, .alignfull) { width: auto; max-width: var(--article-wide); margin-inline: auto; } /* breakouts */
.article-body > :first-child { margin-top: 0; }
.article-body h2 { margin-top: var(--space-7); margin-bottom: var(--space-3); font-size: clamp(2.125rem, 1.85rem + 0.9vw, 2.375rem); } /* 34px on phones to 38px on desktop (the page-wide h2 is up to 44px) */
.article-body h3 { margin-top: var(--space-6); margin-bottom: var(--space-3); font-size: clamp(1.5rem, 1.4rem + 0.35vw, 1.625rem); } /* 24px to 26px */
.article-body :where(ul, ol) { padding-left: var(--space-5); }
.article-body li { margin-bottom: var(--space-2); }
.article-body :where(figure, table) { margin-block: var(--space-6); }
.article-body figure img { display: block; border-radius: var(--radius-medium); }
.article-body figcaption { margin-top: var(--space-2); color: var(--color-muted); font-size: var(--font-size-small); }
/* Key points (group with the class sps-keypoints, lifted above the body). Same look as .sps-notice. */
.sps-keypoints { margin: 0 0 var(--space-6); padding: var(--space-4) var(--space-5); border-left: 4px solid var(--color-primary); border-radius: var(--radius-small); background: var(--color-primary-tint); color: var(--color-text); }
.sps-keypoints > :where(h2, h3, h4) { margin-bottom: var(--space-3); font-size: var(--font-size-h4); }
.sps-keypoints > :last-child { margin-bottom: 0; }
.sps-keypoints :where(ul, ol) { margin-block: 0; padding-left: var(--space-5); }
.sps-keypoints li { margin-bottom: var(--space-2); }
.sps-keypoints li:last-child { margin-bottom: 0; }
/* Contents list (four or more H2s). */
.article-toc { margin: 0 0 var(--space-6); padding-block: var(--space-3); border-block: 1px solid var(--color-border); font-size: 0.9375rem; line-height: 1.4; }
.article-toc__title { display: list-item; margin: 0; padding-block: var(--space-1); color: var(--color-primary); font-weight: var(--font-weight-bold); cursor: pointer; } /* details summary; list-item keeps the native marker */
.article-toc__list { margin: var(--space-2) 0 0; padding-left: var(--space-5); }
.article-toc__list li { margin-bottom: 0; }
.article-toc__list a { display: inline-block; padding-block: var(--space-1); }
/* Sources (group with the class sps-article-sources, lifted below the body). Same rule as the service sources list. */
.sps-article-sources { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 2px solid var(--color-primary); }
.sps-article-sources > :where(h2, h3) { margin-bottom: var(--space-3); font-size: var(--font-size-h3); }
.sps-article-sources :where(ul, ol) { margin-block: 0; padding-left: var(--space-5); font-size: var(--font-size-small); }
.sps-article-sources li { margin-bottom: var(--space-2); }
.sps-article-sources > :last-child { margin-bottom: 0; }
/* Organisation box and contextual call to action. */
.article-org { margin-top: var(--space-7); padding-top: var(--space-4); border-top: 1px solid var(--color-border); }
.article-org__line { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-1) var(--space-3); margin: 0; font-size: var(--font-size-small); }
.article-org__name { color: var(--color-primary); }
.article-cta { margin-top: var(--space-6); padding: var(--space-5); }
.article-cta__title { margin-bottom: var(--space-3); font-size: var(--font-size-h3); }
.article-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-5); margin: 0 0 var(--space-4); color: var(--color-text); }
.article-cta .sps-more { margin: 0; }
/* Reading column and breakouts. After the component rules above on purpose: their margin shorthands must not reset the auto inline margins. */
.article-main > * { max-width: var(--article-measure); margin-inline: auto; }
.article-main > :where(.article-image, .sps-keypoints, .article-body) { max-width: var(--article-wide); }
.blog-related h2 { margin-bottom: var(--space-6); }
/* Desktop (48rem and up), C2-W1: the breadcrumb, hero and article begin at the outer site grid's left edge. Text stays on the shared 40rem measure;
   the lead image, tables and galleries may use the 56rem frame.
   Below 48rem nothing here applies (one full-width column, centred hero text as before). Last on purpose: it must beat the auto margins set above. */
@media (min-width: 48rem) {
	.entry--article .page-hero__title,
	.entry--article .page-hero__lead,
	.entry--article .article-byline,
	.article-main > *,
	.article-body.entry__content > * { margin-inline: 0; }
	.article-main > .sps-keypoints { max-width: var(--article-measure); } /* the two boxes are text blocks: same 40rem width, so their right edges match and their lines stay readable */
}
@media (max-width: 29.9375rem) {
	.article-cta { padding: var(--space-4); }
	.article-main { padding-top: var(--space-6); }
}

/* Reference-led layout, using Savvy's established palette and light navigation (C2-R2).
   All copy, media, actions and URLs remain rendered from the existing records. */

.reference-archive__hero,
.reference-product__hero,
.industry-review__hero,
.entry--service .page-hero {
	background: linear-gradient(135deg, var(--color-primary), var(--color-hero-end));
	color: #fff;
}
.reference-archive__hero,
.reference-product__hero,
.industry-review__hero { padding-block: clamp(4rem, 10vw, 7rem); }
.reference-archive__hero h1,
.reference-product__hero h1,
.industry-review__hero h1,
.entry--service .page-hero h1 { max-width: 64rem; margin: 0 auto; color: #fff; font-family: var(--font-body); font-size: clamp(2.25rem, 3.6vw, 3.75rem); font-weight: 750; line-height: 1.16; text-align: center; }
.reference-archive__body { padding-block: clamp(3rem, 6vw, 5rem); }
.reference-archive .content-list { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 3vw, 2rem); }
.reference-archive .content-card { display: flex; flex-direction: column; gap: 0; min-width: 0; padding: 0 0 var(--space-5); overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); box-shadow: var(--shadow-small); }
.reference-archive .content-card__image { width: 100%; max-height: 16rem; overflow: hidden; border-radius: 0; aspect-ratio: 16 / 9; }
.reference-archive .content-card__image img { width: 100%; height: 100%; object-fit: cover; }
.reference-archive .content-card__header { padding: var(--space-5) var(--space-5) 0; }
.reference-archive .content-card__title { margin-bottom: var(--space-3); color: var(--color-primary); font-family: var(--font-body); font-size: clamp(1.3rem, 1.2rem + 0.55vw, 1.6rem); font-weight: 750; line-height: 1.3; }
.reference-archive .content-card__excerpt { max-width: none; padding: 0 var(--space-5); color: var(--color-text); }
.reference-archive .content-card__excerpt p { margin-bottom: 0; }
.reference-archive .content-card__title a:hover { color: var(--color-accent-hover); }

.entry--service .page-hero { border: 0; padding-block: clamp(3.5rem, 8vw, 6rem); }
.entry--service .service-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: var(--space-6); }
.entry--service .service-hero__text { width: 100%; max-width: none; text-align: left; }
.entry--service .service-hero__text .page-hero__title { margin-inline: 0; text-align: left; }
.entry--service .service-hero__answer { max-width: 46rem; margin: var(--space-5) 0 0; padding: clamp(1rem, 3vw, 2rem); border-radius: var(--radius-small); background: rgb(18 44 81 / 55%); color: #fff; font-size: clamp(1rem, 1.1vw, 1.125rem); line-height: 1.7; }
.entry--service .service-hero__answer :is(p, a) { color: #fff; }
.entry--service .service-hero__answer--mobile { display: none; }
.entry--service .service-hero__actions,
.entry--service .service-meta { justify-content: flex-start; }
.entry--service .service-hero__or,
.entry--service .service-hero__or a,
.entry--service .service-meta,
.entry--service .service-meta a { color: #fff; }
.entry--service .service-hero__media { width: min(100%, 34rem); max-height: 22rem; margin: 0; justify-self: end; }
.entry--service .service-hero__media--fallback { border-color: rgb(255 255 255 / 30%); background: rgb(18 44 81 / 30%); color: #fff; }
.entry--service .service-content { color: var(--color-text); }
.entry--service .service-content > :where(.wp-block-heading, .wp-block-paragraph, .wp-block-list, .wp-block-quote) { width: min(calc(100% - 2 * var(--space-4)), 64rem); }
.entry--service .service-content :is(h2, h3, h4) { color: var(--color-primary); font-family: var(--font-body); font-weight: 750; }
.entry--service .service-content > .wp-block-heading { padding-top: var(--space-5); border-top: 1px solid var(--color-border); }
.entry--service .service-content > :first-child { border-top: 0; }
.service-toc { padding-block: var(--space-4); }
.service-toc details { padding: var(--space-3) var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-background); }
.service-toc summary { color: var(--color-primary); font-weight: var(--font-weight-bold); cursor: pointer; }
.service-toc ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1) var(--space-5); margin: var(--space-3) 0 0; padding-left: var(--space-5); }
.service-toc__item--h3 { margin-left: var(--space-3); font-size: var(--font-size-small); }
.service-toc a { display: inline-block; padding-block: var(--space-1); }

.reference-product__layout { padding-block: clamp(3rem, 6vw, 5rem); }
.reference-product .entry__image { max-width: 64rem; margin: 0 auto var(--space-7); }
.reference-product .entry__image img { display: block; width: 100%; height: auto; border-radius: var(--radius-medium); }
.reference-product .entry__content { max-width: 64rem; margin-inline: auto; color: var(--color-text); font-size: 1.0625rem; line-height: 1.75; }
.reference-product .entry__content :is(h2, h3, h4) { margin-top: var(--space-7); color: var(--color-primary); font-family: var(--font-body); font-weight: 750; }
.reference-product .entry__content :is(p, ul, ol) { max-width: 60rem; }
.reference-product .post-navigation { max-width: 64rem; margin: var(--space-8) auto 0; }
.product-body { width: 100%; }
.product-intro { padding-bottom: clamp(2.5rem, 5vw, 4rem); }
.product-intro--has-image { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(18rem, .85fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.product-intro__text { min-width: 0; max-width: 46rem; font-size: 1.0625rem; line-height: 1.75; }
.product-intro__text > :first-child { margin-top: 0; }
.product-intro__text > :last-child { margin-bottom: 0; }
.product-intro__media { display: grid; width: 100%; min-width: 0; margin: 0; padding: var(--space-3); place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-primary-tint); }
.product-intro__media img { display: block; width: 100%; height: 100%; border-radius: var(--radius-small); background: #fff; }
.product-intro__media--landscape { aspect-ratio: 4 / 3; }
.product-intro__media--landscape img { object-fit: cover; }
.product-intro__media--portrait { width: min(100%, 24rem); aspect-ratio: 3 / 4; justify-self: center; }
.product-intro__media--portrait img { object-fit: contain; }
.product-section { padding-block: clamp(2rem, 4vw, 3.25rem); border-top: 1px solid var(--color-border); }
.product-section__text { max-width: 54rem; }
.product-section__text > :first-child { margin-top: 0; }
.product-section__text > :last-child { margin-bottom: 0; }
.product-section__text h2 { max-width: 46rem; margin-bottom: var(--space-4); font-size: clamp(1.75rem, 1.55rem + .8vw, 2.25rem); line-height: 1.18; text-wrap: balance; }
.product-section__text h3 { margin: var(--space-5) 0 var(--space-2); padding-left: var(--space-3); border-left: 3px solid var(--color-accent); font-size: clamp(1.125rem, 1.05rem + .35vw, 1.35rem); line-height: 1.35; }
.product-section__text h4 { margin: var(--space-4) 0 var(--space-2); font-size: 1rem; letter-spacing: .02em; }
.product-section--compact { padding-block: clamp(1.5rem, 3vw, 2.5rem); }
.product-section__compact-heading h2 { margin: 0 0 var(--space-5); font-size: clamp(1.75rem, 1.55rem + .8vw, 2.25rem); }
.product-section__compact-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
.product-section__compact-item { display: flex; min-height: 5rem; align-items: center; padding: var(--space-4); border: 1px solid var(--color-border); border-radius: var(--radius-small); background: var(--color-primary-tint); }
.product-section__compact-item h2 { margin: 0; font-size: clamp(1.15rem, 1.08rem + .35vw, 1.35rem); line-height: 1.25; }
.product-section__eyebrow { margin: 0 0 var(--space-2); color: var(--color-accent); font-size: var(--font-size-small); font-weight: var(--font-weight-bold); letter-spacing: .06em; text-transform: uppercase; }

/* The Industries exception: full existing sector content in the reference's card grid. */
.industry-review__sections { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5); padding-block: var(--section-space); }
.industry-review__section { min-width: 0; padding: clamp(1.25rem, 3vw, 2rem); border: 1px solid var(--color-border); border-radius: var(--radius-medium); box-shadow: var(--shadow-small); }
.industry-review__section h2 { color: var(--color-primary); font-family: var(--font-body); font-size: clamp(1.4rem, 2vw, 1.75rem); font-weight: 750; }
.industry-review__section h2 a { color: inherit; text-decoration: none; }
.industry-review__section h2 a:hover { color: var(--color-accent-hover); text-decoration: underline; }
.industry-review__section .entry__content > :last-child { margin-bottom: 0; }
.industry-review__image { margin-bottom: var(--space-5); }
.industry-review__image img { display: block; width: 100%; height: auto; border-radius: var(--radius-small); }
.reference-content-section {
	width: min(calc(100% - 2 * var(--space-4)), var(--width-container));
	margin-inline: auto;
	padding-block: clamp(2.5rem, 5vw, 4.5rem);
	border-top: 1px solid var(--color-border);
}
.reference-content-section:first-child { border-top: 0; }
.reference-content-section--has-image { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.reference-content-section__text { min-width: 0; max-width: 42rem; }
.reference-content-section__text > :first-child { margin-top: 0; }
.reference-content-section__text > :last-child { margin-bottom: 0; }
.reference-content-section__text :is(h2, h3, h4) { color: var(--color-primary); }
.reference-content-section__media { display: grid; min-width: 0; aspect-ratio: 4 / 3; margin: 0; padding: clamp(.75rem, 2vw, 1.5rem); place-items: center; overflow: hidden; border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-primary-tint); }
.reference-content-section__media img { display: block; width: 100%; height: 100%; aspect-ratio: 4 / 3; border-radius: var(--radius-small); background: #fff; object-fit: contain; }
.reference-content-section--reverse .reference-content-section__text { grid-column: 2; grid-row: 1; }
.reference-content-section--reverse .reference-content-section__media { grid-column: 1; grid-row: 1; }
.entry--service .service-content > .reference-content-section,
.reference-product .entry__content > .reference-content-section { max-width: none; }
.entry--service .service-content > .reference-content-section:first-child { margin-top: 0; }
.entry--service .service-content > .reference-content-section:last-child { margin-bottom: 0; }
.reference-product .entry__content > .reference-content-section :is(p, ul, ol) { max-width: 42rem; }
@media (max-width: 47.9375rem) {
	.reference-archive .content-list,
	.industry-review__sections { grid-template-columns: minmax(0, 1fr); }
	.reference-content-section--has-image { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.reference-content-section--reverse .reference-content-section__text,
	.reference-content-section--reverse .reference-content-section__media { grid-column: 1; grid-row: auto; }
	.reference-content-section__media,
	.reference-content-section__media img { aspect-ratio: 16 / 10; }
	.reference-content-section__media--portrait { width: min(100%, 22rem); aspect-ratio: 3 / 4; justify-self: center; }
	.reference-content-section__media--portrait img { aspect-ratio: 3 / 4; object-fit: cover; }
	.entry--service .service-hero__actions { display: none; }
	.entry--service .service-hero__media--fallback { display: none; }
	.service-toc ul { grid-template-columns: minmax(0, 1fr); }
	.product-intro--has-image { grid-template-columns: minmax(0, 1fr); gap: var(--space-5); }
	.product-intro__media { grid-row: 2; }
}
@media (min-width: 56.0625rem) {
	.entry--service .service-hero__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-7); }
	.entry--service .service-hero__media { justify-self: end; }
}
@media (max-width: 35rem) {
	.reference-archive__hero,
	.reference-product__hero,
	.industry-review__hero { padding-block: var(--space-8); }
	.reference-archive .content-card__header { padding: var(--space-4) var(--space-4) 0; }
	.reference-archive .content-card__excerpt { padding-inline: var(--space-4); }
	.entry--service .service-hero__answer { margin-top: var(--space-5); }
	.entry--service .page-hero { padding-block: var(--space-7); }
	.entry--service .service-hero__answer--desktop { display: none; }
	.entry--service .service-hero__answer--mobile { display: block; padding: var(--space-3) var(--space-4); }
	.entry--service .service-hero__answer--mobile summary { font-weight: var(--font-weight-bold); cursor: pointer; }
	.entry--service .service-hero__answer--mobile p { margin-top: var(--space-3); }
	.reference-product__layout { padding-block: var(--space-7); }
	.product-section__compact-grid { grid-template-columns: minmax(0, 1fr); }
	.product-section__compact-item { min-height: 0; }
}

/* Service detail presentation only; product renderers and shared reference rows keep their styles. */
.entry--service .service-hero__grid:not(.service-hero__grid--has-media) { grid-template-columns: minmax(0, 1fr); }
.entry--service .service-hero__text .page-hero__title { max-width: 24ch; font-size: clamp(2rem, 3.4vw, 3.25rem); text-wrap: balance; }
.entry--service .service-hero__answer { padding: 0; background: none; font-size: 1.0625rem; line-height: 1.75; }
.entry--service .service-hero__media { width: 100%; max-height: none; aspect-ratio: 4 / 3; border-radius: var(--radius-medium); }
.entry--service .service-hero__media img { object-fit: contain; }
.entry--service .service-content { padding-bottom: var(--space-7); }
.entry--service .service-detail-section {
	width: min(calc(100% - 2 * var(--space-4)), var(--width-container));
	max-width: none;
	margin: 0 auto;
	padding-block: clamp(2rem, 4vw, 3.5rem);
	border-top: 1px solid var(--color-border);
}
.entry--service .service-detail-section:first-child { border-top: 0; }
.entry--service .service-detail-section__text { min-width: 0; width: 100%; max-width: 46rem; margin-inline: auto; overflow-wrap: anywhere; font-size: 1.0625rem; line-height: 1.75; }
.entry--service .service-detail-section--wide .service-detail-section__text { max-width: none; }
.entry--service .service-detail-section__text > :first-child { margin-top: 0; }
.entry--service .service-detail-section__text > :last-child { margin-bottom: 0; }
.entry--service .service-detail-section__text :is(h2, h3, h4) { line-height: 1.3; text-wrap: balance; }
.entry--service .service-detail-section__text h2 { margin-bottom: var(--space-5); font-size: clamp(1.75rem, 2.5vw, 2.5rem); }
.entry--service .service-detail-section__text h3 { margin-block: var(--space-6) var(--space-4); font-size: clamp(1.25rem, 1.7vw, 1.65rem); }
.entry--service .service-detail-section__text :is(p, ul, ol) { margin-bottom: var(--space-4); }
.entry--service .service-detail-section__text li + li { margin-top: var(--space-2); }
.entry--service .service-detail-section__text :is(.alignwide, .alignfull) { width: 100%; max-width: 100%; margin-inline: 0; }
.entry--service .service-detail-section__media { width: 100%; max-width: 34rem; margin: 0 auto; }
.entry--service .service-detail-section__media img { display: block; width: 100%; height: auto; max-height: 32rem; object-fit: contain; border-radius: var(--radius-medium); }
.entry--service .service-toc { padding-block: var(--space-5) 0; }
.entry--service .service-toc a { overflow-wrap: anywhere; }
.entry--service .service-hero__answer a { text-decoration: underline; }
.entry--service .page-hero :focus-visible { outline-color: var(--color-on-dark); }
@media (min-width: 56.0625rem) {
	.entry--service .service-detail-section--has-image { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(2rem, 5vw, 5rem); align-items: start; }
	.entry--service .service-detail-section--reverse .service-detail-section__text { grid-column: 2; grid-row: 1; }
	.entry--service .service-detail-section--reverse .service-detail-section__media { grid-column: 1; grid-row: 1; }
}
@media (max-width: 56rem) {
	.entry--service .service-hero__media { max-width: 34rem; justify-self: start; }
	.entry--service .service-detail-section__media { margin-top: var(--space-6); }
}

/* Shared reference presentation, retaining the approved Installation pilot and Savvy colours. */
:is(.entry--installation, .entry--service-reference) .page-hero { position: relative; isolation: isolate; overflow: hidden; padding-block: clamp(3rem, 6vw, 5rem); }
:is(.entry--installation, .entry--service-reference) .page-hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(135deg, rgb(18 44 81 / 88%), rgb(18 44 81 / 74%)); }
:is(.entry--installation, .entry--service-reference) .service-hero__grid { display: block; }
:is(.entry--installation, .entry--service-reference) .service-hero__text { position: relative; max-width: 60rem; margin-inline: auto; text-align: center; }
:is(.entry--installation, .entry--service-reference) .service-hero__text .page-hero__title { max-width: none; margin-inline: auto; text-align: center; font-size: clamp(2rem, 3vw, 2.5rem); }
:is(.entry--installation, .entry--service-reference) .service-hero__answer { max-width: 56rem; margin-inline: auto; padding: clamp(1rem, 2.5vw, 2rem); border-radius: var(--radius-small); background: rgb(18 44 81 / 62%); font-weight: 600; }
:is(.entry--installation, .entry--service-reference) .service-hero__actions, :is(.entry--installation, .entry--service-reference) .service-meta { justify-content: center; }
:is(.entry--installation, .entry--service-reference) .service-hero__media { position: absolute; inset: 0; z-index: -2; width: 100%; max-width: none; height: 100%; margin: 0; aspect-ratio: auto; border-radius: 0; }
:is(.entry--installation, .entry--service-reference) .service-hero__media img { object-fit: cover; }
:is(.entry--installation, .entry--service-reference) .service-content { padding-bottom: 0; }
:is(.entry--installation, .entry--service-reference) .service-detail-section { width: 100%; max-width: none; margin: 0; padding: clamp(2.5rem, 5.5vw, 4.5rem) max(1rem, calc((100% - 75rem) / 2)); border: 0; background: var(--color-background-alt); }
:is(.entry--installation, .entry--service-reference) .service-detail-section:nth-child(even) { background: var(--color-background); }
:is(.entry--installation, .entry--service-reference) .service-detail-section__text { max-width: none; font-size: 1rem; line-height: 1.8; }
:is(.entry--installation, .entry--service-reference) .service-detail-section__text h2 { font-size: clamp(1.75rem, 2.5vw, 2.25rem); }
:is(.entry--installation, .entry--service-reference) .service-detail-section__text h3 { font-size: clamp(1.25rem, 1.9vw, 1.65rem); }
:is(.entry--installation, .entry--service-reference) .service-detail-section__media { align-self: stretch; position: relative; min-height: 20rem; max-width: none; margin: 0; }
:is(.entry--installation, .entry--service-reference) .service-detail-section__media img { position: absolute; inset: 0; width: 100%; height: 100%; max-height: none; object-fit: cover; }
:is(.entry--installation, .entry--service-reference) :is(.installation-section--portable-fire-extinguishers-equipment, .installation-section--emergency-evacuation-plans, .installation-section--emergency-procedure-manual) .service-detail-section__media { align-self: center; min-height: 0; }
:is(.entry--installation, .entry--service-reference) :is(.installation-section--portable-fire-extinguishers-equipment, .installation-section--emergency-evacuation-plans, .installation-section--emergency-procedure-manual) .service-detail-section__media img { position: static; height: auto; object-fit: contain; }
:is(.entry--installation, .entry--service-reference) :is(.installation-section--our-core-installation-services, .installation-section--our-commitment) { text-align: center; }
:is(.entry--installation, .entry--service-reference) .installation-section--our-core-installation-services { padding-block: var(--space-7); }
:is(.entry--installation, .entry--service-reference) .installation-section--our-commitment .service-detail-section__text { max-width: 53rem; }
:is(.entry--installation, .entry--service-reference) .installation-section--what-we-install p, :is(.entry--installation, .entry--service-reference) .installation-section--our-installation-philosophy p:not(:last-child) { position: relative; padding-left: 1.25rem; }
:is(.entry--installation, .entry--service-reference) .installation-section--what-we-install p::before, :is(.entry--installation, .entry--service-reference) .installation-section--our-installation-philosophy p:not(:last-child)::before { content: "•"; content: "•" / ""; position: absolute; left: 0; }
@media (min-width: 48rem) {
	:is(.entry--installation, .entry--service-reference) .service-detail-section--has-image { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: center; gap: clamp(1.5rem, 4.5vw, 4rem); }
	:is(.entry--installation, .entry--service-reference) .service-detail-section--reverse .service-detail-section__text { grid-column: 2; grid-row: 1; }
	:is(.entry--installation, .entry--service-reference) .service-detail-section--reverse .service-detail-section__media { grid-column: 1; grid-row: 1; }
}
@media (max-width: 47.9375rem) {
	:is(.entry--installation, .entry--service-reference) .service-detail-section__media { margin-top: var(--space-6); min-height: 18rem; aspect-ratio: 4 / 3; }
	:is(.entry--installation, .entry--service-reference) :is(.installation-section--portable-fire-extinguishers-equipment, .installation-section--emergency-evacuation-plans, .installation-section--emergency-procedure-manual) .service-detail-section__media { aspect-ratio: auto; }
}

/* Reference service variants: explicit image sides, intact joined blocks and optional text columns. */
.entry--service-reference .service-detail-section--prose .service-detail-section__text { max-width: 53rem; }
.entry--service-reference .service-detail-section--prose { padding-block: var(--space-6); background: var(--color-background); }
.entry--service-reference .service-detail-section--center { text-align: center; }
.entry--service-reference .service-content > .service-detail-section:first-child { margin-top: 0; }
.entry--service-reference .service-content > .service-detail-section:last-child { margin-bottom: 0; }
.entry--service-reference .service-detail-section--contain .service-detail-section__media { align-self: center; min-height: 0; }
.entry--service-reference .service-detail-section--contain .service-detail-section__media img { position: static; height: auto; object-fit: contain; }
@media (min-width: 48rem) {
	.entry--service-reference .service-content { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.entry--service-reference .service-detail-section { grid-column: 1 / -1; }
	.entry--service-reference .service-detail-section--half:nth-child(n) { grid-column: span 1; padding-inline: max(1rem, calc((100vw - 75rem) / 2)); background: var(--color-background-alt); }
}
@media (max-width: 47.9375rem) {
	.entry--service-reference .service-detail-section--contain .service-detail-section__media { aspect-ratio: auto; }
}
.service-enquiry { padding-block: clamp(3rem, 6vw, 5rem); background: var(--color-background-alt); }
.service-enquiry__inner { max-width: 56rem; }
.service-enquiry h2 { margin-bottom: var(--space-6); color: var(--color-primary); font-family: var(--font-body); font-size: var(--font-size-h2); text-align: center; }
.service-enquiry .sps-form--compact .sps-form__grid { gap: var(--space-4) var(--space-5); }
.service-enquiry .sps-form input, .service-enquiry .sps-form select { min-height: var(--tap-target); }
.service-enquiry .sps-form textarea { min-height: 8rem; }
.service-enquiry .form-notice { padding: 0; border: 0; background: none; }
.service-enquiry .sps-form__submit .button { width: 100%; }

/* 13 Motion */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { animation: none !important; transition: none !important; } /* none (not 0.01ms): a near-zero transition can still be sampled part-way when the viewport changes */
	.button:hover, .sps-card:hover { transform: none; }
}

/* Keep the whole 4:3 mark visible; frame its dark background deliberately on the light header. */
.site-header .site-header__inner { padding-block: var(--space-1); }
.site-header .site-logo { padding: var(--space-1); border: 1px solid var(--color-border); border-radius: var(--radius-medium); background: var(--color-background); }
.site-header .site-logo img { width: 5.5rem; height: auto; max-width: none; border-radius: var(--radius-small); object-fit: contain; }
.footer-brand__logo img { width: 8rem; height: auto; max-width: none; border-radius: var(--radius-small); object-fit: contain; }
@media (max-width: 40rem) {
	.site-header .site-logo img { width: 4.5rem; }
	.footer-brand__logo img { width: 6.5rem; }
}