/*
Theme Name: Steve's Concrete LLC
Theme URI: https://jsmcorp.com/
Author: Jump Start Marketing
Author URI: https://jsmcorp.com/
Description: Custom theme for Steve’s Concrete LLC.
Version: 1.5.0
Requires at least: 6.0
Tested up to: 6.8
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: theme-stevesconcretellc
Tags: custom-menu, featured-images, threaded-comments, translation-ready, accessibility-ready
*/

/* =========================================================
   1. Tokens
   ---------------------------------------------------------
   Light content pages, dark hero and dark footer. The two dark
   surfaces are the brand navy; everything between them is white
   or a very cool off-white, so photographs of grey concrete stay
   the most saturated thing on the screen.
   ========================================================= */
:root {
	/* Sampled from the logo badge: the bright cyan glow, the mid blue in the
	   lettering, and the dark slate behind it. */
	--primary: #16283a;
	--accent: #5ec1ec;
	--secondary: #1f7ba3;
	--dark: #0d1a26;

	/* Channel triplets for the same three colours. Every translucent tint in
	   this stylesheet is built from these rather than from a literal, so
	   recolouring the site is a change to the tokens and nothing else. */
	--accent-rgb: 94, 193, 236;
	--primary-rgb: 22, 40, 58;
	--ink-rgb: 13, 26, 38;

	/* Derived slates, kept as their own tokens so the Customizer can override
	   --primary without flattening the depth in the hero. */
	--ink: #0d1a26;
	--ink-2: #1e3a52;
	--ink-line: rgba(255, 255, 255, .12);
	--on-dark: rgba(255, 255, 255, .78);
	--on-dark-soft: rgba(255, 255, 255, .58);
	/* Text on a bright-blue surface, and blue dark enough to pass AA as body
	   text on white (6.2:1). The bright accent itself is far too light for
	   small text on a light background. */
	--accent-ink: #08202c;
	--accent-dark: #12688c;

	--text: #16202c;
	--muted: #5a6a7c;
	--light-bg: #f4f6f9;
	--light-bg-2: #eceff4;
	--border: #e1e7ef;
	--white: #ffffff;

	--radius: 14px;
	--radius-sm: 10px;
	--radius-btn: 10px;
	--container: 1180px;
	--gutter: 28px;
	--section-y: 96px;
	--topbar-image-h: 28px;
	--topbar-image-max-w: 420px;
	--card-pad: 32px;
	--header-h: 84px;
	/* The taller header used when a logo is set. Kept on :root as well as on
	   body.has-logo because scroll-padding-top is set on <html>, which cannot
	   see a variable that only exists on <body>. */
	--header-h-logo: 126px;
	--logo-h: 96px;
	--logo-max-w: 320px;

	--font-head: "Poppins", "Helvetica Neue", Helvetica, Arial, sans-serif;
	--font-body: "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

	--shadow-xs: 0 1px 2px rgba(var(--primary-rgb), .06);
	--shadow: 0 1px 2px rgba(var(--primary-rgb), .05), 0 8px 24px rgba(var(--primary-rgb), .07);
	--shadow-lg: 0 2px 6px rgba(var(--primary-rgb), .06), 0 24px 56px rgba(var(--primary-rgb), .14);
	--shadow-accent: 0 10px 26px rgba(var(--accent-rgb), .32);
	--transition: .24s cubic-bezier(.4, 0, .2, 1);
}

/* A logo needs more room than a wordmark does. The header only grows when
   there is actually a logo to fill it — set on the body rather than the header
   because the hero's pull-up reads the same token, and the two have to agree
   or the hero sits wrong under the overlay bar. functions.php adds the class. */
body.has-logo { --header-h: var(--header-h-logo); }

/* =========================================================
   2. Reset
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
/* scroll-padding-top is what stops an anchor jump parking the section heading
   underneath the sticky header. It has to track the header, which is taller
   when a logo is set — a fixed 100px was right for one of those states only. */
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--header-h) + 24px); }
/* Anchor jumps have to clear the sticky header, which is taller when a logo is
   set. Without this the section heading lands underneath the bar. */
html:has(body.has-logo) { scroll-padding-top: calc(var(--header-h-logo) + 24px); }
body {
	margin: 0;
	font-family: var(--font-body);
	font-size: 17px;
	line-height: 1.68;
	color: var(--text);
	background: var(--white);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}
img, svg, video { max-width: 100%; height: auto; display: block; }
a { color: var(--secondary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--accent-dark); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-head);
	color: var(--primary);
	line-height: 1.14;
	margin: 0 0 .6em;
	font-weight: 700;
	letter-spacing: -.022em;
	text-wrap: balance;
}
h1 { font-size: clamp(2.5rem, 5.4vw, 4rem); font-weight: 800; letter-spacing: -.032em; }
h2 { font-size: clamp(1.95rem, 3.4vw, 2.75rem); font-weight: 800; letter-spacing: -.028em; }
h3 { font-size: clamp(1.2rem, 1.6vw, 1.35rem); font-weight: 700; }
h4 { font-size: 1.08rem; }
p { margin: 0 0 1.15em; }
ul, ol { margin: 0 0 1.15em; padding-left: 1.3em; }
strong { font-weight: 600; color: var(--primary); }

blockquote {
	margin: 1.8em 0;
	padding: 1.2em 1.6em;
	border-left: 3px solid var(--accent);
	background: var(--light-bg);
	border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
	font-size: 1.06rem;
	font-style: italic;
	color: var(--primary);
}
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: .92em; }
table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; }
th, td { padding: .72em .9em; border-bottom: 1px solid var(--border); text-align: left; }
th { font-family: var(--font-head); font-weight: 600; color: var(--primary); }
hr { border: 0; border-top: 1px solid var(--border); margin: 2.5em 0; }

:focus-visible {
	outline: 3px solid var(--accent);
	outline-offset: 2px;
	border-radius: 3px;
}

.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0, 0, 0, 0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	background: var(--accent);
	color: var(--accent-ink);
	padding: 12px 20px;
	z-index: 10000;
	font-weight: 700;
	border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================
   3. Layout
   ========================================================= */
.container { width: 100%; max-width: var(--container); margin: 0 auto; padding: 0 var(--gutter); }
/* A max-width with no auto margins does not centre — it pins the column to
   the left and leaves the rest of the parent empty. */
.container-narrow { max-width: 800px; margin-left: auto; margin-right: auto; }

.section { padding: var(--section-y) 0; position: relative; }
.section--tint { background: var(--light-bg); }
.section--dark { background: var(--primary); color: var(--on-dark); }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }

/* A hairline between two consecutive light sections stops the page reading
   as one endless white column when the tint alternation lands two together. */
.section + .section:not(.section--tint):not(.section--dark) { border-top: 1px solid var(--border); }
.section--tint + .section--tint { border-top: 1px solid var(--border); }

.section-head { max-width: 720px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { margin-bottom: .38em; }
.section-head p { color: var(--muted); font-size: 1.09rem; margin: 0; line-height: 1.65; }
.section-head--left { margin-left: 0; text-align: left; }

/* Homepage intro: the lead paragraph under the hero. Reads a size up from
   body copy so it carries the page before the section grids start. */
.section--intro .container-narrow { text-align: center; }
.section--intro .section-head { margin-bottom: 26px; }
.section--intro .entry-content p { font-size: 1.14rem; line-height: 1.78; color: var(--muted); }
.section--intro .entry-content p:last-child { margin-bottom: 0; }

.eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-family: var(--font-head);
	font-size: .76rem;
	font-weight: 700;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: var(--accent-dark);
	margin-bottom: 14px;
}
.eyebrow::before { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }
.section-head .eyebrow::after { content: ""; width: 26px; height: 2px; background: var(--accent); border-radius: 2px; }

.grid { display: grid; gap: 26px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

/* =========================================================
   4. Buttons
   ========================================================= */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	line-height: 1;
	letter-spacing: -.005em;
	padding: 17px 30px;
	border-radius: var(--radius-btn);
	border: 2px solid transparent;
	cursor: pointer;
	text-align: center;
	white-space: nowrap;
	transition: background var(--transition), border-color var(--transition), color var(--transition), transform var(--transition), box-shadow var(--transition);
}
.btn svg { width: 18px; height: 18px; fill: currentColor; flex: 0 0 auto; }
.btn:hover { transform: translateY(-2px); }

.btn--primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-xs); }
.btn--primary:hover { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-accent); }

.btn--dark { background: var(--primary); color: #fff; }
.btn--dark:hover { background: var(--ink-2); color: #fff; box-shadow: var(--shadow); }

.btn--ghost { background: transparent; color: var(--primary); border-color: var(--border); }
.btn--ghost:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

.btn--light { background: #fff; color: var(--primary); }
.btn--light:hover { background: #fff; color: var(--primary); box-shadow: var(--shadow-lg); }

.btn--on-dark { background: rgba(255,255,255,.08); color: #fff; border-color: rgba(255,255,255,.36); }
.btn--on-dark:hover { background: #fff; color: var(--primary); border-color: #fff; }

.btn--sm { padding: 12px 20px; font-size: .92rem; }
.btn--wide { width: 100%; }

/* =========================================================
   5. Topbar and header
   ========================================================= */
.topbar {
	background: var(--ink);
	color: var(--on-dark);
	font-size: .86rem;
	padding: 9px 0;
	position: relative;
	z-index: 210;
}
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--accent); }

/* Full-width variant: no container, so the row carries its own side padding.
   Without it the first and last items sit flush against the browser edge. */
.topbar__bleed { width: 100%; padding-left: clamp(18px, 3vw, 40px); padding-right: clamp(18px, 3vw, 40px); }

/* Three tracks with the outer two equal is what keeps the middle column
   optically centred in the bar, rather than centred in the space left over. */
.topbar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; }
/* The social icons live at the far left of the bar, with any top-bar text
   following them on the same row. */
.topbar__left { justify-self: start; text-align: left; min-width: 0; display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.topbar__note { min-width: 0; }
.topbar__center { justify-self: center; text-align: center; min-width: 0; }
.topbar__right { justify-self: end; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.topbar__right a { display: inline-flex; align-items: center; gap: 7px; font-weight: 500; }
.topbar__right a svg { width: 14px; height: 14px; fill: var(--accent); flex: 0 0 auto; }

/* Bounded on BOTH axes. Height alone is not enough: a wide banner scaled to
   28px tall is still ~1150px across, which swallows the middle track. The
   width cap must be a LENGTH, never a percentage — a percentage max-width in
   an auto-sized grid track is circular and resolves to zero. And the height
   must be set outright rather than left auto under a max-height, because an
   SVG with a viewBox but no width/height attributes has no intrinsic size to
   resolve auto against and collapses to nothing. */
.topbar__image { display: block; height: var(--topbar-image-h); width: auto; max-width: var(--topbar-image-max-w); object-fit: contain; object-position: center; }

/* Amber, to match the mail and phone icons beside them in the top bar. Set on
   the fill rather than inherited from currentColor, because the link colour
   around them is the muted on-dark text colour. Full opacity at rest for the
   same reason — dimming to 80% would leave them a shade off the icons they sit
   next to; the dimming moved to hover instead. */
.social-nav { display: flex; gap: 14px; align-items: center; }
.social-nav a { display: inline-flex; transition: opacity var(--transition), transform var(--transition); }
.social-nav a:hover { opacity: .72; transform: translateY(-1px); }
.social-nav svg { width: 17px; height: 17px; fill: var(--accent); }

.site-header {
	background: #fff;
	border-bottom: 1px solid var(--border);
	position: relative;
	z-index: 200;
	transition: background var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.site-header.is-sticky { position: sticky; top: 0; }
.site-header.scrolled { box-shadow: 0 1px 0 var(--border), 0 10px 30px rgba(var(--primary-rgb), .08); }

.header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	min-height: var(--header-h);
}

.site-brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
/* Height is set outright rather than capped with max-height: an SVG logo
   exported with a viewBox but no width/height attributes has no intrinsic size
   to resolve `auto` against and collapses to nothing. The width cap is a
   length, not a percentage, so a very wide logo scales down instead of pushing
   the navigation off the row. */
.site-brand img {
	height: var(--logo-h);
	width: auto;
	max-width: var(--logo-max-w);
	object-fit: contain;
	object-position: left center;
}
/* Light / dark logo pair, rendered only on the overlay header. The light one
   shows while the bar is transparent over the hero, the dark one once the bar
   turns white on scroll. Both are laid on the same grid cell so the swap does
   not shift the row by a pixel. */
.custom-logo-link:has(.site-brand__logo--light) { display: grid; }
.site-brand__logo { grid-area: 1 / 1; }
.site-brand__logo--light { visibility: hidden; }
.site-header--overlay .site-brand__logo--dark { visibility: hidden; }
.site-header--overlay .site-brand__logo--light { visibility: visible; }
.site-header--overlay.scrolled .site-brand__logo--dark { visibility: visible; }
.site-header--overlay.scrolled .site-brand__logo--light { visibility: hidden; }

.site-brand__text { font-family: var(--font-head); font-weight: 800; font-size: 1.32rem; color: var(--primary); line-height: 1.1; letter-spacing: -.02em; }
.site-brand__tag { display: block; margin-top: 3px; font-size: .68rem; font-weight: 600; color: var(--muted); letter-spacing: .13em; text-transform: uppercase; }

.main-nav { min-width: 0; }
.main-nav ul { list-style: none; display: flex; gap: 2px; margin: 0; padding: 0; align-items: center; }
.main-nav li { position: relative; }
.main-nav a {
	display: block;
	position: relative;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .95rem;
	color: var(--primary);
	padding: 12px 14px;
	border-radius: var(--radius-sm);
	white-space: nowrap;
	transition: color var(--transition), background var(--transition);
}
/* An underline that grows from the left reads as deliberate; a background
   swap on every hover makes a header feel busy. */
.main-nav > ul > li > a::after {
	content: "";
	position: absolute;
	left: 14px; right: 14px;
	bottom: 4px;
	height: 2px;
	border-radius: 2px;
	background: var(--accent);
	transform: scaleX(0);
	transition: transform var(--transition);
}
.main-nav > ul > li > a:hover::after,
.main-nav > ul > li.current-menu-item > a::after,
.main-nav > ul > li > a[aria-current="page"]::after,
/* Set by the scroll spy, which owns the state on the one-page homepage. */
.main-nav > ul > li > a.is-current::after { transform: scaleX(1); }
.main-nav a:hover, .main-nav .current-menu-item > a, .main-nav a[aria-current="page"] { color: var(--secondary); background: transparent; }

/* Long menus should tighten up rather than wrap onto two lines.
 *
 * No upper bound on this, deliberately. The container is capped at
 * --container, so a 1600px viewport gives the header no more room than a
 * 1240px one does — the menu either fits inside that cap or it does not, and
 * with seven items plus the logo, the phone block and the button it does not
 * at the roomy padding. Bounding this at 1320px is what let the last item
 * slide under the phone block on wide screens. */
@media (min-width: 1101px) {
	.main-nav a { padding: 10px 9px; font-size: .89rem; }
	.main-nav > ul > li > a::after { left: 9px; right: 9px; }
	.header__inner { gap: 16px; }
	.header__cta { gap: 12px; }
}

/* Between the mobile drawer and a comfortable desktop row there is a band
   where the logo, a six-item menu, the phone block and the button will not all
   fit. The phone goes first — it is duplicated in the top bar directly above —
   and the logo steps down with it. */
@media (min-width: 901px) and (max-width: 1240px) {
	:root { --logo-h: 76px; --header-h-logo: 104px; }
	/* Duplicated in the top bar directly above, and the first thing to give
	   when the row gets tight. */
	.header__phone { display: none; }
}
.main-nav .menu-item-home-icon a { display: flex; align-items: center; padding: 10px 12px; }
.nav-home-icon { display: block; }

.main-nav .sub-menu {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 226px;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	padding: 8px;
	flex-direction: column;
	gap: 0;
	z-index: 40;
}
.main-nav .sub-menu a { font-weight: 500; }
.main-nav .sub-menu a::after { display: none; }
.main-nav .sub-menu a:hover { background: var(--light-bg); }
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { display: flex; }

.header__cta { display: flex; align-items: center; gap: 18px; flex-shrink: 0; }
.header__phone {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: 1rem;
	color: var(--primary);
	white-space: nowrap;
	transition: color var(--transition);
}
.header__phone svg { width: 18px; height: 18px; fill: var(--accent); flex: 0 0 auto; }
.header__phone small { display: block; font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); line-height: 1.4; }

/* --- Overlay header: transparent over the homepage hero ------------------
   The hero is pulled up under the header, so the bar starts see-through and
   becomes a solid white bar once the page scrolls. */
.site-header--overlay { background: transparent; border-bottom-color: transparent; box-shadow: none; }
.site-header--overlay .site-brand__text,
.site-header--overlay .main-nav a,
.site-header--overlay .header__phone { color: #fff; }
.site-header--overlay .site-brand__tag,
.site-header--overlay .header__phone small { color: rgba(255,255,255,.62); }
.site-header--overlay .nav-toggle span { background: #fff; }
.site-header--overlay.scrolled {
	background: rgba(255, 255, 255, .97);
	-webkit-backdrop-filter: saturate(1.6) blur(10px);
	backdrop-filter: saturate(1.6) blur(10px);
	border-bottom-color: var(--border);
	box-shadow: 0 10px 30px rgba(var(--primary-rgb), .1);
}
.site-header--overlay.scrolled .site-brand__text,
.site-header--overlay.scrolled .main-nav a,
.site-header--overlay.scrolled .header__phone { color: var(--primary); }
.site-header--overlay.scrolled .site-brand__tag,
.site-header--overlay.scrolled .header__phone small { color: var(--muted); }
.site-header--overlay.scrolled .nav-toggle span { background: var(--primary); }
/* The mobile drawer is always a white panel, so its links stay dark even
   while the bar above them is still transparent. */
.site-header--overlay .main-nav.is-open a { color: var(--primary); }

.nav-toggle {
	display: none;
	background: none;
	border: 0;
	width: 46px;
	height: 46px;
	padding: 10px;
	cursor: pointer;
	border-radius: var(--radius-sm);
}
.nav-toggle span { display: block; height: 2px; background: var(--primary); margin: 5px 0; border-radius: 2px; transition: transform var(--transition), opacity var(--transition), background var(--transition); }
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   6. Hero
   ---------------------------------------------------------
   Dark, photographic, full-bleed. Everything below it is light.
   The contrast between the two is the single biggest thing
   carrying "professional" on a contractor site.
   ========================================================= */
.hero {
	position: relative;
	isolation: isolate;
	background: var(--ink);
	color: #fff;
	display: flex;
	align-items: center;
	min-height: clamp(560px, 86vh, 860px);
	padding: calc(var(--header-h) + 64px) 0 72px;
	overflow: hidden;
}
/* Pull the hero up under the transparent header on the homepage. */
.has-overlay-header .hero { margin-top: calc(var(--header-h) * -1 - 1px); }

.hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }

/* Two layers, and both matter. The vertical gradient guarantees legible text
   over an unpredictable client photo; the navy pass ties that photo to the
   brand instead of leaving it a neutral grey rectangle. */
.hero__grade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background:
		linear-gradient(180deg, rgba(var(--ink-rgb), .86) 0%, rgba(var(--ink-rgb), .6) 42%, rgba(var(--ink-rgb), .92) 100%),
		linear-gradient(105deg, rgba(var(--primary-rgb), .72) 0%, rgba(var(--primary-rgb), .18) 68%);
}

/* With no hero photo set, the section still has to look like a designed
   surface rather than a flat navy box. Off-axis light plus a fine diagonal
   grain reads as a troweled slab at a glance. */
.hero--noimage {
	background:
		radial-gradient(120% 90% at 78% 8%, rgba(37, 140, 184, .5) 0%, rgba(var(--ink-rgb), 0) 60%),
		radial-gradient(90% 70% at 10% 100%, rgba(var(--accent-rgb), .16) 0%, rgba(var(--ink-rgb), 0) 62%),
		linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 62%, #081119 100%);
}
.hero--noimage .hero__grade {
	background-image: repeating-linear-gradient(58deg, rgba(255,255,255,.03) 0 2px, rgba(255,255,255,0) 2px 9px);
}

.hero__inner { position: relative; z-index: 2; max-width: 830px; }
.hero--center .hero__inner { max-width: 900px; margin: 0 auto; text-align: center; }
.hero--center .hero__sub { margin-left: auto; margin-right: auto; }
.hero--center .hero__actions { justify-content: center; }

.hero h1 { color: #fff; margin-bottom: .4em; text-shadow: 0 2px 30px rgba(0,0,0,.35); }
.hero h1 em { font-style: normal; color: var(--accent); }

.hero__badge {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: rgba(255,255,255,.1);
	border: 1px solid rgba(255,255,255,.22);
	color: #fff;
	font-family: var(--font-head);
	font-size: .76rem;
	font-weight: 600;
	letter-spacing: .13em;
	text-transform: uppercase;
	padding: 9px 18px;
	border-radius: 999px;
	margin-bottom: 26px;
}
.hero__badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .22); }

.hero__sub {
	font-size: clamp(1.08rem, 1.35vw, 1.28rem);
	line-height: 1.66;
	color: rgba(255,255,255,.88);
	max-width: 660px;
	margin-bottom: 36px;
}
.hero__actions { display: flex; gap: 14px; flex-wrap: wrap; }
.hero__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); }
.hero--split .hero__inner { max-width: none; display: grid; grid-template-columns: 1.05fr .95fr; gap: 54px; align-items: center; }

/* Trust row, inside the hero and above the fold. */
.hero__trust {
	position: relative;
	z-index: 2;
	margin-top: 56px;
	padding-top: 34px;
	border-top: 1px solid var(--ink-line);
	display: flex;
	align-items: center;
	gap: 40px;
}
.hero__trust-items {
	flex: 1 1 auto;
	min-width: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
	gap: 26px;
}

/* The accreditation seal, on a white plate. The artwork is blue on a
   transparent background, so its "A+ RATING" lettering would sit blue-on-slate
   and all but vanish — and the accrediting body expects a clean background
   behind its mark regardless. */
.hero__accred {
	flex: 0 0 auto;
	background: #fff;
	border-radius: 12px;
	padding: 12px 16px;
	box-shadow: 0 10px 30px rgba(var(--ink-rgb), .35);
	display: flex;
	align-items: center;
	gap: 14px;
}
.hero__accred img { height: 62px; width: auto; display: block; }
.hero__accred a { display: block; transition: opacity var(--transition); }
.hero__accred a:hover { opacity: .82; }
.hero--center .hero__trust { text-align: left; }
.hero--center .hero__trust-items { text-align: left; }
.trust-item { display: flex; align-items: center; gap: 14px; }
.trust-item__icon {
	width: 42px; height: 42px;
	flex: 0 0 auto;
	display: grid; place-items: center;
	border-radius: 11px;
	background: rgba(var(--accent-rgb), .14);
	border: 1px solid rgba(var(--accent-rgb), .28);
}
.trust-item__icon svg { width: 20px; height: 20px; fill: var(--accent); }
/* Scoped to the text column, not to .trust-item. A bare `.trust-item span`
   also matches .trust-item__icon — and at one class plus one element it
   outranks it, which forced the icon tile to display:block and left the glyph
   pinned to the top of its tile instead of centred in it. */
.trust-item__text strong { display: block; font-family: var(--font-head); font-size: .98rem; font-weight: 700; color: #fff; line-height: 1.3; }
.trust-item__text span { display: block; font-size: .84rem; color: var(--on-dark-soft); }

/* =========================================================
   7. Cards
   ========================================================= */
.card {
	background: #fff;
	border-radius: var(--radius);
	padding: var(--card-pad);
	height: 100%;
	position: relative;
	/* Grid rows are as tall as their tallest card, so shorter cards would
	   otherwise end with a pool of empty space under the text. Column flex
	   with the link pushed down makes every card end on the same line. */
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
.card > .card__link { margin-top: auto; padding-top: 16px; }
.card__media { flex: 0 0 auto; align-self: stretch; }
.card-shadow { box-shadow: var(--shadow); }
.card-border { border: 1px solid var(--border); }
.card-flat { background: var(--light-bg); }
.card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); }
.card h3 { margin-bottom: .5em; }
.card p { color: var(--muted); }
.card p:last-child { margin-bottom: 0; }

.card__media {
	/* Cancel the card's padding so the image sits flush to the top and side
	   edges — a card header image, not a picture inset inside the card. */
	margin: calc(var(--card-pad) * -1) calc(var(--card-pad) * -1) var(--card-pad);
	border-radius: var(--radius) var(--radius) 0 0;
	overflow: hidden;
	aspect-ratio: 16 / 10;
	background: var(--light-bg-2);
}
.card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.card:hover .card__media img { transform: scale(1.05); }

.card__icon {
	width: 54px; height: 54px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: var(--light-bg);
	color: var(--accent-dark);
	margin-bottom: 20px;
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.1rem;
}
.card__price { font-family: var(--font-head); font-weight: 700; color: var(--accent-dark); margin-bottom: .4em; }
.card__link {
	font-family: var(--font-head);
	font-weight: 700;
	display: inline-flex;
	gap: 7px;
	align-items: center;
	margin-top: 14px;
	color: var(--secondary);
	transition: gap var(--transition), color var(--transition);
}
.card__link:hover { color: var(--accent-dark); gap: 11px; }

/* --- Service card --------------------------------------------------------
   The one component a concrete site is judged on. Icon tile, title, a line of
   plain English, and a phone link — the same shape whether or not the client
   has uploaded photography yet. */
/* Flex rather than grid, deliberately. The services list is client-editable,
   so the count is unknown — and seven cards in a three-column grid strand the
   last one hard against the left edge of an otherwise empty row. Wrapping flex
   items with justify-content:center centre the remainder instead, which is
   what makes 4, 5, 7 or 8 services all look intentional. */
.svc-grid { display: flex; flex-wrap: wrap; gap: 26px; justify-content: center; }
.svc-card {
	flex: 1 1 300px;
	max-width: calc((100% - 52px) / 3);
	position: relative;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 34px 32px;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: hidden;
	transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition);
}
/* An amber rule that wipes across the top on hover — one moving part, which
   is what keeps a six-card grid feeling crisp instead of noisy. */
.svc-card::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent), var(--accent-dark));
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .35s cubic-bezier(.4,0,.2,1);
	z-index: 2;
}
.svc-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: transparent; }
.svc-card:hover::before { transform: scaleX(1); }

.svc-card__media {
	align-self: stretch;
	margin: -34px -32px 26px;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	background: var(--light-bg-2);
}
.svc-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.svc-card:hover .svc-card__media img { transform: scale(1.05); }

.svc-card__icon {
	width: 58px; height: 58px;
	flex: 0 0 auto;
	display: grid; place-items: center;
	border-radius: 15px;
	margin-bottom: 22px;
	background: linear-gradient(150deg, rgba(var(--accent-rgb), .2), rgba(var(--accent-rgb), .08));
	border: 1px solid rgba(var(--accent-rgb), .3);
	transition: background var(--transition), transform var(--transition);
}
.svc-card__icon svg { width: 27px; height: 27px; fill: var(--accent-dark); transition: fill var(--transition); }
.svc-card:hover .svc-card__icon { background: var(--accent); border-color: var(--accent); transform: scale(1.04); }
.svc-card:hover .svc-card__icon svg { fill: var(--accent-ink); }

/* Centred cards. Centring the title alone over left-aligned body copy and a
   left-aligned icon reads as a mistake, so the whole card centres together. */
.svc-card { align-items: center; text-align: center; }
.svc-card h3 { margin-bottom: .55em; }
.svc-card p { color: var(--muted); font-size: .98rem; line-height: 1.62; margin-bottom: 0; }
.svc-card__cta {
	margin-top: auto;
	padding-top: 20px;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .93rem;
	color: var(--accent-dark);
	transition: gap var(--transition);
}
.svc-card__cta svg { width: 15px; height: 15px; fill: currentColor; }
.svc-card__cta:hover { gap: 12px; color: var(--accent-dark); }

/* --- Feature tile (why choose us) ---------------------------------------- */
.feature-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }
.feature-tile {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 32px 26px;
	text-align: center;
	transition: transform var(--transition), box-shadow var(--transition);
}
.feature-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.feature-tile__icon {
	width: 56px; height: 56px;
	margin: 0 auto 18px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--primary);
}
.feature-tile__icon svg { width: 25px; height: 25px; fill: var(--accent); }
.feature-tile h3 { font-size: 1.08rem; margin-bottom: .45em; }
.feature-tile p { color: var(--muted); font-size: .94rem; line-height: 1.6; margin: 0; }
/* Inside the split row the four tiles have half the width to work with, so
   they stack two-up instead of four-across. */
.split .feature-grid { grid-template-columns: repeat(2, 1fr); }

/* --- Checklist ------------------------------------------------------------ */
.checklist { list-style: none; padding: 0; margin: 0 0 28px; display: grid; gap: 13px; }
.checklist li { display: flex; gap: 13px; align-items: flex-start; line-height: 1.55; }
.checklist li::before {
	content: "";
	flex: 0 0 auto;
	width: 22px; height: 22px;
	margin-top: 3px;
	border-radius: 50%;
	background: var(--accent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%2317202b' d='M9.6 16.6 5 12l1.4-1.4 3.2 3.2 8-8L19 7.2z'/%3E%3C/svg%3E") center / 15px no-repeat;
}

/* --- Split feature row (about / why us) ---------------------------------- */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.owner-quote {
	margin: 0;
	padding: 26px 28px;
	background: var(--primary);
	background-image: linear-gradient(150deg, var(--ink-2), var(--primary));
	border-radius: var(--radius);
	border-left: 3px solid var(--accent);
	color: rgba(255,255,255,.9);
	font-size: 1.02rem;
	font-style: italic;
	line-height: 1.65;
}
.owner-quote footer { margin-top: 12px; font-style: normal; font-family: var(--font-head); font-weight: 700; font-size: .92rem; color: var(--accent); }

/* =========================================================
   8. Stats and process
   ========================================================= */
.stats {
	background: var(--primary);
	background-image: radial-gradient(90% 140% at 88% 0%, rgba(37, 140, 184, .55) 0%, rgba(var(--primary-rgb), 0) 62%);
	color: #fff;
	padding: 56px 0;
}
.stats__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 30px; text-align: center; }
.stats .stat { position: relative; }
.stats .stat + .stat::before {
	content: "";
	position: absolute;
	left: -15px; top: 12%;
	height: 76%;
	width: 1px;
	background: var(--ink-line);
}
.stats__value { font-family: var(--font-head); font-size: clamp(2rem, 3.6vw, 3rem); font-weight: 800; color: var(--accent); line-height: 1; letter-spacing: -.03em; }
.stats__label { font-size: .9rem; color: var(--on-dark); margin-top: 10px; letter-spacing: .02em; }

.steps { counter-reset: step; display: grid; gap: 30px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }

/* An auto-fit grid strands the last step on a row of its own whenever the
   count does not divide by however many columns happen to fit — five steps
   render as four plus a lonely fifth. These pin the count to something that
   divides evenly. */
@media (min-width: 700px) {
	.steps--2, .steps--4 { grid-template-columns: repeat(2, 1fr); }
	.steps--3, .steps--5, .steps--6 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 1040px) {
	.steps--4 { grid-template-columns: repeat(4, 1fr); }
	.steps--5 { grid-template-columns: repeat(5, 1fr); gap: 22px; }
	.steps--6 { grid-template-columns: repeat(3, 1fr); }
}
.step { position: relative; padding-top: 8px; }
/* A hairline joining the steps turns four boxes into one sequence. */
@media (min-width: 700px) {
	.step::after {
		content: "";
		position: absolute;
		top: 33px;
		left: 62px;
		right: -30px;
		height: 1px;
		background: linear-gradient(90deg, var(--border), transparent);
	}
	.step:last-child::after { display: none; }
}
.step__num {
	counter-increment: step;
	position: relative;
	z-index: 1;
	width: 50px; height: 50px;
	display: grid; place-items: center;
	border-radius: 50%;
	background: var(--accent);
	color: var(--accent-ink);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: 1.08rem;
	margin-bottom: 20px;
	box-shadow: 0 0 0 6px rgba(var(--accent-rgb), .14);
}
.step__num::before { content: counter(step); }
.step h3 { margin-bottom: .45em; }
.step p { color: var(--muted); font-size: .97rem; }

/* =========================================================
   9. Testimonials
   ========================================================= */
.testimonials { position: relative; }

/* Every slide occupies the same grid cell, so the track is always as tall as
   the LONGEST review rather than the one currently showing. Slides used to be
   display:none, which meant the track resized on each change and the rest of
   the page jumped with it.
   visibility:hidden rather than opacity alone, so hidden slides stay out of the
   tab order and out of the accessibility tree. */
/* justify-items rather than auto margins on the slide: `margin-inline: auto`
   on a grid item makes it shrink-to-fit its own content, so a short review
   rendered a narrower card than a long one and the box changed width as well
   as height. */
.testimonial-track { display: grid; justify-items: center; min-height: 210px; }
.testimonial {
	grid-area: 1 / 1;
	/* The card is now as tall as the longest review, so a short one is centred
	   in it rather than sitting against the top with a pool of space beneath. */
	display: flex;
	flex-direction: column;
	justify-content: center;
	visibility: hidden;
	opacity: 0;
	transition: opacity var(--transition);
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 44px 46px 40px;
	width: 100%;
	max-width: 820px;
	margin: 0;
	text-align: center;
	position: relative;
	overflow: hidden;
}
/* An oversized quote mark set behind the text gives the block a focal point
   without another image to source. */
.testimonial::before {
	content: "\201C";
	position: absolute;
	top: -18px; left: 24px;
	font-family: Georgia, "Times New Roman", serif;
	font-size: 8rem;
	line-height: 1;
	color: var(--accent);
	opacity: .16;
	pointer-events: none;
}
.testimonial.is-active { visibility: visible; opacity: 1; }
.testimonial__stars { color: var(--accent); font-size: 1.2rem; letter-spacing: 3px; margin-bottom: 16px; position: relative; }
/* A single very long review would otherwise set the height of every slide.
   Past this the review scrolls inside the card instead. */
.testimonial__text {
	font-size: 1.14rem;
	line-height: 1.7;
	color: var(--primary);
	margin-bottom: 22px;
	position: relative;
	max-height: 13.5rem;
	overflow-y: auto;
	overscroll-behavior-y: contain;
	scrollbar-width: thin;
	scrollbar-color: rgba(var(--primary-rgb), .28) transparent;
}
.testimonial__text::-webkit-scrollbar { width: 6px; }
.testimonial__text::-webkit-scrollbar-track { background: transparent; }
.testimonial__text::-webkit-scrollbar-thumb { background: rgba(var(--primary-rgb), .28); border-radius: 3px; }
.testimonial__text::-webkit-scrollbar-thumb:hover { background: rgba(var(--primary-rgb), .45); }
/* Room for the scrollbar so it never sits on top of the words. */
.testimonial__text.is-scrollable { padding-right: 14px; }
.testimonial__text:focus-visible { outline: 3px solid var(--accent); outline-offset: 4px; }
.testimonial__who { font-family: var(--font-head); font-weight: 700; color: var(--primary); margin-bottom: 2px; }
.testimonial__meta { font-size: .85rem; color: var(--muted); margin: 0; }
.testimonial-nav { display: flex; justify-content: center; align-items: center; gap: 14px; margin-top: 28px; }
.testimonial-nav button {
	width: 44px; height: 44px;
	border-radius: 50%;
	border: 1px solid var(--border);
	background: #fff;
	cursor: pointer;
	font-size: 1.1rem;
	color: var(--primary);
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.testimonial-nav button:hover { background: var(--primary); color: #fff; border-color: var(--primary); }
.testimonial-dots { display: flex; gap: 9px; }
.testimonial-dots button { width: 9px; height: 9px; padding: 0; border-radius: 999px; border: 0; background: var(--border); cursor: pointer; transition: width var(--transition), background var(--transition); }
.testimonial-dots button[aria-current="true"] { background: var(--accent); width: 26px; }

/* =========================================================
   10. FAQ
   ========================================================= */
.faq { max-width: 860px; margin: 0 auto; }
.faq__item {
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	margin-bottom: 12px;
	background: #fff;
	overflow: hidden;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.faq__item:has(.faq__q[aria-expanded="true"]) { border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--shadow-xs); }
.faq__q {
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 22px 58px 22px 24px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: 1.03rem;
	color: var(--primary);
	cursor: pointer;
	position: relative;
	transition: color var(--transition);
}
.faq__q:hover { color: var(--secondary); }
.faq__q::after {
	content: "";
	position: absolute;
	right: 24px;
	top: 50%;
	width: 10px; height: 10px;
	margin-top: -7px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: rotate(45deg);
	transition: transform var(--transition), margin var(--transition);
}
.faq__q[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: -2px; }
.faq__a { padding: 0 24px; max-height: 0; overflow: hidden; transition: max-height var(--transition), padding var(--transition); color: var(--muted); }
.faq__a.is-open { padding: 0 24px 22px; max-height: 900px; }
.faq__a p:last-child { margin-bottom: 0; }

/* =========================================================
   11. Contact and forms
   ========================================================= */
/* Flex, so a site with only a phone and an email gets two sensibly sized
   cards in the middle of the row rather than two enormous half-width ones.
   An auto-fit grid has no way to say "share the space, but not past this". */
.contact-cards {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 20px;
	margin-bottom: 52px;
}
.contact-card { flex: 1 1 240px; max-width: 340px; }
.contact-card {
	background: var(--primary);
	background-image: linear-gradient(155deg, var(--ink-2) 0%, var(--primary) 58%);
	color: var(--on-dark);
	border-radius: var(--radius);
	padding: 32px 26px;
	text-align: center;
	transition: transform var(--transition), box-shadow var(--transition);
}
.contact-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.contact-card__icon {
	width: 50px; height: 50px;
	margin: 0 auto 16px;
	display: grid; place-items: center;
	border-radius: 13px;
	background: rgba(var(--accent-rgb), .16);
	border: 1px solid rgba(var(--accent-rgb), .3);
}
.contact-card__icon svg { width: 22px; height: 22px; fill: var(--accent); }
.contact-card h3 { color: #fff; font-size: 1.02rem; margin-bottom: .3em; }
.contact-card p { font-size: .87rem; color: var(--on-dark-soft); margin: 0 0 12px; }
/* A long email address has no break opportunities of its own, so it either
   overflows the card or gets chopped mid-word. Wrapping at any character is
   the lesser evil, and the small variant (set in PHP for long values) keeps
   most addresses on one line in the first place. */
.contact-card__value { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.04rem; line-height: 1.4; color: #fff; overflow-wrap: anywhere; }
.contact-card__value--sm { font-size: .86rem; letter-spacing: -.015em; }
a.contact-card__value:hover { color: var(--accent); }

.contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 50px; align-items: start; }
/* The form on its own, when there are no address/hours/map details to sit
   beside it. Capped and centred rather than run to the full container width —
   a 1180px-wide form looks like a data-entry screen, not an enquiry. */
.contact-panel--solo { max-width: 680px; margin-left: auto; margin-right: auto; }

.contact-panel {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 38px;
}
.contact-panel h3 { margin-bottom: .8em; }

.contact-list { list-style: none; padding: 0; margin: 0 0 26px; }
.contact-list li { display: flex; gap: 14px; margin-bottom: 18px; align-items: flex-start; }
.contact-list strong { display: block; font-family: var(--font-head); font-size: .76rem; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.contact-list__icon { flex: 0 0 auto; width: 38px; height: 38px; display: grid; place-items: center; border-radius: 10px; background: var(--light-bg); }
.contact-list__icon svg { width: 18px; height: 18px; fill: var(--accent-dark); }

.map-embed { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--border); }
.map-embed iframe { display: block; width: 100%; height: 340px; border: 0; }

.form-row { margin-bottom: 20px; }
.form-row label { display: block; font-family: var(--font-head); font-weight: 600; font-size: .88rem; margin-bottom: 7px; color: var(--primary); }
.form-row input, .form-row select, .form-row textarea {
	width: 100%;
	padding: 14px 16px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: var(--light-bg);
	transition: border-color var(--transition), box-shadow var(--transition), background var(--transition);
}
.form-row input::placeholder, .form-row textarea::placeholder { color: #98a5b4; }
.form-row input:focus, .form-row select:focus, .form-row textarea:focus {
	border-color: var(--accent);
	background: #fff;
	box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16);
	outline: none;
}
.form-row textarea { min-height: 150px; resize: vertical; }
.form-hp { position: absolute; left: -9999px; top: auto; width: 1px; height: 1px; overflow: hidden; }
.form-note { font-size: .83rem; color: var(--muted); }
.form-message { padding: 15px 18px; border-radius: var(--radius-sm); margin-bottom: 22px; }
.form-message--ok { background: #e8f6ed; color: #1b5e2a; border: 1px solid #b9e3c6; }
.form-message--err { background: #fdeaea; color: #8a1f1f; border: 1px solid #f3c3c3; }

/* =========================================================
   12. Blog
   ========================================================= */
.blog-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 50px; align-items: start; }
.post-card { background: #fff; border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; height: 100%; transition: transform var(--transition), box-shadow var(--transition); }
.post-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.post-card__media { overflow: hidden; }
.post-card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.post-card:hover .post-card__media img { transform: scale(1.05); }
.post-card__body { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.post-card__meta { font-size: .8rem; color: var(--muted); margin-bottom: 10px; display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.post-card__badge { background: rgba(var(--accent-rgb), .16); color: var(--accent-dark); padding: 3px 11px; border-radius: 999px; font-weight: 700; font-size: .74rem; letter-spacing: .04em; text-transform: uppercase; }
.post-card h3 { font-size: 1.18rem; margin-bottom: .45em; }
.post-card h3 a { color: var(--primary); }
.post-card h3 a:hover { color: var(--secondary); }
.post-card p { color: var(--muted); font-size: .96rem; }
.post-card__more { margin-top: auto; font-family: var(--font-head); font-weight: 700; padding-top: 12px; }

/* The lead article. Text gets the wider half: this sits in the blog column,
   not the full page width, so the body is only ~380px across and the global
   h2 clamp would set a 44px headline in it. */
.post-featured { display: grid; grid-template-columns: 1fr 1.15fr; align-items: stretch; background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; margin-bottom: 44px; }
.post-featured img { width: 100%; height: 100%; object-fit: cover; min-height: 260px; }
.post-featured__body { padding: 34px; display: flex; flex-direction: column; justify-content: center; }
.post-featured__body h2 { font-size: clamp(1.35rem, 1.9vw, 1.75rem); letter-spacing: -.02em; margin-bottom: .5em; }
.post-featured__body h2 a { color: var(--primary); }
.post-featured__body h2 a:hover { color: var(--secondary); }
.post-featured__body p { color: var(--muted); font-size: .97rem; }
.post-featured__body .post-card__more { margin-top: 8px; }

.entry-header { margin-bottom: 32px; }
.entry-meta { font-size: .89rem; color: var(--muted); display: flex; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.entry-content { font-size: 1.04rem; }
.entry-content > * + * { margin-top: 1.15em; }
.entry-content img { border-radius: var(--radius-sm); }
.entry-thumb img { width: 100%; border-radius: var(--radius); margin-bottom: 32px; }

.widget { background: var(--light-bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; margin-bottom: 24px; }
.widget h3 { font-size: 1.02rem; margin-bottom: .8em; }
.widget ul { list-style: none; padding: 0; margin: 0; }
.widget li { padding: 8px 0; border-bottom: 1px solid var(--border); }
.widget li:last-child { border-bottom: 0; }

.pagination { display: flex; gap: 8px; justify-content: center; margin-top: 48px; flex-wrap: wrap; }
.pagination .page-numbers {
	display: inline-grid;
	place-items: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: var(--radius-sm);
	border: 1px solid var(--border);
	font-family: var(--font-head);
	font-weight: 600;
	color: var(--primary);
	background: #fff;
	transition: background var(--transition), color var(--transition), border-color var(--transition);
}
.pagination .page-numbers.current, .pagination .page-numbers:hover { background: var(--primary); color: #fff; border-color: var(--primary); }

/* =========================================================
   13. Page hero, breadcrumbs, CTA, gallery
   ========================================================= */
.breadcrumbs { font-size: .86rem; color: var(--muted); padding: 16px 0; border-bottom: 1px solid var(--border); }
.breadcrumbs a { color: var(--muted); }
.breadcrumbs a:hover { color: var(--accent-dark); }
.breadcrumbs span + span::before { content: "/"; margin: 0 9px; color: var(--border); }

/* Interior pages get a compact dark banner rather than a grey one, so a
   service page opens on the same note as the homepage. */
.page-hero {
	background: var(--primary);
	background-image:
		radial-gradient(80% 160% at 88% 0%, rgba(37, 140, 184, .55) 0%, rgba(var(--primary-rgb), 0) 64%),
		linear-gradient(180deg, var(--ink-2) 0%, var(--primary) 100%);
	color: var(--on-dark);
	padding: 76px 0 68px;
	position: relative;
	overflow: hidden;
}
.page-hero::after {
	content: "";
	position: absolute;
	inset: auto 0 0 0;
	height: 4px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--accent-dark) 34%, rgba(var(--primary-rgb), 0) 34%);
}
.page-hero h1 { color: #fff; margin-bottom: .25em; }
.page-hero p { color: var(--on-dark); margin: 0; max-width: 720px; font-size: 1.08rem; }

/* --- Article banner -------------------------------------------------------
   A post's featured image becomes the banner behind its title, using the same
   gradient as the homepage hero. Negative z-index children paint above the
   element's own background but below its content, which is what lets the photo
   sit over .page-hero's gradient and under the heading. */
.page-hero--article { padding: 84px 0 74px; isolation: isolate; }
.page-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.page-hero__grade {
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(var(--ink-rgb), .88) 0%, rgba(var(--ink-rgb), .58) 46%, rgba(var(--ink-rgb), .92) 100%);
}
.page-hero--article h1 { font-size: clamp(2.1rem, 3.9vw, 3.1rem); max-width: 900px; }
.entry-meta--on-dark { color: var(--on-dark-soft); margin-bottom: 18px; align-items: center; }
.entry-meta--on-dark .post-card__badge { background: rgba(var(--accent-rgb), .2); color: var(--accent); }

/* --- Search form ---------------------------------------------------------- */
.search-form { display: flex; gap: 10px; align-items: stretch; }
.search-form__field {
	flex: 1 1 auto;
	min-width: 0;
	padding: 13px 16px;
	font-family: var(--font-body);
	font-size: .98rem;
	color: var(--text);
	border: 1px solid var(--border);
	border-radius: var(--radius-sm);
	background: #fff;
	transition: border-color var(--transition), box-shadow var(--transition);
}
.widget .search-form__field { background: #fff; }
.search-form__field::placeholder { color: #98a5b4; }
.search-form__field:focus { border-color: var(--accent); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), .16); outline: none; }
.search-form__submit {
	flex: 0 0 auto;
	width: 50px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: var(--radius-sm);
	background: var(--primary);
	color: #fff;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.search-form__submit svg { width: 19px; height: 19px; fill: currentColor; }
.search-form__submit:hover { background: var(--accent); color: var(--accent-ink); }

/* --- Previous / next post ------------------------------------------------- */
.post-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 18px;
	margin-top: 52px;
	padding-top: 34px;
	border-top: 1px solid var(--border);
}
.post-nav a {
	display: block;
	padding: 20px 22px;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	background: #fff;
	transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
}
.post-nav a:hover { border-color: rgba(var(--accent-rgb), .55); box-shadow: var(--shadow); transform: translateY(-2px); }
.post-nav small { display: block; font-family: var(--font-head); font-size: .7rem; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--muted); margin-bottom: 7px; }
.post-nav strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.02rem; line-height: 1.35; color: var(--primary); }
.post-nav__next { text-align: right; }
.entry-back { margin-top: 30px; font-family: var(--font-head); font-weight: 700; }

/* Long-form measure. The main column is wide enough for a card grid, which is
   about ten words too wide for comfortable reading. */
.blog-layout .entry-content { max-width: 72ch; }

/* --- Sidebar call to action ----------------------------------------------- */
.widget--cta {
	background: var(--primary);
	background-image: linear-gradient(155deg, var(--ink-2) 0%, var(--primary) 60%);
	border-color: transparent;
	text-align: center;
}
.widget--cta h3 { color: #fff; }
.widget--cta p { color: var(--on-dark-soft); font-size: .93rem; }

/* --- 404 ------------------------------------------------------------------ */
.page-hero .error-404__code {
	display: block;
	font-family: var(--font-head);
	font-size: clamp(3rem, 8vw, 5rem);
	font-weight: 800;
	color: var(--accent);
	line-height: 1;
	letter-spacing: -.05em;
	margin-bottom: 12px;
}
.error-404 { text-align: center; max-width: 760px; margin: 0 auto; padding: 0; }
.error-404__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.error-404__panel, .error-404__search { margin-top: 52px; }
.error-404 h2 { font-size: 1.15rem; margin-bottom: 1.1em; }
.error-404__links { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }
.error-404__links a {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	padding: 11px 18px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: #fff;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .94rem;
	color: var(--primary);
	transition: border-color var(--transition), color var(--transition), box-shadow var(--transition);
}
.error-404__links svg { width: 17px; height: 17px; fill: var(--accent-dark); }
.error-404__links a:hover { border-color: rgba(var(--accent-rgb), .6); color: var(--secondary); box-shadow: var(--shadow-xs); }
.error-404__search { max-width: 460px; margin-left: auto; margin-right: auto; }

.cta-band {
	background: var(--primary);
	background-image:
		radial-gradient(70% 140% at 12% 0%, rgba(37, 140, 184, .6) 0%, rgba(var(--primary-rgb), 0) 60%),
		radial-gradient(60% 120% at 92% 100%, rgba(var(--accent-rgb), .18) 0%, rgba(var(--primary-rgb), 0) 62%);
	color: var(--on-dark);
	text-align: center;
	padding: 84px 0;
	position: relative;
	overflow: hidden;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: rgba(255,255,255,.82); max-width: 640px; margin: 0 auto 30px; font-size: 1.08rem; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.gallery-item { margin: 0; position: relative; border-radius: var(--radius); overflow: hidden; background: var(--light-bg-2); }
.gallery-item a { display: block; position: relative; }
.gallery-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1); }
.gallery-item:hover img { transform: scale(1.06); }
.gallery-item figcaption {
	position: absolute;
	inset: auto 0 0 0;
	padding: 34px 20px 18px;
	font-family: var(--font-head);
	font-weight: 600;
	font-size: .95rem;
	color: #fff;
	background: linear-gradient(180deg, rgba(var(--ink-rgb), 0) 0%, rgba(var(--ink-rgb), .88) 100%);
	transform: translateY(8px);
	opacity: 0;
	transition: opacity var(--transition), transform var(--transition);
	pointer-events: none;
}
.gallery-item:hover figcaption, .gallery-item:focus-within figcaption { opacity: 1; transform: none; }

/* --- Video ---------------------------------------------------------------
   Each card is a poster and a button until it is pressed; main.js swaps in the
   real player on click. Nothing about the video is fetched before that. */
.video-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.video-grid--single { grid-template-columns: minmax(0, 860px); justify-content: center; }

.video-card { margin: 0; }
.video-card__player {
	display: block;
	position: relative;
	width: 100%;
	padding: 0;
	border: 0;
	margin: 0;
	aspect-ratio: 16 / 9;
	border-radius: var(--radius);
	overflow: hidden;
	background: var(--primary);
	cursor: pointer;
	transition: transform var(--transition), box-shadow var(--transition);
}
.video-card__player:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

.video-card__poster { width: 100%; height: 100%; object-fit: cover; transition: transform .55s cubic-bezier(.4,0,.2,1), filter var(--transition); }
.video-card__player:hover .video-card__poster { transform: scale(1.04); filter: brightness(.88); }
/* No still uploaded and none offered by the host: a branded panel beats the
   browser's default black rectangle. */
.video-card__poster--empty {
	display: block;
	width: 100%; height: 100%;
	background:
		radial-gradient(80% 120% at 70% 10%, rgba(37, 140, 184, .6) 0%, rgba(var(--ink-rgb), 0) 62%),
		linear-gradient(160deg, var(--ink-2) 0%, var(--ink) 100%);
}

.video-card__play {
	position: absolute;
	top: 50%; left: 50%;
	transform: translate(-50%, -50%);
	width: 74px; height: 74px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: var(--accent);
	box-shadow: 0 8px 30px rgba(var(--ink-rgb), .45);
	transition: transform var(--transition), background var(--transition);
}
/* The triangle is optically centred by nudging it right of true centre —
   a centred triangle always reads as sitting slightly left. */
.video-card__play svg { width: 30px; height: 30px; fill: var(--accent-ink); margin-left: 4px; }
.video-card__player:hover .video-card__play { transform: translate(-50%, -50%) scale(1.07); }
.video-card__player:focus-visible .video-card__play { transform: translate(-50%, -50%) scale(1.07); }

/* The injected player replaces the button and inherits its frame. */
.video-card__frame {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius);
	overflow: hidden;
	background: #000;
	display: block;
}

.video-card__caption { margin-top: 16px; }
.video-card__caption strong { display: block; font-family: var(--font-head); font-weight: 700; font-size: 1.05rem; color: var(--primary); line-height: 1.35; }
.video-card__caption span { display: block; margin-top: 4px; font-size: .93rem; color: var(--muted); }

.team-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 28px; }
.team-card { text-align: center; }
.team-card img { border-radius: var(--radius); margin-bottom: 16px; width: 100%; aspect-ratio: 1; object-fit: cover; }
.team-card h3 { margin-bottom: .2em; }
.team-card__role { color: var(--accent-dark); font-size: .9rem; font-weight: 600; }

.pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 26px; }
.price-card { text-align: center; border: 1px solid var(--border); border-radius: var(--radius); padding: 38px 28px; background: #fff; transition: transform var(--transition), box-shadow var(--transition); }
.price-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.price-card__amount { font-family: var(--font-head); font-size: 2.3rem; font-weight: 800; color: var(--primary); letter-spacing: -.03em; }

/* --- Financing band and accreditation badges ------------------------------
   Two things that both say "you can trust this and afford this", so they share
   a band rather than each taking a full section of their own. */
/* No background of its own — it takes its turn in the light/tint alternation
   like every other section. The inner card carries a border and a shadow so it
   still reads as a panel when the section behind it is white. */
.financing__inner {
	display: grid;
	grid-template-columns: 1.35fr .65fr;
	gap: 48px;
	align-items: center;
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	box-shadow: var(--shadow);
	padding: 44px 46px;
}
/* Same grid min-width trap as .svc-body: the offer column will not shrink
   below its own min-content and pushes the card sideways on a narrow phone. */
.financing__offer, .financing__badges { min-width: 0; }
.financing__offer h2 { font-size: clamp(1.5rem, 2.3vw, 2rem); margin-bottom: .4em; overflow-wrap: anywhere; }
.financing__offer p { color: var(--muted); margin-bottom: 24px; }
.financing__note { font-size: .83rem; color: var(--muted); margin: 16px 0 0; }

.financing__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 22px;
	align-items: center;
	justify-content: center;
}
/* The badge is supplied by the accrediting body, so its own artwork decides
   how it looks — the theme only bounds it and keeps it from stretching. */
.badge { display: inline-flex; }
.badge img { max-height: 96px; width: auto; max-width: 200px; object-fit: contain; }
a.badge { transition: transform var(--transition), opacity var(--transition); }
a.badge:hover { transform: translateY(-2px); opacity: .88; }

/* With no financing offer set, the badges are all there is — centre them
   rather than leaving them pinned to a narrow right-hand column. */
.financing__inner:not(:has(.financing__offer)) { grid-template-columns: 1fr; }
.financing__inner:not(:has(.financing__badges)) { grid-template-columns: 1fr; }

.footer__badges { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; margin-top: 22px; }
.footer__badges img { max-height: 64px; width: auto; max-width: 150px; object-fit: contain; }

/* --- Lightbox ------------------------------------------------------------ */
.lightbox {
	position: fixed;
	inset: 0;
	z-index: 900;
	display: none;
	place-items: center;
	padding: 6vh 6vw;
	background: rgba(var(--ink-rgb), .94);
}
.lightbox.is-open { display: grid; }
.lightbox img { max-width: 100%; max-height: 88vh; width: auto; border-radius: var(--radius-sm); box-shadow: var(--shadow-lg); }
.lightbox__close {
	position: absolute;
	top: 18px; right: 20px;
	width: 46px; height: 46px;
	border: 0;
	border-radius: 50%;
	background: rgba(255,255,255,.14);
	color: #fff;
	font-size: 1.5rem;
	line-height: 1;
	cursor: pointer;
	transition: background var(--transition), color var(--transition);
}
.lightbox__close:hover { background: var(--accent); color: var(--accent-ink); }

/* --- Sticky mobile CTA and back to top ----------------------------------- */
.sticky-cta {
	position: fixed;
	left: 0; right: 0; bottom: 0;
	display: none;
	background: var(--primary);
	z-index: 500;
	box-shadow: 0 -4px 20px rgba(var(--ink-rgb), .26);
}
.sticky-cta a {
	flex: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	text-align: center;
	padding: 16px 8px;
	color: #fff;
	font-family: var(--font-head);
	font-weight: 700;
	font-size: .95rem;
}
.sticky-cta a svg { width: 16px; height: 16px; fill: currentColor; }
.sticky-cta a + a { border-left: 1px solid rgba(255,255,255,.16); }
.sticky-cta a.is-accent { background: var(--accent); color: var(--accent-ink); }

.to-top {
	position: fixed;
	right: 20px;
	bottom: 20px;
	width: 46px; height: 46px;
	border-radius: 50%;
	border: 0;
	background: var(--primary);
	color: #fff;
	font-size: 1.2rem;
	cursor: pointer;
	opacity: 0;
	pointer-events: none;
	transition: opacity var(--transition), background var(--transition), color var(--transition);
	z-index: 400;
	box-shadow: var(--shadow);
}
.to-top:hover { background: var(--accent); color: var(--accent-ink); }
.to-top.is-visible { opacity: 1; pointer-events: auto; }


/* =========================================================
   14. Footer
   ========================================================= */
.site-footer {
	background: var(--ink);
	background-image: radial-gradient(60% 120% at 82% 0%, rgba(37, 140, 184, .4) 0%, rgba(var(--ink-rgb), 0) 62%);
	color: var(--on-dark);
	padding: 72px 0 0;
	font-size: .95rem;
}
.site-footer--light { background: var(--light-bg); color: var(--muted); background-image: none; }
.site-footer h3 { color: #fff; font-size: .82rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; margin-bottom: 1.5em; }
.site-footer--light h3 { color: var(--primary); }
.site-footer a { color: var(--on-dark); }
.site-footer--light a { color: var(--muted); }
.site-footer a:hover { color: var(--accent); }
.footer__grid { display: grid; gap: 40px; }
.footer__grid.cols-2 { grid-template-columns: repeat(2, 1fr); }
.footer__grid.cols-3 { grid-template-columns: repeat(3, 1fr); }
.footer__grid.cols-4 { grid-template-columns: 1.5fr 1fr 1fr 1.1fr; }
.footer__grid ul { list-style: none; padding: 0; margin: 0; }
.footer__grid li { padding: 6px 0; }
/* Needs to out-specify `.site-footer h3`, which uppercases and shrinks every
   other heading in the footer — the brand line is a name, not a column label. */
.site-footer h3.footer__brand { font-family: var(--font-head); font-weight: 800; font-size: 1.24rem; color: #fff; letter-spacing: -.02em; margin-bottom: .55em; text-transform: none; }
.footer__about { color: var(--on-dark-soft); line-height: 1.65; margin-bottom: 22px; }
.footer__logo { height: 68px; width: auto; max-width: 260px; object-fit: contain; object-position: left center; margin-bottom: 20px; }
.site-footer .social-nav { margin-top: 6px; }
.footer__bottom {
	margin-top: 54px;
	padding: 24px 0;
	border-top: 1px solid var(--ink-line);
	display: flex;
	justify-content: space-between;
	gap: 16px;
	flex-wrap: wrap;
	font-size: .86rem;
	color: var(--on-dark-soft);
}
.footer__bottom p { margin: 0; }
.site-footer--light .footer__bottom { border-top-color: var(--border); }

/* =========================================================
   15. Animation
   ========================================================= */
.anim-target { opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s cubic-bezier(.4,0,.2,1); }
.anim-target.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.anim-target { opacity: 1 !important; transform: none !important; transition: none; }
	.testimonial { transition: none; }
	* { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* =========================================================
   16. Responsive
   ========================================================= */
@media (max-width: 1100px) {
	.svc-card { max-width: calc((100% - 26px) / 2); }
	.feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 1024px) {
	:root { --section-y: 76px; }
	.grid-4 { grid-template-columns: repeat(2, 1fr); }
	.blog-layout { grid-template-columns: 1fr; }
	.footer__grid.cols-4 { grid-template-columns: repeat(2, 1fr); }
	.hero--split .hero__inner { grid-template-columns: 1fr; }
	.post-featured { grid-template-columns: 1fr; }
	.post-featured img { aspect-ratio: 16 / 9; min-height: 0; }
	.contact-grid { grid-template-columns: 1fr; gap: 36px; }
	.split { grid-template-columns: 1fr; gap: 36px; }
}

/* The point at which the menu becomes a drawer.
 *
 * Set by the widest the menu row can get, not by a tablet/phone guess. Seven
 * items plus the logo, the phone block and the button need about 1100px inside
 * the container; below that the row either wraps or the last item slides under
 * the phone. Kept separate from the 900px block below, which is about the top
 * bar, the logo scale and the hero — none of which want to change at 1100. */
@media (max-width: 1100px) {
	.nav-toggle { display: block; }
	.main-nav {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		background: #fff;
		border-top: 1px solid var(--border);
		box-shadow: var(--shadow-lg);
		padding: 12px 0 18px;
		max-height: calc(100vh - 100px);
		overflow-y: auto;
	}
	.main-nav.is-open { display: block; }
	.main-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: 0 18px; }
	.main-nav a { padding: 15px 10px; border-bottom: 1px solid var(--border); border-radius: 0; }
	.main-nav > ul > li > a::after { display: none; }
	.main-nav .sub-menu { display: flex; position: static; border: 0; box-shadow: none; padding: 0 0 0 16px; min-width: 0; }
	.header__phone { display: none; }
}

@media (max-width: 900px) {
	.header__phone { display: none; }
	.header__cta .btn { display: none; }
	:root { --logo-h: 66px; --logo-max-w: 240px; --header-h-logo: 92px; }
	/* Three columns will not fit on a phone. Stack them, centred, keeping the
	   reading order the same as the desktop row. */
	.topbar__inner { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 8px; }
	.topbar__left, .topbar__center, .topbar__right { justify-self: center; text-align: center; }
	.topbar__right { justify-content: center; }
	.topbar__left:empty { display: none; }
	.hero { min-height: 0; padding: calc(var(--header-h) + 56px) 0 60px; }
	.hero__trust { margin-top: 44px; gap: 26px; flex-wrap: wrap; }
	.hero__accred img { height: 54px; }
	.stats .stat + .stat::before { display: none; }
}

@media (max-width: 768px) {
	:root { --section-y: 60px; --card-pad: 26px; --header-h: 72px; --header-h-logo: 86px; --logo-h: 58px; --logo-max-w: 200px; }
	body { padding-bottom: 56px; }
	.grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; }
	.feature-grid, .split .feature-grid { grid-template-columns: 1fr; }
	.video-grid { grid-template-columns: 1fr; }
	.video-card__play { width: 62px; height: 62px; }
	.video-card__play svg { width: 25px; height: 25px; }
	.svc-card { flex-basis: 100%; max-width: 100%; }
	.footer__grid.cols-2, .footer__grid.cols-3, .footer__grid.cols-4 { grid-template-columns: 1fr; }
	.footer__grid { gap: 32px; }
	.footer__bottom { flex-direction: column; gap: 6px; margin-top: 40px; }
	.sticky-cta { display: flex; }
	.to-top { bottom: 70px; }
	.section-head { margin-bottom: 38px; }
	.testimonial { padding: 34px 24px 30px; }
	.testimonial::before { font-size: 5.5rem; left: 14px; }
	.contact-panel { padding: 26px; }
	.financing__inner { grid-template-columns: 1fr; gap: 32px; padding: 30px 26px; }
	.financing__badges { justify-content: flex-start; }
	.page-hero { padding: 52px 0 46px; }
	.page-hero--article { padding: 58px 0 50px; }
	.cta-band { padding: 60px 0; }
	.post-nav { grid-template-columns: 1fr; margin-top: 40px; }
	.post-nav__next { text-align: left; }
	.error-404__panel, .error-404__search { margin-top: 38px; }
	.step::after { display: none; }
}

@media (max-width: 480px) {
	:root { --gutter: 20px; }
	.btn { width: 100%; }
	.hero__actions, .hero__actions .btn { width: 100%; }
	.cta-band__actions .btn { width: 100%; }
	.hero__trust { flex-direction: column; align-items: flex-start; gap: 24px; }
	.hero__trust-items { grid-template-columns: 1fr; width: 100%; }
	.hero__accred { align-self: flex-start; }
	.hero__accred img { height: 50px; }
	.gallery-grid { grid-template-columns: 1fr; }
	.svc-card { padding: 28px 24px; }
	.svc-card__media { margin: -28px -24px 22px; }
}

/* Above phone width there is no row to swipe, so the hint stays hidden. This
   sits before the media query below deliberately: after it, it would win on
   source order and the hint would never appear. */
.swipe-hint { display: none; }

/* =========================================================
   16b. Swipe rows (phones only)
   ---------------------------------------------------------
   Seven service cards stacked vertically is most of why the homepage runs to
   nineteen phone screens. Below 768px the card grids become horizontal
   scroll-snap rows instead — native momentum scrolling and no carousel
   library, so it stays keyboard- and screen-reader-navigable as an ordinary
   scrollable list.

   Cards are 84% wide so the next one peeks past the edge. That peek is the
   whole affordance: without it people do not know the row scrolls.
   ========================================================= */
@media (max-width: 768px) {
	.svc-grid,
	.split .feature-grid,
	.video-grid,
	.gallery-grid {
		display: flex;
		flex-wrap: nowrap;
		/* Must be reset. The desktop rule centres the row, and centred flex
		   items in a scroll container overflow equally in BOTH directions —
		   the first cards end up off to the left where scrolling cannot reach
		   them, and the row opens on card four. */
		justify-content: flex-start;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		gap: 14px;
		/* Bleed to the screen edges, then pad back in, so a card can sit flush
		   with the container edge and still scroll past it. */
		margin-inline: calc(var(--gutter) * -1);
		padding-inline: var(--gutter);
		padding-bottom: 4px;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	.svc-grid::-webkit-scrollbar,
	.split .feature-grid::-webkit-scrollbar,
	.video-grid::-webkit-scrollbar,
	.gallery-grid::-webkit-scrollbar { display: none; }

	.svc-grid > .svc-card,
	.split .feature-grid > .feature-tile,
	.video-grid > .video-card,
	.gallery-grid > .gallery-item {
		flex: 0 0 84%;
		max-width: 84%;
		scroll-snap-align: start;
	}
	.video-grid > .video-card { flex-basis: 88%; max-width: 88%; }

	/* A card scrolled off to the right is outside the viewport, so the reveal
	   observer never fires for it and it would sit at opacity 0 until swiped
	   to. Inside a swipe row the cards are simply always visible. */
	.svc-grid .anim-target,
	.split .feature-grid.anim-target,
	.video-grid .anim-target,
	.gallery-grid .anim-target { opacity: 1; transform: none; }

	/* Equal heights across the row, so the snap does not jump about. */
	.svc-grid > .svc-card { height: auto; }

	.swipe-hint {
		display: flex;
		align-items: center;
		gap: 8px;
		margin: -14px 0 22px;
		font-family: var(--font-head);
		font-size: .82rem;
		font-weight: 600;
		letter-spacing: .04em;
		text-transform: uppercase;
		color: var(--muted);
	}
	.swipe-hint::after {
		content: "";
		flex: 1 1 auto;
		height: 1px;
		background: linear-gradient(90deg, var(--border), transparent);
	}
	.swipe-hint svg { width: 16px; height: 16px; fill: var(--accent-dark); }
}

/* =========================================================
   17. Print
   ========================================================= */
@media print {
	.topbar, .site-header, .site-footer, .sticky-cta, .to-top, .btn, .lightbox { display: none !important; }
	body { color: #000; font-size: 12pt; padding-bottom: 0; }
	.hero { background: none; color: #000; min-height: 0; padding: 0; margin: 0; }
	.hero h1, .hero h1 em { color: #000; }
	.hero__grade, .hero__bg { display: none; }
}

/* Card variant chosen in the build spec: shadow */
.card { box-shadow: var(--shadow); }


/* =========================================================
   Custom CSS (Brand & Design tab / Design Chat)
   Everything below is yours. Regenerated from the build spec,
   so edit it there rather than here if you plan to rebuild.
   ========================================================= */

/* =========================================================
   18. Service detail pages
   ---------------------------------------------------------
   Added in 1.5.0, when each service got a page of its own.
   ========================================================= */

/* Whole-card link. The anchor stays a real link — focusable, announced, with a
   unique accessible name from its hidden suffix — and its ::after simply grows
   to cover the card, so the click target is the card without wrapping every
   heading and paragraph inside an <a>. */
.svc-card--linked { position: relative; }
.svc-card--linked .svc-card__cta::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
}
.svc-card--linked:hover { border-color: rgba(var(--accent-rgb), .55); }
.svc-card--linked:focus-within {
	outline: 3px solid var(--accent);
	outline-offset: 3px;
}
/* The stretched link already carries focus for the whole card, so the anchor's
   own ring would draw a second, smaller box inside the first. */
.svc-card--linked .svc-card__cta:focus-visible { outline: none; }

.svc-layout {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 340px;
	gap: 56px;
	align-items: start;
}
/* A grid item defaults to min-width:auto, so it refuses to shrink below the
   widest unbreakable thing inside it — here the numbered process list, whose
   52px indent plus a long line set a min-content wider than a 320px phone.
   Without this the column pushes the whole page sideways. */
.svc-body, .svc-aside { min-width: 0; }
.svc-body * { min-width: 0; }

.svc-body__lede {
	font-size: 1.16rem;
	line-height: 1.65;
	color: var(--ink-2);
	margin: 0 0 34px;
}
.svc-body__section { margin-bottom: 40px; }
.svc-body__section:last-child { margin-bottom: 0; }
.svc-body__section > h2 {
	font-size: 1.5rem;
	margin: 0 0 16px;
	scroll-margin-top: calc(var(--header-h) + 24px);
}
.svc-body__section p { margin: 0 0 15px; }
.svc-body__section p:last-child { margin-bottom: 0; }

/* Numbered process list. The counter is drawn rather than using list-style so
   it can carry the accent colour and sit on the same baseline as the title. */
.svc-steps { list-style: none; margin: 0; padding: 0; counter-reset: svcstep; }
.svc-steps li {
	counter-increment: svcstep;
	position: relative;
	padding: 0 0 18px 52px;
	margin: 0;
}
.svc-steps li::before {
	content: counter(svcstep);
	position: absolute;
	left: 0;
	top: 0;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	display: grid;
	place-items: center;
	background: rgba(var(--accent-rgb), .16);
	color: var(--accent-dark);
	font-family: var(--font-head);
	font-weight: 800;
	font-size: .95rem;
}
.svc-steps li strong { display: block; margin-bottom: 3px; }
.svc-steps li span { color: var(--muted); }

.area-list {
	list-style: none;
	margin: 18px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.area-list li {
	margin: 0;
	padding: 7px 14px;
	border: 1px solid var(--border);
	border-radius: 999px;
	background: var(--surface-2, #f6f8fa);
	font-size: .9rem;
	color: var(--ink-2);
}

/* --- Service page sidebar ------------------------------------------------ */
.svc-aside { position: sticky; top: calc(var(--header-h) + 20px); display: grid; gap: 20px; }
.svc-aside__card {
	background: #fff;
	border: 1px solid var(--border);
	border-radius: var(--radius);
	padding: 26px;
	box-shadow: var(--shadow-sm, 0 2px 10px rgba(var(--ink-rgb), .06));
}
.svc-aside__title { font-size: 1.15rem; margin: 0 0 10px; }
.svc-aside__card > p { color: var(--muted); margin: 0 0 18px; font-size: .95rem; }
.svc-aside .btn-block { display: flex; width: 100%; justify-content: center; margin-bottom: 10px; }
.svc-aside .btn-block:last-of-type { margin-bottom: 0; }
.svc-aside__financing {
	margin-top: 16px;
	display: inline-flex;
	align-items: center;
	gap: 9px;
	font-weight: 600;
	font-size: .93rem;
	color: var(--accent-dark);
}
.svc-aside__financing svg { width: 16px; height: 16px; fill: currentColor; }
.svc-aside__financing:hover { text-decoration: underline; }

.svc-others ul { list-style: none; margin: 0; padding: 0; }
.svc-others li + li { border-top: 1px solid var(--border); }
.svc-others a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 11px 0;
	color: var(--ink);
	font-weight: 600;
	font-size: .95rem;
}
.svc-others a svg { width: 18px; height: 18px; fill: var(--accent-dark); flex: 0 0 auto; }
.svc-others a:hover { color: var(--accent-dark); }

.page-hero__lede {
	max-width: 62ch;
	font-size: 1.08rem;
	color: rgba(255, 255, 255, .82);
	margin: 12px 0 0;
}
.page-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

@media (max-width: 980px) {
	.svc-layout { grid-template-columns: 1fr; gap: 40px; }
	.svc-aside { position: static; }
}

/* --- Sticky bar with three buttons --------------------------------------- */
/* Two buttons carry their full labels. Three do not fit at 360px, so the outer
   two swap to short ones. Both labels are always in the markup and one is
   hidden, rather than swapped in by script, so the bar is correct on first
   paint with no reflow. */
.sticky-cta__short { display: none; }
.sticky-cta--3 .sticky-cta__full { display: none; }
.sticky-cta--3 .sticky-cta__short { display: inline; }
.sticky-cta--3 a {
	padding-inline: 4px;
	font-size: .88rem;
	gap: 6px;
	min-width: 0;
}
.sticky-cta--3 a svg { width: 15px; height: 15px; flex: 0 0 auto; }

@media (max-width: 360px) {
	.sticky-cta--3 a { font-size: .8rem; gap: 5px; }
}

/* The estimate card holds a button whose label is a whole phone number, and a
   grid item will not shrink below that. On a narrow phone the card padding
   comes in and the button is allowed to wrap rather than pushing the page
   sideways. */
@media (max-width: 480px) {
	.svc-aside__card { min-width: 0; padding: 22px 18px; }
	.svc-aside .btn--wide {
		min-width: 0;
		padding-inline: 14px;
		white-space: normal;
		text-align: center;
		line-height: 1.3;
	}
	.svc-steps li { padding-left: 44px; }
	.area-list li { font-size: .85rem; padding: 6px 11px; }
}